Ajout du mode sombre !
This commit is contained in:
parent
772f57b04e
commit
9fae286c11
53
_sass/dark-theme.scss
Normal file
53
_sass/dark-theme.scss
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
Dark Theme
|
||||||
|
**/
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dark-theme-only{
|
||||||
|
display:inline;
|
||||||
|
}
|
||||||
|
.hero{
|
||||||
|
background-color:darken(#5c9ead,35%)!important;
|
||||||
|
color:#ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#photosAndButtons .card-content{
|
||||||
|
background-color:darken(#5c9ead,40%)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.title,
|
||||||
|
span.title{
|
||||||
|
color:#ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.subtitle{
|
||||||
|
color:#ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-primary
|
||||||
|
{
|
||||||
|
background-color:darken(#5c9ead,40%)!important;
|
||||||
|
}
|
||||||
|
.tile.is-vertical{
|
||||||
|
background-color:unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-info{
|
||||||
|
background-color: darken(#5c9ead,41%)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.hero.is-primary.is-bold{
|
||||||
|
background-image: none;
|
||||||
|
background-color:darken(#5c9ead,30%)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body footer{
|
||||||
|
background-color: darken(#5c9ead,42%)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button{
|
||||||
|
background-color: darken(#5c9ead,41%);
|
||||||
|
border-color:darken(#5c9ead,30%);
|
||||||
|
border-width: 4px;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
}
|
@ -54,8 +54,13 @@ body{
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark-theme-only{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
@import "../node_modules/bulma/bulma";
|
@import "../node_modules/bulma/bulma";
|
||||||
@import "icon";
|
@import "icon";
|
||||||
|
@import "dark-theme";
|
||||||
|
|
||||||
#idCard {
|
#idCard {
|
||||||
|
|
||||||
|
36
css/main.css
36
css/main.css
@ -31,6 +31,9 @@ html {
|
|||||||
body {
|
body {
|
||||||
overflow-x: hidden; }
|
overflow-x: hidden; }
|
||||||
|
|
||||||
|
.dark-theme-only {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||||
@keyframes spinAround {
|
@keyframes spinAround {
|
||||||
from {
|
from {
|
||||||
@ -6998,6 +7001,39 @@ label.panel-block {
|
|||||||
.icon-print:before {
|
.icon-print:before {
|
||||||
content: "\e906"; }
|
content: "\e906"; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
Dark Theme
|
||||||
|
**/
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dark-theme-only {
|
||||||
|
display: inline; }
|
||||||
|
.hero {
|
||||||
|
background-color: #1d343a !important;
|
||||||
|
color: #ffffff; }
|
||||||
|
#photosAndButtons .card-content {
|
||||||
|
background-color: #142529 !important; }
|
||||||
|
p.title,
|
||||||
|
span.title {
|
||||||
|
color: #ffffff; }
|
||||||
|
p.subtitle {
|
||||||
|
color: #ffffff; }
|
||||||
|
.is-primary {
|
||||||
|
background-color: #142529 !important; }
|
||||||
|
.tile.is-vertical {
|
||||||
|
background-color: unset; }
|
||||||
|
.is-info {
|
||||||
|
background-color: #132225 !important; }
|
||||||
|
section.hero.is-primary.is-bold {
|
||||||
|
background-image: none;
|
||||||
|
background-color: #25444b !important; }
|
||||||
|
body footer {
|
||||||
|
background-color: #111f22 !important; }
|
||||||
|
.button {
|
||||||
|
background-color: #132225;
|
||||||
|
border-color: #25444b;
|
||||||
|
border-width: 4px;
|
||||||
|
color: white; } }
|
||||||
|
|
||||||
#idCard .hero-body {
|
#idCard .hero-body {
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
padding-top: 2rem; }
|
padding-top: 2rem; }
|
||||||
|
@ -295,6 +295,11 @@
|
|||||||
<img src="images/poweredByInfomaniak.bmp" alt="Powered By Infomaniak.com" width="70">
|
<img src="images/poweredByInfomaniak.bmp" alt="Powered By Infomaniak.com" width="70">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
<p class="dark-theme-only">
|
||||||
|
<small>
|
||||||
|
(Ceci est le thème sombre !)
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user