Mercurial > libervia-templates
comparison sat_templates/default/static/styles.css @ 155:954759f0e8fa
css: styles improvments + following a bit more BEM conventions
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 21 Jun 2018 01:12:40 +0200 |
parents | 1b214b168948 |
children | b01b58d06894 |
comparison
equal
deleted
inserted
replaced
154:80cf52fbcc40 | 155:954759f0e8fa |
---|---|
40 footer { | 40 footer { |
41 text-align: center; | 41 text-align: center; |
42 font-size: 0.7em; | 42 font-size: 0.7em; |
43 font-weight: bold; | 43 font-weight: bold; |
44 } | 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 { | 45 .title { |
69 font-weight: bold; | 46 font-weight: bold; |
70 text-align: center; | 47 text-align: center; |
71 } | 48 } |
72 | 49 |
110 display: flex; | 87 display: flex; |
111 flex-direction: column; | 88 flex-direction: column; |
112 align-items: center; | 89 align-items: center; |
113 } | 90 } |
114 | 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 | |
115 /*** blocks ***/ | 144 /*** blocks ***/ |
116 | 145 |
117 .block_separator { | 146 .block_separator { |
118 font-size: 1.4em; | 147 font-size: 1.4em; |
119 display: flex; | 148 display: flex; |
129 background: #ccc; | 158 background: #ccc; |
130 flex: 1; | 159 flex: 1; |
131 margin-top: 0.7em; | 160 margin-top: 0.7em; |
132 } | 161 } |
133 | 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 | |
134 /*** grids ***/ | 176 /*** grids ***/ |
135 | 177 |
136 .grid { | 178 .grid { |
179 display: flex; | |
180 flex-wrap: wrap; | |
181 } | |
182 | |
183 ul.grid { | |
137 list-style: none; | 184 list-style: none; |
138 display: flex; | |
139 flex-wrap: wrap; | |
140 } | 185 } |
141 | 186 |
142 .grid--center { | 187 .grid--center { |
143 justify-content: center; | 188 justify-content: center; |
144 } | 189 } |
145 | 190 |
146 .grid__item>a { | 191 li.grid__item>a { |
147 text-decoration: none; | 192 text-decoration: none; |
148 color: inherit; | 193 color: inherit; |
149 } | 194 } |
150 | 195 |
151 .grid__item--medium { | 196 .grid__item--medium { |
158 cursor: pointer; | 203 cursor: pointer; |
159 } | 204 } |
160 | 205 |
161 .grid__item--selectable:hover { | 206 .grid__item--selectable:hover { |
162 background-color: var(--select-bg-color); | 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; | |
163 } | 235 } |
164 | 236 |
165 /*** avatars ***/ | 237 /*** avatars ***/ |
166 | 238 |
167 .avatar { | 239 .avatar { |
188 .avatar--generated { | 260 .avatar--generated { |
189 text-align: center; | 261 text-align: center; |
190 background: #43d2f6; | 262 background: #43d2f6; |
191 } | 263 } |
192 | 264 |
265 /*** images ***/ | |
266 .img--small { | |
267 height: 100px; | |
268 } | |
269 | |
193 | 270 |
194 /*** icons ***/ | 271 /*** icons ***/ |
195 | 272 |
196 .icon--medium { | 273 .icon--medium { |
197 height: var(--size-medium); | 274 height: var(--size-medium); |
221 } | 298 } |
222 | 299 |
223 .message--info pre { | 300 .message--info pre { |
224 background: #ddd; | 301 background: #ddd; |
225 padding: 1em; | 302 padding: 1em; |
303 } | |
304 | |
305 .message--note { | |
306 max-width: 500px; | |
307 margin: 0 auto; | |
308 padding: 1em; | |
309 text-align: center; | |
226 } | 310 } |
227 | 311 |
228 /*** Menus ***/ | 312 /*** Menus ***/ |
229 | 313 |
230 .menu ul { | 314 .menu ul { |
357 | 441 |
358 /*** Forms ***/ | 442 /*** Forms ***/ |
359 | 443 |
360 /* a form with only one field */ | 444 /* a form with only one field */ |
361 | 445 |
362 .form_single { | 446 .form--paper label { |
363 text-align: center; | 447 font-variant: small-caps; |
364 } | 448 } |
365 | 449 |
366 .form_single input:not([type="submit"]) { | 450 .form--paper label.required:after { |
367 margin: 0 1em; | 451 content: " *"; |
452 font-weight: bold; | |
453 } | |
454 | |
455 .form--paper textarea { | |
456 resize: vertical; | |
457 } | |
458 | |
459 .form--single { | |
460 display: flex; | |
461 justify-content: center; | |
462 align-items: center; | |
463 flex-direction: column; | |
464 } | |
465 | |
466 .form--single input:not([type="submit"]) { | |
467 margin: 1em 1em; | |
368 width: 15em; | 468 width: 15em; |
369 border-radius: 0.7em; | 469 border-radius: 0.7em; |
370 outline: none; | 470 outline: none; |
371 border: 1px solid black; | 471 border: 1px solid black; |
372 padding: 0.4em; | 472 padding: 0.4em; |
373 box-shadow: none; | 473 box-shadow: none; |
374 } | 474 } |
375 | 475 |
476 .form--single .form_input { | |
477 display: flex; | |
478 justify-content: center; | |
479 align-items: center; | |
480 flex-direction: column; | |
481 } | |
482 | |
376 | 483 |
377 .form_submit { | 484 .form_submit { |
378 margin: 1em auto 0; | 485 margin: 1em auto 0; |
379 display: block; | 486 display: block; |
380 } | 487 } |
381 | 488 |
489 .form--single .form_submit { | |
490 margin: 0; | |
491 } | |
492 | |
382 .form_jid { | 493 .form_jid { |
383 text-align: center; | 494 text-align: center; |
384 } | 495 } |
385 | 496 |
497 .form__panel--vertical { | |
498 display: flex; | |
499 flex-direction: column; | |
500 padding: 2em 0; | |
501 } | |
502 | |
503 .form__panel--vertical label { | |
504 display: block; | |
505 } | |
506 | |
507 .form__panel--vertical .form_input { | |
508 margin: 0.5em 0; | |
509 } | |
510 | |
511 .form__panel--center textarea,input:not([type="radio"]) { | |
512 display: block; | |
513 margin-left: auto; | |
514 margin-right: auto; | |
515 } | |
516 | |
517 .form__panel--center label { | |
518 text-align: center; | |
519 } | |
520 | |
521 .form__field--tiny>input { | |
522 box-sizing: border-box; | |
523 width: 3em; | |
524 } | |
525 | |
526 .form__field--small>input { | |
527 box-sizing: border-box; | |
528 width: 20em; | |
529 max-width: 95%; | |
530 } | |
531 | |
532 .form__field--medium>input { | |
533 box-sizing: border-box; | |
534 width: 50em; | |
535 max-width: 95%; | |
536 } | |
537 | |
538 .form__field--big>input,textarea { | |
539 box-sizing: border-box; | |
540 width: 100%; | |
541 } | |
542 | |
386 /* Textboxes */ | 543 /* Textboxes */ |
544 | |
545 .textbox { | |
546 margin-left: auto; | |
547 margin-right: auto; | |
548 } | |
387 | 549 |
388 form.textbox>* { | 550 form.textbox>* { |
389 display: block; | 551 display: block; |
390 margin: 1em auto; | 552 margin: 1em auto; |
391 text-align: center; | 553 text-align: center; |
503 | 665 |
504 #main_area { | 666 #main_area { |
505 overflow: auto; | 667 overflow: auto; |
506 } | 668 } |
507 | 669 |
670 /*** boxes ***/ | |
671 | |
508 .box { | 672 .box { |
509 border-radius: 1em; | 673 border-radius: 1em; |
510 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | 674 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); |
675 width: 94%; | |
676 margin: 1em auto; | |
677 border: solid 1px; | |
678 border-color: #9ca0a8; | |
679 } | |
680 | |
681 .box--medium { | |
682 width: 33rem; | |
683 } | |
684 | |
685 .box--hollow { | |
686 border-radius: 0.2em; | |
687 border-width: 1px; | |
688 margin: 0.5em; | |
689 } | |
690 | |
691 /*** Forms ***/ | |
692 | |
693 .form__panel--vertical { | |
694 display: flex; | |
695 flex-direction: column; | |
696 padding: 2em; | |
697 } | |
698 | |
699 .form__field--big>input,textarea { | |
700 box-sizing: border-box; | |
701 width: 95%; | |
511 } | 702 } |
512 | 703 |
513 .main_menu a { | 704 .main_menu a { |
514 display: block; | 705 display: block; |
515 padding: 2em 0; | 706 padding: 2em 0; |
528 padding-top: 3rem; | 719 padding-top: 3rem; |
529 } | 720 } |
530 | 721 |
531 /*** forms ***/ | 722 /*** forms ***/ |
532 | 723 |
533 .form_single .form_submit.button { | 724 .form--single input:not([type="submit"]) { |
534 display: inline; | 725 margin: 0 1em; |
535 } | 726 } |
536 } | 727 |
728 .form--single { | |
729 display: flex; | |
730 justify-content: center; | |
731 flex-direction: row; | |
732 } | |
733 | |
734 .form--single .form_input { | |
735 flex-direction: row; | |
736 } | |
737 } |