2019-10-18 19:36:30 +00:00
|
|
|
@import "./util";
|
2019-02-05 08:13:15 +00:00
|
|
|
|
2021-11-18 09:12:21 +00:00
|
|
|
$font-size: 11pt;
|
2020-04-02 12:52:02 +00:00
|
|
|
$menu-width: 256px;
|
|
|
|
$topbar-height: 56px;
|
2019-02-06 10:24:29 +00:00
|
|
|
$mobile-width: 800px;
|
2020-05-08 11:23:06 +00:00
|
|
|
$float-spacing: 20px;
|
2019-02-06 10:24:29 +00:00
|
|
|
|
2019-02-22 13:34:11 +00:00
|
|
|
// Width
|
|
|
|
|
2020-04-02 12:52:02 +00:00
|
|
|
$width-xs: 400px;
|
|
|
|
$width-sm: 544px;
|
|
|
|
$width-md: 800px;
|
|
|
|
$width-lg: 1280px;
|
|
|
|
$width-xl: 1600px;
|
2019-02-22 13:34:11 +00:00
|
|
|
|
2019-10-04 22:16:57 +00:00
|
|
|
// Spacing
|
2019-02-06 10:24:29 +00:00
|
|
|
|
2019-10-04 22:16:57 +00:00
|
|
|
$spacing-xs: 4px;
|
|
|
|
$spacing-sm: 8px;
|
|
|
|
$spacing-md: 16px;
|
|
|
|
$spacing-lg: 32px;
|
2019-11-10 10:08:44 +00:00
|
|
|
$spacing-xl: 70px;
|
2019-02-06 10:24:29 +00:00
|
|
|
|
2019-02-08 16:49:51 +00:00
|
|
|
// Light theme
|
|
|
|
|
2021-11-18 09:12:21 +00:00
|
|
|
/* $color-primary: #f7931e;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-secondary: $color-primary;
|
|
|
|
|
2019-10-01 14:17:57 +00:00
|
|
|
$color-font: #222;
|
|
|
|
$color-font-light: #555;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-font-secondary: #9b9b9b;
|
2019-02-13 13:01:37 +00:00
|
|
|
$color-font-dark: white;
|
2019-02-15 13:29:47 +00:00
|
|
|
$color-font-link: #005a9a;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-font-bg: rgba(0, 0, 0, .7);
|
|
|
|
$color-font-bg-marginal: rgba(0, 0, 0, .4);
|
|
|
|
$color-font-bg-dark: rgba(255, 255, 255, .7);
|
|
|
|
$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
|
|
|
|
|
2019-11-14 13:37:18 +00:00
|
|
|
$color-header: #3d3d3d;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-menu-header: #3d3d3d;
|
|
|
|
$color-bg: #e5e5e5;
|
|
|
|
$color-bg-dark: #3d3d3d;
|
2019-11-14 13:37:18 +00:00
|
|
|
$color-active: #3d3d3d;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-active-font: $color-font-dark;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-bg-panel: white;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-main: $color-primary;
|
|
|
|
$color-marginal: #ccc;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-success: #a3d131;
|
|
|
|
$color-notice: #32b1ce;
|
|
|
|
$color-alert: #f42121;
|
2019-11-10 10:08:44 +00:00
|
|
|
$color-button: $color-secondary;
|
2019-02-15 13:29:47 +00:00
|
|
|
|
2019-02-10 21:56:11 +00:00
|
|
|
$color-spacer: rgba(0, 0, 0, .3);
|
|
|
|
$color-spacer-light: rgba(0, 0, 0, .12);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-input-underline: rgba(0, 0, 0, .12);
|
2019-10-04 10:33:16 +00:00
|
|
|
$color-input-underline-hover: rgba(0, 0, 0, .6);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-shadow: rgba(0, 0, 0, .2);
|
2019-10-01 14:17:57 +00:00
|
|
|
$color-hightlight: rgba(0, 0, 0, .05);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-hover-cd: rgba(0, 0, 0, .1);
|
|
|
|
$color-hover-dc: .7;
|
|
|
|
$color-disabled: .6;
|
|
|
|
|
2021-01-20 12:51:30 +00:00
|
|
|
$color-primary-medium: lighten($color-primary, 20%);
|
|
|
|
$color-primary-light: lighten($color-primary, 35%);
|
2019-06-26 11:35:38 +00:00
|
|
|
$color-font-link-medium: lighten($color-font-link, 20%);
|
|
|
|
$color-font-link-light: lighten($color-font-link, 35%);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-main-medium: lighten($color-main, 20%);
|
|
|
|
$color-main-light: lighten($color-main, 35%);
|
|
|
|
$color-success-medium: lighten($color-success, 20%);
|
|
|
|
$color-success-light: lighten($color-success, 35%);
|
|
|
|
$color-notice-medium: lighten($color-notice, 20%);
|
|
|
|
$color-notice-light: lighten($color-notice, 35%);
|
|
|
|
$color-alert-medium: lighten($color-alert, 20%);
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-alert-light: lighten($color-alert, 35%); */
|
2019-09-25 21:09:10 +00:00
|
|
|
/**/
|
2019-02-08 16:49:51 +00:00
|
|
|
|
|
|
|
// Dark theme
|
2021-11-18 13:00:45 +00:00
|
|
|
$color-primary: #ec8916;
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-secondary: $color-primary;
|
|
|
|
|
2019-10-04 22:16:57 +00:00
|
|
|
$color-font: #eee;
|
2019-10-01 14:17:57 +00:00
|
|
|
$color-font-light: #aaa;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-font-secondary: #777;
|
2019-02-13 13:01:37 +00:00
|
|
|
$color-font-dark: white;
|
2021-11-18 09:36:12 +00:00
|
|
|
$color-font-link: #66bfff;
|
2019-02-13 13:01:37 +00:00
|
|
|
$color-font-bg: rgba(0, 0, 0, .8);
|
2021-11-18 13:00:45 +00:00
|
|
|
$color-font-bg-marginal: rgba(255, 255, 255, .4);
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-font-bg-dark: rgba(255, 255, 255, .7);
|
|
|
|
$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
|
|
|
|
|
|
|
|
$color-header: #3d3d3d;
|
|
|
|
$color-menu-header: #3d3d3d;
|
|
|
|
$color-bg: #222;
|
|
|
|
$color-bg-dark: #222;
|
2019-02-08 17:09:14 +00:00
|
|
|
$color-active: #666;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-active-font: white;
|
|
|
|
$color-bg-panel: #3c3b3b;
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-main: $color-primary;
|
2021-11-18 13:00:45 +00:00
|
|
|
$color-marginal: #222;
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-success: #a3d131;
|
|
|
|
$color-notice: #32b1ce;
|
2021-11-18 09:36:12 +00:00
|
|
|
$color-alert: #fa3939;
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-button: $color-secondary;
|
2019-10-04 10:33:16 +00:00
|
|
|
|
2019-02-10 21:56:11 +00:00
|
|
|
$color-spacer: rgba(255, 255, 255, .3);
|
|
|
|
$color-spacer-light: rgba(255, 255, 255, .12);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-input-underline: rgba(255, 255, 255, .12);
|
2019-10-04 22:16:57 +00:00
|
|
|
$color-input-underline-hover: rgba(255, 255, 255, .6);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-shadow: rgba(0, 0, 0, .2);
|
2021-11-18 15:02:47 +00:00
|
|
|
$color-border: rgba(0, 0, 0, .3);
|
2019-02-08 16:49:51 +00:00
|
|
|
$color-hightlight: rgba(255, 255, 255, .15);
|
|
|
|
$color-hover-cd: rgba(255, 255, 255, .1);
|
|
|
|
$color-hover-dc: .7;
|
|
|
|
$color-disabled: .6;
|
|
|
|
|
2021-11-18 09:12:21 +00:00
|
|
|
$color-primary-medium: lighten($color-primary, 20%);
|
|
|
|
$color-primary-light: lighten($color-primary, 35%);
|
|
|
|
$color-font-link-medium: lighten($color-font-link, 20%);
|
|
|
|
$color-font-link-light: lighten($color-font-link, 35%);
|
|
|
|
$color-main-medium: lighten($color-main, 20%);
|
|
|
|
$color-main-light: lighten($color-main, 35%);
|
|
|
|
$color-success-medium: lighten($color-success, 20%);
|
|
|
|
$color-success-light: lighten($color-success, 35%);
|
|
|
|
$color-notice-medium: lighten($color-notice, 20%);
|
|
|
|
$color-notice-light: lighten($color-notice, 35%);
|
|
|
|
$color-alert-medium: lighten($color-alert, 20%);
|
|
|
|
$color-alert-light: lighten($color-alert, 35%);
|
2019-02-22 13:34:11 +00:00
|
|
|
/**/
|
|
|
|
|
|
|
|
// Border
|
|
|
|
|
2021-11-18 15:02:47 +00:00
|
|
|
$border-thin: 1px solid $color-border;
|
2020-04-02 12:52:02 +00:00
|
|
|
$border-thin-light: 1px solid $color-spacer-light;
|
2021-11-18 15:02:47 +00:00
|
|
|
$border: 2px solid $color-border;
|
2020-04-02 12:52:02 +00:00
|
|
|
$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
|