mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-23 11:01:23 +02:00
MichaelScottsmanandClaude Opus 5.5
75a6e6c246
A top-level @starting-style on the light layer's ::after (registered custom properties under the @container style() gate) SEGVs Steam's Chromium 126 renderer when the theme is injected while the pointer rests on a hovered element. Launching LiquidAss from + > Launch Program does exactly that: the laser is still on the row when the stylesheet lands, so every launch crashed the whole gamepad UI (reproduced 3/3 with real clicks; CSS-only reproduces too; gone without the rule). The ramp in from dark is now a keyframe animation (lgs-ill-in) scoped to the illumination hosts' in-rule, so it no longer reaches Steam's own ::after either. Home's gamepad focus and blur handlers return when the module is torn down, so turning the theme off no longer throws in 41-home.js. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
730 lines
61 KiB
CSS
730 lines
61 KiB
CSS
/* Glass Shell foundation: interaction states (package P4).
|
|
Contract: docs/phase2/contracts/tokens.md §3. Sources: PLAN §1.4, CTL §4,
|
|
VP P-01 to P-17, IM §2-§4, DESIGN2 §8.2, §10, §13.
|
|
Wrapped as html.lgs-on { ... } by the bundler ("&" is html.lgs-on).
|
|
|
|
1. State numbers: every interaction state, keyed on P3's input mode, is
|
|
published as a registered non-inherited number on the element itself
|
|
(--lgs-hover, --lgs-focus, --lgs-within, --lgs-press, --lgs-lift,
|
|
--lgs-dis; @property in 00-tokens.nowrap.css). Nothing paints here.
|
|
2. The illumination hook: an element that sets --lgs-ill: <kind> gets the
|
|
light layer on its ::after (style queries; the pseudo-element queries
|
|
its originating element). Opt-in, so inert until an area asks.
|
|
3. Steam's floating FocusRing as a light plate (CTL §4.5), off where the
|
|
focused control lights itself.
|
|
4. Reduce Motion and High Contrast variants.
|
|
|
|
The generated blocks ("lgs-hosts … begin/end") are written by
|
|
`python docs/phase2/fontkit.py --hooks`; never edit them by hand. */
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 1. State numbers */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* laser hover: :hover only, never .gpfocus under the laser (VP P-01, P-02).
|
|
Not in pad mode: a parked pointer leaves a stale :hover (VP P-09). */
|
|
&:not(.lgs-input-pad) :hover { --lgs-hover: 1; }
|
|
/* gamepad focus: .gpfocus, never under the laser (a stale .gpfocus can
|
|
survive there, IM §3.3). With the runtime off neither class is set and
|
|
.gpfocus paints as in Phase 1. */
|
|
&:not(.lgs-input-laser) .gpfocus { --lgs-focus: 1; --lgs-lift: 1; }
|
|
&:not(.lgs-input-laser) .gpfocuswithin { --lgs-within: 1; }
|
|
/* press: the laser's :active, gamepad A through P3's lgs-pressed */
|
|
& :active, & .lgs-pressed { --lgs-press: 1; }
|
|
/* lift (scale, depth): laser only after 80 ms of dwell (VP P-06); with the
|
|
runtime off, plain hover lifts as in Phase 1 */
|
|
&.lgs-input-laser .lgs-dwell:hover { --lgs-lift: 1; }
|
|
&:not(.lgs-input-laser):not(.lgs-input-pad) :hover { --lgs-lift: 1; }
|
|
/* disabled: Steam keeps disabled controls focusable (CTL §4.7) */
|
|
& :is(:disabled, [aria-disabled="true"], .Disabled, %{*GamepadDialogContent>Disabled}, .lgs-focus-disabled) { --lgs-dis: 1; }
|
|
|
|
/* markup equivalents for elements we create (T2/T3) */
|
|
& [data-lgs-ill="raised"] { --lgs-ill: raised; }
|
|
& [data-lgs-ill="recessed"] { --lgs-ill: recessed; }
|
|
& [data-lgs-ill="row"] { --lgs-ill: row; }
|
|
& [data-lgs-ill="nav"] { --lgs-ill: nav; }
|
|
& [data-lgs-ill="white"] { --lgs-ill: white; }
|
|
& [data-lgs-ill="card"] { --lgs-ill: card; }
|
|
|
|
/* durations of the light, in one place so Reduce Motion can shorten them */
|
|
& {
|
|
--lgs-ill-d-in: var(--lgs-d-hover-in, 294ms);
|
|
--lgs-ill-d-out: var(--lgs-d-fade, 441ms);
|
|
--lgs-ill-d-press: var(--lgs-d-interactive, 210ms);
|
|
--lgs-ill-ease: var(--lgs-ease-b0, cubic-bezier(.327, .692, .114, 1));
|
|
--lgs-ill-ease-press: var(--lgs-ease-b15, cubic-bezier(.311, .589, .077, 1.118));
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 2. The illumination hook (--lgs-ill on the element → its ::after) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* The subjects are generated host lists, never "*": a universal *::after
|
|
inside @container makes Blink resolve ::after for every element on every
|
|
style recalc, which cost the virtualised library grid ~20 % of its scroll
|
|
frame rate (G-PERF, review R1 M1). Each "lgs-hosts" block lists, for every
|
|
theme rule that sets --lgs-ill (to that kind), the rightmost compound of
|
|
its selector (a superset; the style query still decides), one flat entry
|
|
per host so Blink files it under its class. :where() keeps the specificity
|
|
the universal subject had (0,1,2), so an area's own rule on its host's
|
|
::after still wins, and an entry that does not parse matches nothing
|
|
instead of dropping the rule. A new --lgs-ill selector needs
|
|
`python docs/phase2/fontkit.py --hooks` (any package may run it;
|
|
`--hooks-check` says when the lists are stale). */
|
|
@container style(--lgs-ill: raised) or style(--lgs-ill: recessed) or style(--lgs-ill: row) or style(--lgs-ill: nav) or style(--lgs-ill: white) or style(--lgs-ill: card) {
|
|
/* lgs-hosts ill ::after begin */
|
|
:where(.lgs-hosts-ill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(#Footer [data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*BasicContextMenuModal>contextMenuItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>FieldIcon}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>Field}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>ToggleRail}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ActionButtonLegend}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AddMarkerCtn}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AppBody}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AppGridFilterHeader}%{AppGridFilterHeaderAsButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Arrows}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ButtonBox}%{TopList>Interactable}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ChatTab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Container>MenuButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ContentTypes}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DashboardMenu>Item}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DialogWrapper>CompatFilterDialogRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DownloadsPage>PlayButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{FilterBucket}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Group>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>InvitesRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>MutualFriendRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{InstallFolder}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{LibraryItemBox}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ListItemAndGlowContainer>ListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{MainBrowserContainer>NavigationButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PlaybackControls>PlaybackButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{RecordingModeOption}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ResultTemplateImage}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{SectionItemWrapper}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ShutdownAppButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{SortAndFilterButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{StreamingSelector}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{TabBumper}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{TextBoxCarouselContents}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{chatSubmitButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.AddFriendButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox_Container):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.FriendsInvitesButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.NewChatGroupButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.SortByRecent):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.friend):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.groupName):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.inviteAnotherFriendButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-hit):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-poster):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-soft):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-cap-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-circle-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-row-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-seg-label):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-side-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-tog-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-check):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-more-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-play-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-seg-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-wn-glass):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-row):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-search-cap):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-search-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-sheet-close):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-switch):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.oneOnOneVoiceChatButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="card"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="nav"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="raised"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="recessed"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="row"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-sel="on"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button%{DropDownControlButton}.DialogButton[aria-expanded="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton%{*GamepadDialogContent>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton.GreenPlay):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill ::after end */
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
inset: var(--lgs-ill-inset, 0);
|
|
border-radius: var(--lgs-ill-r, inherit);
|
|
pointer-events: none;
|
|
z-index: var(--lgs-ill-z, auto);
|
|
/* the element's state numbers (they do not inherit by themselves) */
|
|
--lgs-hover: inherit;
|
|
--lgs-focus: inherit;
|
|
--lgs-within: inherit;
|
|
--lgs-press: inherit;
|
|
--lgs-dis: inherit;
|
|
/* per-kind multipliers (overridden below) */
|
|
--_lgs-hadd: 1;
|
|
--_lgs-spot: 1;
|
|
--_lgs-fadd: 1;
|
|
--_lgs-win: 0;
|
|
--_lgs-sheen: 0;
|
|
--_lgs-glow: 0;
|
|
--_lgs-arc: 1;
|
|
--_lgs-lobe: 0;
|
|
--_lgs-on: calc(1 - var(--lgs-dis));
|
|
/* laser hover strengths (rows and navigation rows have their own, P-03) */
|
|
--_lgs-ha: var(--lgs-hover-add);
|
|
--_lgs-hs: var(--lgs-hover-spot);
|
|
/* uniform light: hover add, focus add, press add, row warmth, disabled focus */
|
|
--_lgs-u: rgb(255 255 255 / calc(
|
|
var(--_lgs-ha) * var(--lgs-hover) * var(--_lgs-on) * var(--_lgs-hadd)
|
|
+ var(--lgs-focus-add) * var(--lgs-focus) * var(--_lgs-on) * var(--_lgs-fadd)
|
|
+ var(--lgs-dis-focus-add) * var(--lgs-focus) * var(--lgs-dis) * var(--_lgs-fadd)
|
|
+ var(--lgs-press-add) * var(--lgs-press) * var(--_lgs-on) * var(--_lgs-fadd)
|
|
+ var(--lgs-within-add) * var(--lgs-within) * (1 - var(--lgs-focus)) * var(--_lgs-win)));
|
|
/* the focus arc's strength (60 % when disabled) */
|
|
--_lgs-arc-a: calc(var(--lgs-focus-arc) * var(--lgs-focus) * (1 - .4 * var(--lgs-dis)) * var(--_lgs-fadd));
|
|
background:
|
|
/* press: a glow spreading from the hit point (laser) or the centre (A) */
|
|
radial-gradient(circle at var(--hx, 50%) var(--hy, 50%),
|
|
rgb(255 255 255 / calc(var(--lgs-press-spot) * var(--lgs-press) * var(--_lgs-on) * var(--_lgs-spot))) 0,
|
|
rgb(255 255 255 / 0) calc(40% + 80% * var(--lgs-press))),
|
|
/* hover: the light spot at the pointer (static without P3's --hx/--hy) */
|
|
radial-gradient(circle at var(--hx, 50%) var(--hy, 30%),
|
|
rgb(255 255 255 / calc(var(--_lgs-hs) * var(--lgs-hover) * var(--_lgs-on) * var(--_lgs-spot))) 0,
|
|
rgb(255 255 255 / 0) 75%),
|
|
/* focus: a static spot in the upper third */
|
|
radial-gradient(circle at 50% 30%,
|
|
rgb(255 255 255 / calc(var(--lgs-focus-spot) * var(--lgs-focus) * var(--_lgs-on) * var(--_lgs-spot))) 0,
|
|
rgb(255 255 255 / 0) 75%),
|
|
/* wide rows: the focus arc as the E3 lobe from the key light (26 % of
|
|
the width, fading both ways), never a full-width line (WN D-15) */
|
|
radial-gradient(50% 3px at 26% 0,
|
|
rgb(255 255 255 / calc(var(--_lgs-arc-a) * var(--_lgs-lobe))) 0,
|
|
rgb(255 255 255 / calc(var(--_lgs-arc-a) * var(--_lgs-lobe) * .35)) 55%,
|
|
rgb(255 255 255 / 0) 100%),
|
|
/* content cards: a diagonal specular sheen (tvOS) */
|
|
linear-gradient(155deg,
|
|
rgb(255 255 255 / calc(.22 * max(var(--lgs-hover), var(--lgs-focus)) * var(--_lgs-sheen))) 0,
|
|
rgb(255 255 255 / calc(.05 * max(var(--lgs-hover), var(--lgs-focus)) * var(--_lgs-sheen))) 30%,
|
|
rgb(255 255 255 / 0) 55%),
|
|
/* the uniform layer (flat: the same colour at both ends) */
|
|
linear-gradient(var(--_lgs-u), var(--_lgs-u));
|
|
box-shadow:
|
|
/* a control's own specular arc, lit under focus */
|
|
inset 0 1.5px 1.5px -1px rgb(255 255 255 / calc(var(--_lgs-arc-a) * var(--_lgs-arc))),
|
|
/* white and coloured fills: a blurred outer glow, never a ring (VP P-16) */
|
|
0 0 var(--lgs-white-glow-blur) var(--lgs-white-glow-spread)
|
|
rgb(255 255 255 / calc(var(--lgs-white-glow-a) * max(var(--lgs-focus), .5 * var(--lgs-hover)) * var(--_lgs-glow)));
|
|
/* out: fade (441 ms); press out 90 ms linear */
|
|
transition:
|
|
--lgs-hover var(--lgs-ill-d-out) var(--lgs-ill-ease),
|
|
--lgs-focus var(--lgs-ill-d-out) var(--lgs-ill-ease),
|
|
--lgs-within var(--lgs-ill-d-out) var(--lgs-ill-ease),
|
|
--lgs-press 90ms linear;
|
|
}
|
|
/* in: hover-in (294 ms), press on interactive (210 ms); focus jumps in and
|
|
enters through P5's lgs-focus-in (.6 → 1), so the first frame already
|
|
shows --lgs-focus-first of the look (CTL P-C11). Keyed on the input mode
|
|
like the numbers (VP P-01). No host list: only hovered, focused or
|
|
pressed elements match, and the style query keeps it to hosts. */
|
|
&:not(.lgs-input-pad) :hover::after,
|
|
&:not(.lgs-input-laser) :is(.gpfocus, .gpfocuswithin)::after,
|
|
& :is(:active, .lgs-pressed)::after {
|
|
transition:
|
|
--lgs-hover var(--lgs-ill-d-in) var(--lgs-ill-ease),
|
|
--lgs-focus 0s,
|
|
--lgs-within var(--lgs-ill-d-in) var(--lgs-ill-ease),
|
|
--lgs-press var(--lgs-ill-d-press) var(--lgs-ill-ease-press);
|
|
/* created lit (the hook blocks' gate): its ramp in starts from dark (lgs-ill-in,
|
|
02-motion.nowrap.css; never @starting-style, which crashes Steam's renderer) */
|
|
animation: lgs-ill-in var(--lgs-ill-d-in) var(--lgs-ill-ease) backwards;
|
|
}
|
|
&:not(.lgs-input-laser) .gpfocus::after {
|
|
animation: lgs-ill-in var(--lgs-ill-d-in) var(--lgs-ill-ease) backwards,
|
|
lgs-focus-in var(--lgs-ill-d-in) var(--lgs-ill-ease) backwards;
|
|
}
|
|
}
|
|
|
|
/* kinds */
|
|
@container style(--lgs-ill: row) {
|
|
/* lgs-hosts ill:row ::after begin */
|
|
:where(.lgs-hosts-ill-row):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*BasicContextMenuModal>contextMenuItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>Field}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AppBody}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ChatTab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DialogWrapper>CompatFilterDialogRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>InvitesRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>MutualFriendRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{RecordingModeOption}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{SectionItemWrapper}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-row-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-row):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="row"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:row ::after end */
|
|
{
|
|
inset: var(--lgs-ill-inset, var(--lgs-row-inset));
|
|
border-radius: var(--lgs-ill-r, var(--lgs-r-row));
|
|
--_lgs-win: 1;
|
|
--_lgs-arc: 0;
|
|
--_lgs-lobe: 1;
|
|
--_lgs-ha: var(--lgs-row-hover-add);
|
|
}
|
|
}
|
|
/* navigation rows (sidebar, list, tab bar): hover is the light spot only */
|
|
@container style(--lgs-ill: nav) {
|
|
/* lgs-hosts ill:nav ::after begin */
|
|
:where(.lgs-hosts-ill-nav):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DashboardMenu>Item}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.friend):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.groupName):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-side-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-row.lgs-row-nav):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="nav"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:nav ::after end */
|
|
{ --_lgs-hadd: 0; --_lgs-arc: 0; --_lgs-lobe: 1; --_lgs-hs: var(--lgs-nav-hover-spot); }
|
|
}
|
|
/* white / coloured fills: additive light cannot brighten white; a glow does */
|
|
@container style(--lgs-ill: white) {
|
|
/* lgs-hosts ill:white ::after begin */
|
|
:where(.lgs-hosts-ill-white):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*BasicContextMenuModal>contextMenuItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>FieldIcon}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ButtonBox}%{TopList>Interactable}%{TopList>Primary}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Container>MenuButton}%{MenuActive}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DownloadsPage>PlayButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}.gpfocus):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Group>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{InstallFolder}%{IsSelected}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ShutdownAppButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{chatSubmitButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox.Active):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox_Container):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-danger-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-danger.gpfocus):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-play):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-primary):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn[aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-seg-label):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-tog-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-check[aria-checked="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-more-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-play-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-seg-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-switch[aria-checked="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-sel="on"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button%{DropDownControlButton}.DialogButton[aria-expanded="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton%{*GamepadDialogContent>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton.GreenPlay):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:white ::after end */
|
|
{ --_lgs-hadd: 0; --_lgs-fadd: 0; --_lgs-spot: 0; --_lgs-glow: 1; }
|
|
}
|
|
/* content: no fill on art, a sheen; the lift is the area's (--lgs-lift) */
|
|
@container style(--lgs-ill: card) {
|
|
/* lgs-hosts ill:card ::after begin */
|
|
:where(.lgs-hosts-ill-card):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{LibraryItemBox}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ListItemAndGlowContainer>ListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ResultTemplateImage}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-hit):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-poster):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-search-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="card"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:card ::after end */
|
|
{ --_lgs-hadd: 0; --_lgs-fadd: 0; --_lgs-spot: 0; --_lgs-sheen: 1; }
|
|
}
|
|
|
|
/* High Contrast: opaque fills, no spot (tokens), focus = white .30 + the
|
|
allowed 2 px stroke (DESIGN2 §13, CTL §4.6) */
|
|
@media (prefers-contrast: more) {
|
|
@container style(--lgs-ill: raised) or style(--lgs-ill: recessed) or style(--lgs-ill: row) or style(--lgs-ill: nav) or style(--lgs-ill: white) or style(--lgs-ill: card) {
|
|
/* lgs-hosts ill ::after begin */
|
|
:where(.lgs-hosts-ill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(#Footer [data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*BasicContextMenuModal>contextMenuItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>FieldIcon}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>Field}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>ToggleRail}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ActionButtonLegend}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AddMarkerCtn}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AppBody}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{AppGridFilterHeader}%{AppGridFilterHeaderAsButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Arrows}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ButtonBox}%{TopList>Interactable}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ChatTab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Container>MenuButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ContentTypes}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DashboardMenu>Item}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DialogWrapper>CompatFilterDialogRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DownloadsPage>PlayButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{FilterBucket}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Group>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>InvitesRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{IncomingInvites>MutualFriendRow}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{InstallFolder}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{LibraryItemBox}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ListItemAndGlowContainer>ListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{MainBrowserContainer>NavigationButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PlaybackControls>PlaybackButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{RecordingModeOption}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ResultTemplateImage}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{SectionItemWrapper}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ShutdownAppButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{SortAndFilterButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{StreamingSelector}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{TabBumper}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{TextBoxCarouselContents}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{chatSubmitButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.AddFriendButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox_Container):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.FriendsInvitesButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.NewChatGroupButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.SortByRecent):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.friend):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.groupName):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.inviteAnotherFriendButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-hit):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-poster):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-all-soft):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-cap-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-circle-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-row-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-seg-label):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-side-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-tog-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-check):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-more-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-play-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-seg-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-wn-glass):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-row):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-search-cap):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-search-disc):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-sheet-close):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-switch):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.oneOnOneVoiceChatButton):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="card"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="nav"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="raised"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="recessed"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="row"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-sel="on"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button%{DropDownControlButton}.DialogButton[aria-expanded="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton%{*GamepadDialogContent>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton.GreenPlay):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill ::after end */
|
|
{
|
|
box-shadow: inset 0 0 0 2px rgb(255 255 255 / calc(.70 * var(--lgs-focus) * (1 - .43 * var(--lgs-dis))));
|
|
--_lgs-lobe: 0;
|
|
}
|
|
}
|
|
/* navigation rows: High Contrast has no light spot, so their laser hover
|
|
is the uniform add like other rows (else it would not show at all) */
|
|
@container style(--lgs-ill: nav) {
|
|
/* lgs-hosts ill:nav ::after begin */
|
|
:where(.lgs-hosts-ill-nav):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DashboardMenu>Item}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.friend):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.groupName):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-side-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-row.lgs-row-nav):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="nav"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:nav ::after end */
|
|
{ --_lgs-hadd: 1; }
|
|
}
|
|
/* white and coloured fills: an inner white stroke vanishes on white, so
|
|
focus is the stroke outside, behind a 3 px dark gap */
|
|
@container style(--lgs-ill: white) {
|
|
/* lgs-hosts ill:white ::after begin */
|
|
:where(.lgs-hosts-ill-white):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*BasicContextMenuModal>contextMenuItem}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{*GamepadDialogContent>FieldIcon}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ButtonBox}%{TopList>Interactable}%{TopList>Primary}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Container>MenuButton}%{MenuActive}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{DownloadsPage>PlayButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{GamepadTabbedPage>Tab}.gpfocus):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{Group>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{InstallFolder}%{IsSelected}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{ShutdownAppButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(%{chatSubmitButton}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox.Active):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.DialogCheckbox_Container):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-danger-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-danger.gpfocus):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-play):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn.lgs-btn-primary):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-btn[aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-seg-label):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-cc-tog-face):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-check[aria-checked="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-more-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-play-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-home-seg-fill):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(.lgs-switch[aria-checked="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(:is(.lgs-seg) > [aria-pressed="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-ill="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-menu-source="white"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where([data-lgs-sel="on"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button%{DropDownControlButton}.DialogButton[aria-expanded="true"]):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton%{*GamepadDialogContent>Button}):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after,
|
|
:where(button.DialogButton.GreenPlay):where(:hover, :active, .gpfocus, .gpfocuswithin, .lgs-pressed, .lgs-focus-in, .lgs-lit)::after
|
|
/* lgs-hosts ill:white ::after end */
|
|
{
|
|
box-shadow: 0 0 0 3px rgb(11 13 16 / calc(.94 * var(--lgs-focus))), 0 0 0 5px rgb(255 255 255 / calc(.90 * var(--lgs-focus)));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 3. Steam's floating FocusRing becomes a light plate (CTL §4.5) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* For focus targets that have no light of their own (links, scroll panels,
|
|
recording-mode cards, any control no area has hooked). Geometry stays
|
|
inline (Steam's); only paint and its flash / grow / 20x pulse change:
|
|
nothing runs at rest. Written as "&.lgs-on" (html.lgs-on.lgs-on, 0,3,1)
|
|
so the plate beats any later ring rule of equal weight (VP P-17). */
|
|
&.lgs-on %{FocusRing}, &.lgs-on %{FocusRing}::before, &.lgs-on %{FocusRing}::after {
|
|
animation: none !important;
|
|
}
|
|
&.lgs-on %{FocusRing} {
|
|
outline-color: transparent !important;
|
|
/* --lgs-ring-r: an area whose ringed targets are capsules sets 999px on an
|
|
ancestor of the FocusRing (it lives in %{FocusRingRoot} under the page) */
|
|
border-radius: var(--lgs-ring-r, min(var(--lgs-r-row), 50%)) !important;
|
|
background:
|
|
radial-gradient(circle at 50% 30%, rgb(255 255 255 / var(--lgs-focus-spot)), rgb(255 255 255 / 0) 75%),
|
|
rgb(255 255 255 / .12) !important;
|
|
/* where the ring sits on a white fill the glow is the cue: CTL's 18/2/.22
|
|
measured +8 L in P-16's band there, so the plate takes the white-glow
|
|
token at 3/4 spread and 4/5 alpha (22/6/.44) */
|
|
box-shadow: 0 0 var(--lgs-white-glow-blur) calc(var(--lgs-white-glow-spread) * .75)
|
|
rgb(255 255 255 / calc(var(--lgs-white-glow-a) * .8));
|
|
opacity: 1 !important;
|
|
}
|
|
/* never in laser mode: the laser lights what it points at, not Steam's
|
|
focus, and a stale ring must not paint a focus look (VP P-02, CTL §4.5) */
|
|
&.lgs-on.lgs-input-laser %{FocusRing} {
|
|
opacity: 0 !important;
|
|
}
|
|
/* check circles (P3 tags the ring): a bloom 12 px larger than the circle */
|
|
&.lgs-on %{FocusRing}.lgs-ring-check {
|
|
background: transparent !important;
|
|
box-shadow: none;
|
|
}
|
|
&.lgs-on %{FocusRing}.lgs-ring-check::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -12px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
background: radial-gradient(circle, rgb(255 255 255 / .34) 0, rgb(255 255 255 / .22) 42%, rgb(255 255 255 / 0) 72%);
|
|
}
|
|
/* The focused control lights itself (it is an --lgs-ill host: C4a's radio
|
|
segments and check circles, rows, buttons): the plate paints nothing, or
|
|
it would frame the capsule, double its glow and grey its label (review R1
|
|
M2). The list is the hosts' whole selectors, generated; html.lgs-on.lgs-on
|
|
:has() (0,4,1) also beats the High Contrast plate below. */
|
|
/* lgs-hosts ring begin */
|
|
&.lgs-on:has(.gpfocus:where(
|
|
.lgs-hosts-ill,
|
|
#Footer [data-lgs-menu-source="white"],
|
|
%{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>BasicContextMenuContainer} > %{*BasicContextMenuModal>contextMenuContents}:first-child > %{*BasicContextMenuModal>contextMenuItem}:last-child,
|
|
%{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>contextMenuContents} > %{*BasicContextMenuModal>contextMenuItem},
|
|
%{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>contextMenuContents} > %{*BasicContextMenuModal>contextMenuItem}%{*BasicContextMenuModal>active},
|
|
%{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>contextMenuContents} > %{*BasicContextMenuModal>contextMenuItem}:is(%{*BasicContextMenuModal>Emphasis}, .Install, .Download, .Update, .PreLoad),
|
|
%{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>contextMenuContents} > %{*BasicContextMenuModal>contextMenuItem}:is(%{*BasicContextMenuModal>Positive}, .Play, .Launch, .Resume, .Stream, .Connect, .PlayMusic, .BorrowApp),
|
|
%{*GamepadDialogContent>FieldChildrenWithIcon}:not([data-lgs-noprim] *) > %{*GamepadDialogContent>FieldIcon}:is(%{ClickableSliderIcon}, :has(%{ClickableSliderIcon})),
|
|
%{*GamepadDialogContent>Field}:not(%{*GamepadDialogContent>Classic}):not([data-lgs-noprim] *),
|
|
%{*GamepadDialogContent>ModalPosition} .DialogFooter button.DialogButton%{*GamepadDialogContent>Button},
|
|
%{*GamepadDialogContent>ModalPosition} .DialogFooter button.DialogButton%{*GamepadDialogContent>Button}.Primary,
|
|
%{*GamepadDialogContent>ModalPosition} .DialogFooter button.DialogButton%{*GamepadDialogContent>Button}:is(.Destructive, [data-lgs-destructive]),
|
|
%{*GamepadDialogContent>ModalPosition} > div.Panel:not(%{*GamepadDialogContent>ModalClickToDismiss}, %{FocusRing}, %{FocusRingRoot}, .BasicUIContextMenu, %{*GamepadDialogContent_InnerWidth>GamepadDialogContent}) > button.DialogButton%{*GamepadDialogContent>Button},
|
|
%{*GamepadDialogContent>ModalPosition} > div.Panel:not(%{*GamepadDialogContent>ModalClickToDismiss}, %{FocusRing}, %{FocusRingRoot}, .BasicUIContextMenu, %{*GamepadDialogContent_InnerWidth>GamepadDialogContent}) > button.DialogButton%{*GamepadDialogContent>Button}.Primary,
|
|
%{*GamepadDialogContent>ModalPosition} > div.Panel:not(%{*GamepadDialogContent>ModalClickToDismiss}, %{FocusRing}, %{FocusRingRoot}, .BasicUIContextMenu, %{*GamepadDialogContent_InnerWidth>GamepadDialogContent}) > button.DialogButton%{*GamepadDialogContent>Button}:is(.Destructive, [data-lgs-destructive]),
|
|
%{*GamepadDialogContent>Toggle}:not([data-lgs-noprim] *) > %{*GamepadDialogContent>ToggleRail},
|
|
%{BasicGameCarouselItem} %{TextBoxCarouselContents},
|
|
%{BasicUiRoot} #Footer%{BasicFooter} %{ActionButtonLegend},
|
|
%{ButtonBox}%{TopList>Interactable},
|
|
%{CompatFilterOptions} %{DialogWrapper>CompatFilterDialogRow},
|
|
%{DashboardMenu}%{Variant_FrameMenu} %{DashboardMenu>Item},
|
|
%{DashboardMenu}%{Variant_TabMenu} %{DashboardMenu>Item},
|
|
%{DownloadsPage} %{ContentTypes},
|
|
%{DownloadsPage} %{SectionItemWrapper},
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>PlayButton},
|
|
%{FilterBucket}.lgs-lib-chips %{FilterArea>Row} .DialogCheckbox_Container,
|
|
%{FilterBucket}.lgs-lib-chips %{FilterArea>Row} .DialogCheckbox_Container:has(.DialogCheckbox.Active),
|
|
%{Filters>Container} %{FilterBucket},
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton},
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}:not(%{chatSubmitButton>disabled}),
|
|
%{FriendsChats} .SteamDeckChats .RightSideButtonContainer :is(.oneOnOneVoiceChatButton, .inviteAnotherFriendButton, .AddFriendButton),
|
|
%{FriendsChats} .friendGroup .SortByRecent,
|
|
%{FriendsChats} .friendGroup .groupName,
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTabs %{TabBumper},
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader :is(.AddFriendButton, .NewChatGroupButton, .FriendsInvitesButton),
|
|
%{FriendsChats} .friendlistListContainer .friend,
|
|
%{FriendsChats} .friendlistListContainer .friend.gpfocus,
|
|
%{FriendsChats} .multiChatDialog %{ChatTab},
|
|
%{FriendsChats} .multiChatDialog %{ChatTab}%{ChatTabTransitionGroup>Active},
|
|
%{FriendsChats} .multiChatDialog %{ChatTab}%{ChatTabTransitionGroup>Active}.gpfocus,
|
|
%{GamepadLibrary} %{AppGridFilterHeader}%{AppGridFilterHeaderAsButton},
|
|
%{GamepadLibrary} %{GamepadTabbedPage>Tab},
|
|
%{GamepadLibrary} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected},
|
|
%{GamepadLibrary} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}:hover,
|
|
%{GamepadLibrary} %{TabHeaderRowWrapper} %{Arrows},
|
|
%{GamepadSearch} %{GamepadTabbedPage>Tab},
|
|
%{GamepadSearch} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected},
|
|
%{GamepadSearch} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}:hover,
|
|
%{GamepadSearch} %{ResultTemplateImage},
|
|
%{GamepadSearch} %{TabHeaderRowWrapper} %{Arrows},
|
|
%{HiddenFrame>InvitesList} :is(%{IncomingInvites>InvitesRow}, %{IncomingInvites>MutualFriendRow}),
|
|
%{MainBrowserContainer>NavigationButton},
|
|
%{PlaybackControls} %{AddMarkerCtn},
|
|
%{PlaybackControls} %{PlaybackControls>PlaybackButton},
|
|
%{RecentSection} ~ %{TabbedContent} %{GamepadTabbedPage>Tab},
|
|
%{RecentSection} ~ %{TabbedContent} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected},
|
|
%{RecentSection} ~ %{TabbedContent} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}:hover,
|
|
%{RecentSection} ~ %{TabbedContent} %{TabHeaderRowWrapper} %{Arrows},
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem},
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem}.gpfocus,
|
|
%{SortAndFilterButton},
|
|
%{VRLibraryFilterGroup}%{CenteredPill} > %{Group>Button},
|
|
%{VRLibraryFilterGroup}%{CenteredPill} > %{Group>Button}:is(%{Group>Active}, [aria-checked="true"]),
|
|
%{VRLibraryFilterGroup}%{CenteredPill} > %{Group>Button}:is(%{Group>Active}, [aria-checked="true"]):hover,
|
|
&.lgs-input-laser %{GamepadLibrary} %{LibraryItemBox}:is(.lgs-dwell:hover, .lgs-attend-80),
|
|
&:not(.lgs-input-laser) %{*BasicContextMenuHeader>BasicContextMenuModal} %{*BasicContextMenuModal>contextMenuContents} > %{*BasicContextMenuModal>contextMenuItem}:is(%{*BasicContextMenuModal>Destructive}, .Stop):is(.gpfocus, %{*BasicContextMenuModal>Focused}),
|
|
&:not(.lgs-input-laser) %{GamepadLibrary} %{GamepadTabbedPage>Tab}.gpfocus,
|
|
&:not(.lgs-input-laser) %{GamepadLibrary} %{LibraryItemBox}.gpfocus.gpfocus,
|
|
&:not(.lgs-input-laser) %{GamepadSearch} %{GamepadTabbedPage>Tab}.gpfocus,
|
|
&:not(.lgs-input-laser) %{RecentSection} ~ %{TabbedContent} %{GamepadTabbedPage>Tab}.gpfocus,
|
|
&:not(.lgs-input-laser) %{VRLibraryFilterGroup}%{CenteredPill} > %{Group>Button}.gpfocus,
|
|
&:not(.lgs-input-laser) %{VRLibraryFilterGroup}%{CenteredPill}:has(> .gpfocus) > %{Group>Button}:is(%{Group>Active}, [aria-checked="true"]):not(.gpfocus),
|
|
&:not(.lgs-input-laser) .lgs-btn.lgs-btn-danger.gpfocus,
|
|
&:not(.lgs-input-laser) button.DialogButton%{*GamepadDialogContent>Button}.Destructive.gpfocus:not(.Disabled, [disabled]):not(:is(.DialogFooter, %{ModalButtonRow}, .DialogTwoColLayout) *):not([data-lgs-noprim] *),
|
|
&:not(.lgs-input-laser):not(.lgs-input-pad) %{GamepadLibrary} %{PortraitImage>HoversEnabled} %{LibraryItemBox}:hover,
|
|
.DialogCheckbox:not([data-lgs-noprim] *),
|
|
.lgs-all-hit,
|
|
.lgs-all-poster,
|
|
.lgs-all-soft,
|
|
.lgs-btn,
|
|
.lgs-cc-cap-face,
|
|
.lgs-cc-circle-face,
|
|
.lgs-cc-row-face,
|
|
.lgs-cc-seg-item.is-selected .lgs-cc-seg-label,
|
|
.lgs-cc-seg-label,
|
|
.lgs-cc-side-face,
|
|
.lgs-cc-tog-face,
|
|
.lgs-cc-tog.is-on .lgs-cc-tog-face,
|
|
.lgs-check,
|
|
.lgs-home-disc,
|
|
.lgs-home-more-fill,
|
|
.lgs-home-more.is-open .lgs-home-more-fill,
|
|
.lgs-home-play-fill,
|
|
.lgs-home-seg-fill,
|
|
.lgs-home-seg-item.is-selected > .lgs-home-seg-fill,
|
|
.lgs-home-wn-glass,
|
|
.lgs-row,
|
|
.lgs-search-cap,
|
|
.lgs-search-disc,
|
|
.lgs-sheet-close,
|
|
.lgs-switch,
|
|
:is(%{AchievementList>Page}) %{AchievementTabs} %{GamepadTabbedPage>Tab},
|
|
:is(%{AchievementList>Page}) %{AchievementTabs} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected},
|
|
:is(%{AchievementList>Page}) %{AchievementTabs} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}:is(.gpfocus, :hover),
|
|
:is(%{Group}:not(%{CenteredPill}):not([data-lgs-noprim] *)) > %{Group>Button},
|
|
:is(%{Group}:not(%{CenteredPill}):not([data-lgs-noprim] *)) > %{Group>Button}%{Group>Active},
|
|
:is(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}%{AppProperties}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem},
|
|
:is(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings})) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem},
|
|
:is(%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings})) %{RecordingModeOption},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{AppButtons} %{Container>MenuButton},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{AppButtons} %{Container>MenuButton}%{MenuActive},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{AppDetailsContainer} %{GamepadTabbedPage>Tab},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{AppDetailsContainer} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{AppDetailsContainer} %{GamepadTabbedPage>Tab}%{GamepadTabbedPage>Selected}:is(.gpfocus, :hover),
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{PlayButtonContainer} %{StreamingSelector},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{ShutdownAppButton},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{ShutdownAppButton}%{ForceShutdownButton},
|
|
:is(%{PartnerEventOverlayContainer>AppDetailsMain}) %{ShutdownAppButton}:is(.gpfocus, :hover),
|
|
:is(.BasicUI %{ContentManagement}%{InPagedSettings}) %{AppBody},
|
|
:is(.BasicUI %{ContentManagement}%{InPagedSettings}) %{InstallFolder},
|
|
:is(.BasicUI %{ContentManagement}%{InPagedSettings}) %{InstallFolder}%{IsSelected},
|
|
:is(.DialogFooter, %{ModalButtonRow}, .DialogTwoColLayout) button.DialogButton%{*GamepadDialogContent>Button}.Destructive:not(.Disabled, [disabled]):not([data-lgs-noprim] *),
|
|
:is(.DialogFooter, %{ModalButtonRow}, .DialogTwoColLayout) button.DialogButton%{*GamepadDialogContent>Button}.Primary:not(.Disabled, [disabled]):not([data-lgs-noprim] *),
|
|
:is(.lgs-btn).lgs-btn-danger-fill,
|
|
:is(.lgs-btn).lgs-btn-play,
|
|
:is(.lgs-btn).lgs-btn-primary,
|
|
:is(.lgs-btn)[aria-pressed="true"],
|
|
:is(.lgs-check)[aria-checked="true"],
|
|
:is(.lgs-row).lgs-row-nav,
|
|
:is(.lgs-seg) > [aria-pressed="true"],
|
|
:is(.lgs-seg) > [aria-pressed],
|
|
:is(.lgs-switch)[aria-checked="true"],
|
|
[data-lgs-ill="card"],
|
|
[data-lgs-ill="nav"],
|
|
[data-lgs-ill="raised"],
|
|
[data-lgs-ill="recessed"],
|
|
[data-lgs-ill="row"],
|
|
[data-lgs-ill="white"],
|
|
[data-lgs-menu-source="white"],
|
|
[data-lgs-mute="muted"] > %{*GamepadDialogContent>FieldIcon},
|
|
[data-lgs-sel="on"],
|
|
button%{DropDownControlButton}.DialogButton[aria-expanded="true"]:not([data-lgs-noprim] *),
|
|
button.DialogButton%{*GamepadDialogContent>Button}:not([data-lgs-noprim] *),
|
|
button.DialogButton.GreenPlay:not(.Disabled, [disabled]):not([data-lgs-noprim] *)))
|
|
/* lgs-hosts ring end */
|
|
%{FocusRing} {
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 4. Reduce Motion, High Contrast (DESIGN2 §13, CTL §4.6) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& {
|
|
--lgs-ill-d-in: 150ms;
|
|
--lgs-ill-d-out: 150ms;
|
|
--lgs-ill-d-press: 150ms;
|
|
--lgs-ill-ease: linear;
|
|
--lgs-ill-ease-press: linear;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
/* opaque fills, no spot (tokens), focus = white .30 + the allowed 2 px
|
|
stroke; the hook's variant is in §2 */
|
|
& { --lgs-focus-add: .30; --lgs-dis-focus-add: .18; }
|
|
&.lgs-on %{FocusRing} {
|
|
background: rgb(255 255 255 / .30) !important;
|
|
box-shadow: inset 0 0 0 2px rgb(255 255 255 / .70);
|
|
}
|
|
}
|