MediaWiki:Vector-2022.css - Revision history

Fernando: Restauração e garantia visual dos botões de censura no editor (v22)

2026-09-01T21:47:05Z

Restauração e garantia visual dos botões de censura no editor (v22)

Contrastar Mudanças

Fernando: Correção de empilhamento de infobox/citações e restauração do dropdown hambúrguer (v21)

2026-09-01T21:28:30Z

Correção de empilhamento de infobox/citações e restauração do dropdown hambúrguer (v21)

Contrastar Mudanças

Fernando: Limpeza e desarmamento de tabelas flutuantes e clear: both em títulos (v20)

2026-09-01T21:24:20Z

Limpeza e desarmamento de tabelas flutuantes e clear: both em títulos (v20)

← Older revision		Revision as of 21:24, 1 September 2026
Line 1:		Line 1:
	/* ==========================================================================		/* ==========================================================================
	TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (~~v19~~ - ~~STRICT GRID COLLAPSE <= 1200PX~~)		TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v20 - HEADING CLEAR & NO SQUEEZED FLOATS)
	========================================================================== */		========================================================================== */

Line 675:		Line 675:
	========================================================================== */		========================================================================== */
	h1, h2, h3, h4, h5, h6,		h1, h2, h3, h4, h5, h6,
			.mw-heading, .mw-heading1, .mw-heading2, .mw-heading3, .mw-heading4,
	.mw-heading h1, .mw-heading h2, .mw-heading h3 {		.mw-heading h1, .mw-heading h2, .mw-heading h3 {
	font-family: var(--vtm-font-title) !important;		font-family: var(--vtm-font-title) !important;
Line 680:		Line 681:
	letter-spacing: 0.5px !important;		letter-spacing: 0.5px !important;
	color: var(--vtm-text) !important;		color: var(--vtm-text) !important;
			clear: both !important; /* Impede que títulos sejam espremidos por tabelas flutuantes */
	}		}

Line 1,257:		Line 1,259:
	}		}

	/* --- C. TIPOGRAFIA GERAL EXPANDIDA & LEGÍVEL NO MOBILE --- */		/* --- C. DESARMA QUALQUER TABELA FLUTUANTE NO MOBILE (FLOAT: RIGHT/LEFT) --- */
			table[style*="float: right"],
			table[style*="float:right"],
			table[style*="float: left"],
			table[style*="float:left"],
			table.wikitable[style*="float"],
			.mw-parser-output table[style*="float"],
			.vtm-infobox {
			float: none !important;
			width: 100% !important;
			max-width: 100% !important;
			margin: 16px 0 !important;
			box-sizing: border-box !important;
			clear: both !important;
			}

			/* --- D. TIPOGRAFIA GERAL EXPANDIDA & LEGÍVEL NO MOBILE --- */
	html,		html,
	body,		body,
Line 1,278:		Line 1,296:
	margin-bottom: 16px !important;		margin-bottom: 16px !important;
	word-break: break-word !important;		word-break: break-word !important;
			clear: both !important;
	}		}

	h2, .mw-heading2 h2 {		h2, .mw-heading2 h2, .mw-heading h2 {
	font-size: 1.52em !important;		font-size: 1.52em !important;
	line-height: 1.35 !important;		line-height: 1.35 !important;
	margin-top: 22px !important;		margin-top: 22px !important;
	padding-bottom: 6px !important;		padding-bottom: 6px !important;
			clear: both !important;
	}		}

	h3, .mw-heading3 h3 {		h3, .mw-heading3 h3, .mw-heading h3 {
	font-size: 1.28em !important;		font-size: 1.28em !important;
	margin-top: 16px !important;		margin-top: 16px !important;
	line-height: 1.35 !important;		line-height: 1.35 !important;
			clear: both !important;
	}		}

	h4, .mw-heading4 h4 {		h4, .mw-heading4 h4, .mw-heading h4 {
	font-size: 1.15em !important;		font-size: 1.15em !important;
			clear: both !important;
	}		}

Line 1,308:		Line 1,330:
	}		}

	/* --- D. ABAS DE NAVEGAÇÃO & BOTÕES DE MENU AMPLIADOS --- */		/* --- E. ABAS DE NAVEGAÇÃO & BOTÕES DE MENU AMPLIADOS --- */
	.vector-menu-tabs,		.vector-menu-tabs,
	.vector-menu-tabs-legacy,		.vector-menu-tabs-legacy,
Line 1,405:		Line 1,427:
	}		}

	/* --- E. Cabeçalho & Logo Adaptativos --- */		/* --- F. Cabeçalho & Logo Adaptativos --- */
	.mw-logo {		.mw-logo {
	height: 68px !important;		height: 68px !important;
Line 1,420:		Line 1,442:
	}		}

	/* --- F. Layouts de Coluna / Grid (Dashboard na Home) --- */		/* --- G. Layouts de Coluna / Grid (Dashboard na Home) --- */
	.mw-parser-output table[style*="background:transparent"],		.mw-parser-output table[style*="background:transparent"],
	.mw-parser-output table[style*="border:none"],		.mw-parser-output table[style*="border:none"],
