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 18:51:23 +01:00
parent 18d4970ebd
commit 118586be47
20 changed files with 223 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

26
sass/button.scss
View file

@ -9,41 +9,41 @@
white-space: nowrap;
border-width: 1px;
margin-bottom: .5rem;
background-color: #fff;
border-color: #dbdbdb;
background-color: var(--default-color);
border-color: var(--default-hl-color);
border-radius: 0.375rem;
&.is-danger {
background-color: #d73455;
background-color: var(--danger-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #d70933;
background-color: var(--danger-hl-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
}
}
&.is-link {
background-color: #485fc7;
background-color: var(--secondary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #3e56c4;
background-color: var(--secondary-hl-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
}
}
&.is-primary {
background-color: #2d7c58;
background-color: var(--primary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #267953;
background-color: var(--primary-hl-color);
}
}
}

10
sass/connexion.scss
View file

@ -1,9 +1,9 @@
.connexion,
.inscription {
background-color: #fff;
background-color: var(--default-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: #4a4a4a;
color: var(--font-color);
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
@ -17,12 +17,12 @@
}
button {
background-color: #485fc7;
background-color: var(--secondary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #3e56c4;
background-color: var(--secondary-hl-color);
}
}
}

4
sass/flash.scss
View file

@ -1,8 +1,8 @@
.flash {
background-color: #d73455;
background-color: var(--danger-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: #fff;
color: var(--default-color);
display: block;
padding: 1.25rem;
width: calc(100% - 6rem);

81
sass/forms.scss
View file

@ -30,12 +30,12 @@
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
background-color: var(--default-color);
border: 1px solid var(--default-hl-color) !important;
color: var(--font-color);
&:focus-visible {
border: 1px solid #b9b9b9 !important;
border: 1px solid var(--font-color) !important;
outline: unset;
}
}
@ -48,4 +48,75 @@
background-size: 1.2rem;
padding-right: 2.4rem;
}
}
}
.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;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: '\f185';
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
padding: 0;
font-family: "icon";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
text-align: center;
font-variant: normal;
text-transform: none;
}
input:checked + .slider {
background-color: #485fc7;
}
input:checked + .slider:before {
transform: translateX(26px);
content: '\f186';
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

40
sass/global.scss
View file

@ -2,6 +2,7 @@ html {
min-height: 100vh;
body {
background-color: var(--bg-color);
display: flex;
flex-direction: column;
padding-top: 3.5rem;
@ -16,11 +17,11 @@ html {
footer.footer {
margin-top: auto;
padding: 2rem 0.7rem 1.5rem;
background-color: #fafafa;
background-color: var(--footer-color);
}
a {
color: #485fc7;
color: var(--secondary-color);
cursor: pointer;
}
@ -38,4 +39,39 @@ html {
.is-hidden {
display: none;
}
:root {
--bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106);
--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"] {
--bg-color: rgb(36, 41, 51);
--font-color: rgb(236, 239, 244);
--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;
}

2
sass/icons.scss
View file

@ -41,6 +41,8 @@
.icon-eye:before { content: '\e806'; } /* '' */
.icon-spin:before { content: '\e839'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-sun:before { content: '\f185'; } /* '' */
.icon-moon:before { content: '\f186'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */
.icon-blind:before { content: '\f29d'; } /* '' */

1
sass/index.scss
View file

@ -30,7 +30,6 @@
@import './navbar';
@import './forms';
@import './button.scss';
@import './table';
@import './modal';
@import './toast';
@import './flash';

12
sass/list.scss
View file

@ -3,24 +3,24 @@
.item{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--default-hl-color);
@include respond-to("medium") {
&:nth-child(2n) {
background-color: #fafafa;
background-color: var(--bg-light-color);
}
}
@include respond-to("medium-up") {
border-left: 1px solid #dbdbdb;
border-left: 1px solid var(--default-hl-color);
&:first-child,
&:nth-child(2) {
border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--default-hl-color);
}
&:nth-child(2n),
&:last-child {
border-right: 1px solid #dbdbdb;
border-right: 1px solid var(--default-hl-color);
margin-right: -1px;
}
}
@ -35,7 +35,7 @@
}
img {
border: 2px solid #4a4a4a;
border: 2px solid var(--font-color);
max-width: 90%;
}
}

4
sass/ma-collection.scss
View file

@ -27,10 +27,10 @@
.title {
.icon-trash {
cursor: pointer;
color: #d73455;
color: var(--danger-color);
&:hover {
color: #d70933;
color: var(--danger-hl-color);
}
}
}

12
sass/modal.scss
View file

@ -43,12 +43,10 @@
width: 1200;
}
header,
footer {
align-items: center;
background-color: #f5f5f5;
background-color: var(--bg-light-color);
display: flex;
flex-shrink: 0;
justify-content: flex-start;
@ -57,7 +55,7 @@
}
header {
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--default-hl-color);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
justify-content: space-between;
@ -85,7 +83,7 @@
&::before,
&::after {
background-color: #fff;
background-color: var(--default-color);
content: "";
display: block;
left: 50%;
@ -105,7 +103,7 @@
}
}
section {
background-color: #fff;
background-color: var(--default-color);
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
@ -114,7 +112,7 @@
footer {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--default-hl-color);
.button:not(:last-child) {
margin-right: .5em;

32
sass/navbar.scss
View file

@ -1,6 +1,7 @@
.navbar {
min-height: 3.25rem;
background-color: #f5f5f5;
background-color: var(--bg-color);
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
color: rgba(0,0,0,.7);
position: fixed;
z-index: 30;
@ -8,6 +9,8 @@
right: 0;
left: 0;
@include respond-to("medium-up") {
min-height: 3.25rem;
align-items: stretch;
@ -29,7 +32,7 @@
span {
word-break: break-word;
color: #363636;
color: var(--font-color);
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
@ -101,7 +104,7 @@
position: relative;
flex-grow: 0;
flex-shrink: 0;
color: #4a4a4a;
color: var(--font-color);
display: block;
&.has-dropdown {
@ -113,10 +116,10 @@
color: rgba(0,0,0,.7);
.navbar-dropdown {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -129,7 +132,7 @@
&:hover {
.navbar-link {
background-color: #e8e8e8;
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
}
@ -147,7 +150,7 @@
}
.navbar-link {
color: #4a4a4a;
color: var(--font-color);
display: block;
line-height: 1.5;
padding: .5rem .75rem;
@ -182,7 +185,7 @@
transform: rotate(-45deg);
transform-origin: center;
width: .625em;
border-color: #485fc7;
border-color: var(--secondary-color);
margin-top: -0.375em;
right: 1.125em;
@ -194,7 +197,7 @@
.navbar-menu {
display: none;
background-color: #fff;
background-color: var(--default-color);
box-shadow: 0 8px 16px rgba(10,10,10,.1);
padding: .5rem 0;
@ -253,10 +256,10 @@
}
@include respond-to("medium-up") {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -297,4 +300,11 @@
margin-bottom: -0.5rem;
}
}
}
[data-theme="dark"] {
.navbar {
box-shadow: none;
}
}

20
sass/pagination.scss
View file

@ -27,15 +27,15 @@
text-decoration: none;
&:hover {
border-color: #b5b5b5;
color: #363636;
border-color: var(--font-color);
color: var(--font-color);
}
&.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
background-color: var(--default-hl-color);
border-color: var(--default-hl-color);
box-shadow: none;
color: #7a7a7a;
color: var(--disabled-color);
opacity: .5;
}
}
@ -48,8 +48,8 @@
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: #dbdbdb;
color: #363636;
border-color: var(--default-hl-color);
color: var(--font-color);
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
@ -66,9 +66,9 @@
.pagination-link {
&.is-current {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
background-color: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--default-color);
}
}

24
sass/table.scss
View file

@ -1,24 +0,0 @@
table {
color: #363636;
th, td {
padding: .5em .75em;
border-bottom: 1px solid #dbdbdb;
}
th {
border-bottom-width: 2px;
}
tr:nth-child(2n) {
background-color: #fafafa;
}
tbody {
tr {
&:hover {
background-color: #f5f5f5;
}
}
}
}

6
sass/toast.scss
View file

@ -9,8 +9,8 @@
font-size: 17px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
background-color: #d73455;
color: #fff;
background-color: var(--danger-color);
color: var(--default-color);
&.show {
visibility: visible;
@ -43,7 +43,7 @@
&::before,
&::after {
background-color: #fff;
background-color: var(--default-color);
content: "";
display: block;
left: 50%;