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

Updated css theme

This commit is contained in:
Damien Broqua 2024-01-13 18:30:45 +01:00
parent c79f1c5a74
commit fcb527aa5e
5 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
sass/ma-collection-details.scss
View File

@ -57,21 +57,22 @@
top: 12px; top: 12px;
} }
.navigation { .carousel {
position: absolute; display: grid;
top: 50%; grid-template-columns: auto 80vw auto;
cursor: pointer; z-index: 1;
z-index: 10; text-align: center;
}
&.previous { .navigation {
left: 12px; cursor: pointer;
}
&.next {
right: 12px;
}
i { i {
font-size: 2rem; font-size: 1rem;
color: $nord4; color: $nord4;
@include respond-to("small-up") {
font-size: 2rem;
}
} }
} }
} }

2
sass/modal.scss
View File

@ -9,7 +9,7 @@
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
z-index: 40; z-index: 2;
&.is-visible { &.is-visible {
display: flex; display: flex;

4
sass/navbar.scss
View File

@ -4,7 +4,7 @@
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px; box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
color: rgba(0,0,0,.7); color: rgba(0,0,0,.7);
position: fixed; position: fixed;
z-index: 30; z-index: 1;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
@ -131,7 +131,6 @@
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
z-index: 20;
} }
&:hover { &:hover {
@ -282,7 +281,6 @@
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
z-index: 20;
.navbar-item { .navbar-item {
white-space: nowrap; white-space: nowrap;

2
sass/toast.scss
View File

@ -3,7 +3,7 @@
min-width: 250px; min-width: 250px;
max-width: 360px; max-width: 360px;
position: fixed; position: fixed;
z-index: 66; z-index: 10;
right: 30px; right: 30px;
top: 30px; top: 30px;
font-size: 17px; font-size: 17px;

19
views/pages/mon-compte/ma-collection/details.ejs
View File

@ -26,14 +26,17 @@
<div class="modal" :class="{'is-visible': modalIsVisible}"> <div class="modal" :class="{'is-visible': modalIsVisible}">
<div class="modal-background"></div> <div class="modal-background"></div>
<button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button> <button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
<button type="button" aria-label="Image précédente" class="navigation previous" @click="previous" v-if="index > 0"> <div class="carousel">
<i class="icon-left-open"></i> <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous">
</button> <i class="icon-left-open"></i>
<button type="button" aria-label="Image suivante" class="navigation next" @click="next" v-if="index + 1 < item.images.length"> </button>
<i class="icon-right-open"></i> <div class="text-center">
</button> <img :src="preview" />
<div class="modal-card for-image"> </div>
<img :src="preview" /> <button type="button" aria-label="Image suivante" class="navigation next" @click="next">
<i class="icon-right-open"></i>
</button>
</div> </div>
</div> </div>