started theme toggler in sidebar
This commit is contained in:
Roberto Tonino
parent
959bd89d85
commit
cad9cd3f4c
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
42109
public/js/bundle.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue