mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-25 19:00:21 +01:00
157 lines
12 KiB
HTML
157 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 window-nav (C1c): a sheet (the library Filters dialog) over the dimmed window, gamepad mode</title>
|
|
<link rel="stylesheet" href="kit.css">
|
|
<link rel="stylesheet" href="window-nav-shared.css">
|
|
<style id="c1c-recipe">
|
|
/* C1c presentation recipe, conformed to PLAN §1.4, §1.7, §1.8, §1.10, §1.12 (M0, 2026-10-07).
|
|
The same block sits in every C1c mockup (window-nav-menu, -sort, -power, -alert, -sheet), so they
|
|
stay right whatever the shared chrome does; the shared CSS is asked to adopt it (REQ C1c->C1a). */
|
|
.c1c { --c1c-dark: #0d0e12; --c1c-red: rgb(255 66 69 / .92); }
|
|
/* slab and rows (WN §5.1; E-MENU) */
|
|
.c1c .wn-menu { padding: 8px; gap: 6px; --r: 32px; }
|
|
.c1c .wn-menu .lgk-row { height: 72px; border-radius: 24px; padding: 0 22px 0 16px; gap: 16px; font: 500 24px/1.2 var(--lg-font); }
|
|
.c1c .wn-menu.compact { gap: 4px; }
|
|
.c1c .wn-menu.compact .lgk-row { height: 60px; border-radius: 22px; } /* 60 visible on a 64 px pitch */
|
|
.c1c .wn-menu .lgk-row .lead { width: 28px; --is: 26px; color: var(--lg-text-1); } /* symbol (actions) or check (values) */
|
|
.c1c .wn-menu .lgk-row .lead.check .lgk-i { --is: 24px; stroke-width: 3; }
|
|
.c1c .wn-menu .sep { height: 6px; flex: none; } /* Steam's separator = space, no line */
|
|
.c1c .wn-menu .hdr { box-sizing: border-box; height: 40px; padding: 4px 20px 0; font: 700 22px/1 var(--lg-font); color: var(--lg-text-2); }
|
|
.c1c .wn-menu .ihdr { box-sizing: border-box; height: 26px; padding: 0 0 4px 18px; font: 600 19px/1 var(--lg-font); color: var(--lg-text-3); }
|
|
/* Steam's Cancel item: a 56 px quiet capsule (PLAN §1.12, HA-11) */
|
|
.c1c .wn-menu .cancel { align-self: center; flex: none; --s: 56px; padding: 0 44px; margin-top: 6px; background: rgb(255 255 255 / .08);
|
|
color: var(--lg-text-2); font: 500 22px/1 var(--lg-font); }
|
|
/* states (PLAN §1.4): laser hover = +.08 and a .12 spot at the pointer, no arc; gamepad focus = +.28 uniform,
|
|
a static .16 spot in the upper third, the control's own arc x1.5 */
|
|
.c1c :is(.lgk-row, .lgk-btn).is-hover::after { opacity: 1; --lift: .08; --spot: .12; }
|
|
.c1c :is(.lgk-row, .lgk-btn).is-focus::after { opacity: 1; --lift: .28; --spot: .16; --hx: 50%; --hy: 16%; }
|
|
.c1c :is(.lgk-row, .lgk-btn).is-focus::before {
|
|
background: conic-gradient(from var(--lg-light), rgb(255 255 255 / .9) 0deg, rgb(255 255 255 / .3) 40deg, transparent 75deg, transparent 145deg,
|
|
rgb(255 255 255 / .3) 180deg, transparent 215deg, transparent 285deg, rgb(255 255 255 / .3) 320deg, rgb(255 255 255 / .9) 360deg); }
|
|
/* tones (WN §5.1.2 + CC §7: text on a coloured fill is dark; white only on blue) */
|
|
.c1c .wn-menu .lgk-row.primary.install { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 60%), var(--lg-tint-primary); color: #fff; }
|
|
.c1c .wn-menu .lgk-row.primary.play { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 60%), var(--lg-tint-play); color: var(--c1c-dark); font-weight: 600; }
|
|
.c1c .wn-menu .lgk-row.primary.play .lead { color: var(--c1c-dark); }
|
|
.c1c .wn-menu .lgk-row.primary.install .lead { color: #fff; }
|
|
.c1c .wn-menu .lgk-row.danger { color: var(--lg-red); font-weight: 600; } /* <= 2 destructive rows: red label */
|
|
.c1c .wn-menu .lgk-row:is(.danger, .danger-glyph) .lead { color: var(--lg-red); } /* > 2 (Power): red glyph, white label */
|
|
.c1c .wn-menu .lgk-row:is(.danger, .danger-glyph).is-focus { background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 60%), var(--c1c-red);
|
|
color: var(--c1c-dark); font-weight: 600; }
|
|
.c1c .wn-menu .lgk-row:is(.danger, .danger-glyph).is-focus .lead { color: var(--c1c-dark); }
|
|
.c1c .wn-menu .lgk-row:is(.danger, .danger-glyph, .primary).is-focus::after { --lift: .04; --spot: .10; }
|
|
/* focus on a white or coloured fill: a blurred outer glow, never a ring (P-16). PLAN §1.4 names 0 0 18px 2px white .30,
|
|
which measures a band of +11.7 L in this alert (P-16 asks >= +20); 0 0 24px 6px white .34 measures +23.5
|
|
(C1c log, REQ C1c->P4 for the shared token) */
|
|
.c1c .is-focus:is(.primary, .danger, .danger-glyph, .is-selected, .red) { box-shadow: 0 0 24px 6px rgb(255 255 255 / .34); }
|
|
/* source card while its menu is open (PLAN §1.7): 0 mm with a CSS glow, unless it was the gamepad-focused card (+15) */
|
|
.c1c .src-glow { box-shadow: 0 10px 28px rgb(0 0 0 / .42), 0 0 26px 3px rgb(255 255 255 / .20) !important; }
|
|
/* alerts and sheets (WN §5.3, §5.4; PLAN §1.12) */
|
|
.c1c .wn-alert { width: 640px; padding: 36px 36px 28px; --r: 44px; }
|
|
.c1c .wn-alert .t { font: 700 28px/1.25 var(--lg-font); letter-spacing: -.01em; }
|
|
.c1c .wn-alert .b { margin-top: 12px; font: 500 22px/1.36 var(--lg-font); color: var(--lg-text-2); }
|
|
.c1c .wn-alert .btns { display: flex; gap: 16px; margin-top: 30px; }
|
|
.c1c .wn-alert .btns .lgk-btn { flex: 1; --s: 60px; }
|
|
.c1c .lgk-btn.red { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 55%), var(--c1c-red); color: var(--c1c-dark); }
|
|
.c1c .wn-sheet { --r: 44px; }
|
|
/* the footer's quiet legend and the More circle are C1a's (window-nav-shared.css: .wn-orn.quiet, .wn-more) */
|
|
/* laser mode: no controller glyph badges anywhere (PLAN §1.4, VP P-26) */
|
|
.c1c.laser .lgk-glyph { display: none !important; }
|
|
</style>
|
|
<style>
|
|
.tabs { position: absolute; left: 40px; top: 120px; }
|
|
.tabs .n { font-weight: 500; color: var(--lg-text-2); margin-left: 2px; }
|
|
.tabs .is-selected .n { color: rgb(13 14 18 / .55); }
|
|
.grid { position: absolute; left: 0; top: 212px; right: 0; bottom: 0; }
|
|
.grid .lgk-poster { width: 220px; height: 330px; }
|
|
.sheet { left: 160px; top: 108px; width: 960px; height: 472px; }
|
|
.sheet .x { position: absolute !important; left: 24px; top: 24px; }
|
|
.sheet .ttl { position: absolute; left: 0; right: 0; top: 36px; text-align: center; }
|
|
.sheet .rst { position: absolute !important; right: 24px; top: 24px; }
|
|
.sheet .body { position: absolute; left: 40px; right: 40px; top: 112px; bottom: 0; overflow: hidden; }
|
|
.sheet .h { margin: 0 0 12px 4px; }
|
|
.sheet .chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
|
|
.sheet .chips .lgk-btn { font-weight: 500; font-size: 22px; padding: 0 22px; }
|
|
.sheet .chips .lgk-btn .lgk-i { --is: 22px; }
|
|
.sheet .foot { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; display: flex; align-items: center; gap: 18px; padding: 0 24px 0 40px; border-radius: 0 0 44px 44px;
|
|
background: linear-gradient(180deg, transparent, rgb(0 0 0 / .18) 40%); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="lgk-view c1c pad" data-room="lounge">
|
|
|
|
<div data-wn="tabbar" data-right="302" data-cy="426" data-sel="library" data-dim=".5" data-pitch="58" data-badge></div>
|
|
|
|
<div class="lgk-overlay" style="left:320px; top:66px">
|
|
<div class="lgk-glass wn-win" data-mat="window" data-dz="0" data-tier="scrim: Steam's overlay at black .35, clipped to the glass (PLAN §1.8); recede variant S7 off">
|
|
<div class="grid wn-fade-bottom">
|
|
<div class="lgk-poster lgk-art" data-art="poster:0:Starfall Drift" style="left:42px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:1:Hollow Peaks" style="left:286px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:2:Neon Orchard" style="left:530px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:3:Tidebreaker" style="left:774px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:4:Lumen Vale" style="left:1018px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:8:Echo Station" style="left:42px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:6:Ironwood" style="left:286px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:7:Paper Comets" style="left:530px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:5:Glasswing" style="left:774px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:9:Deep Field" style="left:1018px; top:354px"></div>
|
|
</div>
|
|
<div data-wn="toolbar" data-back="root" data-title="Library" data-search="idle" data-dim></div>
|
|
<div class="lgk-seg tabs">
|
|
<span class="is-selected">All Games <span class="n t-num">350</span></span>
|
|
<span>Great on Frame <span class="n t-num">21</span></span>
|
|
<span>Ready to Play <span class="n t-num">68</span></span>
|
|
<span>Collections <span class="n t-num">9</span></span>
|
|
<span>Non-Steam <span class="n t-num">54</span></span>
|
|
</div>
|
|
<div class="lgk-scrim" data-id="scrim" style="z-index:3"></div>
|
|
</div>
|
|
|
|
<!-- a sheet (WN §5.4, PLAN §1.12): a Steam dialog wider than 640 or taller than 288 px. <= 960 px wide, radius 44, thick
|
|
glass, centred on the glass (VP P-35: centre y 344 against the glass's 328). The close circle (T2 node, 60 px at
|
|
24, 24) dispatches Steam's own click-outside cancel; B is the gamepad path. Title 2 centred; the sheet's own
|
|
actions are capsules at the 24 px inset. +10 mm non-interactive pop. Content: the library concept (C2c). -->
|
|
<div class="lgk-glass wn-sheet sheet" data-id="sheet" data-mat="thick" data-lens style="--dz:10" data-dz="10" data-tier="T1 card + T2 close circle; +10 mm non-interactive pop, 0 -> +10 on depth (+30 -> +50 only in the wearer profile); T5 thick slab">
|
|
<span class="lgk-btn circle x" data-id="close"><i data-i="xmark" class="bold"></i></span>
|
|
<div class="ttl t-title2" data-id="sheet-title">Filters</div>
|
|
<span class="lgk-btn capsule rst" data-id="sheet-action">Reset</span>
|
|
<div class="body wn-fade-bottom" style="bottom:70px">
|
|
<div class="h t-headline">Steam Frame Compatibility</div>
|
|
<div class="lgk-seg" style="margin-bottom:26px"><span>All</span><span class="is-selected">Verified</span><span>Playable</span><span>Unknown</span></div>
|
|
<div class="h t-headline">Ready to Play</div>
|
|
<div class="chips">
|
|
<span class="lgk-btn capsule is-selected"><i data-i="check" class="bold"></i>Installed</span>
|
|
<span class="lgk-btn capsule is-focus" data-id="focus">VR Only</span>
|
|
<span class="lgk-btn capsule">Played</span>
|
|
<span class="lgk-btn capsule">Unplayed</span>
|
|
<span class="lgk-btn capsule">Streamable</span>
|
|
</div>
|
|
<div class="h t-headline">Features</div>
|
|
<div class="chips">
|
|
<span class="lgk-btn capsule">Achievements</span>
|
|
<span class="lgk-btn capsule is-selected"><i data-i="check" class="bold"></i>Steam Cloud</span>
|
|
<span class="lgk-btn capsule">Controller Support</span>
|
|
<span class="lgk-btn capsule">Co-op</span>
|
|
</div>
|
|
</div>
|
|
<div class="foot">
|
|
<span class="t-callout v2 t-num" style="flex:1">Showing 21 of 350 games</span>
|
|
<span class="lgk-btn capsule">Save as Dynamic Collection</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- the footer holds an action (Y Reset), so it is the capsule; A and B are quiet trailing members (PLAN §1.10) -->
|
|
<div data-wn="ornament" data-legends="Y:Reset|A:Select|B:Done"></div>
|
|
</div>
|
|
|
|
<!-- gamepad mode, no laser: no window-bar row -->
|
|
<div data-wn="bar" data-cx="960" data-y="904"></div>
|
|
|
|
<div class="wn-cap" style="left:1612px; top:240px; width:290px">Sheet 960 px (75 % of the glass), radius 44, centred on the glass, +10 mm non-interactive pop (+30 → +50 only in the wearer profile).<br><span class="m">Close circle (laser) = Steam's click-outside cancel; B for the gamepad. Scrim .35 on the glass; toolbar contents at .45. Content: library concept.</span></div>
|
|
</div>
|
|
<script src="window-nav-shared.js"></script>
|
|
<script src="kit.js"></script>
|
|
</body>
|
|
</html>
|