Line 1,454:		Line 1,476:
	}		}

	/* --- G. Tabelas de Dados / Dossiês (.wikitable) --- */		/* --- H. Tabelas de Dados / Dossiês (.wikitable) --- */
	table.wikitable {		table.wikitable {
	display: block !important;		display: block !important;
Line 1,472:		Line 1,494:
	line-height: 1.5 !important;		line-height: 1.5 !important;
	min-width: 90px !important;		min-width: 90px !important;
	}

	~~/* --- H. Infoboxes de Personagem (.vtm-infobox) --- */~~
	~~.vtm-infobox {~~
	~~float: none !important;~~
	~~width: 100% !important;~~
	~~max-width: 100% !important;~~
	~~margin: 18px 0 !important;~~
	~~box-sizing: border-box !important;~~
	~~font-size: 1.02em !important;~~
	}		}

Fernando: Colapso estrito do grid e breakpoint expandido para 1200px (v19)

2026-09-01T21:22:13Z

Colapso estrito do grid e breakpoint expandido para 1200px (v19)

← Older revision		Revision as of 21:22, 1 September 2026
Line 1:		Line 1:
	/* ==========================================================================		/* ==========================================================================
	TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (~~v18~~ - ~~ENLARGED MOBILE TYPOGRAPHY & BUTTONS~~)		TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v19 - STRICT GRID COLLAPSE <= 1200PX)
	========================================================================== */		========================================================================== */

Line 1,170:		Line 1,170:

	/* ==========================================================================		/* ==========================================================================
	17. RESPONSIVIDADE MOBILE & FLUID UI (@media screen and (max-width: ~~1024px~~))		17. RESPONSIVIDADE MOBILE & FLUID UI (@media screen and (max-width: 1200px))
	========================================================================== */		========================================================================== */
	@media screen and (max-width: ~~1024px~~) {		@media screen and (max-width: 1200px) {
	/* --- A. Animação Suave Sem Deslocamento Brusco --- */		/* --- A. Animação Suave Sem Deslocamento Brusco --- */
	@keyframes vtm-section-slide {		@keyframes vtm-section-slide {
Line 1,190:		Line 1,190:
	}		}

	/* --- B. OCULTAÇÃO ~~ESTRITA DE MENUS~~ LATERAIS ~~NO MOBILE~~ --- */		/* --- B. COLAPSO TOTAL DO CSS GRID & OCULTAÇÃO DAS COLUNAS LATERAIS --- */
			.mw-page-container-inner {
			display: block !important;
			grid-template-columns: 100% !important;
			grid-template-areas: "content" !important;
			width: 100% !important;
			max-width: 100% !important;
			}

			/* Oculta colunas, painéis laterais fixos e containers acoplados */
	.vector-column-start,		.vector-column-start,
	.vector-column-end,		.vector-column-end,
			.vector-main-menu-container,
			.vector-sticky-pinned-container,
	.vector-main-menu-pinned-container,		.vector-main-menu-pinned-container,
	.vector-page-tools-pinned-container,		.vector-page-tools-pinned-container,
Line 1,201:		Line 1,212:
	#vector-toc-pinned-container,		#vector-toc-pinned-container,
	#vector-appearance-pinned-container,		#vector-appearance-pinned-container,
			#vector-appearance,
	#vector-main-menu-unpinned-container,		#vector-main-menu-unpinned-container,
	#vector-toc,		#vector-toc,

Fernando: Ampliação da escala tipográfica e botões de menus no mobile (v18)

2026-09-01T21:20:09Z

Ampliação da escala tipográfica e botões de menus no mobile (v18)

Contrastar Mudanças

Fernando: Ocultação estrita e definitiva de sidebars laterais no mobile (breakpoint até 1024px)

2026-09-01T21:16:51Z

Ocultação estrita e definitiva de sidebars laterais no mobile (breakpoint até 1024px)

Contrastar Mudanças

Fernando: Ocultação de menus laterais fixos (sidebars/pinned containers) por padrão no mobile

2026-09-01T21:13:44Z

Ocultação de menus laterais fixos (sidebars/pinned containers) por padrão no mobile

← Older revision		Revision as of 21:13, 1 September 2026
Line 1:		Line 1:
	/* ==========================================================================		/* ==========================================================================
	TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (~~v15~~ - MOBILE ~~RESPONSIVE & SYNC~~)		TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v16 - MOBILE HIDDEN SIDEBARS)
	========================================================================== */		========================================================================== */

Line 1,190:		Line 1,190:
	}		}

	/* --- B. Spacing & Container Padding no Mobile --- */		/* --- B. Ocultação de Menus Laterais Fixos por Padrão (Exclusivo Mobile) --- */
			.vector-column-start,
			.vector-column-end,
			.vector-main-menu-pinned-container,
			.vector-page-tools-pinned-container,
			.vector-toc-pinned-container,
			.vector-appearance-pinned-container,
			#vector-main-menu-pinned-container,
			#vector-page-tools-pinned-container,
			#vector-toc-pinned-container,
			#vector-appearance-pinned-container,
			#mw-panel,
			.vector-sidebar-container {
			display: none !important;
			width: 0 !important;
			min-width: 0 !important;
			max-width: 0 !important;
			margin: 0 !important;
			padding: 0 !important;
			}

			/* Conteúdo ocupa 100% da tela sem margem residual de sidebars */
			.mw-page-container-inner,
			.vector-body,
			.mw-content-container,
			#content {
			width: 100% !important;
			max-width: 100% !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
			}

			/* Menus flutuantes quando abertos pelo botão hambúrguer / dropdown */
			.vector-dropdown-content,
			.vector-dropdown .vector-dropdown-content,
			#vector-main-menu-dropdown .vector-dropdown-content {
			max-width: 90vw !important;
			z-index: 1000 !important;
			}

			/* --- C. Spacing & Container Padding no Mobile --- */
	.mw-body-content,		.mw-body-content,
	#bodyContent,		#bodyContent,
