168 lines
3.9 KiB
SCSS
168 lines
3.9 KiB
SCSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Nunito:wght@400;700;800;1000&display=swap");
|
|
|
|
:root {
|
|
// yes
|
|
--default-font-size: 18px;
|
|
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
// --default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
|
|
// sans-serif;
|
|
|
|
// yes
|
|
--base-color: #eee;
|
|
--base-color-text: #456;
|
|
--base-color-border: #999;
|
|
--base-color-light: #fff;
|
|
|
|
--base-color-dark: #ddd;
|
|
--base-color-darker: #999;
|
|
|
|
// yes
|
|
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
|
|
--link-color: var(--primary-color);
|
|
|
|
--primary-color-lighter: #cce8fb;
|
|
--primary-color-light: #67bbf4;
|
|
|
|
// yes
|
|
--primary-color: #35a5f1;
|
|
--primary-color-hover: #f1fdff;
|
|
|
|
--primary-color-dark: #0e80ce;
|
|
--primary-color-darker: #095589;
|
|
|
|
--danger-color-lighter: #f3c8c8;
|
|
--danger-color-light: #db5c5a;
|
|
|
|
// yes
|
|
--danger-color: #c82e2b;
|
|
|
|
--danger-color-dark: #952220;
|
|
--danger-color-darker: #641715;
|
|
|
|
// yes
|
|
--success-color: #198754;
|
|
|
|
// yes
|
|
--warning-color: #fff3cd;
|
|
|
|
--header-font-family: "Montserrat", "Montserrat override", "Arial",
|
|
"Helvetica", sans-serif;
|
|
|
|
--navbar-color: var(--base-color-light);
|
|
--navbar-color-dropdown: var(--base-color-light);
|
|
|
|
--card-color: var(--base-color-light);
|
|
|
|
--footer-color: var(--base-color);
|
|
--footer-color-text: #888;
|
|
--footer-color-border: rgba(0, 0, 0, 0.1);
|
|
|
|
// yes
|
|
--accent-1-color: #3d4e5d;
|
|
--accent-1-color-text: #e6f5eb;
|
|
|
|
// yes
|
|
--accent-2-color: #cce8fb;
|
|
--accent-2-color-text: #063954;
|
|
|
|
// yes
|
|
--banner-yellow-color: #ffd75a;
|
|
--banner-yellow-color-text: #333;
|
|
--banner-green-color: #198754;
|
|
--banner-green-color-text: #fff;
|
|
--banner-red-color: #952220;
|
|
--banner-red-color-text: #fff;
|
|
--banner-purple-color: #707;
|
|
--banner-purple-color-text: #fff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
// yes
|
|
--base-color: #222;
|
|
--base-color-text: rgba(255, 255, 255, 0.9);
|
|
--base-color-border: #000;
|
|
--base-color-light: #333;
|
|
|
|
// no
|
|
--base-color-dark: #444;
|
|
--base-color-darker: #999;
|
|
|
|
--footer-color-text: #999;
|
|
--footer-color-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--primary-color-lighter: #095589;
|
|
--primary-color-light: #0e80ce;
|
|
|
|
// yes
|
|
--primary-color: #35a5f1;
|
|
|
|
--primary-color-dark: #67bbf4;
|
|
--primary-color-darker: #cce8fb;
|
|
|
|
--danger-color-lighter: #f3c8c8;
|
|
--danger-color-light: #db5c5a;
|
|
|
|
--danger-color: #db5c5a;
|
|
--danger-color-dark: #952220;
|
|
--danger-color-darker: #641715;
|
|
|
|
// yes
|
|
--accent-2-color: #063954;
|
|
--accent-2-color-text: #cce8fb;
|
|
}
|
|
}
|
|
|
|
/* interim */
|
|
$font-size: var(--default-font-size);
|
|
|
|
/* old variables */
|
|
|
|
$font-color: rgba(255, 255, 255, 1);
|
|
$background-color: rgba(40, 44, 48, 1);
|
|
|
|
$primary-color-lighter: #cce8fb;
|
|
$primary-color-light: #67bbf4;
|
|
$primary-color: #35a5f1;
|
|
$primary-color-dark: #0e80ce;
|
|
$primary-color-darker: #095589;
|
|
|
|
$secondary-color: #9ca8b0;
|
|
$secondary-color-dark: #6e7f8a;
|
|
$secondary-color-darker: #49545c;
|
|
|
|
$danger-color-lighter: #f3c8c8;
|
|
$danger-color-light: #db5c5a;
|
|
$danger-color: #c82e2b;
|
|
$danger-color-dark: #952220;
|
|
$danger-color-darker: #641715;
|
|
|
|
$success-color-lighter: #b5f1d5;
|
|
$success-color-light: #26d081;
|
|
$success-color: #198754;
|
|
$success-color-dark: #12653e;
|
|
$success-color-darker: #0c4329;
|
|
|
|
$warning-color-lighter: #fff8e2;
|
|
$warning-color-light: #fff6d9;
|
|
$warning-color: #fff3cd;
|
|
$warning-color-dark: #ffd75a;
|
|
$warning-color-darker: #ffc203;
|
|
|
|
$border-color: #dddddd;
|
|
$secondary-background-color: #efefef;
|
|
|
|
$outline-color: rgba(0, 0, 0, 0.5);
|
|
$outline-hover-color: #fff;
|
|
|
|
$spacer: (
|
|
0: 0,
|
|
1: 0.5rem,
|
|
2: 0.75rem,
|
|
3: 1rem,
|
|
4: 1.5rem,
|
|
5: 3rem,
|
|
);
|