« Modèle:Card/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « →============================================================================= HOME CARD COMPONENT Composant de carte stylisé pour affichage de contenu avec image Compatible dark/light mode avec Citizen skin ============================================================================= : /* ----------------------------------------------------------------------------- STRUCTURE DE BASE ---------------------------------------------------------... » |
Aucun résumé des modifications |
||
| (6 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 239 : | Ligne 239 : | ||
.skin-theme-clientpref-night .home-card__text a { | .skin-theme-clientpref-night .home-card__text a { | ||
color: var(--color-progressive, #4d90fe); | color: var(--color-progressive, #4d90fe); | ||
} | |||
/* ============================================================================= | |||
GRILLES - Layouts multiples AVEC ESPACEMENTS RÉDUITS | |||
============================================================================= */ | |||
.home-cards-grid, | |||
.home-cards-grid-1, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
display: grid; | |||
gap: 12px; /* ← RÉDUIT de 24px à 12px */ | |||
margin: 0 !important; /* ← SUPPRIMÉ margin 24px */ | |||
width: 100%; | |||
} | |||
/* Auto-responsive (défaut) */ | |||
.home-cards-grid { | |||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |||
} | |||
/* Layouts fixes */ | |||
.home-cards-grid-1 { | |||
grid-template-columns: 1fr; | |||
max-width: 600px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.home-cards-grid-2 { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
.home-cards-grid-3 { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | } | ||
/* ============================================================================= | /* ============================================================================= | ||
LAYOUT AVEC SIDEBAR - ESPACEMENTS OPTIMISÉS | |||
============================================================================= */ | ============================================================================= */ | ||
.home- | .home-layout-with-sidebar { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 1fr 300px; | ||
gap: | gap: 0 16px; /* ← 0 vertical, 16px horizontal */ | ||
margin: | margin: 0 !important; | ||
padding: 0 !important; | |||
width: 100%; | |||
align-items: start; | |||
} | |||
/* Colonne principale (gauche) */ | |||
.home-main-content { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 12px; /* ← Espacement entre sections */ | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* Sidebar (droite) */ | |||
.home-sidebar { | |||
position: sticky; | |||
top: 20px; | |||
display: flex; | |||
flex-direction: column; | |||
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; | |||
} | |||
/* ============================================================================= | |||
SUPPRESSION DES MARGES MEDIAWIKI PAR DÉFAUT | |||
============================================================================= */ | |||
/* 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-card-compact .home-card__image { | |||
height: 160px !important; | |||
margin-bottom: 8px !important; | |||
} | |||
.home-card-compact .home-card__title { | |||
margin-bottom: 6px !important; | |||
font-size: 1.1rem !important; | |||
} | } | ||
/* ============================================================================= | /* ============================================================================= | ||
RESPONSIVE | RESPONSIVE - Adaptation mobile | ||
============================================================================= */ | ============================================================================= */ | ||
/* | @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 { | |||
grid-template-columns: 1fr; | |||
gap: 12px; | |||
} | |||
.home-sidebar { | |||
position: static; | |||
order: -1; /* Sidebar en haut sur tablette */ | |||
} | |||
} | |||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.home-cards-grid { | /* 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; | |||
} | } | ||
| Ligne 277 : | Ligne 410 : | ||
} | } | ||
@media (max-width: 480px) { | @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 { | .home-card__image { | ||
height: 180px; | 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; | |||
} | } | ||
*/ | |||