Fix: suppression de la classe slide en doublon dans toutes les vues
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
5eaf99f7cd
commit
bbab752fd6
5 changed files with 19 additions and 31 deletions
|
|
@ -62,17 +62,13 @@
|
|||
</script>
|
||||
|
||||
<section
|
||||
class="play golden-grid slide"
|
||||
class="play golden-grid"
|
||||
aria-label="Jouer"
|
||||
style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
|
||||
>
|
||||
|
||||
<!-- Fond : image + overlay, crossfade au changement de jeu -->
|
||||
<div class="play-bg" class:is-out={isOut} aria-hidden="true">
|
||||
{#if displayedGame?.backgroundImage}
|
||||
<img class="play-bg-img" src={displayedGame.backgroundImage} alt="" />
|
||||
{/if}
|
||||
<div class="play-bg-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lignes courbes décoratives (SVG) -->
|
||||
|
|
@ -191,11 +187,18 @@
|
|||
|
||||
/* --- Background --- */
|
||||
.play-bg {
|
||||
grid-area: 1/1 / span 20 / span 20;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
background-image: url(/static/media/background-play.f8db5aa42e2983197126.svg);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.play-bg.is-out {
|
||||
opacity: 0;
|
||||
|
|
@ -209,17 +212,6 @@
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.play-bg-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.75) 0%,
|
||||
rgba(0, 0, 0, 0.35) 60%,
|
||||
rgba(0, 0, 0, 0.1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Lignes courbes SVG --- */
|
||||
.play-curves {
|
||||
grid-area: 1/1 / span 20 / span 20;
|
||||
|
|
@ -313,15 +305,12 @@
|
|||
}
|
||||
|
||||
.play-carousel-item.active button img {
|
||||
border-color: var(--color-primary);
|
||||
border: 4px solid var(--color-primary);
|
||||
border-radius: 4.9375rem;
|
||||
}
|
||||
|
||||
/* --- Mobile (≤ 700px) --- */
|
||||
@media screen and (max-width: 700px) {
|
||||
.play-bg-overlay {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.play-featured {
|
||||
grid-area: 3/2 / span 12 / span 18;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue