mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-25 11:01:21 +01:00
MichaelScottsman
5af91fc1bd
Route changes
- Plates fade with their content: the reporter reads a running opacity fade on a plate or its ancestors
(Home -> Friends: the route's 150 ms exit) and reports exitAt/exitMs; glassd fades the plate's coverage
linearly on that clock, optics unchanged (cap exitAt); the daemon keeps a leaving plate for exactly
that fade. A plate whose element left the DOM (Home -> Library stays in one /library route: no fade,
Home unmounts when Library has rendered) goes in 90 ms instead of the 350 ms dematerialize ramp that
left Home's discs over the Library grid.
- The window cover arrives with the route: the shell sets the new route's glass mode in the history
change itself, the reporter reports the mode flip at once (tickNow) with the time it happened, and
glassd springs a kept surface's new cover from then (appearAt now also for main gaining its cover).
- A disc popped at the switch belongs to the page that leaves: it never flips the new page to the crops
layout and goes with the page's fade (lgs_sg.js routeOut).
Sidebar in VR Settings
- The frame menu is a laser-only surface keyed on Steam's gamepad-nav flag, which goes stale on
SteamVR's own pages (the laser works SteamVR's page): the native glass went on and off with every
input Steam saw, its CSS glass in between. On a SteamVR page (the frame's VR Settings action active)
the rule does not apply.
Friends
- The page starts at y 108 (C1a's pad + 40, as Settings' list): the sidebar platter no longer sits
under the search capsule.
Glass tuner (flag glassTune, on)
- A paintbrush circle after the system capsule (its own glass piece and native cover) opens a bar popup
through Steam's own bar popup button: colour (8 swatches) and tint strength, Glass intensity (the
dial), Refraction, Frost, Highlights, Reset to default.
- Daemon action glass.tune (kind ui, its own 40 ms rate, outside the global window): glassd.json at once,
~/.config/glass-shell/tune.json 400 ms after the last change (kept across reboots by request; the
defaults delete it; RT-6 allows exactly this file), the dial file mirrored for the SteamVR pages.
- glassd: tune {refract, frost, light, hue, hueK} applied in drawGlass, eased (40 ms) like the dial now
is; the glass body's neutral moves toward the hue (uHue), per-piece tints stay on top (cap tune).
- The CSS glass follows live: a style per Steam window sets --lgs-dial / --lgs-tune-hue; the material
tints mix the colour in.
1281 lines
44 KiB
CSS
1281 lines
44 KiB
CSS
/* Glass Shell phase 2, area C7 "social" (surface main): People (/chat), Add a
|
|
Friend (/invites), your profile (/account), Downloads (/library/downloads),
|
|
Photos (/media/grid, /media/item/*, /media/list) and the store / web chrome
|
|
(/steamweb, /externalweb). Concept: docs/phase2/concepts/social-media.md
|
|
(SM); decisions PLAN §1 (route glass modes §1.2, controls §1.3, states
|
|
§1.4, materials §1.6). Owner: C7. Wrapped as html.lgs-on { ... }.
|
|
|
|
Rules of this file
|
|
- Window glass, toolbar row, ornament: C1a (20-shell.css). Primitives
|
|
(DialogButton, toggles, dropdowns, fields, rows): C4a (10-primitives.css).
|
|
Menus, alerts, sheets: C1c. This file styles only the area's own nodes.
|
|
- Light comes from P4's hooks (--lgs-ill, --lgs-edge, 04-states.css), so
|
|
Steam's keyframe focus fills (ItemFocusAnim-*) are cleared !important
|
|
and the focus contrast lives in the hook. No border, outline or 1 px
|
|
line anywhere (P-42, P-43). Type from the --lgs-type-* tokens (≥ 18 px,
|
|
≥ 500, no uppercase or tracking: P-38, P-84).
|
|
- Geometry: only padding, min-height and the sidebar width are touched;
|
|
Steam's transforms, virtualised rows and inline geometry are left alone.
|
|
- T2 hooks (device/rt/70-social.js, flag wp.c7): [data-lgs-current] on the open
|
|
conversation's friend row; data-lgs-plate on the /invites card (windowless);
|
|
More hosts (C1a's helper). Nothing here needs them. */
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 1. People: Friends & Chat (/chat), SM §3.1 */
|
|
/* Window mode `window` (656). Sidebar 512 on black .14, conversation */
|
|
/* on the bare window glass. Scoped to %{FriendsChats}: the Quick */
|
|
/* Access panel reuses the literal friends classes. */
|
|
/* ====================================================================== */
|
|
|
|
/* the page starts under the toolbar row: the search capsule's box runs to y 94, so the sidebar's
|
|
platter starts at y 108 like Settings' list (C1a's pad + 40), never under the capsule */
|
|
%{FriendsChats} {
|
|
padding-top: calc(var(--lgs-hdr-pad, 68px) + 40px);
|
|
padding-bottom: max(var(--gamepadui-current-footer-height, 0px), 92px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* the split fills the padded box (Steam sizes it to the viewport) */
|
|
%{FriendsChats} .FriendsListAndChatsSteamDeck {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* --- 1.1 Sidebar: 512 px, black .14, no line --------------------------- */
|
|
%{FriendsChats} %{FriendListContainerPanel},
|
|
%{FriendsChats} %{FriendListContainerPanel} .friendlist.GamepadMode {
|
|
width: 512px;
|
|
max-width: 512px;
|
|
flex: 0 0 512px;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode,
|
|
%{FriendsChats} .friendlist.GamepadMode.gpfocuswithin {
|
|
background: var(--lgs-fill-regular);
|
|
border-right-color: transparent;
|
|
border-radius: 0 var(--lgs-r-platter) var(--lgs-r-platter) 0;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTopSection,
|
|
%{FriendsChats} .friendlist.GamepadMode.gpfocuswithin .FriendsListSteamDeckTopSection {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
height: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
/* title row: the tab's name (Title 1) and the action circles */
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader {
|
|
font: var(--lgs-type-title1);
|
|
letter-spacing: var(--lgs-track-title);
|
|
text-transform: none;
|
|
color: var(--lgs-text-1);
|
|
min-height: 80px;
|
|
padding-inline: 24px 12px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader .FriendActionsContainer {
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
/* Add Friend, pending invites, New Group Chat: 60 px circles in 80 px hit
|
|
boxes (a 10 px transparent border carries the hit, the fill is clipped
|
|
to the padding box) */
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader :is(.AddFriendButton, .NewChatGroupButton, .FriendsInvitesButton) {
|
|
width: 80px;
|
|
height: 80px;
|
|
box-sizing: border-box;
|
|
border: 10px solid transparent;
|
|
background: var(--lgs-raised-bg);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-r-capsule);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--lgs-text-1);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-inset: 10px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader :is(.AddFriendButton, .NewChatGroupButton, .FriendsInvitesButton).gpfocus {
|
|
background: var(--lgs-raised-bg) !important;
|
|
background-clip: padding-box !important;
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader :is(.AddFriendButton, .NewChatGroupButton, .FriendsInvitesButton) svg {
|
|
width: var(--lgs-symbol);
|
|
height: var(--lgs-symbol);
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .TabPanelHeader .FriendsInvitesButton .PendingInviteCount {
|
|
background: var(--lgs-red);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-on-tint);
|
|
font: var(--lgs-type-caption);
|
|
min-width: 28px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* --- 1.2 Tabs: a recessed 64 px track with four contiguous segments.
|
|
Each tab is 80 tall (10 px of transparent hit above and below the
|
|
track); its visible segment is its ::before. The L1 / R1 badges sit at
|
|
the track's ends inside its padding. */
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTabs {
|
|
position: relative;
|
|
height: 80px;
|
|
margin-inline: 8px;
|
|
padding-inline: 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
isolation: isolate;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTabs::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8px 0;
|
|
z-index: -2;
|
|
border-radius: var(--lgs-r-capsule);
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
pointer-events: none;
|
|
}
|
|
/* L1 / R1 (clickable: they page the tabs): 60 px circles in 80 px boxes
|
|
at the track's ends */
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTabs %{TabBumper} {
|
|
flex: 0 0 80px;
|
|
height: 80px;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
border: 10px solid transparent;
|
|
border-radius: var(--lgs-r-capsule);
|
|
background: var(--lgs-raised-bg);
|
|
background-clip: padding-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-inset: 10px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListSteamDeckTabs %{BumperIcon} {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab {
|
|
position: relative;
|
|
flex: 1 1 0;
|
|
height: 80px;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--lgs-text-2);
|
|
background: transparent !important;
|
|
isolation: isolate;
|
|
transition: color var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease);
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab > :is(svg, %{RecentChatIcon}) {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
/* the visible segment: 60 tall, inset 10 inside the 80 px tab */
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 10px 0;
|
|
z-index: -1;
|
|
border-radius: var(--lgs-r-capsule);
|
|
pointer-events: none;
|
|
transition: background-color var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease), box-shadow var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease);
|
|
}
|
|
&.lgs-input-laser %{FriendsChats} .friendlist.GamepadMode .FriendsListTab:hover:not(.Active)::before,
|
|
&:not(.lgs-input-laser):not(.lgs-input-pad) %{FriendsChats} .friendlist.GamepadMode .FriendsListTab:hover:not(.Active)::before {
|
|
background-color: rgb(255 255 255 / var(--lgs-hover-add));
|
|
}
|
|
&:not(.lgs-input-laser) %{FriendsChats} .friendlist.GamepadMode .FriendsListTab.gpfocus:not(.Active)::before {
|
|
background-color: 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));
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab.Active::before {
|
|
background-color: var(--lgs-selected-fill);
|
|
box-shadow: var(--lgs-pill-shadow);
|
|
}
|
|
/* focus on the white segment: the blurred outer glow (P-16), never a ring */
|
|
&:not(.lgs-input-laser) %{FriendsChats} .friendlist.GamepadMode .FriendsListTab.Active.gpfocus::before {
|
|
box-shadow: 0 0 var(--lgs-white-glow-blur, 22px) calc(var(--lgs-white-glow-spread, 8px) / 2) rgb(255 255 255 / var(--lgs-white-glow-a, .55));
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab:is(:hover, .gpfocus) {
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab.Active,
|
|
%{FriendsChats} .friendlist.GamepadMode .FriendsListTab.Active:is(:hover, .gpfocus) {
|
|
color: var(--lgs-text-on-selected) !important;
|
|
}
|
|
|
|
/* --- 1.3 Group headers and friend rows: 80 px contiguous rows, light from
|
|
the row hook (pill inset 6); the list itself has no lines. */
|
|
%{FriendsChats} .friendlistListContainer .friendGroup,
|
|
%{FriendsChats} .friendlistListContainer .friendGroup:first-child {
|
|
border-top-color: transparent !important;
|
|
border-image: none !important;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupHeaderContainer {
|
|
padding-inline: 12px;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupName {
|
|
min-height: 80px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-inline: 14px;
|
|
font: var(--lgs-type-callout);
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
background: transparent !important;
|
|
border-radius: var(--lgs-r-row);
|
|
position: relative;
|
|
isolation: isolate;
|
|
--lgs-ill: nav;
|
|
--lgs-ill-inset: 6px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupName.gpfocus {
|
|
color: var(--lgs-text-1) !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupName .groupCount,
|
|
%{FriendsChats} .friendGroup .groupName .groupCount.collapsed {
|
|
font: var(--lgs-type-subhead);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-3);
|
|
margin-inline-start: 8px;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupName .groupIcon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
%{FriendsChats} .friendGroup .groupName hr {
|
|
border-color: transparent;
|
|
}
|
|
%{FriendsChats} .friendGroup :is(.ExpandPlusMinus, .ExpandArrow) {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{FriendsChats} .friendGroup .SortByRecent {
|
|
min-width: 60px;
|
|
min-height: 60px;
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-2);
|
|
background: transparent !important;
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
|
|
/* friend rows: 80 tall (contiguous pitch); the pill is the hook's */
|
|
%{FriendsChats} .friendlistListContainer .friendCategoryContainer {
|
|
padding-inline: 12px;
|
|
margin: 0;
|
|
}
|
|
%{FriendsChats} .friendlistListContainer .friend,
|
|
%{FriendsChats} .friendlistListContainer .friend.gpfocus {
|
|
min-height: 80px;
|
|
box-sizing: border-box;
|
|
padding-block: 0;
|
|
padding-inline: 14px 10px;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border-radius: var(--lgs-r-row);
|
|
isolation: isolate;
|
|
--lgs-ill: nav;
|
|
--lgs-ill-inset: 6px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
/* the open conversation (T2 attribute): navigation selection, the only filled
|
|
row; the white .18 pill + specular arc + Semibold name */
|
|
%{FriendsChats} .friendlistListContainer .friend[data-lgs-current]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 6px;
|
|
z-index: -1;
|
|
border-radius: var(--lgs-r-row);
|
|
background: var(--lgs-fill-nav);
|
|
box-shadow: var(--lgs-sel-arc);
|
|
pointer-events: none;
|
|
}
|
|
%{FriendsChats} .friendlistListContainer .friend:not([data-lgs-current])::before {
|
|
content: none;
|
|
}
|
|
%{FriendsChats} .friend[data-lgs-current] %{playerName} {
|
|
font-weight: var(--lgs-nav-weight);
|
|
}
|
|
%{FriendsChats} .friend %{playerName} {
|
|
font: var(--lgs-type-body);
|
|
color: var(--lgs-text-1) !important;
|
|
text-shadow: none !important;
|
|
}
|
|
%{FriendsChats} .friend %{richPresenceLabel},
|
|
%{FriendsChats} .friend %{gameName} {
|
|
font: var(--lgs-type-subhead);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2) !important;
|
|
text-shadow: none !important;
|
|
}
|
|
%{FriendsChats} .friend .labelHolder {
|
|
height: auto;
|
|
}
|
|
%{FriendsChats} .friend .labelHolder.offline %{playerName} {
|
|
color: var(--lgs-text-2) !important;
|
|
}
|
|
%{FriendsChats} .friend .labelHolder.offline %{richPresenceLabel} {
|
|
color: var(--lgs-text-3) !important;
|
|
}
|
|
%{FriendsChats} .friend.gpfocus .labelHolder.offline %{playerName} {
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{FriendsChats} .friend.gpfocus .labelHolder.offline %{richPresenceLabel} {
|
|
color: var(--lgs-text-2) !important;
|
|
}
|
|
%{FriendsChats} .friend %{SnoozeZ} {
|
|
font: var(--lgs-type-footnote);
|
|
font-weight: 700;
|
|
color: var(--lgs-text-3);
|
|
}
|
|
/* avatar: a circle; the status bar becomes a 3 px rounded tick in the
|
|
system colour beside it */
|
|
%{FriendsChats} .friend .avatarHolder img%{avatar} {
|
|
border-radius: 50%;
|
|
box-shadow: none;
|
|
}
|
|
%{FriendsChats} .friend .avatarHolder .avatarStatus {
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{FriendsChats} .avatarHolder.online .avatarStatus {
|
|
background-color: var(--lgs-blue);
|
|
}
|
|
%{FriendsChats} .avatarHolder.ingame .avatarStatus {
|
|
background-color: var(--lgs-green);
|
|
}
|
|
%{FriendsChats} .avatarHolder.offline .avatarStatus {
|
|
background-color: var(--lgs-text-3);
|
|
}
|
|
%{FriendsChats} .friend .avatarHolder.offline img%{avatar} {
|
|
filter: saturate(.4);
|
|
}
|
|
%{FriendsChats} .friend.inGroup .SteamPlayerGroupLines {
|
|
border-color: var(--lgs-green);
|
|
}
|
|
/* empty tab panels (Favorites, Groups, Recent Chats) */
|
|
%{FriendsChats} :is(.ChatRoomList_Empty, .ChatRoomList_Empty_Description) {
|
|
font: var(--lgs-type-callout);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* --- 1.4 Conversation (bare window glass) ----------------------------- */
|
|
%{FriendsChats} .multiChatDialog.GamepadMode,
|
|
%{FriendsChats} .multiChatDialog.GamepadMode.gpfocuswithin {
|
|
background: none;
|
|
}
|
|
%{FriendsChats} .chatDialogs .emptyChatDialogs {
|
|
font-size: var(--lgs-fs-callout, 22px);
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
/* header lockup: no slab, no line; the light is the row hook's pill */
|
|
%{FriendsChats} .multiChatDialog %{ChatTab},
|
|
%{FriendsChats} .multiChatDialog %{ChatTab}%{ChatTabTransitionGroup>Active},
|
|
%{FriendsChats} .multiChatDialog %{ChatTab}%{ChatTabTransitionGroup>Active}.gpfocus {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
min-height: 80px;
|
|
box-sizing: border-box;
|
|
margin-top: 26px;
|
|
border-radius: var(--lgs-r-row);
|
|
isolation: isolate;
|
|
--lgs-ill: row;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{FriendsChats} .multiChatDialog %{ChatTab} %{playerName} {
|
|
font: var(--lgs-type-headline);
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{FriendsChats} .multiChatDialog %{ChatTab} %{richPresenceLabel} {
|
|
font: var(--lgs-type-subhead);
|
|
color: var(--lgs-text-2) !important;
|
|
}
|
|
%{FriendsChats} .multiChatDialog %{ChatTab} .avatarHolder img%{avatar} {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* history */
|
|
%{FriendsChats} %{FriendListInsetShadowTop},
|
|
%{FriendsChats} .multiChatDialog.gpfocuswithin %{FriendListInsetShadowTop} {
|
|
background: none;
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer .msg.timeDivision {
|
|
font: var(--lgs-type-caption);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer .timeDivision :is(.preHorizDivider, .horizDivider) {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer .timeDivision.new_messages :is(.preHorizDivider, .horizDivider) {
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
background-color: var(--lgs-orange);
|
|
}
|
|
/* the history takes focus as a whole (A = pick a message): a lit panel,
|
|
no ring (Steam's opacity toggle untouched) */
|
|
%{FriendsChats} .ChatHistoryContainer .ChatHistorySelector {
|
|
background: rgb(255 255 255 / var(--lgs-within-add));
|
|
border-radius: var(--lgs-r-platter);
|
|
box-shadow: none;
|
|
filter: none;
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer.gpfocus .msg,
|
|
%{FriendsChats} .ChatHistoryContainer .gpfocus .msg {
|
|
background: transparent;
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer .msg.gpfocus,
|
|
%{FriendsChats} .ChatHistoryContainer .msg :is(div.ChatMessageOpenGraph, div.SteamPublishedFile).gpfocus {
|
|
background: rgb(255 255 255 / var(--lgs-focus-add)) !important;
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-r-row);
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer .msg :is(div.ChatMessageOpenGraph, div.SteamPublishedFile) {
|
|
background-color: var(--lgs-fill-thin);
|
|
border-radius: var(--lgs-r-row);
|
|
}
|
|
%{FriendsChats} .ChatHistoryContainer :is(.ChatSpeaker .speaker, .speakerName) {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{FriendsChats} .msgText,
|
|
%{FriendsChats} .ChatMessageBlock .msg {
|
|
font: var(--lgs-type-body);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{FriendsChats} :is(.speakerTimeStamp, .FriendChatTimeStamp) {
|
|
font: var(--lgs-type-footnote);
|
|
text-transform: none;
|
|
color: var(--lgs-text-3);
|
|
}
|
|
%{FriendsChats} .FriendChatTypingNotification {
|
|
background: none;
|
|
font: var(--lgs-type-subhead);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{FriendsChats} .RadialMenuExplainerText {
|
|
font: var(--lgs-type-footnote);
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
%{FriendsChats} .dropTargetBox {
|
|
border-color: transparent;
|
|
background: var(--lgs-fill-thin);
|
|
border-radius: var(--lgs-r-platter);
|
|
}
|
|
|
|
/* voice and invite: 60 px circles (80 px boxes) in a column inset 16 from
|
|
the glass edge; the history keeps clear of them */
|
|
%{FriendsChats} .SteamDeckChats .RightSideButtonContainer {
|
|
right: 16px;
|
|
width: 80px;
|
|
}
|
|
%{FriendsChats} .SteamDeckChats .chatBody {
|
|
padding-inline-end: 96px;
|
|
box-sizing: border-box;
|
|
}
|
|
/* voice and invite: 60 px circles on the glass (80 px boxes) */
|
|
%{FriendsChats} .SteamDeckChats .RightSideButtonContainer :is(.oneOnOneVoiceChatButton, .inviteAnotherFriendButton, .AddFriendButton) {
|
|
width: 80px;
|
|
height: 80px;
|
|
box-sizing: border-box;
|
|
border: 10px solid transparent;
|
|
background: var(--lgs-raised-bg);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-r-capsule);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-inset: 10px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
:where(%{FriendsChats} .RightSideButtonContainer) > :is(.oneOnOneVoiceChatButton, .inviteAnotherFriendButton, .AddFriendButton) {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{FriendsChats} .RightSideButtonContainer .oneOnOneVoiceChatButton .SVGIcon_VoiceRoom {
|
|
color: inherit;
|
|
}
|
|
%{FriendsChats} .SteamDeckChats .RightSideButtonContainer :is(.inviteAnotherFriendButton, .AddFriendButton).gpfocus {
|
|
background: var(--lgs-raised-bg) !important;
|
|
background-clip: padding-box !important;
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
|
|
/* compose: a 64 px recessed capsule; the field ring only while focused;
|
|
Send is the one blue action */
|
|
%{FriendsChats} .multiChatDialog .chatWindow .chatEntry > %{chatEntryControls},
|
|
%{FriendsChats} .multiChatDialog.gpfocuswithin .chatWindow .chatEntry > %{chatEntryControls} {
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
min-height: var(--lgs-field);
|
|
box-sizing: border-box;
|
|
transition: box-shadow var(--lgs-d-interactive, 210ms) var(--lgs-ease-b0, ease);
|
|
}
|
|
%{FriendsChats} .multiChatDialog .chatWindow .chatEntry > %{chatEntryControls}:has(%{chatTextarea}.gpfocus),
|
|
%{FriendsChats} .multiChatDialog .chatWindow .chatEntry > %{chatEntryControls}:has(%{chatTextarea}:focus) {
|
|
box-shadow: var(--lgs-recessed-shadow), var(--lgs-field-focus);
|
|
}
|
|
/* the field and Send take 80 px hit boxes that overhang the 64 px capsule
|
|
by 8 px above and below (the capsule is the container's fill) */
|
|
%{FriendsChats} %{chatEntryControls} {
|
|
overflow: visible;
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatTextarea},
|
|
%{FriendsChats} %{chatEntryControls} %{chatTextarea}.gpfocus {
|
|
min-height: 80px;
|
|
margin-block: -8px;
|
|
padding-block: 25px;
|
|
box-sizing: border-box;
|
|
font: var(--lgs-type-body);
|
|
color: var(--lgs-text-1);
|
|
caret-color: var(--lgs-blue);
|
|
background-color: transparent;
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatTextarea}::placeholder {
|
|
color: var(--lgs-text-3);
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton},
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}:not(%{chatSubmitButton>disabled}) {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-block: -8px;
|
|
box-sizing: border-box;
|
|
border: 10px solid transparent;
|
|
background-clip: padding-box;
|
|
border-radius: var(--lgs-r-capsule);
|
|
background-color: rgb(255 255 255 / calc(.10 * var(--lgs-dis-content)));
|
|
isolation: isolate;
|
|
--lgs-ill: white;
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton} .SVGIcon_Submit path {
|
|
fill: var(--lgs-text-3);
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}:not(%{chatSubmitButton>disabled}) {
|
|
background-color: var(--lgs-blue);
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}:not(%{chatSubmitButton>disabled}) .SVGIcon_Submit path,
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}.gpfocus:not(%{chatSubmitButton>disabled}) .SVGIcon_Submit path {
|
|
fill: var(--lgs-text-on-tint) !important;
|
|
}
|
|
%{FriendsChats} %{chatEntryControls} %{chatSubmitButton}.gpfocus {
|
|
box-shadow: 0 0 var(--lgs-white-glow-blur, 22px) calc(var(--lgs-white-glow-spread, 8px) / 2) rgb(255 255 255 / var(--lgs-white-glow-a, .55)) !important;
|
|
}
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 2. Add a Friend (/invites), SM §3.5 */
|
|
/* Window mode `windowless` (C1a's route map): the page is one card, a */
|
|
/* `panel` plate (T5 plate from 70-social.js; CSS plate here). Without */
|
|
/* the runtime (no data-lgs-route) the page sits on the window glass. */
|
|
/* ====================================================================== */
|
|
|
|
%{HiddenFrame>InvitesList} %{DialogContent_InnerWidth>InvitesList} {
|
|
background: none;
|
|
padding-top: var(--lgs-hdr-pad, 68px);
|
|
box-sizing: border-box;
|
|
}
|
|
%{BasicUiRoot}[data-lgs-route="invites"] %{HiddenFrame>InvitesList} %{DialogContent_InnerWidth>InvitesList} {
|
|
padding-top: 0;
|
|
}
|
|
/* the card: 720 wide, centred, from y 40 to the ornament's band */
|
|
%{BasicUiRoot}[data-lgs-glass="windowless"] %{HiddenFrame>InvitesList} {
|
|
width: 720px;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
height: 672px;
|
|
box-sizing: border-box;
|
|
border-radius: var(--lgs-r-sheet);
|
|
background: var(--lgs-mat-plate-bg);
|
|
box-shadow: var(--lgs-mat-panel-shade);
|
|
padding-top: 80px;
|
|
--lgs-edge: panel;
|
|
}
|
|
%{HiddenFrame>InvitesList} %{IncomingInvites>Title} {
|
|
font: var(--lgs-type-title2);
|
|
letter-spacing: var(--lgs-track-title);
|
|
text-transform: none;
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{HiddenFrame>InvitesList} %{DialogContent_InnerWidth>Description} {
|
|
font: var(--lgs-type-subhead);
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
/* your friend code: a recessed platter; digits Title 2 tabular */
|
|
%{FriendCodeSection} %{FriendCode} {
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-platter);
|
|
}
|
|
%{FriendCodeSection} %{DialogContent_InnerWidth>Code} {
|
|
font: var(--lgs-type-title2);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{FriendCodeSection} %{DialogContent_InnerWidth>Caption} {
|
|
font: var(--lgs-type-footnote);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
/* invites (shown only with invites): headers secondary, rows in a recessed
|
|
platter, the row that holds the focus warms (its buttons carry it) */
|
|
%{HiddenFrame>InvitesList} %{IncomingInvites>InvitesSectionHeader} {
|
|
font: var(--lgs-type-callout);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
%{HiddenFrame>InvitesList} :is(%{IncomingInvites>InvitesRow}, %{IncomingInvites>MutualFriendRow}) {
|
|
min-height: 80px;
|
|
box-sizing: border-box;
|
|
border-radius: var(--lgs-r-row);
|
|
background: transparent !important;
|
|
isolation: isolate;
|
|
--lgs-ill: row;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{HiddenFrame>InvitesList} %{IncomingInvites>Divider} {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
%{HiddenFrame>InvitesList} .friend %{playerName} {
|
|
font: var(--lgs-type-body);
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{HiddenFrame>InvitesList} .friend %{richPresenceLabel} {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-2) !important;
|
|
}
|
|
%{HiddenFrame>InvitesList} .avatarHolder img%{avatar} {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 3. Your profile (/account), SM §3.4 */
|
|
/* Window mode `window-full`. Rows, toggle, dropdown and buttons are */
|
|
/* C4a's primitives; this styles the identity card and the three tiles. */
|
|
/* ====================================================================== */
|
|
|
|
/* the page starts under the toolbar row (C1a's fallback pad) */
|
|
%{AccountPanelPage} {
|
|
padding-top: var(--lgs-hdr-pad, 68px);
|
|
}
|
|
/* Steam scales the label holder by 1.4: 24 px reads as 34, 18 as 25 */
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>LabelHolder} {
|
|
height: auto;
|
|
}
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>LabelHolder} %{playerName} {
|
|
font: var(--lgs-type-headline);
|
|
font-weight: 700;
|
|
color: var(--lgs-text-1) !important;
|
|
text-shadow: var(--lgs-text-room-shadow);
|
|
}
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>LabelHolder} %{richPresenceLabel} {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-2) !important;
|
|
text-shadow: var(--lgs-text-room-shadow);
|
|
}
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>Avatar} img%{avatar} {
|
|
border-radius: 50%;
|
|
box-shadow: var(--lgs-shadow-10mm);
|
|
}
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>Avatar} .avatarStatus {
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{AccountPanelPage} .avatarHolder.online .avatarStatus {
|
|
background-color: var(--lgs-blue);
|
|
}
|
|
%{AccountPanelPage} .avatarHolder.ingame .avatarStatus {
|
|
background-color: var(--lgs-green);
|
|
}
|
|
%{AccountPanelPage} .avatarHolder.offline .avatarStatus {
|
|
background-color: var(--lgs-text-3);
|
|
}
|
|
%{AccountPanelPage} %{CurrentUserProfileBackground>Highlight} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* Add Funds / Privacy Settings / Account Details are C4a's DialogButtons:
|
|
their shape and size stay C4a's (REQ C7->C4a); C7 sets only the labels */
|
|
%{AccountPanelPage} button%{FatButton} svg {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{AccountPanelPage} button%{FatButton} %{CurrentUserProfileBackground>Label} {
|
|
font: var(--lgs-type-callout);
|
|
font-weight: 600;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{AccountPanelPage} button%{FatButton} %{CurrentUserProfileBackground>Details} {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{AccountPanelPage} button%{FatButton}.gpfocus %{CurrentUserProfileBackground>Details} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 4. Downloads (/library/downloads), SM §3.9 */
|
|
/* Window mode `window`. The Now Downloading card and the sections are */
|
|
/* black .14 platters (radius 30) on the window glass; rows are 80 px */
|
|
/* with the row hook's light. Steam's row transforms stay. */
|
|
/* ====================================================================== */
|
|
|
|
/* the top band: Steam's 240 px hero. Idle (nothing downloading), it is a
|
|
short band that holds only the device capsule */
|
|
%{DownloadsPage} %{DownloadsPage>TopSection} {
|
|
box-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>TopSection}:has(> %{DownloadsPage>Section}%{DownloadsPage>Empty}) {
|
|
height: 184px;
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>Section}%{DownloadsPage>Active}%{DownloadsPage>Empty},
|
|
%{DownloadsPage} %{DownloadsPage>Section}%{DownloadsPage>Active}%{DownloadsPage>Empty} %{DownloadsPage>RightSection} {
|
|
background: transparent;
|
|
}
|
|
/* the active card: a platter inset 24 from the glass edges */
|
|
%{DownloadsPage} %{DownloadsPage>Section}%{DownloadsPage>Active}:not(%{DownloadsPage>Empty}) {
|
|
background: var(--lgs-fill-regular);
|
|
border-radius: var(--lgs-r-platter);
|
|
box-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{DownloadSectionActiveItem} %{DownloadsPage>Name},
|
|
%{DownloadsPage} %{DownloadsPage>GameIconAndName} {
|
|
font: var(--lgs-type-title2);
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{DownloadTimeRemaining} {
|
|
font: var(--lgs-type-footnote);
|
|
font-variant-numeric: tabular-nums;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{DownloadsPage} %{ActiveItemProgressBar} {
|
|
border-radius: var(--lgs-r-capsule);
|
|
background: var(--lgs-fill-thick);
|
|
}
|
|
%{DownloadsPage} %{ProgressPercentageAndBar} {
|
|
font: var(--lgs-type-callout);
|
|
font-variant-numeric: tabular-nums;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
|
|
/* "Managing downloads for This Device": a 44 px recessed status capsule */
|
|
%{DownloadsPage} %{RemoteClientManagementBackground} {
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
padding: 8px 18px;
|
|
font: var(--lgs-type-subhead);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{RemoteClientManagementBackground} * {
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
/* the row is clickable (Change Device): 80 tall, its capsule 60 */
|
|
%{DownloadsPage} %{RemoteClientManagementRow} {
|
|
height: 80px;
|
|
padding-block: 10px;
|
|
box-sizing: border-box;
|
|
left: 24px;
|
|
bottom: 4px;
|
|
top: auto;
|
|
}
|
|
%{DownloadsPage} %{RemoteClientManagementRow} %{RemoteClientManagementBackground} {
|
|
height: 60px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
}
|
|
%{DownloadsPage} %{ManagingRemoteClientName} {
|
|
font: var(--lgs-type-subhead);
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{DownloadsPage} %{ManagingRemoteClientName}%{DownloadsPage>Green} {
|
|
color: var(--lgs-green);
|
|
}
|
|
.BasicUI %{DownloadsPage} %{RemoteClientDownloadsSelector} %{RemoteClientDropDownContainer} {
|
|
background: var(--lgs-raised-bg);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
|
|
/* section headers: Title 2 + count, no rule */
|
|
%{DownloadsPage} %{DownloadsPage>SectionTitle} {
|
|
min-height: 80px;
|
|
align-items: center;
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>SectionTitle} %{DownloadsPage>Title} {
|
|
font: var(--lgs-type-title2);
|
|
letter-spacing: var(--lgs-track-title);
|
|
text-transform: none;
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>SectionTitle} %{DownloadsPage>Count} {
|
|
font: var(--lgs-type-headline);
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-3);
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>SectionTitle} %{DownloadsPage>Rule},
|
|
%{DownloadsPage} %{DownloadsPage>TopBar},
|
|
%{DownloadsPage} %{SectionDivider} {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
%{DownloadsPage} %{AutoUpdateHours} {
|
|
font: var(--lgs-type-footnote);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* each section's list is one recessed platter (the empty note too) */
|
|
%{DownloadsPage} %{SectionList} {
|
|
background: var(--lgs-fill-regular);
|
|
border-radius: var(--lgs-r-platter);
|
|
margin-inline: 12px;
|
|
}
|
|
%{DownloadsPage} %{EmptyTransfers} {
|
|
min-height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
%{DownloadsPage} %{EmptyTransfers} %{DownloadsPage>Text} {
|
|
font: var(--lgs-type-callout);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* rows: transparent; the light is the hook's pill (inset 6, radius 24).
|
|
Steam's keyframe focus fill is cleared. */
|
|
%{DownloadsPage} %{SectionItem},
|
|
%{DownloadsPage} %{SectionItem}:hover,
|
|
%{DownloadsPage} %{SectionItem}%{DownloadsPage>Dragging},
|
|
%{DownloadsPage} %{SectionItemWrapper}.gpfocus %{SectionItem},
|
|
%{DownloadsPage} %{SectionItemWrapper}.gpfocus:not(%{DownloadsPage>Autofocused}) %{SectionItem}%{DownloadsPage>Active} {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
color: var(--lgs-text-1) !important;
|
|
border-radius: var(--lgs-r-platter);
|
|
}
|
|
%{DownloadsPage} %{SectionItemWrapper} {
|
|
isolation: isolate;
|
|
border-radius: var(--lgs-r-platter);
|
|
--lgs-ill: row;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
/* phase 1's highlight pseudo on the row goes (the hook draws the light) */
|
|
%{DownloadsPage} %{SectionItem}::before {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{SectionItem} {
|
|
height: auto;
|
|
min-height: 96px;
|
|
}
|
|
%{DownloadsPage} %{SectionItemContent} {
|
|
min-height: 96px;
|
|
padding-block: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>Name} {
|
|
line-height: 1.2;
|
|
}
|
|
%{DownloadsPage} %{AppPortrait} :is(%{PortraitImage>Container}, %{PortraitImage>Image}) {
|
|
border-radius: 12px;
|
|
}
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>DragHandle} {
|
|
color: var(--lgs-text-3);
|
|
}
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>Name},
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>Name} span {
|
|
font: var(--lgs-type-headline);
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{ProgressDetails},
|
|
%{DownloadsPage} %{ProgressDetails} *,
|
|
%{DownloadsPage} %{SectionItemStatus},
|
|
%{DownloadsPage} %{SectionItemStatus} * {
|
|
font: var(--lgs-type-footnote);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
text-shadow: none;
|
|
}
|
|
%{DownloadsPage} %{ProgressDetails} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{DownloadsPage} %{ProgressDetails} %{DownloadsPage>Value}%{DownloadsPage>InProgress} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{DownloadsPage} %{ProgressDetails} %{DownloadsPage>Value}%{DownloadsPage>Denominator} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{DownloadsPage} %{SectionItemStatus} {
|
|
color: var(--lgs-text-2);
|
|
white-space: nowrap;
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
%{DownloadsPage} %{SectionItemWrapper}.gpfocus :is(%{SectionItemStatus}, %{ProgressDetails}) {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* content types (a focusable line: A expands it): a 60 px capsule row of
|
|
footnote labels with green checks */
|
|
%{DownloadsPage} %{ContentTypes} {
|
|
min-height: 80px;
|
|
margin-block: -10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
column-gap: 16px;
|
|
padding-inline: 12px;
|
|
margin-inline-start: -12px;
|
|
border-radius: var(--lgs-r-capsule);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-inset: 10px;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{DownloadsPage} %{ContentTypes} %{DownloadsPage>Text} {
|
|
font: var(--lgs-type-footnote);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{DownloadsPage} %{ContentType}%{DownloadsPage>Highlight} %{DownloadsPage>Text} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{DownloadsPage} %{DownloadsPage>ContentType} %{DownloadsPage>Check} {
|
|
color: var(--lgs-green);
|
|
}
|
|
/* Play (green whole fill) keeps its tint; other row buttons are C4a's */
|
|
%{DownloadsPage} %{SectionItem} %{DownloadsPage>PlayButton} {
|
|
background: var(--lgs-tint-play);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-on-color);
|
|
--lgs-ill: white;
|
|
}
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 5. Photos (/media/*), SM §3.6–§3.8 */
|
|
/* Screenshots and clips are content: opaque, rounded, never glass. The */
|
|
/* grid is virtualised: nothing here touches its geometry. */
|
|
/* ====================================================================== */
|
|
|
|
/* --- 5.1 Grid --------------------------------------------------------- */
|
|
%{ScreenshotList} {
|
|
padding-top: var(--lgs-hdr-pad, 68px);
|
|
box-sizing: border-box;
|
|
scroll-padding-top: var(--lgs-guard-top, 124px);
|
|
}
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem},
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem}.gpfocus {
|
|
border-color: transparent !important;
|
|
border-radius: var(--lgs-r-card);
|
|
box-shadow: none !important;
|
|
--lgs-ill: card;
|
|
}
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem} %{ListItemThumbnailImg} {
|
|
border-radius: var(--lgs-r-card);
|
|
}
|
|
/* the attended tile: Steam's own hover / focus scale stays (no second
|
|
scale); a contact shadow; +15 mm in native mode (70-social.json) */
|
|
/* the tiles sit 8 px apart, so the lift is held to x1.035 (7 px a side):
|
|
at x1.05 the lifted tile would overlap its neighbour's hit band (P-08) */
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>ListItem} {
|
|
scale: calc(1 + min(var(--lgs-card-lift) - 1, .035) * var(--lgs-lift));
|
|
transition: scale var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b15, ease), box-shadow var(--lgs-d-hover-in, 294ms) var(--lgs-ease-b0, ease);
|
|
}
|
|
&:not(.lgs-input-laser) %{ScreenshotList} %{ListItemAndGlowContainer>ListItem}.gpfocus,
|
|
&:not(.lgs-input-pad) %{ScreenshotList} %{ListItemAndGlowContainer>ListItem}:hover {
|
|
z-index: 1;
|
|
box-shadow: var(--lgs-shadow-contact), 0 0 30px 2px rgb(255 255 255 / .30) !important;
|
|
}
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>CheckboxContainer} {
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
/* clip duration: a 36 px dark capsule on the art */
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>CornerContent} %{ClipCornerRow} {
|
|
background: rgb(0 0 0 / .52);
|
|
border-radius: var(--lgs-r-capsule);
|
|
padding: 4px 12px;
|
|
box-shadow: none;
|
|
}
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>DurationText} {
|
|
font: var(--lgs-type-caption);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* hover detail under a tile (title, kind, age) */
|
|
%{ScreenshotList} %{ListItemAndGlowContainer>Title} {
|
|
font: var(--lgs-type-footnote);
|
|
font-weight: 600;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{ScreenshotList} %{ListItemTooltipDetail},
|
|
%{ScreenshotList} %{ListItemTooltipDetail} %{Weak} {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* --- 5.2 Viewer and clip player: controls are clear glass on the media */
|
|
%{FocusedScreenshotContainer} %{FocusedScreenshotImageContainer},
|
|
%{FocusedClip} %{VideoPlayerContainer} {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border-radius: 40px;
|
|
}
|
|
%{FocusedScreenshotContainer} %{FloatingItemControls},
|
|
%{FocusedClip} %{GamepadTimelineContainer} {
|
|
background: linear-gradient(0deg, rgb(0 0 0 / .35), rgb(0 0 0 / 0));
|
|
}
|
|
%{FloatingItemControls} %{Metadata} {
|
|
font: var(--lgs-type-footnote);
|
|
color: rgb(255 255 255 / .82);
|
|
text-shadow: var(--lgs-text-room-shadow);
|
|
}
|
|
/* trash and Share: clear capsules on black .35 */
|
|
%{ButtonBox}%{TopList>Interactable} {
|
|
background: linear-gradient(var(--lgs-mat-clear-bg), var(--lgs-mat-clear-bg)), linear-gradient(var(--lgs-media-dim), var(--lgs-media-dim));
|
|
backdrop-filter: var(--lgs-mat-clear-blur);
|
|
box-shadow: var(--lgs-mat-clear-shade);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{ButtonBox}%{TopList>Interactable}:is(:hover, .gpfocus) {
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{ButtonBox}%{TopList>Interactable} %{IconButtonIcon} {
|
|
color: var(--lgs-text-1);
|
|
fill: currentColor;
|
|
}
|
|
%{ButtonBox}%{TopList>Interactable}%{TopList>Primary} {
|
|
background: var(--lgs-tint-primary);
|
|
color: var(--lgs-text-on-tint);
|
|
--lgs-ill: white;
|
|
}
|
|
/* previous / next: 60 px clear circles over the picture */
|
|
%{OpenedItemContainer} %{ChangeItem} {
|
|
background: linear-gradient(var(--lgs-mat-clear-bg), var(--lgs-mat-clear-bg)), linear-gradient(var(--lgs-media-dim), var(--lgs-media-dim));
|
|
backdrop-filter: var(--lgs-mat-clear-blur);
|
|
box-shadow: var(--lgs-mat-clear-shade);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{OpenedItemContainer} %{ChangeItem}:has(.gpfocus) {
|
|
box-shadow: var(--lgs-mat-clear-shade), 0 0 var(--lgs-white-glow-blur, 22px) calc(var(--lgs-white-glow-spread, 8px) / 2) rgb(255 255 255 / .40);
|
|
}
|
|
/* clip transport: circles; the play button white */
|
|
%{PlaybackControls} %{PlaybackControls>PlaybackButton},
|
|
%{PlaybackControls} %{AddMarkerCtn} {
|
|
border-radius: var(--lgs-r-capsule);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{PlaybackControls} %{PlaybackControls>PlaybackButton}%{PlaybackControls>Enabled},
|
|
%{PlaybackControls} %{AddMarkerCtn} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{PlaybackControls} %{PlaybackControls>PlaybackButton}.gpfocus,
|
|
%{PlaybackControls} %{AddMarkerCtn}.gpfocus {
|
|
background: transparent !important;
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{PlaybackControls} button:is(%{PlaybackControls>CreateClipButton}, %{PlaybackControls>ShareButton}).DialogButton::before {
|
|
border-radius: inherit;
|
|
}
|
|
%{PlayTimeRow} %{TimeBar} {
|
|
font: var(--lgs-type-callout);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: var(--lgs-text-room-shadow);
|
|
}
|
|
|
|
/* --- 5.3 Menus and sheets opened from media --------------------------- */
|
|
%{ShareSheet} %{ContainerGamepad} {
|
|
background: transparent;
|
|
}
|
|
%{ShareSheet} %{ChatLabel} {
|
|
font: var(--lgs-type-callout);
|
|
font-weight: 700;
|
|
text-transform: none;
|
|
color: var(--lgs-text-2);
|
|
}
|
|
/* "Select Game": the search field is a 64 px recessed capsule */
|
|
%{TopList>SearchBar} %{TopList>Input} {
|
|
min-height: var(--lgs-field);
|
|
box-sizing: border-box;
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
font: var(--lgs-type-body);
|
|
color: var(--lgs-text-1);
|
|
caret-color: var(--lgs-blue);
|
|
}
|
|
%{TopList>SearchBar} %{TopList>Input}::placeholder {
|
|
color: var(--lgs-text-3);
|
|
}
|
|
%{TopList>SearchBar} %{TopList>Input}:is(.gpfocus, :focus) {
|
|
background: var(--lgs-fill-thick) !important;
|
|
box-shadow: var(--lgs-recessed-shadow), var(--lgs-field-focus) !important;
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
%{NoMatches} {
|
|
font: var(--lgs-type-callout);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* --- 5.4 /media/list -------------------------------------------------- */
|
|
%{PhaseListContainer} {
|
|
background: none;
|
|
}
|
|
%{PhaseList} %{DateHeader} {
|
|
font: var(--lgs-type-title2);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
}
|
|
%{PhaseList} %{GameHeader} {
|
|
font: var(--lgs-type-headline);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
text-shadow: none;
|
|
}
|
|
%{PhaseList} %{GameHeader} %{TimelineGrid>Icon} {
|
|
border-radius: 10px;
|
|
}
|
|
%{PhaseList} %{PhaseGridItem} {
|
|
background: var(--lgs-fill-regular);
|
|
border-radius: var(--lgs-r-card);
|
|
}
|
|
%{PhaseList} %{PhaseTimestamp} {
|
|
font: var(--lgs-type-footnote);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
%{PhaseList} %{PhaseTimestamp} %{TimelineGrid>Date} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{PhaseList} %{TimelineGrid>Thumbnail} {
|
|
border-radius: 16px;
|
|
}
|
|
%{PhaseList} %{OverflowItem} {
|
|
background: var(--lgs-raised-bg);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
border-radius: var(--lgs-r-small);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{PhaseList} %{DurationBar} {
|
|
background-color: var(--lgs-yellow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{PhaseList} %{TimelineGrid>DurationText} {
|
|
font: var(--lgs-type-caption);
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
|
|
|
|
/* ====================================================================== */
|
|
/* 6. Store and web views (/steamweb, /externalweb), SM §3.10 */
|
|
/* Look only (Plan A's navigation ornament needs the bounds refresh and */
|
|
/* stays off: flag storeOrnament, not built). Web content is never */
|
|
/* styled (E-WEB). */
|
|
/* ====================================================================== */
|
|
|
|
%{MainBrowserContainer>URLBar} {
|
|
background: var(--lgs-mat-liquid-bg);
|
|
backdrop-filter: var(--lgs-mat-liquid-blur);
|
|
box-shadow: var(--lgs-mat-liquid-shade);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
%{MainBrowserContainer>NavigationButton} {
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
isolation: isolate;
|
|
--lgs-ill: raised;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
%{MainBrowserContainer>URL} {
|
|
font: var(--lgs-type-subhead);
|
|
color: rgb(255 255 255 / .72);
|
|
}
|