MichaelScottsman--LiquidAss-Frame/theme/35-hud.css

/* Glass Shell, area "hud" (C3a, Phase 2): the small standalone overlays
   that float alone over the room: the bar tooltip, the volume HUD, the
   floating footer hint and the notification toasts. Section 5 (the VR
   keyboard) is C4b's; it stays here until the two-step move of PLAN §6.

   PLAN §1.1, §1.5, §1.6, §1.13; CC §6, §8; WN §3.5.3, §5.5, §5.6; mockups
   control-center-hud.html and window-nav-toast.html. Each surface is its
   own SteamVR quad with nothing in-page behind it, so CSS-only glass is a
   tint plus E3 edges (P4 hook), never an outer shadow: tooltip, volume and
   footer are clip-rected to their content box. In native mode glassd draws
   the cover (theme/layers/00-base.json: tooltip thick, volumelevel and
   notifications panel; flag wp.c3a).

   Never touched: Steam's transforms, inset, the marquee's transform and
   inline vars, SliderTrack::before geometry, the toasts' animation list
   (toastEnterVR / toastExitVR and --toast-duration): our entrance is a
   transition from @starting-style, which outranks the animation only for
   its own 250-490 ms, so Steam's exit still runs.
   Wrapped as html.lgs-on { ... } by the bundler. */


/* ======================================================================
   1. Tooltip (surface tooltip): a thick-glass capsule filling the 400 x 40
   host (40 tp = 48 main px at m .83), 18 tp Semibold (PLAN §1.13). The
   pill is the clip rect's only child and sizes it (fit-content).
   The 0.8 s delay is P3's ShowTooltip wrapper; Steam closes the host at
   once (no exit animation possible).
   ====================================================================== */

%{PopupBody>Tooltip} {
  position: relative;
  box-sizing: border-box;
  min-height: 40px;
  padding-inline: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0) 60%), rgb(36 37 42 / .80);
  box-shadow: var(--lgs-darkedge-thick);
  border: 0;
  border-radius: var(--lgs-r-capsule);
  color: var(--lgs-text-1);
  font-family: var(--lgs-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: none;
  --lgs-edge: thick;
  --lgs-maxside: 400;
  animation: lgs-mat-large-in var(--lgs-motion-mat-in, 250ms linear) backwards;
}


/* ======================================================================
   2. Volume HUD (surface volumelevel): a panel-glass capsule with the
   speaker glyph and a white value fill in a recessed channel (CC §6).
   Placement stays Steam's (S21: hudPlacement off). SliderTrack::before is
   Steam's fill: recoloured and rounded only; its inset and width (from
   --normalized-slider-value) stay Steam's. The number (T2) is drawn by
   device/rt/35-hud.js (flag wp.c3a) as data-lgs-val on the popin.
   ====================================================================== */

%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR} {
  position: relative;
  background: var(--lgs-mat-panel-bg);
  box-shadow: var(--lgs-mat-panel-shade);
  border: 0;
  border-radius: var(--lgs-r-capsule);
  --lgs-edge: panel;
  --lgs-maxside: 224;
  animation: lgs-mat-large-in var(--lgs-motion-mat-in, 250ms linear) backwards;
}
%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR} %{*GamepadDialogContent>FieldIcon} {
  color: var(--lgs-text-1);
  filter: none;
}
%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR} %{*SliderControlPanelGroup>SliderTrack} {
  --left-track-color: var(--lgs-selected-fill);
  background-color: var(--lgs-fill-thick);
  box-shadow: var(--lgs-recessed-shadow);
  border-radius: var(--lgs-r-capsule);
}
%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR} %{*SliderControlPanelGroup>SliderTrack}::before {
  border-radius: var(--lgs-r-capsule);
  transition: width var(--lgs-motion-interactive, 210ms ease);
}
/* T2: the level as a number at the capsule's end (numerals only, §1.15) */
%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR}[data-lgs-val]::after {
  content: attr(data-lgs-val);
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  min-width: 2.2em;
  text-align: right;
  font-family: var(--lgs-font);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lgs-text-1);
  pointer-events: none;
}
%{VolumeSliderLabel>VolumePopin}%{VolumeSliderLabel>VR}[data-lgs-val] {
  padding-right: 52px;
}


