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