|
|
| (46 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ========================================================================== | | /* ========================================================================== |
| TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v9 - CASCATA PROGRESSIVA H2) | | 27. FIX: TOC DROPDOWN — FUNCIONAL EM MOBILE (max-width: 1200px) |
| Animação progressiva escalonada por seções de conteúdo
| |
| ========================================================================== */ | | ========================================================================== */ |
|
| |
|
| @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'); | | @media screen and (max-width: 1200px) { |
|
| |
|
| /* ========================================================================== | | /* Botão TOC no titlebar — garantir visibilidade */ |
| 1. ANIMAÇÃO PROGRESSIVA ESCALONADA (STAGGERED CASCADE)
| | #vector-page-titlebar-toc, |
| ========================================================================== */
| | .vector-page-titlebar-toc { |
| @keyframes vtm-cascade-slide {
| | display: block !important; |
| 0% { | | visibility: visible !important; |
| opacity: 0; | | position: relative !important; |
| transform: translateX(-32px); | | width: auto !important; |
| | max-width: none !important; |
| | height: auto !important; |
| | overflow: visible !important; |
| | opacity: 1 !important; |
| | left: auto !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| | z-index: 100 !important; |
| } | | } |
| 100% { | | |
| opacity: 1; | | /* Label/ícone do botão TOC */ |
| transform: translateX(0); | | #vector-page-titlebar-toc .vector-dropdown-label { |
| | cursor: pointer !important; |
| | display: inline-flex !important; |
| | align-items: center !important; |
| | padding: 6px !important; |
| | border-radius: 4px !important; |
| } | | } |
| }
| |
|
| |
|
| /* 1º Passo: Título Principal */
| | #vector-page-titlebar-toc .vector-dropdown-label:hover { |
| #firstHeading, | | background: rgba(139, 0, 0, 0.15) !important; |
| .mw-first-heading { | | } |
| animation: vtm-cascade-slide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
| |
| animation-delay: 0.04s !important; | |
| } | |
|
| |
|
| /* 2º Passo: Infobox, Citação Inicial ou Introdução */ | | /* Container unpinned — permitir exibição como dropdown */ |
| .vtm-infobox { | | #vector-page-titlebar-toc .vector-dropdown-content { |
| animation: vtm-cascade-slide 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important;
| | position: absolute !important; |
| animation-delay: 0.12s !important;
| | top: 100% !important; |
| } | | left: 0 !important; |
| | display: none !important; |
| | visibility: hidden !important; |
| | opacity: 0 !important; |
| | background: var(--vtm-obsidian, #101015) !important; |
| | border: 1px solid var(--vtm-border-blood, #3d0a12) !important; |
| | border-top: 2px solid var(--vtm-blood-neon, #ff2a3f) !important; |
| | border-radius: 0 0 6px 6px !important; |
| | box-shadow: 0 12px 40px rgba(0, 0, 0, 0.95), 0 0 16px rgba(201, 24, 43, 0.35) !important; |
| | max-width: 85vw !important; |
| | width: 280px !important; |
| | max-height: 70vh !important; |
| | overflow-y: auto !important; |
| | -webkit-overflow-scrolling: touch !important; |
| | z-index: 999998 !important; |
| | padding: 12px 8px !important; |
| | } |
|
| |
|
| .toc, #toc, .mw-toc-wrapper,
| | /* Quando o dropdown está aberto (checkbox ou classe) */ |
| .mw-parser-output > blockquote:first-of-type,
| | #vector-page-titlebar-toc-checkbox:checked ~ .vector-dropdown-content, |
| .mw-parser-output > .vtm-quote:first-of-type,
| | #vector-page-titlebar-toc.vector-dropdown--open .vector-dropdown-content { |
| .mw-parser-output > p:first-of-type { | | display: block !important; |
| animation: vtm-cascade-slide 0.60s cubic-bezier(0.22, 1, 0.36, 1) both !important;
| | visibility: visible !important; |
| animation-delay: 0.10s !important;
| | opacity: 1 !important; |
| } | | pointer-events: auto !important; |
| | } |
|
| |
|
| /* 3º Passo em diante: Seções H2 escalonadas progressivamente */ | | /* Nav TOC dentro do dropdown — restaurar visibilidade */ |
| /* 1ª Seção H2 */
| | #vector-page-titlebar-toc #vector-toc, |
| .mw-parser-output > h2:nth-of-type(1),
| | #vector-page-titlebar-toc .vector-toc, |
| .mw-parser-output > .mw-heading2:nth-of-type(1) {
| | #vector-page-titlebar-toc nav, |
| animation: vtm-cascade-slide 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important; | | #vector-toc-unpinned-container, |
| animation-delay: 0.20s !important;
| | #vector-page-titlebar-toc .vector-unpinned-container, |
| }
| | #vector-page-titlebar-toc #vector-toc-unpinned-container { |
| | | display: block !important; |
| /* 2ª Seção H2 */
| | visibility: visible !important; |
| .mw-parser-output > h2:nth-of-type(2),
| | position: static !important; |
| .mw-parser-output > .mw-heading2:nth-of-type(2) {
| | width: 100% !important; |
| animation: vtm-cascade-slide 0.68s cubic-bezier(0.22, 1, 0.36, 1) both !important; | | max-width: 100% !important; |
| animation-delay: 0.35s !important;
| | height: auto !important; |
| }
| | overflow: visible !important; |
| | |
| /* 3ª Seção H2 */
| |
| .mw-parser-output > h2:nth-of-type(3),
| |
| .mw-parser-output > .mw-heading2:nth-of-type(3) {
| |
| animation: vtm-cascade-slide 0.70s cubic-bezier(0.22, 1, 0.36, 1) both !important; | |
| animation-delay: 0.50s !important; | |
| }
| |
| | |
| /* 4ª Seção H2 */
| |
| .mw-parser-output > h2:nth-of-type(4),
| |
| .mw-parser-output > .mw-heading2:nth-of-type(4) {
| |
| animation: vtm-cascade-slide 0.72s cubic-bezier(0.22, 1, 0.36, 1) both !important; | |
| animation-delay: 0.65s !important;
| |
| }
| |
| | |
| /* 5ª Seção H2 */
| |
| .mw-parser-output > h2:nth-of-type(5),
| |
| .mw-parser-output > .mw-heading2:nth-of-type(5) {
| |
| animation: vtm-cascade-slide 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important; | |
| animation-delay: 0.80s !important;
| |
| }
| |
| | |
| /* 6ª Seção H2 em diante */
| |
| .mw-parser-output > h2:nth-of-type(n+6),
| |
| .mw-parser-output > .mw-heading2:nth-of-type(n+6) {
| |
| animation: vtm-cascade-slide 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
| |
| animation-delay: 0.95s !important;
| |
| }
| |
| | |
| /* Tabelas e elementos gerais */
| |
| .mw-parser-output > table.wikitable {
| |
| animation: vtm-cascade-slide 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important;
| |
| animation-delay: 0.25s !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; | | opacity: 1 !important; |
| | left: auto !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
| }
| |
|
| |
|
| /* ========================================================================== | | /* Estilização do conteúdo do TOC no dropdown */ |
| 2. CODEX & VECTOR 2022 DESIGN TOKENS (VARIÁVEIS NATIVAS)
| | #vector-page-titlebar-toc .vector-toc .vector-toc-contents, |
| ========================================================================== */
| | #vector-page-titlebar-toc #vector-toc .vector-toc-contents { |
| :root,
| | padding: 4px 0 !important; |
| 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; | | #vector-page-titlebar-toc .vector-toc .vector-toc-list-item a, |
| --color-base--hover: #ffffff !important;
| | #vector-page-titlebar-toc #vector-toc a { |
| --color-base-fixed: #ddd9d0 !important;
| | color: var(--vtm-text, #ddd9d0) !important; |
| --color-subtle: #9e9a91 !important;
| | font-family: var(--vtm-font-body, 'Inter', sans-serif) !important; |
| --color-placeholder: #6e6b65 !important;
| | font-size: 0.92em !important; |
| --color-disabled: #55534e !important;
| | padding: 8px 12px !important; |
| --color-inverted: #08080b !important;
| | display: block !important; |
| --color-progressive: #e55353 !important;
| | text-decoration: none !important; |
| --color-progressive--hover: #ff2a3f !important;
| | border-radius: 3px !important; |
| --color-destructive: #c9182b !important;
| | transition: all 0.15s ease !important; |
| | min-height: 36px !important; |
| | line-height: 1.4 !important; |
| | } |
|
| |
|
| --border-color-base: #252530 !important; | | #vector-page-titlebar-toc .vector-toc .vector-toc-list-item a:hover, |
| --border-color-subtle: #1c1c25 !important; | | #vector-page-titlebar-toc #vector-toc a:hover { |
| --border-color-interactive: #3d0a12 !important;
| | color: var(--vtm-blood-neon, #ff2a3f) !important; |
| --border-color-muted: #20202a !important;
| | background: rgba(139, 0, 0, 0.12) !important; |
| --border-color-progressive: #8b0000 !important;
| | text-shadow: 0 0 6px rgba(201, 24, 43, 0.4) !important; |
| | } |
|
| |
|
| --vtm-void: #08080b; | | /* Título do TOC */ |
| --vtm-abyss: #0c0c10; | | #vector-page-titlebar-toc .vector-toc .vector-toc-heading, |
| --vtm-obsidian: #101015;
| | #vector-page-titlebar-toc .vector-pinnable-header-label { |
| --vtm-onyx: #16161d;
| | color: var(--vtm-gold, #c5a059) !important; |
| --vtm-slate: #1c1c25; | | font-family: var(--vtm-font-title, 'Cinzel', serif) !important; |
| --vtm-charcoal: #22222d;
| | font-weight: 700 !important; |
| --vtm-text: #ddd9d0;
| | font-size: 0.85em !important; |
| --vtm-text-dim: #9e9a91;
| | text-transform: uppercase !important; |
| --vtm-text-ghost: #5e5b55;
| | letter-spacing: 1px !important; |
| --vtm-blood: #8b0000;
| | padding: 6px 12px 8px !important; |
| --vtm-blood-vivid: #c9182b;
| | border-bottom: 1px solid var(--vtm-border-blood, #3d0a12) !important; |
| --vtm-blood-neon: #ff2a3f;
| | margin-bottom: 4px !important; |
| --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; | |
| } | |
|
| |
|
| /* ========================================================================== | | /* Indentação dos sub-itens */ |
| 3. ESTRUTURA GLOBAL & CONTAINERS
| | #vector-page-titlebar-toc .vector-toc-level-2 { |
| ========================================================================== */
| | padding-left: 14px !important; |
| 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,
| | #vector-page-titlebar-toc .vector-toc-level-3 { |
| .mw-page-container-inner,
| | padding-left: 28px !important; |
| .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,
| | /* Número de seção */ |
| .vector-body,
| | #vector-page-titlebar-toc .vector-toc-numb { |
| .mw-body-content,
| | color: var(--vtm-text-ghost, #5e5b55) !important; |
| .mw-content-container, | | margin-right: 6px !important; |
| #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,
| | /* Ocultar pin/unpin buttons dentro do dropdown TOC */ |
| .vector-header-container,
| | #vector-page-titlebar-toc .vector-pinnable-header-toggle-button { |
| .mw-header,
| | display: none !important; |
| #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 { | | /* Scrollbar estilizada */ |
| background: rgba(8, 8, 11, 0.97) !important;
| | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar { |
| } | | width: 4px !important; |
| | } |
|
| |
|
| #footer, | | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar-track { |
| .mw-footer,
| | background: transparent !important; |
| .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;
| |
| } | |
|
| |
|
| /* ==========================================================================
| | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar-thumb { |
| 4. VISUALEDITOR & OOUI TOOLBAR (ALTO CONTRASTE)
| | background: var(--vtm-border-blood, #3d0a12) !important; |
| ========================================================================== */
| | border-radius: 4px !important; |
| .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 {
| |
| background: #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 {
| |
| 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;
| |
| } | | } |