mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-26 12:01:40 +01:00
137 lines
11 KiB
HTML
137 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 window-nav (C1c): a 6-action tile menu grown from its card, compact layout, laser 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; }
|
|
.menu { left: 522px; top: 124px; width: 400px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="lgk-view c1c laser" data-room="lounge">
|
|
|
|
<div data-wn="tabbar" data-right="302" data-cy="426" data-sel="library" 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">
|
|
<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 src-glow" data-id="source" data-art="poster:1:Hollow Peaks" style="left:286px; top:0" data-dz="0" data-tier="source card: 0 mm + CSS glow while its menu is open (laser: hover ended)"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:2:Neon Orchard" style="left:530px; top:0; opacity:.9"></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"></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>
|
|
|
|
<!-- the card's More circle (C1a helper, PLAN §1.11): 60 px inside the card, top right inset 10; white while its menu is open -->
|
|
<div class="wn-more is-open" data-id="more" style="left:436px; top:222px" data-tier="More circle (C1a helper): source of the open menu, white"><i data-i="more"></i></div>
|
|
|
|
<!-- Steam's tile menu for an uninstalled game: Install, Add to Favorites, Add to >, Manage >, Developer > (developer
|
|
mode), Properties... = 6 actions, so the compact layout (PLAN §1.12): 60 px rows on a contiguous 64 px pitch, the
|
|
game's name inline at the top-left. Steam's separators become 6 px of space. Anchored 16 px right of its card
|
|
(T2 translate), clamped into the 108-628 modal box; morph-open from the More circle. No scrim. -->
|
|
<div class="lgk-glass wn-menu compact menu" data-id="menu" data-mat="thick" data-lens style="--dz:10" data-dz="10" data-tier="T1 slab + T2 anchor; +10 mm non-interactive pop, 0 -> +10 on depth with the morph; T5 thick slab">
|
|
<div class="ihdr" data-id="menu-label">Hollow Peaks</div>
|
|
<div class="lgk-row primary install" data-id="row-install"><span class="lead"><i data-i="download"></i></span>Install</div>
|
|
<div class="lgk-row"><span class="lead"><i data-i="star"></i></span>Add to Favorites</div>
|
|
<div class="lgk-row is-hover" data-id="row-hover" style="--hx:60%;--hy:53%"><span class="lead"><i data-i="plus"></i></span>Add to<span class="trail"><i data-i="chevron-right"></i></span></div>
|
|
<div class="lgk-row"><span class="lead"><i data-i="gear"></i></span>Manage<span class="trail"><i data-i="chevron-right"></i></span></div>
|
|
<div class="lgk-row"><span class="lead"><i data-i="terminal"></i></span>Developer<span class="trail"><i data-i="chevron-right"></i></span></div>
|
|
<div class="sep"></div>
|
|
<div class="lgk-row"><span class="lead"><i data-i="pencil"></i></span>Properties...</div>
|
|
<span class="lgk-btn capsule cancel" data-id="cancel">Cancel</span>
|
|
</div>
|
|
|
|
<!-- footer while the menu is open: only A and B, so a quiet legend in the margin (PLAN §1.10); laser mode: no glyphs -->
|
|
<div class="wn-orn quiet mode-laser" data-id="legend" data-dz="0" data-tier="quiet legend (C1a contract): A/B only, no capsule">
|
|
<span class="wn-leg nav">Select</span>
|
|
<span class="wn-leg nav">Cancel</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-wn="winbar" data-cx="960" data-y="806" data-dim=".85"></div>
|
|
<div data-wn="bar" data-cx="960" data-y="904"></div>
|
|
<div data-wn="laser" data-to="1080,392" data-from="1640,1100"></div>
|
|
|
|
<div class="wn-cap" style="left:1612px; top:150px; width:290px">6 actions (developer mode adds Developer ›): compact, 60 px rows on a 64 px pitch, the name inline. Fits the 520 px box with no scroll.</div>
|
|
<div class="wn-cap" style="left:1612px; top:330px; width:290px">Laser: the row under the pointer is lit +.08 with a light spot; Steam's focus does not follow the laser. Cancel stays as a 56 px quiet capsule.<br><span class="m">+10 mm non-interactive pop; no scrim. The card stays at 0 with a soft glow; its More circle is white.</span></div>
|
|
</div>
|
|
<script src="window-nav-shared.js"></script>
|
|
<script src="kit.js"></script>
|
|
</body>
|
|
</html>
|