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