/* ======================================================================
   3. Floating footer (surface floatingfooter): the hint under the window
   as one panel-glass capsule, 40 fp tall (radius 20) inside the 600 x 40
   host's content box. Look only; the legends are Steam's (C1a's content).
   Steam dims the legend with filter: brightness(.6) drop-shadow(...):
   replaced by the glass, so glyphs and labels are crisp at full strength.
   The shell's in-window ornament (#Footer, C1a) excludes this footer.
   ====================================================================== */

#Footer%{BasicFooter}%{FloatingVRFooter} {
  position: relative;
  box-sizing: border-box;
  max-height: 40px;
  filter: none;
  background: var(--lgs-mat-panel-bg);
  backdrop-filter: none;
  box-shadow: var(--lgs-mat-panel-shade);
  border: 0;
  border-radius: 20px;
  padding-inline: 10px;
  --lgs-edge: panel;
  --lgs-maxside: 600;
  animation: lgs-mat-large-in var(--lgs-motion-mat-in, 250ms linear) backwards;
}
#Footer%{BasicFooter}%{FloatingVRFooter}::after {
  content: none;
}
%{FloatingVRFooter} %{ActionButtonLegend} %{ActionButtonLabel} {
  color: var(--lgs-text-1);
  font-family: var(--lgs-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}


/* ======================================================================
   4. Notification toasts (window VRNotificationToasts, surface
   notifications). The body has only .LowPerfMode. The 340 x 80 quad has
   no clip rect; Steam's %{GamepadToastPopup} keeps inset 0 0 0 20px, so
   the card sits at x 20, y 2 (WN §5.5): 320 x 76, radius 30 (TwoLine 80).
   Icon disc 48 (achievements: a rounded square), title 20, body 18, the
   header icon 18. No outline, no border, no outer CSS shadow.
   ====================================================================== */

%{GamepadToastPopup}%{GamepadToastPlaceholder>VR} > * {
  outline: 0 solid transparent;
}
%{GamepadToastPopup} > %{ShortTemplate} {
  position: relative;
  box-sizing: border-box;
  width: 320px;
  height: 76px;
  padding: 0 18px 0 14px;
  gap: 12px;
  background: var(--lgs-mat-panel-bg);
  box-shadow: var(--lgs-mat-panel-shade);
  border: 0;
  border-radius: var(--lgs-r-toast);
  isolation: isolate;
  --lgs-edge: panel;
  /* entrance (MO §4.10): materialize + 8 px from above, as a transition
     from @starting-style; Steam's animation list stays untouched */
  transition: opacity var(--lgs-d-mat-in, 250ms) linear,
              scale var(--lgs-motion-snappy, 488ms ease),
              translate var(--lgs-motion-snappy, 488ms ease),
              background-color var(--lgs-motion-fade, 441ms ease);
  @starting-style {
    opacity: 0;
    scale: .962;
    translate: 0 -8px;
  }
}
%{GamepadToastPopup} > %{ShortTemplate}%{TwoLine} {
  height: 80px;
  max-height: 80px;
}
/* laser hover: + .08 on the card (an inset layer above the glass) */
%{GamepadToastPopup} > %{ShortTemplate}::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background-color var(--lgs-motion-fade, 441ms ease);
}
&:not(.lgs-input-pad) %{GamepadToastPopup} > %{ShortTemplate}:hover {
  background: var(--lgs-mat-panel-bg);
}
&:not(.lgs-input-pad) %{GamepadToastPopup} > %{ShortTemplate}:hover::before {
  background: rgb(255 255 255 / var(--lgs-hover-add));
}
&:not(.lgs-input-laser) %{GamepadToastPopup} > %{ShortTemplate}.gpfocus::before {
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / var(--lgs-focus-spot)) 0, rgb(255 255 255 / 0) 75%), 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));
}
/* incoming call: Steam's green as a whole fill, dark text (white on green
   is about 2:1) */
