« Modèle:Card/styles.css » : différence entre les versions
De Nefald
Autres actions
Annulation des modifications 3496 de Hiob (discussion) Balise : Annulation |
Aucun résumé des modifications |
||
| 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 | |||
============================================================================= */ | ============================================================================= */ | ||
| Ligne 352 : | Ligne 282 : | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 300px; | 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 368 : | Ligne 301 : | ||
.home-sidebar { | .home-sidebar { | ||
position: sticky; | position: sticky; | ||
top: | top: 20px; | ||
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; | |||
} | } | ||
.home- | /* Supprimer les marges des divs conteneurs */ | ||
.home-main-content > div, | |||
.home-sidebar > div { | |||
margin: 0 !important; | |||
} | } | ||
.home- | /* Forcer la suppression des marges inline */ | ||
.home-layout-with-sidebar [style*="margin"], | |||
.home-main-content [style*="margin"], | |||
.home-sidebar [style*="margin"] { | |||
margin: 0 !important; | |||
} | } | ||
| Ligne 394 : | Ligne 345 : | ||
============================================================================= */ | ============================================================================= */ | ||
/* | /* Classe optionnelle pour cards encore plus compactes */ | ||
.home-card-compact .home-card__content { | .home-card-compact .home-card__content { | ||
padding: | padding: 12px !important; | ||
} | } | ||
.home-card-compact .home-card__image { | .home-card-compact .home-card__image { | ||
height: | height: 160px !important; | ||
margin-bottom: | margin-bottom: 8px !important; | ||
} | } | ||
.home-card-compact .home-card__title { | .home-card-compact .home-card__title { | ||
margin-bottom: | margin-bottom: 6px !important; | ||
font-size: 1rem !important; | font-size: 1.1rem !important; | ||
} | } | ||
/* ============================================================================= | /* ============================================================================= | ||
RESPONSIVE | RESPONSIVE - Adaptation mobile | ||
============================================================================= */ | ============================================================================= */ | ||
@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; | order: -1; /* Sidebar en haut sur tablette */ | ||
gap: | } | ||
} | |||
@media (max-width: 768px) { | |||
/* Toutes les grilles → 1 colonne */ | |||
.home-cards-grid, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
grid-template-columns: 1fr; | |||
gap: 12px; | |||
} | } | ||
.home-main-content { | .home-layout-with-sidebar, | ||
gap: | .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: | @media (max-width: 480px) { | ||
.home-cards-grid-2 | /* Mobile très petit → espacement minimal */ | ||
.home-cards-grid, | |||
gap: | .home-cards-grid-1, | ||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
gap: 8px; | |||
} | } | ||
.home-layout-with-sidebar, | .home-layout-with-sidebar, | ||
.home-main-content { | .home-main-content, | ||
gap: | .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; | |||
} | } | ||
*/ | |||