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