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>
|
</Router>
|
||||||
|
|
||||||
<style global lang="scss">
|
<style global lang="scss">
|
||||||
@use "sass:color";
|
|
||||||
|
|
||||||
@use "normalize.css/normalize.css";
|
@use "normalize.css/normalize.css";
|
||||||
@import url("/assets/fonts/inter.css");
|
@use "styles/colors";
|
||||||
|
@use "styles/fonts";
|
||||||
$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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
font-family: var(--default-font);
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
@ -114,14 +69,6 @@
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
font-size: 2em;
|
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