« 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 lien */
+/* =============================================================================
-.minicard-wrapper {
+   MINICARD - VERSION BOUTONS MODERNES
-     display: inline-flex;
+   ============================================================================= */
-     text-decoration: none;
+/* Lien wrapper */
+.minicard-link {
+     display: inline-block;
+     text-decoration: none !important;
      color: inherit;
 }
-.minicard-wrapper:hover {
+/* Bouton principal */
-    text-decoration: none;
+.minicard-button {
-}
-/* Card principale */
-.minicard {
-    position: relative;
      display: inline-flex;
      align-items: center;
-     justify-content: center;
+     gap: 8px;
-     min-width: 180px;
+     padding: 10px 20px;
-     height: 60px;
+     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-     padding: 0 20px;
+     color: #fff;
-     border-radius: 30px;
+     font-weight: 600;
-     background: rgba(255, 255, 255, 0.08);
+     font-size: 0.95rem;
-     border: 1px solid rgba(255, 255, 255, 0.2);
+     border-radius: 8px;
-     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      transition: all 0.3s ease;
-     overflow: hidden;
+     cursor: pointer;
-     box-sizing: border-box;
+     border: none;
 }
 /* Hover */
-.minicard-wrapper:hover .minicard {
+.minicard-link:hover .minicard-button {
      transform: translateY(-2px);
-     box-shadow: 0 8px 24px rgba(74, 158, 255, 0.4);
+     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-     background: rgba(74, 158, 255, 0.15);
+     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-    border-color: rgba(74, 158, 255, 0.5);
 }
-/* Image de fond */
+/* Active (clic) */
-.minicard-background {
+.minicard-link:active .minicard-button {
-     position: absolute;
+     transform: translateY(0);
-    top: 0;
+     box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
-     left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
 }
-.minicard-background img {
+/* Icône */
-     width: 100%;
+.minicard-icon {
-     height: 100%;
+     display: inline-flex;
-     object-fit: cover;
+     align-items: center;
-     filter: blur(8px) brightness(0.4);
+     justify-content: center;
+     width: 20px;
+    height: 20px;
+    flex-shrink: 0;
 }
-.minicard-background .thumbinner,
+.minicard-icon img {
-.minicard-background .thumbcaption {
+    width: 20px;
-     display: none;
+    height: 20px;
+    object-fit: contain;
+     filter: brightness(0) invert(1);
 }
-/* Overlay */
+.minicard-icon .thumbinner,
-.minicard-overlay {
+.minicard-icon .thumbcaption {
-     position: absolute;
+     display: none;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
 }
 /* Texte */
 .minicard-text {
-    position: relative;
-    z-index: 2;
-    color: #fff;
-    font-weight: 600;
-    font-size: 0.95rem;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      white-space: nowrap;
+    line-height: 1;
 }
-/* Sans image */
+/* Masquer icône lien externe */
-.minicard--no-image {
+.minicard-link.external::after {
-    background: rgba(255, 255, 255, 0.05);
+     display: none !important;
-}
-.minicard-wrapper:hover .minicard--no-image {
-     background: rgba(74, 158, 255, 0.12);
 }
-/* Grid */
+/* Grid layout */
 .minicard-grid {
-     display: grid;
+     display: flex;
-     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+     flex-wrap: wrap;
      gap: 12px;
      margin: 1rem 0;
 }
-/* Cacher icône lien externe */
+/* Variantes de couleurs */
-.minicard-wrapper.external::after {
+.minicard-button.blue {
-     display: none !important;
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
+}
+.minicard-link:hover .minicard-button.blue {
+    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
+}
+.minicard-button.green {
+    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 {
+    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.6);
 }