Aller au contenu

« MediaWiki:Common.css » : différence entre les versions

MediaWiki:Common.css (voir la source)

Version du 15 février 2026 à 16:05

3 949 octets ajoutés ,  15 février
aucun résumé des modifications
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 783 : Ligne 783 :
   display: none;
   display: none;
}
}


/* ============================================================
/* ============================================================
   NEPHILIM LÉGENDE — CSS tableau des Incarnations
   NEPHILIM LÉGENDE — CSS de base pour tous les tableaux
   Classe : neph_table_NL
   Classe : neph_table_NL
   À copier dans MediaWiki:Common.css
   À copier dans MediaWiki:Common.css
    
    
   Charte NL : Pourpre sombre #574B6B / Parchemin mauve #E3DEE8
   Charte NL : Pourpre sombre #574B6B / Parchemin mauve #E3DEE8
   Polices : Cinzel (titres), EB Garamond (contenu)
   Polices : Cinzel (titres), Crimson Text (sous-titres),
   ============================================================ */
            EB Garamond (contenu, 16px, weight 500)
 
   Bordures : #33302A · Texte : #2A2520 · Blanc : #F7F6F2
/* ===========================================================
 
   1. CONTENEUR À DÉFILEMENT HORIZONTAL
  USAGE (tableau simple) :
  {| class="wikitable neph_table_NL"
  |-
  ! En-tête 1 !! En-tête 2
  |-
   | Donnée 1 || Donnée 2
  |}
    
    
   USAGE MediaWiki :
   USAGE (tableau large avec scroll horizontal) :
  <div class="neph-scroll-top"><div class="neph-scroll-top-spacer"></div></div>
   <div class="neph-scroll-table">
   <div class="neph-scroll-table">
   {| class="wikitable neph_table_NL" ...
   {| class="wikitable neph_table_NL" ...
   |}
   |}
   </div>
   </div>
  (requiert nephilim-double-scroll.js dans MediaWiki:Common.js)
 
  Pour le tableau des Incarnations, ajouter aussi la classe
  neph_table_incarnations et charger le CSS correspondant.
  ============================================================ */
/* ===========================================================
  1. CONTENEUR À DÉFILEMENT HORIZONTAL (optionnel)
   =========================================================== */
   =========================================================== */


Ligne 808 : Ligne 825 :
   -webkit-overflow-scrolling: touch;
   -webkit-overflow-scrolling: touch;
   max-width: 100%;
   max-width: 100%;
   margin: 1.5em 0;
   margin: 0 0 1.5em 0;
   border: 2px solid #33302A;
   border: 2px solid #33302A;
   border-radius: 8px;
   border-radius: 0 0 8px 8px;
   background: #ffffff;
   background: #ffffff;
   box-shadow: 0 3px 16px rgba(30, 27, 22, 0.2);
   box-shadow: 0 3px 16px rgba(30, 27, 22, 0.2);
Ligne 816 : Ligne 833 :
}
}


/* Scrollbar personnalisée */
/* --- Barre de défilement HAUTE (div vide + spacer) --- */
.neph-scroll-table::-webkit-scrollbar {
 
   height: 10px;
.neph-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  margin: 1.5em 0 0 0;
  border: 2px solid #33302A;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #E3DEE8;
  height: 14px;
}
.neph-scroll-top-spacer {
  height: 1px;
}
 
/* Scrollbar personnalisée — barre HAUTE */
.neph-scroll-top::-webkit-scrollbar { height: 10px; }
.neph-scroll-top::-webkit-scrollbar-track {
   background: #E3DEE8;
  border-radius: 8px 8px 0 0;
}
.neph-scroll-top::-webkit-scrollbar-thumb {
  background: #574B6B;
  border-radius: 5px;
  border: 2px solid #E3DEE8;
}
.neph-scroll-top::-webkit-scrollbar-thumb:hover {
  background: #6B5D80;
}
}
/* Scrollbar personnalisée — barre BASSE */
.neph-scroll-table::-webkit-scrollbar { height: 10px; }
.neph-scroll-table::-webkit-scrollbar-track {
.neph-scroll-table::-webkit-scrollbar-track {
   background: #E3DEE8;
   background: #E3DEE8;
Ligne 832 : Ligne 879 :
   background: #6B5D80;
   background: #6B5D80;
}
}
/* Firefox */
.neph-scroll-top,
.neph-scroll-table {
  scrollbar-color: #574B6B #E3DEE8;
  scrollbar-width: thin;
}
/* Quand le scroll-table est seul (sans scroll-top au-dessus) :
  coins arrondis complets et marge haute restaurée */
.neph-scroll-table:not(.neph-scroll-top + .neph-scroll-table) {
  margin-top: 1.5em;
  border-radius: 8px;
}


