support dark-mode
This commit is contained in:
@@ -43,33 +43,20 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--header-font-family);
|
||||
font-weight: 800;
|
||||
margin-bottom: 0;
|
||||
font-weight: var(--header-font-weight);
|
||||
color: var(--header-color-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
@for $i from 1 through 6 {
|
||||
h#{$i} {
|
||||
font-size: var(--header-font-size-#{$i});
|
||||
margin-bottom: #{calc(var(--header-font-size-#{$i}) / 2)};
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--primary-color);
|
||||
color: var(--link-color);
|
||||
text-decoration-thickness: 0.1em;
|
||||
text-decoration-color: var(--primary-color-light);
|
||||
|
||||
@@ -86,61 +73,28 @@ li,
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
margin: #{map-get($spacing, 5)} 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: #{map-get($spacing, 1)};
|
||||
|
||||
& + ul {
|
||||
margin-top: -16px;
|
||||
margin-top: -#{map-get($spacing, 1)};
|
||||
}
|
||||
}
|
||||
|
||||
// Who knows why ion-icon randomally sets this to hidden.....
|
||||
// ion-icon {
|
||||
// visibility: visible;
|
||||
// }
|
||||
|
||||
// #app {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// min-height: 100vh;
|
||||
// }
|
||||
|
||||
// a,
|
||||
// a:visited {
|
||||
// color: $primary-color;
|
||||
// text-decoration: none;
|
||||
// transition: color 0.1s, underline 0.1s;
|
||||
|
||||
// &:hover {
|
||||
// color: $primary-color-dark;
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
|
||||
// h1 {
|
||||
// text-align: left;
|
||||
// font-weight: 800;
|
||||
// }
|
||||
|
||||
// p {
|
||||
// line-height: 1.5rem;
|
||||
// margin-top: 0;
|
||||
// }
|
||||
|
||||
// code {
|
||||
// display: block;
|
||||
// font-size: 0.8rem;
|
||||
// background-color: #eee;
|
||||
// padding: 1rem;
|
||||
// border: 1px solid #ddd;
|
||||
// white-space: pre-wrap;
|
||||
// overflow-x: auto;
|
||||
// max-height: 30rem;
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
code {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
background-color: var(--base-color);
|
||||
padding: #{map-get($spacing, 3)};
|
||||
border: 1px solid var(--base-color-border);
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
max-height: #{calc(map-get($spacing, 7) * 12)};
|
||||
margin-bottom: #{map-get($spacing, 3)};
|
||||
}
|
||||
|
||||
/* SM Dialog */
|
||||
.dialog-outer {
|
||||
@@ -154,7 +108,7 @@ li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
padding: #{map-get($spacing, 2)};
|
||||
}
|
||||
|
||||
.dialog-outer:last-of-type {
|
||||
|
||||
@@ -15,17 +15,17 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// @media (prefers-color-scheme: dark) {
|
||||
// .dark\:d-none {
|
||||
// display: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (prefers-color-scheme: light) {
|
||||
.light\:d-none {
|
||||
display: none !important;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:d-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.light\:d-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
/* Width */
|
||||
.w-100 {
|
||||
@@ -134,7 +134,7 @@
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
@each $index, $size in $spacer {
|
||||
@each $index, $size in $spacing {
|
||||
.p-#{$index} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
@@ -167,7 +167,7 @@
|
||||
}
|
||||
|
||||
/* Margin */
|
||||
@each $index, $size in $spacer {
|
||||
@each $index, $size in $spacing {
|
||||
.m-#{$index} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
@@ -258,7 +258,6 @@
|
||||
small,
|
||||
.small {
|
||||
font-size: 70%;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.italic {
|
||||
|
||||
@@ -1,55 +1,144 @@
|
||||
@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-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;
|
||||
// --default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
|
||||
// sans-serif;
|
||||
}
|
||||
|
||||
// yes
|
||||
/**
|
||||
* 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;
|
||||
|
||||
// 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
|
||||
--primary-color: #35a5f1;
|
||||
--primary-color-hover: #f1fdff;
|
||||
|
||||
--primary-color-light: #67bbf4;
|
||||
--primary-color-lighter: #cce8fb;
|
||||
--primary-color-dark: #0e80ce;
|
||||
--primary-color-darker: #095589;
|
||||
|
||||
--danger-color-lighter: #f3c8c8;
|
||||
--danger-color-light: #db5c5a;
|
||||
|
||||
// yes
|
||||
// Danger
|
||||
--danger-color: #c82e2b;
|
||||
|
||||
--danger-color-light: #db5c5a;
|
||||
--danger-color-lighter: #f3c8c8;
|
||||
--danger-color-dark: #952220;
|
||||
--danger-color-darker: #641715;
|
||||
|
||||
// yes
|
||||
// Success
|
||||
--success-color: #198754;
|
||||
--success-color-light: #26d081;
|
||||
--success-color-lighter: #b5f1d5;
|
||||
--success-color-dark: #12653e;
|
||||
--success-color-darker: #0c4329;
|
||||
|
||||
// yes
|
||||
--warning-color: #fff3cd;
|
||||
// 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);
|
||||
|
||||
// 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;
|
||||
|
||||
// SKIP BELOW
|
||||
--navbar-color: var(--base-color-light);
|
||||
--navbar-color-dropdown: var(--base-color-light);
|
||||
|
||||
@@ -59,14 +148,6 @@
|
||||
--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;
|
||||
@@ -78,90 +159,30 @@
|
||||
--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;
|
||||
// --primary-color-hover: #f1fdff;
|
||||
|
||||
// // no
|
||||
// --base-color-dark: #444;
|
||||
// --base-color-darker: #999;
|
||||
@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;
|
||||
|
||||
// --footer-color-text: #999;
|
||||
// --footer-color-border: rgba(255, 255, 255, 0.1);
|
||||
--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);
|
||||
|
||||
// --primary-color-lighter: #095589;
|
||||
// --primary-color-light: #0e80ce;
|
||||
--footer-color-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// // 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,
|
||||
);
|
||||
// Accents
|
||||
--accent-2-color: #063954;
|
||||
--accent-2-color-text: #cce8fb;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user