Fix: blueprint game + styles carrousel Play
- playLink renommé et translate: false sur playLink + backgroundColor
- button { border: none } dans buttons.css
- Largeur vignettes via :global(img) sur l'élément image
(découple la taille du bouton de celle de l'image)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
66767f0136
commit
90f155b679
3 changed files with 18 additions and 6 deletions
|
|
@ -55,9 +55,10 @@ columns:
|
||||||
- strike
|
- strike
|
||||||
- clear
|
- clear
|
||||||
- link
|
- link
|
||||||
playLinks:
|
playLink:
|
||||||
label: Lien(s) pour jouer
|
label: Lien(s) pour jouer
|
||||||
help: Laissez vide pour afficher "à venir / coming soon"
|
help: Laissez vide pour afficher "à venir / coming soon"
|
||||||
|
translate: false
|
||||||
type: url
|
type: url
|
||||||
|
|
||||||
- width: 3/10
|
- width: 3/10
|
||||||
|
|
@ -71,6 +72,7 @@ columns:
|
||||||
language: css
|
language: css
|
||||||
size: custom-size
|
size: custom-size
|
||||||
default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%)
|
default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%)
|
||||||
|
translate: false
|
||||||
help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée
|
help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée
|
||||||
preview:
|
preview:
|
||||||
label: Aperçu
|
label: Aperçu
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,7 @@
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Button */
|
/* Button */
|
||||||
.button {
|
.button {
|
||||||
width: 14vmax;
|
width: 14vmax;
|
||||||
|
|
|
||||||
|
|
@ -354,7 +354,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: clamp(140px, 15.09vw, 291px);
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
background: none;
|
background: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -362,15 +361,22 @@
|
||||||
transition: all 0.4s var(--ease-standard);
|
transition: all 0.4s var(--ease-standard);
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-carousel-item.active button {
|
.play-carousel-item :global(img) {
|
||||||
opacity: 1;
|
width: clamp(140px, 15.09vw, 291px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-carousel-item.active :global(img) {
|
||||||
width: clamp(170px, 18.41vw, 355px);
|
width: clamp(170px, 18.41vw, 355px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-carousel-item button img,
|
.play-carousel-item.active button {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-carousel-item button :global(img),
|
||||||
.play-carousel-item button :global(picture img) {
|
.play-carousel-item button :global(picture img) {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
transition: border-color 0.4s var(--ease-standard);
|
transition: all 0.4s var(--ease-standard);
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-carousel-title {
|
.play-carousel-title {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue