mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-27 13:01:25 +01:00
103 lines
9.1 KiB
HTML
103 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 — CC-C: Steam's Quick Access in its Phase 2 restyle (non-Steam page shown, or no T3 view)</title>
|
|
<link rel="stylesheet" href="kit.css">
|
|
<link rel="stylesheet" href="window-nav-shared.css">
|
|
<link rel="stylesheet" href="control-center.css">
|
|
<style>
|
|
/* Steam's Quick Access popup (barpopup host, 300 x 1024 pp), T1 only, at m 0.83 (CTL §13): PanelOuterNav painted as the tile,
|
|
the five tabs as a liquid capsule straddling the card's bottom edge. Steam's rows, order and focus order are untouched;
|
|
sizes come from padding and scale. Rows 64 pp (= 77 main), sliders 54 pp (= 65 main) with a 54 pp mute zone (C-D13),
|
|
switches 55 x 32 pp (scale 1.45), labels 19-20 pp, section headers 18 pp (= 22 main), nothing under 15 pp (= 18 main). */
|
|
.qam { width: 300px; }
|
|
.qam .card { position: relative; width: 300px; --r: 44px; overflow: hidden; }
|
|
.qam .card > * { position: absolute; }
|
|
.qam .tabs { position: relative; margin: -26px auto 0; width: 300px; height: 64px; --r: 32px; display: flex; align-items: center; justify-content: center; gap: 4px; z-index: 2; }
|
|
.qam .tab { --s: 52px; --is: 24px; }
|
|
.qam .tab.is-nav-selected { background: var(--lg-fill-nav); box-shadow: inset 0 1.5px 1.5px -1px rgb(255 255 255 / .45); }
|
|
.sect { font: 600 18px/1 var(--lg-font); color: var(--lg-text-2); }
|
|
.qs { left: 14px; right: 14px; height: 54px; border-radius: 27px; background: var(--lg-fill-thick); box-shadow: inset 0 2px 5px rgb(0 0 0 / .26); isolation: isolate; }
|
|
.qs > .trk { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
|
.qs.mute > .trk { left: 54px; }
|
|
.qs .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(54px + var(--v) * (100% - 54px)); border-radius: 27px;
|
|
background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / .84)); display: flex; align-items: center; color: #1b1c20; z-index: 1; }
|
|
.qs .fill > .lgk-i { --is: 22px; margin-left: 16px; }
|
|
.qs > .mz { position: absolute; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; --is: 22px; z-index: 1; }
|
|
.qs .knob { position: absolute; top: 3px; width: 48px; height: 48px; border-radius: 50%; z-index: 2; left: calc(3px + var(--v) * (100% - 54px));
|
|
background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
|
|
.qs::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: plus-lighter; z-index: 0;
|
|
background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / .16) 0, rgb(255 255 255 / 0) 75%), rgb(255 255 255 / .28); opacity: 0; }
|
|
.qs.gp::after { opacity: 1; }
|
|
.qs.gp { box-shadow: inset 0 2px 5px rgb(0 0 0 / .26), var(--cc-glow); }
|
|
.qrow { left: 14px; right: 14px; height: 64px; border-radius: 22px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; box-sizing: border-box;
|
|
font: 600 20px/1 var(--lg-font); --is: 22px; }
|
|
.qplat { left: 14px; right: 14px; border-radius: 26px; background: var(--lg-fill-regular); }
|
|
.qrow .trail { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--lg-text-2); font: 500 18px/1 var(--lg-font); --is: 18px; }
|
|
.qsw { position: relative; width: 55px; height: 32px; border-radius: 16px; background: var(--lg-green); }
|
|
.qsw::after { content: ""; position: absolute; top: 3px; left: 26px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
|
|
.frame { left: 0; top: 0; width: 1280px; height: 720px; }
|
|
/* glassd adapts to what it frosts: here the grey fill (104), pulled into the text band (L 70-90) */
|
|
.qam .lgk-glass { --lgk-adapt: .67 !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- CC-C. The dashboard shows a page that is not Steam's main window (here a desktop-window frame), so Control Center cannot be
|
|
drawn in the main window (CC-M) and CC-A is not shipped (flag ccPopup off). The status pill then opens Steam's own Quick
|
|
Access, exactly as today, in its Phase 2 restyle (T1 only), +25 mm in front of the bar (PLAN §1.7, bar popups). Its gamepad
|
|
path is Steam's own; nothing new needs proving. Also the floor if no T3 view loads. Gamepad focus on Volume (PLAN §1.4:
|
|
+ .28 on the track, the knob shown, the glow on the white fill). -->
|
|
<div class="lgk-view" data-room="lounge" data-dim>
|
|
<!-- a desktop-window frame (another app's texture, shown by SteamVR), not Steam's main window -->
|
|
<div class="lgk-overlay" style="left:320px; top:66px">
|
|
<div class="lgk-glass frame" data-mat="window" style="--r:24px">
|
|
<div style="position:absolute; left:28px; top:22px; font:600 22px/1 ui-monospace, Consolas, monospace; color:rgb(255 255 255 / .55)">~ $ htop</div>
|
|
<div style="position:absolute; left:28px; top:62px; right:28px; bottom:28px; border-radius:12px; background:rgb(10 12 16 / .55)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lgk-pop" style="left:0; top:904px; width:1600px; display:flex; justify-content:center; --pop-scale:1.2">
|
|
<div class="bar2" id="barF" data-bar='{"sel":1,"pill":{"state":"open","batt":{"mode":"num","v":82},"badge":3}}'></div>
|
|
</div>
|
|
<div class="lgk-pop qam" id="qa" style="--pop-scale:1.2" data-dz="25">
|
|
<div class="lgk-glass card" data-mat="panel" data-lens style="height:560px; --dz:25">
|
|
<div class="p-title2" style="left:22px; top:22px">Quick Settings</div>
|
|
<div class="sect" style="left:22px; top:70px">Brightness</div>
|
|
<div class="qs" style="top:94px; --v:.70"><span class="trk"><span class="fill"><i data-i="sun"></i></span></span></div>
|
|
<div class="qs" style="top:158px; --v:.46"><span class="trk"><span class="fill"><i data-i="mountain"></i></span></span></div>
|
|
<div class="sect" style="left:22px; top:232px">Audio</div>
|
|
<div class="qs mute gp" style="top:256px; --v:.55"><span class="mz"><i data-i="speaker"></i></span><span class="trk"><span class="fill"></span><span class="knob"></span></span></div>
|
|
<div class="qs mute" style="top:320px; --v:.80"><span class="mz"><i data-i="mic"></i></span><span class="trk"><span class="fill"></span></span></div>
|
|
<div class="sect" style="left:22px; top:394px">Other</div>
|
|
<div class="qplat" style="top:418px; height:128px"></div>
|
|
<div class="qrow" style="top:418px"><i data-i="wifi"></i>Wi-Fi<span class="trail"><span class="qsw"></span></span></div>
|
|
<div class="qrow" style="top:482px">HomeNet<span class="trail">Connected<i data-i="chevron-right"></i></span></div>
|
|
<div style="left:0; right:0; bottom:0; height:70px; background:linear-gradient(180deg, transparent, rgb(30 30 34 / .55)); border-radius:0 0 44px 44px"></div>
|
|
</div>
|
|
<div class="lgk-glass tabs" data-mat="liquid" data-lens style="--dz:25">
|
|
<span class="lgk-btn circle plain tab"><i data-i="bell"></i></span>
|
|
<span class="lgk-btn circle plain tab is-nav-selected"><i data-i="sliders"></i></span>
|
|
<span class="lgk-btn circle plain tab"><i data-i="bolt"></i></span>
|
|
<span class="lgk-btn circle plain tab"><i data-i="battery"></i></span>
|
|
<span class="lgk-btn circle plain tab"><i data-i="help"></i></span>
|
|
</div>
|
|
</div>
|
|
<div class="lab plate" style="left:28px; top:250px; width:360px">CC-C: Steam's Quick Access, restyled<small>Shown when the dashboard is on a page other than Steam's main window (a desktop window, an overlay app, SteamVR's Now Playing or Settings) and CC-A is not shipped. Same nodes, rows, order and focus order as Steam; rows 64 pp, capsule sliders 54 pp with the mute zone apart, switches at scale 1.45, five tabs as a capsule over the bottom edge.</small></div>
|
|
<div class="lab plate" style="left:1532px; top:520px; width:360px">Honest material<small>In native mode the popup's panel glass frosts glassd's room map, in which the window is masked out; where nothing was captured behind the window it is a flat grey frost, as here. CSS-only: a tint (.78) with edges.</small></div>
|
|
<div class="lab plate" style="left:1532px; top:250px; width:360px">Why not Control Center here<small>CC-M draws in Steam's main window, which is not displayed on this page. Switching the dashboard to the Steam page just to show Control Center would hide the window the user is looking at (CC Q1, kept as the safe default).</small></div>
|
|
</div>
|
|
<script src="control-center-build.js"></script>
|
|
<script>
|
|
(() => { const a = document.querySelector('#barF [data-id="pill"]').getBoundingClientRect(), p = document.getElementById('qa');
|
|
p.style.left = (a.left + a.width / 2 - 150 * 1.2) + 'px'; p.style.top = (a.top - (560 + 38) * 1.2 - 18) + 'px'; p.style.zIndex = 7;
|
|
/* honest native look: glassd frosts its room map with Steam's window masked out (flat grey where nothing was captured) */
|
|
p.querySelectorAll('.lgk-glass').forEach((g) => { const r = g.getBoundingClientRect(), m = document.createElement('div');
|
|
m.className = 'roommap'; Object.assign(m.style, { left: r.left + 'px', top: r.top + 'px', width: r.width + 'px', height: r.height + 'px',
|
|
borderRadius: (parseFloat(getComputedStyle(g).borderTopLeftRadius) * 1.2) + 'px', zIndex: 6 });
|
|
document.querySelector('.lgk-view').append(m); }); })();
|
|
</script>
|
|
<script src="kit.js"></script>
|
|
<script src="control-center-icons.js"></script>
|
|
</body>
|
|
</html>
|