Theme toggle button
This commit is contained in:
parent
13e5e862ce
commit
37b68c41f7
|
@ -130,6 +130,10 @@ html, body {
|
|||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.menu-bar .left-buttons {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.menu-bar .right-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
@ -226,6 +230,30 @@ html, body {
|
|||
.next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Theme Popup */
|
||||
.theme-popup {
|
||||
position: fixed;
|
||||
left: -40px;
|
||||
|
||||
border: 1px solid #fafafa;
|
||||
border-radius: 4px;
|
||||
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.theme-popup .theme {
|
||||
margin: 0;
|
||||
padding: 2px 10px;
|
||||
line-height: 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-popup .theme:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -37,4 +37,24 @@ $( document ).ready(function() {
|
|||
window.print();
|
||||
}
|
||||
|
||||
// Theme button
|
||||
$("#theme-toggle").click(function(){
|
||||
if($('.theme-popup').length) {
|
||||
$('.theme-popup').remove();
|
||||
} else {
|
||||
var popup = $('<div class="theme-popup"></div>')
|
||||
.append($('<div class="theme" id="light">Light (default)<div>'))
|
||||
.append($('<div class="theme" id="dark">Dark</div>'));
|
||||
|
||||
|
||||
$(this).append(popup);
|
||||
|
||||
$('.theme').click(function(){
|
||||
var theme = $(this).attr('id');
|
||||
$('body').removeClass().addClass(theme);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -31,7 +31,8 @@
|
|||
<div class="page">
|
||||
<div id="menu-bar" class="menu-bar">
|
||||
<div class="left-buttons">
|
||||
<i id="sidebar-toggle" class="fa fa-bars left"></i>
|
||||
<i id="sidebar-toggle" class="fa fa-bars"></i>
|
||||
<i id="theme-toggle" class="fa fa-paint-brush"></i>
|
||||
</div>
|
||||
|
||||
<h1 class="menu-title">{{ title }}</h1>
|
||||
|
|
Loading…
Reference in New Issue