Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/ext/grant.html

5.2 KiB, 1 run

created by r2519314175:875, 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<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>Daimond Hands</title>
6 <link rel="icon" type="image/svg+xml" href="daimond_mark.svg">
7 <style>
8 :root {
9 color-scheme: light dark;
10 /* The edge of anything you can click, at 3:1 against the page. */
11 --edge: color-mix(in srgb, CanvasText 45%, Canvas);
12 /* A separator, which identifies nothing and needs no floor. */
13 --rule: color-mix(in srgb, CanvasText 16%, Canvas);
14 /* Secondary text. A real colour rather than an opacity, so it can be
15 measured: opacity leaves getComputedStyle reporting the colour the
16 text is NOT drawn in. */
17 --dim: color-mix(in srgb, CanvasText 78%, Canvas);
18 --soft: color-mix(in srgb, CanvasText 6%, Canvas);
19 --blue: #2f6fed;
20 }
21 html, body { height: 100%; }
22 body {
23 display: flex;
24 flex-direction: column;
25 font: 15px/1.5 system-ui, sans-serif;
26 margin: 0;
27 background: Canvas;
28 color: CanvasText;
29 }
30
31 /* Whose window this is. A permission window that appeared while you were
32 browsing has to say who is asking before it says what for. */
33 .brand {
34 display: flex;
35 align-items: center;
36 gap: 8px;
37 flex: 0 0 auto;
38 padding: 11px 20px;
39 border-bottom: 1px solid var(--rule);
40 }
41 .mark {
42 display: grid;
43 place-items: center;
44 flex: 0 0 auto;
45 width: 22px;
46 height: 22px;
47 border-radius: 6px;
48 /* The mark's facets are pale, so it carries its own dark ground in
49 both palettes rather than disappearing into a light one. */
50 background: #17181c;
51 }
52 .mark img { display: block; width: 15px; height: 15px; }
53 .brand b { font-size: 13px; letter-spacing: .01em; }
54
55 /* Everything between the brand and the buttons scrolls, so opening the
56 detail can never push the two buttons out of the window. */
57 .sheet {
58 flex: 1 1 auto;
59 overflow-y: auto;
60 padding: 16px 20px 14px;
61 }
62 h1 { font-size: 17px; line-height: 1.35; margin: 0 0 12px; }
63 p { margin: 0 0 12px; }
64
65 /* The facts, as two compact rows rather than two labelled boxes. Stacked
66 with a box each they cost 120px of a 400px window and pushed the
67 disclosure and the weightiest sentence off the bottom -- which is the
68 failure this whole change is against. */
69 .facts {
70 display: grid;
71 grid-template-columns: max-content 1fr;
72 column-gap: 12px;
73 row-gap: 6px;
74 align-items: baseline;
75 margin: 0 0 14px;
76 }
77 .label {
78 margin: 0;
79 font-size: 12px;
80 font-weight: 600;
81 letter-spacing: .04em;
82 text-transform: uppercase;
83 color: var(--dim);
84 }
85 .val {
86 margin: 0;
87 font: 600 13px/1.45 ui-monospace, monospace;
88 padding: 3px 6px;
89 border-radius: 5px;
90 background: var(--soft);
91 word-break: break-all;
92 }
93 /* The site question's subject, where the name IS the question. */
94 .host {
95 font: 600 15px/1.4 ui-monospace, monospace;
96 padding: 8px 10px;
97 border: 1px solid var(--edge);
98 border-radius: 8px;
99 background: var(--soft);
100 margin: 0 0 12px;
101 word-break: break-all;
102 }
103 .scope { margin-top: -6px; font-size: 13px; color: var(--dim); }
104 .fine { font-size: 13px; color: var(--dim); }
105 .strong { font-weight: 600; }
106
107 /* The disclosure. Everything the short screen does not have room for is
108 here, one click and one Tab stop away -- never dropped. */
109 details {
110 margin: 14px 0 0;
111 border-top: 1px solid var(--rule);
112 }
113 summary {
114 list-style: none;
115 cursor: pointer;
116 padding: 10px 0 2px;
117 font-size: 14px;
118 font-weight: 600;
119 color: var(--dim);
120 }
121 summary::-webkit-details-marker { display: none; }
122 summary::before {
123 content: '\25B8';
124 display: inline-block;
125 width: 1em;
126 }
127 details[open] summary::before { content: '\25BE'; }
128 .more { padding-top: 8px; }
129 .more > :last-child { margin-bottom: 0; }
130
131 .row {
132 display: flex;
133 gap: 10px;
134 flex: 0 0 auto;
135 padding: 12px 20px 16px;
136 border-top: 1px solid var(--rule);
137 }
138 button {
139 flex: 1;
140 padding: 10px 14px;
141 font: inherit;
142 font-weight: 600;
143 border-radius: 8px;
144 border: 1px solid var(--edge);
145 background: Canvas;
146 color: CanvasText;
147 cursor: pointer;
148 }
149 button.allow {
150 background: var(--blue);
151 border-color: var(--blue);
152 color: #fff;
153 }
154 :focus-visible {
155 outline: 2px solid var(--blue);
156 outline-offset: 2px;
157 }
158 </style>
159</head>
160<body>
161 <div class="brand">
162 <span class="mark"><img src="daimond_mark.svg" alt="" width="15" height="15"></span>
163 <b>Daimond Hands</b>
164 </div>
165
166 <div class="sheet">
167 <h1 id="head">…</h1>
168 <p id="lead" hidden></p>
169 <div class="facts" id="facts" hidden>
170 <p class="label" id="folderlab" hidden></p>
171 <div class="val" id="folder" hidden></div>
172 <p class="label" id="hostlab" hidden></p>
173 </div>
174 <div class="host" id="host" hidden></div>
175 <p class="scope" id="scope" hidden></p>
176 <p id="body"></p>
177 <p class="strong" id="strongest" hidden></p>
178 <details id="more">
179 <summary id="more-sum" data-i18n="grant_more">What this covers, and what it does not</summary>
180 <div class="more" id="moreBody">
181 <p class="fine" id="fine"></p>
182 </div>
183 </details>
184 </div>
185
186 <div class="row">
187 <button id="deny" data-i18n="grant_deny">Not now</button>
188 <button id="allow" class="allow" data-i18n="grant_allow">Allow</button>
189 </div>
190 <script src="i18n.js"></script>
191 <script src="grant.js"></script>
192</body>
193</html>