diff options
| author | David Luevano Alvarado <david@luevano.xyz> | 2021-02-27 02:49:34 -0700 |
|---|---|---|
| committer | David Luevano Alvarado <david@luevano.xyz> | 2021-02-27 02:49:34 -0700 |
| commit | 70b9f2e90bbd3776a83dcc85e6ba89d95e341f64 (patch) | |
| tree | 86f4ad3c07fa49c400b30bd2ce36a43c849defd8 /static/css | |
| parent | 54180a1a177b9a11d8348c14a3446529b08daea7 (diff) | |
Actually fix light-dark button, feels nice
Diffstat (limited to 'static/css')
| -rw-r--r-- | static/css/dark.css | 14 | ||||
| -rw-r--r-- | static/css/general_style.css | 15 | ||||
| -rw-r--r-- | static/css/light.css | 14 |
3 files changed, 39 insertions, 4 deletions
diff --git a/static/css/dark.css b/static/css/dark.css index 29af64b..13a3ea3 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -20,10 +20,12 @@ --fg-acc4: var(--color14); --fg-acc5: var(--color15); - --switch-bg: var(--color1); - --switch-slider: var(--color4); + --switch-bg: var(--color3); + --switch-slider: var(--color0); --switch-toggled-bg: var(--color10); --switch-ol: var(--color4); + --switch-moon: var(--color3); + --switch-sun: var(--color13); } html { @@ -61,6 +63,14 @@ h3 { background-color: var(--switch-bg); } +#theme-switcher-container i.fa-moon { + color: var(--switch-moon); +} + +#theme-switcher-container i.fa-sun { + color: var(--switch-sun); +} + .slider:before { background-color: var(--switch-slider); } diff --git a/static/css/general_style.css b/static/css/general_style.css index e49edb7..a4e032e 100644 --- a/static/css/general_style.css +++ b/static/css/general_style.css @@ -26,6 +26,21 @@ a{ height: 1rem; } +/* specifically the theme switcher */ +#theme-switcher-container { + position: absolute; + top: 1.6em; + --hardcoded-pos: calc(50vw - 25.2em); + --resized-pos: calc(0.4px + 0.5em); + --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos)); + right: var(--calculated-pos); +} + +#theme-switcher-container i { + position: relative; + top: -0.2em; +} + .switch input { opacity: 0; width: 0; diff --git a/static/css/light.css b/static/css/light.css index cee7f22..b295ccf 100644 --- a/static/css/light.css +++ b/static/css/light.css @@ -20,10 +20,12 @@ --fg-acc4: var(--color14); --fg-acc5: var(--color15); - --switch-bg: var(--color1); + --switch-bg: var(--color3); --switch-slider: var(--color4); --switch-toggled-bg: var(--color10); - --switch-ol: var(--color4); + --switch-ol: var(--color0); + --switch-moon: var(--color3); + --switch-sun: var(--color13); } html { @@ -61,6 +63,14 @@ h3 { background-color: var(--switch-bg); } +#theme-switcher-container i.fa-moon { + color: var(--switch-moon); +} + +#theme-switcher-container i.fa-sun { + color: var(--switch-sun); +} + .slider:before { background-color: var(--switch-slider); } |