Mercurial > libervia-templates
comparison sat_templates/default/static/styles.css @ 147:33c7ce833d3f
install: setup.py fix + moved "default" dir in a "sat_templates" dir:
the merge request at https://bugs.goffi.org/mr/view/3 was a good basis, but not fully working ("default" dir was removed), this patch fixes it, and do some improvments:
- moved "default" in "sat_templates" dir, which correspond to the python module, so it can be found easily from python
- added VERSION, and mercurial hash detection, in the same way as for Cagou and backend
- slight modification of classifiers
- replaces tabs coming from MR by spaces
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 02 Jun 2018 17:25:43 +0200 |
parents | default/static/styles.css@b1e22caab8bc |
children | 1b214b168948 |
comparison
equal
deleted
inserted
replaced
146:7dc00829c32f | 147:33c7ce833d3f |
---|---|
1 :root { | |
2 --select-bg-color: #ddd; | |
3 --size-medium: 3em; | |
4 } | |
5 | |
6 | |
7 html { | |
8 font-family: "sat-base-font"; | |
9 } | |
10 | |
11 body { | |
12 margin: 0; | |
13 padding: 0; | |
14 display: flex; | |
15 height: 100vh; | |
16 flex-direction: column; | |
17 box-sizing: border-box; | |
18 } | |
19 | |
20 ul { | |
21 padding: 0; | |
22 } | |
23 | |
24 #main_side_bar { | |
25 | |
26 } | |
27 | |
28 #main_area { | |
29 flex: 1; | |
30 display: flex; | |
31 flex-direction: column; | |
32 box-sizing: border-box; | |
33 } | |
34 | |
35 #body { | |
36 flex: 1; | |
37 position: relative; | |
38 } | |
39 | |
40 footer { | |
41 text-align: center; | |
42 font-size: 0.7em; | |
43 font-weight: bold; | |
44 } | |
45 | |
46 .box { | |
47 background-color: #edf2ff; | |
48 border-radius: 0; | |
49 border-color: silver; | |
50 } | |
51 | |
52 .box__tools { | |
53 margin: 0; | |
54 padding: 0; | |
55 } | |
56 | |
57 .box__tools a { | |
58 text-decoration: none; | |
59 color: inherit; | |
60 padding: 0.2em; | |
61 border-radius: 0.4em; | |
62 } | |
63 | |
64 .box__tools a:hover { | |
65 background-color: var(--select-bg-color); | |
66 } | |
67 | |
68 .title { | |
69 font-weight: bold; | |
70 text-align: center; | |
71 } | |
72 | |
73 .post_confirm { | |
74 text-align: center; | |
75 background-color: lightgreen; | |
76 padding: 1em; | |
77 font-size: 1.2em; | |
78 font-weight: bold; | |
79 width: 60%; | |
80 margin: 1.5em auto; | |
81 } | |
82 | |
83 /*** Generic ***/ | |
84 | |
85 .button { | |
86 padding: 0.5em 1em; | |
87 background: #333; | |
88 color: #ccc; | |
89 border: 1px solid #555; | |
90 border-radius: 0.8em; | |
91 font-weight: bold; | |
92 } | |
93 | |
94 | |
95 .button:hover { | |
96 background-color: #bc0000; | |
97 } | |
98 | |
99 .instructions--head { | |
100 font-size: 1.5em; | |
101 text-align: center; | |
102 } | |
103 | |
104 .instructions--alt { | |
105 text-align: center; | |
106 font-style: italic; | |
107 } | |
108 | |
109 .items_vert--centered { | |
110 display: flex; | |
111 flex-direction: column; | |
112 align-items: center; | |
113 } | |
114 | |
115 /*** blocks ***/ | |
116 | |
117 .block_separator { | |
118 font-size: 1.4em; | |
119 display: flex; | |
120 } | |
121 | |
122 .block_separator__label { | |
123 display: inline-block; | |
124 margin: 0 0.2em; | |
125 } | |
126 | |
127 .block_separator__line { | |
128 height: 1px; | |
129 background: #ccc; | |
130 flex: 1; | |
131 margin-top: 0.7em; | |
132 } | |
133 | |
134 /*** grids ***/ | |
135 | |
136 .grid { | |
137 list-style: none; | |
138 display: flex; | |
139 flex-wrap: wrap; | |
140 } | |
141 | |
142 .grid--center { | |
143 justify-content: center; | |
144 } | |
145 | |
146 .grid__item>a { | |
147 text-decoration: none; | |
148 color: inherit; | |
149 } | |
150 | |
151 .grid__item--medium { | |
152 width: 170px; | |
153 padding: 0.2em; | |
154 text-align: center; | |
155 } | |
156 | |
157 .grid__item--selectable { | |
158 cursor: pointer; | |
159 } | |
160 | |
161 .grid__item--selectable:hover { | |
162 background-color: var(--select-bg-color); | |
163 } | |
164 | |
165 /*** avatars ***/ | |
166 | |
167 .avatar { | |
168 height: 2rem; | |
169 width: 2rem; | |
170 display: inline-flex; | |
171 flex-direction: column; | |
172 align-content: center; | |
173 justify-content: center; | |
174 background: #ccc; | |
175 border-radius: 0.2rem; | |
176 } | |
177 | |
178 .avatar__content { | |
179 | |
180 } | |
181 | |
182 .avatar--medium { | |
183 height: var(--size-medium); | |
184 width: var(--size-medium); | |
185 border-radius: 0.5rem; | |
186 } | |
187 | |
188 .avatar--generated { | |
189 text-align: center; | |
190 background: #43d2f6; | |
191 } | |
192 | |
193 | |
194 /*** icons ***/ | |
195 | |
196 .icon--medium { | |
197 height: var(--size-medium); | |
198 display: block; | |
199 margin: 0 auto; | |
200 } | |
201 | |
202 .icon--small { | |
203 height: 1em; | |
204 } | |
205 | |
206 .icon--soft { | |
207 fill: #777; | |
208 } | |
209 | |
210 .icon__name { | |
211 | |
212 } | |
213 | |
214 /*** Messages ***/ | |
215 | |
216 .message--info { | |
217 max-width: 500px; | |
218 margin: 0 auto; | |
219 padding: 1em; | |
220 text-align: justify; | |
221 } | |
222 | |
223 .message--info pre { | |
224 background: #ddd; | |
225 padding: 1em; | |
226 } | |
227 | |
228 /*** Menus ***/ | |
229 | |
230 .menu ul { | |
231 display: flex; | |
232 margin-top: 8px; | |
233 list-style: none; | |
234 } | |
235 | |
236 .menu a { | |
237 display: block; | |
238 color: inherit; | |
239 text-decoration: none; | |
240 font-variant: small-caps; | |
241 } | |
242 | |
243 .main_menu { | |
244 min-width: 200px; | |
245 /* background-color: #eaeaea; */ | |
246 background-color: #333; | |
247 color: white; | |
248 } | |
249 | |
250 .main_menu ul { | |
251 flex-direction: row; | |
252 flex-wrap: wrap; | |
253 } | |
254 | |
255 .main_menu li { | |
256 flex: 1; | |
257 padding: 0; | |
258 margin: 0 0.5em; | |
259 } | |
260 | |
261 .main_menu a { | |
262 display: inline; | |
263 white-space: nowrap; | |
264 } | |
265 | |
266 .main_menu a:hover { | |
267 background-color: initial; | |
268 text-shadow: 1px 1px 2px; | |
269 font-weight: bold; | |
270 } | |
271 | |
272 .category_menu ul { | |
273 justify-content: center; | |
274 } | |
275 | |
276 .category_menu li { | |
277 margin: 0.5em; | |
278 text-align: center; | |
279 } | |
280 | |
281 .category_menu a { | |
282 border: solid 1px; | |
283 padding: 0.5em; | |
284 border-radius: 0.2em; | |
285 background: #eee; | |
286 } | |
287 | |
288 /*** containers ***/ | |
289 | |
290 /* tabs */ | |
291 | |
292 .tab_container { | |
293 max-width: 1000px; | |
294 margin: 0 auto; | |
295 } | |
296 | |
297 .tab_header { | |
298 background-color: white; | |
299 border-bottom: 1px solid lightgrey; | |
300 } | |
301 | |
302 .tab_header ul { | |
303 display: flex; | |
304 margin: 0; | |
305 padding: 0; | |
306 list-style: none; | |
307 background-color: white; | |
308 } | |
309 | |
310 .tab_page { | |
311 box-sizing: border-box; | |
312 padding-top: 2em; | |
313 border: 1px solid lightgrey; | |
314 border-top: none; | |
315 display: None; | |
316 } | |
317 | |
318 .tab_page.clicked { | |
319 display: block; | |
320 } | |
321 | |
322 .tab_button { | |
323 display: inline; | |
324 color: grey; | |
325 background-color: white; | |
326 border-top: 1px solid lightgrey; | |
327 border-left: 1px solid lightgrey; | |
328 border-bottom: 1px solid lightgrey; | |
329 padding: 0 1em; | |
330 cursor: pointer; | |
331 /* we go down by 1px to remove bottom border from .tab_header */ | |
332 margin-bottom: -1px; | |
333 } | |
334 | |
335 .tab_button.clicked { | |
336 /* background: lightgrey; */ | |
337 color: inherit; | |
338 border-bottom: none; | |
339 } | |
340 | |
341 li.tab_button:last-child { | |
342 border-right: 1px solid lightgrey; | |
343 } | |
344 | |
345 .tab_button input { | |
346 display: None; | |
347 } | |
348 | |
349 .tab_button label { | |
350 margin: 1em; | |
351 } | |
352 | |
353 .tab_button input:checked + label { | |
354 font-weight: bold; | |
355 } | |
356 | |
357 /*** Forms ***/ | |
358 | |
359 /* a form with only one field */ | |
360 | |
361 .form_single { | |
362 text-align: center; | |
363 } | |
364 | |
365 .form_single input:not([type="submit"]) { | |
366 margin: 0 1em; | |
367 width: 15em; | |
368 border-radius: 0.7em; | |
369 outline: none; | |
370 border: 1px solid black; | |
371 padding: 0.4em; | |
372 box-shadow: none; | |
373 } | |
374 | |
375 | |
376 .form_submit { | |
377 margin: 1em auto 0; | |
378 display: block; | |
379 } | |
380 | |
381 .form_jid { | |
382 text-align: center; | |
383 } | |
384 | |
385 /* Textboxes */ | |
386 | |
387 form.textbox>* { | |
388 display: block; | |
389 margin: 1em auto; | |
390 text-align: center; | |
391 max-width: 100%; | |
392 box-sizing: border-box; | |
393 } | |
394 | |
395 form.textbox>textarea { | |
396 text-align: left; | |
397 } | |
398 | |
399 .log_request { | |
400 text-align: center; | |
401 } | |
402 | |
403 /*** Navigation ***/ | |
404 | |
405 .prev_next_links ul { | |
406 list-style: none; | |
407 display: flex; | |
408 padding: 0 2em; | |
409 margin: 0; | |
410 } | |
411 | |
412 .prev_next_links li { | |
413 flex: 1; | |
414 } | |
415 | |
416 .prev_next_links li.older_items { | |
417 text-align: right; | |
418 } | |
419 | |
420 .prev_next_links img { | |
421 display: block; | |
422 } | |
423 | |
424 .prev_next_links .older_items img { | |
425 display: block; | |
426 margin-left: auto; | |
427 margin-right: 0; | |
428 } | |
429 | |
430 .prev_next_links a { | |
431 display: inline-block; | |
432 margin-top: 1em; | |
433 padding: 0.2em; | |
434 text-decoration: None; | |
435 color: inherit; | |
436 font-variant: small-caps; | |
437 background: rgba(200,200,200,0.6); | |
438 border-radius: 0.5em; | |
439 } | |
440 | |
441 .prev_next_links a:hover { | |
442 background-color: #ddd; | |
443 } | |
444 | |
445 /*** XMLUI ***/ | |
446 | |
447 .xmlui_cont_vertical>* { | |
448 display: block; | |
449 box-sizing: border-box; | |
450 } | |
451 | |
452 .xmlui_cont_vertical>.xmlui_widget { | |
453 width: 100%; | |
454 min-height: 1em; | |
455 min-width: 1px; | |
456 } | |
457 | |
458 label.xmlui_label { | |
459 font-weight: bold; | |
460 } | |
461 | |
462 td a { | |
463 /* we use <a> for non JS links in table | |
464 * so we don't want specific color/text-decoration by default | |
465 */ | |
466 color: inherit; | |
467 text-decoration: inherit; | |
468 } | |
469 | |
470 | |
471 /*** Notifications ***/ | |
472 | |
473 .notification.retry { | |
474 position: fixed; | |
475 top: 1rem; | |
476 margin: auto; | |
477 width: 80%; | |
478 background: #DB1616; | |
479 border: 3px solid silver; | |
480 left: 10%; | |
481 text-align: center; | |
482 } | |
483 | |
484 #retry_counter { | |
485 font-weight: bold; | |
486 } | |
487 | |
488 #retry_now { | |
489 color: blue; | |
490 text-decoration: underline; | |
491 cursor: pointer; | |
492 } | |
493 | |
494 @media (min-width: 800px) { | |
495 html { | |
496 background-size: auto; | |
497 } | |
498 | |
499 body { | |
500 flex-direction: row; | |
501 } | |
502 | |
503 #main_area { | |
504 overflow: auto; | |
505 } | |
506 | |
507 .box { | |
508 border-radius: 1em; | |
509 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | |
510 } | |
511 | |
512 .main_menu a { | |
513 display: block; | |
514 padding: 2em 0; | |
515 } | |
516 | |
517 .main_menu ul { | |
518 flex-direction: column; | |
519 padding-left: 2em; | |
520 } | |
521 | |
522 .prev_next_links ul { | |
523 padding: 0 6em; | |
524 } | |
525 | |
526 .instructions--alt { | |
527 padding-top: 3rem; | |
528 } | |
529 | |
530 /*** forms ***/ | |
531 | |
532 .form_single .form_submit.button { | |
533 display: inline; | |
534 } | |
535 } |