dbroqua/MusicTopus
2
0
Fork 1
Code Issues 13 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

{WIP} Mise en place des thèmes clair et sombre

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 19:26:52 +01:00
parent 118586be47
commit 0893e07852
10 changed files with 96 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

6
sass/button.scss
View file

@ -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);
}
}
}

14
sass/connexion.scss
View file

@ -1,11 +1,11 @@
.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);
display: block;
padding: 1.25rem;
padding: 1.25rem;
width: calc(100% - 2rem);
margin: auto;
@ -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);
}
}
}

31
sass/forms.scss
View file

@ -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;
}
}
@ -53,24 +54,24 @@
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
@ -81,7 +82,7 @@
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
@ -102,21 +103,21 @@
font-variant: normal;
text-transform: none;
}
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 {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

52
sass/global.scss
View file

@ -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,36 +56,44 @@ 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;
--heading-color: #292922;
}
[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);
}

6
sass/navbar.scss
View file

@ -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;
@ -25,8 +25,8 @@
.navbar-item {
align-items: center;
display: flex;
img {
img {
max-height: 1.75rem;
}

10
sass/pagination.scss
View file

@ -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);
}
}