mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-21 09:01:11 +02:00
71 lines
5.2 KiB
HTML
71 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 — controls: an in-window tooltip (laser hover on an icon-only circle, 0.8 s)</title>
|
|
<link rel="stylesheet" href="kit.css">
|
|
<link rel="stylesheet" href="window-nav-shared.css">
|
|
<link rel="stylesheet" href="controls.css">
|
|
<style>
|
|
.grid { position: absolute; left: 0; top: 212px; right: 0; bottom: 0; }
|
|
.grid .lgk-poster { width: 220px; height: 330px; }
|
|
.tabs { position: absolute; left: 40px; top: 120px; }
|
|
.chip-update { position: absolute; left: 14px; top: 14px; height: 32px; padding: 0 14px; border-radius: 16px; display: grid; place-items: center;
|
|
background: var(--lg-blue); font: 600 18px/1 var(--lg-font); }
|
|
/* the More circle (the shell's helper, PLAN §1.11): 60 px, black .38 + 10 px blur, inside its card at the top right, inset 10 */
|
|
.more { position: absolute; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; z-index: 6;
|
|
background: rgb(0 0 0 / .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; --is: 26px;
|
|
box-shadow: 0 4px 12px rgb(0 0 0 / .30); isolation: isolate; }
|
|
.more::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; pointer-events: none;
|
|
background: radial-gradient(circle at 58% 62%, rgb(255 255 255 / .12) 0, rgb(255 255 255 / 0) 75%), rgb(255 255 255 / .08); }
|
|
/* the in-window tooltip (P3's layer, one per window): a thick-glass capsule 48 px, 20 px Semibold, 12 px below its owner */
|
|
.tip { position: absolute; z-index: 7; translate: -50% 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="lgk-view" data-room="lounge" data-lgs-vr-mode="laser">
|
|
|
|
<!-- tab-bar ornament (the shell's): Library is the current route -->
|
|
<div data-wn="tabbar" data-right="302" data-cy="426" data-sel="library" data-pitch="58"></div>
|
|
|
|
<div class="lgk-overlay" style="left:320px; top:66px">
|
|
<div class="lgk-glass wn-win" data-mat="window" data-dz="0" data-tier="T5 window cover; T1 smoky tint">
|
|
<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 is-hover" data-art="poster:1:Hollow Peaks" style="left:286px; top:0" data-dz="15" data-tier="focused card: +15 mm non-interactive crop"></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"><span class="chip-update">Update</span></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 class="wn-edge-top" style="height:118px; opacity:.6"></div>
|
|
<div data-wn="toolbar" data-back="root" data-title="Library" data-search="idle"></div>
|
|
<div class="c-seg2 compact tabs"><span class="on"><b>All Games</b></span><span><b>Great on Frame</b></span><span><b>Ready to Play</b></span><span><b>Collections</b></span><span><b>Non-Steam</b></span></div>
|
|
</div>
|
|
|
|
<!-- the More circle on the hovered poster (an icon-only circle), hovered by the laser for 0.8 s: its tooltip names it -->
|
|
<div class="more" id="more" style="left:426px; top:222px" data-id="more"><i data-i="more"></i></div>
|
|
<div class="lgk-glass c-tip tip" data-mat="thick" data-dz="0" style="left:456px; top:294px; --dz:3" data-id="tip"
|
|
data-tier="P3 tooltip layer: thick glass, CSS shadow only (no pop)"><span>Options</span></div>
|
|
|
|
<!-- bottom ornament, laser mode (the shell's contract): glyph badges are not drawn in laser mode -->
|
|
<div data-wn="ornament" data-mode="laser" data-legends="sf-sort:Alphabetical|sf-filter:Filter|menu:Options@Hollow Peaks|A:Select|B:Back"></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="792,321" data-from="1690,1100"></div>
|
|
|
|
<div class="c-note" style="left:1622px; top:150px; width:270px"><b>Laser hover, 0.8 s:</b> the icon-only circle names itself in a thick-glass capsule 48 px tall, 20 px Semibold, 12 px below it. The text is the circle's <span class="k">aria-label</span>, Steam's own string. It leaves 0.2 s after the laser does.</div>
|
|
<div class="c-note" style="left:1622px; top:420px; width:270px"><b>Gamepad focus</b> on the same circle shows the same tooltip after the same 0.8 s. Bar tooltips are Steam's own popup, restyled by the control-center concept and delayed to 0.8 s. Controls that show their text never get one.</div>
|
|
</div>
|
|
<script src="window-nav-shared.js"></script>
|
|
<script src="kit.js"></script>
|
|
<script src="controls-icons.js"></script>
|
|
</body>
|
|
</html>
|