mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-20 23:01:18 +02:00
MichaelScottsman
a956d19b7f
The SteamVR theme is wrapped in html.lgs-on { }, so 'html.lgs-native-vr-settings ...' became
'html.lgs-on html.lgs-native-vr-settings ...' and never matched: the window fill (rgb(20 22 30 / .72)) stayed
on top of the native glass. Now '&.lgs-native-vr-*' (settings, frame-control row, More Options). Verified live:
the container's fill is transparent with the class set; the sidebar's .14 stays.
954 lines
37 KiB
CSS
954 lines
37 KiB
CSS
/* Glass Shell C6b (phase 2): SteamVR's own settings page (#vrsettingspanel in
|
|
vr:systemui; tab bar > VR Settings, or Steam > VR Settings > SteamVR) and the
|
|
SettingsMain controls SteamVR reuses elsewhere (Now Playing's modals, dropdown
|
|
popovers). SET §4.10, CTL §13 / §19.2, PLAN §1.3-§1.6.
|
|
|
|
Sizes are SteamVR page px: the panel is 1858 px wide for Steam's 1280, so
|
|
m = 1.4516 (--lgs-vr-scale 1.45). The panel root keeps its 1858 x 1045 box
|
|
(its quad); everything else is layout inside it:
|
|
- the glass is 1858 x 952, radius 78, top-aligned = Steam's 1280 x 656 window
|
|
exactly (SET T-VR-FOOT), drawn by the free .SettingsMainPanel::before;
|
|
- the bottom margin (952-1045) holds the Advanced Settings ornament;
|
|
- a 576 px sidebar (black .14 region) whose 104 px rows at a 115 pitch scroll
|
|
in their own column from y 156; the "SteamVR" title at Steam's "Settings"
|
|
place; T2 adds the Back circle, icon circles and the section hero;
|
|
- the detail pane: a 1180 px column of rows in platters (115 rows, 35 px
|
|
labels, 32 px descriptions), Off/On pairs as switches (T2 tag), refresh
|
|
circles 86 at a 121 pitch, 92 px sliders, 86 px capsules in title case.
|
|
Light: SteamVR pages get no --lgs-ill hook, so hover is drawn here (white +.08
|
|
and a soft spot; navigation rows: the spot only). No borders, outlines, rings
|
|
or 1 px lines; no E4/E5 inset dark edge on the window (on a transparent
|
|
SteamVR overlay it reads as a bright band, C5b's log).
|
|
SteamVR-owned and never touched: the segmented ::after pill's transform (the
|
|
switch knob rides on it), slider HandleContainer transforms, the dropdown
|
|
chevron's rotate, the sidebar ::before press effect's timing.
|
|
Wrapped as html.lgs-on { ... }. */
|
|
|
|
/* ================================================================== */
|
|
/* 0. Shared looks for every SettingsMain (also Now Playing's modals) */
|
|
/* ================================================================== */
|
|
|
|
.SettingsMain {
|
|
--text-color: var(--lgs-text-1);
|
|
/* raised capsule / circle at rest, hovered, pressed (PLAN §1.4 recipe) */
|
|
--c6b-lobe: radial-gradient(30% 55% at 26% 0, rgb(255 255 255 / .16), rgb(255 255 255 / 0));
|
|
--c6b-spot: radial-gradient(60% 90% at 50% 25%, rgb(255 255 255 / var(--lgs-hover-spot, .12)), rgb(255 255 255 / 0) 75%);
|
|
--c6b-raised: var(--c6b-lobe), var(--lgs-raised-bg);
|
|
--c6b-raised-hover: var(--c6b-spot), var(--c6b-lobe), linear-gradient(rgb(255 255 255 / var(--lgs-hover-add, .08)), rgb(255 255 255 / var(--lgs-hover-add, .08))), var(--lgs-raised-bg);
|
|
--c6b-raised-press: var(--c6b-lobe), linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / .16)), var(--lgs-raised-bg);
|
|
/* SteamVR tints advanced controls purple through these; neutral here (the
|
|
advanced marker is a dot before the label, §5) */
|
|
--settings-advanced-control-background-color: rgb(255 255 255 / .10);
|
|
--settings-advanced-control-hover-background-color: rgb(255 255 255 / .18);
|
|
--settings-advanced-control-active-background-color: rgb(255 255 255 / .24);
|
|
--settings-advanced-sidenav-control-background-color: rgb(255 255 255 / .10);
|
|
}
|
|
.SettingsMain .SettingsItem.Advanced,
|
|
.SettingsMain .SettingsSidebar .AdvancedSettingsToggle.Active {
|
|
--settings-control-activated-background: var(--lgs-selected-fill);
|
|
--settings-control-hover-background: rgb(255 255 255 / .18);
|
|
}
|
|
.SettingsMain.Loading {
|
|
background: var(--lgs-mat-window-bg);
|
|
border-radius: var(--lgs-vr-r-window);
|
|
}
|
|
|
|
/* labels and text */
|
|
.SettingsItem .Label,
|
|
.SettingsItem.Label {
|
|
color: var(--lgs-text-1);
|
|
font-family: var(--lgs-font);
|
|
}
|
|
.SettingsMain .SettingsItem > .SettingsExplainer {
|
|
color: var(--lgs-text-2);
|
|
opacity: 1;
|
|
}
|
|
.SettingsItemValueLabel,
|
|
.SettingsItemValueInfo {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
.SettingsSubTitle,
|
|
.SettingsMain h1 {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
.SettingsMain .SettingsPageContainer hr,
|
|
.SettingsMain .Modal hr {
|
|
border: 0;
|
|
height: 3px;
|
|
background: var(--lgs-separator);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* grouped sections and their stems: a recessed fill on the platter */
|
|
.SettingsMain .Subsection {
|
|
background: rgb(0 0 0 / .16);
|
|
border-radius: calc(var(--lgs-r-row) * var(--lgs-vr-scale));
|
|
}
|
|
.SettingsMain .Subsection.WithStem {
|
|
border-top-right-radius: 0;
|
|
}
|
|
.SettingsMain .SubsectionStem:not(.Hidden) {
|
|
background: rgb(0 0 0 / .16);
|
|
border-top-left-radius: calc(var(--lgs-r-row) * var(--lgs-vr-scale));
|
|
border-top-right-radius: calc(var(--lgs-r-row) * var(--lgs-vr-scale));
|
|
}
|
|
.SettingsMain .SubsectionStem:not(.Hidden)::before {
|
|
--size: calc(var(--lgs-r-row) * var(--lgs-vr-scale));
|
|
--background: rgb(0 0 0 / .16);
|
|
}
|
|
.SettingsMain .SettingsPageContainer > .Subsection.Top {
|
|
background: var(--lgs-fill-regular);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* buttons and dropdown buttons: raised capsules, title case */
|
|
.SettingsMain .ButtonControl {
|
|
background: var(--c6b-raised);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
font-family: var(--lgs-font);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease), box-shadow var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.SettingsMain .ButtonControl:not(.Disabled):hover {
|
|
background: var(--c6b-raised-hover);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
}
|
|
.SettingsMain .ButtonControl:not(.Disabled):active {
|
|
background: var(--c6b-raised-press);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
}
|
|
.SettingsMain .ButtonControl.Disabled,
|
|
.SettingsMain .ButtonControl.Disabled:hover {
|
|
background: rgb(255 255 255 / .04);
|
|
box-shadow: none;
|
|
color: rgb(255 255 255 / calc(.96 * var(--lgs-dis-content, .40)));
|
|
}
|
|
.SettingsMain .ButtonControl > .Badge {
|
|
background: rgb(255 255 255 / .16);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
.SettingsMain .ButtonControl.WithIcon > .Icon path,
|
|
.SettingsMain .ButtonControl.WithIcon > .SVGIcon_Button path {
|
|
fill: var(--lgs-text-1);
|
|
}
|
|
.SettingsMain .ButtonControl.Dropdown::after {
|
|
border-color: var(--lgs-text-2);
|
|
}
|
|
/* colourful (blue) action buttons: the tinted primary */
|
|
.SettingsMain .ButtonControl.Colorful,
|
|
.SettingsMain .ButtonControl.Colorful:not(.Disabled):hover {
|
|
background: none;
|
|
color: var(--lgs-text-on-tint);
|
|
}
|
|
.SettingsMain .ButtonControl.Colorful::before {
|
|
background: var(--lgs-tint-primary);
|
|
border-radius: inherit;
|
|
}
|
|
.SettingsMain .ButtonControl.Colorful::after {
|
|
background: linear-gradient(rgb(255 255 255 / .10), rgb(255 255 255 / .10));
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* refresh-rate circles: raised circles, the current one white */
|
|
.SettingsItem.RadioButtons .RadioButton {
|
|
background: var(--c6b-raised);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton:not(.Selected):hover {
|
|
background: var(--c6b-raised-hover);
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton:not(.Selected):active {
|
|
background: var(--c6b-raised-press);
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton.Selected,
|
|
.SettingsItem.RadioButtons .RadioButton.Selected:hover {
|
|
background: var(--lgs-selected-fill);
|
|
box-shadow: 0 2px 6px rgb(0 0 0 / .22);
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton .Label {
|
|
color: var(--lgs-text-1);
|
|
font-weight: 600;
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton.Selected .Label {
|
|
color: var(--lgs-text-on-selected);
|
|
}
|
|
.SettingsItem.RadioButtons .RadioButton.Disabled:not(.Selected) {
|
|
opacity: var(--lgs-dis-content, .40);
|
|
}
|
|
|
|
/* segmented controls: a recessed capsule track; the selected segment is the
|
|
white pill (SteamVR's own sliding ::after, recoloured, never moved) */
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup {
|
|
filter: none;
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup::before {
|
|
background-color: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
opacity: 1;
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup:hover::before {
|
|
background-color: rgb(255 255 255 / .06);
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup::after,
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup:hover::after {
|
|
background: var(--lgs-selected-fill);
|
|
box-shadow: 0 2px 6px rgb(0 0 0 / .22);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption,
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption:first-child,
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption:last-child {
|
|
border-radius: var(--lgs-r-capsule);
|
|
background-color: transparent;
|
|
transition: background-color 0s linear 0s;
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup:not([data-lgs-switch]) > .SegmentedControlGroupOption.Active {
|
|
/* the white also on the selected segment itself, so its dark label sits on
|
|
its own background; it appears when SteamVR's sliding pill has arrived */
|
|
background-color: var(--lgs-selected-fill);
|
|
transition: background-color 0s linear var(--control-switch-animation-time, 200ms);
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption > span {
|
|
color: var(--lgs-text-1);
|
|
font-family: var(--lgs-font);
|
|
font-weight: 500;
|
|
}
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption.Active > span {
|
|
color: var(--lgs-text-on-selected);
|
|
font-weight: 600;
|
|
}
|
|
/* SteamVR fades unselected labels to .4 / .75: too faint on glass */
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroup .SegmentedControlGroupOption:not(.Active),
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption:not(.Active) + .SegmentedControlGroupOption:not(.Active) {
|
|
opacity: 1;
|
|
}
|
|
.SettingsMain .SettingsItem.SegmentedControl .SegmentedControlGroup.SegmentedControlGroup .SegmentedControlGroupOption:not(.Active) > span {
|
|
opacity: .80;
|
|
}
|
|
/* no 1 px dividers between segments (P-43) */
|
|
.SettingsItem.SegmentedControl .SegmentedControlGroupOption:not(:first-child)::before,
|
|
.SettingsItem.SegmentedControl:hover .SegmentedControlGroupOption:not(:first-child)::before {
|
|
background: transparent;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* sliders: a recessed capsule track, white fill from the origin to the knob
|
|
(SteamVR's own --slider-value), white knob carrying the value */
|
|
.SettingsMain .SliderControl:not(.Color):not(.Vertical) .Track {
|
|
background: linear-gradient(to right,
|
|
var(--lgs-slider-fill) 0,
|
|
var(--lgs-slider-fill) calc(var(--slider-value, 0) * (100% - var(--handle-length)) + var(--handle-length) / 2),
|
|
var(--lgs-fill-thick) calc(var(--slider-value, 0) * (100% - var(--handle-length)) + var(--handle-length) / 2));
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
opacity: 1;
|
|
}
|
|
.SettingsMain .SliderControl.Vertical:not(.Color) .Track {
|
|
background: var(--lgs-fill-thick);
|
|
opacity: 1;
|
|
}
|
|
.SettingsMain .SliderControl:not(.Color):hover .Track,
|
|
.SettingsMain .SliderControl:not(.Color).Sliding .Track {
|
|
opacity: 1;
|
|
}
|
|
/* detent ticks read on the white fill and on the track */
|
|
.SettingsMain .SliderControl:not(.Color) .Track .Detent {
|
|
background: var(--lgs-text-2);
|
|
mix-blend-mode: difference;
|
|
}
|
|
.SettingsMain .SliderControl:not(.Color) .Handle {
|
|
background: var(--lgs-knob);
|
|
box-shadow: 0 2px 6px rgb(0 0 0 / .30);
|
|
border-color: transparent;
|
|
}
|
|
.SettingsMain .SliderControl:not(.Color):hover .Handle,
|
|
.SettingsMain .SliderControl:not(.Color).Sliding .Handle {
|
|
background-color: var(--lgs-knob);
|
|
box-shadow: 0 2px 6px rgb(0 0 0 / .30), 0 0 calc(22px * var(--lgs-vr-scale)) rgb(255 255 255 / .35);
|
|
}
|
|
.SettingsMain .SliderControl:not(.Color) .Handle > .RangeLabel {
|
|
color: var(--lgs-text-on-selected);
|
|
font-weight: 600;
|
|
}
|
|
.SettingsMain .SliderControl:not(.Color) .HandleCircle {
|
|
border-color: var(--lgs-text-on-selected);
|
|
}
|
|
.SettingsMain .SliderControl > .RangeLabel {
|
|
color: var(--lgs-text-2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* dropdown popovers: thick glass, rows with a leading check slot (CTL §19.2
|
|
V4, C4a-D1): the current value is checked, never filled */
|
|
.SettingsMain .Dropdown.Popover,
|
|
.SettingsMain .Dropdown.Popover > .ScrollPanel {
|
|
border-radius: calc(var(--lgs-r-menu) * var(--lgs-vr-scale));
|
|
}
|
|
.SettingsMain .Dropdown.Popover {
|
|
background: var(--c6b-lobe), var(--lgs-mat-thick-bg);
|
|
backdrop-filter: var(--lgs-mat-thick-blur);
|
|
box-shadow: var(--lgs-shadow-15mm);
|
|
padding: 9px 0;
|
|
}
|
|
.SettingsMain .Dropdown.Popover > .ScrollPanel {
|
|
max-height: 856px;
|
|
overflow-y: auto;
|
|
}
|
|
.SettingsMain .Dropdown.Popover .Separator {
|
|
border-top: 0;
|
|
height: 3px;
|
|
margin: 6px 38px;
|
|
background: var(--lgs-separator);
|
|
}
|
|
.SettingsMain .DropdownPopoverButton {
|
|
position: relative;
|
|
min-height: calc(var(--lgs-menu-row, 72px) * var(--lgs-vr-scale));
|
|
margin: 0 9px;
|
|
padding: 0 38px 0 calc(38px + 46px);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: calc((var(--lgs-r-menu) - 6px) * var(--lgs-vr-scale));
|
|
background-color: transparent;
|
|
color: var(--lgs-text-1);
|
|
font-family: var(--lgs-font);
|
|
font-weight: 500;
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.SettingsMain .DropdownPopoverButton:hover {
|
|
background-color: rgb(255 255 255 / var(--lgs-hover-add, .08));
|
|
}
|
|
.SettingsMain .DropdownPopoverButton:active {
|
|
background-color: rgb(255 255 255 / .16);
|
|
}
|
|
.SettingsMain .DropdownPopoverButton.Selected,
|
|
.SettingsMain .DropdownPopoverButton.Selected:hover {
|
|
background-color: transparent;
|
|
color: var(--lgs-text-1);
|
|
font-weight: 600;
|
|
}
|
|
.SettingsMain .DropdownPopoverButton.Selected:hover {
|
|
background-color: rgb(255 255 255 / var(--lgs-hover-add, .08));
|
|
}
|
|
.SettingsMain .DropdownPopoverButton.Selected::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 38px;
|
|
top: 50%;
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-top: -17px;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* modals inside SettingsMain: thick glass */
|
|
.SettingsMain .Modal {
|
|
background: var(--c6b-lobe), var(--lgs-mat-thick-bg);
|
|
backdrop-filter: var(--lgs-mat-thick-blur);
|
|
box-shadow: var(--lgs-shadow-15mm);
|
|
border-radius: calc(var(--lgs-r-sheet) * var(--lgs-vr-scale));
|
|
color: var(--lgs-text-1);
|
|
}
|
|
.SettingsMain .Modal > .Subsection.Top,
|
|
.SettingsMain .Modal > .Subsection.Bottom,
|
|
.SettingsMain .Modal > .Subsection.Body {
|
|
background: transparent;
|
|
}
|
|
.SettingsMain .Modal > .Subsection.Top {
|
|
box-shadow: inset 0 -3px 0 var(--lgs-separator);
|
|
}
|
|
.SettingsMain .Modal > .Subsection.Bottom {
|
|
box-shadow: inset 0 3px 0 var(--lgs-separator);
|
|
}
|
|
.SettingsMain .Modal > .Subsection.Top.Subheader {
|
|
background: var(--lgs-fill-regular);
|
|
}
|
|
.SettingsMain .Modal > .Subsection.Top .SettingsItem,
|
|
.SettingsMain .Modal > .Subsection.Bottom .SettingsItem {
|
|
filter: none;
|
|
}
|
|
.SettingsMain .Modal .ModalPlaceholder {
|
|
color: var(--lgs-text-2);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* restart-required banner: a glass strip, Restart is the tinted action */
|
|
.SettingsRestartRequiredBanner {
|
|
background: var(--c6b-lobe), var(--lgs-mat-thick-bg);
|
|
box-shadow: none;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
.SettingsRestartRequiredBanner .ButtonControl,
|
|
.SettingsRestartRequiredBanner .ButtonControl:not(.Disabled):hover {
|
|
background: var(--lgs-tint-primary);
|
|
color: var(--lgs-text-on-tint);
|
|
}
|
|
|
|
/* scrollbars: no track, a quiet capsule thumb */
|
|
.SettingsMain ::-webkit-scrollbar {
|
|
background-color: transparent;
|
|
}
|
|
.SettingsMain ::-webkit-scrollbar-thumb {
|
|
background-color: rgb(255 255 255 / .22);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* text fields: recessed capsules */
|
|
.SettingsMain :is(.PasswordInput, .PasswordInputDisabled) {
|
|
background: var(--lgs-fill-thick);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: var(--lgs-r-capsule);
|
|
}
|
|
|
|
/* ================================================================== */
|
|
/* 1. The SteamVR settings page: footprint, window glass, sizes */
|
|
/* ================================================================== */
|
|
|
|
.DashboardPanel.Settings {
|
|
--c6b-glass-h: 952px;
|
|
--c6b-side-w: 576px;
|
|
--c6b-r: var(--lgs-vr-r-window);
|
|
/* SteamVR sizes its controls from these: 60 / 24 / 28 main px x m */
|
|
--settings-control-default-height: 86px;
|
|
--settings-font-size: 35px;
|
|
--settings-font-size-title: 41px;
|
|
--settings-font-weight: 500;
|
|
--settings-font-weight-title: 700;
|
|
--settings-control-inner-border-radius: 43px;
|
|
--settings-sidebar-button-max-height: 115px;
|
|
--settings-sidebar-min-width: var(--c6b-side-w);
|
|
--settings-sidebar-max-width: var(--c6b-side-w);
|
|
--settings-content-padding: 51px;
|
|
--settings-right-column-width: 500px;
|
|
--settings-control-spacing: 23px;
|
|
--dropdown-popover-background-color: transparent;
|
|
--dropdown-popover-selected-background-color: transparent;
|
|
/* the panel's own fill goes: the glass is the backing below */
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
font-family: var(--lgs-font);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* the window glass: 1858 x 952, r 78, top-aligned = Steam's footprint, on the
|
|
page container (an element, so audits see it under the text); the sidebar
|
|
region is a black .14 fill on it; the light is the E3 lobe (no top line,
|
|
no rim) */
|
|
.DashboardPanel.Settings .SettingsSidebarPageContainer {
|
|
height: var(--c6b-glass-h);
|
|
border-radius: var(--c6b-r);
|
|
background:
|
|
linear-gradient(90deg, var(--lgs-fill-regular) 0 var(--c6b-side-w), rgb(0 0 0 / 0) var(--c6b-side-w)),
|
|
radial-gradient(20% 20px at 26% 0, rgb(255 255 255 / .18), rgb(255 255 255 / 0)),
|
|
var(--lgs-mat-window-bg);
|
|
}
|
|
/* native: glassd's window glass is right behind the panel (html.lgs-native-vr,
|
|
set by lgs_sg.js with the cover node, device/lgs_sg.js "SteamVR Settings
|
|
glass"): the CSS window fill and its lobe go, the sidebar's black .14 stays */
|
|
&.lgs-native-vr-settings .DashboardPanel.Settings .SettingsSidebarPageContainer {
|
|
background: linear-gradient(90deg, var(--lgs-fill-regular) 0 var(--c6b-side-w), rgb(0 0 0 / 0) var(--c6b-side-w));
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 2. Sidebar: the "SteamVR" title, a scrolling column of 104 px rows */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* the title sits where Steam's "Settings" sits: Large Title, centred on the
|
|
Back circle's row (y 35-121), x 144 (a brand name, the same in every
|
|
language) */
|
|
.DashboardPanel.Settings .SettingsSidebarPageContainer::before {
|
|
content: "SteamVR";
|
|
position: absolute;
|
|
left: 46px;
|
|
top: 35px;
|
|
height: 86px;
|
|
line-height: 86px;
|
|
z-index: 2;
|
|
font: 700 66px var(--lgs-font);
|
|
letter-spacing: -.015em;
|
|
color: var(--lgs-text-1);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
}
|
|
/* with T2's Back circle the title moves beside it */
|
|
.DashboardPanel.Settings .SettingsSidebarPageContainer:has(> .lgs-c6b-back)::before {
|
|
left: 144px;
|
|
}
|
|
/* the column scrolls (8 x 115 > 796) from y 140; static, so the ornament
|
|
(positioned against the page container) is not clipped by its scroll */
|
|
.DashboardPanel.Settings .SettingsSidebar {
|
|
position: static;
|
|
flex: none;
|
|
width: var(--c6b-side-w);
|
|
min-width: var(--c6b-side-w);
|
|
max-width: var(--c6b-side-w);
|
|
height: calc(var(--c6b-glass-h) - 140px);
|
|
margin-top: 140px;
|
|
padding: 16px 0 48px;
|
|
box-sizing: border-box;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0 0 0 var(--c6b-r);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebar::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebar .Spacer {
|
|
display: none;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebar .Header {
|
|
color: var(--lgs-text-2);
|
|
font: 600 29px var(--lgs-font);
|
|
margin-left: 46px;
|
|
}
|
|
/* rows: the button is the 115 px hit; the visible pill is 104 tall, x 23-553 */
|
|
.DashboardPanel.Settings .SettingsSidebarButton {
|
|
flex: none;
|
|
height: 115px;
|
|
min-height: 115px;
|
|
padding: 0 46px;
|
|
background: transparent;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton.Active,
|
|
.DashboardPanel.Settings .SettingsSidebarButton:hover {
|
|
background: transparent;
|
|
}
|
|
/* SteamVR's press flash (its ::before), kept, recoloured to the pressed add
|
|
and inset to the pill */
|
|
.DashboardPanel.Settings .SettingsSidebarButton::before {
|
|
inset: 5.5px 23px;
|
|
border-radius: 52px;
|
|
background: rgb(255 255 255 / .16);
|
|
}
|
|
/* our pill: navigation selected = white .18 + the lit lobe; hover = the spot */
|
|
.DashboardPanel.Settings .SettingsSidebarButton::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 5.5px 23px;
|
|
z-index: 1;
|
|
border-radius: 52px;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton:not(.Active):hover::after {
|
|
background: radial-gradient(40% 90% at 30% 40%, rgb(255 255 255 / var(--lgs-nav-hover-spot, .16)), rgb(255 255 255 / 0) 80%);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton.Active::after {
|
|
background:
|
|
radial-gradient(42% 4px at 30% 2px, rgb(255 255 255 / .45), rgb(255 255 255 / 0)),
|
|
var(--lgs-fill-nav);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton .Label,
|
|
.DashboardPanel.Settings .SettingsSidebarButton:hover .Label {
|
|
font: 500 35px/1.3 var(--lgs-font);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton.Active .Label {
|
|
font-weight: var(--lgs-nav-weight, 600);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* icon circles (T2 keys each row with data-lgs-sec): 58 px colour circle,
|
|
white glyph 32 px, before the label */
|
|
.DashboardPanel.Settings .SettingsSidebarButton[data-lgs-sec] {
|
|
padding-left: calc(46px + 58px + 23px);
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton[data-lgs-sec] .Label::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(-58px - 23px);
|
|
top: 50%;
|
|
width: 58px;
|
|
height: 58px;
|
|
margin-top: -29px;
|
|
border-radius: 50%;
|
|
background:
|
|
var(--c6b-glyph, none) center / 32px 32px no-repeat,
|
|
linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 60%),
|
|
var(--c6b-tint, var(--lgs-gray));
|
|
pointer-events: none;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebarButton[data-lgs-sec] .Label {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* section glyphs and colours (data-lgs-sec on the row and on the page) */
|
|
.DashboardPanel.Settings [data-lgs-sec="general"] {
|
|
--c6b-tint: var(--lgs-gray);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6.6'/%3E%3Cpath d='M12 2.6v2.8M12 18.6v2.8M2.6 12h2.8M18.6 12h2.8M5.4 5.4l2 2M16.6 16.6l2 2M5.4 18.6l2-2M16.6 7.4l2-2'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="playarea"] {
|
|
--c6b-tint: var(--lgs-teal);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3.5' stroke-dasharray='3.2 2.6'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="dashboard"] {
|
|
--c6b-tint: var(--lgs-blue);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='12.5' rx='2.6'/%3E%3Cpath d='M9 20.5h6'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="controller"] {
|
|
--c6b-tint: var(--lgs-indigo);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.2 7h9.6a4.6 4.6 0 0 1 4.5 5.6l-.9 4.1a2.3 2.3 0 0 1-4 .9L14.6 16H9.4l-1.8 1.6a2.3 2.3 0 0 1-4-.9l-.9-4.1A4.6 4.6 0 0 1 7.2 7zm.3 2.6v1.3H6.2v1.4h1.3v1.3h1.4v-1.3h1.3v-1.4H8.9V9.6zm8.3.2a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8zm-1.6 1.8a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8z'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="video"] {
|
|
--c6b-tint: var(--lgs-orange);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='12.6' rx='2.4'/%3E%3Cpath d='M10 8.8l5 2.5-5 2.5z' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="camera"] {
|
|
--c6b-tint: var(--lgs-green);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 8.6A1.6 1.6 0 0 1 5.6 7h2.2l1.6-2h5.2l1.6 2h2.2A1.6 1.6 0 0 1 20 8.6v8.8a1.6 1.6 0 0 1-1.6 1.6H5.6A1.6 1.6 0 0 1 4 17.4z'/%3E%3Ccircle cx='12' cy='12.6' r='3.3'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="startupshutdown"] {
|
|
--c6b-tint: var(--lgs-red);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3.5v8'/%3E%3Cpath d='M7.1 6.7a7 7 0 1 0 9.8 0'/%3E%3C/svg%3E");
|
|
}
|
|
.DashboardPanel.Settings [data-lgs-sec="developer"] {
|
|
--c6b-tint: var(--lgs-gray);
|
|
--c6b-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7 4 12l4.5 5M15.5 7 20 12l-4.5 5M13.6 5l-3.2 14'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 3. Back circle (T2 node .lgs-c6b-back): 86 px at (35, 35), hit 115 */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.DashboardPanel.Settings .lgs-c6b-back {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 20px;
|
|
width: 116px;
|
|
height: 116px;
|
|
z-index: 3;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
}
|
|
.DashboardPanel.Settings .lgs-c6b-back::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 15px;
|
|
border-radius: 50%;
|
|
background:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E") center / 38px 38px no-repeat,
|
|
var(--c6b-raised);
|
|
box-shadow: var(--lgs-raised-shadow);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.DashboardPanel.Settings .lgs-c6b-back:hover::before {
|
|
background:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E") center / 38px 38px no-repeat,
|
|
var(--c6b-raised-hover);
|
|
}
|
|
.DashboardPanel.Settings .lgs-c6b-back:active::before {
|
|
background:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E") center / 38px 38px no-repeat,
|
|
var(--c6b-raised-press);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 4. Detail pane: a 1180 px column (813 main px, C6a's 816: SET's 760 */
|
|
/* shrank nested labels, G-AUD SHRUNK), rows in platters */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.DashboardPanel.Settings .SettingsPageContainer {
|
|
background: transparent;
|
|
height: var(--c6b-glass-h);
|
|
padding: 156px 51px 140px;
|
|
border-radius: 0 var(--c6b-r) var(--c6b-r) 0;
|
|
scroll-padding: 156px 0 140px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
/* the section hero (T2 copies the active section's label and key): an 87 px
|
|
colour circle and Title 1, centred, one line */
|
|
.DashboardPanel.Settings .SettingsPageContainer[data-lgs-title]::before {
|
|
content: attr(data-lgs-title);
|
|
flex: none;
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
width: max-content;
|
|
height: 87px;
|
|
margin: -12px auto 35px;
|
|
padding-left: calc(87px + 23px);
|
|
font: 700 55px/1.2 var(--lgs-font);
|
|
letter-spacing: -.01em;
|
|
color: var(--lgs-text-1);
|
|
white-space: nowrap;
|
|
background:
|
|
var(--c6b-glyph, none) 20px center / 47px 47px no-repeat,
|
|
radial-gradient(circle 43.5px at 43.5px 50%, rgb(255 255 255 / .20), rgb(255 255 255 / 0) 60%, transparent 43px),
|
|
radial-gradient(circle 43.5px at 43.5px 50%, var(--c6b-tint, var(--lgs-gray)) 42.5px, transparent 43.5px);
|
|
pointer-events: none;
|
|
}
|
|
/* rows: contiguous 115 px rows in a black .14 platter, radius 43, a 3 px
|
|
white .08 separator inset 35 between rows */
|
|
.DashboardPanel.Settings .SettingsPageContainer > .SettingsItem {
|
|
min-height: 115px;
|
|
margin: 0;
|
|
padding: 14px 35px;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
column-gap: 35px;
|
|
background: var(--lgs-fill-regular);
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer > .SettingsItem + .SettingsItem {
|
|
background:
|
|
linear-gradient(var(--lgs-separator), var(--lgs-separator)) 35px 0 / calc(100% - 70px) 3px no-repeat,
|
|
var(--lgs-fill-regular);
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer > .SettingsItem:not(.SettingsItem + .SettingsItem) {
|
|
border-top-left-radius: 43px;
|
|
border-top-right-radius: 43px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer > .SettingsItem:not(:has(+ .SettingsItem)) {
|
|
border-bottom-left-radius: 43px;
|
|
border-bottom-right-radius: 43px;
|
|
margin-bottom: 46px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem .Label,
|
|
.DashboardPanel.Settings .SettingsItem.Label {
|
|
font-size: 35px;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem .Label.Title,
|
|
.DashboardPanel.Settings .SettingsItem.Label.Title {
|
|
font-size: 41px;
|
|
font-weight: 700;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem > .SettingsExplainer {
|
|
font: 500 32px/1.3 var(--lgs-font);
|
|
margin-top: 6px;
|
|
}
|
|
.DashboardPanel.Settings :is(.SettingsSubTitle, h1) {
|
|
font: 600 32px/1.3 var(--lgs-font);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
margin: 0 35px 17px;
|
|
}
|
|
/* advanced settings: a 16 px purple dot before the label */
|
|
.DashboardPanel.Settings .SettingsPageContainer > .SettingsItem.Advanced > .Label::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0 17px 0 0;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -3px;
|
|
border-radius: 50%;
|
|
background: var(--lgs-purple);
|
|
}
|
|
|
|
/* controls at the page scale (CTL §13: 1.44) */
|
|
.DashboardPanel.Settings .SettingsPageContainer .ButtonControl {
|
|
min-height: 86px;
|
|
font-size: 35px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer .ButtonControl:not(.Label):not(.WithIcon):not(.AuroraPalette) {
|
|
padding: 0 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.DashboardPanel.Settings .SettingsPageContainer .ButtonControl.Dropdown {
|
|
justify-content: flex-start;
|
|
padding-right: 70px;
|
|
}
|
|
/* refresh-rate circles: 86 at a 121 pitch, under the label (CTL §7.4, R10) */
|
|
.DashboardPanel.Settings .SettingsItem.RadioButtons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 17px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.RadioButtons > .Label {
|
|
align-self: stretch;
|
|
margin: 0;
|
|
text-align: left;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.RadioButtons .RadioButtonsSet {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 23px 35px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.RadioButtons .RadioButton {
|
|
--size: 86px;
|
|
width: 86px;
|
|
height: 86px;
|
|
margin: 0;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.RadioButtons .RadioButton .Label {
|
|
font-size: 30px;
|
|
margin: 0;
|
|
}
|
|
/* sliders: the capsule is 92 tall, the knob 92 and carries the value */
|
|
.DashboardPanel.Settings .SliderControl.ValueOnHandle {
|
|
--slider-thickness: 92px;
|
|
}
|
|
.DashboardPanel.Settings .SliderControl:not(.Color):not(.Vertical) {
|
|
--track-thickness: var(--slider-thickness);
|
|
}
|
|
.DashboardPanel.Settings .SliderControl:not(.Color) .Handle {
|
|
font: 600 27px var(--lgs-font);
|
|
}
|
|
.DashboardPanel.Settings .SliderControl:not(.Color) .Handle > .RangeLabel {
|
|
font-size: 27px;
|
|
}
|
|
.DashboardPanel.Settings .SliderControl > .RangeLabel {
|
|
font-size: 27px;
|
|
}
|
|
/* segmented controls (3-way, Hide/Show): 86 tall, segments >= 203 wide */
|
|
.DashboardPanel.Settings .SettingsItem.SegmentedControl .SegmentedControlGroup {
|
|
min-height: 86px;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.SegmentedControl .SegmentedControlGroupOption {
|
|
min-width: 203px;
|
|
padding: 0 23px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 5. Off / On -> switch (T2 tags data-lgs-switch on two-option groups */
|
|
/* whose texts are SteamVR's own "Off" then "On"). 96 x 58 track, */
|
|
/* 50 px knob = SteamVR's own sliding pill (its transform untouched, */
|
|
/* so it slides on SteamVR's spring); a click anywhere on the track */
|
|
/* (hit 128 x 114) lands on the unselected option and toggles. */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.DashboardPanel.Settings .SettingsItem.SegmentedControl > .SubsectionStem.Hidden:has(> .SegmentedControlGroup[data-lgs-switch]) {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.SegmentedControl .SegmentedControlGroup[data-lgs-switch] {
|
|
flex: none;
|
|
width: 96px;
|
|
min-width: 96px;
|
|
height: 58px;
|
|
min-height: 58px;
|
|
border-radius: 29px;
|
|
margin-right: 0;
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]::before {
|
|
background-color: rgb(120 120 128 / .32);
|
|
box-shadow: var(--lgs-recessed-shadow);
|
|
border-radius: 29px;
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]:hover::before {
|
|
background-color: rgb(150 150 158 / .40);
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]:has(> .SegmentedControlGroupOption:last-child.Active)::before {
|
|
background-color: var(--lgs-toggle-on, var(--lgs-green));
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]:has(> .SegmentedControlGroupOption:last-child.Active):hover::before {
|
|
background-color: color-mix(in srgb, var(--lgs-green), white 12%);
|
|
}
|
|
/* the knob: SteamVR's pill, 38 px wide so its translateX(100% x index) moves it
|
|
38 px; drawn 50 px round by a same-colour spread */
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]::after,
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch]:hover::after {
|
|
width: 38px;
|
|
height: 38px;
|
|
top: 10px;
|
|
bottom: auto;
|
|
left: 10px;
|
|
border-radius: 50%;
|
|
background: var(--lgs-knob);
|
|
box-shadow: 0 0 0 6px var(--lgs-knob), 0 3px 8px 6px rgb(0 0 0 / .22);
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch] > .SegmentedControlGroupOption {
|
|
min-width: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
.DashboardPanel.Settings .SettingsItem.SegmentedControl .SegmentedControlGroup.DualValue[data-lgs-switch] > .SegmentedControlGroupOption > span {
|
|
opacity: 0;
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch] > .SegmentedControlGroupOption.Active {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.DashboardPanel.Settings .SegmentedControlGroup[data-lgs-switch] > .SegmentedControlGroupOption:not(.Active) {
|
|
position: absolute;
|
|
inset: -28px -16px;
|
|
width: auto;
|
|
z-index: 4;
|
|
border-radius: 57px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 6. Advanced Settings: a liquid capsule ornament straddling the glass */
|
|
/* bottom (y 911-1032), centred; the same node, re-placed */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.DashboardPanel.Settings .SettingsSidebar .Bottom.AdvancedSettingsToggle {
|
|
position: absolute;
|
|
z-index: 30;
|
|
top: calc(var(--c6b-glass-h) - 41px);
|
|
left: 0;
|
|
right: 0;
|
|
width: max-content;
|
|
height: 121px;
|
|
margin: 0 auto;
|
|
padding: 0 17px 0 46px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 61px;
|
|
background:
|
|
radial-gradient(30% 20px at 26% 0, rgb(255 255 255 / .16), rgb(255 255 255 / 0)),
|
|
linear-gradient(180deg, rgb(255 255 255 / .03) 0, rgb(255 255 255 / .02) 60%),
|
|
linear-gradient(180deg, rgb(20 22 30 / 0) 0 39px, var(--lgs-mat-window-tint) 43px);
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
}
|
|
.DashboardPanel.Settings .AdvancedSettingsToggle > .SettingsItem.SegmentedControl {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 29px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebar .AdvancedSettingsToggle .SettingsItem .Label {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 340px;
|
|
height: 50px;
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
font: 600 32px/1.2 var(--lgs-font);
|
|
color: var(--lgs-text-2);
|
|
white-space: nowrap;
|
|
}
|
|
.DashboardPanel.Settings .SettingsSidebar .AdvancedSettingsToggle .SegmentedControlGroup {
|
|
width: auto;
|
|
height: 86px;
|
|
min-height: 86px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 7. Modals and popovers in the page: the fit rule */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.DashboardPanel.Settings .Modal {
|
|
max-height: 856px;
|
|
overflow-y: auto;
|
|
}
|