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