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