diff --git a/public/css/modules/sidebar.css b/public/css/modules/sidebar.css index 46c815a..181069e 100644 --- a/public/css/modules/sidebar.css +++ b/public/css/modules/sidebar.css @@ -16,6 +16,17 @@ width: 200px; } +#sidebar .main_tablinks:not(#theme_selector) { + display: flex; + align-items: center; + margin-top: 5px; + cursor: pointer; +} + +#sidebar .main_tablinks:not(#theme_selector):hover { + background-color: #3e3e3e; +} + #sidebar .main_tablinks_text { display: none; display: inline-block; @@ -31,17 +42,6 @@ visibility: visible; } -#sidebar .main_tablinks:not(#theme_selector) { - display: flex; - align-items: center; - margin-top: 5px; - cursor: pointer; -} - -#sidebar .main_tablinks:not(#theme_selector):hover { - background-color: #3e3e3e; -} - #sidebar .side_icon { font-size: 30px; padding: 9px; @@ -53,27 +53,45 @@ /* Theme selector */ #theme_selector { + margin-top: 20px; display: flex; height: 50px; } #theme_togglers { - width: 100%; display: flex; + opacity: 0; + visibility: hidden; + width: 100%; + justify-content: space-evenly; + align-items: center; + transition: all 50ms ease-in-out 200ms; +} + +#sidebar:hover #theme_togglers { + position: relative; + opacity: 1; + visibility: visible; } #theme_togglers .theme_toggler { - width: 40px; - height: 40px; + width: 30px; + height: 30px; border-radius: 1000px; border: 1px solid var(--accent-color); + cursor: pointer; + transition: border 200ms ease-in-out; } -#theme_togglers .theme_toggler.light { +#theme_togglers .theme_toggler.active { + border-width: 3px; +} + +#theme_togglers .theme_toggler#light { background: white; } -#theme_togglers .theme_toggler.dark { +#theme_togglers .theme_toggler#dark { background: #141414; } diff --git a/public/index.html b/public/index.html index 54065de..48b5665 100644 --- a/public/index.html +++ b/public/index.html @@ -56,13 +56,13 @@ info Info - +
@@ -564,10 +564,10 @@

Settings

-