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