Add css variables to style components
This commit is contained in:
parent
861af70dff
commit
b1dd0cc07e
|
|
@ -8,16 +8,220 @@
|
|||
--color-grey-500: #9CA3AF;
|
||||
--color-grey-800: #4B5563;
|
||||
--color-grey-900: #3A3A3A;
|
||||
--color-grey-950: #1f1f1f;
|
||||
--color-white: #ffffff;
|
||||
|
||||
--shadow-md: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
|
||||
--shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
|
||||
|
||||
--icon-sun: url('data:image/svg+xml,\
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||
<path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
|
||||
</svg>');
|
||||
--icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
|
||||
--icon-moon: url('data:image/svg+xml,\
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||
<path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
|
||||
</svg>');
|
||||
--icon-moon-filter: invert(0.75);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--color-mode: 'light';
|
||||
--color-dark: #141414;
|
||||
--color-dark-alpha: rgba(0, 0, 0, 0.1);
|
||||
--color-light: #efefef;
|
||||
--color-light-alpha: rgba(255, 255, 255, 0.9);
|
||||
--icon-sun: url('data:image/svg+xml,\
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||
<path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
|
||||
</svg>');
|
||||
--icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
|
||||
--icon-moon: url('data:image/svg+xml,\
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||
<path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
|
||||
</svg>');
|
||||
--icon-moon-filter: invert(0.75);
|
||||
--background: #efefef;
|
||||
--text-color: #141414;
|
||||
--button-icon: var(--icon-moon);
|
||||
--button-icon-filter: var(--icon-moon-filter);
|
||||
--button-background: var(--color-dark);
|
||||
--button-color: var(--color-light);
|
||||
--border-color: var(--color-dark-alpha);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-mode: 'dark';
|
||||
}
|
||||
|
||||
:root:not([data-user-color-scheme]) {
|
||||
--background: var(--color-dark);
|
||||
--text-color: var(--color-light);
|
||||
--button-icon: var(--icon-sun);
|
||||
--button-icon-filter: var(--icon-sun-filter);
|
||||
--button-background: var(--color-light-alpha);
|
||||
--button-color: var(--color-dark);
|
||||
--border-color: var(--color-light-alpha);
|
||||
|
||||
|
||||
--color-primary: hsl(from var(--primary-color) h s calc(l - 50));
|
||||
--color-secondary: hsl(from var(--secondary-color) h s calc(l + 10));
|
||||
|
||||
--logo-primary-color: hsl(from var(--primary-color) h s calc(l - 25));
|
||||
|
||||
--card-color: var(--color-white);
|
||||
--card-bg: #181A1B;
|
||||
--card-tag-bg: var(--color-white);
|
||||
--card-tag-color: var(--color-grey-900);
|
||||
--card-placeholder: var(--color-grey-400);
|
||||
|
||||
--nav-color: var(--color-white);
|
||||
--nav-active-bg: #2C2F31;
|
||||
// --nav-active-color: var(--color-grey-900);
|
||||
// --nav-hover-color: var(--color-grey-900);
|
||||
--nav-hover-bg: #2C2F31;
|
||||
|
||||
--tags-color: #c3beb6;
|
||||
--tags-hover-color: #e8e6e3;
|
||||
--tags-hover-bg: #3e4345;
|
||||
--tags-active-color: #e8e6e3;
|
||||
--tags-active-bg: #3e4345;
|
||||
|
||||
--recipe-placeholder: var(--color-grey-400);
|
||||
--recipe-color: var(--color-white);
|
||||
--recipe-serving-color: #e8e6e3;
|
||||
--recipe-serving-bg: #2c2f31;
|
||||
--recipe-serving-hover-bg: #3c444f;
|
||||
|
||||
--search-bg: var(--color-grey-950);
|
||||
--search-border-color: var(--color-grey-500);
|
||||
--search-input-border-color: var(--color-white);
|
||||
--search-results-bg: var(--color-grey-950);
|
||||
--search-results-border-color: var(--color-grey-500);
|
||||
|
||||
--home-gradient-1: #1B1D1E;
|
||||
--home-gradient-bg: transparent;
|
||||
|
||||
--bgc-grey-100: #1B1D1E;
|
||||
--site-bg: #181A1B;
|
||||
--site-color: var(--color-white);
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
[data-user-color-scheme='dark'] {
|
||||
--background: var(--color-dark);
|
||||
--text-color: var(--color-light);
|
||||
--button-icon: var(--icon-sun);
|
||||
--button-icon-filter: var(--icon-sun-filter);
|
||||
--button-background: var(--color-light-alpha);
|
||||
--button-color: var(--color-dark);
|
||||
--border-color: var(--color-light-alpha);
|
||||
|
||||
|
||||
--color-primary: hsl(from var(--primary-color) h s calc(l - 50));
|
||||
--color-secondary: hsl(from var(--secondary-color) h s calc(l + 10));
|
||||
|
||||
--logo-primary-color: hsl(from var(--primary-color) h s calc(l - 25));
|
||||
|
||||
--card-color: var(--color-white);
|
||||
--card-bg: #181A1B;
|
||||
--card-tag-bg: var(--color-white);
|
||||
--card-tag-color: var(--color-grey-900);
|
||||
--card-placeholder: var(--color-grey-400);
|
||||
|
||||
--nav-color: var(--color-white);
|
||||
--nav-active-bg: #2C2F31;
|
||||
// --nav-active-color: var(--color-grey-900);
|
||||
// --nav-hover-color: var(--color-grey-900);
|
||||
--nav-hover-bg: #2C2F31;
|
||||
|
||||
--tags-color: #c3beb6;
|
||||
--tags-hover-color: #e8e6e3;
|
||||
--tags-hover-bg: #3e4345;
|
||||
--tags-active-color: #e8e6e3;
|
||||
--tags-active-bg: #3e4345;
|
||||
|
||||
--recipe-placeholder: var(--color-grey-400);
|
||||
--recipe-color: var(--color-white);
|
||||
--recipe-serving-color: #e8e6e3;
|
||||
--recipe-serving-bg: #2c2f31;
|
||||
--recipe-serving-hover-bg: #3c444f;
|
||||
|
||||
--search-bg: var(--color-grey-950);
|
||||
--search-border-color: var(--color-grey-500);
|
||||
--search-input-border-color: var(--color-white);
|
||||
--search-results-bg: var(--color-grey-950);
|
||||
--search-results-border-color: var(--color-grey-500);
|
||||
|
||||
--home-gradient-1: #1B1D1E;
|
||||
--home-gradient-bg: transparent;
|
||||
|
||||
--bgc-grey-100: #1B1D1E;
|
||||
--site-bg: #181A1B;
|
||||
--site-color: var(--color-white);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.no-js .user-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .user-toggle {
|
||||
// margin: 2rem auto 0 auto;
|
||||
// padding-top: 2.5rem;
|
||||
// max-width: 20rem;
|
||||
// border-top: 1px solid var(--border-color);
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
.toggle-button {
|
||||
display: inline-flex;
|
||||
background: var(--button-background);
|
||||
color: var(--button-color);
|
||||
border: none;
|
||||
font: inherit;
|
||||
// font-size: 1.5rem;
|
||||
gap: .5em;
|
||||
padding: .4rem .6rem;
|
||||
align-items: center;
|
||||
transition: background 500ms ease-in-out, color 200ms ease;
|
||||
}
|
||||
|
||||
.toggle-button__icon {
|
||||
background: var(--button-icon);
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
filter: var(--button-icon-filter);
|
||||
transform: translateY(1px); /* Optical adjustment */
|
||||
transition: filter 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.toggle-button:focus:focus-visible {
|
||||
outline: 1px solid var(--button-background);
|
||||
outline-offset: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--site-bg, vra(--color-white));
|
||||
color: var(--site-color, vra(--color-grey-900));
|
||||
transition: background 500ms ease-in-out, color 200ms ease;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
|
||||
.u-bgc-grey-100 {
|
||||
background-color: var(--color-grey-100);
|
||||
background-color: var(--bgc-grey-100, var(--color-grey-100));
|
||||
}
|
||||
|
||||
.u-highlight {
|
||||
|
|
@ -46,4 +46,16 @@
|
|||
|
||||
.u-mb-large {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(1px);
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -12,17 +12,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
background-color: var(--color-white);
|
||||
background-color: var(--card-bg, var(--color-white));
|
||||
box-shadow: var(--shadow-md);
|
||||
text-decoration: none;
|
||||
color: var(--color-grey-900);
|
||||
color: var(--card-color, var(--color-grey-900));
|
||||
}
|
||||
|
||||
.c-card__image {
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
background-color: var(--color-grey-500); // fallback while image is loading
|
||||
background-color: var(--card-placeholder, var(--color-grey-500)); // fallback while image is loading
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--color-primary);
|
||||
min-height: calc(1.5em + (12px * 2));
|
||||
}
|
||||
|
||||
.c-card__tag-abbr {
|
||||
|
|
@ -46,8 +47,8 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
background-color: var(--color-grey-900);
|
||||
color: var(--color-white);
|
||||
background-color: var(--card-tag-bg, var(--color-grey-900));
|
||||
color: var(--card-tag-color, var(--color-white));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
|
||||
svg {
|
||||
margin-right: 6px;
|
||||
fill: var(--color-grey-900);
|
||||
fill: var(--card-color, var(--color-grey-900));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
align-items: center;
|
||||
padding: 12px 18px;
|
||||
text-decoration: none;
|
||||
color: var(--color-grey-900);
|
||||
color: var(--card-color, var(--color-grey-900));
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -85,7 +86,7 @@
|
|||
&::before {
|
||||
outline: none;
|
||||
box-shadow: var(--shadow-lg);
|
||||
color: var(--color-grey-900);
|
||||
color: var(--card-color, var(--color-grey-900));
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
z-index: -10;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-image: linear-gradient(to bottom, var(--color-primary), var(--color-white));
|
||||
background-color: hsla(0, 0%, 100%, .3);
|
||||
background-image: linear-gradient(to bottom, var(--color-primary), var(--home-gradient-1, var(--color-white)));
|
||||
background-color: var(--home-gradient-bg, hsla(0, 0%, 100%, .3));
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
.c-nav__home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-grey-900);
|
||||
color: var(--nav-color, var(--color-grey-900));
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
|
|
@ -51,19 +51,19 @@
|
|||
.c-nav__nav-item {
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
color: var(--color-grey-900);
|
||||
color: var(--nav-color, var(--color-grey-900));
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-grey-900);
|
||||
color: var(--color-white);
|
||||
background-color: var(--nav-hover-bg, var(--color-grey-900));
|
||||
color: var(--nav-hover-color, var(--color-white));
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.c-nav__nav-item--active {
|
||||
background-color: var(--color-grey-900);
|
||||
color: var(--color-white);
|
||||
background-color: var(--nav-active-bg, var(--color-grey-900));
|
||||
color: var(--nav-active-color, var(--color-white));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
.c-tags__tag {
|
||||
display: inline-flex;
|
||||
padding: 2px 6px;
|
||||
color: var(--color-grey-900);
|
||||
color: var(--tags-color, var(--color-grey-900));
|
||||
text-decoration: none;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 8px;
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-grey-900);
|
||||
color: var(--tags-hover-color, var(--color-white));
|
||||
background-color: var(--tags-hover-bg, var(--color-grey-900));
|
||||
}
|
||||
}
|
||||
|
||||
.c-tag__tag--selected {
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-grey-900);
|
||||
color: var(--tags-active-color, var(--color-white));
|
||||
background-color: var(--tags-active-bg, var(--color-grey-900));
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
object-fit: cover;
|
||||
height: 50vh;
|
||||
min-height: 300px;
|
||||
background-color: var(--color-grey-500); // fallback while image is loading
|
||||
background-color: var(--recipe-placeholder, var(--color-grey-500)); // fallback while image is loading
|
||||
}
|
||||
|
||||
.c-recipe__title {
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
accent-color: var(--color-secondary);
|
||||
margin: 0;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
|
||||
svg {
|
||||
margin-right: 6px;
|
||||
fill: var(--color-grey-900);
|
||||
fill: var(--recipe-color, var(--color-grey-900));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,13 +75,13 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-grey-900);
|
||||
background-color: var(--recipe-serving-bg, var(--color-grey-900));
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: var(--color-white);
|
||||
color: var(--recipe-serving-color, var(--color-white));
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-grey-800);
|
||||
background-color: var(--recipe-serving-hover-bg, var(--color-grey-800));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
top: 60px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: var(--color-white);
|
||||
background-color: var(--search-bg, var(--color-white));
|
||||
padding: 24px;
|
||||
border: 1px solid var(--color-grey-300);
|
||||
border: 1px solid var(--search-border-color, var(--color-grey-300));
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow-xl);
|
||||
font-size: 1rem;
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
.c-search__input {
|
||||
width: 100%;
|
||||
padding: 4px 12px;
|
||||
border: 2px solid var(--color-grey-900);
|
||||
border: 2px solid var(--search-input-border-color, var(--color-grey-900));
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
padding: 12px 18px 12px 46px;
|
||||
width: 100%;
|
||||
padding: 12px 18px 12px 46px;
|
||||
border: 2px solid var(--color-grey-900);
|
||||
border: 2px solid var(--search-input-border-color, var(--color-grey-900));
|
||||
}
|
||||
|
||||
.c-search__close-button {
|
||||
|
|
@ -126,8 +126,8 @@
|
|||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 24px;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey-300);
|
||||
background-color: var(--search-results-bg, var(--color-white));
|
||||
border: 1px solid var(--search-results-border-color, var(--color-grey-300));
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue