Files

8.5 KiB
Raw Permalink Blame History

Coverage: area settings

Owner of theme/60-settings.css. Surface main, every /settings/* page plus the dialogs and menus opened from them. Measured live on 2026-10-06/07 (Steam build of that day, theme bundle with all 9 area files present). All shots are 1.5x and live in shots/. "Before" = the inventory's --theme off shot (docs/inventory/settings.md). "After" = set_*_after taken with --theme on. Over-the-room review composites (shot over a synthetic room: bright window, lamp, dark sofa) were made locally from the same PNGs.

Controls (field rows, toggles, sliders, dropdowns, buttons, inputs, segmented radios, checkboxes, menus, modal sheets, focus ring) come from 10-primitives.css. This file only adds the layout-level look and the page-specific widgets, inside settings containers.

Scope

  • Steam's PagedSettingsDialog is shared. The settings rules are scoped to %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings}), so game Properties (appdetails) and Notes (social) keep their owners' look.
  • /zoo (developer gallery, social area) uses the same plain dialog and picks up the same sidebar and page treatment. That is consistent; the social owner can opt it out (see Requests).
  • Storage rules are scoped to .BasicUI %{ContentManagement}%{InPagedSettings} (only exists on /settings/storage). .BasicUI is needed because Steam's storage text rules reach (0,5,0).
  • Dialog-only widgets (%{BitRateTable}, %{AutoExplainer}) are settings-only tokens and are written unscoped.

What the settings layer does

Element Treatment (tokens)
Page roots PagedSettingsDialog, PagedSettingDialog_ContentColumn Opaque #0e141b / #1a1c21 cleared: the shell's window glass shows. No blur on the content column (the page scrolls in it).
Sidebar PagedSettingsDialog_PageListColumn Opaque #2b2d33 cleared. A raised pane is the column's ::before (unused by Steam): inset 8/6/8/8 px, --lgs-r-panel (concentric with the 32 px window), --lgs-panel-sheen over --lgs-fill-1, --lgs-glass-rim. A fill, not glass (no glass on glass). isolation: isolate on the column keeps the pane under the list without touching any Steam z-index. Pointer-events none.
Page list items PagedSettingsDialog_PageListItem Labels and icons --lgs-text-1 + --lgs-text-shadow. Steam's blue gradients and 2 px left bar removed (colour only; border width kept). Capsule inset 3/14/3/16 px. Hover --lgs-hover-fill. Focus (:focus/.gpfocus): --lgs-focus-fill + --lgs-focus-ring. Selected (Active): white --lgs-selected-fill capsule, dark --lgs-text-on-selected label and icon, --lgs-pill-shadow. Selected + focused: the white pill gets a separated ring (2 px --lgs-scrim gap, 2 px --lgs-focus-outline, --lgs-focus-glow). Disabled item --lgs-text-disabled. The white pill is painted by the item's own background (two half-disc caps and a centre band, no overlap, so the translucent white stays even). It is real paint on the label's ancestor, so contrast tools see a dark label on white. Hover/focus fills and rings are the item's ::before (the item's transform makes it the containing block and stacking context). Steam's %{ScaledChildren} 1.1 scale is untouched.
Group separators %{PagedSettingsDialog>Separator} --lgs-separator hairlines.
Page title .DialogHeader --lgs-text-1 (the primitives add the text shadow).
Section headers .SettingsDialogSubHeader --lgs-text-2 + text shadow; padding-inline-start: 12px so they align with the row labels in the card below (a small padding tweak: no container geometry changed).
Body text %{SettingsDialogBodyText} / %{SettingsDialogDescriptionText} --lgs-text-1 / --lgs-text-2.
In-text links (a in the page: Family "Steam Families", In Game "Steam Networking", Downloads last-played) No thin coloured text: --lgs-text-1 with a --lgs-text-3 underline, brightening to --lgs-text-1 on hover and focus. Steam's FocusRing still marks focus.
Scroll edges Mask on the page scroller PagedSettingsDialog_PageContent: content dissolves from 44 px to 4 px under the floating header capsules and over the last 22 px at the bottom. Mask on the page list: from 40 px to 16 px at the top and over the last 20 px. Masks only: no geometry or hit-testing change, and focused rows never reach the bands (Steam's scroll-padding is 250/60 px; the list's is 36 px).
Game Recording mode cards %{RecordingModeOption} --lgs-fill-1 cards, --lgs-r-card, --lgs-control-rim; hover --lgs-hover-fill; chosen mode (%{WarningBox>Active}) --lgs-fill-3 + --lgs-control-outline edge; focus --lgs-focus-fill (!important), with Steam's FocusRing as the ring. Header --lgs-text-1, body --lgs-text-2. Radio pip: sunken well with an outline ring; active pip = white --lgs-selected-fill disc with a dark centre dot (the "selected" white).
Game Recording "High (Default)" suffix %{BitrateSetting>Muted} --lgs-text-2.
Downloads "Game update timing" %{FakeContainer} Matches the grouped card: --lgs-fill-1, --lgs-r-card, --lgs-text-1.
Bluetooth "Not connected" badge, "Available to pair" header --lgs-text-2.
Notifications sticky headers %{CheckboxHeaders}, toggle-pair headers %{NotificationSectionHeader} "Notify me via" --lgs-text-2; column labels --lgs-text-1 + shadow; section header --lgs-text-2, "Show Toast / Play Sound" --lgs-text-1. Steam's sticky behaviour and its own 2 px column blur while scrolling are untouched.
Friends & Chat preview friend %{FakeFriend} Name --lgs-text-1, status --lgs-text-2; avatar --lgs-r-small. The online blue stays as Steam's status-bar fill (semantic colour as a fill, not thin text).
Home %{HiddenGameLabel}, %{GameCount}, %{Instructions} --lgs-text-1 / --lgs-text-2.
Family %{TrySteamFamiliesButton} (Primary) The page's one tinted action: --lgs-tint-primary whole capsule, white label (focus from the primitives: tint-lift + ring).
Storage drive tabs %{InstallFolder} Capsules: rest --lgs-fill-1 + --lgs-control-rim, name --lgs-text-1, size --lgs-text-2; hover --lgs-hover-fill; selected (%{IsSelected}) = white pill with a dark label (size at .66); focus = --lgs-focus-fill + --lgs-focus-ring; selected + focused = white pill + separated ring.
Storage usage bar %{DriveUsageIndicator} Steam's striped track replaced by a --lgs-fill-3 capsule + --lgs-track-depth. Category bars and legend dots keep their meaning, drawn from the system palette: Games --lgs-blue, Workshop --lgs-green, Shaders --lgs-purple, Non-Steam --lgs-yellow, Free --lgs-fill-3 (Media keeps Steam's dark green). Path --lgs-text-2, legend labels --lgs-text-1, numbers --lgs-text-2.
Storage list "Items" header --lgs-text-1, count --lgs-text-2, rule --lgs-separator. The list %{LibraryInventory} is one grouped card (--lgs-fill-1, --lgs-r-card, --lgs-control-rim). Rows %{AppBody} (virtualized, inline geometry untouched): --lgs-r-row; hover --lgs-hover-fill; focus --lgs-focus-fill + --lgs-focus-ring (!important). Names and sizes --lgs-text-1; values, %{SpecialSectionText} and icons --lgs-text-2 (--lgs-text-1 when focused). Small art (content) rounded --lgs-r-small. The sort dropdown is the Library area's control and is left alone.
Recording Quality dialog %{BitRateTable} in a sunken well (--lgs-well-bg, --lgs-well-shadow, --lgs-r-row, --lgs-text-1); %{AutoExplainer} --lgs-text-2. The sheet, dropdown and buttons are the primitives'.

Nothing hides, collapses or disables anything. No position/size/overflow/flex changes on Steam containers, and no Steam transform, transition or animation is touched. Steam's own pseudo-elements are not reused. Our ::befores (sidebar pane, nav capsule) are pointer-events none.

Screens and states

How to reach: the --pre snippets below use the inventory's prelude and helpers (docs/inventory/settings.md §0.3–0.4). Scrolled states: --pre "(async()=>{const pc=L.q('main','%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent}'); pc.scrollTop=N; await L.sleep(450); return pc.scrollTop})()". Dialogs and menus are opened through the React onClick and closed by the step's cleanup (only Cancel, Close or click-outside are ever pressed). The modal count was verified 0 afterwards.

AUDIT_TABLE

Performance (python glass.py perf main --route R)

PERF_TABLE

Not styled / limits (and why)

LIMITS

Requests to other owners

REQUESTS