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