Line 1,200:		Line 1,240:
	}		}

	/* --- C. Cabeçalho & Logo Adaptativos --- */		/* --- D. Cabeçalho & Logo Adaptativos --- */
	.mw-logo {		.mw-logo {
	height: 64px !important;		height: 64px !important;
Line 1,215:		Line 1,255:
	}		}

	/* --- D. Tipografia Proporcional --- */		/* --- E. Tipografia Proporcional --- */
	h1.firstHeading,		h1.firstHeading,
	.mw-first-heading,		.mw-first-heading,
Line 1,254:		Line 1,294:
	}		}

	/* --- E. Abas de Navegação Estilo Touch Carousel --- */		/* --- F. Abas de Navegação Estilo Touch Carousel --- */
	.vector-menu-tabs,		.vector-menu-tabs,
	.vector-menu-tabs-legacy,		.vector-menu-tabs-legacy,
Line 1,294:		Line 1,334:
	}		}

	/* --- F. Layouts de Coluna / Grid (Dashboard na Home) --- */		/* --- G. Layouts de Coluna / Grid (Dashboard na Home) --- */
	/* Força tabelas de 2 colunas transparentes a empilharem verticalmente */		/* Força tabelas de 2 colunas transparentes a empilharem verticalmente */
	.mw-parser-output table[style*="background:transparent"],		.mw-parser-output table[style*="background:transparent"],
Line 1,328:		Line 1,368:
	}		}

	/* --- G. Tabelas de Dados / Dossiês (.wikitable) --- */		/* --- H. Tabelas de Dados / Dossiês (.wikitable) --- */
	table.wikitable {		table.wikitable {
	display: block !important;		display: block !important;
Line 1,348:		Line 1,388:
	}		}

	/* --- H. Infoboxes de Personagem (.vtm-infobox) --- */		/* --- I. Infoboxes de Personagem (.vtm-infobox) --- */
	.vtm-infobox {		.vtm-infobox {
	float: none !important;		float: none !important;
Line 1,357:		Line 1,397:
	}		}

	/* --- I. Tela de Login no Mobile --- */		/* --- J. Tela de Login no Mobile --- */
	.mw-special-Userlogin .mw-htmlform,		.mw-special-Userlogin .mw-htmlform,
	.mw-special-Userlogin .mw-htmlform-codex,		.mw-special-Userlogin .mw-htmlform-codex,

Fernando: Implementação de responsividade mobile v15: escala tipográfica fluida, abas deslizáveis, layout de blocos empilhados e scroll suave em wikitables

2026-09-01T21:09:28Z

Implementação de responsividade mobile v15: escala tipográfica fluida, abas deslizáveis, layout de blocos empilhados e scroll suave em wikitables

Contrastar Mudanças

Fernando: Tarja limpa: sem sombra vermelha, sem borda inferior

2026-09-01T19:45:22Z

Tarja limpa: sem sombra vermelha, sem borda inferior

