« 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... » |
m wrapper |
||
| 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 99 : | Ligne 113 : | ||
} | } | ||
/* Liens externes */ | /* Liens externes - FIX AFFICHAGE TEXTE */ | ||
.minicard-link-external { | .minicard-link-external { | ||
position: relative; | position: relative; | ||
| Ligne 118 : | Ligne 132 : | ||
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; | |||
} | } | ||
| Ligne 163 : | Ligne 179 : | ||
.minicard { | .minicard { | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
min-width: 140px; | |||
height: 52px; | |||
} | } | ||
| Ligne 168 : | Ligne 186 : | ||
.minicard-link-external { | .minicard-link-external { | ||
padding: 0 12px; | padding: 0 12px; | ||
} | |||
.minicard-link-external a { | |||
font-size: 0.85rem; | |||
} | } | ||
} | } | ||
| Ligne 174 : | Ligne 196 : | ||
.minicard-grid { | .minicard-grid { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
} | |||
.minicard { | |||
min-width: 0; | |||
margin-right: 8px; | |||
} | } | ||
} | } | ||