« MediaWiki:Common.css » : différence entre les versions
aucun résumé des modifications
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 782 : | Ligne 782 : | ||
body.page-Accueil #firstHeading { | body.page-Accueil #firstHeading { | ||
display: none; | display: none; | ||
} | |||
/* ============================================================ | |||
NEPHILIM LÉGENDE — CSS tableau des Incarnations | |||
Classe : neph_table_NL | |||
À copier dans MediaWiki:Common.css | |||
Charte NL : Pourpre sombre #574B6B / Parchemin mauve #E3DEE8 | |||
Polices : Cinzel (titres), EB Garamond (contenu) | |||
============================================================ */ | |||
/* =========================================================== | |||
1. CONTENEUR À DÉFILEMENT HORIZONTAL | |||
USAGE MediaWiki : | |||
<div class="neph-scroll-table"> | |||
{| class="wikitable neph_table_NL" ... | |||
|} | |||
</div> | |||
=========================================================== */ | |||
.neph-scroll-table { | |||
overflow-x: auto; | |||
overflow-y: visible; | |||
-webkit-overflow-scrolling: touch; | |||
max-width: 100%; | |||
margin: 1.5em 0; | |||
border: 2px solid #33302A; | |||
border-radius: 8px; | |||
background: #ffffff; | |||
box-shadow: 0 3px 16px rgba(30, 27, 22, 0.2); | |||
position: relative; | |||
} | |||
/* Scrollbar personnalisée */ | |||
.neph-scroll-table::-webkit-scrollbar { | |||
height: 10px; | |||
} | |||
.neph-scroll-table::-webkit-scrollbar-track { | |||
background: #E3DEE8; | |||
border-radius: 0 0 8px 8px; | |||
} | |||
.neph-scroll-table::-webkit-scrollbar-thumb { | |||
background: #574B6B; | |||
border-radius: 5px; | |||
border: 2px solid #E3DEE8; | |||
} | |||
.neph-scroll-table::-webkit-scrollbar-thumb:hover { | |||
background: #6B5D80; | |||
} | |||
/* =========================================================== | |||
2. STYLE DU TABLEAU PRINCIPAL | |||
=========================================================== */ | |||
.neph_table_NL { | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
background: #ffffff !important; | |||
color: #2A2520 !important; | |||
font-family: 'EB Garamond', Georgia, serif; | |||
font-size: 14px; | |||
font-weight: 500; | |||
line-height: 1.4; | |||
border: none !important; | |||
width: max-content; | |||
min-width: 100%; | |||
} | |||
/* --- Cellules générales --- */ | |||
.neph_table_NL th, | |||
.neph_table_NL td { | |||
border: 1px solid #c8c0d0 !important; | |||
padding: 4px 7px !important; | |||
vertical-align: middle !important; | |||
background: #ffffff !important; | |||
color: #2A2520 !important; | |||
white-space: nowrap; | |||
} | |||
/* --- En-têtes (th) --- */ | |||
.neph_table_NL th { | |||
background: #574B6B !important; | |||
color: #F7F6F2 !important; | |||
font-family: 'Cinzel', serif; | |||
font-weight: 600; | |||
font-size: 0.85em; | |||
letter-spacing: 0.04em; | |||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); | |||
border-color: #473D5B !important; | |||
border-bottom: 2px solid #33302A !important; | |||
} | |||
/* --- Ligne des Ères (première ligne d'en-tête) --- */ | |||
.neph_table_NL tr:first-child th { | |||
background: #574B6B !important; | |||
font-size: 0.88em; | |||
letter-spacing: 0.06em; | |||
padding: 7px 8px !important; | |||
} | |||
/* --- Ligne des Époques (deuxième ligne) --- */ | |||
.neph_table_NL tr:nth-child(2) td, | |||
.neph_table_NL tr:nth-child(2) th { | |||
background: #E3DEE8 !important; | |||
color: #574B6B !important; | |||
font-family: 'Crimson Text', serif; | |||
font-size: 0.82em; | |||
font-weight: 600; | |||
text-shadow: none; | |||
border-bottom: 2px solid #574B6B !important; | |||
} | |||
/* =========================================================== | |||
3. COLONNES FIXES — classes explicites | |||
Utiliser class="neph-sticky-1" sur les cellules de la 1ère | |||
colonne et class="neph-sticky-2" sur celles de la 2ème. | |||
Ceci évite les bugs liés au rowspan avec :first-child. | |||
MediaWiki : | |||
| class="neph-sticky-1" rowspan="5" | Vécus | |||
| class="neph-sticky-2" | Feu | |||
=========================================================== */ | |||
.neph_table_NL .neph-sticky-1 { | |||
position: sticky !important; | |||
left: 0 !important; | |||
z-index: 8; | |||
background: #E3DEE8 !important; | |||
color: #574B6B !important; | |||
font-family: 'Cinzel', serif; | |||
font-weight: 600; | |||
font-size: 0.88em; | |||
border-right: 2px solid #574B6B !important; | |||
min-width: 70px; | |||
max-width: 120px; | |||
white-space: normal; | |||
} | |||
.neph_table_NL .neph-sticky-2 { | |||
position: sticky !important; | |||
left: 70px !important; | |||
z-index: 7; | |||
background: #E3DEE8 !important; | |||
color: #574B6B !important; | |||
font-family: 'Cinzel', serif; | |||
font-weight: 600; | |||
font-size: 0.85em; | |||
border-right: 2px solid #574B6B !important; | |||
min-width: 55px; | |||
} | |||
/* En-têtes sticky : z-index plus élevé */ | |||
.neph_table_NL th.neph-sticky-1 { | |||
z-index: 15; | |||
background: #574B6B !important; | |||
color: #F7F6F2 !important; | |||
} | |||
.neph_table_NL th.neph-sticky-2 { | |||
z-index: 14; | |||
background: #574B6B !important; | |||
color: #F7F6F2 !important; | |||
} | |||
/* =========================================================== | |||
4. LIGNES DES ÉLÉMENTS (Vécus par Ka) | |||
Couleurs adaptées au fond clair | |||
=========================================================== */ | |||
/* Feu */ | |||
.neph_table_NL .ka-feu .neph-sticky-2 { | |||
background: #f8e8e4 !important; | |||
color: #a0352a !important; | |||
} | |||
.neph_table_NL .ka-feu td { | |||
background: #fdf6f5 !important; | |||
} | |||
/* Air */ | |||
.neph_table_NL .ka-air .neph-sticky-2 { | |||
background: #e4eef6 !important; | |||
color: #3a6a90 !important; | |||
} | |||
.neph_table_NL .ka-air td { | |||
background: #f5f8fc !important; | |||
} | |||
/* Eau */ | |||
.neph_table_NL .ka-eau .neph-sticky-2 { | |||
background: #dce8f2 !important; | |||
color: #2a5a80 !important; | |||
} | |||
.neph_table_NL .ka-eau td { | |||
background: #f2f6fa !important; | |||
} | |||
/* Terre */ | |||
.neph_table_NL .ka-terre .neph-sticky-2 { | |||
background: #e4f0dc !important; | |||
color: #3a6a28 !important; | |||
} | |||
.neph_table_NL .ka-terre td { | |||
background: #f5faf2 !important; | |||
} | |||
/* Lune */ | |||
.neph_table_NL .ka-lune .neph-sticky-2 { | |||
background: #ebe4f2 !important; | |||
color: #6a4a8a !important; | |||
} | |||
.neph_table_NL .ka-lune td { | |||
background: #f8f5fc !important; | |||
} | |||
/* Label "Vécus" sticky sur les lignes élémentaires */ | |||
.neph_table_NL .ka-feu .neph-sticky-1, | |||
.neph_table_NL .ka-air .neph-sticky-1, | |||
.neph_table_NL .ka-eau .neph-sticky-1, | |||
.neph_table_NL .ka-terre .neph-sticky-1, | |||
.neph_table_NL .ka-lune .neph-sticky-1 { | |||
background: #E3DEE8 !important; | |||
color: #574B6B !important; | |||
} | |||
/* =========================================================== | |||
5. EFFETS INTERACTIFS | |||
=========================================================== */ | |||
/* Survol de ligne */ | |||
.neph_table_NL tbody tr:hover td { | |||
background: #EDE8F0 !important; | |||
transition: background 0.12s ease; | |||
} | |||
/* Survol élémentaire : rester dans la teinte */ | |||
.neph_table_NL tbody tr.ka-feu:hover td { background: #f3e0dc !important; } | |||
.neph_table_NL tbody tr.ka-air:hover td { background: #dce8f2 !important; } | |||
.neph_table_NL tbody tr.ka-eau:hover td { background: #d4e0ec !important; } | |||
.neph_table_NL tbody tr.ka-terre:hover td { background: #dcecd4 !important; } | |||
.neph_table_NL tbody tr.ka-lune:hover td { background: #e2d8ee !important; } | |||
/* Survol de cellule */ | |||
.neph_table_NL td:hover { | |||
outline: 1px solid #574B6B; | |||
outline-offset: -1px; | |||
} | |||
/* Liens */ | |||
.neph_table_NL a { | |||
color: #574B6B !important; | |||
text-decoration: none; | |||
} | |||
.neph_table_NL a:hover { | |||
color: #7a6a9a !important; | |||
text-decoration: underline; | |||
} | |||
/* Liens non existants */ | |||
.neph_table_NL a.new { | |||
color: #a0352a !important; | |||
} | |||
/* =========================================================== | |||
6. LIGNES SPÉCIALES | |||
=========================================================== */ | |||
/* PI (points d'incarnation) */ | |||
.neph_table_NL .neph-pi td { | |||
text-align: center; | |||
font-weight: 700; | |||
color: #574B6B !important; | |||
font-family: 'Cinzel', serif; | |||
font-size: 1em; | |||
background: #f0ecf4 !important; | |||
} | |||
.neph_table_NL .neph-pi .neph-sticky-1, | |||
.neph_table_NL .neph-pi .neph-sticky-2 { | |||
background: #E3DEE8 !important; | |||
} | |||
/* Lignes multi-contenu (texte wrappé) */ | |||
.neph_table_NL .neph-so td, | |||
.neph_table_NL .neph-sorts td, | |||
.neph_table_NL .neph-quetes td, | |||
.neph_table_NL .neph-quetes-arcane td, | |||
.neph_table_NL .neph-savoirs td { | |||
font-size: 0.82em; | |||
line-height: 1.5; | |||
white-space: normal; | |||
min-width: 100px; | |||
} | |||
/* Stases */ | |||
.neph_table_NL .neph-stases td { | |||
font-style: italic; | |||
color: #6a6060 !important; | |||
font-size: 0.82em; | |||
white-space: normal; | |||
min-width: 150px; | |||
} | |||
/* =========================================================== | |||
7. SÉPARATIONS DES ÈRES | |||
Ajouter class="ere-end" sur les cellules en fin d'ère | |||
=========================================================== */ | |||
.neph_table_NL .ere-end { | |||
border-right: 3px solid #574B6B !important; | |||
} | |||
/* =========================================================== | |||
8. RESPONSIVE | |||
=========================================================== */ | |||
@media (max-width: 768px) { | |||
.neph_table_NL { | |||
font-size: 12px; | |||
} | |||
.neph_table_NL th, | |||
.neph_table_NL td { | |||
padding: 3px 5px !important; | |||
} | |||
/* Sur mobile, ne garder que la 1ère colonne sticky */ | |||
.neph_table_NL .neph-sticky-2 { | |||
position: static !important; | |||
left: auto !important; | |||
} | |||
} | |||
/* =========================================================== | |||
9. IMPRESSION | |||
=========================================================== */ | |||
@media print { | |||
.neph-scroll-table { | |||
overflow: visible; | |||
box-shadow: none; | |||
border: 1px solid #999; | |||
} | |||
.neph_table_NL th, | |||
.neph_table_NL td { | |||
position: static !important; | |||
} | |||
.neph_table_NL th { | |||
background: #ddd !important; | |||
color: #000 !important; | |||
text-shadow: none; | |||
} | |||
} | } | ||