587 lines
25 KiB
SCSS
587 lines
25 KiB
SCSS
@use 'sass:color';
|
|
/* Latte Theme */
|
|
$latte-rosewater: rgb(220, 138, 120);
|
|
$latte-flamingo: rgb(221, 120, 120);
|
|
$latte-pink: rgb(234, 118, 203);
|
|
$latte-mauve: rgb(136, 57, 239);
|
|
$latte-red: rgb(210, 15, 57);
|
|
$latte-maroon: rgb(230, 69, 83);
|
|
$latte-peach: rgb(254, 100, 11);
|
|
$latte-yellow: rgb(223, 142, 29);
|
|
$latte-green: rgb(64, 160, 43);
|
|
$latte-teal: rgb(23, 146, 153);
|
|
$latte-sky: rgb(4, 165, 229);
|
|
$latte-sapphire: rgb(32, 159, 181);
|
|
$latte-blue: rgb(30, 102, 245);
|
|
$latte-lavender: rgb(114, 135, 253);
|
|
$latte-text: rgb(76, 79, 105);
|
|
$latte-subtext1: rgb(92, 95, 119);
|
|
$latte-subtext0: rgb(108, 111, 133);
|
|
$latte-overlay2: rgb(124, 127, 147);
|
|
$latte-overlay1: rgb(140, 143, 161);
|
|
$latte-overlay0: rgb(156, 160, 176);
|
|
$latte-surface2: rgb(172, 176, 190);
|
|
$latte-surface1: rgb(188, 192, 204);
|
|
$latte-surface0: rgb(204, 208, 218);
|
|
$latte-base: rgb(239, 241, 245);
|
|
$latte-mantle: rgb(230, 233, 239);
|
|
$latte-crust: rgb(220, 224, 232);
|
|
|
|
/* Frappe Theme */
|
|
$frappe-rosewater: rgb(242, 213, 207);
|
|
$frappe-flamingo: rgb(238, 190, 190);
|
|
$frappe-pink: rgb(244, 184, 228);
|
|
$frappe-mauve: rgb(202, 158, 230);
|
|
$frappe-red: rgb(231, 130, 132);
|
|
$frappe-maroon: rgb(234, 153, 156);
|
|
$frappe-peach: rgb(239, 159, 118);
|
|
$frappe-yellow: rgb(229, 200, 144);
|
|
$frappe-green: rgb(166, 209, 137);
|
|
$frappe-teal: rgb(129, 200, 190);
|
|
$frappe-sky: rgb(153, 209, 219);
|
|
$frappe-sapphire: rgb(133, 193, 220);
|
|
$frappe-blue: rgb(140, 170, 238);
|
|
$frappe-lavender: rgb(186, 187, 241);
|
|
$frappe-text: rgb(198, 208, 245);
|
|
$frappe-subtext1: rgb(181, 191, 226);
|
|
$frappe-subtext0: rgb(165, 173, 206);
|
|
$frappe-overlay2: rgb(148, 156, 187);
|
|
$frappe-overlay1: rgb(131, 139, 167);
|
|
$frappe-overlay0: rgb(115, 121, 148);
|
|
$frappe-surface2: rgb(98, 104, 128);
|
|
$frappe-surface1: rgb(81, 87, 109);
|
|
$frappe-surface0: rgb(65, 69, 89);
|
|
$frappe-base: rgb(48, 52, 70);
|
|
$frappe-mantle: rgb(41, 44, 60);
|
|
$frappe-crust: rgb(35, 38, 52);
|
|
|
|
/* Macchiato Theme */
|
|
$macchiato-rosewater: rgb(244, 219, 214);
|
|
$macchiato-flamingo: rgb(240, 198, 198);
|
|
$macchiato-pink: rgb(245, 189, 230);
|
|
$macchiato-mauve: rgb(198, 160, 246);
|
|
$macchiato-red: rgb(237, 135, 150);
|
|
$macchiato-maroon: rgb(238, 153, 160);
|
|
$macchiato-peach: rgb(245, 169, 127);
|
|
$macchiato-yellow: rgb(238, 212, 159);
|
|
$macchiato-green: rgb(166, 218, 149);
|
|
$macchiato-teal: rgb(139, 213, 202);
|
|
$macchiato-sky: rgb(145, 215, 227);
|
|
$macchiato-sapphire: rgb(125, 196, 228);
|
|
$macchiato-blue: rgb(138, 173, 244);
|
|
$macchiato-lavender: rgb(183, 189, 248);
|
|
$macchiato-text: rgb(202, 211, 245);
|
|
$macchiato-subtext1: rgb(184, 192, 224);
|
|
$macchiato-subtext0: rgb(165, 173, 203);
|
|
$macchiato-overlay2: rgb(147, 154, 183);
|
|
$macchiato-overlay1: rgb(128, 135, 162);
|
|
$macchiato-overlay0: rgb(110, 115, 141);
|
|
$macchiato-surface2: rgb(91, 96, 120);
|
|
$macchiato-surface1: rgb(73, 77, 100);
|
|
$macchiato-surface0: rgb(54, 58, 79);
|
|
$macchiato-base: rgb(36, 39, 58);
|
|
$macchiato-mantle: rgb(30, 32, 48);
|
|
$macchiato-crust: rgb(24, 25, 38);
|
|
|
|
/* Mocha Theme */
|
|
$mocha-rosewater: rgb(245, 224, 220);
|
|
$mocha-flamingo: rgb(242, 205, 205);
|
|
$mocha-pink: rgb(245, 194, 231);
|
|
$mocha-mauve: rgb(203, 166, 247);
|
|
$mocha-red: rgb(243, 139, 168);
|
|
$mocha-maroon: rgb(235, 160, 172);
|
|
$mocha-peach: rgb(250, 179, 135);
|
|
$mocha-yellow: rgb(249, 226, 175);
|
|
$mocha-green: rgb(166, 227, 161);
|
|
$mocha-teal: rgb(148, 226, 213);
|
|
$mocha-sky: rgb(137, 220, 235);
|
|
$mocha-sapphire: rgb(116, 199, 236);
|
|
$mocha-blue: rgb(137, 180, 250);
|
|
$mocha-lavender: rgb(180, 190, 254);
|
|
$mocha-text: rgb(205, 214, 244);
|
|
$mocha-subtext1: rgb(186, 194, 222);
|
|
$mocha-subtext0: rgb(166, 173, 200);
|
|
$mocha-overlay2: rgb(147, 153, 178);
|
|
$mocha-overlay1: rgb(127, 132, 156);
|
|
$mocha-overlay0: rgb(108, 112, 134);
|
|
$mocha-surface2: rgb(88, 91, 112);
|
|
$mocha-surface1: rgb(69, 71, 90);
|
|
$mocha-surface0: rgb(49, 50, 68);
|
|
$mocha-base: rgb(30, 30, 46);
|
|
$mocha-mantle: rgb(24, 24, 37);
|
|
$mocha-crust: rgb(17, 17, 27);
|
|
|
|
|
|
[data-theme-light] {
|
|
//+0.05,
|
|
--color-main-background: #{rgba($latte-base, 0.93)} ;
|
|
--color-main-background-rgb: #{$latte-base};
|
|
--color-main-background-translucent: #{rgba($latte-base, .97)};
|
|
--color-main-background-blur: #{rgba($latte-base, .8)};
|
|
--filter-background-blur: #{blur(25px)};
|
|
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
|
|
--color-background-hover: #{$latte-surface1};
|
|
--color-background-dark: #{color.scale($latte-surface0, $lightness: 5%)};
|
|
--color-background-darker: #{$latte-surface0};
|
|
--color-placeholder-light: #{color.scale($latte-surface2, $lightness: 5%)};
|
|
--color-placeholder-dark: #{$latte-surface2};
|
|
--color-main-text: #{$latte-text};
|
|
--color-text-maxcontrast: #{$latte-subtext1};
|
|
--color-text-maxcontrast-default: #{color.scale($latte-subtext0, $lightness: 5%)};
|
|
--color-text-maxcontrast-background-blur: #{$latte-subtext0};
|
|
--color-text-light: #{var(--color-main-text)};
|
|
--color-text-lighter: #{var(--color-text-maxcontrast)};
|
|
--color-scrollbar: #{$latte-mauve};
|
|
--color-error: #{$latte-red};
|
|
--color-error-rgb: #{$latte-red};
|
|
--color-error-hover: #{color.scale($latte-red, $lightness: 5%)};
|
|
--color-error-text: #{color.scale($latte-red, $lightness: -10%)};
|
|
--color-warning: #{$latte-peach};
|
|
--color-warning-rgb: #{$latte-peach};
|
|
--color-warning-hover: #{color.scale($latte-peach, $lightness: 5%)};
|
|
--color-warning-text: #{color.scale($latte-peach, $lightness: -10%)};
|
|
--color-success: #{$latte-green};
|
|
--color-success-rgb: #{$latte-green};
|
|
--color-success-hover: #{color.scale($latte-green, $lightness: 5%)};
|
|
--color-success-text: #{color.scale($latte-green, $lightness: -10%)};
|
|
--color-info: #{$latte-blue};
|
|
--color-info-rgb: #{$latte-blue};
|
|
--color-info-hover: #{color.scale($latte-blue, $lightness: 5%)};
|
|
--color-info-text: #{color.scale($latte-blue, $lightness: -10%)};
|
|
--color-loading-light: #{$latte-overlay0};
|
|
--color-loading-dark: #{$latte-subtext1};
|
|
--color-box-shadow-rgb: #{color.scale($latte-crust, $lightness: 10%)};
|
|
--color-box-shadow: #{color.scale($latte-crust, $lightness: 15%)};
|
|
--color-border: #{$latte-crust};
|
|
--color-border-dark: #{color.scale($latte-crust, $lightness: 5%)};
|
|
--color-border-maxcontrast: #{color.scale($latte-crust, $lightness: -10%)};
|
|
|
|
|
|
--color-primary: #{$latte-maroon};
|
|
--color-primary-default: #{$latte-maroon};
|
|
--color-primary-text: #{$latte-crust};
|
|
--color-primary-hover: #{color.scale($latte-maroon, $lightness: -5%)};
|
|
|
|
--color-primary-light: #{$latte-green};
|
|
--color-primary-light-text: #{$latte-crust};
|
|
--color-primary-light-hover: #{color.scale($latte-green, $lightness: -5%)};
|
|
|
|
--color-primary-element: #{$latte-maroon};
|
|
--color-primary-element-hover: #{color.scale($latte-maroon, $lightness: -5%)};
|
|
--color-primary-element-text: #{$latte-crust};
|
|
--color-primary-element-text-dark: #{$latte-mantle};
|
|
|
|
--color-primary-element-light: #{$latte-blue};
|
|
--color-primary-element-light-hover: #{color.scale($latte-blue, $lightness: -5%)};
|
|
--color-primary-element-light-text: #{$latte-crust};
|
|
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
|
|
|
//Unchanged
|
|
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--default-font-size: 15px;
|
|
--animation-quick: 100ms;
|
|
--animation-slow: 300ms;
|
|
--border-radius: 3px;
|
|
--border-radius-large: 10px;
|
|
--border-radius-rounded: 28px;
|
|
--border-radius-pill: 100px;
|
|
--default-clickable-area: 44px;
|
|
--default-line-height: 24px;
|
|
--default-grid-baseline: 4px;
|
|
--header-height: 50px;
|
|
--navigation-width: 300px;
|
|
--sidebar-min-width: 300px;
|
|
--sidebar-max-width: 500px;
|
|
--list-min-width: 200px;
|
|
--list-max-width: 300px;
|
|
--header-menu-item-height: 44px;
|
|
--header-menu-profile-item-height: 66px;
|
|
--breakpoint-mobile: 1024px;
|
|
--background-invert-if-dark: invert(100%);
|
|
--background-invert-if-bright: no;
|
|
--background-image-invert-if-bright: no;
|
|
--primary-invert-if-bright: no;
|
|
--primary-invert-if-dark: invert(100%);
|
|
}
|
|
[data-theme-dark] {
|
|
//+0.05,
|
|
--color-main-background: #{rgba($frappe-base, 0.93)} ;
|
|
--color-main-background-rgb: #{$frappe-base};
|
|
--color-main-background-translucent: #{rgba($frappe-base, .97)};
|
|
--color-main-background-blur: #{rgba($frappe-base, .8)};
|
|
--filter-background-blur: #{blur(25px)};
|
|
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
|
|
--color-background-hover: #{$frappe-surface1};
|
|
--color-background-dark: #{color.scale($frappe-surface0, $lightness: 5%)};
|
|
--color-background-darker: #{$frappe-surface0};
|
|
--color-placeholder-light: #{color.scale($frappe-surface2, $lightness: 5%)};
|
|
--color-placeholder-dark: #{$frappe-surface2};
|
|
--color-main-text: #{$frappe-text};
|
|
--color-text-maxcontrast: #{$frappe-subtext1};
|
|
--color-text-maxcontrast-default: #{color.scale($frappe-subtext0, $lightness: 5%)};
|
|
--color-text-maxcontrast-background-blur: #{$frappe-subtext0};
|
|
--color-text-light: #{var(--color-main-text)};
|
|
--color-text-lighter: #{var(--color-text-maxcontrast)};
|
|
--color-scrollbar: #{$frappe-mauve};
|
|
--color-error: #{$frappe-red};
|
|
--color-error-rgb: #{$frappe-red};
|
|
--color-error-hover: #{color.scale($frappe-red, $lightness: 5%)};
|
|
--color-error-text: #{color.scale($frappe-red, $lightness: -10%)};
|
|
--color-warning: #{$frappe-peach};
|
|
--color-warning-rgb: #{$frappe-peach};
|
|
--color-warning-hover: #{color.scale($frappe-peach, $lightness: 5%)};
|
|
--color-warning-text: #{color.scale($frappe-peach, $lightness: -10%)};
|
|
--color-success: #{$frappe-green};
|
|
--color-success-rgb: #{$frappe-green};
|
|
--color-success-hover: #{color.scale($frappe-green, $lightness: 5%)};
|
|
--color-success-text: #{color.scale($frappe-green, $lightness: -10%)};
|
|
--color-info: #{$frappe-blue};
|
|
--color-info-rgb: #{$frappe-blue};
|
|
--color-info-hover: #{color.scale($frappe-blue, $lightness: 5%)};
|
|
--color-info-text: #{color.scale($frappe-blue, $lightness: -10%)};
|
|
--color-loading-light: #{$frappe-overlay0};
|
|
--color-loading-dark: #{$frappe-subtext1};
|
|
--color-box-shadow-rgb: #{color.scale($frappe-crust, $lightness: 10%)};
|
|
--color-box-shadow: #{color.scale($frappe-crust, $lightness: 15%)};
|
|
--color-border: #{$frappe-crust};
|
|
--color-border-dark: #{color.scale($frappe-crust, $lightness: 5%)};
|
|
--color-border-maxcontrast: #{color.scale($frappe-crust, $lightness: -10%)};
|
|
|
|
|
|
--color-primary: #{$frappe-maroon};
|
|
--color-primary-default: #{$frappe-maroon};
|
|
--color-primary-text: #{$frappe-crust};
|
|
--color-primary-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
|
|
|
|
--color-primary-light: #{$frappe-green};
|
|
--color-primary-light-text: #{$frappe-crust};
|
|
--color-primary-light-hover: #{color.scale($frappe-green, $lightness: -5%)};
|
|
|
|
--color-primary-element: #{$frappe-maroon};
|
|
--color-primary-element-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
|
|
--color-primary-element-text: #{$frappe-crust};
|
|
--color-primary-element-text-dark: #{$frappe-mantle};
|
|
|
|
--color-primary-element-light: #{$frappe-blue};
|
|
--color-primary-element-light-hover: #{color.scale($frappe-blue, $lightness: -5%)};
|
|
--color-primary-element-light-text: #{$frappe-crust};
|
|
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
|
|
|
//Unchanged
|
|
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--default-font-size: 15px;
|
|
--animation-quick: 100ms;
|
|
--animation-slow: 300ms;
|
|
--border-radius: 3px;
|
|
--border-radius-large: 10px;
|
|
--border-radius-rounded: 28px;
|
|
--border-radius-pill: 100px;
|
|
--default-clickable-area: 44px;
|
|
--default-line-height: 24px;
|
|
--default-grid-baseline: 4px;
|
|
--header-height: 50px;
|
|
--navigation-width: 300px;
|
|
--sidebar-min-width: 300px;
|
|
--sidebar-max-width: 500px;
|
|
--list-min-width: 200px;
|
|
--list-max-width: 300px;
|
|
--header-menu-item-height: 44px;
|
|
--header-menu-profile-item-height: 66px;
|
|
--breakpoint-mobile: 1024px;
|
|
--background-invert-if-dark: invert(100%);
|
|
--background-invert-if-bright: no;
|
|
--background-image-invert-if-bright: no;
|
|
--primary-invert-if-bright: no;
|
|
--primary-invert-if-dark: invert(100%);
|
|
}
|
|
[data-theme-dark-highcontrast] {
|
|
//+0.05,
|
|
--color-main-background: #{rgba($mocha-base, 0.93)} ;
|
|
--color-main-background-rgb: #{$mocha-base};
|
|
--color-main-background-translucent: #{rgba($mocha-base, .97)};
|
|
--color-main-background-blur: #{rgba($mocha-base, .8)};
|
|
--filter-background-blur: #{blur(25px)};
|
|
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
|
|
--color-background-hover: #{$mocha-surface1};
|
|
--color-background-dark: #{color.scale($mocha-surface0, $lightness: 5%)};
|
|
--color-background-darker: #{$mocha-surface0};
|
|
--color-placeholder-light: #{color.scale($mocha-surface2, $lightness: 5%)};
|
|
--color-placeholder-dark: #{$mocha-surface2};
|
|
--color-main-text: #{$mocha-text};
|
|
--color-text-maxcontrast: #{$mocha-subtext1};
|
|
--color-text-maxcontrast-default: #{color.scale($mocha-subtext0, $lightness: 5%)};
|
|
--color-text-maxcontrast-background-blur: #{$mocha-subtext0};
|
|
--color-text-light: #{var(--color-main-text)};
|
|
--color-text-lighter: #{var(--color-text-maxcontrast)};
|
|
--color-scrollbar: #{$mocha-mauve};
|
|
--color-error: #{$mocha-red};
|
|
--color-error-rgb: #{$mocha-red};
|
|
--color-error-hover: #{color.scale($mocha-red, $lightness: 5%)};
|
|
--color-error-text: #{color.scale($mocha-red, $lightness: -10%)};
|
|
--color-warning: #{$mocha-peach};
|
|
--color-warning-rgb: #{$mocha-peach};
|
|
--color-warning-hover: #{color.scale($mocha-peach, $lightness: 5%)};
|
|
--color-warning-text: #{color.scale($mocha-peach, $lightness: -10%)};
|
|
--color-success: #{$mocha-green};
|
|
--color-success-rgb: #{$mocha-green};
|
|
--color-success-hover: #{color.scale($mocha-green, $lightness: 5%)};
|
|
--color-success-text: #{color.scale($mocha-green, $lightness: -10%)};
|
|
--color-info: #{$mocha-blue};
|
|
--color-info-rgb: #{$mocha-blue};
|
|
--color-info-hover: #{color.scale($mocha-blue, $lightness: 5%)};
|
|
--color-info-text: #{color.scale($mocha-blue, $lightness: -10%)};
|
|
--color-loading-light: #{$mocha-overlay0};
|
|
--color-loading-dark: #{$mocha-subtext1};
|
|
--color-box-shadow-rgb: #{color.scale($mocha-crust, $lightness: 10%)};
|
|
--color-box-shadow: #{color.scale($mocha-crust, $lightness: 15%)};
|
|
--color-border: #{$mocha-crust};
|
|
--color-border-dark: #{color.scale($mocha-crust, $lightness: 5%)};
|
|
--color-border-maxcontrast: #{color.scale($mocha-crust, $lightness: -10%)};
|
|
|
|
|
|
--color-primary: #{$mocha-maroon};
|
|
--color-primary-default: #{$mocha-maroon};
|
|
--color-primary-text: #{$mocha-crust};
|
|
--color-primary-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
|
|
|
|
--color-primary-light: #{$mocha-green};
|
|
--color-primary-light-text: #{$mocha-crust};
|
|
--color-primary-light-hover: #{color.scale($mocha-green, $lightness: -5%)};
|
|
|
|
--color-primary-element: #{$mocha-maroon};
|
|
--color-primary-element-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
|
|
--color-primary-element-text: #{$mocha-crust};
|
|
--color-primary-element-text-dark: #{$mocha-mantle};
|
|
|
|
--color-primary-element-light: #{$mocha-blue};
|
|
--color-primary-element-light-hover: #{color.scale($mocha-blue, $lightness: -5%)};
|
|
--color-primary-element-light-text: #{$mocha-crust};
|
|
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
|
|
|
//Unchanged
|
|
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--default-font-size: 15px;
|
|
--animation-quick: 100ms;
|
|
--animation-slow: 300ms;
|
|
--border-radius: 3px;
|
|
--border-radius-large: 10px;
|
|
--border-radius-rounded: 28px;
|
|
--border-radius-pill: 100px;
|
|
--default-clickable-area: 44px;
|
|
--default-line-height: 24px;
|
|
--default-grid-baseline: 4px;
|
|
--header-height: 50px;
|
|
--navigation-width: 300px;
|
|
--sidebar-min-width: 300px;
|
|
--sidebar-max-width: 500px;
|
|
--list-min-width: 200px;
|
|
--list-max-width: 300px;
|
|
--header-menu-item-height: 44px;
|
|
--header-menu-profile-item-height: 66px;
|
|
--breakpoint-mobile: 1024px;
|
|
--background-invert-if-dark: invert(100%);
|
|
--background-invert-if-bright: no;
|
|
--background-image-invert-if-bright: no;
|
|
--primary-invert-if-bright: no;
|
|
--primary-invert-if-dark: invert(100%);
|
|
}
|
|
[data-theme-light-highcontrast] {
|
|
//+0.05,
|
|
--color-main-background: #{rgba($macchiato-base, 0.93)} ;
|
|
--color-main-background-rgb: #{$macchiato-base};
|
|
--color-main-background-translucent: #{rgba($macchiato-base, .97)};
|
|
--color-main-background-blur: #{rgba($macchiato-base, .8)};
|
|
--filter-background-blur: #{blur(25px)};
|
|
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
|
|
--color-background-hover: #{$macchiato-surface1};
|
|
--color-background-dark: #{color.scale($macchiato-surface0, $lightness: 5%)};
|
|
--color-background-darker: #{$macchiato-surface0};
|
|
--color-placeholder-light: #{color.scale($macchiato-surface2, $lightness: 5%)};
|
|
--color-placeholder-dark: #{$macchiato-surface2};
|
|
--color-main-text: #{$macchiato-text};
|
|
--color-text-maxcontrast: #{$macchiato-subtext1};
|
|
--color-text-maxcontrast-default: #{color.scale($macchiato-subtext0, $lightness: 5%)};
|
|
--color-text-maxcontrast-background-blur: #{$macchiato-subtext0};
|
|
--color-text-light: #{var(--color-main-text)};
|
|
--color-text-lighter: #{var(--color-text-maxcontrast)};
|
|
--color-scrollbar: #{$macchiato-mauve};
|
|
--color-error: #{$macchiato-red};
|
|
--color-error-rgb: #{$macchiato-red};
|
|
--color-error-hover: #{color.scale($macchiato-red, $lightness: 5%)};
|
|
--color-error-text: #{color.scale($macchiato-red, $lightness: -10%)};
|
|
--color-warning: #{$macchiato-peach};
|
|
--color-warning-rgb: #{$macchiato-peach};
|
|
--color-warning-hover: #{color.scale($macchiato-peach, $lightness: 5%)};
|
|
--color-warning-text: #{color.scale($macchiato-peach, $lightness: -10%)};
|
|
--color-success: #{$macchiato-green};
|
|
--color-success-rgb: #{$macchiato-green};
|
|
--color-success-hover: #{color.scale($macchiato-green, $lightness: 5%)};
|
|
--color-success-text: #{color.scale($macchiato-green, $lightness: -10%)};
|
|
--color-info: #{$macchiato-blue};
|
|
--color-info-rgb: #{$macchiato-blue};
|
|
--color-info-hover: #{color.scale($macchiato-blue, $lightness: 5%)};
|
|
--color-info-text: #{color.scale($macchiato-blue, $lightness: -10%)};
|
|
--color-loading-light: #{$macchiato-overlay0};
|
|
--color-loading-dark: #{$macchiato-subtext1};
|
|
--color-box-shadow-rgb: #{color.scale($macchiato-crust, $lightness: 10%)};
|
|
--color-box-shadow: #{color.scale($macchiato-crust, $lightness: 15%)};
|
|
--color-border: #{$macchiato-crust};
|
|
--color-border-dark: #{color.scale($macchiato-crust, $lightness: 5%)};
|
|
--color-border-maxcontrast: #{color.scale($macchiato-crust, $lightness: -10%)};
|
|
|
|
|
|
--color-primary: #{$macchiato-maroon};
|
|
--color-primary-default: #{$macchiato-maroon};
|
|
--color-primary-text: #{$macchiato-crust};
|
|
--color-primary-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
|
|
|
|
--color-primary-light: #{$macchiato-green};
|
|
--color-primary-light-text: #{$macchiato-crust};
|
|
--color-primary-light-hover: #{color.scale($macchiato-green, $lightness: -5%)};
|
|
|
|
--color-primary-element: #{$macchiato-maroon};
|
|
--color-primary-element-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
|
|
--color-primary-element-text: #{$macchiato-crust};
|
|
--color-primary-element-text-dark: #{$macchiato-mantle};
|
|
|
|
--color-primary-element-light: #{$macchiato-blue};
|
|
--color-primary-element-light-hover: #{color.scale($macchiato-blue, $lightness: -5%)};
|
|
--color-primary-element-light-text: #{$macchiato-crust};
|
|
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
|
|
|
//Unchanged
|
|
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--default-font-size: 15px;
|
|
--animation-quick: 100ms;
|
|
--animation-slow: 300ms;
|
|
--border-radius: 3px;
|
|
--border-radius-large: 10px;
|
|
--border-radius-rounded: 28px;
|
|
--border-radius-pill: 100px;
|
|
--default-clickable-area: 44px;
|
|
--default-line-height: 24px;
|
|
--default-grid-baseline: 4px;
|
|
--header-height: 50px;
|
|
--navigation-width: 300px;
|
|
--sidebar-min-width: 300px;
|
|
--sidebar-max-width: 500px;
|
|
--list-min-width: 200px;
|
|
--list-max-width: 300px;
|
|
--header-menu-item-height: 44px;
|
|
--header-menu-profile-item-height: 66px;
|
|
--breakpoint-mobile: 1024px;
|
|
--background-invert-if-dark: invert(100%);
|
|
--background-invert-if-bright: no;
|
|
--background-image-invert-if-bright: no;
|
|
--primary-invert-if-bright: no;
|
|
--primary-invert-if-dark: invert(100%);
|
|
}
|
|
|
|
/*Theme selection hide old description*/
|
|
.theming__preview .checkbox-radio-switch__text,
|
|
.theming__preview--light h3, .theming__preview--light p,
|
|
.theming__preview--dark h3, .theming__preview--dark p,
|
|
.theming__preview--light-highcontrast h3, .theming__preview--light-highcontrast p,
|
|
.theming__preview--dark-highcontrast h3, .theming__preview--dark-highcontrast p {
|
|
visibility: hidden;
|
|
}
|
|
|
|
//Replace old radio btn. lable
|
|
.theming__preview .checkbox-radio-switch__text::before {
|
|
visibility: visible;
|
|
content: "Enable this theme";
|
|
}
|
|
|
|
//Show new theme description
|
|
.theming__preview--light h3::before {
|
|
content: "Latte theme";
|
|
visibility: visible;
|
|
}
|
|
.theming__preview--light p::before {
|
|
content: "The catppuccino light theme";
|
|
visibility: visible;
|
|
}
|
|
.theming__preview--light .theming__preview-image,
|
|
.theming__preview--dark .theming__preview-image,
|
|
.theming__preview--light-highcontrast .theming__preview-image,
|
|
.theming__preview--dark-highcontrast .theming__preview-image {
|
|
//background-image: TODO; !important;
|
|
display: none;
|
|
}
|
|
|
|
//Show new theme description
|
|
.theming__preview--dark h3::before {
|
|
content: "Frappe Theme";
|
|
visibility: visible;
|
|
}
|
|
.theming__preview--dark p::before {
|
|
content: "The milde and cozy catppuccino dark theme";
|
|
visibility: visible;
|
|
}
|
|
|
|
//Show new theme description
|
|
.theming__preview--light-highcontrast h3::before {
|
|
content: "Macchiato Theme";
|
|
visibility: visible;
|
|
}
|
|
.theming__preview--light-highcontrast p::before {
|
|
content: "Catpuccinos perfect mix between Mocha and Frappe";
|
|
visibility: visible;
|
|
}
|
|
|
|
//Show new theme description
|
|
.theming__preview--dark-highcontrast h3::before {
|
|
content: "Mocha Theme";
|
|
visibility: visible;
|
|
}
|
|
.theming__preview--dark-highcontrast p::before {
|
|
content: "Catppuccinos dark theme withe bright colors";
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
/*Setting left nav Pannel to be transparent without blur*/
|
|
.app-navigation {
|
|
background-color: var(--color-main-background) !important;
|
|
backdrop-filter: None !important;
|
|
}
|
|
|
|
/*Setting markdown editor link color to primary light*/
|
|
.paragraph-content a {
|
|
color: var(--color-primary-element-light) !important;
|
|
}
|
|
|
|
/*Fixing Dashboards toggel item widget visibility (e.g. weather)*/
|
|
.action-item__menutoggle{
|
|
background-color: var(--color-primary-element-light) !important;
|
|
}
|
|
/*Fixing Dashboard Welcome msg visibility*/
|
|
.app-dashboard h2:nth-child(1) {
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
/*Fixing Mail sidebar 1 text visibility when selected*/
|
|
.app-navigation-entry.active a{
|
|
color: var(--color-primary-element-text) !important;
|
|
}
|
|
/*Fixing Mail sidebar 2 text visibility when selected*/
|
|
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span,
|
|
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span .envelope__preview-text{
|
|
color: var(--color-primary-element-text) !important;
|
|
}
|
|
|
|
/*Fixing visibility of left header label and right header icons*/
|
|
.header-right .header-menu button,
|
|
.headeu-main li .app-menu-entry--label{
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
/*Fixing share link folder icon*/
|
|
.files-public-content .thumbnail
|
|
{
|
|
filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(7243%) hue-rotate(295deg) brightness(97%) contrast(89%);
|
|
}
|
|
|
|
.files-public-content .files-fileList .date {
|
|
color: var(--color-main-text) !important;
|
|
} |