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 margin: 0px;
88 padding: 1em 0em 2em 0em;
89 font-size: 1.5em;
90 color: var(--header-fg);
91}
92body > header span {
93 margin-left: 2em;
94}
95
96.easylinks a {
97 text-decoration: none !important;
98 color: var(--header-fg);
99}
100
101header > details {
102 padding: 1em 1em 1em 1em;
103 color: var(--header-fg);
104 position: absolute;
105 top: 0;
106 left: 0;
107 display: inline;
108 max-height: calc(100% - 1em);
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
376.honkmeta {
377 color: var(--fg-subtle);
378 float: right;
379 display: inline-flex;
380 padding: 0;
381 margin: 0;
382 list-style: none;
383}
384
385.honkmeta a {
386 color: var(--fg-subtle);
387}
388
389.honkmeta li:after {
390 content: '\00B7';
391 padding-right: 2px;
392 padding-left: 2px;
393}
394
395.honkmeta li:last-child:after {
396 content: '';
397}
398
399.honkmeta li {
400 padding-left: 2px;
401 display: inline-block;
402}
403
404nav {
405 float: right;
406 max-width: 100%;
407}
408
409nav ul {
410 padding: 0;
411 margin: 0;
412 list-style: none;
413 padding-bottom: 20px;
414}
415
416nav ul li {
417 padding-right: 10px;
418 display: inline-block;
419}
420
421img:not(.emu) {
422 background: var(--bg-page);
423}
424img, video {
425 max-width: 100%;
426 max-height: 600px;
427}
428.noise img:not(.emu) {
429 display: block;
430}
431img.emu {
432 width: 2em;
433 height: 2em;
434 vertical-align: middle;
435 margin: -2px;
436 object-fit: contain;
437}
438.nophone {
439 position: fixed;
440 opacity: 0.7;
441 cursor: pointer;
442}
443
444#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
445#emupicker img{margin:0;}
446
447a {
448 color: var(--fg);
449}
450
451a:hover {
452 background: var(--bg-limited);
453}
454
455
456
457@media screen and (max-width: 1360px) {
458 .nophone {
459 display: none;
460 }
461}
462@media screen and (max-width: 740px) {
463 body {
464 font-size: 12px;
465 }
466
467 .info {
468 border: none;
469 margin-top: 0px;
470 }
471
472 .honk {
473 border-right: none;
474 border-left: none;
475 }
476
477 .honk header img {
478 width: 48px;
479 height: 48px;
480 border-radius: 10%;
481 }
482 details summary {
483 outline: none;
484 }
485}
486@media print {
487 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
488 display: none;
489 }
490 html {
491 --bg-page: white;
492 --bg-dark: white;
493 --fg: black;
494 --fg-subtle: black;
495 --fg-limited: #a79;
496 }
497}
498
499/*
500 * CSP: style-src: self
501 */
502
503li.details {
504 list-style-type: none;
505 margin-left: -1em;
506}
507
508.left1em {
509 margin-left: 1em;
510}
511
512.hide {
513 display: none;
514}
515
516.textright {
517 text-align: right;
518}
519
520.font08em {
521 font-size: 0.8em;
522}
523
524.font18em {
525 font-size: 1.8em;
526}
527
528.wsnowrap {
529 white-space: nowrap;
530}
531
532.skinny main {
533 max-width: 700px;
534}
535
536.fontmonospace {
537 font-family: monospace;
538}