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

#19 ré-écriture des couleurs pour le thème Nord

This commit is contained in:
Damien Broqua 2022-02-24 11:32:56 +01:00
parent 2cabe98ade
commit 27e14d4cd0
7 changed files with 100 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sass/box.scss
View File

@ -1,7 +1,7 @@
.box { .box {
background-color: var(--form-bg-color); background-color: var(--box-bg-color);
border-radius: 6px; border-radius: 6px;
box-shadow: var(--form-box-color) 0px 3px 6px 0px; box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
color: var(--font-color); color: var(--font-color);
display: block; display: block;
padding: 1.25rem; padding: 1.25rem;
@ -20,10 +20,6 @@
margin-top: 0; margin-top: 0;
} }
input {
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
}
button { button {
margin-top: 2rem; margin-top: 2rem;
} }

29
sass/button.scss
View File

@ -12,25 +12,42 @@
background-color: var(--default-color); background-color: var(--default-color);
border-color: var(--default-hl-color); border-color: var(--default-hl-color);
border-radius: 0.375rem; border-radius: 0.375rem;
color: $button-font-color;
@include transition() {} @include transition() {}
&.is-danger { &.is-danger {
background-color: var(--danger-bg-color); background-color: $danger-color;
border-color: transparent; border-color: transparent;
color: var(--danger-font-color); color: $button-alternate-color;
&:hover { &:hover {
background-color: var(--danger-bg-hl-color); background-color: $danger-color-hl;
} }
} }
&.is-primary { &.is-primary {
background-color: var(--primary-bg-color); background-color: $primary-color;
border-color: transparent; border-color: transparent;
color: var(--primary-font-color);
&:hover { &:hover {
background-color: var(--primary-bg-hl-color); background-color: $primary-color-hl;
}
}
&.is-warning {
background-color: $warning-color;
border-color: transparent;
&:hover {
background-color: $warning-color-hl;
}
}
&.is-success {
background-color: $success-color;
&:hover {
background-color: $success-color-hl;
} }
} }
} }

103
sass/colors.scss
View File

