2020-01-16 21:05:39 +01:00
@ import "fonts.css" ;
2020-01-15 21:45:24 +01:00
2019-11-26 16:21:29 +01:00
: root {
font-family : "Fira Sans" ;
line-height : 1 . 15 ;
2020-01-25 22:13:26 +01:00
--u5 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u4 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u3 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u2 : calc ( 1em * 1 . 5 * 1 . 5 ) ;
--u1 : calc ( 1em * 1 . 5 ) ;
--u0 : calc ( 1em ) ;
2019-11-26 16:21:29 +01:00
--u-1 : calc ( 1em * 0 . 666 ) ;
--u-2 : calc ( 1em * 0 . 666 * 0 . 666 ) ;
--u-3 : calc ( 1em * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--u-4 : calc ( 1em * 0 . 666 * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--root-c-base : # ecf0f1 ;
2020-01-23 22:11:14 +01:00
--root-c-base-highlight : # FFF ;
2019-11-26 16:21:29 +01:00
--root-c-primary : # 1abc9c ;
--root-c-primary-highlight : # 16a085 ;
--root-c-secondary : # 9b59b6 ;
--root-c-secondary-highlight : # 8e44ad ;
--root-c-black : # 2c3e50 ;
--root-c-black-highlight : # 34495e ;
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
2020-01-15 21:31:52 +01:00
--c-primary : var ( --root-c-primary ) ;
2019-11-26 16:21:29 +01:00
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
2020-01-18 14:01:35 +01:00
--c-secondary : var ( --root-c-secondary ) ;
2019-11-26 16:21:29 +01:00
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-black ) ;
--c-black-highlight : var ( --root-c-black-highlight ) ;
2020-01-12 17:59:56 +01:00
--c-error : # c0392b ;
2019-11-26 16:21:29 +01:00
}
. primary {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-primary : var ( --root-c-primary ) ;
2019-11-26 16:21:29 +01:00
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-black ) ;
2020-01-23 19:50:55 +01:00
--c-black-highlight : var ( --root-c-black-highlight ) ;
2019-11-26 16:21:29 +01:00
}
. secondary {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-primary : var ( --root-c-secondary ) ;
2019-11-26 16:21:29 +01:00
--c-primary-highlight : var ( --root-c-secondary-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-secondary : var ( --root-c-primary ) ;
--c-secondary-highlight : var ( --root-c-primary-highlight ) ;
--c-black : var ( --root-c-black ) ;
--c-black-highlight : var ( --root-c-black-highlight ) ;
}
2019-11-26 16:21:29 +01:00
2020-01-25 22:13:26 +01:00
. black {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
--c-primary : var ( --root-c-black ) ;
--c-primary-highlight : var ( --root-c-black-highlight ) ;
2019-11-26 16:21:29 +01:00
--c-secondary : var ( --root-c-primary ) ;
--c-secondary-highlight : var ( --root-c-primary-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-black : var ( --root-c-primary ) ;
--c-black-highlight : var ( --root-c-primary-highlight ) ;
}
2019-11-26 16:21:29 +01:00
2020-01-25 22:13:26 +01:00
. black-as-highlight {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--c-primary-highlight : var ( --root-c-black-highlight ) ;
--c-secondary : var ( --root-c-secondary ) ;
--c-secondary-highlight : var ( --root-c-black-highlight ) ;
2019-11-26 16:21:29 +01:00
--c-black : var ( --root-c-black ) ;
--c-black-highlight : var ( --root-c-black-highlight ) ;
}
. inverted {
--c-base : var ( --root-c-black ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-primary : var ( --root-c-primary ) ;
2019-11-26 16:21:29 +01:00
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-base ) ;
--c-black-highlight : var ( --root-c-base-highlight ) ;
}
2020-01-23 19:50:55 +01:00
. bg-base {
background-color : var ( --root-c-base ) ;
}
. bg-base {
background-color : var ( --root-c-base ) ;
}
. bg-base-highlight {
background-color : var ( --root-c-base-highlight ) ;
}
. bg-primary {
background-color : var ( --root-c-primary ) ;
}
. bg-primary-highlight {
background-color : var ( --root-c-primary-highlight ) ;
}
. bg-secondary {
background-color : var ( --root-c-secondary ) ;
}
. bg-secondary-highlight {
background-color : var ( --root-c-secondary-highlight ) ;
}
. bg-black {
background-color : var ( --root-c-black ) ;
}
. bg-black-highlight {
background-color : var ( --root-c-black-highlight ) ;
}
2020-01-25 22:13:26 +01:00
. highlight > * ,
2020-01-23 19:50:55 +01:00
. highlight {
--c-base : var ( --root-c-black ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
2020-01-25 22:13:26 +01:00
--c-primary : var ( --root-c-primary ) ;
2020-01-23 19:50:55 +01:00
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-base ) ;
--c-black-highlight : var ( --root-c-base-highlight ) ;
}
2020-01-25 19:11:41 +01:00
. huge {
--u5 : calc ( 3 . 375rem * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u4 : calc ( 3 . 375rem * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u3 : calc ( 3 . 375rem * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u2 : calc ( 3 . 375rem * 1 . 5 * 1 . 5 ) ;
--u1 : calc ( 3 . 375rem * 1 . 5 ) ;
--u0 : calc ( 3 . 375rem ) ;
--u-1 : calc ( 3 . 375rem * 0 . 666 ) ;
--u-2 : calc ( 3 . 375rem * 0 . 666 * 0 . 666 ) ;
--u-3 : calc ( 3 . 375rem * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--u-4 : calc ( 3 . 375rem * 0 . 666 * 0 . 666 * 0 . 666 * 0 . 666 ) ;
}
2020-01-12 18:00:14 +01:00
. smaller {
--u5 : calc ( 0 . 666em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u4 : calc ( 0 . 666em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u3 : calc ( 0 . 666em * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u2 : calc ( 0 . 666em * 1 . 5 * 1 . 5 ) ;
--u1 : calc ( 0 . 666em * 1 . 5 ) ;
--u0 : calc ( 0 . 666em ) ;
--u-1 : calc ( 0 . 666em * 0 . 666 ) ;
--u-2 : calc ( 0 . 666em * 0 . 666 * 0 . 666 ) ;
--u-3 : calc ( 0 . 666em * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--u-4 : calc ( 0 . 666em * 0 . 666 * 0 . 666 * 0 . 666 * 0 . 666 ) ;
}
2019-11-26 16:21:29 +01:00
* {
2020-01-25 22:13:26 +01:00
margin : 0em ;
padding : 0em ;
box-sizing : border-box ;
2019-11-26 16:21:29 +01:00
}
html , body {
2020-01-25 22:13:26 +01:00
font-size : var ( --u0 ) ;
height : 100 % ;
background-color : var ( --c-base ) ;
color : var ( --c-black )
2019-11-26 16:21:29 +01:00
}
2020-01-12 15:52:45 +01:00
main {
min-height : 100 % ;
}
2019-11-26 16:21:29 +01:00
h1 , h2 , h3 , h4 , h5 {
font-family : "Fira Mono" ;
2020-01-12 15:56:26 +01:00
padding-top : var ( --u0 ) ;
padding-bottom : var ( --u-1 ) ;
2019-11-26 16:21:29 +01:00
text-transform : uppercase ;
}
2020-01-15 21:31:52 +01:00
a {
text-decoration : underline ;
color : inherit ;
}
a : visited {
2020-01-25 22:13:26 +01:00
color : none ;
2020-01-15 21:31:52 +01:00
}
2020-01-25 13:59:08 +01:00
a . section {
text-decoration : none ;
}
2020-01-12 15:52:45 +01:00
p {
2020-01-12 15:56:26 +01:00
padding-top : var ( --u0 ) ;
padding-bottom : var ( --u0 ) ;
2020-01-12 15:52:45 +01:00
}
2019-11-26 16:21:29 +01:00
h1 {
font-size : var ( --u2 ) ;
}
h2 {
font-size : var ( --u1 ) ;
}
h3 , h4 , h5 {
font-size : var ( --u0 ) ;
}
img {
width : 100 % ;
object-fit : cover ;
}
2020-01-25 22:13:26 +01:00
img . icon {
height : 2rem ;
}
2019-11-26 16:21:29 +01:00
li {
2020-01-25 22:13:26 +01:00
list-style-type : none ;
2019-11-26 16:21:29 +01:00
}
2020-01-12 15:52:45 +01:00
table {
width : 100 % ;
border-collapse : collapse ;
}
table td ,
table th {
padding : var ( --u0 ) ;
text-align : center ;
}
table th {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
table tr : nth-child ( 2n + 1 ) {
background-color : var ( --c-base-highlight ) ;
}
2020-01-25 20:30:26 +01:00
table . key-value {
width : inherit ;
border-collapse : collapse ;
}
table . key-value th {
text-align : right ;
font-family : "Fira Mono" ;
text-transform : uppercase ;
background-color : var ( --c-base ) ;
color : var ( --c-black ) ;
}
table . key-value tr {
background-color : var ( --c-base ) ;
}
table . key-value td {
text-align : left ;
}
2020-01-16 21:05:39 +01:00
img . xs {
width : var ( --u2 ) ;
}
img . s {
width : var ( --u4 ) ;
}
img . m {
width : var ( --u8 ) ;
}
2019-11-26 16:21:29 +01:00
/ *
* NAV
* /
2020-01-25 22:13:26 +01:00
nav { }
2020-01-12 15:52:45 +01:00
2019-11-26 16:21:29 +01:00
nav h1 {
font-size : var ( --u0 ) ;
margin : 0rem ;
}
2020-01-12 15:52:45 +01:00
nav li {
display : flex ;
flex-direction : column ;
}
nav li li {
margin-left : var ( --u0 ) ;
}
nav li a {
padding : var ( --u0 ) ;
2020-01-25 22:13:26 +01:00
transition : background-color 0 . 1s ease-out ;
2020-01-12 15:52:45 +01:00
}
2019-11-26 16:21:29 +01:00
2020-01-12 15:52:45 +01:00
nav li a : hover ,
nav li a . selected {
padding : var ( --u0 ) ;
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
2019-11-26 16:21:29 +01:00
/ *
* FOOTER
* /
footer {
padding-top : var ( --u3 ) ;
2020-01-25 22:13:26 +01:00
padding-bottom : var ( --u1 ) ;
2019-11-26 16:21:29 +01:00
}
/ *
* INPUTS
* /
2020-01-23 22:11:14 +01:00
textarea ,
input [ list ] ,
2020-01-27 20:37:54 +01:00
input [ type = "number" ] ,
2019-11-26 16:21:29 +01:00
input [ type = "text" ] ,
input [ type = "password" ] {
background-color : var ( --c-base ) ;
2020-01-23 22:11:14 +01:00
font-size : var ( --u0 ) ;
2019-11-26 16:21:29 +01:00
border : none ;
2020-01-25 15:04:55 +01:00
/*border-radius: var(--u-2);*/
2019-11-26 16:21:29 +01:00
margin-top : var ( --u0 ) ;
margin-bottom : var ( --u0 ) ;
padding : var ( --u0 ) ;
font-size : var ( --u0 ) ;
color : var ( --c-black ) ;
2020-01-23 22:11:14 +01:00
background-color : var ( --c-base-highlight ) ;
2020-01-25 22:13:26 +01:00
box-shadow : var ( --s-0-secondary ) ;
2020-01-23 22:11:14 +01:00
}
textarea {
font-family : "Fira Mono" ;
2019-11-26 16:21:29 +01:00
}
2020-01-25 22:13:26 +01:00
2020-01-23 19:50:55 +01:00
/ *
2020-01-12 17:59:56 +01:00
input [ type = "text" ] : invalid ,
input [ type = "password" ] : invalid {
background-color : var ( --c-error ) ;
color : var ( --c-base ) ;
2020-01-23 19:50:55 +01:00
} * /
2020-01-23 22:11:14 +01:00
textarea :: placeholder ,
input [ list ] :: placeholder ,
2019-11-26 16:21:29 +01:00
input [ type = "text" ] :: placeholder ,
2020-01-25 22:13:26 +01:00
input [ type = "password" ] :: placeholder {
color : var ( --c-primary-highlight ) ;
opacity : 50 % ;
2019-11-26 16:21:29 +01:00
}
2020-01-12 15:52:45 +01:00
button , . button {
2020-02-03 20:53:02 +01:00
display : inline-block ;
2019-11-26 16:21:29 +01:00
font-family : "Fira Mono" ;
2020-01-12 15:52:45 +01:00
font-weight : bold ;
2020-01-15 21:31:52 +01:00
text-decoration : none ;
2020-01-15 21:35:21 +01:00
text-align : center ;
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
border : none ;
2020-01-25 15:04:55 +01:00
/*border-radius: var(--u-2);*/
2019-11-26 16:21:29 +01:00
margin-bottom : var ( --u0 ) ;
margin-top : var ( --u0 ) ;
padding : var ( --u0 ) ;
min-width : 10em ;
font-family : "Fira Mono" ;
text-transform : uppercase ;
font-size : var ( --u0 ) ;
/* box-shadow: var(--s-0-secondary); */
}
2020-01-12 15:52:45 +01:00
button : active , . button : active {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary-highlight ) ;
}
input [ type = "text" ] ,
input [ type = "password" ] ,
2020-01-23 22:11:14 +01:00
input [ list ] ,
2019-11-26 16:21:29 +01:00
button ,
. button {
2020-01-25 22:13:26 +01:00
transition : background-color 0 . 1s ease-out ;
2019-11-26 16:21:29 +01:00
}
label {
display : block ;
min-width : 10em ;
2020-01-12 15:52:45 +01:00
font-weight : bold ;
2019-11-26 16:21:29 +01:00
}
2020-01-18 14:01:35 +01:00
label . nolinebreak {
2020-01-25 22:13:26 +01:00
display : inline ;
2020-01-18 14:01:35 +01:00
}
2020-01-16 21:05:39 +01:00
input . linestyle {
background-color : transparent ;
border-bottom : var ( --u-4 ) solid var ( --c-primary ) ;
border-radius : 0px ;
padding : 0px ;
}
2020-01-16 21:39:55 +01:00
fieldset {
2020-01-25 22:13:26 +01:00
border : none ;
2020-01-16 21:39:55 +01:00
}
2020-01-23 22:11:14 +01:00
fieldset label {
display : inline-block ;
}
2020-01-16 21:05:39 +01:00
2020-01-27 20:37:54 +01:00
input [ type = number ] {
text-align : right ;
-moz-appearance : textfield ;
}
input [ type = "number" ] : focus {
-moz-appearance : number-input ;
}
2019-11-26 16:21:29 +01:00
/ *
* HERO
* /
. hero {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
. hero > * {
2020-01-23 22:11:14 +01:00
--c-primary : var ( --root-c-primary-highlight ) ;
--c-primary-highlight : var ( --root-c-primary ) ;
}
2020-01-25 22:13:26 +01:00
. header . hero > * {
--c-primary : var ( --root-c-primary ) ;
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
}
2019-11-26 16:21:29 +01:00
. hero-black {
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
. primarytext {
color : var ( --c-primary )
2020-01-18 14:01:35 +01:00
}
2020-01-25 22:13:26 +01:00
. secondarytext {
color : var ( --c-secondary )
2020-01-18 14:01:35 +01:00
}
2019-11-26 16:21:29 +01:00
/ *
* LAYOUT
* /
. content-width {
2020-01-25 22:13:26 +01:00
max-width : 80rem ;
margin-left : auto ;
margin-right : auto ;
padding-left : var ( --u0 ) ;
padding-right : var ( --u0 ) ;
2019-11-26 16:21:29 +01:00
}
2020-01-16 21:05:39 +01:00
. full-width {
width : 100 % ;
}
2020-01-25 20:30:26 +01:00
. flowflex {
display : flex ;
flex-direction : row ;
justify-content : stretch ;
flex-wrap : wrap ;
}
2020-01-25 22:13:26 +01:00
. flowflex > * {
2020-01-25 20:30:26 +01:00
padding : var ( --u0 ) ;
flex : 1 ;
}
2020-01-25 22:13:26 +01:00
. flowflex > * . spacer {
2020-01-25 20:30:26 +01:00
padding-top : 0px ;
padding-bottom : 0px ;
}
2020-01-23 22:11:14 +01:00
. detailflex {
display : flex ;
flex-direction : row ;
justify-content : center ;
align-items : stretch ;
flex-wrap : wrap ;
}
. detailflex . s {
max-width : calc ( 20rem + var ( --u0 ) * 2 ) ;
margin-left : auto ;
margin-right : auto ;
}
. detailflex . m {
max-width : calc ( 40rem + var ( --u0 ) * 3 ) ;
margin-left : auto ;
margin-right : auto ;
}
. detailflex . l {
max-width : calc ( 20rem + var ( --u0 ) * 5 ) ;
margin-left : auto ;
margin-right : auto ;
}
2020-01-25 22:13:26 +01:00
. detailflex > * {
2020-01-23 22:11:14 +01:00
min-width : 100 % ;
padding : var ( --u0 ) ;
flex : 1 ;
}
2020-01-25 22:13:26 +01:00
. detailflex > . col-2 {
2020-01-23 22:11:14 +01:00
display : flex ;
justify-content : flex-start ;
flex-wrap : wrap ;
align-items : wrap ;
padding : 0px ;
}
2020-01-25 22:13:26 +01:00
. detailflex > . col-2 > * {
2020-01-23 22:11:14 +01:00
min-width : calc ( 15rem + var ( --u0 ) * 3 ) ;
flex : 1 ;
padding : var ( --u0 ) ;
}
2020-01-16 21:05:39 +01:00
. detailgrid {
display : grid ;
2020-02-03 20:53:02 +01:00
grid-auto-flow : row ;
2020-01-23 22:11:14 +01:00
min-width : 20rem ;
2020-01-16 21:05:39 +01:00
grid-template-columns : repeat ( auto-fit , minmax ( 20rem , 1fr ) ) ;
grid-template-rows : auto ;
grid-column-gap : var ( --u0 ) ;
2020-01-16 21:39:55 +01:00
grid-row-gap : var ( --u0 ) ;
2020-01-16 21:05:39 +01:00
}
2020-01-23 19:50:55 +01:00
. detailgrid . s {
max-width : calc ( 20rem + var ( --u0 ) * 2 ) ;
margin-left : auto ;
margin-right : auto ;
}
2020-01-23 22:11:14 +01:00
. detailgrid . m {
max-width : calc ( 40rem + var ( --u0 ) * 3 ) ;
margin-left : auto ;
margin-right : auto ;
}
. detailgrid . l {
max-width : calc ( 20rem + var ( --u0 ) * 5 ) ;
margin-left : auto ;
margin-right : auto ;
}
2020-01-25 22:13:26 +01:00
. detailgrid > . s {
2020-01-16 21:05:39 +01:00
grid-column : span 1 ;
}
2020-01-25 22:13:26 +01:00
. detailgrid > . m {
2020-01-16 21:05:39 +01:00
grid-column : span 2 ;
}
2020-01-25 22:13:26 +01:00
. detailgrid > . l {
2020-01-16 21:05:39 +01:00
grid-column : span 3 ;
}
2020-01-25 22:13:26 +01:00
. detailgrid > . spacer {
2020-01-16 21:05:39 +01:00
grid-column : span 3 ;
height : 0px ;
}
2020-01-12 15:52:45 +01:00
. bar-flex {
2019-11-26 16:21:29 +01:00
display : flex ;
align-items : center ;
justify-content : space-between ;
flex-wrap : wrap ;
}
2020-01-25 22:13:26 +01:00
. bar-flex > * {
2019-11-26 16:21:29 +01:00
margin : var ( --u0 ) ;
}
2020-01-25 22:13:26 +01:00
. bar-flex > . spacer {
2020-01-12 15:52:45 +01:00
flex : 1 ;
}
. sidebar-layout {
display : flex ;
align-items : stretch ;
justify-content : center ;
flex-wrap : wrap ;
}
2020-01-25 22:13:26 +01:00
. sidebar-layout > * {
2020-01-25 15:04:55 +01:00
min-width : 15rem ;
}
2020-01-25 22:13:26 +01:00
. sidebar-layout > * : nth-child ( 2 ) {
2019-11-26 16:21:29 +01:00
flex : 1 ;
}
. grid {
display : flex ;
justify-content : flex-start ;
flex-wrap : wrap ;
}
2020-01-12 15:52:45 +01:00
. grid . vertical-center {
align-items : center ;
height : 100 % ;
}
. grid . center {
justify-content : space-around ;
}
2020-01-25 22:13:26 +01:00
. grid > * {
flex : 1 ;
margin : var ( --u0 ) ;
padding : var ( --u0 ) ;
/*border-radius: var(--u0);*/
2020-01-25 15:04:55 +01:00
}
2020-01-25 22:13:26 +01:00
. grid . condensed > * {
flex : 1 ;
padding : 0px ;
2019-11-26 16:21:29 +01:00
}
2020-01-25 22:13:26 +01:00
. grid . base > * {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-base ) ;
color : var ( --c-black ) ;
}
2020-01-25 22:13:26 +01:00
. grid . black > * {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
. grid . primary > * {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
. grid . secondary > * {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary-highlight ) ;
color : var ( --c-base ) ;
}
2020-01-25 22:13:26 +01:00
. hero-primary . grid . shadow > * {
2019-11-26 16:21:29 +01:00
/* box-shadow: var(--s-0-secondary); */
}
2020-01-25 22:13:26 +01:00
. hero-black . grid . shadow > * {
2019-11-26 16:21:29 +01:00
/* box-shadow: var(--s-0-secondary); */
}
2020-01-25 22:13:26 +01:00
. grid . s > . spacer {
2019-11-26 16:21:29 +01:00
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 10rem ;
max-width : 10rem ;
min-width : 7 . 5rem ;
height : 0px ;
}
2020-01-25 22:13:26 +01:00
. grid . s > * {
2019-11-26 16:21:29 +01:00
max-width : 10rem ;
min-width : 7 . 5rem ;
}
2020-01-25 22:13:26 +01:00
. grid . m > . spacer {
2019-11-26 16:21:29 +01:00
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
2020-01-25 22:13:26 +01:00
. grid . m > * {
2019-11-26 16:21:29 +01:00
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
}
2020-01-25 22:13:26 +01:00
. grid . l > . spacer {
2019-11-26 16:21:29 +01:00
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
2020-01-25 22:13:26 +01:00
. grid . l > * {
2019-11-26 16:21:29 +01:00
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
}
2020-01-25 22:13:26 +01:00
. grid . xl > . spacer {
2020-01-25 19:11:41 +01:00
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 80rem ;
max-width : 80rem ;
2020-02-04 21:30:21 +01:00
min-width : 20rem ;
2020-01-25 19:11:41 +01:00
height : 0px ;
padding : 0px ;
}
2020-01-25 22:13:26 +01:00
. grid . xl > * {
2020-01-25 19:11:41 +01:00
width : 80rem ;
max-width : 40rem ;
min-width : 20rem ;
}
2019-11-26 16:21:29 +01:00
. vertical-spacer . s {
min-height : 10rem ;
}
. vertical-spacer . m {
min-height : 20rem ;
}
. vertical-spacer . l {
min-height : 40rem ;
}
2020-01-23 22:11:14 +01:00
. modal {
display : flex ;
align-items : center ;
justify-content : center ;
}
2020-01-25 22:13:26 +01:00
. modal > * {
2020-01-25 15:04:55 +01:00
/*border-radius: var(--u0);*/
2020-01-23 22:11:14 +01:00
padding : var ( --u0 ) ;
flex : 1 ;
}
2019-11-26 16:21:29 +01:00
/ *
* Impov
* /
. input-icon {
/* box-shadow: var(--s-0-secondary); */
display : flex ;
padding : 0px ;
2020-01-25 15:04:55 +01:00
/*border-radius: var(--u0);*/
2019-11-26 16:21:29 +01:00
}
2020-01-25 22:13:26 +01:00
. input-icon > input {
2019-11-26 16:21:29 +01:00
flex : 1 ;
margin : 0px ;
border-top-right-radius : 0px ;
border-bottom-right-radius : 0px ;
box-shadow : none ;
}
2020-01-25 22:13:26 +01:00
. input-icon > button {
2019-11-26 16:21:29 +01:00
margin : 0px ;
border-top-left-radius : 0px ;
border-bottom-left-radius : 0px ;
box-shadow : none ;
}
/ *
* CONTENT
* /
2020-01-25 22:13:26 +01:00
. notification { }
2020-01-25 20:30:26 +01:00
. notification : hover {
background-color : var ( --c-base-highlight ) ;
}
. notification . unread {
background-color : var ( --c-primary ) ;
}
2020-01-25 22:13:26 +01:00
. notification . unread > * {
2020-01-25 20:30:26 +01:00
--c-primary : var ( --root-c-primary-highlight ) ;
--c-primary-highlight : var ( --root-c-primary ) ;
}
. notification . unread : hover {
background-color : var ( --c-primary ) ;
}
2020-01-25 16:12:53 +01:00
. card {
padding : var ( --u0 ) ;
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
. card . s {
width : 10rem ;
}
. card . m {
width : 20rem ;
}
. card . l {
width : 40rem ;
}
2019-11-26 16:21:29 +01:00
. price {
opacity : 75 % ;
font-size : var ( --u1 ) ;
text-align : right ;
}
2020-01-18 14:01:35 +01:00
2020-01-18 15:34:54 +01:00
. center-text {
2020-01-25 22:13:26 +01:00
text-align : center ;
2020-01-18 15:34:54 +01:00
}
2020-01-25 16:12:53 +01:00
. no-padding {
padding : 0px ;
2020-01-20 20:59:35 +01:00
}
2020-01-25 22:13:26 +01:00
2020-01-25 16:12:53 +01:00
. no-margin {
margin : 0px ;
2020-01-20 20:59:35 +01:00
}
2020-01-25 22:17:16 +01:00
2020-02-01 14:23:13 +01:00
. logo {
object-fit : fill ;
height : var ( --u3 ) ;
display : block ;
}
2020-02-03 20:53:02 +01:00
th . r ,
td . r {
text-align : right ;
}
th . l ,
td . l {
text-align : left ;
}
2020-01-25 22:17:16 +01:00
/ * * *
THE UGLY
TODO : Refactor
* * * * /
. dropdown {
width : 12 . 5rem ;
display : block ;
}
. dropdown-content {
display : none ;
position : absolute ;
}
2020-01-27 20:37:54 +01:00
2020-01-25 22:17:16 +01:00
. dropdown . dropdown-button {
display : block ;
width : 12 . 5rem ;
margin-top : 0px ;
margin-bottom : 0px ;
}
2020-01-27 20:37:54 +01:00
. dropdown : hover . dropdown-content { }
2020-01-25 22:17:16 +01:00
. dropdown : hover . dropdown-button {
display : inline-block ;
background-color : var ( --root-c-black ) ;
width : 12 . 5rem ;
margin : 0px ;
}
. dropdown : hover . dropdown-content {
display : flex ;
flex-direction : column ;
align-items : stretch ;
}
. dropdown : hover . dropdown-content > * {
margin : 0px ;
width : 12 . 5rem ;
}