« Modèle:Card/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| (4 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 240 : | Ligne 240 : | ||
color: var(--color-progressive, #4d90fe); | color: var(--color-progressive, #4d90fe); | ||
} | } | ||
/* ============================================================================= | /* ============================================================================= | ||
GRILLES - Layouts multiples | GRILLES - Layouts multiples AVEC ESPACEMENTS RÉDUITS | ||
============================================================================= */ | ============================================================================= */ | ||
| Ligne 250 : | Ligne 249 : | ||
.home-cards-grid-3 { | .home-cards-grid-3 { | ||
display: grid; | display: grid; | ||
gap: 24px | gap: 12px; /* ← RÉDUIT de 24px à 12px */ | ||
margin: | margin: 0 !important; /* ← SUPPRIMÉ margin 24px */ | ||
width: 100%; | width: 100%; | ||
} | } | ||
| Ligne 277 : | Ligne 276 : | ||
/* ============================================================================= | /* ============================================================================= | ||
LAYOUT AVEC SIDEBAR - ESPACEMENTS OPTIMISÉS | |||
LAYOUT AVEC SIDEBAR | |||
============================================================================= */ | ============================================================================= */ | ||
.home-layout-with-sidebar { | .home-layout-with-sidebar { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr | grid-template-columns: 1fr 300px; | ||
gap: | gap: 0 16px; /* ← 0 vertical, 16px horizontal */ | ||
margin: | margin: 0 !important; | ||
padding: 0 !important; | |||
width: 100%; | width: 100%; | ||
align-items: start; | align-items: start; | ||
| Ligne 362 : | Ligne 293 : | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 12px; /* ← Espacement entre sections */ | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | } | ||
| Ligne 371 : | Ligne 304 : | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 12px; | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* Override des grilles dans le layout sidebar */ | |||
.home-layout-with-sidebar .home-cards-grid-1, | |||
.home-layout-with-sidebar .home-cards-grid-2, | |||
.home-layout-with-sidebar .home-cards-grid-3 { | |||
gap: 12px; | |||
margin: 0 !important; | |||
} | } | ||
/* | /* ============================================================================= | ||
.home- | SUPPRESSION DES MARGES MEDIAWIKI PAR DÉFAUT | ||
.home- | ============================================================================= */ | ||
/* Supprimer les marges des éléments générés par MediaWiki */ | |||
.home-layout-with-sidebar p, | |||
.home-main-content p, | |||
.home-sidebar p { | |||
margin: 0 !important; | |||
} | |||
/* Supprimer les marges des divs conteneurs */ | |||
.home-main-content > div, | |||
.home-sidebar > div { | |||
margin: 0 !important; | |||
} | |||
/* Forcer la suppression des marges inline */ | |||
.home-layout-with-sidebar [style*="margin"], | |||
.home-main-content [style*="margin"], | |||
.home-sidebar [style*="margin"] { | |||
margin: 0 !important; | |||
} | |||
/* ============================================================================= | |||
RÉDUCTION DES MARGES INTERNES DES CARDS | |||
============================================================================= */ | |||
/* Classe optionnelle pour cards encore plus compactes */ | |||
.home-card-compact .home-card__content { | |||
padding: 12px !important; | |||
} | } | ||
.home- | .home-card-compact .home-card__image { | ||
height: 160px !important; | |||
margin-bottom: 8px !important; | |||
} | } | ||
.home- | .home-card-compact .home-card__title { | ||
margin-bottom: 6px !important; | |||
font-size: 1.1rem !important; | |||
} | } | ||
| Ligne 395 : | Ligne 365 : | ||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
/* Grille 3 colonnes → 2 colonnes */ | |||
.home-cards-grid-3 { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
/* Layout sidebar → empilé */ | |||
.home-layout-with-sidebar { | .home-layout-with-sidebar { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: | gap: 12px; | ||
} | } | ||
.home-sidebar { | .home-sidebar { | ||
position: static; | position: static; | ||
order: -1; /* Sidebar en haut sur | order: -1; /* Sidebar en haut sur tablette */ | ||
} | } | ||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.home-cards-grid-2 { | /* Toutes les grilles → 1 colonne */ | ||
.home-cards-grid, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: | gap: 12px; | ||
} | |||
.home-layout-with-sidebar, | |||
.home-main-content, | |||
.home-sidebar { | |||
gap: 12px; | |||
} | } | ||
.home-card__image { | |||
height: 200px; | |||
} | |||
.home-card__content { | |||
padding: 16px; | |||
} | |||
.home-card__title { | |||
font-size: 1.25rem; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
/* Mobile très petit → espacement minimal */ | |||
.home-cards-grid, | |||
.home-cards-grid-1, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
gap: 8px; | |||
} | |||
.home-layout-with-sidebar, | |||
.home-main-content, | |||
.home-sidebar { | |||
gap: 8px; | |||
} | |||
.home-card__image { | |||
height: 180px; | |||
} | |||
.home-card__content { | |||
padding: 12px; | |||
} | |||
} | |||
/* ============================================================================= | |||
NETTOYAGE FINAL - FORCE TOUT À 0 SI PROBLÈME PERSISTE | |||
============================================================================= */ | |||
/* Décommenter si l'espacement persiste malgré tout */ | |||
/* | |||
.home-layout-with-sidebar, | |||
.home-layout-with-sidebar *, | |||
.home-main-content, | |||
.home-main-content *, | |||
.home-sidebar, | |||
.home-sidebar * { | |||
margin-top: 0 !important; | |||
margin-bottom: 0 !important; | |||
} | } | ||
*/ | |||