174 lines
6.1 KiB
SCSS
174 lines
6.1 KiB
SCSS
//// General
|
|
$background-color: white;
|
|
$default-bg-2: #f8f8f8 !default;
|
|
$default-bg-3: #f4f5f6 !default;
|
|
$default-bg-4: #f1f3f2 !default;
|
|
$default-bg-5: #edf0ee !default;
|
|
$default-bg-6: #e4eae8 !default;
|
|
$default-bg-7: #e4e4e4 !default;
|
|
$ok-fg: #17ad17 !default;
|
|
$error-fg: #ad1717 !default;
|
|
|
|
$default-fg: black !default;
|
|
$default-fg-2: #23513a !default;
|
|
$default-fg-3: #195331b3 !default;
|
|
$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
|
|
$header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
|
|
$no-items-color: #555555;
|
|
|
|
//// Notifications
|
|
$notification-bg: rgba(185, 255, 193, 0.9) !default;
|
|
$notification-hover-bg: rgba(160,245,178,0.95) !default;
|
|
$notification-warning-bg: rgba(228, 255, 78, 0.9) !default;
|
|
$notification-warning-hover-bg: rgba(218, 245, 68, 0.95) !default;
|
|
$notification-error-bg: rgba(255, 100, 100, 0.9) !default;
|
|
$notification-error-hover-bg: rgba(245, 90, 90, 0.95) !default;
|
|
$notification-border: 1px solid rgba(109, 205, 134, 0.62) !default;
|
|
$notification-warning-border: 1px solid rgba(205, 205, 109, 0.62) !default;
|
|
$notification-error-border: 1px solid rgba(205, 109, 109, 0.62) !default;
|
|
$notification-title-border: 1px solid rgba(83, 158, 102, 0.43) !default;
|
|
$notification-icon-color: black !default;
|
|
$notification-warning-icon-color: #662 !default;
|
|
$notification-error-icon-color: #8b0000 !default;
|
|
$notification-title-fg: #364 !default;
|
|
|
|
//// Loading panel
|
|
$loading-bg: #909090;
|
|
|
|
//// Dashboard
|
|
$dashboard-bg: url('@/assets/img/dashboard-bg-light.jpg');
|
|
|
|
//// Borders
|
|
$border-color-1: #e1e4e8 !default;
|
|
$border-color-2: #dddddd !default;
|
|
$border-color-3: #cccccc !default;
|
|
$border-focus: 1px solid rgba(127, 216, 95, 0.83);
|
|
$border-hover: 1px solid rgba(159, 180, 152, 0.83);
|
|
|
|
$default-border: 1px solid $border-color-1 !default;
|
|
$default-border-2: 1px solid $border-color-2 !default;
|
|
$default-border-3: 1px solid $border-color-3 !default;
|
|
|
|
//// Tabs
|
|
$tabs-bg: #f6f6f6 !default;
|
|
$tab-bg: linear-gradient(0deg, #ececec, #f6f6f6) !default;
|
|
|
|
//// Shadows
|
|
$default-shadow-color: #c0c0c0 !default;
|
|
$border-shadow-top: 0 -2.5px 4px 0 $default-shadow-color;
|
|
$border-shadow-bottom: 0 3px 2px -1px $default-shadow-color;
|
|
$border-shadow-left: -2.5px 0 4px 0 $default-shadow-color;
|
|
$border-shadow-right: 2.5px 0 4px 0 $default-shadow-color;
|
|
$border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
|
|
$header-shadow: 0px 1px 3px 1px #bbb !default;
|
|
$group-shadow: 3px -2px 6px 1px #98b0a0;
|
|
$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
|
|
$search-bar-shadow: 1px 1px 1px 1px #ddd !default;
|
|
|
|
//// Modals
|
|
$modal-header-bg: #e0e0e0 !default;
|
|
$modal-header-border: 1px solid #ccc !default;
|
|
$modal-body-bg: white !default;
|
|
|
|
///// General-purpose colors
|
|
|
|
/// Selected
|
|
$selected-bg: linear-gradient(90deg, rgba(200,255,208,1) 0%, rgba(216,239,232,1) 100%) !default;
|
|
$selected-fg: #32b646;
|
|
$selected-border: 1px solid #98cfa0 !default;
|
|
|
|
/// Links
|
|
$default-link-fg: #5f7869 !default;
|
|
|
|
/// Active
|
|
$active-glow-bg-1: #d4ffe3 !default;
|
|
$active-glow-bg-2: #9cdfb0 !default;
|
|
|
|
/// Hover
|
|
$default-hover-fg: #35b870 !default;
|
|
$default-hover-fg-2: #38cf80 !default;
|
|
$hover-fg: $default-hover-fg !default;
|
|
$hover-bg: linear-gradient(90deg, rgba(190,246,218,1) 0%, rgba(229,251,240,1) 100%) !default;
|
|
$hover-bg-2: rgb(190,246,218) !default;
|
|
$active-bg: #8fefb7 !default;
|
|
|
|
/// Disabled
|
|
$disabled-fg: rgb(155, 155, 155);
|
|
|
|
/// Navigator
|
|
$nav-bg: #4c4c4c !default;
|
|
$nav-fg: white !default;
|
|
$nav-toggler-bg: rgba(0, 0, 0, 0.25) !default;
|
|
$nav-toggler-collapsed-bg: none !default;
|
|
$nav-toggler-collapsed-mobile-bg: #3c3c3c !default;
|
|
$nav-toggler-collapsed-mobile-fg: white !default;
|
|
$nav-toggler-shadow: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
|
$nav-footer-shadow: 1px -1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
|
$nav-footer-bg: rgba(0, 0, 0, 0.25) !default;
|
|
$nav-entry-selected-bg: rgba(80,120,110,0.8) !default;
|
|
$nav-entry-selected-border: 1px solid #b1ebba !default;
|
|
$nav-entry-hover-bg: #5a8c78 !default;
|
|
$nav-entry-collapsed-selected-bg: rgba(160, 245, 178, 0.95) !default;
|
|
$nav-entry-collapsed-hover-bg: rgba(160, 245, 178, 0.60) !default;
|
|
$nav-box-shadow-main: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
|
|
$nav-box-shadow-entry: 0 0 1px 1px #c9cdca !default;
|
|
$nav-box-shadow-collapsed: 1px 0 2px 1px #bbb !default;
|
|
$nav-entry-border: 1px solid rgba(255,255,255,0.15) !default;
|
|
$nav-collapsed-bg: white;
|
|
$nav-collapsed-fg: #5e5e5e;
|
|
|
|
/// Panel/menu components
|
|
$menu-panel-bg: #e0eae8;
|
|
$menu-panel-content-bg: white;
|
|
$plugin-panel-shadow: 0 0 2px 2px #ccc !default;
|
|
$plugin-panel-entry-shadow: 1px 0 1px 1px #ddd !default;
|
|
$plugin-panel-first-entry-shadow: 2px 0 1px -2px #ddd !default;
|
|
$plugin-panel-last-entry-shadow: -1px 0 1px 0 #ddd !default;
|
|
$menu-header-bg: #dde5e1 !default;
|
|
$menu-header-shadow: 0 0 1px 1px #c0c0c0 !default;
|
|
|
|
/// Toggle switch
|
|
$toggle-bg: #e0e8e0 !default;
|
|
$toggle-selected-bg: linear-gradient(90deg, #4fef97, #27ee5e) !default;
|
|
$toggle-dot-bg: #d4d8d6 !default;
|
|
$toggle-shadow: inset 0 0 2px 1px #c8c8c8 !default;
|
|
$toggle-dot-shadow: inset 0 0 2px 1px #d0d0d0 !default;
|
|
$toggle-selected-dot-bg: white;
|
|
|
|
//// Slider element
|
|
$slider-bg: #e4e4e4 !default;
|
|
$slider-track-shadow: #a5a2a2;
|
|
$slider-thumb-bg: #37d560 !default;
|
|
$slider-thumb-disabled-bg: rgba(0,215,80,0.3) !default;
|
|
$slider-thumb-shadow: #475c40 !default;
|
|
$slider-thumb-border: #83997896 !default;
|
|
$slider-hover-on-hover-bg: #d2d2d2 !default;
|
|
$slider-progress-bg: rgba(0,215,80,0.5) !default;
|
|
|
|
//// Input element
|
|
$input-icon-fg: #888;
|
|
$input-icon-focus-border: 1px solid rgba(127, 216, 95, 0.83);
|
|
$input-icon-hover-border: 1px solid rgba(159, 180, 152, 0.83);
|
|
|
|
//// Media elements
|
|
$play-btn-fg: #27ee5e !default;
|
|
|
|
//// Dropdown element
|
|
$dropdown-bg: rgb(241, 243, 242) !default;
|
|
$dropdown-disabled-color: #999 !default;
|
|
$dropdown-shadow: 1px 1px 1px #bbb !default;
|
|
|
|
//// Scrollbars
|
|
$scrollbar-track-bg: $slider-bg !default;
|
|
$scrollbar-track-shadow: inset 1px 0px 3px 0 $slider-track-shadow !default;
|
|
$scrollbar-thumb-bg: #a5a2a2 !default;
|
|
|
|
//// Rows
|
|
$row-shadow: 0 0 1px 0.5px #cfcfcf !default;
|
|
|
|
//// Code blocks
|
|
$code-dark-bg: rgb(11, 11, 13) !default;
|
|
$code-dark-fg: rgb(243, 243, 250) !default;
|
|
$code-light-bg: #f2f0e9 !default;
|
|
$code-light-fg: #090909 !default;
|