Mercurial > libervia-templates

comparison sat_templates/default/static/styles.css @ 155:954759f0e8fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }