Aller au contenu

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

MediaWiki:Common.css (voir la source)

Version du 28 février 2026 à 21:16

6 191 octets ajoutés ,  28 février
aucun résumé des modifications
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 3 672 : Ligne 3 672 :
         margin: 0 auto 16px;
         margin: 0 auto 16px;
     }
     }
}
/* ══════════════════════════════════════════════════════
  Arbre de Vie — Modèle:ArbreDeVie
  À ajouter dans MediaWiki:Common.css
  ══════════════════════════════════════════════════════ */
.arbre-de-vie {
  position: relative;
  width: 700px;
  height: 1100px;
  margin: 20px auto;
  font-family: sans-serif;
}
.arbre-de-vie .adv-title {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--adv-accent-border);
  margin-bottom: 10px;
}
.arbre-de-vie .adv-title h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--adv-accent);
  letter-spacing: 0.12em;
  margin: 0 0 2px 0;
  border: none;
}
.arbre-de-vie .adv-subtitle {
  font-size: 0.8rem;
  color: var(--adv-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* ── SVG paths background ── */
.arbre-de-vie .adv-paths {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.arbre-de-vie .adv-paths line {
  stroke: var(--adv-path-color);
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* ── Sephirah group ── */
.adv-sephirah-group {
  position: absolute;
  z-index: 1;
}
.adv-sephirah-group:hover {
  z-index: 10;
}
/* ── Sephirah circle ── */
.adv-sephirah {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.2px solid var(--adv-seph-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
  z-index: 5;
}
.adv-sephirah::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border-radius: 50%;
  border: 0.6px solid var(--adv-accent-border);
  opacity: 0.5;
  pointer-events: none;
}
.adv-sephirah-group:hover .adv-sephirah {
  border-width: 2.8px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
}
.adv-sephirah .adv-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9px;
  color: var(--adv-text-light);
  line-height: 1;
}
.adv-sephirah .adv-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--adv-accent);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
/* ── Satellite (contrée) ── */
.adv-satellite {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.2px solid var(--adv-sat-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  z-index: 2;
  padding: 4px;
  text-align: center;
}
/* Level 1: group hover — structural highlight */
.adv-sephirah-group:hover .adv-satellite {
  border-color: var(--adv-sat-hover-border);
  border-width: 1.8px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
}
/* Level 2: individual satellite hover — content highlight */
.adv-satellite:hover {
  background: var(--adv-sat-hover-bg) !important;
  border-color: var(--adv-sat-hover-border) !important;
  border-width: 1.8px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12) !important;
}
.adv-satellite:hover .adv-sat-text {
  color: var(--adv-accent) !important;
}
.adv-satellite:hover .adv-sat-ordinal {
  color: var(--adv-accent) !important;
}
.adv-sat-ordinal {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5.5px;
  font-weight: 600;
  color: var(--adv-accent-soft);
  line-height: 1;
  margin-bottom: 1px;
}
.adv-sat-text {
  font-size: 6.8px;
  font-weight: 400;
  color: #2A2520;
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.2s ease;
}
/* ── Connector lines (CSS pseudo-elements won't work well, so we use thin divs) ── */
.adv-connector {
  position: absolute;
  background: var(--adv-connector-color);
  height: 1px;
  transform-origin: 0 0;
  z-index: 0;
  pointer-events: none;
}
.adv-sephirah-group:hover .adv-connector {
  background: var(--adv-sat-hover-border);
  height: 1.5px;
}
/* ── Color themes ── */
.arbre-de-vie.adv-sohar {
  --adv-accent: #4A90B8;
  --adv-accent-soft: #6AAED4;
  --adv-accent-border: #B3D4E8;
  --adv-seph-border: #4A90B8;
  --adv-sat-border: #A8C8DE;
  --adv-sat-hover-border: #5A9EC6;
  --adv-sat-hover-bg: #F0F7FB;
  --adv-path-color: #C5DAE8;
  --adv-connector-color: #D0E2EE;
  --adv-text-muted: #6A8A9E;
  --adv-text-light: #88A4B6;
}
.arbre-de-vie.adv-zakai {
  --adv-accent: #3A5080;
  --adv-accent-soft: #5670A0;
  --adv-accent-border: #AAB8D4;
  --adv-seph-border: #3A5080;
  --adv-sat-border: #9AAAC4;
  --adv-sat-hover-border: #4A6090;
  --adv-sat-hover-bg: #EEF2F8;
  --adv-path-color: #BCC8DC;
  --adv-connector-color: #C8D2E4;
  --adv-text-muted: #607088;
  --adv-text-light: #8090A8;
}
.arbre-de-vie.adv-meborack {
  --adv-accent: #4A8A5A;
  --adv-accent-soft: #6AAE78;
  --adv-accent-border: #B3D8BC;
  --adv-seph-border: #4A8A5A;
  --adv-sat-border: #A8CCAE;
  --adv-sat-hover-border: #5A9E68;
  --adv-sat-hover-bg: #F0FBF2;
  --adv-path-color: #C5DEC8;
  --adv-connector-color: #D0EED4;
  --adv-text-muted: #6A8E6E;
  --adv-text-light: #88A88C;
}
.arbre-de-vie.adv-pachad {
  --adv-accent: #7A5A9E;
  --adv-accent-soft: #9878B8;
  --adv-accent-border: #CCBADE;
  --adv-seph-border: #7A5A9E;
  --adv-sat-border: #BBA8D0;
  --adv-sat-hover-border: #8A6AAE;
  --adv-sat-hover-bg: #F6F0FB;
  --adv-path-color: #D5C5E8;
  --adv-connector-color: #DED0EE;
  --adv-text-muted: #8A6E9E;
  --adv-text-light: #A088B0;
}
.arbre-de-vie.adv-aresh {
  --adv-accent: #B84A4A;
  --adv-accent-soft: #D46A6A;
  --adv-accent-border: #E8B3B3;
  --adv-seph-border: #B84A4A;
  --adv-sat-border: #DEACAC;
  --adv-sat-hover-border: #C65A5A;
  --adv-sat-hover-bg: #FBF0F0;
  --adv-path-color: #E8C5C5;
  --adv-connector-color: #EED0D0;
  --adv-text-muted: #9E6A6A;
  --adv-text-light: #B08888;
}
}
Récupérée de « https://nephilim-rpg.com/index.php/Spécial:MobileDiff/26183 »