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