MediaWiki:Common.css: Difference between revisions
CSS Dark v9: Efeito Cascata Progressiva nos H2 e seções de conteúdo |
CSS Dark v10: Cascata bold com intervalos acentuados de ~240ms e deslocamento de 48px |
||
| Line 1: | Line 1: | ||
/* ========================================================================== | /* ========================================================================== | ||
TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA ( | TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v10 - CASCATA BOLD H2) | ||
Cascata progressiva com intervalos bem marcados e visíveis entre seções | |||
========================================================================== */ | ========================================================================== */ | ||
| Line 7: | Line 7: | ||
/* ========================================================================== | /* ========================================================================== | ||
1. | 1. CASCATA PROGRESSIVA MARCADA (INTERVALOS DE ~240ms ENTRE SEÇÕES) | ||
========================================================================== */ | ========================================================================== */ | ||
@keyframes vtm-cascade- | @keyframes vtm-cascade-bold { | ||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
transform: translateX(- | transform: translateX(-48px); | ||
} | |||
60% { | |||
opacity: 0.85; | |||
} | } | ||
100% { | 100% { | ||
| Line 20: | Line 23: | ||
} | } | ||
/* 1º Passo: Título Principal */ | /* 1º Passo: Título Principal H1 (0.05s) */ | ||
#firstHeading, | #firstHeading, | ||
.mw-first-heading { | .mw-first-heading { | ||
animation: vtm-cascade- | animation: vtm-cascade-bold 0.60s cubic-bezier(0.2, 1, 0.3, 1) both !important; | ||
animation-delay: 0. | animation-delay: 0.05s !important; | ||
} | } | ||
/* 2º Passo: Infobox, Índice ou Citação de Topo (0.18s) */ | |||
.vtm-infobox, | |||
.toc, #toc, .mw-toc-wrapper, | .toc, #toc, .mw-toc-wrapper, | ||
.mw-parser-output > blockquote:first-of-type, | .mw-parser-output > blockquote:first-of-type, | ||
.mw-parser-output > .vtm-quote:first-of-type, | .mw-parser-output > .vtm-quote:first-of-type, | ||
.mw-parser-output > p:first-of-type { | .mw-parser-output > p:first-of-type { | ||
animation: vtm-cascade- | animation: vtm-cascade-bold 0.65s cubic-bezier(0.2, 1, 0.3, 1) both !important; | ||
animation-delay: 0. | animation-delay: 0.18s !important; | ||
} | } | ||
/* 3º Passo | /* 3º Passo: 1ª Seção H2 (0.40s) */ | ||
.mw-parser-output > h2:nth-of-type(1), | .mw-parser-output > h2:nth-of-type(1), | ||
.mw-parser-output > .mw-heading2:nth-of-type(1) { | .mw-parser-output > .mw-heading2:nth-of-type(1), | ||
animation: vtm-cascade- | .mw-parser-output > h2:nth-of-type(1) + p, | ||
animation-delay: 0. | .mw-parser-output > .mw-heading2:nth-of-type(1) + p, | ||
.mw-parser-output > h2:nth-of-type(1) + table, | |||
.mw-parser-output > .mw-heading2:nth-of-type(1) + table, | |||
.mw-parser-output > h2:nth-of-type(1) + ul, | |||
.mw-parser-output > .mw-heading2:nth-of-type(1) + ul { | |||
animation: vtm-cascade-bold 0.70s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 0.40s !important; | |||
} | } | ||
/* 2ª Seção H2 */ | /* 4º Passo: 2ª Seção H2 (0.64s) */ | ||
.mw-parser-output > h2:nth-of-type(2), | .mw-parser-output > h2:nth-of-type(2), | ||
.mw-parser-output > .mw-heading2:nth-of-type(2) { | .mw-parser-output > .mw-heading2:nth-of-type(2), | ||
animation: vtm-cascade- | .mw-parser-output > h2:nth-of-type(2) + p, | ||
animation-delay: 0. | .mw-parser-output > .mw-heading2:nth-of-type(2) + p, | ||
.mw-parser-output > h2:nth-of-type(2) + table, | |||
.mw-parser-output > .mw-heading2:nth-of-type(2) + table, | |||
.mw-parser-output > h2:nth-of-type(2) + ul, | |||
.mw-parser-output > .mw-heading2:nth-of-type(2) + ul { | |||
animation: vtm-cascade-bold 0.72s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 0.64s !important; | |||
} | } | ||
/* 3ª Seção H2 */ | /* 5º Passo: 3ª Seção H2 (0.88s) */ | ||
.mw-parser-output > h2:nth-of-type(3), | .mw-parser-output > h2:nth-of-type(3), | ||
.mw-parser-output > .mw-heading2:nth-of-type(3) { | .mw-parser-output > .mw-heading2:nth-of-type(3), | ||
animation: vtm-cascade- | .mw-parser-output > h2:nth-of-type(3) + p, | ||
animation-delay: 0. | .mw-parser-output > .mw-heading2:nth-of-type(3) + p, | ||
.mw-parser-output > h2:nth-of-type(3) + table, | |||
.mw-parser-output > .mw-heading2:nth-of-type(3) + table, | |||
.mw-parser-output > h2:nth-of-type(3) + ul, | |||
.mw-parser-output > .mw-heading2:nth-of-type(3) + ul { | |||
animation: vtm-cascade-bold 0.74s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 0.88s !important; | |||
} | } | ||
/* 4ª Seção H2 */ | /* 6º Passo: 4ª Seção H2 (1.12s) */ | ||
.mw-parser-output > h2:nth-of-type(4), | .mw-parser-output > h2:nth-of-type(4), | ||
.mw-parser-output > .mw-heading2:nth-of-type(4) { | .mw-parser-output > .mw-heading2:nth-of-type(4), | ||
animation: vtm-cascade- | .mw-parser-output > h2:nth-of-type(4) + p, | ||
animation-delay: | .mw-parser-output > .mw-heading2:nth-of-type(4) + p, | ||
.mw-parser-output > h2:nth-of-type(4) + table, | |||
.mw-parser-output > .mw-heading2:nth-of-type(4) + table, | |||
.mw-parser-output > h2:nth-of-type(4) + ul, | |||
.mw-parser-output > .mw-heading2:nth-of-type(4) + ul { | |||
animation: vtm-cascade-bold 0.76s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 1.12s !important; | |||
} | } | ||
/* 5ª Seção H2 */ | /* 7º Passo: 5ª Seção H2 (1.36s) */ | ||
.mw-parser-output > h2:nth-of-type(5), | .mw-parser-output > h2:nth-of-type(5), | ||
.mw-parser-output > .mw-heading2:nth-of-type(5) { | .mw-parser-output > .mw-heading2:nth-of-type(5), | ||
animation: vtm-cascade- | .mw-parser-output > h2:nth-of-type(5) + p, | ||
animation-delay: | .mw-parser-output > .mw-heading2:nth-of-type(5) + p, | ||
.mw-parser-output > h2:nth-of-type(5) + table, | |||
.mw-parser-output > .mw-heading2:nth-of-type(5) + table { | |||
animation: vtm-cascade-bold 0.78s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 1.36s !important; | |||
} | } | ||
/* 6ª Seção H2 em diante */ | /* 8º Passo: 6ª Seção H2 em diante (1.60s) */ | ||
.mw-parser-output > h2:nth-of-type(n+6), | .mw-parser-output > h2:nth-of-type(n+6), | ||
.mw-parser-output > .mw-heading2:nth-of-type(n+6) | .mw-parser-output > .mw-heading2:nth-of-type(n+6), | ||
.mw-parser-output > h2:nth-of-type(n+6) + p, | |||
.mw-parser-output > .mw-heading2:nth-of-type(n+6) + p { | |||
animation: vtm-cascade-bold 0.80s cubic-bezier(0.2, 1, 0.3, 1) both !important; | |||
animation-delay: 1.60s !important; | |||
.mw-parser-output > | |||
animation: vtm-cascade- | |||
animation-delay: | |||
} | } | ||
| Line 317: | Line 339: | ||
.oo-ui-menuSelectWidget, | .oo-ui-menuSelectWidget, | ||
.oo-ui-menuOptionWidget, | .oo-ui-menuOptionWidget, | ||
.oo-ui-window-frame { | .oo-ui-window-frame, | ||
.oo-ui-dialog, | |||
.oo-ui-panelLayout-padded { | |||
background: #161620 !important; | background: #161620 !important; | ||
background-color: #161620 !important; | |||
color: #f0ece3 !important; | color: #f0ece3 !important; | ||
border: 1px solid var(--vtm-border-blood) !important; | border: 1px solid var(--vtm-border-blood) !important; | ||
| Line 337: | Line 362: | ||
.ve-ui-surface, | .ve-ui-surface, | ||
.ve-ce-surface, | .ve-ce-surface, | ||
.ve-ce-documentNode { | .ve-ce-documentNode, | ||
.ve-ui-surface-paste { | |||
background: #0b0b10 !important; | background: #0b0b10 !important; | ||
background-color: #0b0b10 !important; | background-color: #0b0b10 !important; | ||
Revision as of 19:27, 31 August 2026
/* ==========================================================================
TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v10 - CASCATA BOLD H2)
Cascata progressiva com intervalos bem marcados e visíveis entre seções
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');
/* ==========================================================================
1. CASCATA PROGRESSIVA MARCADA (INTERVALOS DE ~240ms ENTRE SEÇÕES)
========================================================================== */
@keyframes vtm-cascade-bold {
0% {
opacity: 0;
transform: translateX(-48px);
}
60% {
opacity: 0.85;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 1º Passo: Título Principal H1 (0.05s) */
#firstHeading,
.mw-first-heading {
animation: vtm-cascade-bold 0.60s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 0.05s !important;
}
/* 2º Passo: Infobox, Índice ou Citação de Topo (0.18s) */
.vtm-infobox,
.toc, #toc, .mw-toc-wrapper,
.mw-parser-output > blockquote:first-of-type,
.mw-parser-output > .vtm-quote:first-of-type,
.mw-parser-output > p:first-of-type {
animation: vtm-cascade-bold 0.65s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 0.18s !important;
}
/* 3º Passo: 1ª Seção H2 (0.40s) */
.mw-parser-output > h2:nth-of-type(1),
.mw-parser-output > .mw-heading2:nth-of-type(1),
.mw-parser-output > h2:nth-of-type(1) + p,
.mw-parser-output > .mw-heading2:nth-of-type(1) + p,
.mw-parser-output > h2:nth-of-type(1) + table,
.mw-parser-output > .mw-heading2:nth-of-type(1) + table,
.mw-parser-output > h2:nth-of-type(1) + ul,
.mw-parser-output > .mw-heading2:nth-of-type(1) + ul {
animation: vtm-cascade-bold 0.70s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 0.40s !important;
}
/* 4º Passo: 2ª Seção H2 (0.64s) */
.mw-parser-output > h2:nth-of-type(2),
.mw-parser-output > .mw-heading2:nth-of-type(2),
.mw-parser-output > h2:nth-of-type(2) + p,
.mw-parser-output > .mw-heading2:nth-of-type(2) + p,
.mw-parser-output > h2:nth-of-type(2) + table,
.mw-parser-output > .mw-heading2:nth-of-type(2) + table,
.mw-parser-output > h2:nth-of-type(2) + ul,
.mw-parser-output > .mw-heading2:nth-of-type(2) + ul {
animation: vtm-cascade-bold 0.72s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 0.64s !important;
}
/* 5º Passo: 3ª Seção H2 (0.88s) */
.mw-parser-output > h2:nth-of-type(3),
.mw-parser-output > .mw-heading2:nth-of-type(3),
.mw-parser-output > h2:nth-of-type(3) + p,
.mw-parser-output > .mw-heading2:nth-of-type(3) + p,
.mw-parser-output > h2:nth-of-type(3) + table,
.mw-parser-output > .mw-heading2:nth-of-type(3) + table,
.mw-parser-output > h2:nth-of-type(3) + ul,
.mw-parser-output > .mw-heading2:nth-of-type(3) + ul {
animation: vtm-cascade-bold 0.74s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 0.88s !important;
}
/* 6º Passo: 4ª Seção H2 (1.12s) */
.mw-parser-output > h2:nth-of-type(4),
.mw-parser-output > .mw-heading2:nth-of-type(4),
.mw-parser-output > h2:nth-of-type(4) + p,
.mw-parser-output > .mw-heading2:nth-of-type(4) + p,
.mw-parser-output > h2:nth-of-type(4) + table,
.mw-parser-output > .mw-heading2:nth-of-type(4) + table,
.mw-parser-output > h2:nth-of-type(4) + ul,
.mw-parser-output > .mw-heading2:nth-of-type(4) + ul {
animation: vtm-cascade-bold 0.76s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 1.12s !important;
}
/* 7º Passo: 5ª Seção H2 (1.36s) */
.mw-parser-output > h2:nth-of-type(5),
.mw-parser-output > .mw-heading2:nth-of-type(5),
.mw-parser-output > h2:nth-of-type(5) + p,
.mw-parser-output > .mw-heading2:nth-of-type(5) + p,
.mw-parser-output > h2:nth-of-type(5) + table,
.mw-parser-output > .mw-heading2:nth-of-type(5) + table {
animation: vtm-cascade-bold 0.78s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 1.36s !important;
}
/* 8º Passo: 6ª Seção H2 em diante (1.60s) */
.mw-parser-output > h2:nth-of-type(n+6),
.mw-parser-output > .mw-heading2:nth-of-type(n+6),
.mw-parser-output > h2:nth-of-type(n+6) + p,
.mw-parser-output > .mw-heading2:nth-of-type(n+6) + p {
animation: vtm-cascade-bold 0.80s cubic-bezier(0.2, 1, 0.3, 1) both !important;
animation-delay: 1.60s !important;
}
#content,
.mw-body {
overflow-x: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
#firstHeading,
.mw-first-heading,
.vtm-infobox,
.toc, #toc,
.mw-parser-output > h2,
.mw-parser-output > .mw-heading2,
.mw-parser-output > table {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ==========================================================================
2. CODEX & VECTOR 2022 DESIGN TOKENS (VARIÁVEIS NATIVAS)
========================================================================== */
:root,
html,
body,
.skin-vector-2022,
.skin-vector {
--background-color-base: #101015 !important;
--background-color-base--hover: #181822 !important;
--background-color-base--active: #22222e !important;
--background-color-interactive-subtle: #16161d !important;
--background-color-interactive: #1a1a24 !important;
--background-color-disabled: #121217 !important;
--background-color-neutral: #101015 !important;
--background-color-neutral-subtle: #16161d !important;
--background-color-backdrop: rgba(0, 0, 0, 0.85) !important;
--background-color-container: #101015 !important;
--background-color-surface: #16161d !important;
--background-color-input: #121218 !important;
--background-color-input--hover: #1a1a24 !important;
--color-base: #ddd9d0 !important;
--color-base--hover: #ffffff !important;
--color-base-fixed: #ddd9d0 !important;
--color-subtle: #9e9a91 !important;
--color-placeholder: #6e6b65 !important;
--color-disabled: #55534e !important;
--color-inverted: #08080b !important;
--color-progressive: #e55353 !important;
--color-progressive--hover: #ff2a3f !important;
--color-destructive: #c9182b !important;
--border-color-base: #252530 !important;
--border-color-subtle: #1c1c25 !important;
--border-color-interactive: #3d0a12 !important;
--border-color-muted: #20202a !important;
--border-color-progressive: #8b0000 !important;
--vtm-void: #08080b;
--vtm-abyss: #0c0c10;
--vtm-obsidian: #101015;
--vtm-onyx: #16161d;
--vtm-slate: #1c1c25;
--vtm-charcoal: #22222d;
--vtm-text: #ddd9d0;
--vtm-text-dim: #9e9a91;
--vtm-text-ghost: #5e5b55;
--vtm-blood: #8b0000;
--vtm-blood-vivid: #c9182b;
--vtm-blood-neon: #ff2a3f;
--vtm-blood-glow: rgba(201, 24, 43, 0.45);
--vtm-gold: #c5a059;
--vtm-gold-bright: #e5be75;
--vtm-border: #252530;
--vtm-border-blood: #3d0a12;
--vtm-font-title: 'Cinzel', 'Playfair Display', Georgia, serif;
--vtm-font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
--vtm-font-mono: 'Consolas', 'Fira Code', 'Courier New', monospace;
}
/* ==========================================================================
3. ESTRUTURA GLOBAL & CONTAINERS
========================================================================== */
html,
html body,
body.skin-vector-2022,
body.skin-vector,
body.mediawiki {
background: var(--vtm-void) !important;
background-color: var(--vtm-void) !important;
color: var(--vtm-text) !important;
font-family: var(--vtm-font-body) !important;
}
.mw-page-container,
.mw-page-container-inner,
.vector-column-start,
.vector-column-end,
.vector-page-toolbar,
.vector-page-toolbar-container {
background: var(--vtm-void) !important;
background-color: var(--vtm-void) !important;
border-color: var(--vtm-border) !important;
}
.mw-body,
.vector-body,
.mw-body-content,
.mw-content-container,
#content,
#bodyContent,
#mw-content-text,
.mw-parser-output,
main.mw-body {
background: var(--vtm-obsidian) !important;
background-color: var(--vtm-obsidian) !important;
color: var(--vtm-text) !important;
border-color: var(--vtm-border) !important;
}
.vector-header,
.vector-header-container,
.mw-header,
#mw-head,
.vector-sticky-header,
.vector-sticky-header-container {
background: var(--vtm-abyss) !important;
background-color: var(--vtm-abyss) !important;
border-bottom: 1px solid var(--vtm-border-blood) !important;
}
.vector-sticky-header {
background: rgba(8, 8, 11, 0.97) !important;
}
#footer,
.mw-footer,
.vector-footer-container,
footer.mw-footer {
background: var(--vtm-void) !important;
background-color: var(--vtm-void) !important;
color: var(--vtm-text-ghost) !important;
border-top: 1px solid var(--vtm-border) !important;
}
/* ==========================================================================
4. VISUALEDITOR & OOUI TOOLBAR (ALTO CONTRASTE)
========================================================================== */
.ve-ui-toolbar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.ve-init-mw-desktopArticleTarget-toolbar,
.ve-ui-toolbar-floating {
background: #14141c !important;
background-color: #14141c !important;
border-bottom: 1px solid var(--vtm-border-blood) !important;
}
.oo-ui-iconElement-icon,
.oo-ui-toolbar .oo-ui-iconElement-icon,
.ve-ui-toolbar .oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
filter: brightness(0) invert(1) !important;
opacity: 0.95 !important;
}
.oo-ui-widget-disabled .oo-ui-iconElement-icon,
.oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
filter: brightness(0) invert(1) !important;
opacity: 0.28 !important;
}
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
background: #251218 !important;
background-color: #251218 !important;
border-radius: 3px !important;
}
.oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 42, 63, 0.8)) !important;
opacity: 1 !important;
}
.oo-ui-labelElement-label,
.oo-ui-tool-title,
.oo-ui-toolGroup-tools .oo-ui-tool-title,
.oo-ui-popupToolGroup-title,
.ve-ui-toolbar .oo-ui-labelElement-label {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 0.92em !important;
}
.oo-ui-widget-disabled .oo-ui-labelElement-label {
color: #66635c !important;
}
.oo-ui-tool.oo-ui-tool-active > .oo-ui-tool-link,
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
background: #3d0a12 !important;
background-color: #3d0a12 !important;
border-radius: 3px !important;
}
.ve-ui-toolbar-saveButton.oo-ui-widget-enabled .oo-ui-buttonElement-button {
background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
background-color: #660e1a !important;
border: 1px solid var(--vtm-blood-neon) !important;
border-radius: 4px !important;
box-shadow: 0 0 12px rgba(201, 24, 43, 0.6) !important;
}
.ve-ui-toolbar-saveButton.oo-ui-widget-enabled .oo-ui-labelElement-label {
color: #ffffff !important;
font-family: var(--vtm-font-title) !important;
font-weight: 800 !important;
}
.ve-ui-toolbar-saveButton.oo-ui-widget-disabled .oo-ui-buttonElement-button {
background: #181822 !important;
border: 1px solid #282836 !important;
opacity: 0.55 !important;
}
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-menuOptionWidget,
.oo-ui-window-frame,
.oo-ui-dialog,
.oo-ui-panelLayout-padded {
background: #161620 !important;
background-color: #161620 !important;
color: #f0ece3 !important;
border: 1px solid var(--vtm-border-blood) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9) !important;
}
.oo-ui-optionWidget-highlighted {
background: #2b0e15 !important;
color: #ff3b3b !important;
}
.oo-ui-optionWidget-selected {
background: #420b14 !important;
color: #ffffff !important;
font-weight: 700 !important;
}
.ve-ui-surface,
.ve-ce-surface,
.ve-ce-documentNode,
.ve-ui-surface-paste {
background: #0b0b10 !important;
background-color: #0b0b10 !important;
color: #f0ece3 !important;
caret-color: var(--vtm-blood-neon) !important;
}
/* ==========================================================================
5. PAINEIS FIXOS / PINNABLE CONTAINERS
========================================================================== */
.vector-pinnable-element,
.vector-pinned-container,
.vector-dropdown-content,
.vector-dropdown .vector-dropdown-content,
.vector-menu-content,
.vector-page-tools,
.vector-page-tools-pinned-container,
.vector-main-menu,
.vector-main-menu-pinned-container,
.vector-appearance,
.vector-appearance-pinned-container,
.vector-toc,
.vector-toc-pinned-container,
#vector-main-menu-pinned-container,
#vector-page-tools-pinned-container,
#vector-appearance-pinned-container,
#vector-toc-pinned-container,
aside.vector-pinnable-element,
nav.vector-pinnable-element,
div.vector-pinnable-element,
.vector-settings {
background: var(--vtm-obsidian) !important;
background-color: var(--vtm-obsidian) !important;
color: var(--vtm-text) !important;
border-color: var(--vtm-border) !important;
}
.vector-pinnable-header {
background: var(--vtm-abyss) !important;
background-color: var(--vtm-abyss) !important;
border-bottom: 1px solid var(--vtm-border-blood) !important;
padding: 8px 12px !important;
}
.vector-pinnable-header-label {
color: var(--vtm-gold) !important;
font-family: var(--vtm-font-title) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
font-size: 0.9em !important;
}
.vector-pinnable-header-toggle-button,
.cdx-button--weight-quiet {
background: var(--vtm-slate) !important;
background-color: var(--vtm-slate) !important;
color: var(--vtm-gold) !important;
border: 1px solid var(--vtm-border) !important;
border-radius: 3px !important;
padding: 2px 8px !important;
font-size: 0.8em !important;
}
.vector-pinnable-header-toggle-button:hover,
.cdx-button--weight-quiet:hover {
background: #2a0e14 !important;
background-color: #2a0e14 !important;
color: var(--vtm-blood-neon) !important;
border-color: var(--vtm-blood) !important;
}
.vector-menu-heading,
.vector-menu-heading-label,
.sidebar-heading,
.vector-page-tools .vector-menu-heading,
.vector-main-menu .vector-menu-heading,
#mw-panel .portal h3 {
color: var(--vtm-gold) !important;
font-family: var(--vtm-font-title) !important;
font-weight: 700 !important;
font-size: 0.82em !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
border-bottom: 1px solid var(--vtm-border-blood) !important;
margin-top: 14px !important;
padding-bottom: 4px !important;
}
.vector-pinnable-element a,
.vector-pinnable-element li a,
.vector-page-tools a,
.vector-main-menu a,
.vector-dropdown-content a,
.vector-menu-content a,
#mw-panel .portal .body li a {
color: var(--vtm-text-dim) !important;
transition: all 0.15s ease !important;
}
.vector-pinnable-element a:hover,
.vector-page-tools a:hover,
.vector-main-menu a:hover,
.vector-dropdown-content a:hover,
#mw-panel .portal .body li a:hover {
color: var(--vtm-blood-neon) !important;
text-shadow: 0 0 8px var(--vtm-blood-glow) !important;
padding-left: 4px !important;
}
/* ==========================================================================
6. ABAS DE NAVEGAÇÃO & AÇÃO
========================================================================== */
.vector-menu-tabs,
.vector-menu-tabs-legacy,
.mw-portlet-views,
.mw-portlet-namespaces {
background: transparent !important;
}
.vector-menu-tabs li,
.vector-menu-tabs-legacy li,
.vector-tab-noicon,
.mw-portlet-views li,
.mw-portlet-namespaces li {
background: var(--vtm-onyx) !important;
background-color: var(--vtm-onyx) !important;
border: 1px solid var(--vtm-border) !important;
border-bottom: none !important;
border-radius: 4px 4px 0 0 !important;
margin-right: 3px !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a,
.vector-tab-noicon a,
.mw-portlet-views li a,
.mw-portlet-namespaces li a {
color: var(--vtm-gold) !important;
font-family: var(--vtm-font-title) !important;
font-size: 0.85em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 8px 14px !important;
}
.vector-menu-tabs li a:hover,
.vector-menu-tabs-legacy li a:hover,
.mw-portlet-views li a:hover,
.mw-portlet-namespaces li a:hover {
color: #ffffff !important;
background: #22141a !important;
}
.vector-menu-tabs li.selected,
.vector-menu-tabs-legacy li.selected,
.mw-portlet-views li.selected,
.mw-portlet-namespaces li.selected,
.vector-tab-noicon.selected {
background: linear-gradient(180deg, #420b14 0%, #1e0508 100%) !important;
background-color: #2b080d !important;
border: 1px solid #8b0000 !important;
border-top: 3px solid #ff2a3f !important;
border-bottom: none !important;
box-shadow: 0 -2px 10px rgba(201, 24, 43, 0.4) !important;
}
.vector-menu-tabs li.selected a,
.vector-menu-tabs-legacy li.selected a,
.mw-portlet-views li.selected a,
.mw-portlet-namespaces li.selected a,
.vector-tab-noicon.selected a,
.vector-menu-tabs li.selected span,
.mw-portlet-views li.selected span {
color: #ffffff !important;
font-weight: 800 !important;
text-shadow: 0 0 8px rgba(255, 42, 63, 0.6) !important;
}
/* ==========================================================================
7. CAIXAS DE AVISO & FORMULÁRIOS WIKITEXT
========================================================================== */
.warningbox,
.mw-warning-with-logexcerpt,
.mw-anon-edit-warning,
.anon-edit-warning,
.cdx-message--warning,
.cdx-message,
.mw-message-box {
background: linear-gradient(90deg, rgba(77, 16, 24, 0.5) 0%, rgba(22, 14, 18, 0.9) 100%) !important;
background-color: #1f0d12 !important;
border: 1px solid #5a1420 !important;
border-left: 5px solid var(--vtm-blood-vivid) !important;
border-radius: 4px !important;
color: #ede9e1 !important;
padding: 12px 18px !important;
margin: 1.2em 0 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}
.cdx-message__content,
.mw-message-box p,
.mw-anon-edit-warning p {
color: #ede9e1 !important;
}
textarea#wpTextbox1,
#wpTextbox1,
.mw-editform textarea {
background: #0b0b10 !important;
background-color: #0b0b10 !important;
color: #f0ece3 !important;
font-family: var(--vtm-font-mono) !important;
border: 1px solid #3d0a12 !important;
border-radius: 4px !important;
padding: 14px 16px !important;
box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.95) !important;
}
/* ==========================================================================
8. BUSCA & BOTÃO "INVESTIGAR"
========================================================================== */
#simpleSearch,
.cdx-text-input__input,
.vector-search-box-input,
.cdx-search-input .cdx-text-input__input,
input[type="search"] {
background: var(--vtm-onyx) !important;
background-color: var(--vtm-onyx) !important;
color: #ffffff !important;
border: 1px solid var(--vtm-border-blood) !important;
border-radius: 4px 0 0 4px !important;
}
button.cdx-search-input__end-button,
.cdx-search-input__end-button,
.vector-search-box .cdx-button,
.vector-search-box-vue .cdx-button,
.vector-search-box-vue button,
#searchButton,
#mw-searchButton {
background: #000000 !important;
background-color: #000000 !important;
color: #ffffff !important;
font-family: var(--vtm-font-title) !important;
font-weight: 800 !important;
border: 1px solid var(--vtm-border-blood) !important;
border-left: none !important;
border-radius: 0 4px 4px 0 !important;
}
button.cdx-search-input__end-button *,
.cdx-search-input__end-button span,
.cdx-search-input__end-button .cdx-button__label,
.vector-search-box .cdx-button__label {
color: #ffffff !important;
font-weight: 800 !important;
}
button.cdx-search-input__end-button:hover,
.cdx-search-input__end-button:hover {
background: #15151e !important;
color: var(--vtm-blood-neon) !important;
border-color: var(--vtm-blood-vivid) !important;
}
/* ==========================================================================
9. TIPOGRAFIA & CABEÇALHOS GÓTICOS
========================================================================== */
h1, h2, h3, h4, h5, h6,
.mw-heading h1, .mw-heading h2, .mw-heading h3 {
font-family: var(--vtm-font-title) !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
color: var(--vtm-text) !important;
}
h1.firstHeading,
.mw-first-heading,
#firstHeading,
.mw-body h1 {
font-family: var(--vtm-font-title) !important;
font-size: 2.3em !important;
color: var(--vtm-blood-vivid) !important;
text-shadow: 0 0 14px var(--vtm-blood-glow) !important;
border-bottom: 2px solid var(--vtm-blood) !important;
padding-bottom: 8px !important;
}
h2, .mw-heading2 h2 {
font-size: 1.55em !important;
color: #f0ece5 !important;
border-bottom: 1px solid var(--vtm-border-blood) !important;
padding-bottom: 6px !important;
}
h3, .mw-heading3 h3 {
font-size: 1.2em !important;
color: var(--vtm-gold) !important;
}
a, a:visited,
.mw-body a, .mw-body a:visited,
.mw-parser-output a {
color: #e55353 !important;
text-decoration: none !important;
}
a:hover, a:focus,
.mw-body a:hover {
color: var(--vtm-blood-neon) !important;
text-shadow: 0 0 8px var(--vtm-blood-glow) !important;
}
/* ==========================================================================
10. SCROLLBAR
========================================================================== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--vtm-void);
}
::-webkit-scrollbar-thumb {
background: #2e1015;
border-radius: 5px;
border: 2px solid var(--vtm-void);
}
::-webkit-scrollbar-thumb:hover {
background: var(--vtm-blood-vivid);
}
* {
scrollbar-color: #2e1015 var(--vtm-void);
scrollbar-width: thin;
}