comparison sat_templates/templates/default/static/styles.css @ 172:4a03d0a6839b

css (styles): various styles improvments: - work on list - new paired-slides class - box-medium is a larger than before - use --text modified when size is 1em - added several list modifiers classes - added several box modifiers
author Goffi <goffi@goffi.org>
date Sat, 26 Jan 2019 20:22:18 +0100
parents cede18c118c9
children 29214fa3a53b
comparison
equal deleted inserted replaced
171:cede18c118c9 172:4a03d0a6839b
5 :root { 5 :root {
6 --box-bg-color: #efefef; 6 --box-bg-color: #efefef;
7 --box--expand_limit: 20rem; 7 --box--expand_limit: 20rem;
8 --box--expand_height-min: 9rem; 8 --box--expand_height-min: 9rem;
9 --select-bg-color: #ddd; 9 --select-bg-color: #ddd;
10 --size-small: 1.5rem;
10 --size-medium: 3rem; 11 --size-medium: 3rem;
11 --color-prim: #fafafa; 12 --color-prim: #fafafa;
12 --color-prim--light: #ffffff; 13 --color-prim--light: #ffffff;
13 --color-prim--dark: #c7c7c7; 14 --color-prim--dark: #c7c7c7;
14 --color-sec: #448aff; 15 --color-sec: #448aff;
31 height: 100vh; 32 height: 100vh;
32 flex-direction: column; 33 flex-direction: column;
33 box-sizing: border-box; 34 box-sizing: border-box;
34 } 35 }
35 36
36 ul {
37 padding: 0;
38 }
39
40 p { 37 p {
41 margin: 0; 38 margin: 0;
42 } 39 }
43 40
44 blockquote { 41 blockquote {
154 } 151 }
155 152
156 /*********** 153 /***********
157 * Generic * 154 * Generic *
158 ***********/ 155 ***********/
156
157 /** Common Sizes **/
159 158
160 /** Buttons **/ 159 /** Buttons **/
161 160
162 .btn { 161 .btn {
163 padding: 0.3em 0.5em; 162 padding: 0.3em 0.5em;
215 214
216 .labels a>span:hover { 215 .labels a>span:hover {
217 box-shadow: 0px 0px 6px 1px #000; 216 box-shadow: 0px 0px 6px 1px #000;
218 } 217 }
219 218
219 /** heading **/
220 .heading__subtitle {
221 font-size: 2em;
222 text-align: center;
223 }
224
220 /** instructions **/ 225 /** instructions **/
221 226
222 .instructions--head { 227 .instructions--head {
223 font-size: 1.5em; 228 font-size: 1.5em;
224 text-align: center; 229 text-align: center;
231 .instructions--alt { 236 .instructions--alt {
232 text-align: center; 237 text-align: center;
233 font-style: italic; 238 font-style: italic;
234 } 239 }
235 240
241 /** descriptions **/
242
243 .description {
244 padding: 1em;
245 text-align: center;
246 font-size: 1.2em;
247 }
248
249 .description--emphasis {
250 font-weight: bold;
251 }
252
236 /** images **/ 253 /** images **/
237 254
238 .img--center{ 255 .img--center{
239 display: block; 256 display: block;
240 margin: 0 auto; 257 margin: 0 auto;
241 max-width: 100%; 258 max-width: 100%;
242 } 259 }
243 260
261 .img--float-left {
262 float: left;
263 }
264
265 .img--float-right {
266 float: right;
267 }
268
269 .img--inline {
270 vertical-align: middle;
271 }
272
273 .img--inline-bottom {
274 vertical-align: bottom;
275 }
276
277 .img--very-small {
278 height: 2em;
279 }
280
244 .img--small { 281 .img--small {
245 height: 100px; 282 height: 100px;
283 }
284
285 .img--medium {
286 height: 10rem;
287 }
288
289 .img--large {
290 width: 40rem;
246 } 291 }
247 292
248 /** other language **/ 293 /** other language **/
249 294
250 .other_lang.state_init>div.info>p { 295 .other_lang.state_init>div.info>p {
291 .box__content { 336 .box__content {
292 text-align: justify; 337 text-align: justify;
293 } 338 }
294 339
295 .box__content img { 340 .box__content img {
341 margin: 0;
296 max-width: 100%; 342 max-width: 100%;
297 margin: 0;
298 } 343 }
299 344
300 .box__content video { 345 .box__content video {
301 max-width: 100%; 346 max-width: 100%;
302 height: auto; 347 height: auto;
304 349
305 .box__content--plaintext { 350 .box__content--plaintext {
306 white-space: pre-wrap; 351 white-space: pre-wrap;
307 } 352 }
308 353
309
310 .box--large { 354 .box--large {
311 max-width: 80rem; 355 max-width: 60rem;
312 } 356 }
313 357
314 .box--plain { 358 .box--plain {
315 background-color: var(--box-bg-color); 359 background-color: var(--box-bg-color);
316 } 360 }
340 .box--comment { 384 .box--comment {
341 max-width: 40rem; 385 max-width: 40rem;
342 background: var(--color-prim); 386 background: var(--color-prim);
343 } 387 }
344 388
389 .box--middle {
390 margin-left: auto;
391 margin-right: auto;
392 }
393
345 .box--center { 394 .box--center {
346 display: flex; 395 display: flex;
347 align-items: center; 396 align-items: center;
348 justify-content: center; 397 justify-content: center;
398 flex-direction: column;
349 } 399 }
350 400
351 .box--zero { 401 .box--zero {
352 /* box with no padding or decoration, used when we want only the margin */ 402 /* box with no padding or decoration, used when we want only the margin */
353 border: none; 403 border: none;
357 .box--expand { 407 .box--expand {
358 /* a box which is folded when too big */ 408 /* a box which is folded when too big */
359 max-height: var(--box--expand_limit); 409 max-height: var(--box--expand_limit);
360 overflow: hidden; 410 overflow: hidden;
361 transition: max-height 0.5s; 411 transition: max-height 0.5s;
412 }
413
414 .box--quarter-screen{
415 min-height: 25vh;
416 }
417
418 .box--third-screen{
419 min-height: 33vh;
420 }
421
422 .box--half-screen{
423 min-height: 50vh;
424 }
425
426 .box--screen{
427 /* box taking a whole screen */
428 min-height: 100vho
362 } 429 }
363 430
364 .box__expand_zone { 431 .box__expand_zone {
365 /* zone to click to expand/fold the box */ 432 /* zone to click to expand/fold the box */
366 cursor: pointer; 433 cursor: pointer;
513 /********* 580 /*********
514 * lists * 581 * lists *
515 *********/ 582 *********/
516 583
517 .list { 584 .list {
585 padding: 0;
518 list-style: none; 586 list-style: none;
519 display: flex; 587 display: flex;
520 flex-direction: column; 588 flex-direction: column;
589 margin: 0;
590 }
591
592 .list--features {
593 font-variant: small-caps;
594 }
595
596 .list--features svg {
597 margin-right: 0.5em;
598 }
599
600 .list--inline {
601 flex-direction: row;
602 margin: 0;
603 }
604
605 .list__item {
606 margin: 0.5em;
521 } 607 }
522 608
523 .list__item>a { 609 .list__item>a {
524 text-decoration: none; 610 text-decoration: none;
525 color: inherit; 611 color: inherit;
612 }
613
614 .list__item--selected {
615 font-weight: bold;
616 text-decoration: underline;
526 } 617 }
527 618
528 /********* 619 /*********
529 * Grids * 620 * Grids *
530 *********/ 621 *********/
628 719
629 /********* 720 /*********
630 * icons * 721 * icons *
631 *********/ 722 *********/
632 723
724 .icon--block {
725 display: block;
726 margin: 0 auto;
727 }
728
729 .icon--text {
730 height: 1em;
731 vertical-align: middle;
732 }
733
734 .icon--small {
735 height: var(--size-small);
736 }
737
633 .icon--medium { 738 .icon--medium {
634 height: var(--size-medium); 739 height: var(--size-medium);
635 display: block;
636 margin: 0 auto;
637 }
638
639 .icon--small {
640 height: 1em;
641 vertical-align: middle;
642 } 740 }
643 741
644 .icon--soft { 742 .icon--soft {
645 fill: #777; 743 fill: #777;
646 } 744 }
932 1030
933 .log_request { 1031 .log_request {
934 text-align: center; 1032 text-align: center;
935 } 1033 }
936 1034
1035 /*****************
1036 * paired slides *
1037 ****************/
1038
1039 .paired-slides {
1040 display: flex;
1041 flex-direction: row;
1042 flex-wrap: wrap;
1043 }
1044
1045 div.paired-slides:nth-child(odd) {
1046 flex-direction: row-reverse;
1047 }
1048
1049 .paires-slides
1050
1051
937 /************** 1052 /**************
938 * Navigation * 1053 * Navigation *
939 **************/ 1054 **************/
940 1055
941 .prev_next ul { 1056 .prev_next ul {
1108 border: solid 1px; 1223 border: solid 1px;
1109 border-color: #9ca0a8; 1224 border-color: #9ca0a8;
1110 } 1225 }
1111 1226
1112 .box--medium { 1227 .box--medium {
1113 width: 33rem; 1228 width: 43rem;
1114 max-width: 100%; 1229 max-width: 100%;
1115 } 1230 }
1116 1231
1117 .box--hollow { 1232 .box--hollow {
1118 border-radius: 0.2em; 1233 border-radius: 0.2em;
1119 border-width: 1px; 1234 border-width: 1px;
1120 margin: 0.5em; 1235 margin: 0.5em;
1236 }
1237
1238 .box--extra-margin {
1239 margin-top: 5rem;
1240 margin-bottom: 5rem;
1121 } 1241 }
1122 1242
1123 .box--zero { 1243 .box--zero {
1124 box-shadow: none; 1244 box-shadow: none;
1125 border: none; 1245 border: none;
1161 1281
1162 .form--single .form_input { 1282 .form--single .form_input {
1163 flex-direction: row; 1283 flex-direction: row;
1164 } 1284 }
1165 1285
1286 /*****************
1287 * paired slides *
1288 ****************/
1289
1290 .paired-slides {
1291 flex-wrap: nowrap;
1292 }
1293
1294 .paired-slides>*:last-child {
1295 margin-left: 1em;
1296 }
1297
1166 /********* 1298 /*********
1167 * Menus * 1299 * Menus *
1168 *********/ 1300 *********/
1169 1301
1170 .main_menu a { 1302 .main_menu a {