mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-18 00:46:45 +00:00
190 lines
5.8 KiB
SCSS
190 lines
5.8 KiB
SCSS
@use 'angular-material-css-vars' as mat-css-vars;
|
|
|
|
@import 'styles/config/shadows';
|
|
@import 'styles/functions/_ddivide';
|
|
|
|
$s: 8px;
|
|
$card-border-radius: 4px;
|
|
|
|
// COLORS
|
|
// ------
|
|
//| elevation | overlay | hex |
|
|
//| --------- | ------- | ------- |
|
|
//| 00dp | 0% | #121212 |
|
|
//| 01dp | 5% | #1e1e1e |
|
|
//| 02dp | 7% | #222222 |
|
|
//| 03dp | 8% | #242424 |
|
|
//| 04dp | 9% | #272727 |
|
|
//| 06dp | 11% | #2c2c2c |
|
|
//| 08dp | 12% | #2e2e2e |
|
|
//| 12dp | 14% | #333333 |
|
|
//| 16dp | 15% | #343434 |
|
|
//| 24dp | 16% | #383838 |
|
|
//$dark0: #121212;
|
|
//$dark1: #1e1e1e;
|
|
//$dark2: #222222;
|
|
//$dark3: #242424;
|
|
//$dark4: #272727;
|
|
//$dark6: #2c2c2c;
|
|
//$dark8: #2e2e2e;
|
|
//$dark12: #333333;
|
|
//$dark16: #343434;
|
|
//$dark24: #383838;
|
|
$dark0: rgb(18, 18, 18);
|
|
$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);
|
|
|
|
$dark-theme-bg: $dark0;
|
|
$dark-theme-bg-darker: $dark0;
|
|
$dark-theme-bg-slightly-lighter: $dark4;
|
|
$dark-theme-bg-lighter: $dark12;
|
|
$dark-theme-bg-lightest: $dark24;
|
|
$dark-theme-bg-super-light: #616161;
|
|
|
|
$dark-theme-card-bg: $dark2;
|
|
$dark-theme-sidebar-bg: $dark8;
|
|
|
|
//$light-theme-bg: rgb(250, 250, 250);
|
|
$light-theme-bg: #f8f8f7;
|
|
$light-theme-bg-darker: rgb(235, 235, 235);
|
|
$light-theme-bg-drag-col: rgb(242, 242, 242);
|
|
|
|
$dark-theme-text-color: rgb(235, 235, 235);
|
|
$dark-theme-text-color-less-intense: transparentize($dark-theme-text-color, 0.1);
|
|
$dark-theme-text-color-muted: transparentize($dark-theme-text-color, 0.4);
|
|
$dark-theme-text-color-more-intense: rgb(245, 245, 245);
|
|
$dark-theme-text-color-most-intense: rgb(255, 255, 255);
|
|
|
|
$light-theme-text-color: rgb(44, 44, 44);
|
|
$light-theme-text-color-less-intense: transparentize($light-theme-text-color, 0.1);
|
|
$light-theme-text-color-muted: transparentize($light-theme-text-color, 0.4);
|
|
$light-theme-text-color-most-intense: rgb(0, 0, 0);
|
|
|
|
$light-theme-selected-task-bg-color: mat-css-vars.mat-css-color-primary(100);
|
|
$light-theme-selected-task-bg-color: #fff;
|
|
|
|
// TODO refactor names or how they are used
|
|
$light-theme-extra-border-color: #dddddd;
|
|
$dark-theme-extra-border-color: rgba(255, 255, 255, 0.12);
|
|
$light-theme-separator-color: rgba(18, 18, 18, 0.3);
|
|
$dark-theme-separator-color: rgba(255, 255, 255, 0.3);
|
|
|
|
$c-accent: mat-css-vars.mat-css-color-accent();
|
|
$c-warn: mat-css-vars.mat-css-color-warn();
|
|
|
|
$c-primary: mat-css-vars.mat-css-color-primary();
|
|
$c-primary-50: mat-css-vars.mat-css-color-primary(50);
|
|
$c-primary-100: mat-css-vars.mat-css-color-primary(100);
|
|
$c-primary-200: mat-css-vars.mat-css-color-primary(200);
|
|
$c-primary-300: mat-css-vars.mat-css-color-primary(300);
|
|
$c-primary-400: mat-css-vars.mat-css-color-primary(400);
|
|
$c-primary-600: mat-css-vars.mat-css-color-primary(600);
|
|
$c-primary-700: mat-css-vars.mat-css-color-primary(700);
|
|
$c-primary-800: mat-css-vars.mat-css-color-primary(800);
|
|
$c-primary-900: mat-css-vars.mat-css-color-primary(900);
|
|
|
|
$c-contrast: mat-css-vars.mat-css-contrast-color();
|
|
$c-contrast-600: mat-css-vars.mat-css-contrast-color(600);
|
|
|
|
$c-focus-border: $c-primary-400;
|
|
$c-backdrop-light-theme: rgba(0, 0, 0, 0.6);
|
|
$c-backdrop-dark-theme: rgba(0, 0, 0, 0.6);
|
|
|
|
$success-green: #4fa758;
|
|
$yellow: #fff400; // for sun
|
|
|
|
// LAYOUT
|
|
// ------
|
|
$layout-xxxs: 398px;
|
|
$layout-xxs: 440px;
|
|
$layout-xs: 600px;
|
|
$layout-sm: 960px;
|
|
$layout-md: 1280px;
|
|
$layout-lg: 1920px;
|
|
$layout-xl: 2000px;
|
|
|
|
$component-max-width: 800px;
|
|
|
|
$side-nav-width-switch-l: 1500px;
|
|
$side-nav-width: 200px;
|
|
$side-nav-width-l: $side-nav-width * 2;
|
|
//$main-header-height: $s*7;
|
|
|
|
$bar-height-large: 56px;
|
|
$bar-height: 48px;
|
|
$bar-height-small: 40px;
|
|
$mat-mini-fab-size: 48px;
|
|
$mac-title-bar-padding: 20px;
|
|
|
|
// INDEXES
|
|
// -------
|
|
$z-focus-mode-overlay: 101;
|
|
$z-side-panel-task-and-notes: 44;
|
|
$z-side-panel-planner: $z-side-panel-task-and-notes + 2;
|
|
$z-task-side-bar-over: 100;
|
|
$z-main-header-wrapper: 50;
|
|
$z-side-nav: 60;
|
|
$z-banner: 11;
|
|
$z-main-header: 10;
|
|
$z-celebrate: 102;
|
|
$z-backdrop: 222;
|
|
$z-add-task-bar: 10000;
|
|
$z-search-bar: 10000;
|
|
$z-tour: 10001;
|
|
|
|
// COMPONENTS
|
|
// ----------
|
|
$standard-note-bg-light: #ffffff;
|
|
$standard-note-fg-light: $light-theme-text-color;
|
|
$standard-note-bg-dark: $dark16;
|
|
$standard-note-bg-dark-hovered: $dark-theme-bg-lightest;
|
|
$standard-note-fg-dark: #eeeeee;
|
|
|
|
$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;
|
|
|
|
// ANIMATIONS
|
|
// ----------
|
|
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_variables.scss
|
|
$ani-standard-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
|
$ani-enter-timing: cubic-bezier(0, 0, 0.2, 1) !default;
|
|
$ani-leave-timing: cubic-bezier(0.4, 0, 1, 1) !default;
|
|
$ani-sharp-timing: cubic-bezier(0.4, 0, 0.6, 1) !default;
|
|
|
|
$ease-in-out-quint: cubic-bezier(0.38, 0.04, 0.35, 0.96);
|
|
$transition-duration-xs: 90ms;
|
|
$transition-duration-s: 150ms;
|
|
$transition-duration-m: 225ms;
|
|
$transition-duration-l: 375ms;
|
|
|
|
$transition-duration--enter: $transition-duration-m;
|
|
$transition-duration--leave: 195ms;
|
|
|
|
$transition-enter: $transition-duration--enter $ani-enter-timing;
|
|
$transition-leave: $transition-duration--leave $ani-leave-timing;
|
|
$transition-standard: $transition-duration-m $ani-standard-timing;
|
|
$transition-sharp: $transition-duration-m $ani-sharp-timing;
|
|
$transition-slow: $transition-duration-l $ani-standard-timing;
|
|
$transition-fast: $transition-duration-s $ani-standard-timing;
|
|
$transition-ultra-fast: $transition-duration-xs $ani-standard-timing;
|
|
|
|
$page-transition-duration: $transition-duration-m;
|
|
|
|
@import 'styles/mixins/mixins';
|
|
@import 'styles/extends/extends';
|