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