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; visibility: visible;
} }
#sidebar .main_tablinks { #sidebar .main_tablinks:not(#theme_selector) {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 5px; margin-top: 5px;
cursor: pointer; cursor: pointer;
} }
#sidebar .main_tablinks:hover { #sidebar .main_tablinks:not(#theme_selector):hover {
background-color: #3e3e3e; background-color: #3e3e3e;
} }
@ -50,3 +50,33 @@
#sidebar .main_tablinks.active .side_icon { #sidebar .main_tablinks.active .side_icon {
color: var(--accent-color); 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> </div>
<aside id="sidebar" role="navigation"> <aside id="sidebar" role="navigation">
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i <span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span> <i class="material-icons side_icon">home</i>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search"><i <span class="main_tablinks_text">Home</span>
class="material-icons side_icon">search</i><span class="main_tablinks_text">Search</span></span> </span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts"><i <span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search">
class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span> <i class="material-icons side_icon">search</i>
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites"><i <span class="main_tablinks_text">Search</span>
class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span> </span>
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer"><i <span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts">
class="material-icons side_icon">link</i><span class="main_tablinks_text">Link <i class="material-icons side_icon">bubble_chart</i>
Analyzer</span></span> <span class="main_tablinks_text">Charts</span>
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings"><i </span>
class="material-icons side_icon">settings</i><span class="main_tablinks_text">Settings</span></span> <span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites">
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info"><i <i class="material-icons side_icon">album</i>
class="material-icons side_icon">info</i><span class="main_tablinks_text">Info</span></span> <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> </aside>
<main id="main_content"> <main id="main_content">
<div id="middle_section"> <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