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