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

issue/19 (#20)

Browse source 
!19

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MyMusicLibrary/pulls/20
Co-authored-by: Damien Broqua <dbroqua@noreply.localhost>
Co-committed-by: Damien Broqua <dbroqua@noreply.localhost>
This commit is contained in:
Damien Broqua 2022-03-01 16:09:46 +01:00
parent 18d4970ebd
commit a0f9ab1f45
35 changed files with 973 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

26
sass/box.scss Normal file
View file

@ -0,0 +1,26 @@
.box {
background-color: var(--box-bg-color);
border-radius: 6px;
box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
color: var(--font-color);
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
margin: auto;
@include transition() {}
@include respond-to("small-up") {
width: 65%;
}
@include respond-to("medium-up") {
width: 35%;
}
h1 {
margin-top: 0;
}
button {
margin-top: 2rem;
}
}

62
sass/button.scss
View file

@ -7,43 +7,57 @@
padding-top: calc(0.5em - 1px);
text-align: center;
white-space: nowrap;
border-width: 1px;
border: 1px solid transparent;
margin-bottom: .5rem;
background-color: #fff;
border-color: #dbdbdb;
background-color: $nord9;
border-radius: 0.375rem;
color: $button-font-color;
@include transition() {}
&.is-danger {
background-color: #d73455;
border-color: transparent;
color: #fff;
&:hover {
background-color: #d70933;
border-color: transparent;
color: #fff;
}
&:hover {
background-color: darken($nord9, $hoverAmount);
}
&.is-link {
background-color: #485fc7;
border-color: transparent;
color: #fff;
&.is-danger {
background-color: $danger-color;
color: $button-alternate-color;
&:hover {
background-color: #3e56c4;
border-color: transparent;
color: #fff;
background-color: $danger-color-hl;
}
}
&.is-primary {
background-color: #2d7c58;
border-color: transparent;
color: #fff;
background-color: $primary-color;
&:hover {
background-color: #267953;
background-color: $primary-color-hl;
}
}
&.is-warning {
background-color: $warning-color;
&:hover {
background-color: $warning-color-hl;
}
}
&.is-success {
background-color: $success-color;
&:hover {
background-color: $success-color-hl;
}
}
&.is-link {
background-color: transparent;
border-color: $nord9;
color: $nord9;
&:hover {
border-color: darken($nord9, $hoverAmount);
}
}
}

74
sass/colors.scss Normal file
View file

@ -0,0 +1,74 @@
$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 {
--default-color: #{$white};
--bg-color: #{darken($white, 5%)};
--font-color: #{$nord3};
--footer-color: #{$darken-white};
--link-color: #{$nord1};
--input-font-color: #{$nord3};
--input-color: #{$white};
--input-active-color: #{$nord5};
--navbar-color: #{darken($white, 5%)};
--box-bg-color: #F8F9FB;
--box-shadow-color: #{rgba($nord4, 0.35)};
--border-color: #{$nord4};
}
[data-theme="dark"] {
--default-color: #{$nord3};
--bg-color: #{lighten($nord0, 2%)};
--font-color: #{$nord6};
--footer-color: #{$nord1};
--link-color: #{$nord4};
--input-font-color: #{$nord6};
--input-color: #{$nord0};
--input-active-color: #{$nord3};
--navbar-color: #{$nord0};
--box-bg-color: #{$nord1};
--box-shadow-color: #{rgba($nord4, 0.2)};
--border-color: #{$nord1};
}

28
sass/connexion.scss
View file

@ -1,28 +0,0 @@
.connexion,
.inscription {
background-color: #fff;
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;
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
margin: auto;
@include respond-to("small-up") {
width: 65%;
}
@include respond-to("medium-up") {
width: 35%;
}
button {
background-color: #485fc7;
border-color: transparent;
color: #fff;
&:hover {
background-color: #3e56c4;
}
}
}

6
sass/error.scss
View file

@ -1,10 +1,4 @@
.error {
min-height: calc(100vh - 3.25rem - 100px);
padding-top: 4rem;
pre {
padding: 0.75rem;
border: 1px dotted #cecccc;
background: #f9f9f9;
}
}

8
sass/flash.scss
View file

@ -1,10 +1,10 @@
.flash {
background-color: #d73455;
background-color: $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;
box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
color: $button-alternate-color;
display: block;
padding: 1.25rem;
padding: 1.25rem;
width: calc(100% - 6rem);
margin: 2rem auto;

7
sass/fonts.scss
View file

File diff suppressed because one or more lines are too long

88
sass/forms.scss
View file

@ -26,17 +26,17 @@
input,
textarea,
select {
border-radius: 0.375rem;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
border-radius: 4px;
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
background-color: var(--input-color);
border: 1px solid transparent !important;
color: var(--input-font-color);
@include transition() {}
&:focus-visible {
border: 1px solid #b9b9b9 !important;
outline: unset;
border-color: var(--input-active-color) !important;
}
}
@ -48,4 +48,78 @@
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;
@include transition() {}
}
.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: $primary-color;
@include transition() {}
}
input:checked + .slider:before {
transform: translateX(26px);
content: '\f186';
background-color: var(--input-active-color);
@include transition() {}
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

35
sass/global.scss
View file

@ -2,31 +2,62 @@ html {
min-height: 100vh;
body {
background-color: var(--bg-color);
display: flex;
flex-direction: column;
padding-top: 3.5rem;
font-family: 'open_sansregular';
font-weight: 400;
min-height: 100vh;
color: var(--font-color);
@include transition() {}
&.is-accessible {
font-family: 'lucioleregular';
.text-justify {
text-align: left;
}
}
footer.footer {
margin-top: auto;
padding: 2rem 0.7rem 1.5rem;
background-color: #fafafa;
background-color: var(--footer-color);
@include transition() {}
}
a {
color: #485fc7;
color: var(--link-color);
cursor: pointer;
@include transition() {}
&:hover {
color: var(--font-color);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--font-color);
}
h1 {
margin-top: 2rem;
}
pre {
font-family: 'fira_codelight';
margin: 0.75rem 0;
padding: 0.75rem;
border-left: 2px solid $nord10;
background: var(--box-bg-color);
color: var(--font-color);
}
}
}

1
sass/home.scss
View file

@ -1,4 +1,5 @@
.home {
margin-bottom: 0.75rem;
.header {
@include respond-to("small-up") {
height: 30vh;

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'; } /* '' */

8
sass/index.scss
View file

@ -26,21 +26,21 @@
// SPÉCIFIQUE AU SITE
@import './fonts';
@import './colors';
@import './mixin';
@import './global';
@import './navbar';
@import './forms';
@import './button.scss';
@import './table';
@import './modal';
@import './toast';
@import './flash';
@import './pagination';
@import './icons';
@import './list';
@import './box';
@import './error';
@import './home';
@import './connexion';
@import './ajouter-un-album';
@import './ma-collection';
@import './nous-contacter';
@import './ma-collection';

19
sass/list.scss
View file

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

7
sass/ma-collection.scss
View file

@ -27,16 +27,17 @@
.title {
.icon-trash {
cursor: pointer;
color: #d73455;
color: $danger-color;
@include transition() {}
&:hover {
color: #d70933;
color: $danger-color-hl;
}
}
}
}
.total {
margin: 1rem 0;
margin: 0.75rem 0;
}
}

4
sass/mixin.scss Normal file
View file

@ -0,0 +1,4 @@
@mixin transition() {
transition: background-color 200ms ease-in 0s, border-color 200ms ease-in 0s, box-shadow 200ms ease-in 0s, color 200ms ease-in 0s;
@content;
}

15
sass/modal.scss
View file

@ -43,25 +43,25 @@
width: 1200;
}
header,
footer {
align-items: center;
background-color: #f5f5f5;
background-color: var(--navbar-color);
display: flex;
flex-shrink: 0;
justify-content: flex-start;
padding: 0.75rem;
position: relative;
@include transition() {}
}
header {
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--border-color);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
justify-content: space-between;
font-size: 1.5rem;
@include transition() {}
button {
user-select: none;
@ -85,7 +85,7 @@
&::before,
&::after {
background-color: #fff;
background-color: var(--default-color);
content: "";
display: block;
left: 50%;
@ -105,16 +105,17 @@
}
}
section {
background-color: #fff;
background-color: var(--default-color);
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: 20px;
@include transition() {}
}
footer {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--border-color);
.button:not(:last-child) {
margin-right: .5em;

39
sass/navbar.scss
View file

@ -1,12 +1,14 @@
.navbar {
min-height: 3.25rem;
background-color: #f5f5f5;
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;
z-index: 30;
top: 0;
right: 0;
left: 0;
@include transition() {}
@include respond-to("medium-up") {
min-height: 3.25rem;
@ -22,18 +24,19 @@
.navbar-item {
align-items: center;
display: flex;
img {
img {
max-height: 1.75rem;
}
span {
word-break: break-word;
color: #363636;
color: var(--font-color);
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
margin-left: .5rem !important;
@include transition() {}
}
}
}
@ -101,8 +104,9 @@
position: relative;
flex-grow: 0;
flex-shrink: 0;
color: #4a4a4a;
color: var(--font-color);
display: block;
@include transition() {}
&.has-dropdown {
padding: 0;
@ -113,10 +117,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 +133,7 @@
&:hover {
.navbar-link {
background-color: #e8e8e8;
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
}
@ -147,13 +151,14 @@
}
.navbar-link {
color: #4a4a4a;
color: var(--font-color);
display: block;
line-height: 1.5;
padding: .5rem .75rem;
position: relative;
cursor: pointer;
padding-right: 2.5em;
@include transition() {}
@include respond-to("medium-up") {
display: flex;
@ -182,7 +187,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,9 +199,10 @@
.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;
@include transition() {}
@include respond-to("medium") {
max-height: calc(100vh - 3.25rem);
@ -253,10 +259,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 +303,11 @@
margin-bottom: -0.5rem;
}
}
}
[data-theme="dark"] {
.navbar {
box-shadow: none;
}
}

15
sass/nous-contacter.scss
View file

@ -1,15 +0,0 @@
.nous-contacter {
width: calc(100% - 2rem);
margin: 2rem auto;
@include respond-to("small-up") {
width: 55%;
}
@include respond-to("medium-up") {
width: 35%;
}
button {
margin-top: 2rem;
}
}

120
sass/pagination.scss
View file

@ -4,73 +4,8 @@
display: flex;
text-align: center;
justify-content: space-between;
margin: 1rem 0;
margin: 0.75rem 0;
.pagination-previous,
.pagination-next,
.pagination-link {
align-items: center;
border: 1px solid transparent;
border-radius: .375em;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(.5em - 1px);
padding-left: calc(.75em - 1px);
padding-right: calc(.75em - 1px);
padding-top: calc(.5em - 1px);
position: relative;
vertical-align: top;
text-decoration: none;
&:hover {
border-color: #b5b5b5;
color: #363636;
}
&.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: .5;
}
}
.pagination-previous,
.pagination-next,
.pagination-link {
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: #dbdbdb;
color: #363636;
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0;
}
.pagination-previous {
order: 2;
}
.pagination-next {
order: 3;
}
.pagination-link {
&.is-current {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
}
}
.pagination-list {
align-items: center;
@ -79,7 +14,56 @@
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1;
justify-content: flex-end;
@include respond-to("small") {
justify-content: center;
}
.pagination-link {
align-items: center;
border: 1px solid transparent;
border-radius: .375em;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding: calc(.5em - 1px) calc(.75em - 1px);
position: relative;
vertical-align: top;
text-decoration: none;
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: $pagination-border-color;
color: var(--font-color);
min-width: 2.5em;
white-space: nowrap;
@include transition() {}
&:hover {
border-color: $pagination-hover-color;
color: $pagination-hover-color;
}
&.is-disabled {
background-color: var(--default-hl-color);
border-color: var(--default-hl-color);
box-shadow: none;
color: var(--disabled-color);
opacity: .5;
}
&.is-current {
background-color: $primary-color;
border-color: $primary-color;
color: $button-font-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;
}
}
}
}

7
sass/toast.scss
View file

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