Files

48 lines
2.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glass Shell P2 — controls: gamepad focus on a switch inside a settings row (the common case)</title>
<link rel="stylesheet" href="kit.css">
<link rel="stylesheet" href="window-nav-shared.css">
<link rel="stylesheet" href="settings.css">
<link rel="stylesheet" href="controls.css">
<link rel="stylesheet" href="controls-real.css">
<style>
.st-scroll.cr { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 92px, #000 124px, #000 calc(100% - 64px), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, transparent 92px, #000 124px, #000 calc(100% - 64px), transparent 100%); }
</style>
</head>
<body>
<div class="lgk-view" data-room="lounge">
<div data-wn="tabbar" data-right="302" data-cy="426" data-sel="steam settings"></div>
<!-- Steam's main window, /settings/system (Steam's rows; the vocabulary of controls.md) -->
<div class="lgk-overlay" style="left:320px; top:66px">
<div class="lgk-glass st-win" data-mat="window" data-dz="0" data-tier="T5 window (T1: smoky tint)">
<div data-st="sidebar" data-sel="system"></div>
<div data-st="toolbar" data-title="System"></div>
<div class="st-scroll cr">
<div data-cr="system" data-focus="switch"></div>
</div>
</div>
</div>
<div data-wn="frame" data-cx="960" data-y="806" data-dim=".72"></div>
<div data-wn="bar" data-cx="960" data-y="904"></div>
<div data-wn="pill" data-cx="960" data-y="1018"></div>
<div class="c-note" style="left:1622px; top:300px; width:270px"><b>Focus inside a row.</b> Steam focuses the switch and marks the row <span class="k">.gpfocuswithin</span>. The row is the only one with a control, so <b>the row lights</b> (white .28, a light spot in its upper third, its own arc) and the switch is <b>lifted</b>: its own arc and a soft glow on the knob. One focus, read at a glance from the D-pad.</div>
<div class="c-note" style="left:1622px; top:612px; width:270px"><b>Disabled rows</b> below keep 40 % content; they can still take focus (P-C7), shown in <span class="k">p2_controls_system-disabled</span>.</div>
</div>
<script src="controls-real.js"></script>
<script src="settings-shared.js"></script>
<script src="settings-icons.js"></script>
<script src="window-nav-shared.js"></script>
<script src="kit.js"></script>
<script src="controls-icons.js"></script>
</body>
</html>