MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Shadowed Eclipse MediaWiki Custom Dark Theme */
/* Save this as: htdocs/alla/w/skins/Vector/resources/shadowedeclipse-custom.css */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=Fjalla+One&display=swap');

/* Root color variables to match your main site */
:root {
    --shadow-bg-primary: #111;
    --shadow-bg-secondary: #1a1a1a;
    --shadow-accent: #66ccff;
    --shadow-text: #e0e0e0;
    --shadow-text-muted: #aaa;
    --shadow-border: #444;
    --shadow-border-light: #666;
}

/* Global background and text colors */
body {
    background-color: var(--shadow-bg-primary) !important;
    color: var(--shadow-text) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
}

/* Header styling */
.mw-header,
.vector-header {
    background-color: var(--shadow-bg-secondary) !important;
    border-bottom: 2px solid var(--shadow-border) !important;
}

/* Main content area */
.mw-page-container,
.vector-page-container {
    background-color: var(--shadow-bg-primary) !important;
}

.mw-content-container,
.vector-content-container,
.mw-article-toolbar-container {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    margin: 10px !important;
}

/* Article content */
.mw-body,
.vector-body,
#content {
    background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
}

/* Sidebar styling */
.mw-sidebar,
.vector-sidebar,
#mw-sidebar {
    background-color: var(--shadow-bg-primary) !important;
    border-right: 2px solid var(--shadow-border) !important;
}

.vector-menu-portal,
.portal {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
}

/* Menu headings */
.vector-menu-portal h3,
.portal h3,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', Arial, sans-serif !important;
    color: var(--shadow-accent) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--shadow-accent) !important;
    padding-bottom: 5px !important;
}

/* Article title */
.firstHeading,
#firstHeading {
    font-family: 'Bebas Neue', Arial, sans-serif !important;
    color: var(--shadow-accent) !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--shadow-accent) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Links */
a {
    color: var(--shadow-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

a:hover {
    color: #88ddff !important;
    text-decoration: underline !important;
}

a:visited {
    color: #5599cc !important;
}

/* Navigation tabs */
.vector-menu-tabs,
#p-views ul,
#p-cactions ul {
    background-color: var(--shadow-bg-secondary) !important;
}

.vector-menu-tabs li,
#p-views li,
#p-cactions li {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px 5px 0 0 !important;
    margin-right: 2px !important;
}

.vector-menu-tabs li.selected,
.vector-menu-tabs li:hover,
#p-views li.selected,
#p-views li:hover {
    background-color: var(--shadow-accent) !important;
}

.vector-menu-tabs li.selected a,
.vector-menu-tabs li:hover a,
#p-views li.selected a,
#p-views li:hover a {
    color: var(--shadow-bg-primary) !important;
    font-weight: 600 !important;
}

/* Search box styling */
.vector-search-box,
#simpleSearch {
    background-color: var(--shadow-bg-secondary) !important;
    border: 2px solid var(--shadow-accent) !important;
    border-radius: 4px !important;
}

.vector-search-box-input,
#searchInput {
    background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    border: none !important;
    padding: 8px 12px !important;
}

.vector-search-box-input:focus,
#searchInput:focus {
    outline: none !important;
    box-shadow: 0 0 5px rgba(102, 204, 255, 0.3) !important;
}

/* Search button */
.searchButton,
#searchButton {
    background-color: var(--shadow-accent) !important;
    color: var(--shadow-bg-primary) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Footer */
.mw-footer,
.vector-footer,
#footer {
    background-color: var(--shadow-bg-primary) !important;
    border-top: 2px solid var(--shadow-border) !important;
    color: var(--shadow-text-muted) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
}

/* Edit buttons and tools */
.vector-menu-dropdown,
.vector-menu-dropdown-content {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
}

/* Tables */
table {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
}

th {
    background-color: var(--shadow-accent) !important;
    color: var(--shadow-bg-primary) !important;
    font-family: 'Fjalla One', Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

td {
    border-bottom: 1px solid var(--shadow-border) !important;
    color: var(--shadow-text) !important;
}

/* Code blocks */
code, pre {
    background-color: var(--shadow-bg-primary) !important;
    color: var(--shadow-accent) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 3px !important;
    font-family: 'Courier New', monospace !important;
}

/* Blockquotes */
blockquote {
    background-color: var(--shadow-bg-primary) !important;
    border-left: 4px solid var(--shadow-accent) !important;
    color: var(--shadow-text-muted) !important;
    padding: 10px 15px !important;
    margin: 10px 0 !important;
    font-style: italic !important;
}

/* Input fields */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 3px !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    padding: 8px 10px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--shadow-accent) !important;
    outline: none !important;
    box-shadow: 0 0 3px rgba(102, 204, 255, 0.3) !important;
}

/* Buttons */
.mw-ui-button,
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--shadow-accent) !important;
    color: var(--shadow-bg-primary) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #88ddff !important;
    cursor: pointer !important;
}

/* Special pages styling */
.mw-special-page {
    background-color: var(--shadow-bg-secondary) !important;
    padding: 20px !important;
    border-radius: 5px !important;
    border: 1px solid var(--shadow-border) !important;
}

/* Recent changes, watchlist, etc. */
.mw-changeslist-legend {
    background-color: var(--shadow-bg-primary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

/* Warning and info boxes */
.mw-message-box {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-accent) !important;
    border-radius: 5px !important;
    color: var(--shadow-text) !important;
}

.mw-message-box-warning {
    border-color: #ffaa00 !important;
}

.mw-message-box-error {
    border-color: #ff6666 !important;
}

/* Hide/show elements improvements */
.vector-menu-dropdown-checkbox:checked ~ .vector-menu-dropdown-content {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
}

/* User menu */
.vector-user-menu {
    background-color: var(--shadow-bg-secondary) !important;
}

/* Ensure proper contrast for all text */
.mw-body-content p,
.mw-body-content li,
.mw-body-content span,
.vector-body p,
.vector-body li,
.vector-body span {
    color: var(--shadow-text) !important;
}

/* Logo area */
.mw-logo,
.vector-logo {
    filter: brightness(1.2) !important;
}

/* Content navigation */
.vector-menu-content-list {
    background-color: var(--shadow-bg-secondary) !important;
}

/* Print styles override */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
}