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