views/local.css (view raw)
1:root {
2 --bg-page: #f4f4f4;
3 --bg-dark: #eee;
4 --bg-limited: #ddd;
5 --fg: #000;
6 --fg-subtle: #666;
7 --fg-limited: #509c93;
8 --hl: #c2c2c2;
9}
10
11::selection {
12 background: var(--fg-limited);
13 color: var(--hl);
14 opacity: 0.3;
15}
16
17@media (prefers-color-scheme: dark) {
18 :root {
19 --bg-page: #111;
20 --bg-dark: #222;
21 --fg: #ccc;
22 --hl: #333;
23 --fg-subtle: #ccc;
24 --fg-limited: #509c93;
25 --bg-limited: #333;
26 }
27}
28
29* {
30 font-size: 14px !important;
31}
32
33body {
34 background: var(--bg-page);
35 color: var(--fg);
36 font-size: 14px !important;
37 word-wrap: break-word;
38 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
39 line-height: 1.2;
40 overscroll-behavior-y: contain;
41}
42pre, code {
43 white-space: pre-wrap;
44}
45blockquote {
46 margin-left: 0em;
47 margin-bottom: 0em;
48 padding-left: 0.5em;
49 border-left: 1px solid var(--fg-subtle);
50}
51cite {
52 margin-left: 2em;
53}
54table {
55 display: block;
56 max-width: 100%;
57 overflow-x: auto;
58}
59a {
60 color: var(--fg);
61}
62
63a:hover {
64 background: var(--bg-limited);
65}
66
67form, input, textarea {
68 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
69}
70p {
71 margin-top: 1em;
72 margin-bottom: 1em;
73}
74input {
75 background: var(--bg-page);
76 color: var(--fg);
77 font-size: 1.0em;
78 line-height: 1.2em;
79 padding: 0.4em;
80}
81#honkform input {
82 font-size: 0.8em;
83}
84body > header {
85 max-width: 655px;
86 margin: 1em auto;
87 font-size: 1.5em;
88}
89body > header span {
90 margin-left: 2em;
91}
92body > header p {
93 padding: 1em;
94}
95header > details {
96 background: var(--bg-page);
97 padding: 1em 1em 1em 1em;
98 position: fixed;
99 top: 0;
100 left: 0;
101 display: inline;
102 max-height: calc(100% - 1em);
103 overflow: auto;
104 opacity: 0.7;
105 overscroll-behavior: contain;
106 z-index: 2;
107}
108header > details[open] {
109 padding: 1em 1em 0em 1em;
110 background: var(--bg-dark);
111 border: 1px solid var(--hl);
112 margin-bottom: 1em;
113 opacity: 1.0;
114}
115header > details summary span {
116 display: none;
117}
118header > details[open] summary span {
119 display: inline;
120}
121header > details li {
122 margin: 1em 0em 1em 0em;
123}
124details summary {
125 cursor: pointer;
126}
127main {
128 max-width: 655px;
129 margin: auto;
130 font-size: 1.5em;
131}
132hr {
133 border-color: var(--hl);
134}
135.info {
136 background: var(--bg-dark);
137 border: 1px solid var(--bg-dark);
138 margin-bottom: 1em;
139 padding: 0em 1em 0em 1em;
140}
141.info div {
142 margin-top: 1em;
143 margin-bottom: 1em;
144}
145label {
146 font-size: 0.8em;
147}
148label.button, button, select {
149 font-size: 14px;
150 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
151 color: var(--fg);
152 padding: 0.2em;
153 background: var(--bg-dark);
154 white-space: nowrap;
155}
156
157button:hover {
158 background: var(--bg-limited);
159}
160
161.buttonarray {
162 margin-top: -2.0em;
163}
164.buttonarray button, .buttonarray > span {
165 margin-top: 2.0em;
166 display: inline-block;
167}
168button a {
169 text-decoration: none;
170}
171button {
172 cursor: pointer;
173}
174form {
175 margin-top: 1em;
176}
177textarea {
178 padding: 0.5em;
179 font-size: 1em;
180 background: var(--bg-page);
181 color: var(--fg);
182 width: 600px;
183 height: 4em;
184 margin-bottom: 0.5em;
185 box-sizing: border-box;
186 max-width: 100%;
187}
188textarea#honknoise {
189 height: 10em;
190}
191input[type="checkbox"] {
192 position: fixed;
193 top: -9999px;
194}
195input[type="checkbox"] + span:after {
196 content: "no";
197}
198input[type="checkbox"]:checked + span:after {
199 content: "yes";
200}
201input[type="checkbox"]:focus + span:after {
202 outline: 1px solid var(--fg);
203}
204input[type=file] {
205 display: none;
206}
207
208.glow {
209 box-shadow: 0px 0px 16px var(--hl);
210}
211
212.honk {
213 margin: auto;
214 background: var(--bg-dark);
215 border: 0px solid var(--hl);
216 margin-bottom: 1em;
217 border-radius: 0em !important;
218 padding-left: 1em;
219 padding-right: 1em;
220 padding-top: 0;
221 overflow: hidden;
222}
223
224.chat {
225 border-bottom: 0.5px solid var(--fg-subtle);
226 padding-left: 1em;
227}
228.chat p {
229 margin-top: 0.2em;
230 margin-bottom: 0.2em;
231}
232.chattarget {
233 border-bottom: 1px solid var(--fg-subtle);
234}
235.chatstamp {
236 margin-left: -1em;
237}
238
239.honk #honkform {
240 padding: 1em;
241 border: 1px solid var(--fg);
242}
243.honk a {
244 color: var(--fg);
245}
246.honk header {
247 white-space: nowrap;
248 overflow: hidden;
249 text-overflow: ellipsis;
250 font-size: 0.8em;
251 line-height: 1.1;
252 margin-top: 1em;
253}
254
255.honk header .clip a {
256 color: var(--fg-subtle);
257}
258
259.clip {
260 text-transform: lowercase;
261}
262
263.honk header img {
264 float: left;
265 margin-right: 1em;
266 border-radius: 10%;
267 width: 64px;
268 height: 64px;
269}
270.honk header p {
271 margin-top: 0px;
272}
273
274.honk .noise {
275 line-height: 1.4;
276}
277
278.honk .noise code .kw { font-weight: bold; }
279.honk .noise code .bi { font-weight: bold; }
280.honk .noise code .st { color: var(--fg-subtle); }
281.honk .noise code .nm { color: #ba88ff; }
282.honk .noise code .op { color: #ba88ff; }
283.honk .noise code .tp { font-weight: bold; }
284.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
285.honk .noise code .al { color: #aaffbb; }
286.honk .noise code .dl { color: #ffaabb; }
287
288summary::marker {
289 content: '\2192';
290}
291
292.honk details.actions summary {
293 color: var(--fg-subtle);
294}
295.subtle .noise {
296 color: var(--fg-subtle);
297 font-size: 0.8em;
298}
299.subtle .noise a {
300 color: var(--fg-subtle);
301}
302.limited {
303 background: var(--bg-limited);
304 border: 0px solid var(--fg-limited);
305 color: var(--fg-subtle);
306}
307.limited .glow {
308 box-shadow: 0px 0px 16px var(--fg-limited);
309}
310.limited .noise {
311 color: var(--fg-subtle);
312}
313.limited .noise a {
314 color: var(--fg-limited);
315}
316.limited details.actions summary {
317 color: var(--fg-limited);
318}
319details.noise[open] summary {
320 display: none;
321}
322h1, h2 {
323 font-size: 1.2em;
324}
325h3, h4 {
326 font-size: 1.1em;
327}
328
329#topmenu ul {
330 list-style: none;
331 padding-left: 1em;
332}
333
334.honkmeta {
335 color: var(--fg-subtle);
336 float: right;
337 display: inline-flex;
338 padding: 0;
339 margin: 0;
340 list-style: none;
341}
342
343.honkmeta a {
344 color: var(--fg-subtle);
345}
346
347.honkmeta li:after {
348 content: '\00B7';
349 padding-right: 2px;
350 padding-left: 2px;
351}
352
353.honkmeta li:last-child:after {
354 content: '';
355}
356
357.honkmeta li {
358 padding-left: 2px;
359 display: inline-block;
360}
361
362nav {
363 float: right;
364}
365
366nav ul {
367 padding: 0;
368 margin: 0;
369 list-style: none;
370 padding-bottom: 20px;
371}
372
373nav ul li {
374 padding-right: 10px;
375 display: inline-block;
376}
377
378img:not(.emu) {
379 background: var(--bg-page);
380}
381img, video {
382 max-width: 100%;
383 max-height: 600px;
384}
385.noise img:not(.emu) {
386 display: block;
387}
388img.emu {
389 width: 2em;
390 height: 2em;
391 vertical-align: middle;
392 margin: -2px;
393 object-fit: contain;
394}
395.nophone {
396 position: fixed;
397 opacity: 0.7;
398 cursor: pointer;
399}
400@media screen and (max-width: 1360px) {
401 .nophone {
402 display: none;
403 }
404}
405@media screen and (max-width: 740px) {
406 body {
407 font-size: 12px;
408 }
409
410 main {
411 margin: 0 -0.6rem;
412 }
413
414 .honk header img {
415 width: 48px;
416 height: 48px;
417 border-radius: 10%;
418 }
419 details summary {
420 outline: none;
421 }
422}
423@media print {
424 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
425 display: none;
426 }
427 html {
428 --bg-page: white;
429 --bg-dark: white;
430 --fg: black;
431 --fg-subtle: black;
432 --fg-limited: #a79;
433 }
434}