: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); --config-code-background: #fff; --config-code-color: var(--background); }