:root { /* theme */ --theme-root-font-size: 14px; --theme-accent: 250, 130, 0; --theme-radius: 0.2rem; --theme-font-display-name: "Fjalla One", sans-serif; --theme-font-display-weight: 400; --theme-font-display-style: "normal"; --theme-font-ui-name: "Open Sans", sans-serif; --theme-font-ui-weight: 400; --theme-font-ui-style: "normal"; --theme-black: 0, 0, 0; --theme-white: 255, 255, 255; --theme-shade-neg-10: 25, 25, 25; --theme-shade-neg-09: 25, 25, 25; --theme-shade-neg-08: 25, 25, 25; --theme-shade-neg-07: 25, 25, 25; --theme-shade-neg-06: 25, 25, 25; --theme-shade-neg-05: 25, 25, 25; --theme-shade-neg-04: 25, 25, 25; --theme-shade-neg-03: 25, 25, 25; --theme-shade-neg-02: 25, 25, 25; --theme-shade-neg-01: 25, 25, 25; --theme-shade: 25, 25, 25; --theme-shade-pos-01: 25, 25, 25; --theme-shade-pos-02: 25, 25, 25; --theme-shade-pos-03: 25, 25, 25; --theme-shade-pos-04: 25, 25, 25; --theme-shade-pos-05: 25, 25, 25; --theme-shade-pos-06: 25, 25, 25; --theme-shade-pos-07: 25, 25, 25; --theme-shade-pos-08: 25, 25, 25; --theme-shade-pos-09: 25, 25, 25; --theme-shade-pos-10: 25, 25, 25; --theme-preview-size: 6em; --theme-custom-edit-height: 2.5em; --theme-shadow: 1; --theme-shadow-offset-y: 0.02em; --theme-shadow-blur: 0.02em; --theme-shadow-opacity: 0.02; --theme-shadow-size-small: calc(var(--theme-shadow) * 1); --theme-shadow-size-medium: calc(var(--theme-shadow) * 2); --theme-shadow-size-large: calc(var(--theme-shadow) * 3); --theme-shadow-bottom-small: 0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4))); --theme-shadow-bottom-medium: 0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4))); --theme-shadow-bottom-large: 0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4))); --theme-shadow-top-small: 0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4))); --theme-shadow-top-medium: 0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4))); --theme-shadow-top-large: 0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))), 0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))), 0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))), 0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4))); --theme-shade-opacity: 0.4; /* header */ --header-area-width: 100%; --header-color-theme: var(--theme-color-01); --header-color-custom: rgb(0, 0, 0); --header-opacity: 0.95; --header-search-width: 0%; --header-border-top: 0; --header-border-bottom: 0; --header-date-size: 1em; --header-clock-size: 1em; --header-search-size: 1em; --header-button-size: 1em; --header-greeting-size: 1em; --header-transitional-size: 1em; /* group */ --group-name-size: 1em; --group-border: 0; /* link */ --link-area-width: 100%; --link-item-color-theme: var(--theme-color-02); --link-item-color-custom: rgb(0, 0, 0); --link-item-size: 1em; --link-item-display-space: 0.25em; --link-item-display-gutter: 2; --link-item-display-letter-size: 2em; --link-item-display-icon-size: 2.5em; --link-item-display-rotate: 0deg; --link-item-display-translate-x: 0em; --link-item-display-translate-y: 0em; --link-item-display-name-size: 0.9em; --link-item-border: 0; /* layout */ --layout-size: 1; --layout-width: 80%; --layout-line-width: 0.2em; --layout-space: 0.5em; --layout-padding: 4; --layout-gutter: 4; --layout-duration-01: 0.1s; --layout-duration-02: 0.2s; --layout-duration-03: 0.3s; --layout-duration-04: 0.4s; --layout-duration-05: 0.5s; --layout-duration-06: 0.6s; --layout-duration-07: 0.7s; --layout-duration-08: 0.8s; --layout-duration-09: 0.9s; --layout-duration-10: 1s; --layout-timing-extra-fast: var(--layout-duration-02) ease-in-out; --layout-timing-fast: var(--layout-duration-04) ease-in-out; --layout-timing-medium: var(--layout-duration-06) ease-in-out; --layout-timing-slow: var(--layout-duration-08) ease-in-out; --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out; --horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02)); /* background */ --background-color-theme: var(--theme-color-01); --background-color-custom: rgb(0, 0, 0); --background-image: none; --background-opacity: 1; --background-scale: 1; --background-accent: 0; --background-blur: 0; /* form */ --form-label: var(--theme-color-16); --form-label-hover: var(--theme-color-20); --form-label-focus-active: var(--theme-style-text); --form-label-checked: var(--theme-style-text); --form-label-disabled: var(--theme-color-04); --form-input-text: var(--theme-color-16); --form-input-text-hover: var(--theme-color-18); --form-input-text-focus-active: var(--theme-style-text); --form-input-text-disabled: var(--theme-color-04); --form-input-background: var(--theme-color-02); --form-input-background-hover: var(--theme-color-02); --form-input-background-focus-active: var(--theme-color-01); --form-input-background-disabled: var(--theme-color-01); --form-input-border: var(--theme-color-02); --form-input-border-hover: var(--theme-color-02); --form-input-border-focus-active: var(--theme-color-01); --form-input-border-disabled: var(--theme-color-01); --form-group-text-background: var(--theme-color-02); --form-group-text-background-focus-hover: var(--theme-color-02); --form-group-text-background-active: var(--theme-color-02); --form-group-text-background-disabled: var(--theme-color-01); --form-group-text-border: var(--theme-color-02); --form-group-text-border-focus-hover: var(--theme-color-02); --form-group-text-border-active: var(--theme-color-02); --form-group-text-border-disabled: var(--theme-color-01); --form-border-disabled: var(--theme-color-02); --form-icon: var(--theme-color-08); --form-icon-hover: var(--theme-color-16); --form-icon-focus: var(--theme-color-18); --form-icon-active: var(--theme-style-text); --form-icon-checked: var(--theme-style-text); --form-icon-disabled: var(--theme-color-04); --form-icon-symbol: var(--theme-color-01); --form-icon-symbol-active: var(--theme-color-01); --form-icon-symbol-disabled: var(--theme-color-01); --form-placeholder: var(--theme-color-06); --form-placeholder-focus-hover: var(--theme-color-10); --form-placeholder-disabled: var(--theme-color-03); --form-checkbox-radio-label: var(--theme-color-12); --form-checkbox-radio-checked-label: var(--theme-color-16); --form-checkbox-radio-disabled-label: var(--theme-color-04); --form-feedback-text: var(--theme-color-16); --form-feedback-text-muted: var(--theme-color-12); --form-feedback-text-disabled: var(--theme-color-04); --form-feedback-background: var(--theme-color-02); --form-feedback-background-disabled: var(--theme-color-01); --form-feedback-border: var(--theme-color-04); --form-feedback-border-disabled: var(--theme-color-02); --form-helper: var(--theme-color-12); --form-helper-disabled: var(--theme-color-04); --form-thumb-size: 1.25em; --form-range-thumb-background: var(--theme-color-16); --form-range-thumb-background-hover: var(--theme-color-18); --form-range-thumb-background-focus: var(--theme-style-text); --form-range-thumb-background-active: var(--theme-style-text); --form-range-thumb-background-disabled: var(--theme-color-03); --form-range-track-background: var(--theme-color-06); --form-range-track-background-focus-hover: var(--theme-color-04); --form-range-track-background-active: var(--theme-color-03); --form-range-track-background-disabled: var(--theme-color-02); --form-range-progress-background: var(--theme-color-08); --form-range-progress-background-active: var(--theme-accent); --form-range-progress-background-disabled: var(--theme-color-02); --form-grid-background: var(--theme-color-02); --form-grid-background-hover: var(--theme-color-02); --form-grid-background-focus: var(--theme-color-02); --form-grid-background-disabled: var(--theme-color-01); --form-grid-border: var(--theme-color-08); --form-grid-border-hover-focus: var(--theme-color-20); --form-grid-border-active: var(--theme-accent); --form-grid-border-checked: var(--theme-accent); --form-grid-border-disabled: var(--theme-color-04); --form-dropdown-background: var(--theme-color-02); --form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-06)); --form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25); --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); --form-wrap-space: 0.75em; /* menu */ --menu-space: 0.75em; /* button */ --button-background: var(--theme-color-02); --button-background-focus-hover: var(--theme-color-03); --button-background-active: var(--theme-color-04); --button-background-disabled: var(--theme-color-01); --button-border: var(--theme-color-02); --button-border-focus-hover: var(--theme-color-06); --button-border-active: var(--theme-accent); --button-border-disabled: var(--theme-color-01); --button-text: var(--theme-color-12); --button-text-focus-hover: var(--theme-color-20); --button-text-active: var(--theme-style-text); --button-text-disabled: var(--theme-color-04); --button-link-text: var(--theme-color-12); --button-link-text-focus-hover: var(--theme-style-text); --button-link-text-active: var(--theme-style-text); --button-link-text-disabled: var(--theme-color-04); /* edge */ --edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1); /* z index */ --z-index-background: 1000; --z-index-link: 2000; --z-index-header: 3000; --z-index-tip: 4000; --z-index-shade: 5000; --z-index-modal: 6000; --z-index-menu: 7000; --z-index-auto-suggest: 8000; --z-index-dropdown: 9000; --z-index-edge: 10000; /* breakpoint */ /* can not be used in @media as of yet */ --breakpoint-sm: 550px; --breakpoint-md: 700px; --breakpoint-lg: 900px; --breakpoint-xl: 1100px; --breakpoint-xxl: 1600px; } .is-theme-style-dark { /* theme */ --theme-color: var(--theme-shade); --theme-color-01: var(--theme-shade-neg-10); --theme-color-02: var(--theme-shade-neg-09); --theme-color-03: var(--theme-shade-neg-08); --theme-color-04: var(--theme-shade-neg-07); --theme-color-05: var(--theme-shade-neg-06); --theme-color-06: var(--theme-shade-neg-05); --theme-color-07: var(--theme-shade-neg-04); --theme-color-08: var(--theme-shade-neg-03); --theme-color-09: var(--theme-shade-neg-02); --theme-color-10: var(--theme-shade-neg-01); --theme-color-11: var(--theme-shade-pos-01); --theme-color-12: var(--theme-shade-pos-02); --theme-color-13: var(--theme-shade-pos-03); --theme-color-14: var(--theme-shade-pos-04); --theme-color-15: var(--theme-shade-pos-05); --theme-color-16: var(--theme-shade-pos-06); --theme-color-17: var(--theme-shade-pos-07); --theme-color-18: var(--theme-shade-pos-08); --theme-color-19: var(--theme-shade-pos-09); --theme-color-20: var(--theme-shade-pos-10); --theme-style-text: var(--theme-white); } .is-theme-style-light { /* theme */ --theme-color: var(--theme-shade); --theme-color-01: var(--theme-shade-pos-10); --theme-color-02: var(--theme-shade-pos-09); --theme-color-03: var(--theme-shade-pos-08); --theme-color-04: var(--theme-shade-pos-07); --theme-color-05: var(--theme-shade-pos-06); --theme-color-06: var(--theme-shade-pos-05); --theme-color-07: var(--theme-shade-pos-04); --theme-color-08: var(--theme-shade-pos-03); --theme-color-09: var(--theme-shade-pos-02); --theme-color-10: var(--theme-shade-pos-01); --theme-color-11: var(--theme-shade-neg-01); --theme-color-12: var(--theme-shade-neg-02); --theme-color-13: var(--theme-shade-neg-03); --theme-color-14: var(--theme-shade-neg-04); --theme-color-15: var(--theme-shade-neg-05); --theme-color-16: var(--theme-shade-neg-06); --theme-color-17: var(--theme-shade-neg-07); --theme-color-18: var(--theme-shade-neg-08); --theme-color-19: var(--theme-shade-neg-09); --theme-color-20: var(--theme-shade-neg-10); --theme-style-text: var(--theme-black); } .is-link-style-block { /* link */ --link-item-width: 11em; --link-item-height: 10em; --link-item-url-height: 20%; --link-item-edit-height: 50%; } .is-link-style-list { /* link */ --link-item-width: 20em; --link-item-height: 4em; --link-item-url-height: 30%; --link-item-edit-height: 50%; } @media (min-width: 700px) { :root { /* theme */ --theme-root-font-size: 16px; } }