Files: a692047f69bbb665d6be280233fdf5a8131c4594 / style.css
6387 bytesRaw
1 | body { |
2 | font-family: sans-serif; |
3 | } |
4 | |
5 | h1, h2, h3, h4, h5, h6, p, ul, ol { |
6 | margin-top: .35em; |
7 | } |
8 | |
9 | h1 { font-size: 1.2em; } |
10 | h2 { font-size: 1.18em; } |
11 | h3 { font-size: 1.15em; } |
12 | h4 { font-size: 1.12em; } |
13 | h5 { font-size: 1.1em; } |
14 | h6 { font-size: 1em; } |
15 | |
16 | * { |
17 | word-break: break-word; |
18 | } |
19 | |
20 | a:link, a:visited, a:active { |
21 | color: #0088cc; |
22 | text-decoration: none; |
23 | } |
24 | |
25 | a:hover, |
26 | a:focus { |
27 | color: #005580; |
28 | text-decoration: underline; |
29 | } |
30 | |
31 | .screen { |
32 | position: absolute; |
33 | top: 0; bottom: 0; |
34 | left: 0; right: 0; |
35 | overflow-y: hidden; |
36 | } |
37 | |
38 | .column { |
39 | display: flex; |
40 | flex-direction: column; |
41 | min-height:0px; |
42 | } |
43 | |
44 | .row { |
45 | display: flex; |
46 | flex-direction: row; |
47 | min-height:0px; |
48 | } |
49 | |
50 | .end { |
51 | justify-content: flex-end; |
52 | } |
53 | |
54 | .wrap { |
55 | display: flex; |
56 | flex-direction: row; |
57 | flex-wrap: wrap; |
58 | } |
59 | |
60 | .no-shrink { |
61 | flex-shrink: 0; |
62 | } |
63 | |
64 | .expand { |
65 | justify-content: space-between; |
66 | } |
67 | |
68 | .scroll-y { |
69 | overflow-y: auto; |
70 | min-height: 0px; |
71 | } |
72 | |
73 | .scroll-x { |
74 | overflow-x: auto; |
75 | min-width: 0px; |
76 | } |
77 | |
78 | pre { |
79 | white-space: pre-wrap; |
80 | word-wrap: break-word; |
81 | } |
82 | |
83 | .wide { |
84 | width: 100%; |
85 | } |
86 | |
87 | p { |
88 | margin-top: .35ex; |
89 | } |
90 | |
91 | hr { |
92 | border: solid #eee; |
93 | clear: both; |
94 | border-width: 1px 0 0; |
95 | height: 0; |
96 | margin-bottom: .9em; |
97 | } |
98 | |
99 | input, textarea { |
100 | border: none; |
101 | border-radius: .2em; |
102 | font-family: sans-serif; |
103 | } |
104 | |
105 | input:focus, .compose:focus, .message:focus, button:focus { |
106 | outline: none; |
107 | border-color: #0088cc; |
108 | box-shadow: 0 0 4px #0088cc; |
109 | } |
110 | |
111 | textarea { |
112 | padding: .5em; |
113 | font-size: 1em; |
114 | } |
115 | |
116 | textarea:focus { |
117 | outline: none; |
118 | border-color: none; |
119 | } |
120 | |
121 | button { |
122 | background: #fff; |
123 | color: #666; |
124 | border: 1px solid #bbb; |
125 | border-radius: .5em; |
126 | padding: .7em; |
127 | margin: .5em; |
128 | cursor: pointer; |
129 | text-transform: uppercase; |
130 | font-weight: bold; |
131 | font-size: .7em; |
132 | } |
133 | |
134 | button:hover { |
135 | background: #ccc; |
136 | border: 1px solid #bbb; |
137 | } |
138 | |
139 | .menu { |
140 | position: absolute; |
141 | top: .5em; |
142 | right: .5em; |
143 | padding-top: .5em; |
144 | padding-bottom: .5em; |
145 | padding-right: 1em; |
146 | padding-left: 1em; |
147 | background: #f5f5f5; |
148 | border: 1px solid #eee; |
149 | border-radius: .2em; |
150 | z-index: 5; |
151 | } |
152 | |
153 | /* scrolling feeds, threads */ |
154 | |
155 | .scroller { |
156 | width: 100%; |
157 | } |
158 | |
159 | .scroller__wrapper { |
160 | flex: 1; |
161 | max-width: 600px; |
162 | margin-left: auto; |
163 | margin-right: auto; |
164 | } |
165 | |
166 | /* compose */ |
167 | |
168 | .compose { |
169 | width: 100%; |
170 | margin-top: .5em; |
171 | margin-bottom: .5em; |
172 | border: 1px solid #f5f5f5; |
173 | } |
174 | |
175 | .compose button { |
176 | float: right; |
177 | } |
178 | |
179 | /* messages */ |
180 | |
181 | .message { |
182 | position: relative; |
183 | flex-basis: 0; |
184 | margin-top: .25em; |
185 | margin-bottom: .25em; |
186 | padding: .2em; |
187 | border-top: 1px solid #f5f5f5; |
188 | // border-bottom: 1px solid #f5f5f5; |
189 | background: white; |
190 | } |
191 | |
192 | .message:hover { |
193 | background: #f9f9f9; |
194 | } |
195 | |
196 | .message--mini { |
197 | font-size: 1em; |
198 | margin: 0; |
199 | padding: .2em; |
200 | border: none; |
201 | background: inherit; |
202 | } |
203 | |
204 | .message_content div > span { |
205 | font-size: 0.9em; |
206 | margin-bottom: 0.7em; |
207 | display: block; |
208 | color: #888; |
209 | } |
210 | |
211 | .message_content--mini div > span { |
212 | display: inline-block; |
213 | } |
214 | |
215 | .message_content div > span a { |
216 | color: #005d8c; |
217 | } |
218 | |
219 | .message_meta input { |
220 | font-size: .8em; |
221 | } |
222 | |
223 | .message_meta { |
224 | margin-left: auto; |
225 | } |
226 | |
227 | .message_meta > * { |
228 | margin-left: .5ex; |
229 | } |
230 | |
231 | .message_actions { |
232 | position: absolute; |
233 | bottom: 0; right: 0; |
234 | margin-right: .5ex; |
235 | margin-bottom: .5ex; |
236 | } |
237 | |
238 | .title { |
239 | padding: .5ex; |
240 | } |
241 | |
242 | .message img { |
243 | max-width: 100%; |
244 | } |
245 | |
246 | .message > .title > .avatar { |
247 | margin-left: 0; |
248 | } |
249 | |
250 | .message_content { |
251 | padding: .5ex; |
252 | } |
253 | |
254 | .actions > * { |
255 | padding-left: 5px; |
256 | margin-left: 1px; |
257 | } |
258 | |
259 | .actions > :not(:last-child) { |
260 | border-right: 2px solid #eee; |
261 | padding-right: 5px; |
262 | } |
263 | |
264 | .emoji { |
265 | height: 1em; |
266 | width: 1em; |
267 | vertical-align: middle; |
268 | } |
269 | |
270 | |
271 | /* -- suggest box */ |
272 | |
273 | .suggest-box > * { |
274 | display: block; |
275 | } |
276 | |
277 | .suggest-box ul { |
278 | padding: 0; |
279 | list-style-type: none; |
280 | padding-left: 0; |
281 | background: #eee; |
282 | border: 1px solid #eee; |
283 | border-radius: 2px; |
284 | } |
285 | |
286 | .suggest-box .selected { |
287 | background: white; |
288 | } |
289 | |
290 | .suggest-box { |
291 | width: max-content; |
292 | background: #white; |
293 | border-radius: 1em; |
294 | } |
295 | |
296 | /* emoji */ |
297 | .suggest-box img { |
298 | height: 20px; |
299 | width: 20px; |
300 | } |
301 | |
302 | /* avatar */ |
303 | |
304 | .avatar--large, |
305 | .avatar--thumbnail, |
306 | .avatar--fullsize { |
307 | border: 1px solid #eee; |
308 | } |
309 | |
310 | .avatar--large { |
311 | width: 10em; |
312 | height: 10em; |
313 | } |
314 | |
315 | .avatar--thumbnail { |
316 | width: 2.5em; |
317 | height: 2.5em; |
318 | float: left; |
319 | margin-right: .5ex; |
320 | } |
321 | |
322 | .avatar--fullsize { |
323 | width: 50%; |
324 | } |
325 | |
326 | .profile { |
327 | padding: .5ex; |
328 | overflow: auto; |
329 | } |
330 | |
331 | .profile input { |
332 | width: 100%; |
333 | } |
334 | |
335 | .profile__info { |
336 | margin-left: .5em; |
337 | } |
338 | |
339 | /* lightbox - used in message-confirm */ |
340 | |
341 | .lightbox { |
342 | overflow: auto; |
343 | padding: 1.5em; |
344 | margin-top: 3em; |
345 | margin-bottom: 3em; |
346 | width: 600px; |
347 | background: #f5f5f5; |
348 | margin-left: auto; |
349 | margin-right: auto; |
350 | border: 1px solid #eee; |
351 | border-radius: .2em; |
352 | z-index: 2; |
353 | } |
354 | |
355 | /* searchprompt */ |
356 | |
357 | .searchprompt { |
358 | float: left; |
359 | width: 85%; |
360 | height: 2em; |
361 | margin-top: .3em; |
362 | border-radius: 1em; |
363 | padding-left: .2em; |
364 | margin-left: 1em; |
365 | margin-right: 1em; |
366 | } |
367 | |
368 | /* TextNodeSearcher highlights */ |
369 | |
370 | .highlight { |
371 | background: #f5f5f5; |
372 | } |
373 | |
374 | /* avatar editor */ |
375 | |
376 | .hypercrop__canvas { |
377 | width: 100%; |
378 | } |
379 | |
380 | /* gitssb */ |
381 | |
382 | .git-table-wrapper { |
383 | max-height: 12em; |
384 | overflow: auto; |
385 | word-break: break-all; |
386 | margin: 1em 0; |
387 | } |
388 | |
389 | .git-table-wrapper table { |
390 | width: 100%; |
391 | } |
392 | |
393 | /* --- network status --- */ |
394 | |
395 | .status { |
396 | width: .7em; |
397 | height: .7em; |
398 | margin: .7em; |
399 | border-radius: 100%; |
400 | background: #08c; |
401 | } |
402 | |
403 | .error { |
404 | background: red; |
405 | } |
406 | |
407 | /* tabs */ |
408 | |
409 | .header { |
410 | background: #f5f5f5; |
411 | border-bottom: 1px inset; |
412 | flex-shrink: 0; |
413 | } |
414 | |
415 | .header__tabs { |
416 | width: 100%; |
417 | min-width: 0px; |
418 | } |
419 | |
420 | /* --- hypertabs ------- */ |
421 | |
422 | .hypertabs__tabs { |
423 | min-width: 0px; |
424 | width: 100%; |
425 | } |
426 | |
427 | .hypertabs__tab { |
428 | overflow-x: hidden; |
429 | min-width: 0px; |
430 | width: 100%; |
431 | } |
432 | |
433 | .hypertabs__button { |
434 | overflow-x: hidden; |
435 | min-width: 0px; |
436 | width: 100%; |
437 | } |
438 | |
439 | .hypertabs__tab { |
440 | color: black; |
441 | background: #f5f5f5; |
442 | border-top-left-radius: 5px; |
443 | margin-left: -3px; |
444 | border-bottom: none; |
445 | padding-top: .56em; |
446 | padding-left: 1em; |
447 | border-left: 1px solid #ddd; |
448 | width: 100%; |
449 | } |
450 | |
451 | .hypertabs__tab > a { |
452 | color: #666; |
453 | text-decoration: none; |
454 | white-space: nowrap; |
455 | font-size: .9em; |
456 | } |
457 | |
458 | .hypertabs--selected { |
459 | font-weight: bold; |
460 | background: #eee; |
461 | border-top-right-radius: 5px; |
462 | z-index: 1; |
463 | } |
464 | |
465 | .hypertabs__x { |
466 | display: none; |
467 | transform: translate(-4px, -3px); |
468 | } |
469 | |
470 | .hypertabs--selected .hypertabs__x { |
471 | display: block; |
472 | } |
473 | |
474 | /* progress bar */ |
475 | |
476 | .hyperprogress__bar { |
477 | background: darkgrey; |
478 | } |
479 | .hyperprogress__liquid { |
480 | background: lightblue; |
481 | } |
482 | |
483 | |
484 |
Built with git-ssb-web