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.chat {
262 border-bottom: 0.5px solid var(--fg-subtle);
263 padding-left: 1em;
264}
265.chat p {
266 margin-top: 0.2em;
267 margin-bottom: 0.2em;
268}
269.chattarget {
270 border-bottom: 1px solid var(--fg-subtle);
271}
272.chatstamp {
273 margin-left: -1em;
274}
275
276.honk #honkform {
277 padding: 1em;
278 border: 1px solid var(--fg);
279}
280.honk a {
281 color: var(--fg);
282}
283.honk header {
284 white-space: nowrap;
285 overflow: hidden;
286 text-overflow: ellipsis;
287 font-size: 0.8em;
288 line-height: 1.1;
289 margin-top: 1em;
290}
291
292.honk header .clip a {
293 color: var(--fg-subtle);
294}
295
296.clip {
297 text-transform: lowercase;
298}
299
300.honk header img {
301 float: left;
302 margin-right: 1em;
303 border-radius: 10%;
304 width: 64px;
305 height: 64px;
306}
307.honk header p {
308 margin-top: 0px;
309}
310
311.honk .noise {
312 line-height: 1.4;
313}
314
315.honk .noise code .kw { font-weight: bold; }
316.honk .noise code .bi { font-weight: bold; }
317.honk .noise code .st { color: var(--fg-subtle); }
318.honk .noise code .nm { color: #ba88ff; }
319.honk .noise code .op { color: #ba88ff; }
320.honk .noise code .tp { font-weight: bold; }
321.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
322.honk .noise code .al { color: #aaffbb; }
323.honk .noise code .dl { color: #ffaabb; }
324
325summary::marker {
326 content: '\2192';
327}
328
329.honk details.actions summary {
330 color: var(--fg-subtle);
331}
332
333#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
334#emupicker img{margin:0;}
335.emuload{background:var(--bg-page);padding:0.5em;}
336
337.subtle .noise {
338 color: var(--fg-subtle);
339 font-size: 0.8em;
340}
341.subtle .noise a {
342 color: var(--fg-subtle);
343}
344.limited {
345 background: var(--bg-limited);
346 border: 0px solid var(--fg-limited);
347 color: var(--fg-subtle);
348}
349.limited .glow {
350 box-shadow: 0px 0px 16px var(--fg-limited);
351}
352.limited .noise {
353 color: var(--fg-subtle);
354}
355.limited .noise a {
356 color: var(--fg-limited);
357}
358.limited details.actions summary {
359 color: var(--fg-limited);
360}
361details.noise[open] summary {
362 display: none;
363}
364h1, h2 {
365 font-size: 1.2em;
366}
367h3, h4 {
368 font-size: 1.1em;
369}
370
371#topmenu ul {
372 list-style: none;
373 padding-left: 1em;
374}
375
376header a {
377 text-decoration: none;
378 color: var(--header-fg);
379}
380
381main header a {
382 text-decoration: underline;
383}
384
385header details a {
386 color: var(--fg);
387}
388
389.honkmeta {
390 color: var(--fg-subtle);
391 float: right;
392 display: inline-flex;
393 padding: 0;
394 margin: 0;
395 list-style: none;
396}
397
398.honkmeta a {
399 color: var(--fg-subtle);
400}
401
402.honkmeta li:after {
403 content: '\00B7';
404 padding-right: 2px;
405 padding-left: 2px;
406}
407
408.honkmeta li:last-child:after {
409 content: '';
410}
411
412.honkmeta li {
413 padding-left: 2px;
414 display: inline-block;
415}
416
417nav {
418 float: right;
419 max-width: 100%;
420}
421
422nav ul {
423 padding: 0;
424 margin: 0;
425 list-style: none;
426 padding-bottom: 20px;
427}
428
429nav ul li {
430 padding-right: 10px;
431 display: inline-block;
432}
433
434img:not(.emu) {
435 background: var(--bg-page);
436}
437img, video {
438 max-width: 100%;
439 max-height: 600px;
440}
441.noise img:not(.emu) {
442 display: block;
443}
444img.emu {
445 width: 2em;
446 height: 2em;
447 vertical-align: middle;
448 margin: -2px;
449 object-fit: contain;
450}
451.nophone {
452 position: fixed;
453 opacity: 0.7;
454 cursor: pointer;
455}
456
457#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
458#emupicker img{margin:0;}
459
460a {
461 color: var(--fg);
462}
463
464a:hover {
465 background: var(--bg-limited);
466}
467
468
469
470@media screen and (max-width: 1360px) {
471 .nophone {
472 display: none;
473 }
474}
475@media screen and (max-width: 740px) {
476 body {
477 font-size: 12px;
478 }
479
480 .info {
481 border: none;
482 margin-top: 0px;
483 }
484
485 .honk {
486 border-right: none;
487 border-left: none;
488 }
489
490 .honk header img {
491 width: 48px;
492 height: 48px;
493 border-radius: 10%;
494 }
495 details summary {
496 outline: none;
497 }
498}
499@media print {
500 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
501 display: none;
502 }
503 html {
504 --bg-page: white;
505 --bg-dark: white;
506 --fg: black;
507 --fg-subtle: black;
508 --fg-limited: #a79;
509 }
510}
511
512/*
513 * CSP: style-src: self
514 */
515
516li.details {
517 list-style-type: none;
518 margin-left: -1em;
519}
520
521.left1em {
522 margin-left: 1em;
523}
524
525.hide {
526 display: none;
527}
528
529.textright {
530 text-align: right;
531}
532
533.font08em {
534 font-size: 0.8em;
535}
536
537.font18em {
538 font-size: 1.8em;
539}
540
541.wsnowrap {
542 white-space: nowrap;
543}
544
545.skinny main {
546 max-width: 700px;
547}
548
549.fontmonospace {
550 font-family: monospace;
551}