support night mode for material theme
This commit is contained in:
Adrien Beudin
parent
fb38677b92
commit
c921c4420b
@ -553,7 +553,7 @@ body.night .audio-player {
|
||||
|
||||
.floating-menu {
|
||||
font-family: sans-serif;
|
||||
padding: 5px;;
|
||||
padding: 5px;
|
||||
width: 45px;
|
||||
z-index: 556;
|
||||
position: fixed;
|
||||
|
||||
@ -215,3 +215,100 @@ span.right {
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
body.night {
|
||||
background-color: #37474f;
|
||||
color: #d3d4d4;
|
||||
}
|
||||
|
||||
body.night .audio-player {
|
||||
background: #546e7a;
|
||||
}
|
||||
|
||||
body.night .author a {
|
||||
color: #039be5 !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 22px;
|
||||
font-style: italic;
|
||||
color: #8a8989;
|
||||
}
|
||||
|
||||
.btn-xlarge {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.btn-xlarge i {
|
||||
font-size: 9.6rem;
|
||||
line-height: 150px;
|
||||
}
|
||||
|
||||
.home {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.floating-menu {
|
||||
font-family: sans-serif;
|
||||
padding: 0px;
|
||||
width: 45px;
|
||||
z-index: 556;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.switch-btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.switch-btn input {display:none;}
|
||||
|
||||
.slider-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider-btn:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input:checked + .slider-btn {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:focus + .slider-btn {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider-btn:before {
|
||||
-webkit-transform: translateX(18px);
|
||||
-ms-transform: translateX(18px);
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider-btn.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider-btn.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -32,6 +32,15 @@
|
||||
<body>
|
||||
<main>
|
||||
|
||||
{% if settings.settings.night_mode %}
|
||||
<div class="floating-menu">
|
||||
<label class="switch-btn">
|
||||
<input type="checkbox" id="toggle-box-checkbox">
|
||||
<span class="slider-btn round"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% for section in gallery.sections %}
|
||||
{% include "sections/" + section.type + ".html" %}
|
||||
{% endfor %}
|
||||
@ -39,13 +48,12 @@
|
||||
|
||||
{% if settings.share %}
|
||||
{% include 'share.html' -%}
|
||||
{% else -%}
|
||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
||||
<a href="../" class="btn-floating btn-large red">
|
||||
{% endif %}
|
||||
<div class="container home center-align">
|
||||
<a href="../" class="btn-floating btn-xlarge blue-grey darken-1">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
|
||||
@ -58,6 +66,23 @@
|
||||
<script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
|
||||
{% endif %}
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
{% if settings.settings.night_mode %}
|
||||
if (localStorage.getItem("mode_night") == "true") {
|
||||
$('body').addClass('night');
|
||||
document.getElementById("toggle-box-checkbox").checked = true;
|
||||
}
|
||||
|
||||
$('#toggle-box-checkbox').on('change', function(){
|
||||
if(this.checked){
|
||||
$('body').addClass('night');
|
||||
localStorage.setItem("mode_night", true);
|
||||
}else{
|
||||
$('body').removeClass('night');
|
||||
localStorage.setItem("mode_night", false);
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.parallax').parallax();
|
||||
});
|
||||
|
||||
@ -1,24 +1,9 @@
|
||||
{% set absolute_url = settings.url + "/" + link -%}
|
||||
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
|
||||
<a class="btn-floating btn-large red">
|
||||
<i class="fa fa-bars"></i>
|
||||
<div class="container home center-align">
|
||||
<p>Share this story</p>
|
||||
<a class="btn-floating grey lighten-3" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}" target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
|
||||
<a class="btn-floating grey lighten-3" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank"><i class="fa fa-facebook-official grey-text"></i>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../" class="btn-floating btn-large red"><i class="fa fa-home"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating grey lighten-3" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}" target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating grey lighten-3" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank"><i class="fa fa-facebook-official grey-text"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating grey lighten-3" href="http://www.pinterest.com/pin/create/button/?url={{absolute_url}}" target="_blank"><i class="fa fa-pinterest-square grey-text"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating grey lighten-3" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank"><i class="fa fa-google-plus-square grey-text"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="btn-floating grey lighten-3" href="http://www.pinterest.com/pin/create/button/?url={{absolute_url}}" target="_blank"><i class="fa fa-pinterest-square grey-text"></i></a>
|
||||
<a class="btn-floating grey lighten-3" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank"><i class="fa fa-google-plus-square grey-text"></i></a>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user