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

started theme toggler in sidebar

Browse Source
This commit is contained in:
Roberto Tonino 2020-05-12 21:16:38 +02:00
parent 959bd89d85
commit cad9cd3f4c
4 changed files with 42174 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,14 +31,14 @@
visibility: visible;
}
#sidebar .main_tablinks {
#sidebar .main_tablinks:not(#theme_selector) {
display: flex;
align-items: center;
margin-top: 5px;
cursor: pointer;
}
#sidebar .main_tablinks:hover {
#sidebar .main_tablinks:not(#theme_selector):hover {
background-color: #3e3e3e;
}
@ -50,3 +50,33 @@
#sidebar .main_tablinks.active .side_icon {
color: var(--accent-color);
}
/* Theme selector */
#theme_selector {
display: flex;
height: 50px;
}
#theme_togglers {
width: 100%;
display: flex;
}
#theme_togglers .theme_toggler {
width: 40px;
height: 40px;
border-radius: 1000px;
border: 1px solid var(--accent-color);
}
#theme_togglers .theme_toggler.light {
background: white;
}
#theme_togglers .theme_toggler.dark {
background: #141414;
}
#sidebar .theme_selector_icon {
transform: rotate(45deg);
}

51
public/index.html
View File

@ -27,21 +27,42 @@
</div>
<aside id="sidebar" role="navigation">
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search"><i
class="material-icons side_icon">search</i><span class="main_tablinks_text">Search</span></span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts"><i
class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span>
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites"><i
class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span>
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer"><i
class="material-icons side_icon">link</i><span class="main_tablinks_text">Link
Analyzer</span></span>
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings"><i
class="material-icons side_icon">settings</i><span class="main_tablinks_text">Settings</span></span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info"><i
class="material-icons side_icon">info</i><span class="main_tablinks_text">Info</span></span>
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
<i class="material-icons side_icon">home</i>
<span class="main_tablinks_text">Home</span>
</span>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search">
<i class="material-icons side_icon">search</i>
<span class="main_tablinks_text">Search</span>
</span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts">
<i class="material-icons side_icon">bubble_chart</i>
<span class="main_tablinks_text">Charts</span>
</span>
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites">
<i class="material-icons side_icon">album</i>
<span class="main_tablinks_text">Favorites</span>
</span>
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
<i class="material-icons side_icon">link</i>
<span class="main_tablinks_text">Link
Analyzer</span>
</span>
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings">
<i class="material-icons side_icon">settings</i>
<span class="main_tablinks_text">Settings</span>
</span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
<i class="material-icons side_icon">info</i>
<span class="main_tablinks_text">Info</span>
</span>
<!-- <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon theme_selector_icon">brightness_3</i>
<div id="theme_togglers">
<div class="theme_toggler dark"></div>
<div class="theme_toggler light"></div>
</div>
</span> -->
</aside>
<main id="main_content">
<div id="middle_section">

42109
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long