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 ;
--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 ) ;
--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 ) ;
--c-primary : var ( --root-c-primary ) ;
--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 ) ;
--c-primary : var ( --root-c-secondary ) ;
--c-primary-highlight : var ( --root-c-secondary-highlight ) ;
--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 ) ;
}
. inverted {
--c-base : var ( --root-c-black ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--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 ) ;
}
. highlight > * ,
. highlight {
--c-base : var ( --root-c-black ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--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 19:11:41 +01:00
2019-11-26 16:21:29 +01:00
* {
margin : 0em ;
padding : 0em ;
box-sizing : border-box ;
}
html , body {
font-size : var ( --u0 ) ;
height : 100 % ;
background-color : var ( --c-base ) ;
color : var ( --c-black )
}
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 {
color : inherit ;
}
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 ;
}
li {
list-style-type : none ;
}
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-12 15:52:45 +01:00
nav {
}
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 ) ;
transition : all 0 . 1s ease-out ;
}
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 ) ;
}
2019-11-26 16:21:29 +01:00
/ *
* FOOTER
* /
footer {
padding-top : var ( --u3 ) ;
padding-bottom : var ( --u1 ) ;
}
/ *
* INPUTS
* /
2020-01-23 22:11:14 +01:00
textarea ,
input [ list ] ,
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 ) ;
box-shadow : var ( --s-0-secondary ) ;
}
textarea {
font-family : "Fira Mono" ;
2019-11-26 16:21:29 +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 ,
input [ type = "password" ] :: placeholder {
color : var ( --c-primary-highlight ) ;
opacity : 50 % ;
}
2020-01-12 15:52:45 +01:00
button , . button {
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-25 15:04:55 +01:00
nav button . bg-none ,
nav . button . bg-none {
background-color : transparent ;
}
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 {
transition : all 0 . 1s ease-out ;
}
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 {
display : inline ;
}
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 {
border : none ;
}
2020-01-23 22:11:14 +01:00
fieldset label {
display : inline-block ;
}
2020-01-16 21:05:39 +01:00
2019-11-26 16:21:29 +01:00
/ *
* HERO
* /
. hero {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
2020-01-23 22:11:14 +01:00
. hero > * {
--c-primary : var ( --root-c-primary-highlight ) ;
--c-primary-highlight : var ( --root-c-primary ) ;
}
2019-11-26 16:21:29 +01:00
. hero-black {
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
2020-01-18 14:01:35 +01:00
. primarytext {
color : var ( --c-primary )
}
. secondarytext {
color : var ( --c-secondary )
}
2019-11-26 16:21:29 +01:00
/ *
* LAYOUT
* /
. content-width {
max-width : 80rem ;
margin-left : auto ;
margin-right : auto ;
padding-left : var ( --u0 ) ;
padding-right : var ( --u0 ) ;
}
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 ;
}
. flowflex > * {
padding : var ( --u0 ) ;
flex : 1 ;
}
. flowflex > * . spacer {
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 ;
}
. detailflex > * {
min-width : 100 % ;
padding : var ( --u0 ) ;
flex : 1 ;
}
. detailflex > . col-2 {
display : flex ;
justify-content : flex-start ;
flex-wrap : wrap ;
align-items : wrap ;
padding : 0px ;
}
. detailflex > . col-2 > * {
min-width : calc ( 15rem + var ( --u0 ) * 3 ) ;
flex : 1 ;
padding : var ( --u0 ) ;
}
2020-01-16 21:05:39 +01:00
. detailgrid {
display : grid ;
2020-01-23 22:11:14 +01:00
grid-auto-flow : dense ;
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-16 21:05:39 +01:00
. detailgrid > . s {
grid-column : span 1 ;
}
. detailgrid > . m {
grid-column : span 2 ;
}
. detailgrid > . l {
grid-column : span 3 ;
}
. detailgrid > . spacer {
grid-column : span 3 ;
height : 0px ;
}
2020-01-23 22:11:14 +01:00
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-12 15:52:45 +01:00
. bar-flex > * {
2019-11-26 16:21:29 +01:00
margin : var ( --u0 ) ;
}
2020-01-12 15:52:45 +01:00
. bar-flex > . spacer {
flex : 1 ;
}
. sidebar-layout {
display : flex ;
align-items : stretch ;
justify-content : center ;
flex-wrap : wrap ;
}
2020-01-25 15:04:55 +01:00
. sidebar-layout > * {
min-width : 15rem ;
}
2020-01-12 15:52:45 +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 ;
}
2019-11-26 16:21:29 +01:00
. grid > * {
flex : 1 ;
margin : var ( --u0 ) ;
padding : var ( --u0 ) ;
2020-01-25 15:04:55 +01:00
/*border-radius: var(--u0);*/
}
. grid . condensed > * {
flex : 1 ;
padding : 0px ;
2019-11-26 16:21:29 +01:00
}
. grid . base > * {
background-color : var ( --c-base ) ;
color : var ( --c-black ) ;
}
. grid . black > * {
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
. grid . primary > * {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
. grid . secondary > * {
background-color : var ( --c-primary-highlight ) ;
color : var ( --c-base ) ;
}
. hero-primary . grid . shadow > * {
/* box-shadow: var(--s-0-secondary); */
}
. hero-black . grid . shadow > * {
/* box-shadow: var(--s-0-secondary); */
}
. grid . s > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 10rem ;
max-width : 10rem ;
min-width : 7 . 5rem ;
height : 0px ;
}
. grid . s > * {
max-width : 10rem ;
min-width : 7 . 5rem ;
}
. grid . m > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
. grid . m > * {
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
}
. grid . l > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
. grid . l > * {
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
}
2020-01-25 19:11:41 +01:00
. grid . xl > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 80rem ;
max-width : 80rem ;
min-width : 30rem ;
height : 0px ;
padding : 0px ;
}
. grid . xl > * {
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 ;
}
. 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
}
. input-icon > input {
flex : 1 ;
margin : 0px ;
border-top-right-radius : 0px ;
border-bottom-right-radius : 0px ;
box-shadow : none ;
}
2020-01-12 15:52:45 +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 20:30:26 +01:00
. notification {
}
. notification : hover {
background-color : var ( --c-base-highlight ) ;
}
. notification . unread {
background-color : var ( --c-primary ) ;
}
. notification . unread > * {
--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 {
text-align : center ;
}
2020-01-25 16:12:53 +01:00
. no-padding {
padding : 0px ;
2020-01-20 20:59:35 +01:00
}
2020-01-25 16:12:53 +01:00
. no-margin {
margin : 0px ;
2020-01-20 20:59:35 +01:00
}