{WIP} Mise en place des thèmes clair et sombre
This commit is contained in:
parent
118586be47
commit
0893e07852
|
|
@ -38,12 +38,12 @@
|
|||
}
|
||||
|
||||
&.is-primary {
|
||||
background-color: var(--primary-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
border-color: transparent;
|
||||
color: var(--default-color);
|
||||
color: var(--primary-font-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-hl-color);
|
||||
background-color: var(--primary-bg-hl-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.connexion,
|
||||
.inscription {
|
||||
background-color: var(--default-color);
|
||||
background-color: var(--navbar-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
|
||||
color: var(--font-color);
|
||||
|
|
@ -15,14 +15,4 @@
|
|||
@include respond-to("medium-up") {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--secondary-color);
|
||||
border-color: transparent;
|
||||
color: var(--default-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-hl-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,17 +26,18 @@
|
|||
input,
|
||||
textarea,
|
||||
select {
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--default-color);
|
||||
border: 1px solid var(--default-hl-color) !important;
|
||||
color: var(--font-color);
|
||||
border: 1px solid transparent !important;
|
||||
color: var(--input-color);
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--font-color) !important;
|
||||
// border: 1px solid var(--font-color) !important;
|
||||
outline: unset;
|
||||
border-color: var(--input-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,12 +105,13 @@
|
|||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #485fc7;
|
||||
background-color: var(--primary-bg-color);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
content: '\f186';
|
||||
background-color: var(--input-active-color);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
|
|
@ -119,4 +121,3 @@ input:checked + .slider:before {
|
|||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -9,6 +9,7 @@ html {
|
|||
font-family: 'open_sansregular';
|
||||
font-weight: 400;
|
||||
min-height: 100vh;
|
||||
color: var(--font-color);
|
||||
|
||||
&.is-accessible {
|
||||
font-family: 'lucioleregular';
|
||||
|
|
@ -21,8 +22,21 @@ html {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--secondary-color);
|
||||
color: var(--link-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -42,18 +56,25 @@ html {
|
|||
}
|
||||
|
||||
:root {
|
||||
--default-color: rgb(255, 255, 255);
|
||||
--bg-color: rgb(242, 244, 248);
|
||||
--font-color: rgb(76, 86, 106);
|
||||
--footer-color: rgb(251, 251, 252);
|
||||
--link-color: rgb(123, 136, 161);
|
||||
--link-hover-color: rgb(76, 86, 106);
|
||||
--input-color: rgb(76, 86, 106);
|
||||
--input-active-color: rgb(229, 233, 240);
|
||||
--navbar-color: rgb(242, 244, 248);
|
||||
|
||||
--primary-bg-color: rgb(136, 192, 208);
|
||||
--primary-bg-hl-color: rgb(121, 184, 202);
|
||||
--primary-font-color: rgb(59, 66, 82);
|
||||
|
||||
--default-color: #fff;
|
||||
--default-hl-color: #dbdbdb;
|
||||
--primary-color: #2d7c58;
|
||||
--primary-hl-color: #267953;
|
||||
--secondary-color: #485fc7;
|
||||
--secondary-hl-color: #3e56c4;
|
||||
--danger-color: #d73455;
|
||||
--danger-hl-color: #d70933;
|
||||
--footer-color: #fafafa;
|
||||
--bg-light-color: #fafafa;
|
||||
--disabled-color: #7a7a7a;
|
||||
|
||||
|
|
@ -62,16 +83,17 @@ html {
|
|||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--default-color: rgb(76, 86, 106);
|
||||
--bg-color: rgb(36, 41, 51);
|
||||
--font-color: rgb(236, 239, 244);
|
||||
--footer-color: rgb(59, 66, 82);
|
||||
--link-color: rgb(171, 185, 207);
|
||||
--link-hover-color: rgb(236, 239, 244);
|
||||
--input-color: rgb(236, 239, 244);
|
||||
--input-active-color: rgb(36, 41, 51);
|
||||
--navbar-color: rgb(59, 66, 82);
|
||||
|
||||
|
||||
--default-color: #fff;
|
||||
--default-hl-color: #dbdbdb;
|
||||
--primary-color: #2d7c58;
|
||||
--primary-hl-color: #267953;
|
||||
--secondary-color: #485fc7;
|
||||
--secondary-hl-color: #3e56c4;
|
||||
--danger-color: #692230;
|
||||
--danger-hl-color: #4e0f1b;
|
||||
--primary-bg-color: rgb(136, 192, 208);
|
||||
--primary-bg-hl-color: rgb(121, 184, 202);
|
||||
--primary-font-color: rgb(59, 66, 82);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.navbar {
|
||||
min-height: 3.25rem;
|
||||
background-color: var(--bg-color);
|
||||
background-color: var(--navbar-color);
|
||||
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
|
||||
color: rgba(0,0,0,.7);
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
font-size: 1em;
|
||||
justify-content: center;
|
||||
margin: .25rem;
|
||||
border-color: var(--default-hl-color);
|
||||
color: var(--font-color);
|
||||
border-color: var(--primary-bg-color);
|
||||
color: var(--primary-font-color);
|
||||
min-width: 2.5em;
|
||||
padding-left: .75em;
|
||||
padding-right: .75em;
|
||||
|
|
@ -66,9 +66,9 @@
|
|||
|
||||
.pagination-link {
|
||||
&.is-current {
|
||||
background-color: var(--secondary-color);
|
||||
border-color: var(--secondary-color);
|
||||
color: var(--default-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
border-color: var(--primary-bg-color);
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
<div class="navbar-start">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-link" href="/ajouter-un-album">
|
||||
<a class="button is-primary" href="/ajouter-un-album">
|
||||
<i class="icon-plus"></i>
|
||||
<span>
|
||||
Ajouter un album
|
||||
|
|
@ -217,11 +217,11 @@
|
|||
</div>
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
|
||||
<button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
|
||||
<i class="icon-eye"></i>
|
||||
</button>
|
||||
<% if ( !user ) { %>
|
||||
<a class="button is-link" href="/connexion">
|
||||
<a class="button is-primary" href="/connexion">
|
||||
<strong>Connexion</strong>
|
||||
</a>
|
||||
<% } else { %>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<label for="q">Nom de l'album ou code barre</label>
|
||||
<div class="field has-addons">
|
||||
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus>
|
||||
<button class="button is-link" :disabled="loading" aria-label="Chercher">
|
||||
<button class="button is-primary" :disabled="loading" aria-label="Chercher">
|
||||
<i class="icon-search" v-if="!loading"></i>
|
||||
<i class="icon-spin animate-spin" v-if="loading"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@
|
|||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Connexion</button>
|
||||
<button type="submit" class="button is-primary">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Inscription</button>
|
||||
<button type="submit" class="button is-primary">Inscription</button>
|
||||
</form>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user