« MediaWiki:Common.css » : différence entre les versions
aucun résumé des modifications
Aucun résumé des modifications Balises : Modification par mobile Modification par le web mobile |
Aucun résumé des modifications |
||
| Ligne 2 142 : | Ligne 2 142 : | ||
position: static !important; | position: static !important; | ||
} | } | ||
} | |||
/* ============================================================ | |||
INFOBOX EFFETMAGIQUE — Style épuré | |||
Inspiré de l'infobox Arcane Majeur | |||
À ajouter dans MediaWiki:Common.css | |||
============================================================ */ | |||
/* --- Conteneur principal --- */ | |||
.infobox-effetmagique { | |||
float: right; | |||
width: 280px; | |||
margin: 0 0 12px 16px; | |||
padding: 0; | |||
background: #ffffff; | |||
border: 1px solid #e2e5ea; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); | |||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |||
font-size: 13px; | |||
line-height: 1.5; | |||
color: #1e293b; | |||
} | |||
/* Reset des marges parasites insérées par MediaWiki */ | |||
.infobox-effetmagique p { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Reset de la table infobox_v2 interne */ | |||
.infobox-effetmagique .infobox_v2 { | |||
border: none !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
} | |||
/* --- En-tête principal (titre de l'effet) --- */ | |||
.infobox-effetmagique .infobox_v2 tr:first-child > td[colspan="2"] { | |||
background: linear-gradient(135deg, #2e3558 0%, #4a4280 60%, #5548a0 100%) !important; | |||
padding: 16px 20px !important; | |||
text-align: center; | |||
font-size: 16px; | |||
font-weight: 700; | |||
line-height: 1.3; | |||
} | |||
/* Texte blanc dans l'en-tête */ | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 tr:first-child > td[colspan="2"], | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 tr:first-child > td[colspan="2"] b, | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 tr:first-child > td[colspan="2"] i, | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 tr:first-child > td[colspan="2"] span { | |||
color: #ffffff !important; | |||
} | |||
/* --- Image --- */ | |||
.infobox-effetmagique .infobox_v2 td[style*="text-align:center"] img { | |||
border-radius: 6px; | |||
margin: 4px 0; | |||
} | |||
/* --- Bandeau de section (Identité, Sources) --- */ | |||
.infobox-effetmagique .infobox_v2 td[colspan="2"][style*="background-color: #E8E8E8"] { | |||
background-color: #f8fafc !important; | |||
border-top: 2px solid #f0f1f3 !important; | |||
border-bottom: 1px solid #e2e5ea !important; | |||
padding: 8px 20px !important; | |||
font-size: 10px !important; | |||
font-weight: 700 !important; | |||
letter-spacing: 2px !important; | |||
text-transform: uppercase !important; | |||
color: #94a3b8 !important; | |||
} | |||
/* --- Bandeaux d'édition (en-têtes colorés NL, N4, NR, N2, N1) --- | |||
Ciblés via les classes infobox-sc-* définies dans les sous-modèles */ | |||
/* --- Champs clé/valeur --- */ | |||
.infobox-effetmagique .infobox_v2 th { | |||
padding: 5px 20px !important; | |||
font-size: 12px !important; | |||
font-weight: 400 !important; | |||
color: #64748b !important; | |||
vertical-align: top; | |||
border-bottom: 1px solid #f1f5f9 !important; | |||
background: transparent !important; | |||
} | |||
.infobox-effetmagique .infobox_v2 td { | |||
padding: 5px 20px !important; | |||
font-size: 13px !important; | |||
color: #1e293b !important; | |||
vertical-align: top; | |||
border-bottom: 1px solid #f1f5f9 !important; | |||
} | |||
/* Liens dans les valeurs */ | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 td a:not(.new):not(.external) { | |||
color: #1e293b !important; | |||
border-bottom: none !important; | |||
} | |||
body:not(.page-Accueil) .mw-body-content .infobox-effetmagique .infobox_v2 td a:not(.new):not(.external):hover { | |||
color: #6366f1 !important; | |||
} | |||
/* --- Responsive : pleine largeur en mobile --- */ | |||
@media screen and (max-width: 768px) { | |||
.mw-parser-output .infobox-effetmagique { | |||
float: none !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 0 1em 0 !important; | |||
} | |||
} | } | ||