/* ===========================================================
/* ===========================================================
   2. STYLE DU TABLEAU PRINCIPAL
   2. STYLE DE BASE DU TABLEAU
   =========================================================== */
   =========================================================== */


Ligne 847 : Ligne 909 :
   line-height: 1.4;
   line-height: 1.4;
   border: none !important;
   border: none !important;
  width: max-content;
  min-width: 100%;
}
}


Ligne 859 : Ligne 919 :
   background: #ffffff !important;
   background: #ffffff !important;
   color: #2A2520 !important;
   color: #2A2520 !important;
  white-space: nowrap;
}
}


Ligne 875 : Ligne 934 :
}
}


/* --- Ligne des Ères (première ligne d'en-tête) --- */
/* Liens dans les en-têtes : blancs sur fond pourpre */
.neph_table_NL tr:first-child th {
.neph_table_NL th a,
   background: #574B6B !important;
.neph_table_NL th a:visited {
  color: #ffffff !important;
  text-decoration: none;
}
.neph_table_NL th a:hover {
  color: #E3DEE8 !important;
  text-decoration: underline;
}
 
 
/* ===========================================================
  3. LIENS DANS LES CELLULES
  =========================================================== */
 
.neph_table_NL td a {
  color: #574B6B !important;
  text-decoration: none;
}
.neph_table_NL td a:hover {
  color: #7a6a9a !important;
  text-decoration: underline;
}
/* Liens non existants (redlinks MediaWiki) */
.neph_table_NL a.new {
  color: #a0352a !important;
}
 
 
/* ===========================================================
  4. SÉPARATION VISUELLE (opt-in)
  Ajouter class="ere-end" sur une cellule pour un trait fort
  =========================================================== */
 
.neph_table_NL .ere-end {
  border-right: 3px solid #574B6B !important;
}
 
 
/* ===========================================================
  5. EFFETS INTERACTIFS
  =========================================================== */
 
.neph_table_NL tbody tr:hover td {
  background: #EDE8F0 !important;
  transition: background 0.12s ease;
}
 
.neph_table_NL td:hover {
  outline: 1px solid #574B6B;
  outline-offset: -1px;
}
 
 
/* ===========================================================
  6. RESPONSIVE
  =========================================================== */
 
@media (max-width: 768px) {
  .neph_table_NL {
    font-size: 12px;
  }
  .neph_table_NL th,
  .neph_table_NL td {
    padding: 3px 5px !important;
  }
}
 
 
/* ===========================================================
  7. IMPRESSION
  =========================================================== */
 
@media print {
  .neph-scroll-table,
  .neph-scroll-top {
    overflow: visible;
    box-shadow: none;
    border: 1px solid #999;
  }
  .neph-scroll-top {
    display: none;
  }
  .neph_table_NL th,
  .neph_table_NL td {
    position: static !important;
  }
   .neph_table_NL th {
    background: #ddd !important;
    color: #000 !important;
    text-shadow: none;
  }
}
 
/* ============================================================
  NEPHILIM LÉGENDE — CSS spécifique au tableau des Incarnations
  Classe additionnelle : neph_table_incarnations
  À copier dans MediaWiki:Common.css (après nephilim-table-NL.css)
 
  REQUIERT : nephilim-table-NL.css (classe de base neph_table_NL)
 
  USAGE MediaWiki :
  <div class="neph-scroll-top"><div class="neph-scroll-top-spacer"></div></div>
  <div class="neph-scroll-table">
  {| class="wikitable neph_table_NL neph_table_incarnations"
  ...
  |}
  </div>
  ============================================================ */
 
 
/* ===========================================================
  1. TABLEAU LARGE — forcer la largeur au contenu
  =========================================================== */
 
.neph_table_incarnations {
  width: max-content;
  min-width: 100%;
}
 
.neph_table_incarnations td {
  white-space: nowrap;
}
 
 
/* ===========================================================
  2. LIGNES D'EN-TÊTE POSITIONNELLES
  Spécifiques à la structure Ères (1ère ligne) + Époques (2ème)
  =========================================================== */
 
/* --- Ligne des Ères (première ligne) --- */
.neph_table_incarnations tr:first-child th {
   font-size: 0.88em;
   font-size: 0.88em;
   letter-spacing: 0.06em;
   letter-spacing: 0.06em;
Ligne 884 : Ligne 1 073 :


/* --- Ligne des Époques (deuxième ligne) --- */
/* --- Ligne des Époques (deuxième ligne) --- */
.neph_table_NL tr:nth-child(2) td,
.neph_table_incarnations tr:nth-child(2) td,
.neph_table_NL tr:nth-child(2) th {
.neph_table_incarnations tr:nth-child(2) th {
   background: #E3DEE8 !important;
   background: #E3DEE8 !important;
   color: #574B6B !important;
   color: #574B6B !important;
Ligne 894 : Ligne 1 083 :
   border-bottom: 2px solid #574B6B !important;
   border-bottom: 2px solid #574B6B !important;
}
}


/* ===========================================================
/* ===========================================================
   3. COLONNES FIXES — classes explicites
   3. COLONNES FIXES (sticky)
    
    
   Utiliser class="neph-sticky-1" sur les cellules de la 1ère
   Classes explicites pour éviter les bugs liés au rowspan.
  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-1" rowspan="5" | Vécus
   | class="neph-sticky-2" | Feu
   | class="neph-sticky-2" | Feu
   =========================================================== */
   =========================================================== */


.neph_table_NL .neph-sticky-1 {
.neph_table_incarnations .neph-sticky-1 {
   position: sticky !important;
   position: sticky !important;
   left: 0 !important;
   left: 0 !important;
Ligne 922 : Ligne 1 109 :
}
}


.neph_table_NL .neph-sticky-2 {
.neph_table_incarnations .neph-sticky-2 {
   position: sticky !important;
   position: sticky !important;
   left: 70px !important;
   left: 70px !important;
Ligne 935 : Ligne 1 122 :
}
}


/* En-têtes sticky : z-index plus élevé */
/* En-têtes sticky : z-index supérieur */
.neph_table_NL th.neph-sticky-1 {
.neph_table_incarnations th.neph-sticky-1 {
   z-index: 15;
   z-index: 15;
   background: #574B6B !important;
   background: #574B6B !important;
   color: #F7F6F2 !important;
   color: #F7F6F2 !important;
}
}
.neph_table_NL th.neph-sticky-2 {
.neph_table_incarnations th.neph-sticky-2 {
   z-index: 14;
   z-index: 14;
   background: #574B6B !important;
   background: #574B6B !important;
   color: #F7F6F2 !important;
   color: #F7F6F2 !important;
}
}


/* ===========================================================
/* ===========================================================
Ligne 952 : Ligne 1 140 :
   =========================================================== */
   =========================================================== */


/* Feu */
/* --- Feu --- */
.neph_table_NL .ka-feu .neph-sticky-2 {
.neph_table_incarnations .ka-feu .neph-sticky-2 {
   background: #f8e8e4 !important;
   background: #f8e8e4 !important;
   color: #a0352a !important;
   color: #a0352a !important;
}
}
.neph_table_NL .ka-feu td {
.neph_table_incarnations .ka-feu td {
   background: #fdf6f5 !important;
   background: #fdf6f5 !important;
}
}


/* Air */
/* --- Air --- */
.neph_table_NL .ka-air .neph-sticky-2 {
.neph_table_incarnations .ka-air .neph-sticky-2 {
   background: #e4eef6 !important;
   background: #e4eef6 !important;
   color: #3a6a90 !important;
   color: #3a6a90 !important;
}
}
.neph_table_NL .ka-air td {
.neph_table_incarnations .ka-air td {
   background: #f5f8fc !important;
   background: #f5f8fc !important;
}
}


/* Eau */
/* --- Eau --- */
.neph_table_NL .ka-eau .neph-sticky-2 {
.neph_table_incarnations .ka-eau .neph-sticky-2 {
   background: #dce8f2 !important;
   background: #dce8f2 !important;
   color: #2a5a80 !important;
   color: #2a5a80 !important;
}
}
.neph_table_NL .ka-eau td {
.neph_table_incarnations .ka-eau td {
   background: #f2f6fa !important;
   background: #f2f6fa !important;
}
}


/* Terre */
/* --- Terre --- */
.neph_table_NL .ka-terre .neph-sticky-2 {
.neph_table_incarnations .ka-terre .neph-sticky-2 {
   background: #e4f0dc !important;
   background: #e4f0dc !important;
   color: #3a6a28 !important;
   color: #3a6a28 !important;
}
}
.neph_table_NL .ka-terre td {
.neph_table_incarnations .ka-terre td {
   background: #f5faf2 !important;
   background: #f5faf2 !important;
}
}


/* Lune */
/* --- Lune --- */
.neph_table_NL .ka-lune .neph-sticky-2 {
.neph_table_incarnations .ka-lune .neph-sticky-2 {
   background: #ebe4f2 !important;
   background: #ebe4f2 !important;
   color: #6a4a8a !important;
   color: #6a4a8a !important;
}
}
.neph_table_NL .ka-lune td {
.neph_table_incarnations .ka-lune td {
   background: #f8f5fc !important;
   background: #f8f5fc !important;
}
}


/* Label "Vécus" sticky sur les lignes élémentaires */
/* Label "Vécus" sticky sur les lignes élémentaires */
.neph_table_NL .ka-feu .neph-sticky-1,
.neph_table_incarnations .ka-feu .neph-sticky-1,
.neph_table_NL .ka-air .neph-sticky-1,
.neph_table_incarnations .ka-air .neph-sticky-1,
.neph_table_NL .ka-eau .neph-sticky-1,
.neph_table_incarnations .ka-eau .neph-sticky-1,
.neph_table_NL .ka-terre .neph-sticky-1,
.neph_table_incarnations .ka-terre .neph-sticky-1,
.neph_table_NL .ka-lune .neph-sticky-1 {
.neph_table_incarnations .ka-lune .neph-sticky-1 {
   background: #E3DEE8 !important;
   background: #E3DEE8 !important;
   color: #574B6B !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 */
/* Survol élémentaire : rester dans la teinte */
.neph_table_NL tbody tr.ka-feu:hover td  { background: #f3e0dc !important; }
.neph_table_incarnations tr.ka-feu:hover td  { background: #f3e0dc !important; }
.neph_table_NL tbody tr.ka-air:hover td  { background: #dce8f2 !important; }
.neph_table_incarnations tr.ka-air:hover td  { background: #dce8f2 !important; }
.neph_table_NL tbody tr.ka-eau:hover td  { background: #d4e0ec !important; }
.neph_table_incarnations tr.ka-eau:hover td  { background: #d4e0ec !important; }
.neph_table_NL tbody tr.ka-terre:hover td { background: #dcecd4 !important; }
.neph_table_incarnations tr.ka-terre:hover td { background: #dcecd4 !important; }
.neph_table_NL tbody tr.ka-lune:hover td  { background: #e2d8ee !important; }
.neph_table_incarnations 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
   5. LIGNES SPÉCIALES
   =========================================================== */
   =========================================================== */


/* PI (points d'incarnation) */
/* PI (points d'incarnation) */
.neph_table_NL .neph-pi td {
.neph_table_incarnations .neph-pi td {
   text-align: center;
   text-align: center;
   font-weight: 700;
   font-weight: 700;
Ligne 1 057 : Ligne 1 216 :
   background: #f0ecf4 !important;
   background: #f0ecf4 !important;
}
}
.neph_table_NL .neph-pi .neph-sticky-1,
.neph_table_incarnations .neph-pi .neph-sticky-1,
.neph_table_NL .neph-pi .neph-sticky-2 {
.neph_table_incarnations .neph-pi .neph-sticky-2 {
   background: #E3DEE8 !important;
   background: #E3DEE8 !important;
}
}


/* Lignes multi-contenu (texte wrappé) */
/* Lignes multi-contenu (texte wrappé) */
.neph_table_NL .neph-so td,
.neph_table_incarnations .neph-so td,
.neph_table_NL .neph-sorts td,
.neph_table_incarnations .neph-sorts td,
.neph_table_NL .neph-quetes td,
.neph_table_incarnations .neph-quetes td,
.neph_table_NL .neph-quetes-arcane td,
.neph_table_incarnations .neph-quetes-arcane td,
.neph_table_NL .neph-savoirs td {
.neph_table_incarnations .neph-savoirs td {
   font-size: 0.82em;
   font-size: 0.82em;
   line-height: 1.5;
   line-height: 1.5;
Ligne 1 075 : Ligne 1 234 :


/* Stases */
/* Stases */
.neph_table_NL .neph-stases td {
.neph_table_incarnations .neph-stases td {
   font-style: italic;
   font-style: italic;
   color: #6a6060 !important;
   color: #6a6060 !important;
Ligne 1 083 : Ligne 1 242 :
}
}


/* ===========================================================
  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
   6. RESPONSIVE — colonnes sticky
   =========================================================== */
   =========================================================== */


@media (max-width: 768px) {
@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 */
   /* Sur mobile, ne garder que la 1ère colonne sticky */
   .neph_table_NL .neph-sticky-2 {
   .neph_table_incarnations .neph-sticky-2 {
     position: static !important;
     position: static !important;
     left: auto !important;
     left: auto !important;
   }
   }
}
}


/* ===========================================================
/* ===========================================================
   9. IMPRESSION
   7. IMPRESSION — colonnes sticky
   =========================================================== */
   =========================================================== */


@media print {
@media print {
   .neph-scroll-table {
   .neph_table_incarnations .neph-sticky-1,
    overflow: visible;
   .neph_table_incarnations .neph-sticky-2 {
    box-shadow: none;
    border: 1px solid #999;
  }
   .neph_table_NL th,
  .neph_table_NL td {
     position: static !important;
     position: static !important;
  }
  .neph_table_NL th {
    background: #ddd !important;
    color: #000 !important;
    text-shadow: none;
   }
   }
}
}
Récupérée de « https://nephilim-rpg.com/index.php/Spécial:MobileDiff/24300 »