LogalDeveloper/owncast
0
Fork 0
Code Activity

Draft: rough-ish draft of proposed color theme changes (#2067)

Browse Source 
* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
2022-08-29 23:17:12 -07:00
committed by GitHub
parent a0a28fa572
commit d5fa81f76e
32 changed files with 817 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/styles/globals.scss
View File

@@ -1,15 +1,26 @@
@import '@fontsource/open-sans/variable.css';
@import '@fontsource/open-sans/300.css';
@import '@fontsource/open-sans/400.css';
@import '@fontsource/open-sans/600.css';
@import '@fontsource/open-sans/800.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css';
:root {
--content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed
}
::selection {
background-color: var(--theme-color-palette-12);
}
body {
font-family: var(--theme-text-body-font-family);
font-size: 16px;
line-height: 1.5em;
margin: 0;
color: var(--theme-text-primary);
background-color: var(--theme-background-primary);
background-color: var(--theme-color-background-main);
div,
h1,
@@ -20,7 +31,6 @@ body {
h6,
p {
padding: 0;
color: var(--theme-text-primary);
}
h1,
@@ -30,6 +40,7 @@ body {
h5,
h6 {
font-family: var(--theme-text-display-font-family);
color: unset; // reset some colors from global.less file
}
h1 {
@@ -71,10 +82,10 @@ body {
}
a {
color: var(--theme-text-link);
color: var(--theme-color-action);
&:visited {
color: var(--theme-text-primary);
&:hover {
color: var(--theme-color-palette-12);
}
}