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