mirror of https://github.com/lissy93/dashy
131 lines
5.0 KiB
SCSS
131 lines
5.0 KiB
SCSS
@import '@/styles/media-queries.scss';
|
|
|
|
:root {
|
|
/* Basic*/
|
|
--primary: #5cabca; // Main accent color
|
|
--background: #0b1021; // Page background
|
|
--background-darker: #05070e; // Used for navigation bar, footer and fills
|
|
|
|
/* Action Colors */
|
|
--info: #04e4f4;
|
|
--success: #20e253;
|
|
--warning: #f6f000;
|
|
--error: #fca016;
|
|
--danger: #f80363;
|
|
--neutral: #272f4d;
|
|
--white: #fff;
|
|
--black: #000;
|
|
|
|
/* 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;
|
|
|
|
/* Semi-Transparent White*/
|
|
--transparent-white-70: #ffffffb3;
|
|
--transparent-white-50: #ffffff80;
|
|
--transparent-white-30: #ffffff4d;
|
|
|
|
/* Color variables for specific components
|
|
* all variables are optional, since they inherit initial values from above*
|
|
* Using specific variables makes overriding for custom themes really easy */
|
|
--heading-text-color: var(--primary);
|
|
// Nav-bar links
|
|
--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);
|
|
--nav-link-shadow: 1px 1px 2px #232323;
|
|
--nav-link-shadow-hover: 1px 1px 2px #232323;
|
|
// Link items and sections
|
|
--item-text-color: var(--primary);
|
|
--item-text-color-hover: var(--item-text-color);
|
|
--item-group-outer-background: var(--primary);
|
|
--item-group-heading-text-color: var(--item-group-background);
|
|
--item-group-heading-text-color-hover: var(--background);
|
|
// Homepage settings
|
|
--settings-text-color: var(--primary);
|
|
--settings-background: var(--background);
|
|
// Config menu
|
|
--config-settings-color: var(--primary);
|
|
--config-settings-background: var(--background-darker);
|
|
--config-code-color: var(--background);
|
|
--config-code-background: var(--white);
|
|
--code-editor-color: var(--black);
|
|
--code-editor-background: var(--white);
|
|
// Widgets
|
|
--widget-text-color: var(--primary);
|
|
--widget-background-color: var(--background-darker);
|
|
--widget-accent-color: var(--background);
|
|
--widget-base-background: transparent;
|
|
// Interactive editor
|
|
--interactive-editor-color: var(--primary);
|
|
--interactive-editor-background: var(--background);
|
|
--interactive-editor-background-darker: var(--background-darker);
|
|
// Cloud backup/ restore menu
|
|
--cloud-backup-color: var(--config-settings-color);
|
|
--cloud-backup-background: var(--config-settings-background);
|
|
// Search bar (on homepage)
|
|
--search-container-background: var(--background-darker);
|
|
--search-field-background: var(--background);
|
|
--search-label-color: var(--settings-text-color);
|
|
// Page footer
|
|
--footer-text-color: var(--medium-grey);
|
|
--footer-text-color-link: var(--primary);
|
|
--footer-background: var(--background-darker);
|
|
// Right-click context menu
|
|
--context-menu-background: var(--background);
|
|
--context-menu-color: var(--primary);
|
|
--context-menu-secondary-color: var(--background-darker);
|
|
// Workspace view
|
|
--side-bar-background: var(--background-darker);
|
|
--side-bar-background-lighter: var(--background);
|
|
--side-bar-color: var(--primary);
|
|
--side-bar-item-background: var(--side-bar-background);
|
|
--side-bar-item-color: var(--side-bar-color);
|
|
--workspace-web-content-background: var(--background);
|
|
// Minimal view
|
|
--minimal-view-background-color: var(--background);
|
|
--minimal-view-title-color: var(--primary);
|
|
--minimal-view-settings-color: var(--primary);
|
|
--minimal-view-section-heading-color: var(--primary);
|
|
--minimal-view-section-heading-background: var(--background-darker);
|
|
--minimal-view-search-background: var(--background-darker);
|
|
--minimal-view-search-color: var(--primary);
|
|
--minimal-view-group-color: var(--primary);
|
|
--minimal-view-group-background: var(--background-darker);
|
|
// Login page
|
|
--login-form-color: var(--primary);
|
|
--login-form-background: var(--background);
|
|
--login-form-background-secondary: var(--background-darker);
|
|
// About page
|
|
--about-page-color: var(--white);
|
|
--about-page-background: var(--background);
|
|
--about-page-accent: var(--primary);
|
|
// Webpage colors, highlight, scrollbar
|
|
--scroll-bar-color: var(--primary);
|
|
--scroll-bar-background: var(--background-darker);
|
|
--highlight-color: var(--background);
|
|
--highlight-background: var(--primary);
|
|
--progress-bar: var(--primary);
|
|
// Misc components
|
|
--loading-screen-color: var(--primary);
|
|
--loading-screen-background: var(--background);
|
|
--status-check-tooltip-background: var(--background-darker);
|
|
--status-check-tooltip-color: var(--primary);
|
|
--welcome-popup-background: var(--background-darker);
|
|
--welcome-popup-text-color: var(--primary);
|
|
--toast-background: var(--primary);
|
|
--toast-color: var(--background);
|
|
--description-tooltip-background: var(--background-darker);
|
|
--description-tooltip-color: var(--primary);
|
|
}
|