%{GamepadToastPopup} > %{ShortTemplate}%{ShortTemplate>IncomingCallToast} {
  background: var(--lgs-tint-play);
  border-left: 0;
  color: var(--lgs-text-on-color);
}
%{ShortTemplate}%{ShortTemplate>IncomingCallToast} :is(%{ShortTemplate>Title}, %{ShortTemplate>Body}, %{ShortTemplate>Icon}) {
  color: var(--lgs-text-on-color) !important;
}
%{ShortTemplate}%{ShortTemplate>IncomingCallToast} %{ShortTemplate>AvatarStatus} {
  border-right-color: transparent;
}

/* the logo: a 48 disc (avatars, app icons); art stays content */
%{ShortTemplate} %{ShortTemplate>ShortLogoDimensions} {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
%{ShortTemplate} %{ShortTemplate>ShortLogoDimensions} > :is(img, svg),
%{ShortTemplate} %{ShortTemplate>AppLogo} {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
%{ShortTemplate} %{ShortTemplate>AppLogo} > img {
  border-radius: 50%;
  border-color: transparent;
  box-shadow: none;
}
/* friend status strip: a small rounded pill beside the avatar */
%{ShortTemplate} %{ShortTemplate>AvatarStatus} {
  box-shadow: none;
  border-radius: var(--lgs-r-capsule);
  margin-block: 18px;
}

/* text: Steam sizes the header and lines for 13-14 px type */
%{ShortTemplate} %{ShortTemplate>Header},
%{ShortTemplate} %{ShortTemplate>Title},
%{ShortTemplate}:not(%{TwoLine}) %{ShortTemplate>Body} {
  height: auto;
  max-height: none;
}
%{ShortTemplate} %{ShortTemplate>Header} {
  align-items: center;
  gap: 6px;
}
%{ShortTemplate} %{ShortTemplate>Title} {
  color: var(--lgs-text-1);
  font-family: var(--lgs-font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: none;
}
%{ShortTemplate} %{ShortTemplate>Body} {
  color: var(--lgs-text-2);
  font-family: var(--lgs-font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: none;
}
%{ShortTemplate}%{TwoLine} %{ShortTemplate>Body} {
  line-height: 1.15;
}
%{ShortTemplate} %{ShortTemplate>Icon} {
  color: var(--lgs-text-1);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
%{ShortTemplate} %{ShortTemplate>Icon} svg {
  width: 18px;
  height: 18px;
}
/* unread count: a whole-fill badge (deep red, white Bold) */
%{ShortTemplate} %{ShortTemplate>Count} {
  background-color: rgb(204 32 40);
  color: #fff;
  font-weight: 700;
  border-radius: var(--lgs-r-capsule);
}


/* ======================================================================
   5. VR keyboard (window VRKeyboard): a visionOS-style glass keyboard.
   Steam skins the keyboard with custom properties on
   Keyboard.<skin>; only the default skin is re-skinned, so a user's chosen
   skin (Pumpkin, NightShift, DEX ...) keeps working untouched.
   - slab: panel glass, r-panel; corner keys follow the slab's curve
     (concentric: r-panel minus the 3-4px inset);
   - keys: fills (fill-2), special keys stronger (fill-3), r-small, inner
     top rim; labels white;
   - focused / laser-hovered key (virtual focus %{Modal>Focused}, not
     .gpfocus): bright white, dark label;
   - pressed (%{Modal>Touched}): white, pushed in (pressed scale + depth);
     Steam's Touched::after shine stays;
   - Shift/Caps locked (%{Modal>ToggleOn}): white selected; one-shot:
     brighter fill, bold;
   - Enter: the one tinted key (--lgs-tint-primary laid over the darkest ink
     so the white label keeps 4.5:1 over a bright room).
   Never touched: hit-area padding (the hit target), label span transforms
   and opacity, the container's keyboard_appear animation, gridcells.
   ====================================================================== */

%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme {
  --key-background-color: var(--lgs-fill-2);
  --key-color: var(--lgs-text-1);
  --key-shift-label-color: var(--lgs-text-1);
  --key-action-button-glyph-color: var(--lgs-text-2);
  --key-focused-background-color: var(--lgs-selected-fill);
  --key-focused-color: var(--lgs-text-on-selected);
  --key-focused-shift-label-color: var(--lgs-text-on-selected);
  --key-focused-action-button-left-color: var(--lgs-text-on-selected);
  --key-focused-action-button-right-color: var(--lgs-text-on-selected);
  --key-meta-background-color: var(--lgs-fill-3);
  --key-meta-color: var(--lgs-text-1);
  --key-tab-background-color: var(--lgs-fill-3);
  --key-tab-color: var(--lgs-text-1);
  --key-caps-background-color: var(--lgs-fill-3);
  --key-caps-color: var(--lgs-text-1);
  --key-shift-background-color: var(--lgs-fill-3);
  --key-shift-color: var(--lgs-text-1);
  --key-backspace-background-color: var(--lgs-fill-3);
  --key-backspace-color: var(--lgs-text-1);
  --key-enter-background-color: color-mix(in srgb, var(--lgs-blue) 82%, var(--lgs-text-on-selected));
  --key-enter-color: var(--lgs-text-on-tint);
  --key-enter-action-button-glyph-color: var(--lgs-text-on-tint);
  --key-spacebar-background-color: var(--lgs-fill-2);
  --key-spacebar-color: var(--lgs-text-1);
  --key-spacer-background-color: transparent;
  --key-extendedkey-background-color: transparent;
  --key-extendedkey-color: var(--lgs-text-1);
  --key-extendedkey-focused-background-color: var(--lgs-selected-fill);
  --key-extendedkey-focused-color: var(--lgs-text-on-selected);
  --key-extendedkey-hover-background-color: var(--lgs-selected-fill);
  --key-extendedkey-hover-color: var(--lgs-text-on-selected);
  --key-toggleon-background-color: var(--lgs-selected-fill);
  --key-toggleon-color: var(--lgs-text-on-selected);
  --key-toggleoneshot-background-color: var(--lgs-pressed-fill);
  --key-toggleoneshot-color: var(--lgs-text-1);
  --key-emoji-color: var(--lgs-text-1);
  --key-emoji-category-highlight-background-color: var(--lgs-fill-3);
  --key-emoji-focused-background-color: var(--lgs-selected-fill);
  --key-emoji-focused-color: var(--lgs-text-on-selected);
  --key-touched-background-color: var(--lgs-selected-fill);
  --key-touched-color: var(--lgs-text-on-selected);
  /* trackpad touch pointers (Steam draws them at .5 opacity): a soft white
     disc with a dark ring, visible on glass keys and on the white focus */
  --key-pointer-background-color: var(--lgs-selected-fill);
  --key-pointer-stroke-color: var(--lgs-text-on-selected);
  --key-deadkey-background-color: var(--lgs-fill-3);
  --key-deadkeyinactive-color: var(--lgs-text-2);
  --key-deadkeyactive-color: var(--lgs-text-1);

  /* the slab */
  background: var(--lgs-panel-sheen), var(--lgs-panel-bg);
  box-shadow: var(--lgs-panel-rim);
  border-radius: var(--lgs-r-panel);
}

/* keys: rounded fills with an inner top rim */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{Modal>KeyboardKey} {
  border-radius: var(--lgs-r-small);
  box-shadow: var(--lgs-control-rim);
  text-shadow: var(--lgs-text-shadow);
  transition: background-color var(--lgs-t-fast) var(--lgs-ease),
      color var(--lgs-t-fast) var(--lgs-ease),
      scale var(--lgs-t-fast) var(--lgs-ease);
}
/* corner keys follow the slab's curve (keyboard padding + hit-area padding
   put them 3-4px in from the edge) */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme > :nth-child(1 of %{Keyboard>KeyboardRow}) > :first-child %{Modal>KeyboardKey} {
  border-top-left-radius: calc(var(--lgs-r-panel) - 4px);
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme > :nth-child(1 of %{Keyboard>KeyboardRow}) > :last-child %{Modal>KeyboardKey} {
  border-top-right-radius: calc(var(--lgs-r-panel) - 4px);
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme > :nth-last-child(1 of %{Keyboard>KeyboardRow}) > :first-child %{Modal>KeyboardKey} {
  border-bottom-left-radius: calc(var(--lgs-r-panel) - 4px);
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme > :nth-last-child(1 of %{Keyboard>KeyboardRow}) > :last-child %{Modal>KeyboardKey} {
  border-bottom-right-radius: calc(var(--lgs-r-panel) - 4px);
}

/* focused / laser-hovered key: bright white, dark label, no rim */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{Modal>KeyboardKey}%{Modal>Focused} {
  box-shadow: none;
  text-shadow: none;
}
/* pressed: white, pushed in. Beats DefaultTheme's blue Touched fill */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{Modal>KeyboardKey}%{Modal>Touched} {
  background-color: var(--key-touched-background-color);
  color: var(--key-touched-color);
  box-shadow: var(--lgs-track-depth);
  text-shadow: none;
  scale: var(--lgs-pressed-scale);
}
/* Shift / Caps: locked = white selected, one-shot = brighter fill */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{Modal>KeyboardKey}%{Modal>ToggleOn}:not(%{Modal>Focused}, %{Modal>Touched}) {
  background-color: var(--key-toggleon-background-color);
  color: var(--key-toggleon-color);
  box-shadow: var(--lgs-pill-shadow);
  text-shadow: none;
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{Modal>KeyboardKey}%{Modal>ToggleOneShot}:not(%{Modal>Focused}, %{Modal>Touched}) {
  background-color: var(--key-toggleoneshot-background-color);
  color: var(--key-toggleoneshot-color);
}

/* long-press accent row: a small popover over the keys, so thick glass
   (it really blurs the keys under it); accents are clear cells at rest and
   the focused one is the white pill. Position/size stay Steam's. */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{KeyboardExtendedRow} {
  background: var(--lgs-panel-sheen), var(--lgs-thick-bg);
  backdrop-filter: var(--lgs-thick-blur);
  box-shadow: var(--lgs-glass-rim), var(--lgs-glass-shadow);
  border-radius: var(--lgs-r-row);
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{KeyboardExtendedKey} {
  border-radius: var(--lgs-r-row);
  text-shadow: var(--lgs-text-shadow);
  transition: background-color var(--lgs-t-fast) var(--lgs-ease), color var(--lgs-t-fast) var(--lgs-ease);
}
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme %{KeyboardExtendedKey}:is(%{Modal>Focused}, :hover) {
  text-shadow: none;
}
/* emoji / Steam items layouts */
%{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme :is(%{KeyboardEmojiKey}, %{KeyboardSteamItemKey}) {
  border-radius: var(--lgs-r-small);
}

/* buffered mode (an app opened the keyboard): the text preview row sits on
   top of the keys as the slab's upper part, one continuous panel (default
   skin only, like everything above) */
%{VRVirtualKeyboardContents}:has(> %{Modal>Keyboard}.DefaultTheme) > %{VirtualKeyboardTextBuffer} {
  background: var(--lgs-panel-sheen), var(--lgs-panel-bg);
  box-shadow: var(--lgs-panel-rim);
  border-radius: var(--lgs-r-panel) var(--lgs-r-panel) 0 0;
}
%{VRVirtualKeyboardContents}:has(> %{Modal>Keyboard}.DefaultTheme) > %{VirtualKeyboardTextBuffer} %{VirtualKeyboardTextBufferText} {
  color: var(--lgs-text-1);
  text-shadow: var(--lgs-text-shadow);
}
%{VRVirtualKeyboardContents}:has(> %{Modal>Keyboard}.DefaultTheme) > %{VirtualKeyboardTextBuffer} %{VirtualKeyboardTextBufferCursor} {
  background-color: var(--lgs-caret);
}
%{VRVirtualKeyboardContents}:has(> %{VirtualKeyboardTextBuffer}) > %{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
%{VRVirtualKeyboardContents}:has(> %{VirtualKeyboardTextBuffer}) > %{Modal>Keyboard}%{Modal>VRFloatingKeyboard}.DefaultTheme > :nth-child(1 of %{Keyboard>KeyboardRow}) > :is(:first-child, :last-child) %{Modal>KeyboardKey} {
  border-top-left-radius: var(--lgs-r-small);
  border-top-right-radius: var(--lgs-r-small);
}