|
|
(86 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| /* ================================
| | @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Goudy+Bookletter+1911&family=Metamorphous&family=Modern+Antiqua&family=Uncial+Antiqua&display=swap'); |
| 🌟 BASE.CSS - Continuum Skin
| | .bona-nova-regular { |
| Uses Variables from Mode-Specific CSS
| | font-family: "Bona Nova", serif; |
| ================================ */
| | font-weight: 400; |
| | | font-style: normal; |
| /* Import Google Fonts */
| |
| @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Metamorphous&display=swap'); | |
| | |
| /* === Typography === */
| |
| .bona-nova-regular { font-family: "Bona Nova", serif; font-weight: 400; font-style: normal; } | |
| .bona-nova-bold { font-family: "Bona Nova", serif; font-weight: 700; font-style: normal; }
| |
| .bona-nova-regular-italic { font-family: "Bona Nova", serif; font-weight: 400; font-style: italic; }
| |
| .metamorphous-regular { font-family: "Metamorphous", serif; font-style: normal; }
| |
| | |
| /* === Global Variables (Defined in -mode.css) === */
| |
| :root, .skin-continuum, .notheme {
| |
| /* Color Variables */
| |
| --color-text-primary: var(--color-base, #FFFFFF);
| |
| --color-text-secondary: var(--color-base--hover, #FFB84D);
| |
| --color-text-emphasized: var(--color-emphasized, #FFFFFF);
| |
| --color-text-muted: var(--color-subtle, #FF851B);
| |
| --color-placeholder: var(--color-placeholder, #FFB84D);
| |
| --color-link: var(--color-progressive, #FF851B);
| |
| --color-link-hover: var(--color-progressive--hover, #FFB84D);
| |
| --color-link-active: var(--color-progressive--active, #FF6300);
| |
| --color-link-focus: var(--color-progressive--focus, #FF851B);
| |
| --color-error: var(--color-error, #FF4500);
| |
| --color-success: var(--color-success, #177860);
| |
| --color-warning: var(--color-warning, #FFB84D);
| |
| | |
| /* Background Variables */
| |
| --background-primary: var(--background-color-base, #001F3F);
| |
| --background-secondary: var(--background-color-neutral, #002855);
| |
| --background-tertiary: var(--background-color-neutral-subtle, #001933);
| |
| --background-interactive: var(--background-color-interactive, #002B5C);
| |
| --background-inverted: var(--background-color-inverted, #101418);
| |
| | |
| /* Borders */
| |
| --border-primary: var(--border-color-base, #FF851B);
| |
| --border-hover: var(--border-color-progressive--hover, #FFB84D);
| |
| --border-active: var(--border-color-progressive--active, #FF6300);
| |
| --border-error: var(--border-color-error, #FF4500);
| |
| | |
| /* Shadows */
| |
| --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
| |
| | |
| /* Opacity */
| |
| --opacity-disabled: 0.5;
| |
| }
| |
| | |
| /* === General Body === */
| |
| body {
| |
| margin: 0;
| |
| padding: 0;
| |
| background-color: var(--background-primary);
| |
| color: var(--color-text-primary);
| |
| font-family: 'Bona Nova', serif;
| |
| }
| |
| | |
| /* === Headers === */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: 'Metamorphous', cursive;
| |
| color: var(--color-link-active);
| |
| } | | } |
|
| |
|
| /* === Links === */
| | .bona-nova-bold { |
| a {
| | font-family: "Bona Nova", serif; |
| color: var(--color-link);
| | font-weight: 700; |
| text-decoration: none;
| | font-style: normal; |
| transition: color 0.3s ease;
| |
| } | | } |
|
| |
|
| a:hover {
| | .bona-nova-regular-italic { |
| color: var(--color-link-hover);
| | font-family: "Bona Nova", serif; |
| text-decoration: underline;
| | font-weight: 400; |
| | font-style: italic; |
| } | | } |
| | | .goudy-bookletter-1911-regular { |
| /* === Personal User Links === */
| | font-family: "Goudy Bookletter 1911", serif; |
| #p-personal {
| | font-weight: 400; |
| background-color: var(--background-tertiary);
| | font-style: normal; |
| border-radius: 4px;
| |
| padding: 4px 8px;
| |
| } | | } |
| | | .eb-garamond { |
| #p-personal li {
| | font-family: "EB Garamond", serif; |
| display: inline-block;
| | font-optical-sizing: auto; |
| margin-left: 8px;
| | font-weight: 400; |
| | font-style: normal; |
| } | | } |
| | | .uncial-antiqua-regular { |
| #p-personal a {
| | font-family: "Uncial Antiqua", system-ui; |
| color: var(--color-link);
| | font-weight: 400; |
| font-weight: bold;
| | font-style: normal; |
| } | | } |
| | | .modern-antiqua-regular { |
| #p-personal a:hover {
| | font-family: "Modern Antiqua", serif; |
| color: var(--color-link-hover);
| | font-weight: 400; |
| | font-style: normal; |
| } | | } |
| | | .metamorphous-regular { |
| /* === Main Structure === */
| | font-family: "Metamorphous", serif; |
| .mw-header { | | font-weight: 400; |
| background-color: var(--background-secondary);
| | font-style: normal; |
| border-bottom: 3px solid var(--border-primary);
| |
| } | | } |
| | | /* ===== Global Styles ===== */ |
| #mw-panel {
| | body { |
| background-color: var(--background-secondary); | | font-family: 'Bona Nova', serif !important; |
| } | | } |
| | | pre, code { /* Internal spacing */ |
| #content {
| | font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace font */ /* Horizontal scroll if needed */ |
| background-color: var(--background-tertiary);
| |
| border: 1px solid var(--border-primary);
| |
| padding: 20px;
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| .mw-body {
| |
| background-color: var(--background-primary);
| |
| }
| |
| | |
| /* === Table of Contents (TOC) === */ | |
| #toc {
| |
| background-color: var(--background-interactive);
| |
| border: 2px solid var(--border-primary);
| |
| border-radius: 8px;
| |
| padding: 10px;
| |
| color: var(--color-text-primary);
| |
| } | | } |
|
| |
|
| #toc h2 { | | #toc h2 { |
| font-family: 'Metamorphous', cursive; | | font-family: 'Modern Antiqua', cursive !important; |
| color: var(--color-link-active);
| |
| }
| |
| | |
| #toc a {
| |
| color: var(--color-link);
| |
| }
| |
| | |
| #toc a:hover {
| |
| color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Buttons === */
| |
| .mw-ui-button {
| |
| background-color: var(--color-link);
| |
| color: var(--color-text-primary);
| |
| border: none;
| |
| padding: 8px 16px;
| |
| border-radius: 4px;
| |
| cursor: pointer;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
| | |
| .mw-ui-button:hover {
| |
| background-color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Notifications & Alerts === */
| |
| .mw-notice {
| |
| background-color: var(--background-secondary);
| |
| color: var(--color-text-primary);
| |
| border-left: 4px solid var(--border-primary);
| |
| padding: 8px;
| |
| border-radius: 4px;
| |
| }
| |
| | |
| .mw-warning {
| |
| background-color: var(--color-warning);
| |
| color: var(--background-primary);
| |
| }
| |
| | |
| .mw-error {
| |
| background-color: var(--color-error);
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| /* === Code Editors (Ace & CodeMirror) === */
| |
| .ace_editor, .CodeMirror {
| |
| background-color: var(--background-tertiary);
| |
| color: var(--color-text-primary);
| |
| border: 1px solid var(--border-primary);
| |
| border-radius: 4px;
| |
| }
| |
| | |
| /* Syntax Highlighting */
| |
| .ace_keyword, .cm-keyword { color: var(--color-link); font-weight: bold; }
| |
| .ace_string, .cm-string { color: #7FDBFF; }
| |
| .ace_comment, .cm-comment { color: #AAAAAA; font-style: italic; }
| |
| .ace_variable, .cm-variable { color: #FFD700; }
| |
| .ace_error, .cm-error { text-decoration: underline; text-decoration-color: var(--color-error); }
| |
| | |
| /* Cursor & Selection */
| |
| .CodeMirror-cursor { border-left: 1px solid var(--color-link); }
| |
| .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3); }
| |
| | |
| /* === Scrollbar === */
| |
| ::-webkit-scrollbar {
| |
| width: 12px;
| |
| } | | } |
| | | .mw-changeslist-legend h2 { |
| ::-webkit-scrollbar-track {
| | font-family: 'Modern Antiqua', cursive !important; |
| background: var(--background-primary); | |
| } | | } |
| | | /* ===== UI Elements Still Use Custom Font ===== */ |
| ::-webkit-scrollbar-thumb {
| | .wikiEditor-ui-toolbar, |
| background-color: var(--color-link);
| | .wikiEditor-ui-toolbar .group .tool a, |
| border-radius: 10px; | | .wikiEditor-ui-dialog { |
| border: 3px solid var(--background-primary);
| | font-family: 'Bona Nova', serif !important; /* Keep custom font for UI */ |
| } | | } |
| | | /* ===== Ace Editor Base Styling ===== */ |
| ::-webkit-scrollbar-thumb:hover {
| | .ace_editor { |
| background-color: var(--color-link-hover); | | font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace for cursor alignment */ |
| } | | } |
|
| |
|
| /* === Navbar === */ | | /* ===== CodeEditor - General Editor Styling ===== */ |
| #top-navbar {
| | .ace_editor { |
| background-color: var(--background-interactive); | | font-family: 'Courier New', 'Consolas', monospace !important; |
| border-bottom: 3px solid var(--border-primary);
| |
| padding: 10px 20px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| position: sticky;
| |
| top: 0;
| |
| z-index: 999;
| |
| box-shadow: var(--box-shadow);
| |
| } | | } |
|
| |
|
| | /* Navbar Logo */ |
| .navbar-logo a { | | .navbar-logo a { |
| font-family: 'Metamorphous', cursive; | | font-family: 'Modern Antiqua', cursive !important; |
| color: var(--color-link);
| |
| font-size: 1.5em;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .navbar-links a {
| |
| color: var(--color-text-primary);
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .navbar-links a:hover {
| |
| color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Responsive Navbar === */
| |
| @media screen and (max-width: 768px) {
| |
| #top-navbar {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| }
| |
| | |
| .navbar-links {
| |
| flex-direction: column;
| |
| width: 100%;
| |
| }
| |
| | |
| .navbar-links li {
| |
| margin: 10px 0;
| |
| }
| |
| }
| |
| | |
| /* === Infobox === */
| |
| .infobox {
| |
| border: 2px solid var(--border-primary);
| |
| background-color: var(--background-interactive);
| |
| color: var(--color-text-primary);
| |
| width: 250px;
| |
| font-size: 90%;
| |
| float: right;
| |
| margin: 0 0 1em 1em;
| |
| padding: 10px;
| |
| border-radius: 8px;
| |
| } | | } |
| | | /* Infobox Title */ |
| .infobox th { | | .portable-infobox .pi-title { |
| background-color: var(--background-secondary); | | font-family: 'Modern Antiqua' !important; |
| color: var(--color-text-secondary);
| |
| text-align: center;
| |
| border-bottom: 1px solid var(--border-primary);
| |
| } | | } |
|
| |
|
| .infobox td { | | h3.pi-data-label { |
| padding: 5px; | | font-family: 'Bona Nova' !important; |
| border-top: 1px solid var(--border-primary);
| |
| } | | } |
|
| |
|
| .infobox caption { | | /* ===== Headers (Orange Variants) ===== */ |
| font-family: 'Metamorphous', cursive;
| | h1, h2, h3, h4, h5, h6, |
| font-size: 1.2em;
| | .mw-body h1, |
| color: var(--color-text-secondary);
| | .mw-body .mw-heading1, |
| text-align: center; | | .mw-body-content h1, |
| | .mw-body-content .mw-heading1, |
| | .mw-body-content h2, .pi-title h2, |
| | .mw-body-content .mw-heading2, |
| | .mw-logo-wordmark, |
| | #firstHeadingTitle { |
| | font-family: 'Modern Antiqua', cursive !important; |
| } | | } |
|
| |
|
| /* === Images === */
| | .mwe-popups-extract p { |
| img {
| | display: block !important; |
| display: block; | | visibility: visible !important; |
| width: auto; | |
| height: auto;
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| opacity: 1;
| |
| border: none;
| |
| transition: opacity 0.3s ease, filter 0.3s ease;
| |
| } | | } |
|
| |
|
| img:hover {
| | .mwe-popups-extract .portable-infobox { |
| opacity: 0.9; | | display: none !important; /* Ensure infobox doesn't interfere */ |
| } | | } |
| | | .copyright-warning { |
| /* SVG Glow */
| |
| img[src$=".svg"] {
| |
| filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7));
| |
| }
| |
| | |
| /* === Icons === */
| |
| .continuum-icon {
| |
| background-color: #FFB800;
| |
| }
| |
| | |
| /* === Editing Interface === */
| |
| .mw-editinginterface {
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| .cdx-message--error {
| |
| background-color: var(--background-primary);
| |
| }
| |
| | |
| .vehide {
| |
| display: none;
| |
| }
| |
| #theme-switcher-container {
| |
| position: fixed;
| |
| top: 10px;
| |
| right: 20px;
| |
| z-index: 1000;
| |
| }
| |
| | |
| #theme-switcher {
| |
| padding: 5px;
| |
| border-radius: 4px;
| |
| border: 1px solid var(--border-color-base);
| |
| background-color: var(--background-color-neutral);
| |
| color: var(--color-base); | | color: var(--color-base); |
| }
| | font-size: 11px; |
| /* CSS placed here will be app/* ================================
| | margin: 0 0 10px; |
| 🌟 BASE.CSS - Continuum Skin
| | width: 700px; |
| Uses Variables from Mode-Specific CSS
| |
| ================================ */
| |
| | |
| /* Import Google Fonts */
| |
| @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Metamorphous&display=swap');
| |
| | |
| /* === Typography === */
| |
| .bona-nova-regular { font-family: "Bona Nova", serif; font-weight: 400; font-style: normal; }
| |
| .bona-nova-bold { font-family: "Bona Nova", serif; font-weight: 700; font-style: normal; }
| |
| .bona-nova-regular-italic { font-family: "Bona Nova", serif; font-weight: 400; font-style: italic; }
| |
| .metamorphous-regular { font-family: "Metamorphous", serif; font-style: normal; }
| |
| | |
| /* === Global Variables (Defined in -mode.css) === */
| |
| :root, .skin-continuum, .notheme {
| |
| /* Color Variables */
| |
| --color-text-primary: var(--color-base, #FFFFFF);
| |
| --color-text-secondary: var(--color-base--hover, #FFB84D);
| |
| --color-text-emphasized: var(--color-emphasized, #FFFFFF);
| |
| --color-text-muted: var(--color-subtle, #FF851B);
| |
| --color-placeholder: var(--color-placeholder, #FFB84D);
| |
| --color-link: var(--color-progressive, #FF851B);
| |
| --color-link-hover: var(--color-progressive--hover, #FFB84D);
| |
| --color-link-active: var(--color-progressive--active, #FF6300);
| |
| --color-link-focus: var(--color-progressive--focus, #FF851B);
| |
| --color-error: var(--color-error, #FF4500);
| |
| --color-success: var(--color-success, #177860);
| |
| --color-warning: var(--color-warning, #FFB84D);
| |
| | |
| /* Background Variables */
| |
| --background-primary: var(--background-color-base, #001F3F);
| |
| --background-secondary: var(--background-color-neutral, #002855);
| |
| --background-tertiary: var(--background-color-neutral-subtle, #001933);
| |
| --background-interactive: var(--background-color-interactive, #002B5C);
| |
| --background-inverted: var(--background-color-inverted, #101418);
| |
| | |
| /* Borders */
| |
| --border-primary: var(--border-color-base, #FF851B);
| |
| --border-hover: var(--border-color-progressive--hover, #FFB84D);
| |
| --border-active: var(--border-color-progressive--active, #FF6300);
| |
| --border-error: var(--border-color-error, #FF4500);
| |
| | |
| /* Shadows */
| |
| --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
| |
| | |
| /* Opacity */
| |
| --opacity-disabled: 0.5;
| |
| }
| |
| | |
| /* === General Body === */
| |
| body {
| |
| margin: 0;
| |
| padding: 0;
| |
| background-color: var(--background-primary);
| |
| color: var(--color-text-primary);
| |
| font-family: 'Bona Nova', serif;
| |
| }
| |
| | |
| /* === Headers === */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: 'Metamorphous', cursive;
| |
| color: var(--color-link-active);
| |
| }
| |
| | |
| /* === Links === */
| |
| a {
| |
| color: var(--color-link);
| |
| text-decoration: none;
| |
| transition: color 0.3s ease;
| |
| }
| |
| | |
| a:hover {
| |
| color: var(--color-link-hover);
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* === Personal User Links === */
| |
| #p-personal {
| |
| background-color: var(--background-tertiary);
| |
| border-radius: 4px;
| |
| padding: 4px 8px;
| |
| }
| |
| | |
| #p-personal li {
| |
| display: inline-block;
| |
| margin-left: 8px;
| |
| }
| |
| | |
| #p-personal a {
| |
| color: var(--color-link);
| |
| font-weight: bold;
| |
| }
| |
| | |
| #p-personal a:hover {
| |
| color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Main Structure === */
| |
| .mw-header {
| |
| background-color: var(--background-secondary);
| |
| border-bottom: 3px solid var(--border-primary);
| |
| }
| |
| | |
| #mw-panel {
| |
| background-color: var(--background-secondary);
| |
| }
| |
| | |
| #content {
| |
| background-color: var(--background-tertiary);
| |
| border: 1px solid var(--border-primary);
| |
| padding: 20px;
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| .mw-body {
| |
| background-color: var(--background-primary);
| |
| }
| |
| | |
| /* === Table of Contents (TOC) === */
| |
| #toc {
| |
| background-color: var(--background-interactive);
| |
| border: 2px solid var(--border-primary);
| |
| border-radius: 8px;
| |
| padding: 10px;
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| #toc h2 {
| |
| font-family: 'Metamorphous', cursive;
| |
| color: var(--color-link-active);
| |
| }
| |
| | |
| #toc a {
| |
| color: var(--color-link);
| |
| }
| |
| | |
| #toc a:hover {
| |
| color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Buttons === */
| |
| .mw-ui-button {
| |
| background-color: var(--color-link);
| |
| color: var(--color-text-primary);
| |
| border: none;
| |
| padding: 8px 16px;
| |
| border-radius: 4px;
| |
| cursor: pointer;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
| | |
| .mw-ui-button:hover {
| |
| background-color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Notifications & Alerts === */
| |
| .mw-notice {
| |
| background-color: var(--background-secondary);
| |
| color: var(--color-text-primary);
| |
| border-left: 4px solid var(--border-primary);
| |
| padding: 8px;
| |
| border-radius: 4px;
| |
| }
| |
| | |
| .mw-warning {
| |
| background-color: var(--color-warning);
| |
| color: var(--background-primary);
| |
| }
| |
| | |
| .mw-error {
| |
| background-color: var(--color-error);
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| /* === Code Editors (Ace & CodeMirror) === */
| |
| .ace_editor, .CodeMirror {
| |
| background-color: var(--background-tertiary);
| |
| color: var(--color-text-primary);
| |
| border: 1px solid var(--border-primary);
| |
| border-radius: 4px;
| |
| }
| |
| | |
| /* Syntax Highlighting */
| |
| .ace_keyword, .cm-keyword { color: var(--color-link); font-weight: bold; }
| |
| .ace_string, .cm-string { color: #7FDBFF; }
| |
| .ace_comment, .cm-comment { color: #AAAAAA; font-style: italic; }
| |
| .ace_variable, .cm-variable { color: #FFD700; }
| |
| .ace_error, .cm-error { text-decoration: underline; text-decoration-color: var(--color-error); }
| |
| | |
| /* Cursor & Selection */
| |
| .CodeMirror-cursor { border-left: 1px solid var(--color-link); }
| |
| .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3); }
| |
| | |
| /* === Scrollbar === */
| |
| ::-webkit-scrollbar {
| |
| width: 12px;
| |
| }
| |
| | |
| ::-webkit-scrollbar-track {
| |
| background: var(--background-primary);
| |
| }
| |
| | |
| ::-webkit-scrollbar-thumb {
| |
| background-color: var(--color-link);
| |
| border-radius: 10px;
| |
| border: 3px solid var(--background-primary);
| |
| }
| |
| | |
| ::-webkit-scrollbar-thumb:hover {
| |
| background-color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Navbar === */
| |
| #top-navbar {
| |
| background-color: var(--background-interactive);
| |
| border-bottom: 3px solid var(--border-primary);
| |
| padding: 10px 20px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| position: sticky;
| |
| top: 0;
| |
| z-index: 999;
| |
| box-shadow: var(--box-shadow);
| |
| }
| |
| | |
| .navbar-logo a {
| |
| font-family: 'Metamorphous', cursive;
| |
| color: var(--color-link);
| |
| font-size: 1.5em;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .navbar-links a {
| |
| color: var(--color-text-primary);
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .navbar-links a:hover {
| |
| color: var(--color-link-hover);
| |
| }
| |
| | |
| /* === Responsive Navbar === */
| |
| @media screen and (max-width: 768px) {
| |
| #top-navbar {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| }
| |
| | |
| .navbar-links {
| |
| flex-direction: column;
| |
| width: 100%;
| |
| }
| |
| | |
| .navbar-links li {
| |
| margin: 10px 0;
| |
| }
| |
| }
| |
| | |
| /* === Infobox === */
| |
| .infobox {
| |
| border: 2px solid var(--border-primary);
| |
| background-color: var(--background-interactive);
| |
| color: var(--color-text-primary);
| |
| width: 250px;
| |
| font-size: 90%; | |
| float: right;
| |
| margin: 0 0 1em 1em; | |
| padding: 10px;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .infobox th {
| |
| background-color: var(--background-secondary);
| |
| color: var(--color-text-secondary);
| |
| text-align: center;
| |
| border-bottom: 1px solid var(--border-primary);
| |
| }
| |
| | |
| .infobox td {
| |
| padding: 5px;
| |
| border-top: 1px solid var(--border-primary);
| |
| }
| |
| | |
| .infobox caption {
| |
| font-family: 'Metamorphous', cursive;
| |
| font-size: 1.2em;
| |
| color: var(--color-text-secondary);
| |
| text-align: center;
| |
| }
| |
| | |
| /* === Images === */
| |
| img {
| |
| display: block;
| |
| width: auto; | |
| height: auto;
| |
| max-width: 100%; | | max-width: 100%; |
| max-height: 100%;
| |
| opacity: 1;
| |
| border: none;
| |
| transition: opacity 0.3s ease, filter 0.3s ease;
| |
| } | | } |
| | | .create-title { |
| img:hover {
| | color: var(--color-base); |
| opacity: 0.9;
| | border: 1px solid var(--color-subtle); |
| } | | } |
| | | .filehistory { |
| /* SVG Glow */
| | max-width: 100% !important; |
| img[src$=".svg"] {
| |
| filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7));
| |
| }
| |
| | |
| /* === Icons === */
| |
| .continuum-icon {
| |
| background-color: #FFB800;
| |
| }
| |
| | |
| /* === Editing Interface === */
| |
| .mw-editinginterface {
| |
| color: var(--color-text-primary);
| |
| }
| |
| | |
| .cdx-message--error {
| |
| background-color: var(--background-primary);
| |
| }
| |
| | |
| .vehide {
| |
| display: none;
| |
| }
| |
| #theme-switcher-container {
| |
| position: fixed;
| |
| top: 10px;
| |
| right: 20px;
| |
| z-index: 1000;
| |
| }
| |
| | |
| #theme-switcher {
| |
| padding: 5px;
| |
| border-radius: 4px;
| |
| border: 1px solid var(--border-color-base);
| |
| background-color: var(--background-color-neutral);
| |
| color: var(--color-base);
| |
| } | | } |