« 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 - Wrapper pour gérer le lien */
-   MINICARD - Navigation Pills
+.minicard-wrapper {
-   ============================================================================= */
+    display: inline-block;
+    text-decoration: none !important;
+}
-/* Conteneur de grille */
+.minicard-wrapper a {
-.minicard-grid {
+     text-decoration: none !important;
-     display: grid;
+     color: inherit !important;
-    gap: 12px;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    grid-auto-rows: 60px;
-     margin: 0 0 24px 0;
 }
-/* MiniCard individuelle */
+/* Card principale */
 .minicard {
      position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    font-weight: 600;
-    font-size: 0.95rem;
-    overflow: hidden;
-    transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
+    justify-content: center;
      min-width: 180px;
      height: 60px;
-     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+    padding: 0 20px;
-     backdrop-filter: blur(10px);
+    border-radius: 30px;
+     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+     border: 1px solid rgba(255, 255, 255, 0.18);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    box-sizing: border-box;
 }
-.minicard:hover {
+/* Hover natif du lien */
+.minicard-wrapper:hover .minicard,
+.minicard-wrapper a:hover .minicard {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(74, 158, 255, 0.3);
      border-color: rgba(74, 158, 255, 0.4);
-     transform: translateY(-2px);
+     background: linear-gradient(135deg, rgba(74, 158, 255, 0.2) 0%, rgba(74, 158, 255, 0.1) 100%);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
@@ Ligne 43 : / Ligne 44 : @@
      height: 100%;
      z-index: 0;
+    display: block;
 }
@@ Ligne 49 : / Ligne 51 : @@
      height: 100%;
      object-fit: cover;
-     opacity: 0.4;
+     filter: blur(8px) brightness(0.4);
 }
-.minicard-overlay {
+.minicard-background .thumbinner {
-     position: absolute;
+     display: none;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
 }
-/* Conteneur de lien */
+.minicard-background .image {
-.minicard-link {
+     display: block;
-     position: relative;
-    z-index: 1;
      width: 100%;
      height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
 }
-/* Liens internes */
+/* Overlay */
-.minicard-link a:not(.external) {
+.minicard-overlay {
-     color: #ffffff !important;
+     position: absolute;
-    text-decoration: none !important;
+     top: 0;
-     text-shadow:
+     left: 0;
-        -1px -1px 4px rgba(0, 0, 0, 0.8),
-px 1px 4px rgba(0, 0, 0, 0.8),
-0 8px rgba(0, 0, 0, 0.6);
-     transition: all 0.3s ease;
      width: 100%;
      height: 100%;
-     display: flex;
+     background: rgba(0, 0, 0, 0.6);
-     align-items: center;
+     pointer-events: none;
+    display: block;
 }
-/* Liens externes */
+/* Texte */
-.minicard-link a.external {
-    color: #ffffff !important;
-    text-decoration: none !important;
-    text-shadow:
-        -1px -1px 4px rgba(0, 0, 0, 0.8),
-px 1px 4px rgba(0, 0, 0, 0.8),
-0 8px rgba(0, 0, 0, 0.6);
-    transition: all 0.3s ease;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-/* Masquer l'icône de lien externe par défaut de MediaWiki */
-.minicard-link a.external::after {
-    display: none !important;
-}
-/* Hover sur tous les liens */
-.minicard:hover .minicard-link a {
-    padding-left: 20px;
-    text-shadow:
-        -1px -1px 6px rgba(0, 0, 0, 0.9),
-px 1px 6px rgba(0, 0, 0, 0.9),
-0 12px rgba(74, 158, 255, 0.5);
-}
-/* Texte sans lien */
 .minicard-text {
      position: relative;
-     z-index: 1;
+     z-index: 2;
-     padding: 0 16px;
+     color: #fff;
-     width: 100%;
+     font-weight: 600;
-    height: 100%;
+     font-size: 0.95rem;
-    display: flex;
+     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-     align-items: center;
+    white-space: nowrap;
-    color: #ffffff !important;
+    overflow: hidden;
-     text-shadow:
+    text-overflow: ellipsis;
-        -1px -1px 4px rgba(0, 0, 0, 0.8),
+    max-width: 100%;
-px 1px 4px rgba(0, 0, 0, 0.8),
-0 8px rgba(0, 0, 0, 0.6);
 }
@@ Ligne 137 : / Ligne 95 : @@
 }
-.minicard.minicard--no-image:hover {
+.minicard-wrapper:hover .minicard.minicard--no-image,
+.minicard-wrapper a:hover .minicard.minicard--no-image {
      background: linear-gradient(135deg, rgba(74, 158, 255, 0.15) 0%, rgba(74, 158, 255, 0.05) 100%);
 }
-/* Responsive */
+/* Grid */
-@media (max-width: 768px) {
+.minicard-grid {
-     .minicard-grid {
+     display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-        grid-auto-rows: 52px;
+    grid-auto-rows: 60px;
-        gap: 8px;
+    gap: 12px;
-     }
+     margin: 1rem 0;
+}
-    .minicard {
-        font-size: 0.85rem;
+/* Fix pour les liens MediaWiki */
-        min-width: 140px;
+.minicard-wrapper .mw-file-description {
-        height: 52px;
+    display: none !important;
-    }
-    .minicard-link {
-        padding: 0 12px;
-    }
 }
-@media (max-width: 480px) {
+.minicard-wrapper .external,
-    .minicard-grid {
+.minicard-wrapper a.external {
-        grid-template-columns: repeat(2, 1fr);
+    background: none !important;
-    }
+    padding-right: 0 !important;
+}
-    .minicard {
-        min-width: 0;
+/* Icône lien externe cachée */
-    }
+.minicard-wrapper .external::after {
+    display: none !important;
 }