views/style.css (view raw)
1html {
2 --bg-page: #306;
3 --bg-dark: #002;
4 --fg: #dcf;
5 --hl: #dcf;
6 --fg-subtle: #a9c;
7 --fg-limited: #a79;
8}
9@media (prefers-color-scheme: dark) {
10.noise img:not(.emu) {
11 opacity: .5;
12 transition: opacity .5s ease-in-out;
13}
14.noise img:not(.emu):hover {
15 opacity: 1;
16}
17}
18
19body {
20 background: var(--bg-page);
21 color: var(--fg);
22 font-size: 1em;
23 word-wrap: break-word;
24 font-family: sans-serif, "Noto Color Emoji";
25 line-height: 1.2;
26 overscroll-behavior-y: contain;
27}
28pre, code {
29 white-space: pre-wrap;
30}
31blockquote {
32 margin-left: 0em;
33 margin-bottom: 0em;
34 padding-left: 0.5em;
35 border-left: 1px solid var(--fg-subtle);
36}
37cite {
38 margin-left: 2em;
39}
40table {
41 display: block;
42 max-width: 100%;
43 overflow-x: auto;
44}
45a {
46 color: var(--fg);
47}
48form, input, textarea {
49 font-family: monospace, "Noto Color Emoji";
50}
51p {
52 margin-top: 1em;
53 margin-bottom: 1em;
54}
55input {
56 background: var(--bg-page);
57 color: var(--fg);
58 font-size: 1.0em;
59 line-height: 1.2em;
60 padding: 0.4em;
61 box-sizing: border-box;
62 width: 100%;
63}
64#honkform input {
65 font-size: 0.8em;
66}
67body > header {
68 margin: 1em auto;
69 font-size: 1.5em;
70}
71body > header span {
72 margin-left: 2em;
73}
74body > header p {
75 padding: 1em;
76}
77header > details {
78 background: var(--bg-page);
79 padding: 1em 1em 1em 1em;
80 position: fixed;
81 top: 0;
82 left: 0;
83 display: inline;
84 max-height: calc(100% - 1em);
85 overflow: auto;
86 opacity: 0.7;
87 overscroll-behavior: contain;
88 z-index: 2;
89}
90header > details[open] {
91 padding: 1em 1em 0em 1em;
92 background: var(--bg-dark);
93 border: 1px solid var(--hl);
94 margin-bottom: 1em;
95 opacity: 1.0;
96}
97header > details summary span {
98 display: none;
99}
100header > details[open] summary span {
101 display: inline;
102}
103header > details li {
104 margin: 1em 0em 1em 0em;
105}
106details summary {
107 cursor: pointer;
108}
109main {
110 max-width: 1200px;
111 margin: auto;
112 font-size: 1.5em;
113}
114hr {
115 border-color: var(--hl);
116}
117.info {
118 background: var(--bg-dark);
119 border: 1px solid var(--hl);
120 margin-bottom: 1em;
121 padding: 0em 1em 0em 1em;
122}
123.info div {
124 margin-top: 1em;
125 margin-bottom: 1em;
126}
127label {
128 font-size: 0.8em;
129}
130label.button, button, select {
131 font-size: 16px;
132 font-family: monospace;
133 color: var(--fg);
134 background: var(--bg-page);
135 border: 1px solid var(--hl);
136 padding: 0.5em;
137 white-space: nowrap;
138}
139.buttonarray {
140 margin-top: -2.0em;
141}
142.buttonarray button, .buttonarray > span {
143 margin-top: 2.0em;
144 display: inline-block;
145}
146button a {
147 text-decoration: none;
148}
149button {
150 cursor: pointer;
151}
152form {
153 margin-top: 1em;
154}
155textarea {
156 padding: 0.5em;
157 font-size: 1em;
158 background: var(--bg-page);
159 color: var(--fg);
160 width: 100%;
161 height: 4em;
162 margin-bottom: 0.5em;
163 box-sizing: border-box;
164 max-width: 100%;
165}
166textarea#honknoise {
167 height: 10em;
168}
169input[type="checkbox"] {
170 position: fixed;
171 top: -9999px;
172}
173input[type="checkbox"] + span:after {
174 content: "no";
175}
176input[type="checkbox"]:checked + span:after {
177 content: "yes";
178}
179input[type="checkbox"]:focus + span:after {
180 outline: 1px solid var(--fg);
181}
182input[type=file] {
183 display: none;
184}
185
186.glow {
187 box-shadow: 0px 0px 16px var(--hl);
188}
189.honk {
190 margin: auto;
191 background: var(--bg-dark);
192 border: 1px solid var(--hl);
193 border-radius: 1em;
194 margin-bottom: 1em;
195 padding-left: 1em;
196 padding-right: 1em;
197 padding-top: 0;
198 overflow: hidden;
199}
200.honk {
201 max-height: 120vh;
202 overflow-y: scroll;
203}
204
205.level1 {
206 margin-left: 0.5em;
207}
208.level1::before {
209 position: absolute;
210 content: ">";
211}
212.level2 {
213 margin-left: 1.0em;
214}
215.level2::before {
216 position: absolute;
217 content: ">>";
218}
219.level3 {
220 margin-left: 1.5em;
221}
222.level3::before {
223 position: absolute;
224 content: ">>>";
225}
226.level4 {
227 margin-left: 2.0em;
228}
229.level4::before {
230 position: absolute;
231 content: ">>>>";
232}
233
234.chat {
235 border-bottom: 0.5px solid var(--fg-subtle);
236 padding-left: 1em;
237}
238.chat p {
239 margin-top: 0.2em;
240 margin-bottom: 0.2em;
241}
242.chattarget {
243 border-bottom: 1px solid var(--fg-subtle);
244}
245.chatstamp {
246 margin-left: -1em;
247}
248
249.honk #honkform {
250 padding: 1em;
251 border: 1px solid var(--fg);
252 }
253.honk a {
254 color: var(--fg);
255 }
256.honk header {
257 white-space: nowrap;
258 overflow: hidden;
259 text-overflow: ellipsis;
260 font-size: 0.8em;
261 line-height: 1.1;
262 margin-top: 1em;
263 height: 64px;
264 }
265
266.honk header .clip a {
267 color: var(--fg-subtle);
268 }
269.honk header img {
270 float: left;
271 margin-right: 1em;
272 width: 64px;
273 height: 64px;
274 }
275.honk header p {
276 margin-top: 0px;
277 }
278.honk .actions button {
279 margin-left: 4em;
280 margin-top: 2em;
281 }
282.honk .noise {
283 line-height: 1.4;
284 }
285
286.honk .noise code .kw { font-weight: bold; }
287.honk .noise code .bi { font-weight: bold; }
288.honk .noise code .st { color: var(--fg-subtle); }
289.honk .noise code .nm { color: #ba88ff; }
290.honk .noise code .op { color: #ba88ff; }
291.honk .noise code .tp { font-weight: bold; }
292.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
293.honk .noise code .al { color: #aaffbb; }
294.honk .noise code .dl { color: #ffaabb; }
295
296.honk details.actions summary {
297 color: var(--fg-subtle);
298}
299
300#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
301#emupicker img{margin:0;}
302.emuload{background:var(--bg-page);padding:0.5em;}
303
304.subtle .noise {
305 color: var(--fg-subtle);
306}
307.subtle details.noise {
308 font-size: 0.8em;
309}
310.subtle .noise a {
311 color: var(--fg-subtle);
312}
313.limited {
314 border: 1px solid var(--fg-limited);
315 color: var(--fg-limited);
316}
317.limited .glow {
318 box-shadow: 0px 0px 16px var(--fg-limited);
319}
320.limited .noise {
321 color: var(--fg-limited);
322 }
323.limited .noise a {
324 color: var(--fg-limited);
325 }
326.limited details.actions summary {
327 color: var(--fg-limited);
328 }
329details.noise[open] summary.noise {
330 display: none;
331}
332h1, h2 {
333 font-size: 1.2em;
334}
335h3, h4 {
336 font-size: 1.1em;
337}
338
339img:not(.emu) {
340 background: var(--bg-page);
341}
342img, video {
343 max-width: 100%;
344 object-fit: scale-down;
345 width: auto;
346 height: auto;
347}
348.noise img:not(.emu) {
349 display: block;
350}
351.noise img.donk {
352 max-height: 400px;
353 max-width: 48%;
354 display: inline;
355}
356img.emu {
357 height: 2em;
358 vertical-align: middle;
359}
360.nophone {
361 position: fixed;
362 opacity: 0.7;
363 cursor: pointer;
364}
365@media screen and (max-width: 1360px) {
366 .nophone {
367 display: none;
368 }
369 .honk {
370 max-height: 85vh;
371 }
372}
373@media screen and (max-width: 740px) {
374 body {
375 font-size: 12px;
376 }
377 .honk header {
378 height: 52px;
379 }
380 .honk header img {
381 width: 48px;
382 height: 48px;
383 }
384 details summary {
385 outline: none;
386 }
387 .noise img.donk {
388 max-height: 100px;
389 display: inline;
390 }
391}
392@media print {
393 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
394 display: none;
395 }
396 html {
397 --bg-page: white;
398 --bg-dark: white;
399 --fg: black;
400 --fg-subtle: black;
401 --fg-limited: #a79;
402 }
403 .honk {
404 max-height: 100%;
405 }
406}
407
408/*
409 * CSP: style-src: self
410 */
411
412li.details {
413 list-style-type: none;
414 margin-left: -1em;
415}
416
417.left1em {
418 margin-left: 1em;
419}
420
421.hide {
422 display: none;
423}
424
425.text-left {
426 text-align: left;
427}
428.text-right {
429 text-align: right;
430}
431.text-center {
432 text-align: center;
433}
434
435.font08em {
436 font-size: 0.8em;
437}
438
439.font18em {
440 font-size: 1.8em;
441}
442
443.wsnowrap {
444 white-space: nowrap;
445}
446
447.skinny main {
448 max-width: 700px;
449}
450
451.fontmonospace {
452 font-family: monospace;
453}