libervia-templates: sat_templates/templates/default/static/styles.css comparison

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

-:cede18c118c9
+:4a03d0a6839b
 :root {
 --box-bg-color: #efefef;
 --box--expand_limit: 20rem;
 --box--expand_height-min: 9rem;
 --select-bg-color: #ddd;
+--size-small: 1.5rem;
 --size-medium: 3rem;
 --color-prim: #fafafa;
 --color-prim--light: #ffffff;
 --color-prim--dark: #c7c7c7;
 --color-sec: #448aff;
 height: 100vh;
 flex-direction: column;
 box-sizing: border-box;
 }
-ul {
-padding: 0;
-}
 p {
 margin: 0;
 }
 blockquote {
 }
 /***********
 * Generic *
 ***********/
+/** Common Sizes **/
 /** Buttons **/
 .btn {
 padding: 0.3em 0.5em;
 .labels a>span:hover {
 box-shadow: 0px 0px 6px 1px #000;
 }
+/** heading **/
+.heading__subtitle {
+font-size: 2em;
+text-align: center;
+}
 /** instructions **/
 .instructions--head {
 font-size: 1.5em;
 text-align: center;
 .instructions--alt {
 text-align: center;
 font-style: italic;
 }
+/** descriptions **/
+.description {
+padding: 1em;
+text-align: center;
+font-size: 1.2em;
+}
+.description--emphasis {
+font-weight: bold;
+}
 /** images **/
 .img--center{
 display: block;
 margin: 0 auto;
 max-width: 100%;
 }
+.img--float-left {
+float: left;
+}
+.img--float-right {
+float: right;
+}
+.img--inline {
+vertical-align: middle;
+}
+.img--inline-bottom {
+vertical-align: bottom;
+}
+.img--very-small {
+height: 2em;
+}
 .img--small {
 height: 100px;
+}
+.img--medium {
+height: 10rem;
+}
+.img--large {
+width: 40rem;
 }
 /** other language **/
 .other_lang.state_init>div.info>p {
 .box__content {
 text-align: justify;
 }
 .box__content img {
+margin: 0;
 max-width: 100%;
-margin: 0;
 }
 .box__content video {
 max-width: 100%;
 height: auto;
 .box__content--plaintext {
 white-space: pre-wrap;
 }
 .box--large {
-max-width: 80rem;
+max-width: 60rem;
 }
 .box--plain {
 background-color: var(--box-bg-color);
 }
 .box--comment {
 max-width: 40rem;
 background: var(--color-prim);
 }
+.box--middle {
+margin-left: auto;
+margin-right: auto;
+}
 .box--center {
 display: flex;
 align-items: center;
 justify-content: center;
+flex-direction: column;
 }
 .box--zero {
 /* box with no padding or decoration, used when we want only the margin */
 border: none;
 .box--expand {
 /* a box which is folded when too big */
 max-height: var(--box--expand_limit);
 overflow: hidden;
 transition: max-height 0.5s;
+}
+.box--quarter-screen{
+min-height: 25vh;
+}
+.box--third-screen{
+min-height: 33vh;
+}
+.box--half-screen{
+min-height: 50vh;
+}
+.box--screen{
+/* box taking a whole screen */
+min-height: 100vho
 }
 .box__expand_zone {
 /* zone to click to expand/fold the box */
 cursor: pointer;
 /*********
 * lists *
 *********/
 .list {
+padding: 0;
 list-style: none;
 display: flex;
 flex-direction: column;
+margin: 0;
+}
+.list--features {
+font-variant: small-caps;
+}
+.list--features svg {
+margin-right: 0.5em;
+}
+.list--inline {
+flex-direction: row;
+margin: 0;
+}
+.list__item {
+margin: 0.5em;
 }
 .list__item>a {
 text-decoration: none;
 color: inherit;
+}
+.list__item--selected {
+font-weight: bold;
+text-decoration: underline;
 }
 /*********
 * Grids *
 *********/
 /*********
 * icons *
 *********/
+.icon--block {
+display: block;
+margin: 0 auto;
+}
+.icon--text {
+height: 1em;
+vertical-align: middle;
+}
+.icon--small {
+height: var(--size-small);
+}
 .icon--medium {
 height: var(--size-medium);
-display: block;
-margin: 0 auto;
-}
-.icon--small {
-height: 1em;
-vertical-align: middle;
 }
 .icon--soft {
 fill: #777;
 }
 .log_request {
 text-align: center;
 }
+/*****************
+* paired slides *
+****************/
+.paired-slides {
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+}
+div.paired-slides:nth-child(odd) {
+flex-direction: row-reverse;
+}
+.paires-slides
 /**************
 * Navigation *
 **************/
 .prev_next ul {
 border: solid 1px;
 border-color: #9ca0a8;
 }
 .box--medium {
-width: 33rem;
+width: 43rem;
 max-width: 100%;
 }
 .box--hollow {
 border-radius: 0.2em;
 border-width: 1px;
 margin: 0.5em;
+}
+.box--extra-margin {
+margin-top: 5rem;
+margin-bottom: 5rem;
 }
 .box--zero {
 box-shadow: none;
 border: none;
 .form--single .form_input {
 flex-direction: row;
 }
+/*****************
+* paired slides *
+****************/
+.paired-slides {
+flex-wrap: nowrap;
+}
+.paired-slides>*:last-child {
+margin-left: 1em;
+}
 /*********
 * Menus *
 *********/
 .main_menu a {

Mercurial > libervia-templates

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