dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 10 Pull Requests Releases 14 Activity

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

This commit is contained in:
Damien Broqua 2022-02-23 19:38:23 +01:00
parent 0893e07852
commit bb533c3412
3 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
sass/button.scss
View File

@ -14,26 +14,12 @@
border-radius: 0.375rem; border-radius: 0.375rem;
&.is-danger { &.is-danger {
background-color: var(--danger-color); background-color: var(--danger-bg-color);
border-color: transparent; border-color: transparent;
color: var(--default-color); color: var(--danger-font-color);
&:hover { &:hover {
background-color: var(--danger-hl-color); background-color: var(--danger-bg-hl-color);
border-color: transparent;
color: var(--default-color);
}
}
&.is-link {
background-color: var(--secondary-color);
border-color: transparent;
color: var(--default-color);
&:hover {
background-color: var(--secondary-hl-color);
border-color: transparent;
color: var(--default-color);
} }
} }

17
sass/global.scss
View File

@ -56,6 +56,15 @@ html {
} }
:root { :root {
/* Couleurs globales */
--primary-bg-color: rgb(136, 192, 208);
--primary-bg-hl-color: rgb(121, 184, 202);
--primary-font-color: rgb(59, 66, 82);
--danger-bg-color: rgb(191, 97, 106);
--danger-bg-hl-color: rgb(176, 89, 100);
--danger-font-color: rgb(4, 4, 4);
/* Couleurs du thème */
--default-color: rgb(255, 255, 255); --default-color: rgb(255, 255, 255);
--bg-color: rgb(242, 244, 248); --bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106); --font-color: rgb(76, 86, 106);
@ -66,9 +75,7 @@ html {
--input-active-color: rgb(229, 233, 240); --input-active-color: rgb(229, 233, 240);
--navbar-color: rgb(242, 244, 248); --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-hl-color: #dbdbdb; --default-hl-color: #dbdbdb;
--secondary-color: #485fc7; --secondary-color: #485fc7;
@ -92,8 +99,4 @@ html {
--input-color: rgb(236, 239, 244); --input-color: rgb(236, 239, 244);
--input-active-color: rgb(36, 41, 51); --input-active-color: rgb(36, 41, 51);
--navbar-color: rgb(59, 66, 82); --navbar-color: rgb(59, 66, 82);
--primary-bg-color: rgb(136, 192, 208);
--primary-bg-hl-color: rgb(121, 184, 202);
--primary-font-color: rgb(59, 66, 82);
} }

4
sass/ma-collection.scss
View File

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