evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added expertimental theme toggler in sidebar

Browse Source
This commit is contained in:
Roberto Tonino
2020-05-13 22:17:43 +02:00
parent 9424fc4641
commit b28b2e0aee
6 changed files with 90 additions and 42132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/css/modules/sidebar.css
View File

@@ -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;
}