|
|
| (12 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ========================================================================== | | /* ========================================================================== |
| TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v16 - MOBILE HIDDEN SIDEBARS) | | 27. FIX: TOC DROPDOWN — FUNCIONAL EM MOBILE (max-width: 1200px) |
| ========================================================================== */ | | ========================================================================== */ |
|
| |
|
| @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&family=Special+Elite&display=swap'); | | @media screen and (max-width: 1200px) { |
|
| |
|
| /* ========================================================================== | | /* Botão TOC no titlebar — garantir visibilidade */ |
| 1. CASCATA PROGRESSIVA SINCRONIZADA (.vtm-section-block)
| | #vector-page-titlebar-toc, |
| ========================================================================== */
| | .vector-page-titlebar-toc { |
| @keyframes vtm-section-slide {
| | display: block !important; |
| 0% {
| | visibility: visible !important; |
| opacity: 0; | | position: relative !important; |
| transform: translateX(-45px); | | width: auto !important; |
| }
| | max-width: none !important; |
| 100% {
| | height: auto !important; |
| opacity: 1; | | overflow: visible !important; |
| transform: translateX(0); | | opacity: 1 !important; |
| | left: auto !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| | z-index: 100 !important; |
| } | | } |
| }
| |
|
| |
| #firstHeading,
| |
| .mw-first-heading {
| |
| animation: vtm-section-slide 0.55s cubic-bezier(0.2, 1, 0.3, 1) both !important;
| |
| animation-delay: 0.04s !important;
| |
| margin-bottom: 16px !important;
| |
| padding-bottom: 8px !important;
| |
| will-change: transform, opacity;
| |
| }
| |
|
| |
| .vtm-section-block {
| |
| opacity: 0;
| |
| animation: vtm-section-slide 0.80s cubic-bezier(0.2, 1, 0.3, 1) forwards !important;
| |
| margin-bottom: 26px !important;
| |
| padding: 4px 0 !important;
| |
| will-change: transform, opacity;
| |
| }
| |
|
| |
| #content,
| |
| .mw-body {
| |
| overflow-x: hidden !important;
| |
| }
| |
|
| |
|
| @media (prefers-reduced-motion: reduce) {
| | /* Label/ícone do botão TOC */ |
| #firstHeading, | | #vector-page-titlebar-toc .vector-dropdown-label { |
| .mw-first-heading,
| | cursor: pointer !important; |
| .vtm-section-block {
| | display: inline-flex !important; |
| animation: none !important; | | align-items: center !important; |
| transform: none !important; | | padding: 6px !important; |
| opacity: 1 !important; | | border-radius: 4px !important; |
| } | | } |
| }
| |
|
| |
| /* ==========================================================================
| |
| 2. CODEX & VECTOR DESIGN TOKENS (VARIÁVEIS NATIVAS)
| |
| ========================================================================== */
| |
| :root,
| |
| html,
| |
| body,
| |
| .skin-vector-2022,
| |
| .skin-vector,
| |
| .mw-special-Userlogin {
| |
| --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;
| |
| --vtm-font-typewriter: 'Special Elite', 'Courier New', 'American Typewriter', monospace;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 3. ESTRUTURA GLOBAL & CONTAINERS
| |
| ========================================================================== */
| |
| html,
| |
| html body,
| |
| body.skin-vector-2022,
| |
| body.skin-vector,
| |
| body.mediawiki,
| |
| .mw-special-Userlogin {
| |
| 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,
| |
| .mw-special-Userlogin #content {
| |
| background: var(--vtm-obsidian) !important;
| |
| background-color: var(--vtm-obsidian) !important;
| |
| color: var(--vtm-text) !important;
| |
| border-color: var(--vtm-border) !important;
| |
| }
| |
|
| |
| /* Padding interno confortável */
| |
| .mw-body-content,
| |
| #bodyContent,
| |
| .mw-parser-output {
| |
| padding-left: 20px !important;
| |
| padding-right: 20px !important;
| |
| padding-top: 15px !important;
| |
| padding-bottom: 25px !important;
| |
| box-sizing: border-box !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. TELA DE LOGIN (SPECIAL:USERLOGIN & FORMULÁRIO CODEX)
| |
| ========================================================================== */
| |
| .mw-special-Userlogin .mw-htmlform,
| |
| .mw-special-Userlogin .mw-htmlform-codex,
| |
| #userloginForm form,
| |
| .mw-htmlform.mw-htmlform-codex {
| |
| max-width: 440px !important;
| |
| background: linear-gradient(135deg, rgba(22, 22, 29, 0.96) 0%, rgba(14, 14, 19, 0.98) 100%) !important;
| |
| border: 1px solid var(--vtm-border-blood) !important;
| |
| border-left: 4px solid var(--vtm-blood) !important;
| |
| border-radius: 4px !important;
| |
| padding: 24px 28px !important;
| |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
| |
| margin-top: 20px !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-label__label__text,
| |
| .mw-special-Userlogin .cdx-label,
| |
| #userloginForm label {
| |
| color: var(--vtm-gold) !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 700 !important;
| |
| font-size: 0.92em !important;
| |
| letter-spacing: 0.8px !important;
| |
| text-transform: uppercase !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-text-input,
| |
| .mw-special-Userlogin .cdx-text-input__input,
| |
| #userloginForm input.loginText,
| |
| #userloginForm input[type="text"],
| |
| #userloginForm input[type="password"] {
| |
| background: #0b0b10 !important;
| |
| background-color: #0b0b10 !important;
| |
| color: #ffffff !important;
| |
| border: 1px solid var(--vtm-border-blood) !important;
| |
| border-radius: 4px !important;
| |
| padding: 10px 14px !important;
| |
| font-size: 1em !important;
| |
| box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
| |
| transition: all 0.25s ease !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-text-input__input:focus,
| |
| #userloginForm input.loginText:focus,
| |
| #userloginForm input[type="text"]:focus,
| |
| #userloginForm input[type="password"]:focus {
| |
| border-color: var(--vtm-blood-neon) !important;
| |
| box-shadow: 0 0 10px rgba(201, 24, 43, 0.6), inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
| |
| outline: none !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-button--action-progressive.cdx-button--weight-primary,
| |
| button#wpLoginAttempt,
| |
| #wpLoginAttempt,
| |
| #userloginForm .cdx-button {
| |
| background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
| |
| background-color: #660e1a !important;
| |
| color: #ffffff !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-size: 1.05em !important;
| |
| font-weight: 800 !important;
| |
| letter-spacing: 1px !important;
| |
| text-transform: uppercase !important;
| |
| border: 1px solid var(--vtm-blood-neon) !important;
| |
| border-radius: 4px !important;
| |
| padding: 12px 20px !important;
| |
| cursor: pointer !important;
| |
| box-shadow: 0 4px 16px rgba(201, 24, 43, 0.5) !important;
| |
| transition: all 0.25s ease !important;
| |
| margin-top: 18px !important;
| |
| width: 100% !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-button--action-progressive.cdx-button--weight-primary:hover,
| |
| button#wpLoginAttempt:hover,
| |
| #wpLoginAttempt:hover {
| |
| background: linear-gradient(180deg, #b31529 0%, #5a0a15 100%) !important;
| |
| box-shadow: 0 0 22px rgba(255, 42, 63, 0.85) !important;
| |
| transform: translateY(-1px) !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-checkbox__label,
| |
| #userloginForm .mw-userlogin-rememberme {
| |
| color: var(--vtm-text-dim) !important;
| |
| font-size: 0.95em !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin .cdx-checkbox__input {
| |
| accent-color: var(--vtm-blood) !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin a,
| |
| #userloginForm a {
| |
| color: #e55353 !important;
| |
| text-decoration: none !important;
| |
| transition: all 0.2s ease !important;
| |
| }
| |
|
| |
| .mw-special-Userlogin a:hover,
| |
| #userloginForm a:hover {
| |
| color: var(--vtm-blood-neon) !important;
| |
| text-shadow: 0 0 8px var(--vtm-blood-glow) !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 5. VISUALEDITOR & OOUI TOOLBAR
| |
| ========================================================================== */
| |
| .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;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 6. PAINEIS FIXOS & DROPDOWNS
| |
| ========================================================================== */
| |
| .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;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 7. 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;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 8. 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,
| | #vector-page-titlebar-toc .vector-dropdown-label:hover { |
| #wpTextbox1,
| | background: rgba(139, 0, 0, 0.15) !important; |
| .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;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 9. 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;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 10. 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;
| |
| margin-top: 20px !important;
| |
| }
| |
| | |
| h3, .mw-heading3 h3 {
| |
| font-size: 1.2em !important;
| |
| color: var(--vtm-gold) !important;
| |
| margin-top: 14px !important;
| |
| }
| |
| | |
| h4, .mw-heading4 h4 {
| |
| font-size: 1.05em !important;
| |
| color: #c9182b !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;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 11. CITAÇÕES / BLOCKQUOTES (.vtm-quote)
| |
| ========================================================================== */
| |
| blockquote,
| |
| .vtm-quote,
| |
| .mw-parser-output blockquote,
| |
| .mw-parser-output .vtm-quote,
| |
| .mw-body blockquote,
| |
| .mw-body .vtm-quote {
| |
| font-family: var(--vtm-font-typewriter) !important;
| |
| font-size: 1.05em !important;
| |
| line-height: 1.6 !important;
| |
| color: #c8c3b8 !important;
| |
| text-align: left !important;
| |
| background: linear-gradient(135deg, rgba(22, 22, 29, 0.95) 0%, rgba(12, 12, 16, 0.98) 100%) !important;
| |
| border: none !important;
| |
| border-left: 3px solid var(--vtm-blood) !important;
| |
| border-radius: 0 4px 4px 0 !important;
| |
| padding: 25px 15px 15px 15px !important;
| |
| margin: 1.2em 0.8em !important;
| |
| position: relative !important;
| |
| box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
| |
| letter-spacing: 0.3px !important;
| |
| }
| |
| | |
| blockquote p,
| |
| .vtm-quote p,
| |
| .mw-parser-output blockquote p,
| |
| .mw-parser-output .vtm-quote p {
| |
| font-family: var(--vtm-font-typewriter) !important;
| |
| color: #c8c3b8 !important;
| |
| text-align: left !important;
| |
| margin: 0 0 6px 0 !important;
| |
| }
| |
| | |
| blockquote p:last-child,
| |
| .vtm-quote p:last-child,
| |
| .mw-parser-output blockquote p:last-child,
| |
| .mw-parser-output .vtm-quote p:last-child {
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| blockquote cite,
| |
| blockquote footer,
| |
| blockquote .quote-source,
| |
| .vtm-quote cite,
| |
| .vtm-quote footer,
| |
| .vtm-quote .quote-source {
| |
| display: block !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-size: 0.85em !important;
| |
| color: var(--vtm-gold) !important;
| |
| margin-top: 8px !important;
| |
| text-align: right !important;
| |
| font-style: normal !important;
| |
| letter-spacing: 1px !important;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 12. LOGO VETORIAL SVG COM AURA RUBRA (RENDERIZAÇÃO GARANTIDA)
| |
| ========================================================================== */
| |
| .mw-logo {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| height: 96px !important;
| |
| min-height: 96px !important;
| |
| min-width: 260px !important;
| |
| max-height: none !important; | |
| padding: 4px 0 !important;
| |
| text-decoration: none !important;
| |
| border: none !important;
| |
| }
| |
| | |
| /* Pseudo-elemento no container do logo: garante exibição sempre */
| |
| .mw-logo::before {
| |
| content: "" !important;
| |
| display: block !important;
| |
| background-image: url('/images/b/be/Wiki_Logo.svg') !important;
| |
| background-size: contain !important;
| |
| background-repeat: no-repeat !important;
| |
| background-position: center left !important;
| |
| height: 96px !important;
| |
| width: 270px !important;
| |
| max-height: 96px !important;
| |
| max-width: 320px !important;
| |
| /* Sombra vermelha nos contornos do vetor */
| |
| filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;
| |
| transition: filter 0.3s ease, transform 0.2s ease !important;
| |
| }
| |
| | |
| .mw-logo:hover::before {
| |
| filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;
| |
| transform: scale(1.02) !important;
| |
| }
| |
| | |
| /* Se existir tag img nativa, estiliza da mesma forma ou oculta duplicata */
| |
| .mw-logo-icon {
| |
| display: none !important;
| |
| }
| |
| | |
| .mw-logo-container,
| |
| .mw-logo-wordmark,
| |
| .mw-logo-tagline {
| |
| display: none !important;
| |
| }
| |
| | |
| .mw-wiki-logo {
| |
| background-image: url('/images/b/be/Wiki_Logo.svg') !important;
| |
| background-size: contain !important;
| |
| background-repeat: no-repeat !important;
| |
| background-position: center !important;
| |
| border: none !important;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 13. MENU HAMBÚRGUER (AURA RUBRA & HOVER EFFECT)
| |
| ========================================================================== */
| |
| #vector-main-menu-dropdown,
| |
| .vector-main-menu-dropdown,
| |
| #vector-main-menu-dropdown .vector-dropdown-label,
| |
| .vector-main-menu-dropdown .vector-dropdown-label,
| |
| #vector-main-menu-dropdown-label,
| |
| .vector-header .vector-main-menu-dropdown .cdx-button,
| |
| #vector-main-menu-dropdown .cdx-button,
| |
| .vector-main-menu-dropdown-checkbox + label {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| outline: none !important;
| |
| }
| |
| | |
| #vector-main-menu-dropdown .vector-icon,
| |
| .vector-main-menu-dropdown .vector-icon,
| |
| #vector-main-menu-dropdown .cdx-button__icon,
| |
| .mw-ui-icon-wikimedia-menu,
| |
| #vector-main-menu-dropdown-label .vector-icon,
| |
| #vector-main-menu-dropdown-label::before,
| |
| .vector-main-menu-dropdown-checkbox + label .vector-icon {
| |
| color: #f5f5f5 !important;
| |
| background-color: #f5f5f5 !important;
| |
| filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;
| |
| transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
| |
| }
| |
| | |
| #vector-main-menu-dropdown:hover .vector-icon, | |
| .vector-main-menu-dropdown:hover .vector-icon,
| |
| #vector-main-menu-dropdown:hover .cdx-button__icon,
| |
| #vector-main-menu-dropdown .vector-dropdown-label:hover .vector-icon,
| |
| .vector-main-menu-dropdown .vector-dropdown-label:hover .vector-icon,
| |
| #vector-main-menu-dropdown:hover .mw-ui-icon-wikimedia-menu,
| |
| #vector-main-menu-dropdown-label:hover .vector-icon,
| |
| .vector-main-menu-dropdown-checkbox + label:hover .vector-icon {
| |
| color: #ffffff !important;
| |
| background-color: #ffffff !important;
| |
| filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;
| |
| transform: scale(1.08) !important;
| |
| }
| |
| | |
| #vector-main-menu-dropdown .vector-dropdown-label,
| |
| .vector-main-menu-dropdown .vector-dropdown-label,
| |
| #vector-main-menu-dropdown-label,
| |
| .vector-main-menu-dropdown-checkbox + label {
| |
| filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;
| |
| transition: filter 0.3s ease, transform 0.2s ease !important;
| |
| border-radius: 4px !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| #vector-main-menu-dropdown .vector-dropdown-label:hover,
| |
| .vector-main-menu-dropdown .vector-dropdown-label:hover,
| |
| #vector-main-menu-dropdown-label:hover,
| |
| .vector-main-menu-dropdown-checkbox + label:hover {
| |
| filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;
| |
| }
| |
| | |
| #vector-main-menu-dropdown .vector-dropdown-label:focus,
| |
| #vector-main-menu-dropdown .vector-dropdown-label:active,
| |
| #vector-main-menu-dropdown-checkbox:focus + .vector-dropdown-label,
| |
| #vector-main-menu-dropdown-checkbox:focus + label {
| |
| outline: none !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 14. TARJA DE CENSURA & SEGREDO DINÂMICO (.vtm-segredo)
| |
| ========================================================================== */
| |
| | |
| .vtm-segredo {
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| /* --- CENSURADO: tarja preta pura e limpa --- */
| |
| .vtm-segredo.is-redacted {
| |
| background: #0a0a0e !important;
| |
| color: transparent !important;
| |
| user-select: none !important;
| |
| -webkit-user-select: none !important;
| |
| border-radius: 2px !important;
| |
| padding: 1px 6px !important;
| |
| cursor: help !important;
| |
| }
| |
| | |
| .vtm-segredo.is-redacted * {
| |
| color: transparent !important;
| |
| user-select: none !important;
| |
| -webkit-user-select: none !important;
| |
| }
| |
| | |
| .vtm-segredo.is-redacted:hover {
| |
| background: #141418 !important;
| |
| }
| |
| | |
| /* --- REVELADO / DESCLASSIFICADO --- */
| |
| .vtm-segredo.is-revealed {
| |
| background: rgba(45, 12, 18, 0.4) !important;
| |
| color: #f5f0e6 !important;
| |
| font-family: 'Special Elite', 'Courier New', monospace !important;
| |
| border-radius: 3px !important;
| |
| padding: 1px 6px !important;
| |
| user-select: text !important;
| |
| }
| |
| | |
| .vtm-segredo.is-revealed * {
| |
| color: #f5f0e6 !important;
| |
| }
| |
| | |
| /* --- FORMATO BLOCO (tipo=bloco) --- */
| |
| .vtm-segredo[data-tipo="bloco"] {
| |
| display: block !important;
| |
| margin: 1.2em 0 !important;
| |
| padding: 16px 20px !important;
| |
| border-radius: 4px !important;
| |
| }
| |
| | |
| .vtm-segredo[data-tipo="bloco"].is-redacted {
| |
| background: #0a0a0e !important;
| |
| min-height: 60px !important;
| |
| border-left: 4px solid #2a2a30 !important;
| |
| }
| |
| | |
| .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;
| |
| border-left: 4px solid #c5a059 !important;
| |
| }
| |
| /* ==========================================================================
| |
| 15. CONTRASTE & LEGIBILIDADE NOS MODAIS OOUI DO VISUALEDITOR
| |
| ========================================================================== */
| |
| .oo-ui-window-frame,
| |
| .oo-ui-dialog,
| |
| .oo-ui-panelLayout-padded,
| |
| .oo-ui-processDialog-content,
| |
| .ve-ui-mwTransclusionDialog {
| |
| background: #121218 !important;
| |
| background-color: #121218 !important;
| |
| color: #ede9e1 !important;
| |
| border: 1px solid #4a101a !important;
| |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95) !important;
| |
| }
| |
| | |
| .oo-ui-window-head,
| |
| .oo-ui-processDialog-title,
| |
| .oo-ui-processDialog-navigation {
| |
| background: #0c0c10 !important;
| |
| border-bottom: 1px solid #3d0a12 !important;
| |
| color: #c5a059 !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 700 !important;
| |
| }
| |
| | |
| .oo-ui-processDialog-title .oo-ui-labelElement-label {
| |
| color: #ffffff !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 800 !important;
| |
| letter-spacing: 0.5px !important;
| |
| }
| |
| | |
| /* Campos de entrada dentro do modal */
| |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input,
| |
| .oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input,
| |
| .ve-ui-mwTransclusionDialog input,
| |
| .ve-ui-mwTransclusionDialog textarea {
| |
| background: #08080c !important;
| |
| background-color: #08080c !important;
| |
| color: #ffffff !important;
| |
| font-family: var(--vtm-font-body) !important;
| |
| font-size: 0.95em !important;
| |
| border: 1px solid #3d0a12 !important;
| |
| border-radius: 4px !important;
| |
| padding: 8px 12px !important;
| |
| box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
| |
| }
| |
| | |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input:focus,
| |
| .oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input:focus {
| |
| border-color: #ff2a3f !important;
| |
| box-shadow: 0 0 10px rgba(201, 24, 43, 0.5), inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
| |
| outline: none !important;
| |
| }
| |
| | |
| /* Placeholders claros */
| |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder,
| |
| .oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input::placeholder {
| |
| color: #7a766e !important;
| |
| opacity: 1 !important;
| |
| }
| |
| | |
| /* Rótulos e descrições dos parâmetros */
| |
| .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
| |
| .ve-ui-mwParameterPage-label,
| |
| .ve-ui-mwTemplateTitleInputWidget-label {
| |
| color: #c5a059 !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 700 !important;
| |
| font-size: 0.92em !important;
| |
| }
| |
| | |
| .oo-ui-fieldLayout-helpText,
| |
| .ve-ui-mwParameterPage-description,
| |
| .oo-ui-fieldLayout-help {
| |
| color: #b0aca4 !important;
| |
| font-size: 0.85em !important;
| |
| line-height: 1.4 !important;
| |
| }
| |
| | |
| /* Painel lateral de seleção de parâmetros */
| |
| .oo-ui-bookletLayout-outline,
| |
| .oo-ui-outlineSelectWidget,
| |
| .oo-ui-outlineOptionWidget {
| |
| background: #0d0d12 !important;
| |
| color: #ddd9d0 !important;
| |
| border-right: 1px solid #3d0a12 !important;
| |
| }
| |
| | |
| .oo-ui-outlineOptionWidget-selected {
| |
| background: #3d0a12 !important;
| |
| color: #ffffff !important;
| |
| font-weight: 700 !important;
| |
| }
| |
| | |
| .oo-ui-outlineOptionWidget-highlighted {
| |
| background: #251016 !important;
| |
| color: #ff2a3f !important;
| |
| }
| |
| | |
| /* Botão Aplicar Mudanças */
| |
| .oo-ui-processDialog-actions-primary .oo-ui-buttonElement-button {
| |
| background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
| |
| border: 1px solid #ff2a3f !important;
| |
| border-radius: 4px !important;
| |
| }
| |
| | |
| .oo-ui-processDialog-actions-primary .oo-ui-labelElement-label {
| |
| color: #ffffff !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 800 !important;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 16. VISUALEDITOR — VISIBILIDADE TOTAL & EDIÇÃO DE SEGREDO
| |
| ========================================================================== */
| |
| .ve-ui-surface,
| |
| .ve-ce-surface,
| |
| .ve-ce-documentNode,
| |
| .ve-init-mw-desktopArticleTarget-surface {
| |
| background: #101015 !important;
| |
| background-color: #101015 !important;
| |
| color: #ede9e1 !important;
| |
| caret-color: #ff2a3f !important;
| |
| }
| |
| | |
| .ve-ce-documentNode p,
| |
| .ve-ce-documentNode h1,
| |
| .ve-ce-documentNode h2,
| |
| .ve-ce-documentNode h3,
| |
| .ve-ce-documentNode h4,
| |
| .ve-ce-documentNode li,
| |
| .ve-ce-documentNode td,
| |
| .ve-ce-documentNode div,
| |
| .ve-ce-surface .vtm-section-block {
| |
| opacity: 1 !important;
| |
| visibility: visible !important;
| |
| animation: none !important;
| |
| transform: none !important;
| |
| }
| |
| | |
| /* Dentro do editor, o Segredo DEVE ser visível para o editor poder ler e modificar */
| |
| .ve-ce-surface .vtm-segredo,
| |
| .ve-ui-surface .vtm-segredo,
| |
| .ve-ce-documentNode .vtm-segredo,
| |
| .ve-ce-leafNode.ve-ce-mwTransclusionInlineNode,
| |
| .ve-ce-leafNode.ve-ce-mwTransclusionBlockNode {
| |
| background: rgba(60, 15, 25, 0.45) !important;
| |
| color: #ffffff !important;
| |
| border: 1px dashed #ff2a3f !important;
| |
| border-radius: 3px !important;
| |
| padding: 2px 6px !important;
| |
| user-select: text !important;
| |
| -webkit-user-select: text !important;
| |
| }
| |
| | |
| .ve-ce-surface .vtm-segredo .vtm-segredo-conteudo,
| |
| .ve-ui-surface .vtm-segredo .vtm-segredo-conteudo,
| |
| .ve-ce-documentNode .vtm-segredo .vtm-segredo-conteudo {
| |
| opacity: 1 !important;
| |
| visibility: visible !important;
| |
| color: #ffffff !important;
| |
| pointer-events: auto !important;
| |
| }
| |
| | |
| .ve-ce-surface .vtm-segredo::after,
| |
| .ve-ui-surface .vtm-segredo::after,
| |
| .ve-ce-documentNode .vtm-segredo::after {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Balão pop-up de predefinição no VisualEditor */
| |
| .ve-ui-contextItemWidget,
| |
| .ve-ui-mwTransclusionContextItem {
| |
| background: #161622 !important;
| |
| border: 1px solid #4a101a !important;
| |
| border-left: 4px solid #8b0000 !important;
| |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9) !important;
| |
| border-radius: 4px !important;
| |
| }
| |
| | |
| .ve-ui-contextItemWidget .oo-ui-labelElement-label {
| |
| color: #ffffff !important;
| |
| font-family: var(--vtm-font-title) !important;
| |
| font-weight: 700 !important;
| |
| }
| |
| | |
| .ve-ui-contextItemWidget .oo-ui-buttonElement-button {
| |
| background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
| |
| border: 1px solid #ff2a3f !important;
| |
| border-radius: 3px !important;
| |
| }
| |
| | |
| .ve-ui-contextItemWidget .oo-ui-buttonElement-button .oo-ui-labelElement-label {
| |
| color: #ffffff !important;
| |
| font-weight: 800 !important;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| 17. RESPONSIVIDADE MOBILE & FLUID UI (@media (max-width: 768px))
| |
| ========================================================================== */
| |
| @media (max-width: 768px) {
| |
| /* --- A. Animação Suave Sem Deslocamento Brusco --- */
| |
| @keyframes vtm-section-slide {
| |
| 0% {
| |
| opacity: 0;
| |
| transform: translateX(-15px);
| |
| }
| |
| 100% {
| |
| opacity: 1;
| |
| transform: translateX(0);
| |
| }
| |
| } | | } |
|
| |
|
| /* Prevenção rigorosa de overflow horizontal no container */ | | /* Container unpinned — permitir exibição como dropdown */ |
| html, body, .mw-page-container, #content, .mw-body { | | #vector-page-titlebar-toc .vector-dropdown-content { |
| overflow-x: hidden !important; | | position: absolute !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; |
| } | | } |
|
| |
|
| /* --- B. Ocultação de Menus Laterais Fixos por Padrão (Exclusivo Mobile) --- */ | | /* Quando o dropdown está aberto (checkbox ou classe) */ |
| .vector-column-start, | | #vector-page-titlebar-toc-checkbox:checked ~ .vector-dropdown-content, |
| .vector-column-end,
| | #vector-page-titlebar-toc.vector-dropdown--open .vector-dropdown-content { |
| .vector-main-menu-pinned-container,
| | display: block !important; |
| .vector-page-tools-pinned-container,
| | visibility: visible !important; |
| .vector-toc-pinned-container,
| | opacity: 1 !important; |
| .vector-appearance-pinned-container,
| | pointer-events: auto !important; |
| #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 */ | | /* Nav TOC dentro do dropdown — restaurar visibilidade */ |
| .mw-page-container-inner, | | #vector-page-titlebar-toc #vector-toc, |
| .vector-body, | | #vector-page-titlebar-toc .vector-toc, |
| .mw-content-container, | | #vector-page-titlebar-toc nav, |
| #content { | | #vector-toc-unpinned-container, |
| | #vector-page-titlebar-toc .vector-unpinned-container, |
| | #vector-page-titlebar-toc #vector-toc-unpinned-container { |
| | display: block !important; |
| | visibility: visible !important; |
| | position: static !important; |
| width: 100% !important; | | width: 100% !important; |
| max-width: 100% !important; | | max-width: 100% !important; |
| margin-left: 0 !important; | | height: auto !important; |
| margin-right: 0 !important; | | overflow: visible !important; |
| | opacity: 1 !important; |
| | left: auto !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
|
| |
|
| /* Menus flutuantes quando abertos pelo botão hambúrguer / dropdown */ | | /* Estilização do conteúdo do TOC no dropdown */ |
| .vector-dropdown-content, | | #vector-page-titlebar-toc .vector-toc .vector-toc-contents, |
| .vector-dropdown .vector-dropdown-content,
| | #vector-page-titlebar-toc #vector-toc .vector-toc-contents { |
| #vector-main-menu-dropdown .vector-dropdown-content { | | padding: 4px 0 !important; |
| max-width: 90vw !important; | |
| z-index: 1000 !important;
| |
| } | | } |
|
| |
|
| /* --- C. Spacing & Container Padding no Mobile --- */ | | #vector-page-titlebar-toc .vector-toc .vector-toc-list-item a, |
| .mw-body-content,
| | #vector-page-titlebar-toc #vector-toc a { |
| #bodyContent, | | color: var(--vtm-text, #ddd9d0) !important; |
| .mw-parser-output {
| | font-family: var(--vtm-font-body, 'Inter', sans-serif) !important; |
| padding-left: 12px !important; | | font-size: 0.92em !important; |
| padding-right: 12px !important; | | padding: 8px 12px !important; |
| padding-top: 10px !important; | | display: block !important; |
| padding-bottom: 20px !important; | | text-decoration: none !important; |
| }
| | border-radius: 3px !important; |
| | | transition: all 0.15s ease !important; |
| /* --- D. Cabeçalho & Logo Adaptativos --- */
| | min-height: 36px !important; |
| .mw-logo {
| | line-height: 1.4 !important; |
| height: 64px !important;
| |
| min-height: 64px !important; | |
| min-width: 180px !important; | |
| max-width: 220px !important; | |
| } | | } |
|
| |
|
| .mw-logo::before { | | #vector-page-titlebar-toc .vector-toc .vector-toc-list-item a:hover, |
| height: 60px !important; | | #vector-page-titlebar-toc #vector-toc a:hover { |
| width: 200px !important; | | color: var(--vtm-blood-neon, #ff2a3f) !important; |
| max-height: 60px !important; | | background: rgba(139, 0, 0, 0.12) !important; |
| max-width: 200px !important;
| | text-shadow: 0 0 6px rgba(201, 24, 43, 0.4) !important; |
| } | | } |
|
| |
|
| /* --- E. Tipografia Proporcional --- */ | | /* Título do TOC */ |
| h1.firstHeading, | | #vector-page-titlebar-toc .vector-toc .vector-toc-heading, |
| .mw-first-heading,
| | #vector-page-titlebar-toc .vector-pinnable-header-label { |
| #firstHeading,
| | color: var(--vtm-gold, #c5a059) !important; |
| .mw-body h1 {
| | font-family: var(--vtm-font-title, 'Cinzel', serif) !important; |
| font-size: 1.6em !important; | | font-weight: 700 !important; |
| line-height: 1.25 !important; | | font-size: 0.85em !important; |
| padding-bottom: 6px !important; | | text-transform: uppercase !important; |
| margin-bottom: 12px !important; | | letter-spacing: 1px !important; |
| word-break: break-word !important; | | padding: 6px 12px 8px !important; |
| | border-bottom: 1px solid var(--vtm-border-blood, #3d0a12) !important; |
| | margin-bottom: 4px !important; |
| } | | } |
|
| |
|
| h2, .mw-heading2 h2 { | | /* Indentação dos sub-itens */ |
| font-size: 1.3em !important;
| | #vector-page-titlebar-toc .vector-toc-level-2 { |
| line-height: 1.3 !important;
| | padding-left: 14px !important; |
| margin-top: 16px !important;
| |
| padding-bottom: 4px !important; | |
| } | | } |
|
| |
|
| h3, .mw-heading3 h3 { | | #vector-page-titlebar-toc .vector-toc-level-3 { |
| font-size: 1.12em !important; | | padding-left: 28px !important; |
| margin-top: 12px !important;
| |
| } | | } |
|
| |
|
| h4, .mw-heading4 h4 { | | /* Número de seção */ |
| font-size: 1.0em !important; | | #vector-page-titlebar-toc .vector-toc-numb { |
| | color: var(--vtm-text-ghost, #5e5b55) !important; |
| | margin-right: 6px !important; |
| } | | } |
|
| |
|
| /* Citações / Blockquotes compactas */ | | /* Ocultar pin/unpin buttons dentro do dropdown TOC */ |
| blockquote, | | #vector-page-titlebar-toc .vector-pinnable-header-toggle-button { |
| .vtm-quote,
| |
| .mw-parser-output blockquote,
| |
| .mw-parser-output .vtm-quote {
| |
| padding: 14px 12px !important;
| |
| margin: 0.8em 0 !important;
| |
| font-size: 0.94em !important;
| |
| line-height: 1.5 !important;
| |
| }
| |
| | |
| /* --- F. Abas de Navegação Estilo Touch Carousel --- */
| |
| .vector-menu-tabs,
| |
| .vector-menu-tabs-legacy,
| |
| .mw-portlet-views,
| |
| .mw-portlet-namespaces,
| |
| #p-views ul,
| |
| #p-namespaces ul {
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| overflow-x: auto !important;
| |
| -webkit-overflow-scrolling: touch !important;
| |
| scrollbar-width: none !important;
| |
| margin-bottom: 8px !important;
| |
| padding-bottom: 2px !important;
| |
| }
| |
| | |
| .vector-menu-tabs::-webkit-scrollbar,
| |
| .mw-portlet-views ul::-webkit-scrollbar {
| |
| display: none !important; | | display: none !important; |
| } | | } |
|
| |
|
| .vector-menu-tabs li,
| | /* Scrollbar estilizada */ |
| .vector-menu-tabs-legacy li,
| | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar { |
| .vector-tab-noicon,
| | width: 4px !important; |
| .mw-portlet-views li,
| |
| .mw-portlet-namespaces li {
| |
| flex: 0 0 auto !important;
| |
| margin-right: 4px !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 {
| |
| padding: 6px 10px !important;
| |
| font-size: 0.76em !important;
| |
| white-space: nowrap !important;
| |
| }
| |
| | |
| /* --- G. Layouts de Coluna / Grid (Dashboard na Home) --- */ | |
| /* Força tabelas de 2 colunas transparentes a empilharem verticalmente */ | |
| .mw-parser-output table[style*="background:transparent"],
| |
| .mw-parser-output table[style*="border:none"],
| |
| .mw-parser-output table[style*="border: none"] {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| }
| |
| | |
| .mw-parser-output table[style*="background:transparent"] > tbody,
| |
| .mw-parser-output table[style*="border:none"] > tbody,
| |
| .mw-parser-output table[style*="border: none"] > tbody {
| |
| display: block !important;
| |
| width: 100% !important; | |
| }
| |
| | |
| .mw-parser-output table[style*="background:transparent"] tr,
| |
| .mw-parser-output table[style*="border:none"] tr,
| |
| .mw-parser-output table[style*="border: none"] tr {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| width: 100% !important;
| |
| } | | } |
|
| |
|
| .mw-parser-output table[style*="background:transparent"] td, | | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar-track { |
| .mw-parser-output table[style*="border:none"] td,
| | background: transparent !important; |
| .mw-parser-output table[style*="border: none"] td {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| margin-bottom: 14px !important;
| |
| box-sizing: border-box !important; | |
| } | | } |
|
| |
|
| /* --- H. Tabelas de Dados / Dossiês (.wikitable) --- */ | | #vector-page-titlebar-toc .vector-dropdown-content::-webkit-scrollbar-thumb { |
| table.wikitable {
| | background: var(--vtm-border-blood, #3d0a12) !important; |
| display: block !important;
| | border-radius: 4px !important; |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| overflow-x: auto !important;
| |
| -webkit-overflow-scrolling: touch !important;
| |
| margin: 1em 0 !important;
| |
| border-collapse: collapse !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| | |
| table.wikitable th,
| |
| table.wikitable td {
| |
| padding: 8px 10px !important; | |
| font-size: 0.84em !important;
| |
| line-height: 1.4 !important;
| |
| min-width: 80px !important;
| |
| }
| |
| | |
| /* --- I. Infoboxes de Personagem (.vtm-infobox) --- */
| |
| .vtm-infobox {
| |
| float: none !important;
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| margin: 16px 0 !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| | |
| /* --- J. Tela de Login no Mobile --- */
| |
| .mw-special-Userlogin .mw-htmlform,
| |
| .mw-special-Userlogin .mw-htmlform-codex,
| |
| #userloginForm form,
| |
| .mw-htmlform.mw-htmlform-codex {
| |
| max-width: 100% !important;
| |
| padding: 18px 16px !important; | |
| margin: 12px auto !important;
| |
| } | | } |
| } | | } |