mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-08-02 12:32:14 +00:00
555 lines
19 KiB
SCSS
555 lines
19 KiB
SCSS
// CSS Custom Properties (CSS Variables)
|
|
// This file defines all CSS variables used throughout the application
|
|
|
|
// ===============================
|
|
// CORE DESIGN TOKENS
|
|
// ===============================
|
|
|
|
:root {
|
|
// -----------------------------
|
|
// Spacing System
|
|
// -----------------------------
|
|
--s: 8px;
|
|
--s-quarter: 2px;
|
|
--s-half: 4px;
|
|
--s2: 16px; // 2 * 8px
|
|
--s3: 24px; // 3 * 8px
|
|
--s4: 32px; // 4 * 8px
|
|
--s5: 40px; // 5 * 8px
|
|
--s6: 48px; // 6 * 8px
|
|
--s7: 56px; // 7 * 8px
|
|
--s8: 64px; // 8 * 8px
|
|
--s9: 72px; // 9 * 8px
|
|
|
|
// -----------------------------
|
|
// Layout System
|
|
// -----------------------------
|
|
// Breakpoints
|
|
--layout-xxxs: 398px;
|
|
--layout-xxs: 440px;
|
|
--layout-xs: 600px;
|
|
--layout-sm: 960px;
|
|
--layout-md: 1280px;
|
|
--layout-lg: 1920px;
|
|
--layout-xl: 2000px;
|
|
|
|
// Component dimensions
|
|
--component-max-width: 800px;
|
|
--side-nav-width-switch-mobile: 500px;
|
|
--side-nav-width-switch-l: 1500px;
|
|
--side-nav-width-mobile: calc(100vw - var(--s9));
|
|
--side-nav-width: 200px;
|
|
--side-nav-width-l: 400px;
|
|
--bar-height-large: 56px;
|
|
--bar-height: 48px;
|
|
--bar-height-small: 40px;
|
|
--mat-mini-fab-size: 48px;
|
|
--mac-title-bar-padding: 20px;
|
|
--card-border-radius: 4px;
|
|
|
|
// Z-index layers
|
|
--z-focus-mode-overlay: 101;
|
|
--z-side-panel-task-and-notes: 44;
|
|
--z-side-panel-planner: 46;
|
|
--z-task-side-bar-over: 100;
|
|
--z-main-header-wrapper: 50;
|
|
--z-side-nav: 60;
|
|
--z-banner: 11;
|
|
--z-main-header: 12;
|
|
--z-celebrate: 102;
|
|
--z-backdrop: 222;
|
|
// NOTE needs to be below the z-index of cdk-overlay which is 1000
|
|
--z-add-task-bar: 999;
|
|
--z-search-bar: 999;
|
|
--z-mobile-bottom-nav: 30;
|
|
--z-tour: 99;
|
|
|
|
// ===============================
|
|
// COLORS - Theme Independent
|
|
// ===============================
|
|
|
|
// -----------------------------
|
|
// Semantic Colors
|
|
// -----------------------------
|
|
--color-success: #4caf50;
|
|
--color-warning: #ff9800;
|
|
--color-danger: #f44336;
|
|
--success-green: #4fa758;
|
|
--sun-yellow: #fff400;
|
|
|
|
// -----------------------------
|
|
// Dark Theme Elevation Colors
|
|
// -----------------------------
|
|
--dark0: rgb(0, 0, 0);
|
|
--dark0-5: rgb(26, 26, 26);
|
|
--dark1: rgb(30, 30, 30);
|
|
--dark2: rgb(34, 34, 34);
|
|
--dark3: rgb(36, 36, 36);
|
|
--dark4: rgb(39, 39, 39);
|
|
--dark4-5: rgb(40, 40, 40);
|
|
--dark5: rgb(42, 42, 42);
|
|
--dark6: rgb(44, 44, 44);
|
|
--dark8: rgb(46, 46, 46);
|
|
--dark10: rgb(48, 48, 48);
|
|
--dark12: rgb(51, 51, 51);
|
|
--dark16: rgb(53, 53, 53);
|
|
--dark24: rgb(56, 56, 56);
|
|
|
|
// -----------------------------
|
|
// Overlay Colors
|
|
// -----------------------------
|
|
--c-dark-10: rgba(0, 0, 0, 0.1);
|
|
--c-dark-20: rgba(0, 0, 0, 0.2);
|
|
--c-dark-30: rgba(0, 0, 0, 0.3);
|
|
--c-dark-40: rgba(0, 0, 0, 0.4);
|
|
--c-dark-50: rgba(0, 0, 0, 0.5);
|
|
--c-dark-60: rgba(0, 0, 0, 0.6);
|
|
--c-dark-80: rgba(0, 0, 0, 0.8);
|
|
--c-dark-90: rgba(0, 0, 0, 0.9);
|
|
--c-light-05: rgba(255, 255, 255, 0.05);
|
|
--c-light-10: rgba(255, 255, 255, 0.1);
|
|
--c-light-33: rgba(255, 255, 255, 0.33);
|
|
--c-light-40: rgba(255, 255, 255, 0.4);
|
|
--c-light-50: rgba(255, 255, 255, 0.5);
|
|
--c-light-70: rgba(255, 255, 255, 0.7);
|
|
--c-light-90: rgba(255, 255, 255, 0.9);
|
|
|
|
// Legacy palette references
|
|
--c-primary: var(--palette-primary-500);
|
|
--c-accent: var(--palette-accent-500);
|
|
--c-warn: var(--palette-warn-500);
|
|
--c-contrast: var(--palette-primary-contrast-500);
|
|
|
|
// ===============================
|
|
// SHADOWS & ELEVATION
|
|
// ===============================
|
|
|
|
// Shadow opacity values
|
|
--shadow-key-umbra-opacity: 0.2;
|
|
--shadow-key-penumbra-opacity: 0.14;
|
|
--shadow-ambient-shadow-opacity: 0.12;
|
|
|
|
// Material Design elevation shadows (1-24dp)
|
|
--whiteframe-shadow-1dp:
|
|
0px 1px 3px 0px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 1px 1px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 2px 1px -1px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-2dp:
|
|
0px 1px 5px 0px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 2px 2px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 3px 1px -2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-3dp:
|
|
0px 1px 8px 0px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 3px 4px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 3px 3px -2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-4dp:
|
|
0px 2px 4px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 4px 5px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 1px 10px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-5dp:
|
|
0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 5px 8px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 1px 14px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-6dp:
|
|
0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 6px 10px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 1px 18px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-7dp:
|
|
0px 4px 5px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 7px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 2px 16px 1px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-8dp:
|
|
0px 5px 5px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 8px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 3px 14px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-9dp:
|
|
0px 5px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 9px 12px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 3px 16px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-10dp:
|
|
0px 6px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 10px 14px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 4px 18px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-11dp:
|
|
0px 6px 7px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 11px 15px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 4px 20px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-12dp:
|
|
0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 12px 17px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 5px 22px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-13dp:
|
|
0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 13px 19px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 5px 24px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-14dp:
|
|
0px 7px 9px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 14px 21px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 5px 26px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-15dp:
|
|
0px 8px 9px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 15px 22px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 6px 28px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-16dp:
|
|
0px 8px 10px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 16px 24px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 6px 30px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-17dp:
|
|
0px 8px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 17px 26px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 6px 32px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-18dp:
|
|
0px 9px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 18px 28px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 7px 34px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-19dp:
|
|
0px 9px 12px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 19px 29px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 7px 36px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-20dp:
|
|
0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 20px 31px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 8px 38px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-21dp:
|
|
0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 21px 33px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 8px 40px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-22dp:
|
|
0px 10px 14px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 22px 35px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 8px 42px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-23dp:
|
|
0px 11px 14px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 23px 36px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 9px 44px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--whiteframe-shadow-24dp:
|
|
0px 11px 15px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0px 24px 38px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0px 9px 46px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
|
|
// Special shadows
|
|
--header-inset-shadow: inset 0 -4px 4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity));
|
|
--shadow-card-shadow:
|
|
0 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
|
0 2px 2px 0 rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
|
0 1px 5px 0 rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
|
--shadow-bottom: 0 10px 6px -6px var(--c-dark-30);
|
|
--shadow-bottom-boxed: 0 10px 6px -6px var(--c-dark-30), 0 0 1px var(--c-dark-30);
|
|
|
|
// ===============================
|
|
// ANIMATION & TRANSITIONS
|
|
// ===============================
|
|
|
|
// Timing functions
|
|
--ani-standard-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ani-enter-timing: cubic-bezier(0, 0, 0.2, 1);
|
|
--ani-leave-timing: cubic-bezier(0.4, 0, 1, 1);
|
|
--ani-sharp-timing: cubic-bezier(0.4, 0, 0.6, 1);
|
|
--ease-in-out-quint: cubic-bezier(0.38, 0.04, 0.35, 0.96);
|
|
|
|
// Durations
|
|
--transition-duration-xs: 90ms;
|
|
--transition-duration-s: 150ms;
|
|
--transition-duration-m: 225ms;
|
|
--transition-duration-l: 375ms;
|
|
--transition-duration-enter: 225ms;
|
|
--transition-duration-leave: 195ms;
|
|
--page-transition-duration: 225ms;
|
|
|
|
// Transition shorthands
|
|
--transition-fast: all var(--transition-duration-xs) ease-in-out;
|
|
--transition-standard: all var(--transition-duration-m) var(--ani-standard-timing);
|
|
--transition-enter: all var(--transition-duration-m) var(--ani-enter-timing);
|
|
--transition-leave: all var(--transition-duration-m) var(--ani-leave-timing);
|
|
|
|
// ===============================
|
|
// COMPONENT-SPECIFIC VARIABLES
|
|
// ===============================
|
|
|
|
// -----------------------------
|
|
// Planner Component
|
|
// -----------------------------
|
|
--planner-item-height: 42px;
|
|
--planner-item-ico-size: 20px;
|
|
--planner-font-size: 14px;
|
|
--planner-font-size-mobile: 13px;
|
|
--planner-font-size-smaller: 11px;
|
|
--planner-font-size-smaller-mobile: 10px;
|
|
|
|
// -----------------------------
|
|
// Task Component
|
|
// -----------------------------
|
|
--task-first-line-min-height: 40px;
|
|
--task-icon-default-opacity: 0.7;
|
|
--task-inner-padding-top-bottom: 4px;
|
|
--task-is-done-dim-opacity: 0.3;
|
|
--task-border-radius: 6px;
|
|
|
|
// Task z-indexes
|
|
--z-drag-handle: 1;
|
|
--z-task-title: 4;
|
|
--z-btn: 4;
|
|
--z-time-wrapper: 4;
|
|
--z-btn-hover: 5;
|
|
--z-hover-controls: 6;
|
|
--z-progress-bar: 7;
|
|
--z-check-done: 11;
|
|
--z-first-line-controls-hover: 12;
|
|
--z-swipe-block: 0;
|
|
--z-is-selected-host: 20;
|
|
--z-focus-host: 21;
|
|
--z-is-current-host: 22;
|
|
--z-toggle-sub-task-btn: 30;
|
|
--z-drag-over-msg: 31;
|
|
--z-task-title-focus: 32;
|
|
--z-time-btn-svg-wrapper: 5555;
|
|
|
|
// -----------------------------
|
|
// Common Alpha Values
|
|
// -----------------------------
|
|
--border-alpha: 0.12;
|
|
--overlay-alpha: 0.1;
|
|
--separator-alpha: 0.3;
|
|
--muted-alpha: 0.6;
|
|
--intense-alpha: 0.9;
|
|
}
|
|
|
|
// ===============================
|
|
// THEME-SPECIFIC OVERRIDES
|
|
// ===============================
|
|
|
|
// -----------------------------
|
|
// Light Theme (Default)
|
|
// -----------------------------
|
|
body {
|
|
// Background colors
|
|
--bg: #f8f8f7;
|
|
--bg-darker: rgb(235, 235, 235);
|
|
--bg-drag-col: rgb(242, 242, 242);
|
|
--bg-slightly-lighter: var(--bg);
|
|
--bg-lighter: #fff;
|
|
--bg-lightest: #fff;
|
|
--bg-super-light: #fff;
|
|
--card-bg: #ffffff;
|
|
|
|
// Navigation & Panel backgrounds
|
|
--sidenav-bg: transparent;
|
|
--sidenav-bg-mobile: var(--bg);
|
|
--sidenav-active: rgba(255, 255, 255, 1.25);
|
|
--sidenav-active-text: var(--palette-primary-800);
|
|
--sidebar-border: var(--divider-color);
|
|
--sidebar-hover: var(--palette-background-hover);
|
|
--sidebar-text: var(--text-color);
|
|
--sidebar-text-secondary: var(--text-color-muted);
|
|
--overlay-bg: var(--c-backdrop, rgba(0, 0, 0, 0.6));
|
|
--right-panel-bg: #fff;
|
|
|
|
// Text colors
|
|
--text-color: rgb(44, 44, 44);
|
|
--text-color-less-intense: rgba(44, 44, 44, 0.9);
|
|
--text-color-muted: rgba(44, 44, 44, 0.6);
|
|
--text-color-more-intense: var(--text-color);
|
|
--text-color-most-intense: rgb(0, 0, 0);
|
|
|
|
// Selected task
|
|
--selected-task-bg-color: #fff;
|
|
|
|
// Borders and separators
|
|
--extra-border-color: #dddddd;
|
|
--separator-color: #d0d0d0;
|
|
--divider-color: rgba(0, 0, 0, 0.12);
|
|
|
|
// Backdrop
|
|
--c-backdrop: var(--c-dark-60);
|
|
|
|
// Note colors
|
|
--standard-note-bg: #ffffff;
|
|
--standard-note-fg: var(--text-color);
|
|
--standard-note-bg-hovered: var(--standard-note-bg);
|
|
--notes-container-bg: inherit;
|
|
|
|
// Task colors
|
|
--task-c-bg: #fff;
|
|
--task-c-selected-bg: var(--selected-task-bg-color);
|
|
--sub-task-c-bg: var(--task-c-bg);
|
|
--sub-task-c-bg-done: var(--task-c-bg);
|
|
--task-c-bg-done: var(--task-c-bg);
|
|
--task-c-current-bg: var(--task-c-bg);
|
|
--task-c-drag-drop-bg: var(--task-c-bg);
|
|
--sub-task-c-bg-in-selected: var(--task-c-bg);
|
|
|
|
// Task shadows
|
|
--task-current-shadow: var(--whiteframe-shadow-3dp);
|
|
--task-selected-shadow: var(--whiteframe-shadow-3dp);
|
|
|
|
// Scrollbar colors
|
|
--scrollbar-thumb: rgba(136, 136, 136, 0.5);
|
|
--scrollbar-thumb-hover: rgba(85, 85, 85, 0.7);
|
|
--scrollbar-track: rgba(241, 241, 241, 0.3);
|
|
|
|
// Chip colors
|
|
--chip-outline-color: rgba(125, 125, 125, 0.4);
|
|
|
|
// Progress circle
|
|
--progress-bg: rgba(127, 127, 127, 0.2);
|
|
|
|
// Close button
|
|
--close-btn-bg: var(--bg-darker);
|
|
--close-btn-border: var(--divider-color);
|
|
|
|
// Banner
|
|
--banner-bg: var(--card-bg);
|
|
|
|
// Improvement banner
|
|
--improvement-text: rgba(44, 44, 44, 1);
|
|
--improvement-border: var(--c-light-33);
|
|
--improvement-button-text: rgba(44, 44, 44, 1);
|
|
|
|
// Select/Options
|
|
--select-hover-bg: var(--c-dark-10);
|
|
--options-border-color: var(--c-dark-10);
|
|
|
|
// Attachments
|
|
--attachment-bg: var(--card-bg);
|
|
--attachment-border: var(--extra-border-color);
|
|
--attachment-control-bg: var(--c-light-40);
|
|
--attachment-control-border: var(--c-light-50);
|
|
--attachment-control-hover-bg: var(--c-light-90);
|
|
|
|
// Hover controls
|
|
--hover-controls-border: 1px solid;
|
|
--hover-controls-border-opacity: 0.5;
|
|
|
|
// Task detail item
|
|
--task-detail-value-color: rgba(
|
|
var(--palette-foreground-secondary-text),
|
|
var(--palette-foreground-secondary-text-alpha, 1)
|
|
);
|
|
--task-detail-bg: var(--card-bg);
|
|
--task-detail-bg-hover: #eeeeee;
|
|
--task-detail-shadow: var(--whiteframe-shadow-1dp);
|
|
|
|
// Grid colors
|
|
--grid-color: #dadce0;
|
|
|
|
// Special colors overrides for light theme
|
|
--sun-yellow: #ffc107;
|
|
|
|
// Transition duration overrides for light theme
|
|
--transition-duration-s: 180ms;
|
|
--transition-duration-l: 400ms;
|
|
--transition-duration--leave: 195ms;
|
|
}
|
|
|
|
// -----------------------------
|
|
// Dark Theme
|
|
// -----------------------------
|
|
body.isDarkTheme {
|
|
// Background colors
|
|
//--bg: var(--dark0);
|
|
--bg: #131314;
|
|
--bg-darker: var(--dark0);
|
|
--bg-slightly-lighter: var(--dark4);
|
|
--bg-lighter: var(--dark12);
|
|
--bg-lightest: var(--dark24);
|
|
--bg-super-light: #616161;
|
|
--card-bg: var(--dark2);
|
|
|
|
// Navigation & Panel backgrounds
|
|
--sidenav-bg: transparent;
|
|
--sidenav-bg-mobile: var(--bg);
|
|
--sidenav-active: rgba(255, 255, 255, 0.075);
|
|
--sidenav-active-text: var(--c-primary);
|
|
--sidebar-border: var(--divider-color);
|
|
--sidebar-hover: var(--palette-background-hover);
|
|
--sidebar-text: var(--text-color);
|
|
--sidebar-text-secondary: var(--text-color-muted);
|
|
--overlay-bg: var(--c-backdrop, rgba(0, 0, 0, 0.8));
|
|
--right-panel-bg: var(--dark5);
|
|
|
|
// Text colors
|
|
--text-color: rgb(230, 230, 230);
|
|
--text-color-less-intense: rgba(235, 235, 235, 0.9);
|
|
--text-color-muted: rgba(235, 235, 235, 0.75);
|
|
--text-color-more-intense: rgb(245, 245, 245);
|
|
--text-color-most-intense: rgb(255, 255, 255);
|
|
|
|
// Selected task
|
|
--selected-task-bg-color: var(--dark6);
|
|
|
|
// Borders and separators
|
|
--extra-border-color: rgba(255, 255, 255, 0.12);
|
|
--separator-color: rgba(255, 255, 255, 0.1);
|
|
--divider-color: rgba(255, 255, 255, 0.12);
|
|
|
|
// Backdrop
|
|
--c-backdrop: var(--c-dark-60);
|
|
|
|
// Note colors
|
|
--standard-note-bg: var(--dark10);
|
|
--standard-note-fg: #eeeeee;
|
|
--standard-note-bg-hovered: var(--dark24);
|
|
--notes-container-bg: inherit;
|
|
|
|
// Task colors
|
|
//--task-c-bg: #212123ff;
|
|
--task-c-bg: var(--dark2);
|
|
--sub-task-c-bg: var(--dark4);
|
|
--sub-task-c-bg-done: var(--dark3);
|
|
--task-c-bg-done: var(--dark1);
|
|
|
|
--task-c-selected-bg: var(--right-panel-bg);
|
|
--task-c-current-bg: var(--dark12);
|
|
--task-c-drag-drop-bg: var(--dark12);
|
|
--sub-task-c-bg-in-selected: var(--dark10);
|
|
|
|
// Task shadows
|
|
--task-current-shadow: var(--whiteframe-shadow-8dp);
|
|
--task-selected-shadow: var(--whiteframe-shadow-4dp);
|
|
|
|
// Scrollbar colors
|
|
--scrollbar-thumb: rgba(51, 51, 51, 0.6);
|
|
--scrollbar-thumb-hover: rgba(68, 68, 68, 0.8);
|
|
--scrollbar-track: rgba(34, 34, 34, 0.4);
|
|
|
|
// Grid colors
|
|
--grid-color: var(--c-light-10);
|
|
|
|
// Chip colors
|
|
--chip-outline-color: rgba(125, 125, 125, 0.4);
|
|
|
|
// Close button
|
|
--close-btn-bg: var(--bg-lightest);
|
|
--close-btn-border: var(--extra-border-color);
|
|
|
|
// Banner
|
|
--banner-bg: var(--bg-lightest);
|
|
|
|
// Improvement banner
|
|
--improvement-text: var(--text-color-most-intense);
|
|
--improvement-border: var(--c-light-33);
|
|
--improvement-button-text: white;
|
|
|
|
// Select/Options
|
|
--select-hover-bg: var(--c-light-10);
|
|
--options-border-color: var(--c-light-10);
|
|
|
|
// Attachments
|
|
--attachment-bg: var(--bg-lighter);
|
|
--attachment-border: transparent;
|
|
--attachment-control-bg: var(--c-dark-40);
|
|
--attachment-control-border: var(--c-dark-50);
|
|
--attachment-control-hover-bg: var(--c-dark-90);
|
|
|
|
// Hover controls
|
|
--hover-controls-border: none;
|
|
--hover-controls-border-opacity: 0;
|
|
|
|
// Task detail item
|
|
--task-detail-value-color: rgba(255, 255, 255, 0.7);
|
|
--task-detail-bg: var(--dark8);
|
|
--task-detail-bg-hover: var(--dark12);
|
|
|
|
// Material Design sidenav backdrop override
|
|
--mat-sidenav-scrim-color: var(--c-dark-80);
|
|
}
|