Mercurial > libervia-templates

comparison sat_templates/templates/default/static/styles.css @ 164:e9f0a4215e46

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
multi-sites handling (moved templates to "templates" sub-directory) + noscript styles handling.
author Goffi <goffi@goffi.org>
date Mon, 10 Sep 2018 08:53:33 +0200
parents sat_templates/default/static/styles.css@79e9d7bcd96e
children 178f55b825b7
comparison
equal deleted inserted replaced
163:33f67228686a 164:e9f0a4215e46
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 .title {
46 font-weight: bold;
47 text-align: center;
48 }
49
50 .post_confirm {
51 text-align: center;
52 background-color: lightgreen;
53 padding: 1em;
54 font-size: 1.2em;
55 font-weight: bold;
56 width: 60%;
57 margin: 1.5em auto;
58 }
59
60 /*** Generic ***/
61
62 .button {
63 padding: 0.5em 1em;
64 background: #333;
65 color: #ccc;
66 border: 1px solid #555;
67 border-radius: 0.8em;
68 font-weight: bold;
69 }
70
71
72 .button:hover {
73 background-color: #bc0000;
74 }
75
76 .instructions--head {
77 font-size: 1.5em;
78 text-align: center;
79 }
80
81 .instructions--alt {
82 text-align: center;
83 font-style: italic;
84 }
85
86 .items_vert--centered {
87 display: flex;
88 flex-direction: column;
89 align-items: center;
90 }
91
92 /*** boxes ***/
93
94 .box {
95 background-color: #edf2ff;
96 border-radius: 0;
97 border-color: silver;
98 margin: 0 auto;
99 }
100
101 .box--medium {
102 max-width: 50em;
103 }
104
105 .box--small {
106 max-width: 20em;
107 }
108
109 .box--hollow {
110 border-radius: 0;
111 border-style: solid;
112 border-color: silver;
113 border-width: 1px 0;
114 margin: 0;
115 }
116
117 .box--paper {
118 text-align: center;
119 font-variant: small-caps;
120 border: none;
121 }
122
123 .box--center {
124 }
125
126 .box__tools {
127 /* toolbar in a box */
128 margin: 0;
129 padding: 0;
130 }
131
132 .box__tools a {
133 text-decoration: none;
134 color: inherit;
135 padding: 0.2em;
136 border-radius: 0.4em;
137 }
138
139 .box__tools a:hover {
140 background-color: var(--select-bg-color);
141 }
142
143
144 /*** blocks ***/
145
146 .block_separator {
147 font-size: 1.4em;
148 display: flex;
149 }
150
151 .block_separator__label {
152 display: inline-block;
153 margin: 0 0.2em;
154 }
155
156 .block_separator__line {
157 height: 1px;
158 background: #ccc;
159 flex: 1;
160 margin-top: 0.7em;
161 }
162
163 /*** lists ***/
164
165 .list {
166 list-style: none;
167 display: flex;
168 flex-direction: column;
169 }
170
171 .list__item>a {
172 text-decoration: none;
173 color: inherit;
174 }
175
176 /*** grids ***/
177
178 .grid {
179 display: flex;
180 flex-wrap: wrap;
181 }
182
183 ul.grid {
184 list-style: none;
185 }
186
187 .grid--center {
188 justify-content: center;
189 }
190
191 li.grid__item>a {
192 text-decoration: none;
193 color: inherit;
194 }
195
196 .grid__item--medium {
197 width: 170px;
198 padding: 0.2em;
199 text-align: center;
200 }
201
202 .grid__item--selectable {
203 cursor: pointer;
204 }
205
206 .grid__item--selectable:hover {
207 background-color: var(--select-bg-color);
208 }
209
210 /*** tables ***/
211
212 .table--main {
213 margin: 1em auto;
214 border-collapse: collapse;
215 text-align: center;
216 }
217
218 .table--main th {
219 font-variant: small-caps;
220 border: 1px solid;
221 padding: 0.5em;
222 }
223
224 .table--main td {
225 border: 1px solid;
226 padding: 0 0.5em;
227 }
228
229 .table__total {
230 font-variant: small-caps;
231 }
232
233 .table__total_value {
234 font-weight: bold;
235 }
236
237 /*** avatars ***/
238
239 .avatar {
240 height: 2rem;
241 width: 2rem;
242 align-content: center;
243 justify-content: center;
244 background: #ccc;
245 border-radius: 0.2rem;
246 }
247
248 .avatar--generated{
249 display: inline-flex;
250 flex-direction: column;
251 }
252
253 .avatar--float-left {
254 float: left;
255 margin-top: 0.3em;
256 margin-right: 0.5em;
257 }
258
259 .avatar__content {
260
261 }
262
263 .avatar--medium {
264 height: var(--size-medium);
265 width: var(--size-medium);
266 border-radius: 0.5rem;
267 }
268
269 .avatar--generated {
270 text-align: center;
271 background: #43d2f6;
272 }
273
274 /*** images ***/
275 .img--small {
276 height: 100px;
277 }
278
279
280 /*** icons ***/
281
282 .icon--medium {
283 height: var(--size-medium);
284 display: block;
285 margin: 0 auto;
286 }
287
288 .icon--small {
289 height: 1em;
290 }
291
292 .icon--soft {
293 fill: #777;
294 }
295
296 .icon__name {
297
298 }
299
300 /*** Messages ***/
301
302 .message--info {
303 max-width: 500px;
304 margin: 0 auto;
305 padding: 1em;
306 text-align: justify;
307 }
308
309 .message--info pre {
310 background: #ddd;
311 padding: 1em;
312 }
313
314 .message--note {
315 max-width: 500px;
316 margin: 0 auto;
317 padding: 1em;
318 text-align: center;
319 }
320
321 /*** Menus ***/
322
323 .menu ul {
324 display: flex;
325 margin-top: 8px;
326 list-style: none;
327 }
328
329 .menu a {
330 display: block;
331 color: inherit;
332 text-decoration: none;
333 font-variant: small-caps;
334 }
335
336 .main_menu {
337 min-width: 200px;
338 /* background-color: #eaeaea; */
339 background-color: #333;
340 color: white;
341 overflow: auto;
342 }
343
344 .main_menu ul {
345 flex-direction: row;
346 flex-wrap: wrap;
347 }
348
349 .main_menu li {
350 flex: 1;
351 padding: 0;
352 margin: 0 0.5em;
353 }
354
355 .main_menu a {
356 display: inline;
357 white-space: nowrap;
358 }
359
360 .main_menu a:hover {
361 background-color: initial;
362 text-shadow: 1px 1px 2px;
363 font-weight: bold;
364 }
365
366 .category_menu ul {
367 justify-content: center;
368 }
369
370 .category_menu li {
371 margin: 0.5em;
372 text-align: center;
373 }
374
375 .category_menu a {
376 border: solid 1px;
377 padding: 0.5em;
378 border-radius: 0.2em;
379 background: #eee;
380 }
381
382 /*** containers ***/
383
384 /* tabs */
385
386 .tab_container {
387 max-width: 1000px;
388 margin: 0 auto;
389 }
390
391 .tab_header {
392 background-color: white;
393 border-bottom: 1px solid lightgrey;
394 }
395
396 .tab_header ul {
397 display: flex;
398 margin: 0;
399 padding: 0;
400 list-style: none;
401 background-color: white;
402 }
403
404 .tab_page {
405 box-sizing: border-box;
406 padding-top: 2em;
407 border: 1px solid lightgrey;
408 border-top: none;
409 display: None;
410 }
411
412 .tab_page.clicked {
413 display: block;
414 }
415
416 .tab_button {
417 display: inline;
418 color: grey;
419 background-color: white;
420 border-top: 1px solid lightgrey;
421 border-left: 1px solid lightgrey;
422 border-bottom: 1px solid lightgrey;
423 padding: 0 1em;
424 cursor: pointer;
425 /* we go down by 1px to remove bottom border from .tab_header */
426 margin-bottom: -1px;
427 }
428
429 .tab_button.clicked {
430 /* background: lightgrey; */
431 color: inherit;
432 border-bottom: none;
433 }
434
435 li.tab_button:last-child {
436 border-right: 1px solid lightgrey;
437 }
438
439 .tab_button input {
440 display: None;
441 }
442
443 .tab_button label {
444 margin: 1em;
445 }
446
447 .tab_button input:checked + label {
448 font-weight: bold;
449 }
450
451 /*** Forms ***/
452
453 /* a form with only one field */
454
455 .form--paper label {
456 font-variant: small-caps;
457 }
458
459 .form--paper label.required:after {
460 content: " *";
461 font-weight: bold;
462 }
463
464 .form--paper textarea {
465 resize: vertical;
466 }
467
468 .form--single {
469 display: flex;
470 justify-content: center;
471 align-items: center;
472 flex-direction: column;
473 }
474
475 .form--single input:not([type="submit"]) {
476 margin: 1em 1em;
477 width: 15em;
478 border-radius: 0.7em;
479 outline: none;
480 border: 1px solid black;
481 padding: 0.4em;
482 box-shadow: none;
483 }
484
485 .form--single .form_input {
486 display: flex;
487 justify-content: center;
488 align-items: center;
489 flex-direction: column;
490 }
491
492
493 .form_submit {
494 margin: 1em auto 0;
495 display: block;
496 }
497
498 .form--single .form_submit {
499 margin: 0;
500 }
501
502 .form_jid {
503 text-align: center;
504 }
505
506 .form__panel--vertical {
507 display: flex;
508 flex-direction: column;
509 padding: 2em 0;
510 }
511
512 .form__panel--vertical label {
513 display: block;
514 }
515
516 .form__panel--vertical .form_input {
517 margin: 0.5em 0;
518 }
519
520 .form__panel--center textarea,input:not([type="radio"]) {
521 display: block;
522 margin-left: auto;
523 margin-right: auto;
524 }
525
526 .form__panel--center label {
527 text-align: center;
528 }
529
530 .form__field--tiny>input {
531 box-sizing: border-box;
532 width: 3em;
533 }
534
535 .form__field--small>input {
536 box-sizing: border-box;
537 width: 20em;
538 max-width: 95%;
539 }
540
541 .form__field--medium>input {
542 box-sizing: border-box;
543 width: 50em;
544 max-width: 95%;
545 }
546
547 .form__field--big>input,textarea {
548 box-sizing: border-box;
549 width: 100%;
550 }
551
552 /* Textboxes */
553
554 .textbox {
555 margin-left: auto;
556 margin-right: auto;
557 }
558
559 form.textbox>* {
560 display: block;
561 margin: 1em auto;
562 text-align: center;
563 max-width: 100%;
564 box-sizing: border-box;
565 }
566
567 form.textbox>textarea {
568 text-align: left;
569 }
570
571 .log_request {
572 text-align: center;
573 }
574
575 /*** Navigation ***/
576
577 .prev_next_links ul {
578 list-style: none;
579 display: flex;
580 padding: 0 2em;
581 margin: 0;
582 }
583
584 .prev_next_links li {
585 flex: 1;
586 }
587
588 .prev_next_links li.older_items {
589 text-align: right;
590 }
591
592 .prev_next_links img {
593 display: block;
594 }
595
596 .prev_next_links .older_items img {
597 display: block;
598 margin-left: auto;
599 margin-right: 0;
600 }
601
602 .prev_next_links a {
603 display: inline-block;
604 margin-top: 1em;
605 padding: 0.2em;
606 text-decoration: None;
607 color: inherit;
608 font-variant: small-caps;
609 background: rgba(200,200,200,0.6);
610 border-radius: 0.5em;
611 }
612
613 .prev_next_links a:hover {
614 background-color: #ddd;
615 }
616
617 /*** XMLUI ***/
618
619 .xmlui_cont_vertical>* {
620 display: block;
621 box-sizing: border-box;
622 }
623
624 .xmlui_cont_vertical>.xmlui_widget {
625 width: 100%;
626 min-height: 1em;
627 min-width: 1px;
628 }
629
630 label.xmlui_label {
631 font-weight: bold;
632 }
633
634 td a {
635 /* we use <a> for non JS links in table
636 * so we don't want specific color/text-decoration by default
637 */
638 color: inherit;
639 text-decoration: inherit;
640 }
641
642
643 /*** Notifications ***/
644
645 .notification.retry {
646 position: fixed;
647 top: 1rem;
648 margin: auto;
649 width: 80%;
650 background: #DB1616;
651 border: 3px solid silver;
652 left: 10%;
653 text-align: center;
654 }
655
656 #retry_counter {
657 font-weight: bold;
658 }
659
660 #retry_now {
661 color: blue;
662 text-decoration: underline;
663 cursor: pointer;
664 }
665
666 @media (min-width: 800px) {
667 html {
668 background-size: auto;
669 }
670
671 body {
672 flex-direction: row;
673 }
674
675 #main_area {
676 overflow: auto;
677 }
678
679 /*** boxes ***/
680
681 .box {
682 border-radius: 1em;
683 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5);
684 width: 94%;
685 margin: 1em auto;
686 border: solid 1px;
687 border-color: #9ca0a8;
688 }
689
690 .box--medium {
691 width: 33rem;
692 max-width: 100%;
693 }
694
695 .box--hollow {
696 border-radius: 0.2em;
697 border-width: 1px;
698 margin: 0.5em;
699 }
700
701 /*** Forms ***/
702
703 .form__panel--vertical {
704 display: flex;
705 flex-direction: column;
706 padding: 2em;
707 }
708
709 .form__field--big>input,textarea {
710 box-sizing: border-box;
711 width: 95%;
712 }
713
714 .main_menu a {
715 display: block;
716 padding: 2em 0;
717 }
718
719 .main_menu ul {
720 flex-direction: column;
721 padding-left: 2em;
722 }
723
724 .prev_next_links ul {
725 padding: 0 6em;
726 }
727
728 .instructions--alt {
729 padding-top: 3rem;
730 }
731
732 /*** forms ***/
733
734 .form--single input:not([type="submit"]) {
735 margin: 0 1em;
736 }
737
738 .form--single {
739 display: flex;
740 justify-content: center;
741 flex-direction: row;
742 }
743
744 .form--single .form_input {
745 flex-direction: row;
746 }
747 }