separate global styles
This commit is contained in:
parent
28b91b5c4b
commit
a6d9333eaf
3 changed files with 66 additions and 55 deletions
|
@ -34,58 +34,13 @@
|
|||
</Router>
|
||||
|
||||
<style global lang="scss">
|
||||
@use "sass:color";
|
||||
|
||||
@use "normalize.css/normalize.css";
|
||||
@import url("/assets/fonts/inter.css");
|
||||
|
||||
$primary: #2c3e50;
|
||||
$primary-lighter: #3a5068;
|
||||
$primary-lightest: #3a92f0;
|
||||
$background: white;
|
||||
|
||||
html {
|
||||
--default-font: "Inter", sans-serif;
|
||||
--monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
|
||||
--foreground: #{$primary};
|
||||
--foreground-lighter: #{$primary-lighter};
|
||||
--background: #{$background};
|
||||
--background-emph: #{color.scale($background, $lightness: -4%)};
|
||||
--primary-lightest: #{$primary-lightest};
|
||||
--error: darkred;
|
||||
--warning: orange;
|
||||
font-size: 15px;
|
||||
|
||||
b {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
html {
|
||||
--default-font: "Inter var", sans-serif;
|
||||
font-feature-settings: "ss02" on, "case" on;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--foreground: #{$background};
|
||||
--foreground-lighter: #{color.scale($background, $lightness: -50%)};
|
||||
--background: #{$primary};
|
||||
--background-emph: #{$primary-lighter};
|
||||
--primary-lightest: #{$primary-lightest};
|
||||
--error: red;
|
||||
}
|
||||
}
|
||||
@use "styles/colors";
|
||||
@use "styles/fonts";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
||||
font-family: var(--default-font);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#main {
|
||||
|
@ -114,14 +69,6 @@
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
font-size: 2em;
|
||||
|
||||
|
|
45
ui/src/styles/colors.scss
Normal file
45
ui/src/styles/colors.scss
Normal file
|
@ -0,0 +1,45 @@
|
|||
@use "sass:color";
|
||||
|
||||
$primary: #2c3e50;
|
||||
$primary-lighter: #3a5068;
|
||||
$primary-lightest: #3a92f0;
|
||||
$background: white;
|
||||
|
||||
html {
|
||||
--foreground: #{$primary};
|
||||
--foreground-lighter: #{$primary-lighter};
|
||||
--background: #{$background};
|
||||
--background-emph: #{color.scale($background, $lightness: -4%)};
|
||||
--primary-lightest: #{$primary-lightest};
|
||||
--error: darkred;
|
||||
--warning: orange;
|
||||
|
||||
b {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--foreground: #{$background};
|
||||
--foreground-lighter: #{color.scale($background, $lightness: -50%)};
|
||||
--background: #{$primary};
|
||||
--background-emph: #{$primary-lighter};
|
||||
--primary-lightest: #{$primary-lightest};
|
||||
--error: red;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--foreground);
|
||||
}
|
19
ui/src/styles/fonts.scss
Normal file
19
ui/src/styles/fonts.scss
Normal file
|
@ -0,0 +1,19 @@
|
|||
@import url("/assets/fonts/inter.css");
|
||||
|
||||
html {
|
||||
--default-font: "Inter", sans-serif;
|
||||
--monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
html {
|
||||
--default-font: "Inter var", sans-serif;
|
||||
font-feature-settings: "ss02" on, "case" on;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--default-font);
|
||||
}
|
Loading…
Reference in a new issue