Dark mode

This commit is contained in:
Imperator 2022-02-19 00:56:47 +01:00
parent 39f0ff01f5
commit 87a331265c
4 changed files with 31 additions and 21 deletions

View File

@ -62,7 +62,6 @@ elseif (isset($_GET['movie'])) {
</div> </div>
<h2 class="main">Netflix 2.0</h2> <h2 class="main">Netflix 2.0</h2>
<div id="heure" style="margin: 0 10px; padding: 0;"></div>
<div id="sagas" class="main" ></div> <div id="sagas" class="main" ></div>
<div id="movies" class="main" ></div> <div id="movies" class="main" ></div>
@ -73,6 +72,7 @@ if (isset($movie_detail)):
?> ?>
<section id="movieContent" class="main"> <section id="movieContent" class="main">
<h2 id="movieTitle" style="margin: 0;"></h2> <h2 id="movieTitle" style="margin: 0;"></h2>
<div id="heure" style="margin: 0 10px; padding: 0;"></div>
<h3 id="showDetail" class="toggle"><i class="fa fa-chevron-down" aria-hidden="true"></i> Afficher détail</h3> <h3 id="showDetail" class="toggle"><i class="fa fa-chevron-down" aria-hidden="true"></i> Afficher détail</h3>
<div id="movieDetails"> <div id="movieDetails">
<div id="cover" > <div id="cover" >

View File

@ -5,7 +5,7 @@ var duree_movie;
function ShowSagas(data) { function ShowSagas(data) {
var nosaga = $('<a />', { var nosaga = $('<a />', {
id: 0, id: 0,
class: 'saga button nosaga', class: 'saga button box nosaga',
href: '.?saga=0', href: '.?saga=0',
}); });
nosaga.append('No Saga'); nosaga.append('No Saga');
@ -13,7 +13,7 @@ var duree_movie;
$.each(data, function(key, value) { $.each(data, function(key, value) {
var saga = $('<a />', { var saga = $('<a />', {
id: value['id'], id: value['id'],
class: 'saga button container', class: 'saga button box container',
href: '.?saga='+value['id'], href: '.?saga='+value['id'],
}); });
//saga.append('<br>' + value['name']); //saga.append('<br>' + value['name']);
@ -38,7 +38,7 @@ var duree_movie;
$.each(data, function(key, value) { $.each(data, function(key, value) {
var movie = $('<a />', { var movie = $('<a />', {
id: value['id'], id: value['id'],
class: 'movie button container', class: 'movie button box container',
href: '.?movie='+value['id'], href: '.?movie='+value['id'],
}); });
//movie.append('<br>' + value['title']); //movie.append('<br>' + value['title']);

View File

@ -50,7 +50,7 @@ $(document).ready(function() {
var lien = $('.saga, .movie'); var lien = $('.saga, .movie');
var title = $('.saga > .title, .movie > .title'); var title = $('.saga > .title, .movie > .title');
var original_title = $('.movie > .original_title'); var original_title = $('.movie > .original_title');
lien.removeClass('button container'); lien.removeClass('box container');
lien.addClass('line'); lien.addClass('line');
title.removeClass('centered'); title.removeClass('centered');
original_title.show(); original_title.show();
@ -62,7 +62,7 @@ $(document).ready(function() {
var title = $('.saga > .title, .movie > .title'); var title = $('.saga > .title, .movie > .title');
var original_title = $('.movie > .original_title'); var original_title = $('.movie > .original_title');
lien.removeClass('line'); lien.removeClass('line');
lien.addClass('button container'); lien.addClass('box container');
title.addClass('centered'); title.addClass('centered');
original_title.hide(); original_title.hide();
}); });

View File

@ -60,31 +60,36 @@
} }
a.button { a.button {
background-color: #EEEEEE; background-color: #222426;
cursor: pointer; cursor: pointer;
display: inline-block;
text-align: center;
//border: 2px solid; //border: 2px solid;
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
margin: 5px; margin: 5px;
color: #10a2ff; color: #10a2ff;
padding: 1em 1.5em;
text-decoration: none; text-decoration: none;
box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 16px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;
} }
a.line { a.button:hover {
background-color: #EEEEEE; box-shadow: 0 0 6px rgb(35 173 255);
cursor: pointer;
}
a.button.box {
display: inline-block;
text-align: center;
padding: 1em 1.5em;
width: 150px;
height: 229px;
vertical-align: top;
}
a.button.line {
display: block; display: block;
//border: 2px solid;
border-radius: 5px;
font-weight: bold;
margin: 5px;
color: #10a2ff;
padding: 5px; padding: 5px;
text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@ -156,11 +161,14 @@ label:hover, input:focus + label {
body { body {
margin: 0; margin: 0;
background-color: #181A1B;
filter: brightness(1);
filter: contrast(1);
} }
.navbar { .navbar {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #262A2B;
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
@ -198,4 +206,6 @@ body {
.main { .main {
padding: 0; padding: 0;
margin: 16px; margin: 16px;
} color: #E8E6E3;
}