MediaWiki:Vaulttec.css
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/**
* VaultTec skin — skin.less
* MediaWiki 1.39+ | Vector 2022 alternative
*
* Palette : phosphore vert sur fond noir profond.
* Typo : IBM Plex Mono (chrome) + Instrument Serif (titres) + Crimson Pro (corps).
*/
// Polices chargées via Google Fonts CDN — voir templates/skin.mustache
// ============================================================
// TOKENS
// ============================================================
@bg: #06100b;
@bg-panel: #0c1812;
@bg-elevated: #111f19;
@bg-infobox: #0f1c15;
@phosphor: #7dff9c;
@ph-dim: #4ab06a;
@ph-faint: rgba(125, 255, 156, 0.10);
@ph-border: rgba(125, 255, 156, 0.15);
@ph-border2: rgba(125, 255, 156, 0.35);
@amber: #f5c84a;
@amber-faint: rgba(245, 200, 74, 0.12);
@danger: #ff5e5e;
@text: #cce8d4;
@text-dim: #7aaa88;
@text-muted: #4a6e55;
@border: rgba(125, 255, 156, 0.13);
@font-mono: 'IBM Plex Mono', 'Courier New', monospace;
@font-serif: 'Instrument Serif', Georgia, serif;
@font-body: 'Crimson Pro', Georgia, serif;
@header-h: 54px;
@tab-h: 44px;
@sidebar-w: 220px;
// ============================================================
// Z-INDEX SCALE — référence (ne pas modifier sans coordination)
// ============================================================
// 9999 .vt-scanlines (effet CRT, top layer)
// 9998 .vt-vignette (effet CRT)
// 1200 #vt-scroll-top (bouton remonter)
// 1100 .vt-header (sticky)
// 1099 .ve-ui-toolbar (sticky sous header, depuis ve-overrides.less)
// 1001 .vt-sidebar (drawer mobile, au-dessus de l'overlay)
// 999 .vt-drawer-overlay (overlay drawer mobile, capture les clics)
// 950 .vt-toc-sidebar (desktop > 1200px)
// 800 .vt-toc-sidebar (mobile/tablet ≤ 1200px)
// 500 .vt-page-tabs-wrap (sticky tabs mobile)
// 500 .vt-page-tabs (sticky tabs desktop, sous le header)
// 2 .vt-content-row (contexte d'empilement local)
// 1 .vt-scroll-arrow
// 0 .vt-watermark
// ============================================================
// RESET & BASE
// ============================================================
* {
box-sizing: border-box;
}
html,
body {
background: @bg;
color: @text;
font-family: @font-body;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
a {
color: @ph-dim;
text-decoration: none;
transition: color 0.15s;
&:hover {
color: @phosphor;
text-decoration: underline;
text-decoration-color: @ph-faint;
}
&:visited {
color: darken(@ph-dim, 10%);
}
}
// ============================================================
// EFFETS CRT
// ============================================================
.vt-scanlines {
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(125, 255, 156, 0.018) 3px,
transparent 4px
);
z-index: 9999;
mix-blend-mode: screen;
}
.vt-vignette {
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
z-index: 9998;
}
.vt-watermark {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: @font-serif;
font-style: italic;
font-size: 55vw;
color: @phosphor;
opacity: 0.015;
z-index: 0;
user-select: none;
pointer-events: none;
line-height: 1;
}
// ============================================================
// HEADER
// ============================================================
.vt-header {
position: sticky;
top: 0;
z-index: 1100; // au-dessus de la sidebar drawer (1000)
height: @header-h;
display: flex;
align-items: center;
background: rgba(6, 16, 11, 0.92);
backdrop-filter: blur(14px);
border-bottom: 1px solid @border;
}
// Logo
.vt-logo {
flex-shrink: 0;
height: 100%;
border-right: 1px solid @border;
padding: 0 20px;
}
.vt-logo-link {
display: flex;
align-items: center;
gap: 12px;
height: 100%;
text-decoration: none !important;
&:hover .vt-logo-mark {
background: rgba(125, 255, 156, 0.2);
box-shadow: 0 0 12px rgba(125, 255, 156, 0.3);
}
}
.vt-logo-mark {
width: 32px;
height: 32px;
border: 1.5px solid @phosphor;
display: flex;
align-items: center;
justify-content: center;
font-family: @font-serif;
font-style: italic;
font-size: 18px;
color: @phosphor;
background: @ph-faint;
flex-shrink: 0;
transition: all 0.2s;
}
.vt-logo-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.vt-logo-sup {
font-family: @font-mono;
font-size: 9px;
letter-spacing: 0.28em;
color: @text-muted;
text-transform: uppercase;
}
.vt-logo-name {
font-family: @font-serif;
font-style: italic;
font-size: 17px;
color: @text;
letter-spacing: 0.01em;
}
// Recherche
.vt-search {
flex: 1;
padding: 0 20px;
form {
display: flex;
gap: 6px;
max-width: 380px;
}
input[type='search'],
input[type='text'],
.oo-ui-inputWidget-input {
background: @bg-panel;
border: 1px solid @ph-border;
color: @phosphor;
font-family: @font-mono;
font-size: 12px;
padding: 7px 14px;
width: 100%;
letter-spacing: 0.05em;
transition: border-color 0.15s;
&::placeholder {
color: @text-muted;
}
&:focus {
outline: none;
border-color: @phosphor;
box-shadow: 0 0 0 1px @ph-faint;
}
}
button,
input[type='submit'] {
background: @ph-faint;
border: 1px solid @ph-border2;
color: @phosphor;
font-family: @font-mono;
font-size: 11px;
letter-spacing: 0.15em;
padding: 7px 14px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.15s;
flex-shrink: 0;
&:hover {
background: @phosphor;
color: @bg;
}
}
}
// Outils utilisateur
.vt-user-tools {
flex-shrink: 0;
height: 100%;
border-left: 1px solid @border;
padding: 0 8px;
display: flex;
align-items: center;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2px;
}
li a {
font-family: @font-mono;
font-size: 11px;
letter-spacing: 0.1em;
color: @text-dim;
padding: 0 12px;
height: @header-h;
display: flex;
align-items: center;
text-transform: uppercase;
text-decoration: none;
transition: all 0.15s;
&:hover {
color: @phosphor;
background: @ph-faint;
}
}
// Bouton créer un compte / déconnexion : highlight
#pt-createaccount a,
#pt-logout a {
background: @phosphor;
color: @bg !important;
font-weight: 600;
margin-left: 4px;
&:hover {
background: lighten(@phosphor, 10%);
}
}
}
// ============================================================
// PAGE CONTAINER
// ============================================================
.vt-page-container {
display: flex;
min-height: calc(100vh - @header-h - 56px);
position: relative;
z-index: 2;
}
// ============================================================
// SIDEBAR
// ============================================================
.vt-sidebar {
width: @sidebar-w;
flex-shrink: 0;
border-right: 1px solid @border;
background: linear-gradient(180deg, @bg-panel 0%, @bg 100%);
padding: 20px 0;
position: sticky;
top: @header-h;
height: calc(100vh - @header-h);
overflow-y: auto;
overflow-x: hidden;
align-self: flex-start;
&::-webkit-scrollbar { width: 3px; }
&::-webkit-scrollbar-thumb { background: @ph-border; }
}
.vt-sidebar-section {
margin-bottom: 24px;
}
.vt-sidebar-title {
font-family: @font-mono;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: @text-muted;
padding: 0 18px 8px;
margin: 0 0 4px;
border-bottom: 1px dashed @border;
}
.vt-sidebar-section ul {
list-style: none;
margin: 0;
padding: 0;
li a {
display: block;
padding: 7px 18px;
font-family: @font-mono;
font-size: 12px;
color: @text-dim;
border-left: 2px solid transparent;
text-decoration: none;
transition: all 0.15s;
&:hover {
color: @phosphor;
background: @ph-faint;
border-left-color: @ph-dim;
}
}
}
// ============================================================
// ONGLETS
// ============================================================
.vt-page-tabs {
display: flex;
align-items: flex-end;
height: @tab-h;
padding: 0 32px;
gap: 2px;
background: @bg-panel;
border-bottom: 1px solid @border;
font-family: @font-mono;
flex-shrink: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(125, 255, 156, 0.25) transparent;
position: sticky;
top: @header-h; // colle sous le header sticky
z-index: 500; // sous l'overlay drawer mobile (999), sous le header sticky (1100)
&::-webkit-scrollbar { height: 3px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb {
background: rgba(125, 255, 156, 0.25);
border-radius: 2px;
&:hover { background: rgba(125, 255, 156, 0.5); }
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2px;
height: 100%;
align-items: flex-end;
}
li a {
display: flex;
align-items: center;
padding: 0 14px;
height: 36px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: @text-dim;
border: 1px solid transparent;
border-bottom: none;
margin-bottom: -1px;
text-decoration: none;
transition: all 0.15s;
&:hover {
color: @phosphor;
background: @ph-faint;
}
}
// Onglet actif
li.selected a,
li.new.selected a {
color: @phosphor;
border-color: @border;
border-bottom-color: @bg;
background: @bg;
}
// Onglet "nouvel article" (rouge)
li.new a {
color: @danger;
opacity: 0.7;
}
}
.vt-tabs-sep {
flex: 1;
}
// ============================================================
// ARTICLE
// ============================================================
.vt-content-container {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
// Wrapper interne : article + TOC en flex row sur desktop
.vt-content-row {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
}
.vt-content-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
#bodyContent, .vt-article {
flex: 1;
padding: 36px 40px 60px;
max-width: 960px;
}
// Titre principal
.firstHeading {
font-family: @font-serif;
font-style: italic;
font-size: 46px;
line-height: 1.05;
letter-spacing: -0.01em;
color: @text;
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 1px dashed @border;
}
// Sous-titres — structure MW 1.44+ avec .mw-heading wrapper
.mw-body-content {
// Le flex est sur .mw-heading (le wrapper), pas sur h2
.mw-heading {
display: flex;
align-items: baseline;
border-bottom: 1px solid @border;
margin: 32px 0 14px;
padding-bottom: 8px;
}
h2 {
font-family: @font-serif;
font-style: italic;
font-size: 28px;
color: @text;
margin: 0;
padding-bottom: 0;
border-bottom: 0;
display: block;
flex: 1;
}
h3 {
font-family: @font-mono;
font-size: 13px;
font-weight: 600;
color: @phosphor;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 22px 0 10px;
padding-left: 10px;
border-left: 2px solid @phosphor;
}
h4 {
font-family: @font-mono;
font-size: 12px;
font-weight: 500;
color: @text-dim;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 18px 0 8px;
}
p {
margin-bottom: 14px;
}
// Liens de modification de section
.mw-editsection {
font-family: @font-mono;
font-size: 10px;
letter-spacing: 0.1em;
font-style: normal;
margin-left: 10px;
a {
color: @text-muted;
border: 1px solid @border;
padding: 2px 8px;
transition: all 0.15s;
&:hover {
color: @phosphor;
border-color: @ph-dim;
background: @ph-faint;
text-decoration: none;
}
}
}
}
// ============================================================
// INFOBOX
// ============================================================
.infobox,
.mw-parser-output .infobox {
float: right;
margin: 0 0 20px 28px;
width: 260px;
border: 1px solid @ph-border;
background: @bg-infobox;
font-family: @font-mono;
font-size: 12px;
clear: right;
// Titre
caption,
th.infobox-title,
.infobox-title,
> tbody > tr:first-child > th {
background: @amber !important;
color: #1a1000 !important;
font-family: @font-mono;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.05em;
padding: 10px 14px;
text-align: center;
text-transform: uppercase;
display: block;
}
tr {
border-top: 1px dashed @border;
}
th {
color: @text-muted;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 12px;
font-weight: 400;
text-align: left;
vertical-align: top;
background: transparent;
width: 42%;
}
td {
color: @text;
padding: 7px 12px;
vertical-align: top;
font-size: 11px;
background: transparent;
}
}
// ============================================================
// TABLEAUX WIKI
// ============================================================
.wikitable {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
background: transparent;
th {
background: @bg-elevated;
color: @phosphor;
font-family: @font-mono;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 8px 14px;
text-align: left;
border: 1px solid @border;
}
td {
padding: 8px 14px;
border: 1px solid @border;
color: @text;
vertical-align: top;
font-size: 14px;
}
tr:hover td {
background: @ph-faint;
}
}
// ============================================================
// TABLE DES MATIÈRES
// ============================================================
.toc,
#toc {
background: @bg-panel;
border: 1px solid @border;
padding: 14px 0 10px;
font-family: @font-mono;
display: inline-block;
margin: 0 0 20px;
min-width: 200px;
.toctitle {
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: @text-muted;
padding: 0 16px 10px;
border-bottom: 1px dashed @border;
margin-bottom: 6px;
h2 {
// Override l'h2 général pour la TOC
font-family: @font-mono;
font-size: 9px;
font-style: normal;
color: @text-muted;
margin: 0;
padding: 0;
border: none;
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
li a {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 16px;
font-size: 11px;
color: @text-dim;
line-height: 1.3;
transition: all 0.15s;
border-left: 2px solid transparent;
&:hover {
color: @phosphor;
text-decoration: none;
background: @ph-faint;
border-left-color: @ph-dim;
}
}
// Sous-niveaux
ul li a {
padding-left: 28px;
font-size: 10px;
color: @text-muted;
}
}
.tocnumber {
color: @text-muted;
font-size: 10px;
flex-shrink: 0;
min-width: 18px;
}
}
// ============================================================
// BANDEAUX & NOTICES
// ============================================================
.ambox,
.mbox-small {
border: 1px solid @amber-faint;
background: @amber-faint;
border-left: 3px solid @amber;
padding: 12px 16px;
margin-bottom: 16px;
font-family: @font-mono;
font-size: 12px;
color: @text-dim;
letter-spacing: 0.03em;
line-height: 1.6;
display: flex;
gap: 12px;
align-items: flex-start;
clear: both;
td {
border: none;
padding: 0;
background: transparent;
}
}
// ============================================================
// CATÉGORIES
// ============================================================
#catlinks {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid @border;
font-family: @font-mono;
font-size: 11px;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
a {
padding: 2px 10px;
border: 1px solid @border;
color: @text-dim;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: all 0.15s;
text-decoration: none;
&:hover {
color: @phosphor;
border-color: @ph-dim;
background: @ph-faint;
}
}
.mw-normal-catlinks {
&::before {
content: 'Catégories :';
color: @text-muted;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-right: 8px;
}
ul {
display: inline;
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline;
}
ul li::after {
content: ' ';
}
}
}
// ============================================================
// FOOTER
// ============================================================
.vt-footer {
border-top: 1px solid @border;
background: @bg-panel;
padding: 20px 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-family: @font-mono;
font-size: 10px;
letter-spacing: 0.12em;
color: @text-muted;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.vt-footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
flex: 1;
ul {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
a {
color: @text-muted;
transition: color 0.15s;
&:hover {
color: @phosphor;
text-decoration: none;
}
}
}
.vt-footer-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: @font-serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.01em;
color: @ph-dim;
}
.vt-footer-brand-mark {
width: 22px;
height: 22px;
border: 1px solid @ph-dim;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.vt-footer-status {
font-family: @font-mono;
font-style: normal;
font-size: 9px;
letter-spacing: 0.2em;
color: @text-muted;
display: flex;
align-items: center;
gap: 5px;
}
.vt-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: @phosphor;
box-shadow: 0 0 6px @phosphor;
animation: vt-blink 2s infinite;
}
@keyframes vt-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
// ============================================================
// PRINT
// ============================================================
@media print {
.noprint,
.vt-header,
.vt-sidebar,
.vt-page-tabs,
.vt-scanlines,
.vt-vignette,
.vt-watermark,
.vt-footer {
display: none !important;
}
body {
background: #fff;
color: #000;
}
.firstHeading {
color: #000;
border-bottom: 2px solid #000;
}
a {
color: #000;
}
}
// ============================================================
// RESPONSIVE
// ============================================================
// ── Desktop : burger et overlay cachés ──────────────────────
@media screen and (min-width: 901px) {
.vt-burger {
display: none;
}
.vt-drawer-overlay {
display: none;
}
// Flèches scroll : mobile-only
.vt-scroll-arrow {
display: none !important;
}
// Les wrappers créés par JS doivent disparaître du flux sur desktop
.vt-user-tools-wrap,
.vt-page-tabs-wrap {
display: contents;
}
}
@media screen and (max-width: 1100px) {
#bodyContent, .vt-article {
padding: 28px 28px 50px;
}
}
@media screen and (max-width: 900px) {
// ── Burger button ────────────────────────────────────────────
.vt-burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: transparent;
border: 1px solid @border;
border-radius: 2px;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.2s, background 0.2s;
order: -1;
margin-left: 12px;
&:hover {
border-color: @phosphor;
background: @ph-faint;
}
}
.vt-burger-bar {
display: block;
width: 100%;
height: 1.5px;
background: @text-dim;
border-radius: 1px;
transition: all 0.25s ease;
transform-origin: center;
}
// Burger → X quand ouvert
.vt-burger.is-open {
border-color: @phosphor;
background: @ph-faint;
.vt-burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: @phosphor; }
.vt-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vt-burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: @phosphor; }
}
// ── Bouton fermer dans le drawer ─────────────────────────────
.vt-drawer-close {
display: block;
width: 100%;
padding: 14px 20px;
background: transparent;
border: 0;
border-bottom: 1px solid @border;
color: @text-dim;
font-family: @font-mono;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
transition: color 0.15s, background 0.15s;
&::before {
content: '✕ ';
color: @phosphor;
}
&:hover {
background: @ph-faint;
color: @phosphor;
}
}
.vt-drawer-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 999; // sous .vt-sidebar (1001), au-dessus de tout le reste
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
&.is-open {
opacity: 1;
pointer-events: auto; // capture les clics (sinon le contenu derrière reste interactif)
// Le handler document click ferme le drawer car l'overlay
// est hors de .vt-sidebar : un clic dessus déclenche closeDrawer().
}
}
// ── Sidebar → drawer latéral ─────────────────────────────────
.vt-sidebar {
position: fixed !important;
top: 0;
left: 0;
width: ~"min(280px, 85vw)"; // limite à 85% du viewport sur très petits écrans
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: 1001; // au-dessus de l'overlay (999)
background: @bg-panel;
border-right: 1px solid @border;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding-top: 56px;
box-shadow: none;
align-self: auto;
&.is-open {
transform: translateX(0);
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6);
}
}
// Pas de margin-left sur mobile
.vt-page-container {
margin-left: 0 !important;
}
// Masquer la nav primaire dans le header sur mobile (elle est dans le drawer)
.vt-nav-primary {
display: none;
}
.infobox,
.mw-parser-output .infobox {
width: 220px;
}
// ── Header mobile — CSS Grid pour layout fiable ───────────
.vt-header {
display: grid !important;
grid-template-areas:
"burger logo"
"usertools usertools"
"search search";
grid-template-columns: 54px 1fr;
grid-template-rows: 52px 36px auto;
height: auto;
padding: 0;
align-items: stretch;
background: @bg-panel !important; // solide sur mobile, pas de blur transparent
backdrop-filter: none !important;
}
.vt-burger { grid-area: burger; display: flex !important; align-self: center; justify-self: center; }
.vt-logo {
grid-area: logo;
height: 52px;
border-right: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
}
.vt-logo-link {
justify-content: center;
}
.vt-nav-primary { display: none !important; }
// ── Flèches scroll horizontal génériques (user-tools + page-tabs) ──
.vt-scroll-wrap {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.vt-user-tools-wrap {
grid-area: usertools;
height: 36px;
border-top: 1px solid @border;
}
.vt-page-tabs-wrap {
// La page-tabs est sticky avec son propre top, donc le wrap doit suivre
position: sticky;
top: 0; // JS ajustera le top en mobile (pour suivre le header de hauteur variable)
z-index: 500; // sous l'overlay drawer (999) — évite que les tabs débordent par-dessus
background: @bg-panel;
border-bottom: 1px solid @border;
}
// Sur mobile, c'est le wrap qui est sticky : le tabs interne doit redevenir static
.vt-page-tabs {
position: static !important;
top: auto !important;
z-index: auto !important;
border-bottom: none !important;
// Scrollbar agressivement cachée (les flèches font le job)
scrollbar-width: none !important;
-ms-overflow-style: none !important;
&::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
&::-webkit-scrollbar-track { display: none !important; }
&::-webkit-scrollbar-thumb { display: none !important; }
}
// Pareil pour user-tools
.vt-user-tools {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
&::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
&::-webkit-scrollbar-track { display: none !important; }
&::-webkit-scrollbar-thumb { display: none !important; }
}
.vt-scroll-arrow {
position: absolute;
top: 0;
bottom: 0;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(125, 255, 156, 0.6);
font-size: 16px;
font-family: @font-mono;
font-weight: bold;
z-index: 2;
transition: opacity 0.2s ease, color 0.15s ease, background 0.15s ease;
opacity: 1;
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
user-select: none;
&:hover { color: @phosphor; }
&:active { color: @phosphor; transform: scale(0.92); }
&:focus-visible {
outline: 1px solid @phosphor;
outline-offset: -2px;
}
&.is-left {
left: 0;
background: linear-gradient(to right, @bg-panel 60%, transparent);
}
&.is-right {
right: 0;
background: linear-gradient(to left, @bg-panel 60%, transparent);
}
&.is-left:hover { background: linear-gradient(to right, rgba(125, 255, 156, 0.15) 0%, @bg-panel 60%, transparent); }
&.is-right:hover { background: linear-gradient(to left, rgba(125, 255, 156, 0.15) 0%, @bg-panel 60%, transparent); }
}
.vt-scroll-wrap.is-scroll-start .vt-scroll-arrow.is-left { opacity: 0; pointer-events: none; }
.vt-scroll-wrap.is-scroll-end .vt-scroll-arrow.is-right { opacity: 0; pointer-events: none; }
.vt-user-tools {
grid-area: unset !important;
display: block !important;
height: 36px;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-top: none;
border-left: none;
border-right: none;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
ul {
display: flex !important;
width: max-content; // largeur du contenu, pas 100%
min-width: 100%; // mais au moins 100% si peu d'items
height: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none;
gap: 0 !important;
}
li {
flex: 0 0 auto !important; // taille selon contenu, pas étiré
min-width: 0 !important;
display: flex !important;
border-right: 1px solid @border;
}
li:last-child { border-right: none; }
li:empty { display: none !important; }
li a {
display: block !important;
height: 36px !important;
line-height: 36px !important;
font-size: 10px !important;
letter-spacing: 0.08em !important;
text-align: center !important;
padding: 0 14px !important; // padding confortable, pas de tronquage
margin: 0 !important;
white-space: nowrap !important;
border-right: none !important;
box-sizing: border-box !important;
}
// Override desktop logout/createaccount style on mobile
#pt-logout a,
#pt-createaccount a {
background: transparent !important;
color: @text-dim !important;
font-weight: normal !important;
margin-left: 0 !important;
}
}
.vt-search {
grid-area: search;
width: 100%;
padding: 8px 12px;
border-top: 1px solid @border;
form { max-width: 100%; }
}
.vt-logo-text { white-space: nowrap; overflow: hidden; }
.vt-logo-name { font-size: 15px; white-space: nowrap; }
.vt-logo-sup { font-size: 8px; white-space: nowrap; }
}
@media screen and (max-width: 640px) {
#bodyContent, .vt-article {
padding: 20px 16px 40px;
}
.firstHeading {
font-size: 28px;
}
.infobox,
.mw-parser-output .infobox {
float: none;
width: 100%;
margin: 0 0 20px;
}
.vt-page-tabs {
padding: 0 12px;
overflow-x: auto;
ul {
flex-shrink: 0;
}
}
.vt-footer {
padding: 16px;
flex-direction: column;
align-items: flex-start;
}
}
// ============================================================
// NAVIGATION PRINCIPALE (header)
// ============================================================
.vt-nav-primary {
display: flex;
align-items: center;
height: 100%;
padding: 0 8px;
gap: 2px;
border-right: 1px solid @border;
overflow-x: auto;
flex-shrink: 1;
}
.vt-nav-link {
font-family: @font-mono;
font-size: 11px;
letter-spacing: 0.1em;
color: @text-dim;
padding: 0 12px;
height: @header-h;
display: flex;
align-items: center;
text-transform: uppercase;
text-decoration: none;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: all 0.15s;
&:hover {
color: @phosphor;
background: @ph-faint;
text-decoration: none;
}
}
// ============================================================
// CODEMIRROR / VE / WIKIEDITOR — fix cursor offset
// Chargé avec le skin (avant init éditeur) — haute spécificité
// pour empêcher l'héritage de Crimson Pro qui casse les mesures.
// Cf. T418793, T245532, T245568.
// ============================================================
html body #wpTextbox1,
html body .wikiEditor-ui-text textarea,
html body .CodeMirror,
html body .CodeMirror pre,
html body .CodeMirror-code,
html body .CodeMirror-linenumber,
html body .CodeMirror-measure,
html body .CodeMirror-measure pre,
html body .ve-ce-paragraphNode,
html body .ve-ui-mwWikitextSurface,
html body .ve-ui-mwWikitextSurface .ve-ce-paragraphNode {
font-family: monospace, monospace !important;
font-size: 13px !important;
line-height: 1.5em !important;
}
// ============================================================
// SCROLL TO TOP
// ============================================================
#vt-scroll-top {
position: fixed;
bottom: 28px;
right: 24px;
width: 36px;
height: 36px;
background: rgba(6, 15, 11, 0.85);
border: 1px solid rgba(125, 255, 156, 0.25);
color: rgba(125, 255, 156, 0.6);
font-size: 16px;
line-height: 1;
cursor: pointer;
border-radius: 2px;
z-index: 800;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease,
color 0.15s, border-color 0.15s, background 0.15s;
&.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
&:hover {
background: rgba(125, 255, 156, 0.1);
border-color: rgba(125, 255, 156, 0.5);
color: #7dff9c;
}
}
// ============================================================
// ============================================================
// TOC SIDEBAR — colonne droite desktop, panneau mobile
// ============================================================
// ── Base commune ─────────────────────────────────────────────
.vt-toc-sidebar {
background: linear-gradient(180deg, @bg-panel 0%, @bg 100%);
border-left: 1px solid @border;
overflow-y: auto;
overflow-x: hidden;
z-index: 950;
&::-webkit-scrollbar { width: 2px; }
&::-webkit-scrollbar-thumb { background: @ph-border; }
// Bouton collapse (desktop) / fermer (mobile)
.vt-toc-collapse-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 0;
background: transparent;
border: 0;
border-bottom: 1px solid @border;
color: rgba(125, 255, 156, 0.4);
font-size: 14px;
cursor: pointer;
transition: color 0.15s, background 0.15s;
&:hover {
color: @phosphor;
background: @ph-faint;
}
}
// Titre "SOMMAIRE"
.vt-toc-sidebar-title {
font-family: @font-mono;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(125, 255, 156, 0.4);
padding: 10px 16px 8px;
border-bottom: 1px dashed rgba(125, 255, 156, 0.12);
}
// TOC dans la sidebar
.toc, #toc {
float: none !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 11px !important;
overflow: visible !important;
}
.toctitle { display: none !important; }
.toc > ul, #toc > ul {
display: block !important;
padding: 4px 0 !important;
margin: 0 !important;
}
.toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.toc li a {
display: flex !important;
align-items: baseline !important;
padding: 5px 16px !important;
font-size: 11px !important;
color: #7aaa88 !important;
font-family: @font-mono !important;
border-left: 2px solid transparent !important;
transition: all 0.15s !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
&:hover {
color: @phosphor !important;
background: @ph-faint !important;
border-left-color: @ph-dim !important;
}
}
.toc li li a {
padding-left: 28px !important;
font-size: 10px !important;
color: rgba(125, 255, 156, 0.4) !important;
}
.tocnumber {
color: rgba(125, 255, 156, 0.3) !important;
margin-right: 6px !important;
}
}
// ── DESKTOP > 1200px — TOC sticky dans le flux flex (pousse le texte)
@media screen and (min-width: 1201px) {
.vt-toc-sidebar {
// STICKY dans le flex — quand il s'ouvre il pousse le contenu
position: sticky;
top: @header-h; // JS override avec header+tabs height
height: calc(100vh - @header-h);
flex-shrink: 0;
width: 32px; // collapsed par défaut
overflow: hidden;
transition: width 0.25s ease;
// Replié
&.is-collapsed {
width: 32px;
overflow: hidden;
.toc, #toc { display: none !important; }
.vt-toc-collapse-btn {
border-bottom: 1px solid @border;
height: 36px;
flex-shrink: 0;
}
.vt-toc-sidebar-title {
padding: 0;
border-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
flex: 1;
cursor: pointer;
overflow: hidden;
span {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
letter-spacing: 0.2em;
font-size: 9px;
color: rgba(125, 255, 156, 0.35);
font-family: @font-mono;
font-weight: 500;
text-transform: uppercase;
display: block;
}
}
}
// Déplié — pousse le texte grâce au flex sticky
&.is-expanded {
width: 200px;
overflow-y: auto;
overflow-x: hidden;
.toc, #toc { display: block !important; }
}
}
#vt-toc-btn { display: none !important; }
#vt-toc-mobile-overlay { display: none !important; }
}
// ── TABLETTE + MOBILE ≤ 1200px — TOC sticky dans le flex (pousse le contenu)
@media screen and (max-width: 1200px) {
.vt-content-row {
// Reste un flex row même sur mobile pour que le TOC pousse le contenu
display: flex;
}
.vt-toc-sidebar {
position: sticky;
top: 0; // JS override avec header+tabs
right: 0;
height: 100vh; // JS override avec calc(100vh - top)
width: 32px; // COLLAPSED PAR DÉFAUT (avant JS)
flex-shrink: 0;
overflow: hidden;
transition: width 0.25s ease;
z-index: 800;
// Replié (explicite)
&.is-collapsed {
width: 32px;
.toc, #toc { display: none !important; }
.vt-toc-collapse-btn {
border-bottom: 1px solid @border;
height: 36px;
flex-shrink: 0;
}
.vt-toc-sidebar-title {
padding: 0;
border-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
flex: 1;
cursor: pointer;
overflow: hidden;
span {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
letter-spacing: 0.2em;
font-size: 9px;
color: rgba(125, 255, 156, 0.35);
font-family: @font-mono;
font-weight: 500;
text-transform: uppercase;
display: block;
}
}
}
// Déplié — via classe JS .is-expanded UNIQUEMENT
&.is-expanded {
width: 260px;
max-width: 80vw;
overflow-y: auto;
overflow-x: hidden;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
.toc li a {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
}
}
#vt-toc-btn { display: none !important; }
#vt-toc-mobile-overlay { display: none !important; }
}