« Modèle:MiniCard/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « →============================================================================= MINICARD - Navigation Pills ============================================================================= : →Conteneur de grille : .minicard-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 60px; margin: 0 0 24px 0; } →MiniCard individuelle : .minicard { position: relative; border... » |
revert Balise : Révocation manuelle |
||
| (8 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 21 : | Ligne 21 : | ||
overflow: hidden; | overflow: hidden; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
display: inline-flex; | |||
align-items: center; | |||
min-width: 180px; | |||
max-width: 300px; | |||
height: 60px; | |||
margin: 0 12px 12px 0; | |||
vertical-align: top; | |||
} | |||
/* Dans une grille, on retire les marges et on ajuste le display */ | |||
.minicard-grid .minicard { | |||
display: flex; | display: flex; | ||
margin: 0; | |||
min-width: 0; | |||
max-width: none; | |||
width: auto; | |||
} | } | ||
| Ligne 40 : | Ligne 54 : | ||
pointer-events: none; | pointer-events: none; | ||
overflow: hidden; | overflow: hidden; | ||
z-index: 0; | |||
} | } | ||
| Ligne 67 : | Ligne 82 : | ||
); | ); | ||
transition: opacity 0.3s ease; | transition: opacity 0.3s ease; | ||
z-index: 0; | |||
} | } | ||
| Ligne 74 : | Ligne 90 : | ||
/* Liens internes */ | /* Liens internes */ | ||
.minicard > a { | .minicard > a:not(.minicard-link-external) { | ||
position: relative; | position: relative; | ||
z-index: 1; | z-index: 1; | ||
| Ligne 91 : | Ligne 107 : | ||
} | } | ||
.minicard:hover > a { | .minicard:hover > a:not(.minicard-link-external) { | ||
padding-left: 20px; | padding-left: 20px; | ||
text-shadow: | text-shadow: | ||
| Ligne 106 : | Ligne 122 : | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
display: flex; | display: flex !important; | ||
align-items: center; | align-items: center; | ||
color: #ffffff !important; | color: #ffffff !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
| Ligne 118 : | Ligne 130 : | ||
1px 1px 4px rgba(0, 0, 0, 0.8), | 1px 1px 4px rgba(0, 0, 0, 0.8), | ||
0 0 8px rgba(0, 0, 0, 0.6); | 0 0 8px rgba(0, 0, 0, 0.6); | ||
font-weight: 600; | |||
font-size: 0.95rem; | |||
transition: all 0.3s ease; | |||
cursor: pointer; | |||
} | } | ||
.minicard:hover .minicard-link-external { | .minicard:hover .minicard-link-external { | ||
padding-left: 20px; | padding-left: 20px; | ||
text-shadow: | text-shadow: | ||
-1px -1px 6px rgba(0, 0, 0, 0.9), | -1px -1px 6px rgba(0, 0, 0, 0.9), | ||
| Ligne 132 : | Ligne 145 : | ||
/* Icône externe */ | /* Icône externe */ | ||
.minicard- | .minicard-external-icon { | ||
margin-left: 4px; | margin-left: 4px; | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
| Ligne 140 : | Ligne 152 : | ||
} | } | ||
.minicard:hover .minicard- | .minicard:hover .minicard-external-icon { | ||
opacity: 1; | opacity: 1; | ||
} | |||
/* Texte sans lien */ | |||
.minicard-text { | |||
position: relative; | |||
z-index: 1; | |||
padding: 0 16px; | |||
color: #ffffff; | |||
text-shadow: | |||
-1px -1px 4px rgba(0, 0, 0, 0.8), | |||
1px 1px 4px rgba(0, 0, 0, 0.8), | |||
0 0 8px rgba(0, 0, 0, 0.6); | |||
} | } | ||
| Ligne 163 : | Ligne 187 : | ||
.minicard { | .minicard { | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
min-width: 140px; | |||
height: 52px; | |||
} | |||
.minicard > a:not(.minicard-link-external), | |||
.minicard-link-external, | |||
.minicard-text { | |||
padding: 0 12px; | |||
} | } | ||
.minicard-link-external { | .minicard-link-external { | ||
font-size: 0.85rem; | |||
} | } | ||
} | } | ||
| Ligne 174 : | Ligne 205 : | ||
.minicard-grid { | .minicard-grid { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
} | |||
.minicard { | |||
min-width: 0; | |||
margin-right: 8px; | |||
} | } | ||
} | } | ||