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

View file

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

View file

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

View file

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

View file

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

View file

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