mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-23 05:01:21 +02:00
146 lines
11 KiB
HTML
146 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 window-nav (C1c): Sort By (10 options) as a two-column menu grown up from its button, 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: 347px; top: 108px; width: 592px; }
|
|
.menu .cols2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, 72px); gap: 6px 8px; }
|
|
.menu .cols2 .lgk-row { min-width: 0; padding: 0 16px 0 14px; gap: 12px; }
|
|
.c1c .menu .cancel { margin-top: 0; } /* grid: the row gap already separates it */
|
|
.menu .cols2 .lgk-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
</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" 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"></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>
|
|
|
|
<!-- Sort By: 10 single-level options, so two columns (PLAN §1.12), column-major in Steam's DOM order. 592 px wide
|
|
(inside the 600 x 600 morph limit), clamped to the top of the 108-628 modal box: no scroll. The current sort has
|
|
a check in the leading slot, no fill. Steam's sort menu has an empty header; T2 writes the source's own label
|
|
("Sort By", Steam's legend string). Grows upward out of the white Sort button, left edges aligned. -->
|
|
<div class="lgk-glass wn-menu menu" data-id="menu" data-mat="thick" data-lens style="--dz:10" data-dz="10" data-tier="T1 slab + 2-col grid (AT-12) + T2 anchor; +10 mm non-interactive pop, 0 -> +10 on depth">
|
|
<div class="hdr" data-id="menu-header">Sort By</div>
|
|
<div class="cols2">
|
|
<div class="lgk-row" data-id="row-checked"><span class="lead check"><i data-i="check"></i></span><span class="t">Alphabetical</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Friends Playing</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">% of Achievements</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Hours Played</span></div>
|
|
<div class="lgk-row is-hover" data-id="row-hover" style="--hx:56%;--hy:50%"><span class="lead"></span><span class="t">Last Played</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Release Date</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Date Added</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Size on Disk</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Metacritic</span></div>
|
|
<div class="lgk-row"><span class="lead"></span><span class="t">Steam Review</span></div>
|
|
</div>
|
|
<span class="lgk-btn capsule cancel" data-id="cancel">Cancel</span>
|
|
</div>
|
|
|
|
<!-- laser mode: Steam's Sort button (the current sort) is the menu's source, white while open. The footer holds actions
|
|
(Sort, Filter), so it is the capsule (PLAN §1.10); A and B stay as quiet trailing members, without glyphs in laser mode -->
|
|
<div data-wn="ornament" data-legends="!sf-sort:Alphabetical|sf-filter:Filter|A:Select|B:Cancel"></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="835,580" data-from="1480,1100"></div>
|
|
|
|
<div class="wn-cap" style="left:1612px; top:150px; width:290px">Sort By: 10 options in two columns, 592 px wide. One column of 72 px rows would need 858 px and scroll.</div>
|
|
<div class="wn-cap" style="left:1612px; top:330px; width:290px">The current sort keeps only its check. Laser: the row under the pointer is lit +.08 with a light spot.<br><span class="m">Grows up out of the white Sort button; +10 mm non-interactive pop; no scrim.</span></div>
|
|
</div>
|
|
<script src="window-nav-shared.js"></script>
|
|
<script>
|
|
// laser mode: the shared builder is asked for gamepad mode so that A and B stay (PLAN §1.10); this marks the ornament as
|
|
// laser mode for the shared CSS (labels only), and the C1c recipe hides every glyph badge under .c1c.laser
|
|
document.querySelectorAll('.c1c.laser .wn-orn').forEach((o) => o.classList.add('mode-laser'));
|
|
</script>
|
|
<script src="kit.js"></script>
|
|
</body>
|
|
</html>
|