mirror of https://github.com/lissy93/dashy
55 lines
2.2 KiB
SCSS
55 lines
2.2 KiB
SCSS
|
|
:root {
|
|
/* Basic*/
|
|
--primary: #5cabca; // Main accent color
|
|
--background: #0b1021; // Page background
|
|
--background-darker: #05070e; // Used for navigation bar, footer and fills
|
|
|
|
/* Modified Colors */
|
|
--item-group-background: #0b1021cc;
|
|
--medium-grey: #5e6474;
|
|
--item-background: #607d8b33;
|
|
--item-background-hover: #607d8b4d;
|
|
|
|
/* Semi-Transparent Black*/
|
|
--transparent-70: #000000b3;
|
|
--transparent-50: #00000080;
|
|
--transparent-30: #0000004d;
|
|
|
|
/* Other Variables */
|
|
--outline-color: none;
|
|
--curve-factor: 5px; // Border radius for most components
|
|
--curve-factor-navbar: 16px; // Border radius for header
|
|
--dimming-factor: 0.8; // Opacity for semi-transparent components
|
|
|
|
/* Settings for specific components */
|
|
--item-group-padding: 5px; // Determines width of item-group outline
|
|
--item-shadow: 1px 1px 2px #130f23;
|
|
--item-hover-shadow: 1px 2px 4px #373737;
|
|
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
|
|
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
|
|
--item-group-shadow: var(--item-shadow);
|
|
--settings-container-shadow: none;
|
|
|
|
/* Specific components, using variables allows them to be overridden individually */
|
|
--heading-text-color: var(--primary);
|
|
--nav-link-text-color: var(--primary);
|
|
--nav-link-background-color: #607d8b33;
|
|
--nav-link-text-color-hover: var(--primary);
|
|
--nav-link-background-color-hover: #607d8b33;
|
|
--nav-link-border-color: transparent;
|
|
--nav-link-border-color-hover: var(--primary);
|
|
--item-text-color: var(--primary);
|
|
--item-group-outer-background: var(--primary);
|
|
--item-group-heading-text-color: var(--item-group-background);
|
|
--item-group-heading-text-color-hover: var(--background);
|
|
--settings-background: var(--background);
|
|
--settings-text-color: var(--primary);
|
|
--search-container-background: var(--background-darker);
|
|
--search-field-background: var(--background);
|
|
--footer-text-color: var(--medium-grey);
|
|
--footer-text-color-link: var(--primary);
|
|
--welcome-popup-background: var(--background-darker);
|
|
--welcome-popup-text-color: var(--primary);
|
|
}
|