← Older revision		Revision as of 19:45, 1 September 2026
Line 914:		Line 914:
	========================================================================== */		========================================================================== */

	~~/* --- BASE --- */~~
	.vtm-segredo {		.vtm-segredo {
	transition: all 0.~~35s cubic-bezier(0.2, 1, 0.3, 1)~~;		transition: all 0.3s ease;
	}		}

	/* --- ~~ESTADO~~ CENSURADO (tarja preta ~~inline)~~ --- */		/* --- CENSURADO: tarja preta pura e limpa --- */
	.vtm-segredo.is-redacted {		.vtm-segredo.is-redacted {
	background: #~~050508~~ !important;		background: #0a0a0e !important;
	color: transparent !important;		color: transparent !important;
	user-select: none !important;		user-select: none !important;
	-webkit-user-select: none !important;		-webkit-user-select: none !important;
	border-radius: 2px !important;		border-radius: 2px !important;
	padding: 1px ~~4px~~ !important;		padding: 1px 6px !important;
	cursor: help !important;		cursor: help !important;
	~~border-bottom: 2px solid #5a0a14 !important;~~
	~~box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.95), 0 0 6px rgba(139, 0, 0, 0.35) !important;~~
	~~letter-spacing: 0 !important;~~
	}		}

Line 940:		Line 936:

	.vtm-segredo.is-redacted:hover {		.vtm-segredo.is-redacted:hover {
	~~box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 42, 63, 0.65) !important;~~		background: #141418 !important;
	~~border-bottom-color~~: #~~ff2a3f~~ !important;
	}		}

	/* --- ~~ESTADO~~ REVELADO / DESCLASSIFICADO --- */		/* --- REVELADO / DESCLASSIFICADO --- */
	.vtm-segredo.is-revealed {		.vtm-segredo.is-revealed {
	background: rgba(45, 12, 18, 0.45) !important;		background: rgba(45, 12, 18, 0.4) !important;
	color: #f5f0e6 !important;		color: #f5f0e6 !important;
	font-family: 'Special Elite', 'Courier New', monospace !important;		font-family: 'Special Elite', 'Courier New', monospace !important;
	~~border-bottom: 1px dashed #ff2a3f !important;~~
	border-radius: 3px !important;		border-radius: 3px !important;
	padding: 1px 6px !important;		padding: 1px 6px !important;
	~~box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(201, 24, 43, 0.25) !important;~~
	user-select: text !important;		user-select: text !important;
	}		}
Line 960:		Line 953:
	}		}

	/* --- FORMATO BLOCO (tipo=bloco) ~~— Dossiê Confidencial~~ --- */		/* --- FORMATO BLOCO (tipo=bloco) --- */
	.vtm-segredo[data-tipo="bloco"] {		.vtm-segredo[data-tipo="bloco"] {
	display: block !important;		display: block !important;
Line 966:		Line 959:
	padding: 16px 20px !important;		padding: 16px 20px !important;
	border-radius: 4px !important;		border-radius: 4px !important;
	~~border-left: 4px solid #8b0000 !important;~~
	}		}

	.vtm-segredo[data-tipo="bloco"].is-redacted {		.vtm-segredo[data-tipo="bloco"].is-redacted {
	background: ~~linear-gradient(135deg, rgba(8, 8, 12, 0.98) 0%, rgba(5, 5, 8, 0.99) 100%)~~ !important;		background: #0a0a0e !important;
	min-height: ~~70px !important;~~		min-height: 60px !important;
	~~border: 1px solid #3d0a12~~ !important;		border-left: 4px solid #2a2a30 !important;
	border-left: 4px solid #~~8b0000 !important;~~
	~~box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7)~~ !important;
	}		}

	.vtm-segredo[data-tipo="bloco"].is-revealed {		.vtm-segredo[data-tipo="bloco"].is-revealed {
	background: linear-gradient(135deg, rgba(22, 16, 20, 0.92) 0%, rgba(12, 10, 14, 0.96) 100%) !important;		background: linear-gradient(135deg, rgba(22, 16, 20, 0.92) 0%, rgba(12, 10, 14, 0.96) 100%) !important;
	border-left~~-color~~: #c5a059 ~~!important;~~		border-left: 4px solid #c5a059 !important;
	}

	~~/* Botão de Ferramenta no WikiEditor */~~
	~~.tool-button.vtm-secret-btn,~~
	~~.wikiEditor-ui-toolbar .tool[rel="vtm-secret"] {~~
	~~filter: drop-shadow(0 0 3px rgba(255, 42, 63, 0.7))~~ !important;
	}		}

	/* ==========================================================================		/* ==========================================================================
	15. CONTRASTE & LEGIBILIDADE NOS MODAIS OOUI DO VISUALEDITOR		15. CONTRASTE & LEGIBILIDADE NOS MODAIS OOUI DO VISUALEDITOR

Fernando: CSS de censura corrigido: sem position:absolute, tarja inline precisa

2026-09-01T19:38:39Z

CSS de censura corrigido: sem position:absolute, tarja inline precisa

Contrastar Mudanças