« MediaWiki:Common.css » : différence entre les versions
aucun résumé des modifications
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 3 339 : | Ligne 3 339 : | ||
.nph-hero-stats strong { | .nph-hero-stats strong { | ||
color: #E8D5A3 !important; | color: #E8D5A3 !important; | ||
} | |||
/* ============================================================ | |||
INFOBOX ARCANE MAJEUR | |||
À ajouter dans MediaWiki:Common.css | |||
============================================================ */ | |||
/* --- Conteneur principal --- */ | |||
.infobox-arcane-majeur { | |||
float: right; | |||
width: 320px; | |||
margin: 0 0 12px 16px; | |||
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; | |||
} | |||
/* --- En-tête --- */ | |||
.infobox-arcane-majeur .iam-header { | |||
background: linear-gradient(135deg, #1e1b2e 0%, #2d2845 100%); | |||
padding: 20px 20px 16px; | |||
display: flex; | |||
align-items: center; | |||
gap: 14px; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.infobox-arcane-majeur .iam-header-glow { | |||
position: absolute; | |||
top: -30px; | |||
right: -30px; | |||
width: 120px; | |||
height: 120px; | |||
border-radius: 50%; | |||
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%); | |||
pointer-events: none; | |||
} | |||
.infobox-arcane-majeur .iam-header-badge { | |||
width: 48px; | |||
height: 48px; | |||
border-radius: 10px; | |||
flex-shrink: 0; | |||
background: rgba(99,102,241,0.1); | |||
border: 1.5px solid rgba(139,132,205,0.3); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 20px; | |||
font-weight: 700; | |||
color: rgba(200,195,240,0.65); | |||
letter-spacing: 1px; | |||
} | |||
.infobox-arcane-majeur .iam-header-surtitre { | |||
font-size: 10px; | |||
font-weight: 600; | |||
letter-spacing: 3px; | |||
text-transform: uppercase; | |||
color: rgba(255,255,255,0.4); | |||
margin-bottom: 4px; | |||
} | |||
.infobox-arcane-majeur .iam-header-nom { | |||
font-size: 20px; | |||
font-weight: 700; | |||
color: #ffffff; | |||
line-height: 1.2; | |||
} | |||
/* --- Image --- */ | |||
.infobox-arcane-majeur .iam-image { | |||
margin: 16px; | |||
text-align: center; | |||
background: #f4f5f7; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
position: relative; | |||
} | |||
.infobox-arcane-majeur .iam-image img { | |||
display: block; | |||
margin: 0 auto; | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.infobox-arcane-majeur .iam-image-legende { | |||
padding: 8px 12px; | |||
font-size: 11px; | |||
color: #6b7280; | |||
text-align: center; | |||
background: linear-gradient(transparent, rgba(244,245,247,0.95)); | |||
} | |||
/* --- Champs clé/valeur --- */ | |||
.infobox-arcane-majeur .iam-fields { | |||
padding: 0 20px 12px; | |||
} | |||
.infobox-arcane-majeur .iam-row { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 7px 0; | |||
border-bottom: 1px solid #f1f5f9; | |||
font-size: 13px; | |||
} | |||
.infobox-arcane-majeur .iam-label { | |||
color: #64748b; | |||
font-weight: 500; | |||
flex-shrink: 0; | |||
} | |||
.infobox-arcane-majeur .iam-row .iam-value { | |||
color: #1e293b; | |||
text-align: right; | |||
max-width: 55%; | |||
} | |||
/* Liens dans les valeurs */ | |||
.infobox-arcane-majeur .iam-row .iam-value a { | |||
color: #1e293b; | |||
} | |||
.infobox-arcane-majeur .iam-row .iam-value a:hover { | |||
color: #6366f1; | |||
} | |||
/* --- Stellaire --- */ | |||
.infobox-arcane-majeur .iam-stellaire { | |||
padding: 8px 20px 12px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
border-bottom: 1px solid #f1f5f9; | |||
} | |||
.infobox-arcane-majeur .iam-stellaire .iam-label { | |||
font-size: 13px; | |||
color: #64748b; | |||
font-weight: 500; | |||
} | |||
.infobox-arcane-majeur .iam-stellaire-img { | |||
width: 48px; | |||
height: 48px; | |||
background: #f4f5f7; | |||
border-radius: 4px; | |||
border: 1px solid #e5e7eb; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
} | |||
.infobox-arcane-majeur .iam-stellaire-img img { | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
/* --- Relations --- */ | |||
.infobox-arcane-majeur .iam-relations { | |||
padding: 14px 20px 18px; | |||
border-top: 2px solid #f0f1f3; | |||
} | |||
.infobox-arcane-majeur .iam-relations-titre { | |||
font-size: 10px; | |||
font-weight: 700; | |||
letter-spacing: 2px; | |||
text-transform: uppercase; | |||
color: #94a3b8; | |||
margin-bottom: 12px; | |||
} | |||
.infobox-arcane-majeur .iam-rel-group { | |||
margin-bottom: 12px; | |||
} | |||
.infobox-arcane-majeur .iam-rel-header { | |||
display: flex; | |||
align-items: center; | |||
gap: 6px; | |||
margin-bottom: 4px; | |||
} | |||
.infobox-arcane-majeur .iam-rel-dot { | |||
display: inline-block; | |||
width: 8px; | |||
height: 8px; | |||
border-radius: 50%; | |||
flex-shrink: 0; | |||
} | |||
.infobox-arcane-majeur .iam-rel-label { | |||
font-size: 11px; | |||
font-weight: 600; | |||
color: #4b5563; | |||
text-transform: uppercase; | |||
letter-spacing: 1px; | |||
} | |||
.infobox-arcane-majeur .iam-rel-tags { | |||
padding-left: 14px; | |||
font-size: 12px; | |||
line-height: 2; | |||
color: #374151; | |||
} | |||
/* Les liens dans les tags de relations */ | |||
.infobox-arcane-majeur .iam-rel-tags a { | |||
display: inline-block; | |||
padding: 2px 8px; | |||
border-radius: 4px; | |||
line-height: 1.6; | |||
text-decoration: none; | |||
margin: 0 3px 3px 0; | |||
} | |||
/* Conjonction — violet magique */ | |||
.infobox-arcane-majeur .iam-rel-conjonction .iam-rel-dot { | |||
background: #7B2D8E; | |||
} | |||
.infobox-arcane-majeur .iam-rel-conjonction .iam-rel-tags a { | |||
background: rgba(123, 45, 142, 0.07); | |||
border: 1px solid rgba(123, 45, 142, 0.18); | |||
color: #374151; | |||
} | |||
.infobox-arcane-majeur .iam-rel-conjonction .iam-rel-tags a:hover { | |||
background: rgba(123, 45, 142, 0.15); | |||
color: #7B2D8E; | |||
} | |||
/* Accord — vert */ | |||
.infobox-arcane-majeur .iam-rel-accord .iam-rel-dot { | |||
background: #22c55e; | |||
} | |||
.infobox-arcane-majeur .iam-rel-accord .iam-rel-tags a { | |||
background: rgba(34, 197, 94, 0.07); | |||
border: 1px solid rgba(34, 197, 94, 0.18); | |||
color: #374151; | |||
} | |||
.infobox-arcane-majeur .iam-rel-accord .iam-rel-tags a:hover { | |||
background: rgba(34, 197, 94, 0.15); | |||
color: #16a34a; | |||
} | |||
/* Neutre — gris ardoise */ | |||
.infobox-arcane-majeur .iam-rel-neutre .iam-rel-dot { | |||
background: #94a3b8; | |||
} | |||
.infobox-arcane-majeur .iam-rel-neutre .iam-rel-tags a { | |||
background: rgba(148, 163, 184, 0.1); | |||
border: 1px solid rgba(148, 163, 184, 0.2); | |||
color: #374151; | |||
} | |||
.infobox-arcane-majeur .iam-rel-neutre .iam-rel-tags a:hover { | |||
background: rgba(148, 163, 184, 0.2); | |||
color: #475569; | |||
} | |||
/* Désaccord — ambre */ | |||
.infobox-arcane-majeur .iam-rel-desaccord .iam-rel-dot { | |||
background: #f59e0b; | |||
} | |||
.infobox-arcane-majeur .iam-rel-desaccord .iam-rel-tags a { | |||
background: rgba(245, 158, 11, 0.07); | |||
border: 1px solid rgba(245, 158, 11, 0.18); | |||
color: #374151; | |||
} | |||
.infobox-arcane-majeur .iam-rel-desaccord .iam-rel-tags a:hover { | |||
background: rgba(245, 158, 11, 0.15); | |||
color: #d97706; | |||
} | |||
/* Opposé — rouge */ | |||
.infobox-arcane-majeur .iam-rel-oppose .iam-rel-dot { | |||
background: #ef4444; | |||
} | |||
.infobox-arcane-majeur .iam-rel-oppose .iam-rel-tags a { | |||
background: rgba(239, 68, 68, 0.07); | |||
border: 1px solid rgba(239, 68, 68, 0.18); | |||
color: #374151; | |||
} | |||
.infobox-arcane-majeur .iam-rel-oppose .iam-rel-tags a:hover { | |||
background: rgba(239, 68, 68, 0.15); | |||
color: #dc2626; | |||
} | |||
/* --- Responsive : écrans étroits --- */ | |||
@media (max-width: 720px) { | |||
.infobox-arcane-majeur { | |||
float: none; | |||
width: 100%; | |||
max-width: 360px; | |||
margin: 0 auto 16px; | |||
} | |||
} | } | ||