mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-22 12:01:25 +02:00
607 lines
20 KiB
CSS
607 lines
20 KiB
CSS
/* Glass Shell, area "steamvr": SteamVR's controller binding editor
|
|
(vr:controllerbindingui, controllerbinding.html, 2400x1350; page 2 of the
|
|
Steam dashboard frame, so the same window as Steam main). Window glass
|
|
with the primitives look of Steam's settings: fills, capsules, white
|
|
selected. The page is laser-only (no gamepad focus), so hover is the
|
|
only targeting cue: controls use the strong SteamVR hover
|
|
(--lgs-vr-hover-fill + rim, 10-systemui.css section 0).
|
|
Every rule is scoped to body.ControllerMainBorderRadius (this page only;
|
|
the files are bundled into every SteamVR page). Look only: no geometry,
|
|
scrollbar widths untouched, SteamVR's .5 mirrored column and .Disabled
|
|
dimming kept. Wrapped as html.lgs-on { ... }. */
|
|
|
|
body.ControllerMainBorderRadius {
|
|
/* 2400 px here = 1280 CSS px of Steam main: radii scale with it */
|
|
--lgs-vr-scale: 1.875;
|
|
--lgs-vr-r-window: calc(var(--lgs-r-window) * 1.875);
|
|
--lgs-vr-r-card: calc(var(--lgs-r-card) * 1.875);
|
|
--lgs-vr-r-row: calc(var(--lgs-r-row) * 1.875);
|
|
/* restated at this page's scale in the ring-free form (REQ P4->C5b):
|
|
the lit top arc only */
|
|
--lgs-vr-hover-rim: inset 0 calc(1.5px * 1.875) calc(1.5px * 1.875) calc(-1px * 1.875) rgb(255 255 255 / .45);
|
|
/* ring-free stand-ins for the Phase 1 rims (no 1 px lines, VP P-42/43) */
|
|
/* raised controls: a soft drop only; a uniform top arc read as a line
|
|
in G-OUTLINE's edge profile (ratio ~1 > .35) */
|
|
--c5b-raised: 0 calc(1px * 1.875) calc(2px * 1.875) rgb(0 0 0 / .10);
|
|
/* the overlay's own rounded corners (body clips): Steam's window radius */
|
|
border-radius: var(--lgs-vr-r-window);
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 1. Window glass */
|
|
/* ---------------------------------------------------------------- */
|
|
& .InputContainer {
|
|
background:
|
|
radial-gradient(20% 16px at 26% 0, rgb(255 255 255 / .18), rgb(255 255 255 / 0)),
|
|
var(--lgs-mat-window-bg);
|
|
/* no E4/E5 dark edge here: on a transparent SteamVR overlay the inset
|
|
black shadow comes out as a BRIGHT top band in the page's own pixels
|
|
(measured: edge ratio .67 with it, .05 without) */
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-vr-r-window);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 2. Title bar: no slab; the title floats on the glass, Back and */
|
|
/* Options are capsules, a hairline closes the bar. */
|
|
/* ---------------------------------------------------------------- */
|
|
& .PageTitleBar .TitleBarMainRow {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
& .PageTitle,
|
|
& .PageTitleBar .PageTitleLabel {
|
|
color: var(--lgs-text-1);
|
|
text-shadow: var(--lgs-text-shadow);
|
|
}
|
|
& .PageTitleBar .PageSubTitle {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& .PageTitleButton,
|
|
& .PageTitleBar .OptionsButton {
|
|
background: var(--lgs-fill-2);
|
|
box-shadow: var(--c5b-raised);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
& .PageTitleBar .PageTitleBackButton:hover,
|
|
& .PageTitleBar .OptionsButton:not(.Disabled):hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--c5b-raised), var(--lgs-vr-hover-rim);
|
|
}
|
|
& .PageTitleBar .PageTitleButton:not(.Disabled):active {
|
|
background: var(--lgs-pressed-fill);
|
|
}
|
|
& .PageTitleBar .NoSteamWarning {
|
|
background: color-mix(in srgb, var(--lgs-orange) 60%, var(--lgs-panel-bg));
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 3. Generic buttons on this page: fill capsules */
|
|
/* ---------------------------------------------------------------- */
|
|
& .ButtonControl {
|
|
background: var(--lgs-fill-2);
|
|
box-shadow: var(--c5b-raised);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
& .ButtonControl:not(.Disabled):hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--c5b-raised), var(--lgs-vr-hover-rim);
|
|
}
|
|
& .ButtonControl:not(.Disabled):active {
|
|
background: var(--lgs-pressed-fill);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
& .ButtonControl.Disabled {
|
|
opacity: var(--lgs-disabled-opacity);
|
|
}
|
|
& .ButtonControl.WithIcon > :is(.Icon, .SVGIcon_Button) path {
|
|
fill: var(--lgs-text-1);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 4. App select */
|
|
/* ---------------------------------------------------------------- */
|
|
& .AppSelectContainer {
|
|
background: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-card);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
& .AppSelectContainer:hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--lgs-vr-hover-rim);
|
|
}
|
|
/* app art is content: opaque, concentric small radius */
|
|
& .AppSelectContainer .AppImage {
|
|
border-radius: calc(var(--lgs-r-small) * var(--lgs-vr-scale));
|
|
}
|
|
& .AppSelectName {
|
|
color: var(--lgs-text-1);
|
|
text-shadow: var(--lgs-text-shadow);
|
|
}
|
|
& .AppSelectTitle {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& .AppSelectCompositorEntry img {
|
|
border-radius: var(--lgs-vr-r-row);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 5. Binding list */
|
|
/* ---------------------------------------------------------------- */
|
|
& .BindingListSectionHeader {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& .BindingEntry,
|
|
& .ControllerTypeWrapper .BindingEntry {
|
|
background: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-card);
|
|
}
|
|
& .BindingName {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .BindingDescription,
|
|
& .BindingLastUpdated,
|
|
& .BindingSteamPersonaName,
|
|
& .RemappedInfoSpan {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& .SteamCommunityProfileImage,
|
|
& .BindingEntry .AppImage {
|
|
border-radius: calc(var(--lgs-r-small) * var(--lgs-vr-scale));
|
|
}
|
|
/* the controller line drawing sat on a dark square: let the glass show */
|
|
& .ControllerTypeButton img {
|
|
background: transparent;
|
|
}
|
|
& .InlineDropdownLabel {
|
|
background: var(--lgs-fill-2);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
& .InlineDropdownLabel:hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--lgs-vr-hover-rim);
|
|
}
|
|
& .InlineDropdownLabel.ReadOnly {
|
|
background: transparent;
|
|
}
|
|
& hr,
|
|
& .RemappedInfoHr {
|
|
border-top-color: var(--lgs-separator);
|
|
}
|
|
& .BottomButtonHR {
|
|
border-top-color: var(--lgs-separator);
|
|
}
|
|
& .BindingManageButtonsHR {
|
|
border-color: var(--lgs-separator);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 6. View / edit binding */
|
|
/* ---------------------------------------------------------------- */
|
|
& .TabRow {
|
|
border-bottom-color: var(--lgs-separator);
|
|
}
|
|
/* action-set tabs: fill segments, the current one is the white pill */
|
|
& .Tab {
|
|
background-color: var(--lgs-fill-2);
|
|
border-bottom-color: transparent;
|
|
border-radius: var(--lgs-vr-r-row);
|
|
color: var(--lgs-text-1);
|
|
transition: background-color var(--lgs-t-fast) var(--lgs-ease), color var(--lgs-t-fast) var(--lgs-ease);
|
|
}
|
|
/* (warning / error / selected tabs keep their fill: their rules are
|
|
more specific; the rim still marks the pointed tab) */
|
|
& .Tab:hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--lgs-vr-hover-rim);
|
|
}
|
|
/* sets with unbound actions keep their warning as a whole fill */
|
|
& .Label.Tab.Warning {
|
|
background-color: color-mix(in srgb, var(--lgs-orange) 60%, var(--lgs-panel-bg));
|
|
}
|
|
& .Label.Tab.Error {
|
|
background-color: color-mix(in srgb, var(--lgs-red) 62%, var(--lgs-panel-bg));
|
|
}
|
|
& .Label.Tab.Selected,
|
|
& .Label.Tab.Warning.Selected,
|
|
& .Label.Tab.Error.Selected {
|
|
background-color: var(--lgs-selected-fill);
|
|
border-bottom-color: transparent;
|
|
color: var(--lgs-text-on-selected);
|
|
}
|
|
/* SteamVR positions the count absolutely over the end of the tab label;
|
|
stock covers the overlap with an opaque chip, so ours is opaque too
|
|
(the panel tint) with a white count on every tab state */
|
|
& .UnboundActionsCount {
|
|
background-color: var(--lgs-vr-solid-bg);
|
|
box-shadow: none;
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .ControllerTitle.Label,
|
|
& .Label.Title,
|
|
& .Label.TitleCenter {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
/* SteamVR dims the controller titles to .8 on top of the mirrored
|
|
column's .5; on translucent glass that reads below stock contrast over
|
|
a bright room, so the title itself goes to full strength (the column
|
|
keeps its .5, which is what marks it as the mirrored side) */
|
|
& .ControllerTitle.Label {
|
|
opacity: 1;
|
|
}
|
|
/* SteamVR's .5 dimming of the mirrored column and of unbound ("None")
|
|
rows multiplies with translucent glass: over a bright room their labels
|
|
fell below 3:1 (2.95), under stock (3.6-4.9). They stay clearly dimmer
|
|
than live rows, one vibrancy step up (.64). */
|
|
& .Mirrored,
|
|
& .None .Label.BindingLabel {
|
|
opacity: 0.64;
|
|
}
|
|
& .Label.Description {
|
|
color: var(--lgs-text-2);
|
|
}
|
|
/* each input's mode group: a grouped card */
|
|
& .SourceModeGroup {
|
|
background-color: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-row);
|
|
}
|
|
& .SourceModeGroup:hover {
|
|
background-color: var(--lgs-fill-3);
|
|
}
|
|
& .SourceModeGroup.Edit {
|
|
background-color: var(--lgs-fill-3);
|
|
}
|
|
& .Label.BindingLabel {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .BindingLabel.BindingHeader:not(.ReadOnly) {
|
|
background-color: var(--lgs-fill-2);
|
|
border-color: transparent;
|
|
box-shadow: var(--c5b-raised);
|
|
border-radius: var(--lgs-r-small);
|
|
}
|
|
& .Label.BindingLabel.BindingHeader {
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .ChordManageButtons,
|
|
& .ChordBindingCloseButton,
|
|
& .InputSettingsCloseButton,
|
|
& .ChordBindingBigButton {
|
|
background: var(--lgs-fill-2);
|
|
border-radius: var(--lgs-r-capsule);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .ChordManageButtons:hover,
|
|
& .ChordBindingCloseButton:hover,
|
|
& .InputSettingsCloseButton:hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
box-shadow: var(--lgs-vr-hover-rim);
|
|
}
|
|
& .ChordBindingSet,
|
|
& .ChordBindingRow,
|
|
& .PoseActionListEntry,
|
|
& .InputSettingsRow,
|
|
& .TrackerEntry:not(.Connected) {
|
|
background-color: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-row);
|
|
}
|
|
& .PoseActionsList {
|
|
background: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-card);
|
|
}
|
|
& .SourceModeHelp,
|
|
& .SimulatedControllerInfoHelp {
|
|
background-color: var(--lgs-fill-2);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 7. Popovers, inline dropdown lists, modals (rodal) */
|
|
/* ---------------------------------------------------------------- */
|
|
& .rodal-mask {
|
|
background: var(--lgs-scrim);
|
|
}
|
|
& .rodal-dialog {
|
|
background: var(--c5b-lobe), var(--lgs-mat-thick-bg);
|
|
backdrop-filter: var(--lgs-mat-thick-blur);
|
|
box-shadow: var(--lgs-shadow-25mm);
|
|
border-radius: calc(var(--lgs-r-sheet) * var(--lgs-vr-scale));
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .Modal {
|
|
background: var(--c5b-lobe), var(--lgs-mat-thick-bg);
|
|
backdrop-filter: var(--lgs-mat-thick-blur);
|
|
border-color: transparent;
|
|
box-shadow: var(--lgs-shadow-25mm);
|
|
border-radius: calc(var(--lgs-r-sheet) * var(--lgs-vr-scale));
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .ModalBackdrop {
|
|
background: var(--lgs-scrim);
|
|
}
|
|
& .InlineDropdownItem {
|
|
background: var(--lgs-fill-1);
|
|
border-radius: var(--lgs-vr-r-row);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .InlineDropdownItem:hover {
|
|
background: var(--lgs-vr-hover-fill);
|
|
}
|
|
& .InlineDropdownItem.Selected {
|
|
background: var(--lgs-selected-fill);
|
|
color: var(--lgs-text-on-selected);
|
|
}
|
|
& .InlineSeparator {
|
|
border-top-color: var(--lgs-separator);
|
|
}
|
|
& .Dropdown.Popover {
|
|
background: var(--c5b-lobe), var(--lgs-mat-thick-bg);
|
|
backdrop-filter: var(--lgs-mat-thick-blur);
|
|
box-shadow: var(--lgs-shadow-25mm);
|
|
border-radius: calc(var(--lgs-r-menu) * var(--lgs-vr-scale));
|
|
}
|
|
& .Dropdown.Popover > .Separator {
|
|
border-top-color: var(--lgs-separator);
|
|
}
|
|
& .DropdownPopoverButton {
|
|
background-color: transparent;
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .DropdownPopoverButton:hover {
|
|
background-color: var(--lgs-vr-hover-fill);
|
|
}
|
|
& .DropdownPopoverButton:active {
|
|
background-color: var(--lgs-pressed-fill);
|
|
}
|
|
& .DropdownPopoverButton.Selected {
|
|
background-color: var(--lgs-selected-fill);
|
|
color: var(--lgs-text-on-selected);
|
|
filter: none;
|
|
}
|
|
& input[type="text"],
|
|
& textarea {
|
|
background-color: var(--lgs-well-bg);
|
|
box-shadow: var(--lgs-well-shadow);
|
|
border-color: transparent;
|
|
color: var(--lgs-text-1);
|
|
caret-color: var(--lgs-caret);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 8. Scrollbars: thin capsule thumbs, no track (widths unchanged) */
|
|
/* ---------------------------------------------------------------- */
|
|
& ::-webkit-scrollbar,
|
|
& .BindingSectionWrapper::-webkit-scrollbar,
|
|
& .AppSelectWrapper::-webkit-scrollbar,
|
|
& .AppBindingSection::-webkit-scrollbar {
|
|
background-color: transparent;
|
|
}
|
|
& ::-webkit-scrollbar-thumb,
|
|
& .BindingSectionWrapper::-webkit-scrollbar-thumb,
|
|
& .AppSelectWrapper::-webkit-scrollbar-thumb,
|
|
& .AppBindingSection::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 9. Phase 2 sizes and type (GP §4.14, C5b): binding px = main px */
|
|
/* x 1.87. Capsules 112 visible with a 150 hit (19 px above and */
|
|
/* below, drawn by a transparent ::after), neighbours >= 40 apart; */
|
|
/* text >= 34 px and >= Medium, title case (no uppercase chrome). */
|
|
/* Laser only: hover is the only cue (no gamepad path, as today). */
|
|
/* ---------------------------------------------------------------- */
|
|
& .InputContainer {
|
|
font-family: var(--lgs-font);
|
|
font-weight: 500;
|
|
}
|
|
& :is(.PageTitleLabel, .PageSubTitle, .AllCaps, .PageTitleButton, .OptionsButton, .AppSelectName,
|
|
.ButtonControl, .Label, .BindingLabel, .BindingListSectionHeader, .Tab) {
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
/* title bar: 150 tall, Back and Options as 112 capsules inset 24 */
|
|
& .PageTitleBar .TitleBarMainRow {
|
|
min-height: 160px;
|
|
align-items: center;
|
|
}
|
|
& .PageTitleBar :is(.PageTitleButton, .OptionsButton) {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
height: 112px;
|
|
min-width: 112px;
|
|
padding: 0 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
border-radius: 56px;
|
|
font: 600 38px/1 var(--lgs-font);
|
|
background: var(--c5b-lobe), var(--lgs-fill-thin);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
& .PageTitleBar .PageTitleLabel {
|
|
font: 700 50px/1.15 var(--lgs-font);
|
|
letter-spacing: -.01em;
|
|
}
|
|
& .PageTitleBar .PageSubTitle {
|
|
font: 500 36px/1.25 var(--lgs-font);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
/* the 150 px hit box of every 112 px capsule */
|
|
& :is(.PageTitleButton, .OptionsButton, .BindingSelectButton, .DeveloperLabel.Inline, .ToggleMirror,
|
|
.AppSelectShowMoreButton, .BindingManageButtons .ButtonControl)::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -19px 0;
|
|
border-radius: inherit;
|
|
pointer-events: auto;
|
|
}
|
|
/* app list */
|
|
& .AppSelectContainer .AppSelectName {
|
|
font: 600 45px/1.2 var(--lgs-font);
|
|
}
|
|
& .AppSelectContainer :is(.AppSelectTitle, .AppSelectSubtitle) {
|
|
font: 500 34px/1.25 var(--lgs-font);
|
|
}
|
|
& .AppSelectShowMoreButton {
|
|
box-sizing: border-box;
|
|
min-height: 112px;
|
|
padding: 0 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 56px;
|
|
font: 600 38px/1 var(--lgs-font);
|
|
background: var(--c5b-lobe), var(--lgs-fill-thin);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
/* binding list */
|
|
& .BindingListSectionHeader {
|
|
font: 700 45px/1.2 var(--lgs-font);
|
|
color: var(--lgs-text-1);
|
|
}
|
|
& .BindingName {
|
|
font: 600 45px/1.2 var(--lgs-font);
|
|
}
|
|
/* description and meta wrap in full (a clamp hides text: AUD SHRUNK;
|
|
a one-line meta ran out of its entry over the next one); both >= 41 px:
|
|
G-TYPE counts them as body text */
|
|
& .BindingDescription {
|
|
font: 500 42px/1.25 var(--lgs-font);
|
|
color: var(--lgs-text-2);
|
|
}
|
|
& :is(.BindingLastUpdated, .BindingSteamPersonaName, .RemappedInfoSpan) {
|
|
font: 500 42px/1.25 var(--lgs-font);
|
|
color: var(--lgs-text-2);
|
|
white-space: normal;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
& .SteamCommunityProfileImage {
|
|
border-radius: 50%;
|
|
background-color: rgb(255 255 255 / .10);
|
|
}
|
|
& .ControllerTypeWrapper :is(div, span) {
|
|
font-weight: 500;
|
|
}
|
|
& .ControllerTypeWrapper .Label,
|
|
& .ControllerTypeButton div {
|
|
font-size: max(34px, 1em);
|
|
}
|
|
& :is(.BindingSelectButton, .DeveloperLabel.Inline) {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
height: 112px;
|
|
min-width: 150px;
|
|
padding: 0 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 56px;
|
|
font: 600 38px/1 var(--lgs-font);
|
|
background: var(--c5b-lobe), var(--lgs-fill-thin);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
/* View and Activate: 40 apart (SteamVR floats them right) */
|
|
& .BindingSelectButton {
|
|
margin-left: 40px;
|
|
}
|
|
/* separators: 2 px white .08 (never a 1 px line) */
|
|
& :is(hr, .RemappedInfoHr, .BottomButtonHR, .BindingManageButtonsHR, .InlineSeparator) {
|
|
border: 0;
|
|
height: 2px !important;
|
|
min-height: 2px;
|
|
background: var(--lgs-separator);
|
|
}
|
|
/* view / edit */
|
|
& .Label.Tab {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-height: 104px;
|
|
padding: 0 36px;
|
|
white-space: nowrap;
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 52px;
|
|
font: 600 36px/1 var(--lgs-font);
|
|
}
|
|
/* the unbound-actions count: an orange capsule after the label (the
|
|
tab makes room for it) */
|
|
& .Label.Tab:has(.UnboundActionsCount) {
|
|
padding-right: 96px;
|
|
}
|
|
& .UnboundActionsCount {
|
|
top: 50%;
|
|
right: 24px;
|
|
translate: 0 -50%;
|
|
box-sizing: border-box;
|
|
min-width: 52px;
|
|
height: 52px;
|
|
padding: 0 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: var(--lgs-orange);
|
|
color: var(--lgs-text-on-color);
|
|
font: 700 34px/1 var(--lgs-font);
|
|
}
|
|
/* the sticky controller-image column must fit the scroller's 904 px,
|
|
or Poses / Haptics under it can never be reached: images at 600 */
|
|
& .BindingControllerImageColumns .ControllerImage {
|
|
max-height: 600px;
|
|
width: auto;
|
|
margin-top: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
& .ToggleMirror {
|
|
margin: 19px 20px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-height: 112px;
|
|
padding: 0 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 56px;
|
|
font: 600 38px/1 var(--lgs-font);
|
|
background: var(--c5b-lobe), var(--lgs-fill-thin);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
& :is(.Label.Title, .ControllerTitle) {
|
|
font-weight: 600;
|
|
}
|
|
& .Label.Title:not(.ControllerTitle) {
|
|
font-size: 46px;
|
|
line-height: 1.2;
|
|
}
|
|
& .Label.BindingLabel {
|
|
font-size: max(36px, 1em);
|
|
font-weight: 500;
|
|
}
|
|
& .Label.BindingLabel.BindingHeader {
|
|
font-weight: 600;
|
|
}
|
|
& .BindingManageButtons {
|
|
margin-bottom: 20px;
|
|
}
|
|
& .BindingManageButtons .ButtonControl {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-height: 112px;
|
|
padding: 0 30px;
|
|
margin: 0 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 56px;
|
|
font: 600 34px/1 var(--lgs-font);
|
|
background: var(--c5b-lobe), var(--lgs-fill-thin);
|
|
box-shadow: var(--c5b-raised);
|
|
}
|
|
}
|