« Modèle:Header/styles.css » : différence entre les versions
De Nefald
Autres actions
mAucun résumé des modifications Balise : Révoqué |
Annulation des modifications 3549 de Hiob (discussion) Balise : Annulation |
||
| (10 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* ============================================================================= | /* ============================================================================= | ||
HEADER COMPONENT - | HEADER COMPONENT | ||
Composant d'en-tête stylisé pour affichage de contenu avec image | |||
Compatible dark/light mode avec Citizen skin | |||
============================================================================= */ | ============================================================================= */ | ||
/* ----------------------------------------------------------------------------- | |||
STRUCTURE DE BASE | |||
----------------------------------------------------------------------------- */ | |||
.header-card { | |||
/* Layout */ | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
width: 100%; | |||
overflow: hidden; | |||
/* Style */ | /* Style */ | ||
background: var(--color-surface-1 | background: var(--color-surface-1); | ||
border- | border: 1px solid var(--border-color-base, rgba(0, 0, 0, 0.1)); | ||
border-radius: 12px; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |||
. | /* Animation */ | ||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; | |||
} | } | ||
. | .header-card:hover { | ||
box-shadow: 0 | transform: translateY(-4px); | ||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |||
border-color: var(--color-progressive, #36c); | |||
} | } | ||
/* Dark mode */ | /* Dark mode - Card base */ | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .header-card { | ||
border-color: var(--border-color-subtle, rgba(255, 255, 255, 0.1)); | |||
box-shadow: 0 2px | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .header-card:hover { | ||
box-shadow: 0 | box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); | ||
} | } | ||
/* | /* ----------------------------------------------------------------------------- | ||
IMAGE - Section supérieure PLEINE LARGEUR | |||
----------------------------------------------------------------------------- */ | |||
. | .header-card__image { | ||
position: relative; | |||
width: 100%; | |||
height: 250px; | |||
flex-shrink: 0; | |||
overflow: hidden; | |||
margin: 0; | |||
padding: 0; | |||
background: var(--color-surface-2); | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | |||
width: 100%; | } | ||
max-width: | |||
/* Forcer TOUS les éléments MediaWiki à être en pleine largeur */ | |||
.header-card__image * { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: none !important; | |||
background: transparent !important; | |||
} | |||
.header-card__image .thumb, | |||
.header-card__image .thumbinner, | |||
.header-card__image .thumbcaption, | |||
.header-card__image .magnify { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: none !important; | |||
} | |||
/* L'image elle-même */ | |||
.header-card__image img { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: none !important; | |||
max-height: none !important; | |||
object-fit: cover !important; | |||
transition: transform 0.3s ease; | |||
} | |||
.header-card:hover .header-card__image img { | |||
transform: scale(1.05); | |||
} | |||
/* Liens autour de l'image */ | |||
.header-card__image a { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
line-height: 0 !important; | |||
} | |||
/* Cacher les légendes et icônes de zoom */ | |||
.header-card__image .thumbcaption, | |||
.header-card__image .magnify { | |||
display: none !important; | |||
} | } | ||
/* | /* ----------------------------------------------------------------------------- | ||
BADGE - Overlay sur l'image | |||
----------------------------------------------------------------------------- */ | |||
.header-card__badge { | |||
/* Position */ | |||
position: absolute; | |||
top: 12px; | |||
right: 12px; | |||
z-index: 10; | |||
/* Style */ | |||
background: var(--color-progressive, #36c); | |||
color: #fff; | |||
padding: 6px 12px; | |||
border-radius: 6px; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); | |||
/* | /* Typography */ | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
font-weight: 600; | font-weight: 600; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0.5px; | letter-spacing: 0.5px; | ||
} | } | ||
.skin-theme-clientpref-night . | /* Dark mode - Badge */ | ||
.skin-theme-clientpref-night .header-card__badge { | |||
background: var(--color-progressive, #4d90fe); | background: var(--color-progressive, #4d90fe); | ||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); | |||
} | |||
/* ----------------------------------------------------------------------------- | |||
CONTENT - Zone de texte | |||
----------------------------------------------------------------------------- */ | |||
.header-card__content { | |||
/* Layout */ | |||
display: flex; | |||
flex-direction: column; | |||
flex-grow: 1; | |||
gap: 12px; | |||
padding: 24px; | |||
} | } | ||
/* | /* ----------------------------------------------------------------------------- | ||
. | TITLE - Titre principal | ||
font-size: 1. | ----------------------------------------------------------------------------- */ | ||
.header-card__title { | |||
margin: 0; | |||
font-size: 1.5rem; | |||
font-weight: 600; | font-weight: 600; | ||
line-height: 1.3; | line-height: 1.3; | ||
color: var(--color- | color: var(--color-emphasized, #000); | ||
} | } | ||
. | .header-card__title a { | ||
color: | color: inherit; | ||
text-decoration: none; | |||
transition: color 0.2s ease; | |||
} | } | ||
.header-card__title a:hover { | |||
. | color: var(--color-progressive, #36c); | ||
color: var(--color- | |||
} | } | ||
.skin-theme-clientpref-night . | /* Dark mode - Title */ | ||
color: var(--color- | .skin-theme-clientpref-night .header-card__title { | ||
color: var(--color-emphasized, #fff); | |||
} | } | ||
/* | /* ----------------------------------------------------------------------------- | ||
. | SUBTITLE - Sous-titre | ||
font-size: 0. | ----------------------------------------------------------------------------- */ | ||
.header-card__subtitle { | |||
margin: 0; | |||
font-size: 0.95rem; | |||
line-height: 1.5; | line-height: 1.5; | ||
color: var(--color- | color: var(--color-subtle, #666); | ||
} | } | ||
.skin-theme-clientpref-night . | /* Dark mode - Subtitle */ | ||
color: var(--color- | .skin-theme-clientpref-night .header-card__subtitle { | ||
color: var(--color-subtle, #aaa); | |||
} | } | ||
/* | /* ----------------------------------------------------------------------------- | ||
. | TEXT - Corps de texte (supporte wikitext) | ||
----------------------------------------------------------------------------- */ | |||
.header-card__text { | |||
margin: 0; | |||
line-height: 1.6; | |||
flex-grow: 1; | |||
color: var(--color-base, #202122); | |||
} | } | ||
. | /* Dark mode - Text */ | ||
.skin-theme-clientpref-night .header-card__text { | |||
color: var(--color-base, #eee); | |||
} | } | ||
. | /* Paragraphes dans le texte */ | ||
.header-card__text p:first-child { | |||
margin-top: 0; | |||
} | } | ||
. | .header-card__text p:last-child { | ||
margin-bottom: 0; | |||
} | } | ||
. | /* Listes dans le texte */ | ||
.header-card__text ul, | |||
.header-card__text ol { | |||
margin: 8px 0; | |||
padding-left: 20px; | |||
} | } | ||
/* Liens dans le texte */ | |||
. | .header-card__text a { | ||
color: var(--color-progressive | color: var(--color-progressive, #36c); | ||
text-decoration: none; | |||
} | } | ||
.header-card__text a:hover { | |||
text-decoration: underline; | |||
} | } | ||
/* Dark mode - Links */ | |||
.skin-theme-clientpref-night .header-card__text a { | |||
color: var(--color-progressive, #4d90fe); | |||
} | } | ||