diff options
Diffstat (limited to 'pydis_site/static/css/base/themes.css')
-rw-r--r-- | pydis_site/static/css/base/themes.css | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css new file mode 100644 index 00000000..35273d44 --- /dev/null +++ b/pydis_site/static/css/base/themes.css @@ -0,0 +1,67 @@ +/* Theme switch toggle */ + +.switch { + position: relative; + height: 2em; + width: 4em; + cursor: pointer; +} + +.switch-outer { + position: absolute; + height: 100%; + width: 100%; + border-radius: 2em; + transition: background-color 0.3s ease-out; +} + +.switch.dark .switch-outer { + background-color: #22272E; +} + +.switch.light .switch-outer { + background-color: #3f61d9; +} + +.knob { + position: absolute; + padding-top: 20%; + height: 70%; + width: 37.5%; + border-radius: 10em; + transition: all 0.5s ease-out; +} + +.knob.dark { + background-color: #586282; + margin: 7% auto auto 8%; +} + +.knob.light { + background-color: #364c94; + margin: 7% auto auto 56%; +} + +.theme-icon { + position: absolute !important; + --ggs: 0.75; + transition: opacity 0.3s ease-out; +} + +.theme-icon.light { + left: 10%; + top: 15% +} + +.theme-icon.dark { + right: 10%; + top: 20% +} + +.switch.dark .theme-icon.light { + opacity: 0; +} + +.switch.light .theme-icon.dark { + opacity: 0; +} |