362 lines
11 KiB
SCSS
362 lines
11 KiB
SCSS
// Prefix for :root CSS variables
|
|
|
|
$prefix: bs-;
|
|
|
|
$btn-link-color: var(--#{$prefix}link-color);
|
|
$btn-link-hover-color: var(--#{$prefix}link-hover-color);
|
|
|
|
:root {
|
|
|
|
// color-variables (HSL)
|
|
|
|
--blue-900-hsl: 243, 72%, 25%;
|
|
--blue-800-hsl: 239, 70%, 32%;
|
|
--blue-700-hsl: 235, 68%, 38%;
|
|
--blue-600-hsl: 231, 66%, 45%;
|
|
--blue-500-hsl: 226, 66%, 51%;
|
|
--blue-400-hsl: 221, 77%, 60%;
|
|
--blue-300-hsl: 217, 88%, 69%;
|
|
--blue-200-hsl: 212, 100%, 79%;
|
|
--blue-100-hsl: 207, 100%, 88%;
|
|
--blue-50-hsl: 198, 100%, 97%;
|
|
|
|
--green-900-hsl: 153, 54%, 20%;
|
|
--green-800-hsl: 145, 57%, 25%;
|
|
--green-700-hsl: 136, 60%, 29%;
|
|
--green-600-hsl: 128, 63%, 34%;
|
|
--green-500-hsl: 119, 66%, 39%;
|
|
--green-400-hsl: 114, 49%, 51%;
|
|
--green-300-hsl: 110, 56%, 62%;
|
|
--green-200-hsl: 105, 64%, 74%;
|
|
--green-100-hsl: 102, 69%, 86%;
|
|
--green-50-hsl: 98, 73%, 97%;
|
|
|
|
--red-900-hsl: 344, 48%, 33%;
|
|
--red-800-hsl: 348, 50%, 40%;
|
|
--red-700-hsl: 352, 53%, 46%;
|
|
--red-600-hsl: 356, 62%, 53%;
|
|
--red-500-hsl: 1, 84%, 59%;
|
|
--red-400-hsl: 356, 98%, 67%;
|
|
--red-300-hsl: 350, 100%, 73%;
|
|
--red-200-hsl: 345, 100%, 80%;
|
|
--red-100-hsl: 339, 100%, 88%;
|
|
--red-50-hsl: 332, 100%, 97%;
|
|
|
|
--yellow-900-hsl: 44, 60%, 17%;
|
|
--yellow-800-hsl: 45, 59%, 25%;
|
|
--yellow-700-hsl: 46, 58%, 33%;
|
|
--yellow-600-hsl: 48, 57%, 41%;
|
|
--yellow-500-hsl: 48, 55%, 49%;
|
|
--yellow-400-hsl: 50, 72%, 57%;
|
|
--yellow-300-hsl: 51, 98%, 65%;
|
|
--yellow-200-hsl: 54, 100%, 72%;
|
|
--yellow-100-hsl: 54, 100%, 81%;
|
|
--yellow-50-hsl: 55, 100%, 93%;
|
|
|
|
--cyan-900-hsl: 194, 100%, 16%;
|
|
--cyan-800-hsl: 193, 100%, 21%;
|
|
--cyan-700-hsl: 192, 100%, 27%;
|
|
--cyan-600-hsl: 191, 100%, 32%;
|
|
--cyan-500-hsl: 190, 98%, 37%;
|
|
--cyan-400-hsl: 189, 94%, 43%;
|
|
--cyan-300-hsl: 187, 85%, 58%;
|
|
--cyan-200-hsl: 185, 100%, 72%;
|
|
--cyan-100-hsl: 180, 100%, 83%;
|
|
--cyan-50-hsl: 180, 100%, 94%;
|
|
|
|
--cardinal-900-hsl: 355, 68%, 21%;
|
|
--cardinal-800-hsl: 353, 67%, 29%;
|
|
--cardinal-700-hsl: 353, 65%, 37%;
|
|
--cardinal-600-hsl: 352, 63%, 45%;
|
|
--cardinal-500-hsl: 351, 67%, 52%;
|
|
--cardinal-400-hsl: 350, 89%, 60%;
|
|
--cardinal-300-hsl: 347, 100%, 68%;
|
|
--cardinal-200-hsl: 343, 100%, 75%;
|
|
--cardinal-100-hsl: 340, 100%, 83%;
|
|
--cardinal-50-hsl: 338, 100%, 96%;
|
|
|
|
--magenta-900-hsl: 297, 63%, 21%;
|
|
--magenta-800-hsl: 296, 62%, 29%;
|
|
--magenta-700-hsl: 295, 61%, 37%;
|
|
--magenta-600-hsl: 294, 58%, 45%;
|
|
--magenta-500-hsl: 293, 63%, 53%;
|
|
--magenta-400-hsl: 292, 84%, 61%;
|
|
--magenta-300-hsl: 291, 100%, 69%;
|
|
--magenta-200-hsl: 292, 100%, 75%;
|
|
--magenta-100-hsl: 293, 100%, 84%;
|
|
--magenta-50-hsl: 293, 100%, 94%;
|
|
|
|
--emerald-900-hsl: 165, 97%, 13%;
|
|
--emerald-800-hsl: 164, 96%, 18%;
|
|
--emerald-700-hsl: 163, 93%, 23%;
|
|
--emerald-600-hsl: 162, 89%, 29%;
|
|
--emerald-500-hsl: 161, 87%, 34%;
|
|
--emerald-400-hsl: 160, 84%, 39%;
|
|
--emerald-300-hsl: 158, 66%, 53%;
|
|
--emerald-200-hsl: 154, 77%, 68%;
|
|
--emerald-100-hsl: 149, 89%, 82%;
|
|
--emerald-50-hsl: 145, 100%, 94%;
|
|
|
|
--blue-900: hsl(var(--blue-900-hsl));
|
|
--blue-800: hsl(var(--blue-800-hsl));
|
|
--blue-700: hsl(var(--blue-700-hsl));
|
|
--blue-600: hsl(var(--blue-600-hsl));
|
|
--blue-500: hsl(var(--blue-500-hsl));
|
|
--blue-400: hsl(var(--blue-400-hsl));
|
|
--blue-300: hsl(var(--blue-300-hsl));
|
|
--blue-200: hsl(var(--blue-200-hsl));
|
|
--blue-100: hsl(var(--blue-100-hsl));
|
|
--blue-50: hsl(var(--blue-50-hsl));
|
|
|
|
--green-900: hsl(var(--green-900-hsl));
|
|
--green-800: hsl(var(--green-800-hsl));
|
|
--green-700: hsl(var(--green-700-hsl));
|
|
--green-600: hsl(var(--green-600-hsl));
|
|
--green-500: hsl(var(--green-500-hsl));
|
|
--green-400: hsl(var(--green-400-hsl));
|
|
--green-300: hsl(var(--green-300-hsl));
|
|
--green-200: hsl(var(--green-200-hsl));
|
|
--green-100: hsl(var(--green-100-hsl));
|
|
--green-50: hsl(var(--green-50-hsl));
|
|
|
|
--red-900: hsl(var(--red-900-hsl));
|
|
--red-800: hsl(var(--red-800-hsl));
|
|
--red-700: hsl(var(--red-700-hsl));
|
|
--red-600: hsl(var(--red-600-hsl));
|
|
--red-500: hsl(var(--red-500-hsl));
|
|
--red-400: hsl(var(--red-400-hsl));
|
|
--red-300: hsl(var(--red-300-hsl));
|
|
--red-200: hsl(var(--red-200-hsl));
|
|
--red-100: hsl(var(--red-100-hsl));
|
|
--red-50: hsl(var(--red-50-hsl));
|
|
|
|
--yellow-900: hsl(var(--yellow-900-hsl));
|
|
--yellow-800: hsl(var(--yellow-800-hsl));
|
|
--yellow-700: hsl(var(--yellow-700-hsl));
|
|
--yellow-600: hsl(var(--yellow-600-hsl));
|
|
--yellow-500: hsl(var(--yellow-500-hsl));
|
|
--yellow-400: hsl(var(--yellow-400-hsl));
|
|
--yellow-300: hsl(var(--yellow-300-hsl));
|
|
--yellow-200: hsl(var(--yellow-200-hsl));
|
|
--yellow-100: hsl(var(--yellow-100-hsl));
|
|
--yellow-50: hsl(var(--yellow-50-hsl));
|
|
|
|
--cyan-900: hsl(var(--cyan-900-hsl));
|
|
--cyan-800: hsl(var(--cyan-800-hsl));
|
|
--cyan-700: hsl(var(--cyan-700-hsl));
|
|
--cyan-600: hsl(var(--cyan-600-hsl));
|
|
--cyan-500: hsl(var(--cyan-500-hsl));
|
|
--cyan-400: hsl(var(--cyan-400-hsl));
|
|
--cyan-300: hsl(var(--cyan-300-hsl));
|
|
--cyan-200: hsl(var(--cyan-200-hsl));
|
|
--cyan-100: hsl(var(--cyan-100-hsl));
|
|
--cyan-50: hsl(var(--cyan-50-hsl));
|
|
|
|
--cardinal-900: hsl(var(--cardinal-900-hsl));
|
|
--cardinal-800: hsl(var(--cardinal-800-hsl));
|
|
--cardinal-700: hsl(var(--cardinal-700-hsl));
|
|
--cardinal-600: hsl(var(--cardinal-600-hsl));
|
|
--cardinal-500: hsl(var(--cardinal-500-hsl));
|
|
--cardinal-400: hsl(var(--cardinal-400-hsl));
|
|
--cardinal-300: hsl(var(--cardinal-300-hsl));
|
|
--cardinal-200: hsl(var(--cardinal-200-hsl));
|
|
--cardinal-100: hsl(var(--cardinal-100-hsl));
|
|
--cardinal-50: hsl(var(--cardinal-50-hsl));
|
|
|
|
--magenta-900: hsl(var(--magenta-900-hsl));
|
|
--magenta-800: hsl(var(--magenta-800-hsl));
|
|
--magenta-700: hsl(var(--magenta-700-hsl));
|
|
--magenta-600: hsl(var(--magenta-600-hsl));
|
|
--magenta-500: hsl(var(--magenta-500-hsl));
|
|
--magenta-400: hsl(var(--magenta-400-hsl));
|
|
--magenta-300: hsl(var(--magenta-300-hsl));
|
|
--magenta-200: hsl(var(--magenta-200-hsl));
|
|
--magenta-100: hsl(var(--magenta-100-hsl));
|
|
--magenta-50: hsl(var(--magenta-50-hsl));
|
|
|
|
--emerald-900: hsl(var(--emerald-900-hsl));
|
|
--emerald-800: hsl(var(--emerald-800-hsl));
|
|
--emerald-700: hsl(var(--emerald-700-hsl));
|
|
--emerald-600: hsl(var(--emerald-600-hsl));
|
|
--emerald-500: hsl(var(--emerald-500-hsl));
|
|
--emerald-400: hsl(var(--emerald-400-hsl));
|
|
--emerald-300: hsl(var(--emerald-300-hsl));
|
|
--emerald-200: hsl(var(--emerald-200-hsl));
|
|
--emerald-100: hsl(var(--emerald-100-hsl));
|
|
--emerald-50: hsl(var(--emerald-50-hsl));
|
|
|
|
--blue: var(--blue-500);
|
|
--green: var(--green-500);
|
|
--red: var(--red-500);
|
|
--yellow: var(--yellow-500);
|
|
--cyan: var(--cyan-500);
|
|
--cardinal: var(--cardinal-500);
|
|
--magenta: var(--magenta-500);
|
|
--emerald: var(--emerald-500);
|
|
|
|
--secondary: var(--gray-600);
|
|
--success: var(--green);
|
|
--info: var(--cyan);
|
|
--warning: var(--yellow);
|
|
--danger: var(--red);
|
|
--light: var(--gray-100);
|
|
// --dark: #0e1420;
|
|
--dark: #181921;
|
|
// --dark: #241c2d;
|
|
--dark-alt: #212529;
|
|
--dark-secondary: #292a35;
|
|
|
|
// scss-docs-start gray-color-variables
|
|
--white: #ffffff;
|
|
--gray-50: #f7fafc;
|
|
--gray-100: #f8f9fa;
|
|
--gray-200: #e9ecef;
|
|
--gray-300: #dee2e6;
|
|
--gray-400: #ced4da;
|
|
--gray-500: #adb5bd;
|
|
--gray-600: #6c757d;
|
|
--gray-700: #495057;
|
|
--gray-800: #343a40;
|
|
--gray-900: #212529;
|
|
--black: #000000;
|
|
|
|
// Links
|
|
//
|
|
// Style anchor elements.
|
|
|
|
--link-color: var(--primary);
|
|
--link-decoration: underline;
|
|
--link-shade-percentage: 20%;
|
|
// $link-hover-color: shift-color($link-color, $link-shade-percentage);
|
|
--link-hover-decoration: null;
|
|
|
|
// Buttons
|
|
|
|
// Core
|
|
--text-default: var(--text-dark);
|
|
--text-default-inv: var(--text-light);
|
|
--text-muted: var(--gray-600);
|
|
--#{$prefix}secondary-color: var(--gray-600);
|
|
|
|
--body-color: var(--text-default);
|
|
|
|
--body-bg: var(--white);
|
|
|
|
// Text
|
|
--text-dark: #3C4257;
|
|
--text-light: #dee2e6;
|
|
|
|
// Fonts
|
|
--fw-medium: 600;
|
|
|
|
// Shadows
|
|
--shadow-sm: 0 .125rem .25rem rgba(var(--dark), .15);
|
|
--shadow: 0 0 3px rgba(var(--dark), .15);
|
|
--shadow-md: 0 5px 13px rgba(var(--dark), .2);
|
|
--shadow-lg: 0 10px 25px rgba(var(--dark), 0.15);
|
|
|
|
// Overlay
|
|
--overlay: rgba(var(--dark), 0.7);
|
|
--bg-overlay-white: rgba(var(--white), 0.5);
|
|
|
|
// Back to top
|
|
--back-to-top-color: var(--white);
|
|
|
|
// Simplebar
|
|
--simplebar-color: #adb5bd;
|
|
|
|
// Footer
|
|
--footer: #202942;
|
|
--footer-bg: var(--white);
|
|
--foot-social-color: #adb5bd;
|
|
--social-border-color: #adb5bd;
|
|
--foot-social-color-white: var(--white);
|
|
|
|
// lightness variables
|
|
--l-100: 100%;
|
|
|
|
// Buttons
|
|
--btn-soft-color: var(--primary);
|
|
--btn-soft-bg: transparent;
|
|
--btn-soft-border: var(--gray-200);
|
|
|
|
--btn-primary-color: var(--white);
|
|
--btn-primary-bg: var(--primary);
|
|
--btn-primary-border: transparent;
|
|
|
|
--btn-default-color: var(--text-default);
|
|
--btn-default-hover-color: var(--primary);
|
|
--btn-default-bg: transparent;
|
|
--btn-default-border: transparent;
|
|
|
|
// Icons
|
|
--icon-color: var(--primary);
|
|
|
|
--folder: "\e2c7";
|
|
--article: "\ef42";
|
|
--dash: "\f88a";
|
|
--dir-right: "\e5da";
|
|
|
|
// Cards
|
|
--card-bg: var(--white);
|
|
--card-border-color: var(--gray-400);
|
|
--card-border-hover-color: var(--primary);
|
|
|
|
// Sidebar
|
|
--sidebar-primary: var(--primary);
|
|
--sidebar-bg: var(--white);
|
|
--top-header-bg: hsla(255,100%,100%,0.8);
|
|
--sidebar-text-color: #606770;
|
|
--sidebar-border-color: var(--gray-200);
|
|
--sidebar-dropdown-hover-bg: #eff1f4;
|
|
--sidebar-menu-active-bg: #f5f6f8;
|
|
--sidebar-icon-bg: #f8f9fa;
|
|
--sidebar-light-icon: #f8f9fa;
|
|
--sidebar-scrollbar-thumb-color: var(--gray-200);
|
|
|
|
--sidebar-directory-icon: var(--dir-right);
|
|
--sidebar-file-icon: var(--dash);
|
|
}
|
|
|
|
[data-dark-mode] {
|
|
|
|
--body-bg: var(--dark);
|
|
--text-default: var(--text-light);
|
|
--text-default-inv: var(--text-dark);
|
|
--text-muted: #b6b9be;
|
|
--#{$prefix}secondary-color: #6c757d;
|
|
|
|
// Buttons
|
|
--btn-soft-color: var(--gray-400);
|
|
--btn-soft-bg: none;
|
|
--btn-soft-border: var(--gray-800);
|
|
|
|
--btn-primary-color: var(--primary-200);
|
|
--btn-primary-bg: none;
|
|
--btn-primary-border: var(--gray-700);
|
|
|
|
--btn-default-color: var(--text-default);
|
|
--btn-default-hover-color: var(--primary-300);
|
|
--btn-default-bg: transparent;
|
|
--btn-default-border: transparent;
|
|
|
|
// Icons
|
|
--icon-color: #b6bbc9;
|
|
|
|
// Cards
|
|
--card-bg: none;
|
|
--card-border-color: var(--gray-800);
|
|
--card-border-hover-color: var(--primary-200);
|
|
|
|
// sidebar
|
|
--sidebar-primary: var(--primary-300);
|
|
--sidebar-bg: var(--dark);
|
|
--top-header-bg: hsla(233,16%,11%,0.8);
|
|
--sidebar-text-color: #b6bbc9;
|
|
--sidebar-border-color: var(--gray-900);
|
|
--sidebar-dropdown-hover-bg: #2b303b;
|
|
--sidebar-menu-active-bg: #2b303b;
|
|
--sidebar-icon-bg: #2b303b;
|
|
--sidebar-light-icon: #f8f9fa;
|
|
--sidebar-scrollbar-thumb-color: var(--gray-800);
|
|
} |