mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-18 11:01:02 +02:00
MichaelScottsman
a956d19b7f
The SteamVR theme is wrapped in html.lgs-on { }, so 'html.lgs-native-vr-settings ...' became
'html.lgs-on html.lgs-native-vr-settings ...' and never matched: the window fill (rgb(20 22 30 / .72)) stayed
on top of the native glass. Now '&.lgs-native-vr-*' (settings, frame-control row, More Options). Verified live:
the container's fill is transparent with the class set; the sidebar's .14 stays.
561 lines
24 KiB
CSS
561 lines
24 KiB
CSS
/* Glass Shell, area "steamvr": the pieces SteamVR's own systemui page draws
|
|
around the dashboard window (vr:systemui, a 1860x2048 atlas where every
|
|
vsg-node[vsg-type=panel] becomes its own VR quad).
|
|
- window grab bar, resize corner, frame controls (+ tooltips, More Options
|
|
popout, gamepad-mode pill), controller status card
|
|
- the on-demand systemui panels (app transition, IPD, progress, framerate,
|
|
gamepad-unsupported, room setup, Steam loading, persistent notifications,
|
|
guided tour)
|
|
Bundled for every SteamVR page after the shared tokens and wrapped as
|
|
html.lgs-on { ... }. Look only: no geometry, no panel-root box changes
|
|
(they are physical quad sizes), no transforms SteamVR animates, nothing
|
|
painted on html/body/#root/vsg-app (row 0 of the atlas carries the panel
|
|
UV table). Panels clip at their box, so rims are inset.
|
|
Coverage, shots and audits: docs/coverage/steamvr.md.
|
|
|
|
Tokens: modules that exist only in systemui (roomsetup, framerate,
|
|
gamepadunsupportedmessage, loadingthrobber, persistentnotifications) are
|
|
matched by their CSS-module prefix ([class*="module_Name_"]) instead of
|
|
a readable token: every theme/vr file is bundled into every SteamVR page, and a
|
|
token that resolves only in systemui would be "unresolved" on the binding
|
|
and keyboard pages. */
|
|
|
|
/* 0. Shared values for the SteamVR pages (--lgs-vr-*): theme/vr/00-vr-tokens.css
|
|
(P4), bundled before this file (PLAN §6 two-step move, done).
|
|
C1a's own glass recipes for this page (Phase 2 tokens only; no Phase 1
|
|
alias, PLAN §6, review R2 m11). P4's E3 hook is not bundled into
|
|
SteamVR pages, so a slab's edge is the material's E4/E5 dark inner edge
|
|
plus the lit top lip: never a closed rim (VP P-42/P-43, review R2 M1). */
|
|
& {
|
|
--lgs-c1a-vr-lip: inset 0 1.5px 1.5px -1px rgb(255 255 255 / .22);
|
|
--lgs-c1a-vr-panel-shade: var(--lgs-mat-panel-shade), var(--lgs-c1a-vr-lip);
|
|
/* thick glass where the room shows through a quad (no backdrop blur
|
|
reaches the room here): the tint .80 (PLAN §1.13, WN §8.4) */
|
|
--lgs-c1a-vr-thick-bg:
|
|
linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0) 35%),
|
|
rgb(36 37 42 / .80);
|
|
--lgs-c1a-vr-thick-shade: var(--lgs-mat-thick-shade), var(--lgs-c1a-vr-lip);
|
|
--lgs-c1a-vr-panel-tint: rgb(28 30 40 / calc(.67 + var(--lgs-dial) * .22));
|
|
--lgs-c1a-vr-hover: linear-gradient(rgb(255 255 255 / var(--lgs-hover-add)), rgb(255 255 255 / var(--lgs-hover-add)));
|
|
--lgs-c1a-vr-press: linear-gradient(rgb(255 255 255 / calc(var(--lgs-hover-add) + var(--lgs-press-add))), rgb(255 255 255 / calc(var(--lgs-hover-add) + var(--lgs-press-add))));
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
& {
|
|
--lgs-c1a-vr-thick-bg: var(--lgs-mat-thick-bg);
|
|
--lgs-c1a-vr-panel-tint: rgb(11 13 16 / .94);
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 1. Window grab bar (GrabHandle panel, laser-only) */
|
|
/* Steam owns: the scaleX grow transform, inline width, 60px hit */
|
|
/* padding, 12px height. Only colour, rim and the transition list. */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* SteamVR's bar is 12 grab px (3.6 mm), a hairline in the headset; WN
|
|
§3.5.2's window bar is a 9.6 mm pill (32 grab px). Its box stays
|
|
SteamVR's (width, height, scaleX grow: geometry, LAB): the pill is drawn
|
|
10 px thicker on each side with a spread of its own colour (a filled
|
|
capsule, not a ring: spread 10 > the 2 px ring rule), inside the
|
|
button's 60 px hit padding, so the panel never clips it */
|
|
%{GrabHandleBar} {
|
|
--lgs-c1a-bar: rgb(255 255 255 / .46);
|
|
background-color: var(--lgs-c1a-bar);
|
|
background-image: none;
|
|
box-shadow: 0 0 0 10px var(--lgs-c1a-bar);
|
|
/* the soft shadow from the whole pill's silhouette (a box-shadow would
|
|
lie under the spread only and show the 12 px bar as a lighter stripe) */
|
|
filter: drop-shadow(0 2px 6px rgb(0 0 0 / .30));
|
|
border-radius: var(--lgs-r-capsule);
|
|
/* no transition of ours: SteamVR's own transform timing stays as is */
|
|
}
|
|
/* laser hover and while dragging: white .92 (WN §3.5.2) */
|
|
%{GrabHandleButton}:hover %{GrabHandleBar},
|
|
%{GrabHandleBar}%{GrabHandleBar>ForceActive} {
|
|
--lgs-c1a-bar: rgb(255 255 255 / .92);
|
|
background-color: var(--lgs-c1a-bar);
|
|
box-shadow: 0 0 0 10px var(--lgs-c1a-bar);
|
|
filter: drop-shadow(0 2px 8px rgb(0 0 0 / .34));
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 2. Resize corner (ResizeHandle panel, laser-only) */
|
|
/* White stroke with a tight two-pass dark halo (cursor style), so */
|
|
/* it reads over a dark and a bright room; pure white on hover and */
|
|
/* drag. SteamVR's stroke width, hover scale(1.4) and stroke growth */
|
|
/* stay untouched. The stroke is near-opaque (vibrancy 1, not 2): a */
|
|
/* translucent stroke lets its own halo show through and turns grey */
|
|
/* over a grey room. */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
%{ResizeSVG} {
|
|
color: var(--lgs-text-1);
|
|
filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9))
|
|
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
|
|
}
|
|
%{ResizeHandleButton}:hover %{ResizeSVG},
|
|
%{ResizeHandleButton}%{ResizeHandleButton>ForceActive} %{ResizeSVG} {
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 3. Frame controls under the window (legacy-frame-controls panel) */
|
|
/* Each Section = a panel-glass capsule over the room; buttons get */
|
|
/* a pill highlight concentric with it (our ::before, which Steam */
|
|
/* doesn't use on these buttons), white icons. SteamVR's idle .6 */
|
|
/* container opacity, margins and paddings stay (quad width). */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* Phase 2 (WN §3.5.2): one panel-glass capsule for the whole row; the
|
|
circles rest quiet (fill white .06, glyph white .70) and become full
|
|
circles on hover (+ .08) or gamepad focus (+ .28 and the arc).
|
|
Hit 107 x 107 systemui px (2.49°), visible 80, glyph 36: the panel
|
|
grows with the DOM (spatial.md E16 [PROVEN]). Sections keep SteamVR's
|
|
spacing; hit boxes abut along the row (VP P-07). */
|
|
%{FrameControlsContainer} {
|
|
background: var(--lgs-mat-panel-bg);
|
|
/* E4/E5 dark inner edge + the lit top lip (P4's E3 hook is not bundled
|
|
into SteamVR pages) */
|
|
box-shadow: var(--lgs-mat-panel-shade), inset 0 1.5px 1.5px -1px rgb(255 255 255 / .22);
|
|
border-radius: var(--lgs-r-capsule);
|
|
isolation: isolate;
|
|
}
|
|
%{FrameControlsContainer} %{FrameControlsContainer>Section} {
|
|
background: none;
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-r-capsule);
|
|
isolation: isolate;
|
|
}
|
|
%{FrameControlsContainer} .ButtonControl,
|
|
%{FrameControlsContainer} .ButtonControl:not(.Disabled):hover,
|
|
%{FrameControlsContainer} .ButtonControl:not(.Disabled):active,
|
|
%{FrameControlsContainer} .ButtonControl%{GamepadFocused} {
|
|
padding: 35.5px;
|
|
background: none;
|
|
box-shadow: none;
|
|
color: var(--lgs-text-1);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{FrameControlsContainer} .ButtonControl.WithIcon > .Icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
/* glyphs white .70 at rest (with SteamVR's .6 idle fade they read at .42,
|
|
VP P-70), white on hover and focus */
|
|
%{FrameControlsContainer} .ButtonControl.WithIcon > .Icon path,
|
|
%{FrameControlsContainer} .ButtonControl.WithIcon > .Icon circle {
|
|
fill: var(--lgs-text-2);
|
|
transition: fill var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out);
|
|
}
|
|
%{FrameControlsContainer} .ButtonControl:is(:hover, %{GamepadFocused}).WithIcon > .Icon :is(path, circle) {
|
|
fill: var(--lgs-text-1);
|
|
}
|
|
/* the visible 80 px circle, inside the 107 hit box */
|
|
%{FrameControlsContainer} .ButtonControl::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 13.5px;
|
|
z-index: -1;
|
|
border-radius: 50%;
|
|
background: rgb(255 255 255 / .06);
|
|
pointer-events: none;
|
|
transition: background-color var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out),
|
|
box-shadow var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out);
|
|
}
|
|
/* laser hover: rest + .08 */
|
|
%{FrameControlsContainer} .ButtonControl:hover::before {
|
|
background-color: rgb(255 255 255 / calc(.06 + var(--lgs-hover-add)));
|
|
}
|
|
/* gamepad focus (D-pad down from the window): + .28, the spot in the
|
|
upper third and the specular arc; light, never a ring */
|
|
%{FrameControlsContainer} .ButtonControl%{GamepadFocused}::before {
|
|
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 / calc(.06 + var(--lgs-focus-add)));
|
|
box-shadow: inset 0 1.5px 1.5px -1px rgb(255 255 255 / var(--lgs-focus-arc));
|
|
}
|
|
/* pressed */
|
|
%{FrameControlsContainer} .ButtonControl:active::before {
|
|
background-color: rgb(255 255 255 / calc(.06 + var(--lgs-hover-add) + var(--lgs-press-add)));
|
|
}
|
|
|
|
/* 3.1 Frame-control tooltips (legacy-tooltip-N panels): thick glass
|
|
(PLAN §1.13; CSS-only: thick tint .80 + edge, WN §8.4), 30 systemui px
|
|
Semibold; the panel is width: fit-content, so it grows with the text. */
|
|
.ControlBarButtonTooltip {
|
|
background: var(--lgs-c1a-vr-thick-bg);
|
|
box-shadow: var(--lgs-c1a-vr-thick-shade);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
font-weight: 600;
|
|
font-size: 30px;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* 3.2 More Options popout (WN §3.5.2): thick glass, radius 44; the rows
|
|
keep SteamVR's own heights (the panel's quad follows the DOM; WN's 96 px
|
|
rows wait for the static mock, AT-17). Each row's light is a rounded
|
|
pill of our ::before with 8 px between pills; Steam's 1 px separators
|
|
become space (P-43). Focus is light, never a ring (P-17): + .32, the
|
|
spot in the upper third and the lit arc, as the frame controls (§3). */
|
|
%{AdditionalOptions} {
|
|
background: var(--lgs-c1a-vr-thick-bg);
|
|
box-shadow: var(--lgs-c1a-vr-thick-shade);
|
|
border-radius: var(--lgs-r-sheet);
|
|
isolation: isolate;
|
|
}
|
|
/* native: glassd's glass is right behind these panels (html.lgs-native-vr-*,
|
|
set by device/lgs_sg.js with the cover node): their CSS fill and shade go,
|
|
so Steam's window behind them no longer shows through a tint */
|
|
&.lgs-native-vr-ctl %{FrameControlsContainer},
|
|
&.lgs-native-vr-more %{AdditionalOptions} {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow},
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:not(.Disabled):hover,
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:not(.Disabled):active,
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}%{GamepadFocused} {
|
|
background: none;
|
|
box-shadow: none;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{AdditionalOptions} > .ButtonControl:not(:first-child) {
|
|
border-top-color: transparent;
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow} > .Icon path,
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow} > .Icon circle {
|
|
fill: var(--lgs-text-1);
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow} > %{AdditionalOptionsLabel} {
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 4px 12px;
|
|
z-index: -1;
|
|
border-radius: var(--lgs-r-capsule);
|
|
background: transparent;
|
|
pointer-events: none;
|
|
transition: background var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out),
|
|
box-shadow var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out);
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:first-child::before {
|
|
top: 12px;
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:last-child::before {
|
|
bottom: 12px;
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:hover::before {
|
|
background: var(--lgs-c1a-vr-hover);
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}%{GamepadFocused}::before {
|
|
background:
|
|
radial-gradient(circle at 50% 30%, rgb(255 255 255 / var(--lgs-focus-spot)), rgb(255 255 255 / 0) 75%),
|
|
linear-gradient(rgb(255 255 255 / var(--lgs-focus-add)), rgb(255 255 255 / var(--lgs-focus-add)));
|
|
box-shadow: inset 0 1.5px 1.5px -1px rgb(255 255 255 / var(--lgs-focus-arc));
|
|
}
|
|
%{AdditionalOptions} .ButtonControl%{AdditionalOptionsRow}:active::before {
|
|
background: var(--lgs-c1a-vr-press);
|
|
}
|
|
|
|
/* 3.3 Frame gamepad-mode pill under laser-only pages (WN §3.5.2).
|
|
"Use Laser Mouse to Interact" (Disabled) = quiet panel glass, white .70;
|
|
"Enter Gamepad Mode" = the blue whole fill. Hit-area padding stays. */
|
|
%{ButtonPill} {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
/* mixed case, no tracking (WN §3.5.2, VP P-84); SteamVR sets uppercase */
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-weight: 600;
|
|
transition: background-color var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out);
|
|
}
|
|
%{ButtonHitArea}:not(%{ButtonPill>Disabled}) %{ButtonPill} {
|
|
background: var(--lgs-tint-primary);
|
|
box-shadow: var(--lgs-c1a-vr-lip);
|
|
color: #fff;
|
|
}
|
|
%{ButtonHitArea}:not(%{ButtonPill>Disabled}):hover:not(:active) %{ButtonPill} {
|
|
background: var(--lgs-c1a-vr-hover), var(--lgs-tint-primary);
|
|
}
|
|
%{ButtonHitArea}:not(%{ButtonPill>Disabled}):active %{ButtonPill} {
|
|
background: var(--lgs-c1a-vr-press), var(--lgs-tint-primary);
|
|
}
|
|
%{ButtonHitArea}%{ButtonPill>Disabled} %{ButtonPill} {
|
|
background: var(--lgs-mat-panel-bg);
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 4. Controller status (controllerstatus_N, mapped onto the */
|
|
/* controller model). A panel-glass card behind the hand / gamepad */
|
|
/* icon and battery, only when there is something to show. The card */
|
|
/* is our ::before, anchored to SteamVR's own icon and battery */
|
|
/* frames so it hugs the content in every layout (no geometry). */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
%{ControllerStatusRoot} {
|
|
isolation: isolate;
|
|
}
|
|
%{ControllerStatusRoot} %{ControllerPrimaryIconFrame} {
|
|
anchor-name: --lgs-vr-ctl-icon;
|
|
}
|
|
%{ControllerStatusRoot} %{ControllerBatteryFrame} {
|
|
anchor-name: --lgs-vr-ctl-batt;
|
|
}
|
|
%{ControllerStatusRoot}:has(%{ControllerHand}, %{ControllerGamepadIcon}, %{ControllerBattery})::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: max(4px, calc(anchor(--lgs-vr-ctl-icon top, 4px) - 16px));
|
|
bottom: max(4px, calc(anchor(--lgs-vr-ctl-batt bottom, 4px) - 10px));
|
|
left: 18px;
|
|
right: 18px;
|
|
border-radius: var(--lgs-r-row);
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
pointer-events: none;
|
|
}
|
|
/* hand glyph: SteamVR's grey PNG drawn white (alpha kept) */
|
|
%{ControllerHand} {
|
|
filter: brightness(0) invert(0.94);
|
|
}
|
|
/* gamepad-mode glyph and its connection dots */
|
|
%{ControllerRoleIcon},
|
|
%{ControllerRoleIcon} svg {
|
|
/* the svg carries color="#525252" itself */
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{ControllerConnectionDots} span {
|
|
background: var(--lgs-text-3);
|
|
}
|
|
/* Frame controllers use the large layout, where SteamVR stacks the content
|
|
on the card's bottom edge: move 8px of the battery row's top padding to
|
|
its bottom (same total height, nothing else moves) so the pips sit inside
|
|
the card instead of on its rim. */
|
|
%{ControllerStatusRoot}%{LargeStatusArea} %{ControllerBatteryFrame} {
|
|
padding-top: 12px;
|
|
padding-bottom: 11px;
|
|
}
|
|
%{ControllerAppIcon} {
|
|
border-radius: var(--lgs-r-row);
|
|
}
|
|
/* battery pips are whole-fill colour (DESIGN §9): green, orange under 30%,
|
|
red when low; empty pips are white .24 fills on the card. The pip PNGs
|
|
(a soft glow band, black empty pips) are swapped for an SVG of the same
|
|
natural size (210x25, pips measured from the PNG), so the img box stays
|
|
160x19. Data URIs can't read CSS variables: the fills are the token hex
|
|
values (--lgs-green #30d158, --lgs-orange #ff9f0a, --lgs-red #ff453a).
|
|
Only the horizontal "controller_model_" set is swapped; the charging PNGs
|
|
and SteamVR's vertical "vert_" set keep a full-strength tint (Steam dims
|
|
them to 65%), hue-rotated to orange / red. */
|
|
%{ControllerBattery} {
|
|
filter: saturate(1.15);
|
|
}
|
|
%{ControllerBattery}[src*="_battery_1."] {
|
|
filter: hue-rotate(-82deg) saturate(1.35) brightness(1.05);
|
|
}
|
|
%{ControllerBattery}:is([src*="_low."], [src*="_charging_red."]) {
|
|
filter: hue-rotate(-118deg) saturate(1.5);
|
|
}
|
|
%{ControllerBattery}:is([src*="controller_model_battery_"], [src*="controller_model_low."]) {
|
|
filter: none;
|
|
}
|
|
%{ControllerBattery}[src*="controller_model_battery_4."] {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='25' viewBox='0 0 210 25'%3E%3Ccircle cx='58.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='91.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='123.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='156.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3C/svg%3E");
|
|
}
|
|
%{ControllerBattery}[src*="controller_model_battery_3."] {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='25' viewBox='0 0 210 25'%3E%3Ccircle cx='58.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='91.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='123.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='156.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3C/svg%3E");
|
|
}
|
|
%{ControllerBattery}[src*="controller_model_battery_2."] {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='25' viewBox='0 0 210 25'%3E%3Ccircle cx='58.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='91.5' cy='12.5' r='9.4' fill='%2330d158'/%3E%3Ccircle cx='123.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='156.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3C/svg%3E");
|
|
}
|
|
%{ControllerBattery}[src*="controller_model_battery_1."] {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='25' viewBox='0 0 210 25'%3E%3Ccircle cx='58.5' cy='12.5' r='9.4' fill='%23ff9f0a'/%3E%3Ccircle cx='91.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='123.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='156.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3C/svg%3E");
|
|
}
|
|
%{ControllerBattery}[src*="controller_model_low."] {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='25' viewBox='0 0 210 25'%3E%3Ccircle cx='58.5' cy='12.5' r='9.4' fill='%23ff453a'/%3E%3Ccircle cx='91.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='123.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='156.5' cy='12.5' r='9.4' fill='rgba(255,255,255,0.24)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 5. On-demand systemui panels (appear as their own quads) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* 5.1 App transition ("Next Up" / "Now Exiting" / "Waiting..."): the
|
|
art is content (rounded, never tinted); the label is panel glass.
|
|
Border widths stay (geometry); only their colour goes clear, and the
|
|
glass stops at the padding edge so the rim sits on the visible edge. */
|
|
.TransitionAppImage {
|
|
border-color: transparent;
|
|
border-radius: var(--lgs-r-row);
|
|
}
|
|
.TransitionAppImage.Waiting::after {
|
|
border-radius: var(--lgs-r-row);
|
|
}
|
|
.TransitionAppLabels {
|
|
background: var(--lgs-mat-panel-bg);
|
|
background-clip: padding-box;
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-color: transparent;
|
|
border-radius: var(--lgs-r-row);
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
.TransitionAppLabels .AppStatus {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* 5.2 IPD readout */
|
|
.IPDParent {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-radius: var(--lgs-r-row);
|
|
--ipddescriptiontext: var(--lgs-text-2);
|
|
--ipdvaluetext: var(--lgs-text-1);
|
|
}
|
|
|
|
/* 5.3 Hold-to-recenter / long-press progress ring */
|
|
.ProgressContainer .CircularProgressbar .CircularProgressbar-path {
|
|
stroke: var(--lgs-green);
|
|
}
|
|
.ProgressContainer .CircularProgressbar .CircularProgressbar-background {
|
|
fill: var(--lgs-c1a-vr-panel-tint);
|
|
}
|
|
|
|
/* 5.4 Refresh-rate change and gamepad-unsupported pills */
|
|
[class*="framerate_FramerateRoot_"],
|
|
[class*="gamepadunsupportedmessage_GamepadUnsupportedRoot_"] {
|
|
background: var(--lgs-mat-panel-bg);
|
|
/* SteamVR's 1-3px borders stay (geometry) but go clear around the glass */
|
|
background-clip: padding-box;
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-color: transparent;
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* 5.5 Play-area setup / boundary prompts */
|
|
[class*="roomsetup_RoomSetupContainer_"] {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-radius: var(--lgs-r-row);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_Title_"] {
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_Body_"] {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_ButtonControl_"] {
|
|
background: var(--lgs-raised-bg);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease-out);
|
|
}
|
|
/* laser-only panel: the strong laser hover (section 0) */
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_ButtonControl_"]:hover {
|
|
background: var(--lgs-c1a-vr-hover), var(--lgs-raised-bg);
|
|
box-shadow: var(--lgs-vr-hover-rim);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_ButtonControl_"]:active {
|
|
background: var(--lgs-c1a-vr-press), var(--lgs-raised-bg);
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_ButtonControl_"][class*="roomsetup_Colorful_"] {
|
|
background: var(--lgs-tint-primary);
|
|
color: #fff;
|
|
}
|
|
[class*="roomsetup_RoomSetupContainer_"] [class*="roomsetup_ButtonControl_"][class*="roomsetup_Colorful_"]:hover {
|
|
background: var(--lgs-c1a-vr-hover), var(--lgs-tint-primary);
|
|
}
|
|
|
|
/* 5.6 Steam not ready / boot overlay */
|
|
[class*="loadingthrobber_LoadingRoot_"] {
|
|
background: var(--lgs-mat-panel-bg);
|
|
background-clip: padding-box;
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-color: transparent;
|
|
border-radius: var(--lgs-r-row);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
[class*="loadingthrobber_LoadingRoot_"] [class*="loadingthrobber_Body_"] {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
[class*="loadingthrobber_LoadingRoot_"] [class*="loadingthrobber_ButtonControl_"] {
|
|
background-color: var(--lgs-tint-primary);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: #fff;
|
|
}
|
|
[class*="loadingthrobber_LoadingRoot_"] [class*="loadingthrobber_ButtonControl_"]:hover {
|
|
background-color: var(--lgs-tint-primary);
|
|
background-image: var(--lgs-c1a-vr-hover);
|
|
}
|
|
/* the spinner's black disc (Steam-owned ::before): panel glass disc */
|
|
[class*="loadingthrobber_LoadingThrobberContainer_"]::before {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
}
|
|
|
|
/* 5.7 Persistent notifications (tracking recording, casting): each
|
|
indicator a small panel-glass capsule. Their own fade animation stays. */
|
|
[class*="persistentnotifications_TrackingDataRecordingNotification_"],
|
|
[class*="persistentnotifications_CastingVRScreenNotification_"] {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
|
|
/* 5.8 Frame guided tour / learning topics: the tooltip card is panel
|
|
glass; the blue guide line and dots keep their semantic blue. */
|
|
%{TopPanelContainer} {
|
|
background: var(--lgs-mat-panel-bg);
|
|
box-shadow: var(--lgs-c1a-vr-panel-shade);
|
|
border-radius: var(--lgs-r-row);
|
|
border-bottom-color: var(--lgs-blue);
|
|
}
|
|
%{TourTooltipContainer}%{RightFlow} %{TopPanelContainer} {
|
|
border-right-color: var(--lgs-blue);
|
|
}
|
|
%{TourTooltipContents},
|
|
%{CenteredContent} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{LearningTopicParagraph} {
|
|
text-shadow: none;
|
|
}
|
|
%{BodyText} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{ButtonContainer} %{LearnMoreButton},
|
|
%{ButtonContainer} %{DismissAllButton} {
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{ButtonContainer} %{LearnMoreButton} {
|
|
background: var(--lgs-raised-bg);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{ButtonContainer} %{BlueButton},
|
|
%{ButtonContainer} button.DialogButton%{LearnMoreButton},
|
|
%{ButtonContainer} button.DialogButton%{DismissAllButton} {
|
|
background: var(--lgs-tint-primary);
|
|
color: #fff;
|
|
}
|
|
%{ButtonContainer} %{BlueButton}:hover {
|
|
background: var(--lgs-c1a-vr-hover), var(--lgs-tint-primary);
|
|
}
|