Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/passcode.css

5.3 KiB, 1 run

created by r2519314175:1117, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* passcode.css — the beta passcode dialog, and its block in the Credits drawer.
2 *
3 * A real stylesheet rather than styles injected from JavaScript, because both
4 * surfaces here are drawn into markup that is already in the page: the block
5 * lives in `#credits-beta` in index.html, and the dialog is raised over a page
6 * whose stylesheets have long since loaded. Nothing here is theme-specific --
7 * every colour is a token from variables.css, so the four skins carry it
8 * without a second copy.
9 */
10
11/* ── The dialog ───────────────────────────────────────────── */
12
13.beta-scrim {
14 position: fixed;
15 inset: 0;
16 background: rgba(0, 0, 0, .55);
17 display: flex;
18 align-items: center;
19 justify-content: center;
20 z-index: 9999;
21 padding: 16px;
22}
23
24.beta-box {
25 background: var(--bg-secondary);
26 color: var(--text-primary);
27 border: 1px solid var(--border);
28 border-radius: 12px;
29 max-width: 420px;
30 width: 100%;
31 padding: 20px;
32 box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
33 /* The refusal is three sentences and the confirmation is two; on a phone in
34 landscape that is taller than the viewport, and a card that cannot scroll
35 puts its buttons off the bottom of the screen. */
36 max-height: calc(100vh - 32px);
37 overflow-y: auto;
38 box-sizing: border-box;
39}
40
41.beta-box h3 {
42 margin: 0 0 8px;
43 font-size: var(--fs-xl);
44}
45
46.beta-box p {
47 margin: 0 0 12px;
48 font-size: var(--fs-base);
49 line-height: 1.45;
50 opacity: .85;
51}
52
53.beta-label {
54 display: block;
55 font-size: var(--fs-sm);
56 opacity: .85;
57 margin: 0 0 4px;
58}
59
60/* Monospaced and spaced out, because it is copied character by character off a
61 message and the one thing that must not happen is a misread l for a 1. */
62.beta-input {
63 width: 100%;
64 box-sizing: border-box;
65 font-family: ui-monospace, monospace;
66 font-size: var(--fs-3xl);
67 letter-spacing: .1em;
68 text-align: center;
69 padding: 10px;
70 border-radius: 8px;
71 border: 1px solid var(--border);
72 background: var(--bg-primary);
73 color: inherit;
74 margin: 0 0 12px;
75}
76
77/* The hint inside the empty box is the only instruction for what to type, so it
78 is held to the text floor: a named token at full strength, not the browser's
79 own washed-out default, which measured 3.92:1. */
80.beta-input::placeholder {
81 color: var(--text-muted);
82 opacity: 1;
83}
84
85.beta-err {
86 color: var(--danger);
87 font-size: var(--fs-sm);
88 line-height: 1.4;
89 min-height: 1.1em;
90 margin: 0 0 8px;
91}
92
93.beta-note {
94 font-size: var(--fs-xs);
95 opacity: .7;
96 margin: 8px 0 0;
97}
98
99/* "No passcode? Apply." — the foot of the refusal card.
100 Its own class rather than `.beta-note`, because that one dims with `opacity`
101 and opacity applies to the whole subtree: a link inside it cannot come back
102 to full strength, and a way out of a dead end must not be the faintest thing
103 on the card. Dimmed here on the TEXT colour instead, so the link is exempt. */
104/* `.beta-box p` (0,1,1) outranks a bare `.beta-ask` (0,1,0), so the plain class
105 lost its own font size and inherited the card's `opacity: .85` -- dimming the
106 sentence a second time on top of `--text-muted`, and dimming the link with it.
107 Answered by matching the same element more specifically rather than with
108 `!important`: this rule is the one that should win, so it is written to. */
109.beta-box p.beta-ask {
110 font-size: var(--fs-xs);
111 line-height: 1.45;
112 color: var(--text-muted);
113 opacity: 1;
114 margin: 12px 0 0;
115}
116/* TWO ACCENT TOKENS, AND THEY ARE NOT INTERCHANGEABLE. `--accent` is the accent
117 as a FILL or an EDGE -- a button's ground, a border, a focus ring -- and WCAG
118 SC 1.4.11 holds it to 3.0 only. `--accent-text` is the accent as INK, held to
119 4.5, and every palette sets it a rung further from its own surfaces for that
120 reason. This is a sentence, so it takes the ink token; painted with `--accent`
121 it measured 4.14:1 and failed. Do not "tidy" the two back into one. */
122.beta-apply {
123 color: var(--accent-text);
124 text-decoration: underline;
125 /* A link in a card answered on a phone: it needs a line of its own to be
126 pressed at, which `inline-block` plus the padding gives it without
127 turning the sentence into two paragraphs. */
128 display: inline-block;
129 padding: 4px 0;
130}
131.beta-apply:focus-visible {
132 outline: 2px solid var(--accent);
133 outline-offset: 2px;
134 border-radius: 4px;
135}
136
137.beta-row {
138 display: flex;
139 gap: 8px;
140 justify-content: flex-end;
141 flex-wrap: wrap;
142}
143
144.beta-btn {
145 padding: 8px 14px;
146 border-radius: 8px;
147 border: 1px solid var(--border);
148 background: var(--accent);
149 color: #fff;
150 cursor: pointer;
151 font-size: var(--fs-base);
152 /* The thumb's floor. This card is answered on a phone as often as not. */
153 min-height: 44px;
154}
155
156.beta-btn.ghost {
157 background: transparent;
158 color: inherit;
159}
160
161.beta-btn[disabled] {
162 opacity: .6;
163 cursor: default;
164}
165
166/* ── The block in the Credits drawer ──────────────────────── */
167
168.beta-block:empty {
169 display: none; /* no rule, no gap, on the great majority of devices */
170}
171
172.beta-block {
173 border: 1px solid var(--border);
174 border-radius: 10px;
175 padding: 12px;
176 margin: 0 0 12px;
177}
178
179.beta-head {
180 font-size: var(--fs-sm);
181 font-weight: 600;
182 margin: 0 0 6px;
183}
184
185.beta-lead {
186 font-size: var(--fs-sm);
187 line-height: 1.45;
188 opacity: .85;
189 margin: 0 0 10px;
190}
191
192.beta-block .beta-btn {
193 width: 100%;
194}