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

Navigation interactive dans l’historique
← Modification précédente Modification suivante →
Version du 16 mai 2026 à 11:21

/**
 * 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; }
}
« MediaWiki:Vaulttec.css » : différence entre les versions

Version du 16 mai 2026 à 11:21

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