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 {
|
.floating-menu {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
padding: 5px;;
|
padding: 5px;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
z-index: 556;
|
z-index: 556;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@ -215,3 +215,100 @@ span.right {
|
|||||||
.clear {
|
.clear {
|
||||||
clear: both;
|
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>
|
<body>
|
||||||
<main>
|
<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 %}
|
{% for section in gallery.sections %}
|
||||||
{% include "sections/" + section.type + ".html" %}
|
{% include "sections/" + section.type + ".html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@ -39,13 +48,12 @@
|
|||||||
|
|
||||||
{% if settings.share %}
|
{% if settings.share %}
|
||||||
{% include 'share.html' -%}
|
{% include 'share.html' -%}
|
||||||
{% else -%}
|
{% endif %}
|
||||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
<div class="container home center-align">
|
||||||
<a href="../" class="btn-floating btn-large red">
|
<a href="../" class="btn-floating btn-xlarge blue-grey darken-1">
|
||||||
<i class="fa fa-home"></i>
|
<i class="fa fa-home"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||||
<script type="text/javascript" src="../static/js/materialize.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>
|
<script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<script type="text/javascript" charset="utf-8">
|
<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(){
|
$(document).ready(function(){
|
||||||
$('.parallax').parallax();
|
$('.parallax').parallax();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,24 +1,9 @@
|
|||||||
{% set absolute_url = settings.url + "/" + link -%}
|
{% set absolute_url = settings.url + "/" + link -%}
|
||||||
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
|
<div class="container home center-align">
|
||||||
<a class="btn-floating btn-large red">
|
<p>Share this story</p>
|
||||||
<i class="fa fa-bars"></i>
|
<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>
|
</a>
|
||||||
<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>
|
||||||
<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>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user