204 lines
6.2 KiB
SCSS
204 lines
6.2 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 {
|
|
--default-size: 1rem;
|
|
--default-font-size: var(--default-size);
|
|
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
/**
|
|
* 0: 0 0px
|
|
* 1: 0.25 4px
|
|
* 2: 0.5 8px
|
|
* 3: 1 16px
|
|
* 4: 1.25 20px
|
|
* 5: 1.5 24px
|
|
* 6: 2 32px
|
|
* 7: 2.5 40px
|
|
*/
|
|
$spacing: (
|
|
0: 0,
|
|
1: #{calc(var(--default-size) / 4)},
|
|
2: #{calc(var(--default-size) / 2)},
|
|
3: var(--default-size),
|
|
4: #{calc(var(--default-size) * 1.2)},
|
|
5: #{calc(var(--default-size) * 1.5)},
|
|
6: #{calc(var(--default-size) * 2)},
|
|
7: #{calc(var(--default-size) * 2.5)},
|
|
);
|
|
|
|
:root {
|
|
// Base
|
|
--base-color: #eee;
|
|
--base-color-text: #456;
|
|
--base-color-background: #fff;
|
|
--base-color-border: #999;
|
|
--base-color-light: #fff;
|
|
--base-color-lighter: #fff;
|
|
--base-color-dark: #ddd;
|
|
--base-color-darker: #999;
|
|
|
|
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
|
|
--link-color: var(--primary-color);
|
|
|
|
// Primary
|
|
--primary-color: #35a5f1;
|
|
--primary-color-light: #67bbf4;
|
|
--primary-color-lighter: #cce8fb;
|
|
--primary-color-dark: #0e80ce;
|
|
--primary-color-darker: #095589;
|
|
|
|
// Danger
|
|
--danger-color: #c82e2b;
|
|
--danger-color-light: #db5c5a;
|
|
--danger-color-lighter: #ffe8e8;
|
|
--danger-color-dark: #952220;
|
|
--danger-color-darker: #641715;
|
|
|
|
// Success
|
|
--success-color: #198754;
|
|
--success-color-light: #26d081;
|
|
--success-color-lighter: #b5f1d5;
|
|
--success-color-dark: #12653e;
|
|
--success-color-darker: #0c4329;
|
|
|
|
// Warning
|
|
--warning-color: #ffecb5;
|
|
--warning-color-light: #fff3cd;
|
|
--warning-color-lighter: #fff8e2;
|
|
--warning-color-dark: #856404;
|
|
--warning-color-darker: #664d03;
|
|
|
|
// Header
|
|
--header-font-family: "Montserrat", "Montserrat override", "Arial",
|
|
"Helvetica", sans-serif;
|
|
--header-font-weight: 800;
|
|
--header-font-size-1: #{map-get($spacing, 7)};
|
|
--header-font-size-2: #{map-get($spacing, 6)};
|
|
--header-font-size-3: #{map-get($spacing, 5)};
|
|
--header-font-size-4: #{map-get($spacing, 4)};
|
|
--header-font-size-5: #{map-get($spacing, 3)};
|
|
--header-color-text: var(--base-color-text);
|
|
|
|
// Buttons
|
|
--button-font-family: var(--header-font-family);
|
|
--button-font-weight: 600;
|
|
--button-color: var(--base-color-light);
|
|
--button-color-text: var(--base-color-text);
|
|
--button-disabled-color: var(--base-color-dark);
|
|
--button-disabled-color-text: var(--base-color-light);
|
|
--button-dropdown-color-border: var(--base-color-border);
|
|
--button-dropdown-color: var(--base-color-background);
|
|
--button-dropdown-color-hover: var(--primary-color-lighter);
|
|
--button-primary-color: var(--primary-color);
|
|
--button-primary-color-text: var(--base-color-light);
|
|
--button-secondary-color: var(--base-color-darker);
|
|
--button-secondary-color-text: var(--base-color-light);
|
|
--button-danger-color: var(--danger-color);
|
|
--button-danger-color-text: var(--base-color-light);
|
|
|
|
// Card
|
|
--card-color: var(--base-color);
|
|
--card-color-text: var(--base-color-text);
|
|
|
|
// Hero
|
|
--hero-color-text: #fff;
|
|
--hero-caption-color: rgba(0, 0, 0, 0.5);
|
|
--hero-caption-color-text: #ddd;
|
|
--hero-caption-color-link: #eee;
|
|
--hero-shadow: 0 0 8px #000;
|
|
|
|
// Input
|
|
--input-clear-icon-color: var(--base-color-dark);
|
|
--input-clear-icon-color-hover: var(--base-color-light);
|
|
--input-color: var(--base-color-light);
|
|
--input-color-border: var(--base-color-darker);
|
|
|
|
// Pagination
|
|
--pagination-color: var(--base-color-light);
|
|
--pagination-color-active: var(--primary-color);
|
|
--pagination-color-hover: var(--primary-color);
|
|
--pagination-color-disabled: var(--base-color);
|
|
--pagination-color-disabled-text: var(--base-color-darker);
|
|
|
|
// Tab
|
|
--tab-color: var(--base-color-light);
|
|
--tab-color-text: var(--base-color-text);
|
|
--tab-color-border: var(--base-color-border);
|
|
|
|
// Table
|
|
--table-color: var(--base-color-light);
|
|
--table-color-even: #f8f8f8;
|
|
--table-color-border: var(--base-color-border);
|
|
--table-color-hover: var(--table-color);
|
|
|
|
// Accents
|
|
--accent-1-color: #3d4e5d;
|
|
--accent-1-color-text: #e6f5eb;
|
|
--accent-2-color: #cce8fb;
|
|
--accent-2-color-text: #063954;
|
|
--accent-3-color: #b5d5b5;
|
|
--accent-3-color-text: #3d4e5d;
|
|
|
|
// SKIP BELOW
|
|
--navbar-color: var(--base-color-light);
|
|
--navbar-color-dropdown: var(--base-color-light);
|
|
--navbar-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
|
|
--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
|
|
--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;
|
|
|
|
// Editor
|
|
--editor-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
--editor-backdrop: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
// --primary-color-hover: #f1fdff;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
// Base
|
|
--base-color: #222;
|
|
--base-color-text: #ccc;
|
|
--base-color-background: #eee;
|
|
--base-color-border: #999;
|
|
--base-color-light: #333;
|
|
--base-color-lighter: #444;
|
|
--base-color-dark: #666;
|
|
--base-color-darker: #999;
|
|
|
|
// --base-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
|
|
|
|
--button-color: var(--base-color-lighter);
|
|
--button-color-text: var(--base-color-background);
|
|
--button-primary-color-text: var(--base-color-background);
|
|
--button-secondary-color-text: var(--base-color-background);
|
|
--button-danger-color-text: var(--base-color-background);
|
|
|
|
--footer-color-border: rgba(255, 255, 255, 0.1);
|
|
|
|
// Accents
|
|
--accent-2-color: #063954;
|
|
--accent-2-color-text: #cce8fb;
|
|
|
|
// Editor
|
|
--editor-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
|
|
--editor-backdrop: rgba(0, 0, 0, 0.75);
|
|
}
|
|
}
|