n/starsy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use css vars for theming

Browse source
This commit is contained in:
koehr 2022-01-02 16:05:35 +01:00
parent ad4fdf321f
commit 58712b0edf
1 changed files with 35 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/app.css
View file

@ -19,6 +19,15 @@
font-style: normal; font-style: normal;
} }
:root {
--bg-graphic: #000;
--fg-graphic: #FFF;
--bg-app: #333;
--fg-app: #EEE;
--fill-star: #FFB;
--title-font: xolonium;
}
html,body { html,body {
display: block; display: block;
margin: 0; margin: 0;
@ -27,64 +36,50 @@ html,body {
font-family: sans; font-family: sans;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: #333; background: var(--bg-app);
color: #EEE; color: var(--fg-app);
} }
body.theme-retro { body.theme-retro {
background: #4B4839; --bg-app: #4B4839;
color: #E4DCB5; --fg-app: #E4DCB5;
--bg-graphic: #E4DCB5;
--fg-graphic: #4B4839;
--fill-star: var(--fg-graphic);
} }
body.theme-inverse { body.theme-inverse {
background: #333; --bg-app: #333;
color: #E4DCB5; --fg-app: #E4DCB5;
--bg-graphic: #4B4839;
--fg-graphic: #E4DCB5;
--fill-star: var(--fg-graphic);
} }
body.theme-paper { body.theme-paper {
background: #FFF; --bg-app: #FFF;
color: #000; --fg-app: #000;
--bg-graphic: #FFF;
--fg-graphic: #000;
--fill-star: var(--fg-graphic);
} }
.title-douar { font-family: 'douar'; } .title-douar { font-family: 'douar'; }
.title-lack { font-family: 'lack'; } .title-lack { font-family: 'lack'; }
.title-xolonium { font-family: 'xolonium'; } .title-xolonium { font-family: 'xolonium'; }
svg { background: #000; } svg { background: var(--bg-graphic); }
line { stroke: #FFF; } line { stroke: var(--fg-graphic); }
text.tilted { transform: rotate(-45deg) translate(0, 100%); transform-origin: left top; transform-box: fill-box; }
#axis { stroke-width: 1; } #axis { stroke-width: 1; }
#label { fill: #FFF; text-anchor: end; } #label { fill: var(--fg-graphic); text-anchor: end; }
#star { fill: #FFB; } #star { fill: var(--fill-star); }
.object { fill: #FFF; text-anchor: middle; font-size: .6em; } .object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; }
.moon { text-anchor: start; font-size: .7em; } .moon { text-anchor: start; font-size: .7em; }
.object > line { stroke-width: .5; } .object > line { stroke-width: .5; }
.rings { stroke: #FFF; fill: none; transform: skew(-45deg); transform-origin: 50%; } .rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; }
.theme-retro svg { background: #E4DCB5; } h1 {
.theme-retro line { stroke: #4B4839; } font-family: xolonium;
.theme-retro #label,
.theme-retro #star,
.theme-retro .object {
fill: #4B4839;
} }
.theme-retro .rings { stroke: #4B4839; }
.theme-inverse svg { background: #4B4839; }
.theme-inverse line { stroke: #E4DCB5; }
.theme-inverse #label,
.theme-inverse #star,
.theme-inverse .object {
fill: #E4DCB5;
}
.theme-inverse .rings { stroke: #E4DCB5; }
.theme-paper svg { background: #FFF; }
.theme-paper line { stroke: #000; }
.theme-paper #label,
.theme-paper #star,
.theme-paper .object {
fill: #000;
}
.theme-paper .rings { stroke: #000; }
#app > header { #app > header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;