« Modèle:MiniCard/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
 /* =============================================================================
-    MINICARD - VERSION BOUTONS MODERNES
+    MINICARD - Boutons avec image de fond
     ============================================================================= */
-/* Lien wrapper */
+/* Conteneur principal */
-.minicard-link {
+.minicard {
-     display: inline-block;
+     position: relative;
-    text-decoration: none !important;
-    color: inherit;
-}
-/* Bouton principal */
-.minicard-button {
      display: inline-flex;
      align-items: center;
-     gap: 8px;
+     justify-content: center;
-     padding: 10px 20px;
+     min-width: 140px;
-     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+     height: 50px;
-     color: #fff;
+     padding: 0 20px;
-     font-weight: 600;
+     border-radius: 12px;
-     font-size: 0.95rem;
+     overflow: hidden;
-    border-radius: 8px;
+     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      transition: all 0.3s ease;
      cursor: pointer;
-     border: none;
+     text-decoration: none !important;
+    vertical-align: middle;
 }
-/* Hover */
+/* Hover effect */
-.minicard-link:hover .minicard-button {
+a:hover .minicard,
+.minicard:hover {
      transform: translateY(-2px);
-     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
-/* Active (clic) */
+/* Active (click) */
-.minicard-link:active .minicard-button {
+a:active .minicard {
      transform: translateY(0);
-     box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
+     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+/* Background avec image */
+.minicard-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
 }
-/* Icône */
+.minicard-background img,
-.minicard-icon {
+.minicard-background .thumbimage {
-     display: inline-flex;
+     width: 100% !important;
-     align-items: center;
+     height: 100% !important;
-     justify-content: center;
+     max-width: none !important;
-     width: 20px;
+     object-fit: cover !important;
-     height: 20px;
+     filter: blur(4px) brightness(0.5);
-     flex-shrink: 0;
+     transform: scale(1.1);
 }
-.minicard-icon img {
+/* Cacher éléments MediaWiki */
-    width: 20px;
+.minicard-background .thumbinner,
-    height: 20px;
+.minicard-background .thumbcaption,
-    object-fit: contain;
+.minicard-background .magnify,
-     filter: brightness(0) invert(1);
+.minicard-background + .thumbcaption {
+     display: none !important;
 }
-.minicard-icon .thumbinner,
+/* Overlay assombrissant */
-.minicard-icon .thumbcaption {
+.minicard-overlay {
-     display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+     z-index: 1;
 }
 /* Texte */
 .minicard-text {
+    position: relative;
+    z-index: 2;
+    color: #fff !important;
+    font-weight: 600;
+    font-size: 0.95rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      white-space: nowrap;
      line-height: 1;
 }
-/* Masquer icône lien externe */
+/* Bouton sans image (fallback gris) */
-.minicard-link.external::after {
+.minicard--no-image {
+    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+}
+a:hover .minicard--no-image,
+.minicard--no-image:hover {
+    background: linear-gradient(135deg, #5a6778 0%, #3d4758 100%);
+}
+/* Masquer icône de lien externe */
+a[href*="//"] .minicard-text::after,
+.external .minicard-text::after {
      display: none !important;
+    content: none !important;
+}
+/* Supprimer le soulignement des liens */
+a .minicard {
+    color: inherit !important;
 }
-/* Grid layout */
+/* Grid layout pour aligner plusieurs cartes */
 .minicard-grid {
      display: flex;
@@ Ligne 81 : / Ligne 116 : @@
 }
-/* Variantes de couleurs */
+/* Responsive */
-.minicard-button.blue {
+@media (max-width: 768px) {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+     .minicard {
-    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
+        min-width: 120px;
-}
+        height: 45px;
+        font-size: 0.85rem;
-.minicard-link:hover .minicard-button.blue {
+        padding: 0 15px;
-     box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
+     }
-}
+     .minicard-grid {
-.minicard-button.green {
+        gap: 8px;
-    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+     }
-    box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
-}
-.minicard-link:hover .minicard-button.green {
-    box-shadow: 0 6px 20px rgba(67, 233, 123, 0.6);
-}
-.minicard-button.red {
-    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-     box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
-}
-.minicard-link:hover .minicard-button.red {
-     box-shadow: 0 6px 20px rgba(250, 112, 154, 0.6);
-}
-.minicard-button.dark {
-    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
-     box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);
 }
-.minicard-link:hover .minicard-button.dark {
+/* Fix pour les liens externes MediaWiki */
-     box-shadow: 0 6px 20px rgba(44, 62, 80, 0.6);
+.external.text {
+    background-image: none !important;
+     padding-right: 0 !important;
 }