« Modèle:MiniCard/styles.css » : différence entre les versions
De Nefald
Autres actions
mAucun résumé des modifications Balise : Révoqué |
revert Balise : Révocation manuelle |
||
| (5 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 30 : | Ligne 30 : | ||
} | } | ||
/* Dans une grille, on retire les marges et on ajuste le display */ | |||
.minicard-grid .minicard { | .minicard-grid .minicard { | ||
display: flex; | display: flex; | ||
| Ligne 38 : | Ligne 39 : | ||
} | } | ||
.minicard:hover { | .minicard:hover { | ||
border-color: rgba(74, 158, 255, 0.4); | border-color: rgba(74, 158, 255, 0.4); | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); | ||
} | } | ||
| Ligne 80 : | Ligne 75 : | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%); | background: linear-gradient( | ||
135deg, | |||
rgba(0, 0, 0, 0.7) 0%, | |||
rgba(0, 0, 0, 0.5) 50%, | |||
rgba(0, 0, 0, 0.7) 100% | |||
); | |||
transition: opacity 0.3s ease; | transition: opacity 0.3s ease; | ||
z-index: 0; | z-index: 0; | ||
| Ligne 89 : | Ligne 89 : | ||
} | } | ||
/* Liens internes | /* Liens internes */ | ||
.minicard > a:not(.minicard-link-external) { | .minicard > a:not(.minicard-link-external) { | ||
position: relative; | position: relative; | ||
| Ligne 109 : | Ligne 109 : | ||
.minicard:hover > a:not(.minicard-link-external) { | .minicard:hover > a:not(.minicard-link-external) { | ||
padding-left: 20px; | padding-left: 20px; | ||
text-shadow: | |||
-1px -1px 6px rgba(0, 0, 0, 0.9), | |||
1px 1px 6px rgba(0, 0, 0, 0.9), | |||
0 0 12px rgba(74, 158, 255, 0.5); | |||
} | } | ||
/* | /* Liens externes */ | ||
.minicard-external | .minicard-link-external { | ||
position: relative; | position: relative; | ||
z-index: 1; | z-index: 1; | ||
| Ligne 118 : | 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; | ||
| Ligne 126 : | 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; | transition: all 0.3s ease; | ||
pointer | cursor: pointer; | ||
} | } | ||
.minicard:hover .minicard-external | .minicard:hover .minicard-link-external { | ||
padding-left: 20px; | padding-left: 20px; | ||
text-shadow: | |||
-1px -1px 6px rgba(0, 0, 0, 0.9), | |||
1px 1px 6px rgba(0, 0, 0, 0.9), | |||
0 0 12px rgba(74, 158, 255, 0.5); | |||
} | |||
/* Icône externe */ | |||
.minicard-external-icon { | |||
margin-left: 4px; | |||
font-size: 0.85rem; | |||
opacity: 0.7; | |||
transition: opacity 0.3s ease; | |||
} | |||
.minicard:hover .minicard-external-icon { | |||
opacity: 1; | |||
} | } | ||
| Ligne 170 : | Ligne 192 : | ||
.minicard > a:not(.minicard-link-external), | .minicard > a:not(.minicard-link-external), | ||
.minicard-external | .minicard-link-external, | ||
.minicard-text { | .minicard-text { | ||
padding: 0 12px; | padding: 0 12px; | ||
} | |||
.minicard-link-external { | |||
font-size: 0.85rem; | |||
} | } | ||
} | } | ||