mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-17 21:01:05 +02:00
535 lines
22 KiB
CSS
535 lines
22 KiB
CSS
/* Glass Shell, area "settings" (package C6a): every /settings page on surface main.
|
|
Concept: docs/phase2/concepts/settings.md (SET) §3, §4; PLAN §1 decides conflicts.
|
|
|
|
T1 (this file, always on with the theme):
|
|
- the 400 px sidebar: 72 px rows at an 80 px pitch, 40 px icon circles, 24 px Medium labels,
|
|
the navigation-selected pill (PLAN §1.4: white .18 + specular arc + Semibold), hover = the
|
|
light spot only and focus = P4's nav hook (--lgs-ill: nav), 16 px group spacers;
|
|
- the detail pane: content from y 116 (toolbar 108 + 8), an 816 px column (32 px margins in the 880 px pane),
|
|
the compact hero (Title 1, centred; its colour circle with Steam's own glyph needs T2),
|
|
C1a's scroll guard (--lgs-guard-top / --lgs-guard-bottom) on both scrollers;
|
|
- page widgets the primitives do not cover (Notifications column headers, Storage, Game
|
|
Recording modes, small colour fixes), all on P4's phase 2 tokens.
|
|
T2 hooks (device/rt/60-settings.js, flag wp.c6a; inert without it):
|
|
- [data-lgs-page="<route key>"] on each sidebar item and on the dialog root (the current page):
|
|
the icon-circle colour (--lgs-set-tint) and the hero circle;
|
|
- --lgs-set-glyph on the dialog root: Steam's own sidebar glyph of the current page as a
|
|
data: URI (white), drawn in the hero circle;
|
|
- data-lgs-title on the dialog root: Steam's "#MainTabsSettings", drawn by C1a's Large Title;
|
|
- data-lgs-destructive on Steam's destructive buttons (SET §4.7; depth admission rule 4).
|
|
Controls (rows, platters, switches, sliders, capsules, buttons, section headers) are C4a's
|
|
(theme/10-primitives.css) and are never restyled here.
|
|
|
|
Scope: Steam's PagedSettingsDialog is shared with game Properties (%{AppProperties}, C5a) and
|
|
Notes (%{NotesPagedSettings}, C7); both are excluded. Wrapped as html.lgs-on { ... } by the
|
|
bundler. */
|
|
|
|
|
|
/* ======================================================================
|
|
1. Skeleton: sidebar column 400 px (black .14, no line), detail pane
|
|
transparent (the window glass shows through).
|
|
====================================================================== */
|
|
|
|
%{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings}) {
|
|
background: none;
|
|
|
|
& > %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingDialog_ContentColumn} {
|
|
background: none;
|
|
}
|
|
|
|
& > %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListColumn} {
|
|
flex: 0 0 400px;
|
|
width: 400px;
|
|
min-width: 400px;
|
|
max-width: 400px;
|
|
background: var(--lgs-fill-regular);
|
|
}
|
|
|
|
/* the list starts at y 108 under the toolbar row (C1a: --lgs-hdr-pad), fades under it and
|
|
over the last 72 px; focus stays inside C1a's guard band */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageList} {
|
|
padding: calc(var(--lgs-hdr-pad, 68px) + 40px) 0 24px;
|
|
scroll-padding-top: var(--lgs-guard-top, 124px);
|
|
scroll-padding-bottom: 96px;
|
|
-webkit-mask-image: linear-gradient(180deg, transparent 94px, #000 108px, #000 calc(100% - 72px), transparent 100%);
|
|
mask-image: linear-gradient(180deg, transparent 94px, #000 108px, #000 calc(100% - 72px), transparent 100%);
|
|
/* rows scrolled under the toolbar row are cut at y 94 (the Back and search hit boxes end there),
|
|
so they never take a click meant for the toolbar */
|
|
clip-path: inset(94px 0 0 0);
|
|
}
|
|
|
|
/* group separators become 16 px spacers (+ the row's 8 px margin = 24) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageList} > %{PagedSettingsDialog>Separator} {
|
|
flex: 0 0 auto;
|
|
height: 16px;
|
|
margin: 0;
|
|
background: none !important;
|
|
}
|
|
|
|
|
|
/* ====================================================================
|
|
2. Sidebar rows (SET §3.3, PLAN §1.3 free-standing rows, §1.4 states).
|
|
The row is the pill: 368 x 72 at x 16, radius 36, 8 px apart.
|
|
Light: P4's nav hook on the row's ::after, under the label.
|
|
==================================================================== */
|
|
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem} {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
height: var(--lgs-row);
|
|
min-height: var(--lgs-row);
|
|
margin: 0 16px var(--lgs-row-gap);
|
|
padding: 0 16px;
|
|
border: 0 none !important;
|
|
border-radius: 36px;
|
|
background: none !important;
|
|
box-shadow: none;
|
|
color: var(--lgs-text-1) !important;
|
|
text-shadow: none;
|
|
--lgs-ill: nav;
|
|
--lgs-ill-z: -1;
|
|
--lgs-ill-r: 36px;
|
|
}
|
|
/* hit extender into the 8 px gaps (G-SIZE: >= 95 % of the 80 px box; neighbours only touch) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: calc(var(--lgs-row-gap) / -2) 0;
|
|
border-radius: inherit;
|
|
background: none;
|
|
}
|
|
/* navigation selected (the current page; in gamepad mode also the focus, whose extra light
|
|
comes from the hook) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}%{PagedSettingsDialog_PageList_ShowTitle>Active} {
|
|
background: var(--lgs-fill-nav) !important;
|
|
box-shadow: none;
|
|
}
|
|
/* its specular arc: a lobe centred at 34 % of the width fading both ways (VP P-42: never a
|
|
full-width top line), painted on the hit extender (its top edge is 4 px above the pill). The
|
|
lobe (x 12 %..56 %, i.e. 44..206 of 368) stays on the pill's straight top edge (36..332) and
|
|
inside its top 4 px, so it never shows above the rounded corners (review R2 m1) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}%{PagedSettingsDialog_PageList_ShowTitle>Active}::before {
|
|
background: radial-gradient(22% 2px at 34% calc(var(--lgs-row-gap) / 2 + 2px), rgb(255 255 255 / .45), rgb(255 255 255 / 0)) no-repeat;
|
|
}
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}%{PagedSettingsDialog_PageList_ShowTitle>DisabledItem} {
|
|
color: var(--lgs-text-disabled) !important;
|
|
}
|
|
|
|
/* icon + label row; Steam's 1.1 scale on the active row is withdrawn (VP P-05: rows never scale) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem} > %{ScaledChildren} {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
/* 40 px colour circle (T1: grey; T2: the page's colour), white glyph 22 px */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PageListItem_Icon} {
|
|
flex: 0 0 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 60%), var(--lgs-set-tint, var(--lgs-gray));
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PageListItem_Icon} svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
color: #fff;
|
|
}
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PageListItem_Title} {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font: var(--lgs-type-body);
|
|
letter-spacing: 0;
|
|
color: inherit;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageListItem}%{PagedSettingsDialog_PageList_ShowTitle>Active} %{PagedSettingsDialog_PageList_ShowTitle>PageListItem_Title} {
|
|
font-weight: var(--lgs-nav-weight);
|
|
}
|
|
|
|
|
|
/* ====================================================================
|
|
3. Detail pane (SET §3.5): content from y 116, an 816 px column
|
|
centred in the 880 px pane, C1a's guard band on the scroller.
|
|
==================================================================== */
|
|
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} {
|
|
padding: calc(var(--lgs-hdr-pad, 68px) + 48px) 0 0;
|
|
scroll-padding-top: var(--lgs-guard-top, 124px);
|
|
scroll-padding-bottom: calc(720px - var(--lgs-guard-bottom, 612px));
|
|
-webkit-mask-image: linear-gradient(180deg, transparent 84px, #000 116px, #000 calc(100% - 140px), transparent calc(100% - 92px));
|
|
mask-image: linear-gradient(180deg, transparent 84px, #000 116px, #000 calc(100% - 140px), transparent calc(100% - 92px));
|
|
}
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth {
|
|
/* the column box fills the pane and carries the margins (32 px each side, Steam's 112 px end
|
|
padding), so it keeps its area on short pages (G-AUD SHRUNK) and a long page ends at y 608 */
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin-inline: 0;
|
|
padding: 0 32px 112px;
|
|
}
|
|
/* pages end at y 628 (C1a: the ornament line); the hit region ends there too */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} {
|
|
clip-path: inset(0 0 92px 0);
|
|
}
|
|
|
|
/* compact hero (SET §3.5): Title 1, centred, one line; 60 + 16 px. The 60 px circle needs T2's
|
|
page key, glyph and the title's measured width (data-lgs-hero, --lgs-set-hero-tw): the circle
|
|
and the title are centred as one group. It stays flat on the window plane (no native pop) */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogHeader {
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60px;
|
|
margin: 0 0 16px;
|
|
font: var(--lgs-type-title1);
|
|
letter-spacing: var(--lgs-track-title);
|
|
color: var(--lgs-text-1);
|
|
text-shadow: none;
|
|
white-space: nowrap;
|
|
}
|
|
&[data-lgs-hero] %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogHeader {
|
|
padding-left: 76px;
|
|
}
|
|
&[data-lgs-hero] %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogHeader::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(50% - 38px - var(--lgs-set-hero-tw, 0px) / 2);
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background:
|
|
var(--lgs-set-glyph, none) center / 32px 32px no-repeat,
|
|
linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 60%),
|
|
var(--lgs-set-tint, var(--lgs-gray));
|
|
/* flat on the window plane (the +10 mm native pop was removed: it cut the window's base
|
|
mosaic into pieces that did not line up off axis), so no depth shadow */
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Storage (SET §4.8: no hero, its title is the page's own): Steam sizes the virtualised app
|
|
list to the space left, and every row Steam renders at stock must still render (G-AUD GONE),
|
|
so the page keeps stock's list height: title only (Title 2), 8 px less on top, full pane
|
|
width, and the list runs to y 720 under the glass edge (no 628 cut on this page); its own
|
|
scroller gets 64 px of end padding so the last row still scrolls up into the glass (§6) */
|
|
&:has(%{ContentManagement}%{InPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} {
|
|
padding: calc(var(--lgs-hdr-pad, 68px) + 40px) 0 0;
|
|
clip-path: none;
|
|
-webkit-mask-image: linear-gradient(180deg, transparent 84px, #000 108px, #000 calc(100% - 112px), transparent calc(100% - 64px));
|
|
mask-image: linear-gradient(180deg, transparent 84px, #000 108px, #000 calc(100% - 112px), transparent calc(100% - 64px));
|
|
}
|
|
&:has(%{ContentManagement}%{InPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth {
|
|
padding: 0 16px;
|
|
}
|
|
&:has(%{ContentManagement}%{InPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogBody {
|
|
margin-top: 0;
|
|
}
|
|
&:has(%{ContentManagement}%{InPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogHeader {
|
|
padding-left: 0;
|
|
height: 36px;
|
|
margin: 0 0 4px;
|
|
font: var(--lgs-type-title2);
|
|
}
|
|
&:has(%{ContentManagement}%{InPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} > .DialogContent_InnerWidth > .DialogHeader::before {
|
|
content: none;
|
|
}
|
|
|
|
/* in-text links: white with a soft underline */
|
|
& %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} a {
|
|
color: var(--lgs-text-1);
|
|
text-decoration-line: underline;
|
|
text-decoration-color: var(--lgs-text-3);
|
|
text-underline-offset: 3px;
|
|
}
|
|
& %{SettingsDialogBodyText} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{SettingsDialogDescriptionText} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
|
|
/* ====================================================================
|
|
4. Page widgets
|
|
==================================================================== */
|
|
|
|
/* --- Notifications: the "Show Toast" / "Play Sound" headers sit centred over their switch
|
|
columns (C4a's 66 px switches with 14 px side margins: 94 px cells, the second ends at the
|
|
row's 26 px inset), 18 px Semibold title case (REQ C4a->C6a) */
|
|
& %{NotificationSectionHeader} %{Toggles} {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 52px;
|
|
padding-inline-end: 26px;
|
|
font: var(--lgs-type-caption);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{NotificationSectionHeader} %{Toggles} > div {
|
|
flex: 0 0 94px;
|
|
width: 94px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* --- Game Recording: recording-mode cards = rows in a platter, a leading radio circle */
|
|
& %{RecordingModeOption} {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background: var(--lgs-fill-regular) !important;
|
|
border-radius: var(--lgs-r-row);
|
|
border-color: transparent !important;
|
|
box-shadow: none !important;
|
|
color: var(--lgs-text-1);
|
|
--lgs-ill: row;
|
|
--lgs-ill-z: -1;
|
|
--lgs-ill-inset: 0px;
|
|
}
|
|
& %{RecordingModeOption} %{WarningBox>Header} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{RecordingModeOption} %{FieldSeparator>Body} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{RecordingModeOption} %{Pip} {
|
|
background-color: var(--lgs-fill-thick);
|
|
border-color: transparent;
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
}
|
|
& %{RecordingModeOption} %{Pip}%{ActivePip} {
|
|
background: radial-gradient(circle, #fff 0 3.5px, var(--lgs-check-on) 4px);
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
& %{BitrateSetting>Muted} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* --- Downloads: "game update timing" pseudo-row */
|
|
& %{FakeContainer} {
|
|
background-color: var(--lgs-fill-regular);
|
|
border-radius: var(--lgs-r-row);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
|
|
/* --- Bluetooth: "Not connected" badge, scanning header */
|
|
& %{BluetoothDeviceQuickAccessField>NotConnectedLabel},
|
|
& %{NotConnectedLabel>Header} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* --- Home: hidden games and instructions */
|
|
& %{HiddenGameLabel},
|
|
& %{HiddenGameLabel} %{GameCount} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& :is(%{AppSelectorButton>Description}, %{Instructions}) {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
/* --- Friends & Chat: the "Append nicknames" preview friend */
|
|
& %{FakeFriend} %{playerName} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{FakeFriend} %{richPresenceLabel} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{FakeFriend} %{avatar} {
|
|
border-radius: var(--lgs-r-small);
|
|
}
|
|
}
|
|
|
|
|
|
/* ======================================================================
|
|
5. Page colours (T2 keys, SET §3.3: visionOS / iOS Settings colours,
|
|
keyed by route, never by text). On the sidebar items and on the dialog
|
|
root (the current page: the hero circle).
|
|
====================================================================== */
|
|
|
|
[data-lgs-page="system"], [data-lgs-page="storage"], [data-lgs-page="keyboard"], [data-lgs-page="developer"] { --lgs-set-tint: var(--lgs-gray); }
|
|
[data-lgs-page="internet"], [data-lgs-page="bluetooth"], [data-lgs-page="display"], [data-lgs-page="accessibility"],
|
|
[data-lgs-page="security"], [data-lgs-page="cloud"], [data-lgs-page="store"] { --lgs-set-tint: var(--lgs-blue); }
|
|
[data-lgs-page="power"], [data-lgs-page="friends"] { --lgs-set-tint: var(--lgs-green); }
|
|
[data-lgs-page="audio"], [data-lgs-page="notifications"], [data-lgs-page="gamerecording"] { --lgs-set-tint: var(--lgs-red); }
|
|
[data-lgs-page="controller"], [data-lgs-page="family"], [data-lgs-page="library"] { --lgs-set-tint: var(--lgs-orange); }
|
|
[data-lgs-page="downloads"] { --lgs-set-tint: var(--lgs-teal); }
|
|
[data-lgs-page="ingame"], [data-lgs-page="home"] { --lgs-set-tint: var(--lgs-indigo); }
|
|
[data-lgs-page="compatibility"], [data-lgs-page="remoteplay"], [data-lgs-page="lgsvr"] { --lgs-set-tint: var(--lgs-purple); }
|
|
|
|
|
|
/* ======================================================================
|
|
6. Storage (/settings/storage): drive tabs as a segmented strip, the
|
|
usage bar, the app list as one platter. Anchored on .BasicUI: Steam's
|
|
storage rules reach (0,5,0). Virtualised geometry is untouched.
|
|
====================================================================== */
|
|
|
|
.BasicUI %{ContentManagement}%{InPagedSettings} {
|
|
|
|
& %{InstallFolder} {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background: var(--lgs-fill-thin) !important;
|
|
box-shadow: none !important;
|
|
border-color: transparent !important;
|
|
color: var(--lgs-text-1);
|
|
--lgs-ill: raised;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
& %{InstallFolder} %{DriveName},
|
|
& %{InstallFolder} > svg {
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
& %{InstallFolder} %{DriveSize} {
|
|
color: var(--lgs-text-1) !important;
|
|
}
|
|
& %{InstallFolder}%{IsSelected} {
|
|
background: var(--lgs-selected-fill) !important;
|
|
box-shadow: none !important;
|
|
--lgs-ill: white;
|
|
}
|
|
& %{InstallFolder}%{IsSelected} %{DriveName},
|
|
& %{InstallFolder}%{IsSelected} > svg {
|
|
color: var(--lgs-text-on-selected) !important;
|
|
}
|
|
& %{InstallFolder}%{IsSelected} %{DriveSize} {
|
|
color: var(--lgs-text-on-selected) !important;
|
|
}
|
|
|
|
/* type (P-38, P-84): no text under 18 px, no uppercase or tracking */
|
|
& %{InstallFolder} %{DriveName} {
|
|
font-size: var(--lgs-fs-subhead);
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
}
|
|
& %{InstallFolder} %{DriveSize} {
|
|
line-height: 1.15;
|
|
}
|
|
/* the app list's own scroller: the last 64 px of the window are under the glass edge */
|
|
& %{ContentManagement>AppList} {
|
|
padding-bottom: 64px;
|
|
scroll-padding-bottom: 64px;
|
|
}
|
|
& :is(%{InstallFolder} %{DriveSize}, %{LibraryHeader} %{DriveName}, %{DriveUsageText}, %{DriveUsageNumber}, %{AppUsageValue}, %{AppSize}) {
|
|
font-size: var(--lgs-fs-footnote);
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
& :is(%{AppHeader}, %{AppHeaderValue}) {
|
|
font-size: var(--lgs-fs-subhead);
|
|
font-weight: 500;
|
|
}
|
|
& %{ContentManagement>AppName} {
|
|
font-size: var(--lgs-fs-subhead);
|
|
font-weight: 600;
|
|
}
|
|
& %{SortingDropDownControlButton} {
|
|
font-size: var(--lgs-fs-footnote);
|
|
font-weight: 500;
|
|
}
|
|
& %{LibraryHeader} %{DriveName} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{DriveUsageIndicator} {
|
|
background: var(--lgs-fill-thick);
|
|
border-radius: var(--lgs-r-capsule);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
}
|
|
& %{DriveUsageGames} { background-color: var(--lgs-blue); }
|
|
& %{DriveUsageWorkshop} { background-color: var(--lgs-green); }
|
|
& %{DriveUsageShader} { background-color: var(--lgs-purple); }
|
|
& :is(%{DriveUsageOther}, %{DriveUsageOtherDot}) { background-color: var(--lgs-yellow); }
|
|
& %{DriveUsageFreeSpace} { background-color: transparent; }
|
|
& %{DriveUsageText} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{DriveUsageNumber},
|
|
& %{OtherInfo} svg {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
|
|
& %{AppHeader} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{AppHeaderValue} {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{ContentManagement>Rule} {
|
|
height: 2px;
|
|
background-color: var(--lgs-separator);
|
|
}
|
|
|
|
/* the app list is one recessed platter */
|
|
& %{LibraryInventory} {
|
|
background-color: var(--lgs-fill-regular);
|
|
border-radius: var(--lgs-r-platter);
|
|
box-shadow: none;
|
|
}
|
|
& %{AppBody} {
|
|
position: relative;
|
|
isolation: isolate;
|
|
border-radius: var(--lgs-r-row);
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
--lgs-ill: row;
|
|
--lgs-ill-z: -1;
|
|
}
|
|
& %{ContentManagement>AppName},
|
|
& %{AppSize} {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& %{AppUsageValue},
|
|
& %{SpecialSectionText},
|
|
& %{AppInfoItem} svg {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& %{AppBodyPortrait} :is(%{LibraryItemBox}, %{PortraitImage>Container}, %{PortraitImage>Image}) {
|
|
border-radius: var(--lgs-r-small);
|
|
}
|
|
}
|
|
|
|
|
|
/* in-text links: the underline brightens on laser hover (laser mode) or gamepad focus (pad mode)
|
|
only, never on a stale :focus (review R2 m7; 04-states' input-mode scopes) */
|
|
&:not(.lgs-input-pad) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} a:hover,
|
|
&:not(.lgs-input-laser) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog}:not(%{AppProperties}, %{NotesPagedSettings}) %{PagedSettingsDialog_PageList_ShowTitle>PagedSettingsDialog_PageContent} a.gpfocus {
|
|
text-decoration-color: var(--lgs-text-1);
|
|
}
|
|
|
|
|
|
/* ======================================================================
|
|
7. Dialogs opened from settings pages (modal layer; the alert itself is
|
|
C1c's): the Game Recording bitrate table sits in a recessed well.
|
|
====================================================================== */
|
|
|
|
%{BitRateTable} {
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-row);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
%{AutoExplainer} {
|
|
color: var(--lgs-text-2);
|
|
}
|