@ -1,52 +1,73 @@
$hoverAmount: 10%;
$white: #ffffff;
$darken-white: #F8F9FB;
/* Couleurs du thème Nord (https://www.nordtheme.com/) */
$nord0: #2e3440;
$nord1: #3b4252;
$nord2: #434c5e;
$nord3: #4C566A;
$nord4: #d8dee9;
$nord5: #e5e9f0;
$nord6: #eceff4;
$nord7: #8fbcbb;
$nord8: #88c0d0;
$nord9: #81a1c1;
$nord10: #5e81ac;
$nord11: #d08770;
$nord12: #bf616a;
$nord13: #ebcb8b;
$nord14: #a3be8c;
$nord15: #b48ead;
$primary-color: $nord8;
$danger-color: $nord11;
$warning-color: $nord13;
$success-color: $nord14;
$primary-color-hl: darken($primary-color, $hoverAmount);
$danger-color-hl: darken($danger-color, $hoverAmount);
$warning-color-hl: darken($warning-color, $hoverAmount);
$success-color-hl: darken($success-color, $hoverAmount);
$button-font-color: $nord1;
$button-alternate-color: #01103C;
$pagination-border-color: $nord3;
$pagination-hover-color: rgb(115, 151, 186);
:root { :root {
/* Couleurs globales */ --default-color: #{$white};
--primary-bg-color: rgb(136, 192, 208); --bg-color: #{darken($white, 5%)};
--primary-bg-hl-color: rgb(121, 184, 202); --font-color: #{$nord3};
--primary-font-color: rgb(59, 66, 82); --footer-color: #{$darken-white};
--danger-bg-color: rgb(191, 97, 106); --link-color: #{$nord1};
--danger-bg-hl-color: rgb(176, 89, 100);
--danger-font-color: rgb(4, 4, 4);
/* Couleurs du thème */ --input-font-color: #{$nord3};
--default-color: rgb(255, 255, 255); --input-color: #{$white};
--bg-color: rgb(242, 244, 248); --input-active-color: #{$nord5};
--font-color: rgb(76, 86, 106);
--footer-color: rgb(251, 251, 252); --navbar-color: #{darken($white, 5%)};
--link-colink-color: rgb(59, 66, 82);
--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);
--form-bg-color: rgb(255, 255, 255); --box-bg-color: #F8F9FB;
--form-box-color: rgba(184, 194, 215, 0.35); --box-shadow-color: #{rgba($nord4, 0.35)};
--border-color: rgb(229, 233, 240); --border-color: #{$nord4};
--pagination-text-color: rgb(76, 86, 106);
--pagination-border-color: rgb(76, 86, 106);
--pagination-text-hover-color: rgb(115, 151, 186);
--pagination-border-hover-color: rgb(115, 151, 186);
} }
[data-theme="dark"] { [data-theme="dark"] {
--default-color: rgb(76, 86, 106); --default-color: #{$nord3};
--bg-color: rgb(36, 41, 51); --bg-color: #{lighten($nord0, 2%)};
--font-color: rgb(236, 239, 244); --font-color: #{$nord6};
--footer-color: rgb(59, 66, 82); --footer-color: #{$nord1};
--link-color: rgb(171, 185, 207); --link-color: #{$nord4};
--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);
--form-bg-color: rgb(46, 52, 64); --input-font-color: #{$nord6};
--form-box-color: rgba(15, 17, 21, 0.2); --input-color: #{$nord0};
--input-active-color: #{$nord3};
--border-color: rgb(59, 66, 82); --navbar-color: #{$nord0};
--pagination-text-color: rgb(236, 239, 244); --box-bg-color: #{$nord1};
--pagination-border-color: rgb(76, 86, 106); --box-shadow-color: #{rgba($nord4, 0.2)};
--pagination-text-hover-color: rgb(115, 151, 186);
--pagination-border-hover-color: rgb(115, 151, 186); --border-color: #{$nord1};
} }

6
sass/forms.scss
View File

@ -29,9 +29,9 @@
border-radius: 4px; border-radius: 4px;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
background-color: var(--default-color); background-color: var(--input-color);
border: 1px solid transparent !important; border: 1px solid transparent !important;
color: var(--input-color); color: var(--input-font-color);
@include transition() {} @include transition() {}
&:focus-visible { &:focus-visible {
@ -105,7 +105,7 @@
} }
input:checked + .slider { input:checked + .slider {
background-color: var(--primary-bg-color); background-color: $primary-color;
@include transition() {} @include transition() {}
} }

2
sass/global.scss
View File

@ -33,7 +33,7 @@ html {
@include transition() {} @include transition() {}
&:hover { &:hover {
color: var(--link-hover-color); color: var(--font-color);
} }
} }

4
sass/ma-collection.scss
View File

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

14
sass/pagination.scss
View File

@ -39,16 +39,16 @@
font-size: 1em; font-size: 1em;
justify-content: center; justify-content: center;
margin: .25rem; margin: .25rem;
border-color: var(--pagination-border-color); border-color: $pagination-border-color;
color: var(--pagination-text-color); color: var(--font-color);
min-width: 2.5em; min-width: 2.5em;
white-space: nowrap; white-space: nowrap;
@include transition() {} @include transition() {}
&:hover { &:hover {
border-color: var(--pagination-border-hover-color); border-color: $pagination-hover-color;
color: var(--pagination-text-hover-color); color: $pagination-hover-color;
} }
&.is-disabled { &.is-disabled {
@ -60,9 +60,9 @@
} }
&.is-current { &.is-current {
background-color: var(--primary-bg-color); background-color: $primary-color;
border-color: var(--primary-bg-color); border-color: $primary-color;
color: var(--primary-font-color); color: $button-font-color;
} }
} }
} }