163 lines
5.6 KiB
CSS
163 lines
5.6 KiB
CSS
* {
|
|
--brand: #0af;
|
|
--brand: hsla(200 100% 50% 1);
|
|
|
|
--brand-hue: 200;
|
|
--brand-saturation: 100%;
|
|
--brand-lightness: 50%;
|
|
|
|
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
|
|
--link-color-light: hsla(210, 100%, 40%, 1);
|
|
--link-hover-light: hsla(165, 80%, 35%, 1);
|
|
/* --link-background-light: hsla(0 0% 50% 1); */
|
|
|
|
|
|
|
|
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
|
|
--text2-light: hsl(var(--brand-hue) 30% 30%);
|
|
--text3-light: hsl(var(--brand-hue) 15% 85%);
|
|
--surface1-light: hsl(var(--brand-hue) 25% 90%);
|
|
--surface2-light: hsl(var(--brand-hue) 20% 99%);
|
|
--surface3-light: hsl(var(--brand-hue) 20% 92%);
|
|
--surface4-light: hsl(var(--brand-hue) 20% 85%);
|
|
--surface5-light: hsla(217, 70%, 26%, 1);
|
|
|
|
--surface-shadow-light: var(--brand-hue) 10% 20%;
|
|
--shadow-strength-light: .02;
|
|
--border1-light: hsl(var(--brand-hue) 5% 80%);
|
|
|
|
|
|
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
|
|
--text1-dark: hsl(var(--brand-hue) 15% 85%);
|
|
--text2-dark: hsl(var(--brand-hue) 5% 65%);
|
|
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
|
|
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
|
|
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
|
|
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
|
|
--surface5-dark: hsl(var(--brand-hue) 35% 25%);
|
|
|
|
--surface-shadow-dark: var(--brand-hue) 50% 3%;
|
|
--shadow-strength-dark: .8;
|
|
--border1-dark: hsl(var(--brand-hue) 40% 70%);
|
|
|
|
|
|
--link-hover-dark: hsla(45, 80%, 70%, 1);
|
|
--cookie-accept-dark: hsla(120, 60%, 45%, 1);
|
|
|
|
}
|
|
|
|
:root {
|
|
/* --- Hero --- */
|
|
--f-hero-text: var(--text1-dark);
|
|
--f-hero-header: var(--text1-dark);
|
|
/* --- Background and Text --- */
|
|
--f-background: var(--surface3-light);
|
|
--f-text: var(--text1-light);
|
|
--f-header: var(--text1-light);
|
|
--f-header-items: (var(--text1-light));
|
|
/*--- Navbar --- */
|
|
--f-navbar-background: var(--surface4-light);
|
|
--f-navbar-link: var(--link-color-light);
|
|
--f-navbar-link-hover: var(--link-hover-light);
|
|
/*--- Footer --- */
|
|
--f-footer-background: var(--surface4-light);
|
|
--f-footer-link-text: var(--link-color-light);
|
|
/* --- Linki --- */
|
|
--f-link-text: var(--link-color-light);
|
|
--f-link-text-hover: var(--link-hover-light);
|
|
/* Buttons Input */
|
|
/*
|
|
--btn-background: var(--link-color-light);
|
|
--btn-text: var(--surface4-light);
|
|
--btn-background-hover: var(--surface4-light);
|
|
--btn-text-hover: var(--link-color-light);
|
|
*/
|
|
--btn-background: var(--link-color-light);
|
|
/* var(--surface4-light); */
|
|
--btn-text: var(--surface4-light);
|
|
/* var(--link-color-light); */
|
|
--btn-background-hover: var(--surface4-light);
|
|
/* var(--link-color-light); */
|
|
--btn-text-hover: var(--link-color-light);
|
|
/* var(--surface4-light); */
|
|
|
|
--f-background-toast: var(--surface2-dark);
|
|
|
|
--f-input-border: var(--surface4-light);
|
|
--f-autocomplete-hover-bg: var(--surface3-dark);
|
|
--f-autocomplete-hover-text: var(--text1-dark);
|
|
/* --- Switchery --- */
|
|
--f-background-switch: var(--surface4-light);
|
|
|
|
--f-switcher-background: var(--link-color-light);
|
|
--f-switcher-text: var(--surface4-light);
|
|
--f-switcher-background-hover: var(--surface2-light);
|
|
--f-switcher-text-hover: var(--f-link-text-hover);
|
|
/* --- Cookie --- */
|
|
--f-cookie-background: var(--surface2-light);
|
|
--f-cookie-text: var(--text1-light);
|
|
--f-cookie-accept-background: var(--link-color-light);
|
|
--f-cookie-accept-text: var(--surface4-light);
|
|
--f-cookie-reject-background: var(--surface4-light);
|
|
--f-cookie-reject-text: var(--surface1-dark);
|
|
/* --- Offers --- */
|
|
--f-offers-border: var(--surface4-light);
|
|
--f-offers-price: var(--brand-light);
|
|
--f-offers-popular: var(--brand-light);
|
|
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
|
|
}
|
|
|
|
:root.dark {
|
|
/* --- Hero --- */
|
|
--f-hero-text: var(--text1-dark);
|
|
--f-hero-header: var(--text1-dark);
|
|
/* --- Background and Text --- */
|
|
--f-background: var(--surface1-dark);
|
|
--f-text: var(--text1-dark);
|
|
--f-header: var(--text1-dark);
|
|
--f-header-items: (var(--text1-dark));
|
|
/*--- Navbar --- */
|
|
--f-navbar-background: var(--surface2-dark);
|
|
--f-navbar-link: var(--brand-dark);
|
|
--f-navbar-link-hover: var(--link-hover-dark);
|
|
/*--- Footer --- */
|
|
--f-footer-background: var(--surface2-dark);
|
|
--f-footer-link-text: var(--brand-dark);
|
|
/* --- Linki --- */
|
|
--f-link-text: var(--brand-dark);
|
|
--f-link-text-hover: var(--link-hover-dark);
|
|
/* Buttons Input */
|
|
--btn-background: var(--f-link-text);
|
|
--btn-text: var(--surface1-dark);
|
|
--btn-background-hover: var(--surface4-dark);
|
|
--btn-text-hover: var(--f-link-text-hover);
|
|
|
|
--f-background-toast: var(--surface2-dark);
|
|
|
|
--f-input-border: var(--surface4-dark);
|
|
--f-autocomplete-hover-bg: var(--surface3-dark);
|
|
--f-autocomplete-hover-text: var(--text1-dark);
|
|
|
|
/* --- Switchery --- */
|
|
--f-background-switch: var(--surface3-dark);
|
|
|
|
--f-switcher-background: var(--f-link-text);
|
|
--f-switcher-text: var(--surface1-dark);
|
|
|
|
--f-switcher-background-hover: var(--surface4-dark);
|
|
--f-switcher-text-hover: var(--f-link-text-hover);
|
|
|
|
/* --- Cookie --- */
|
|
--f-cookie-background: var(--surface4-dark);
|
|
--f-cookie-text: var(--surface2-light);
|
|
--f-cookie-accept-background: var(--f-link-text);
|
|
--f-cookie-accept-text: var(--surface1-dark);
|
|
--f-cookie-reject-background: var(--surface3-dark);
|
|
--f-cookie-reject-text: var(--f-link-text);
|
|
|
|
/* --- Offers --- */
|
|
--f-offers-border: var(--surface4-dark);
|
|
--f-offers-price: var(--brand-dark);
|
|
--f-offers-popular: var(--brand-dark);
|
|
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
|
|
} |