MediaWiki:Vector-2022.css: Difference between revisions

Revision as of 07:03, 10 September 2026

/* ===== Global base: neon dark ===== */
html.skin-vector.skin-vector-2022 {
    color-scheme: dark;
    background-color: #05060a !important;
}

/* Full-page neon background (optional image) */
html.skin-vector.skin-vector-2022 {
    background:
        radial-gradient(circle at top left, #1a1f3b 0, #05060a 40%, #000000 100%) fixed !important;
    background-size: cover !important;
}

/* If you want a custom image instead, uncomment and adjust:
html.skin-vector.skin-vector-2022 {
    background: url("/fractured/images/dark_background.png") no-repeat fixed center !important;
    background-size: cover !important;
}
*/

/* Clear default Vector wrappers so background shows edge-to-edge */
body,
.mw-page-container,
.mw-content-container,
.mw-body,
#content {
    background: transparent !important;
}

/* Base text */
body {
    color: #e5f0ff !important;
    font-weight: 400;
}

/* ===== Links: electric blue + neon hover ===== */
a {
    color: #4fb3ff !important;
    text-decoration: none;
}

a:visited {
    color: #9f7bff !important;
}

a:hover,
a:focus {
    color: #7ce3ff !important;
    text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}

/* ===== Top header / personal tools ===== */
#mw-header,
.vector-header,
.vector-header-container {
    background: rgba(5, 6, 10, 0.95) !important;
    border-bottom: 1px solid rgba(79, 179, 255, 0.35) !important;
    box-shadow: 0 0 18px rgba(79, 179, 255, 0.25);
}

/* User links / personal tools */
#p-personal,
.vector-user-links {
    color: #c7d7ff !important;
}

#p-personal a,
.vector-user-links a {
    color: #4fb3ff !important;
}

#p-personal a:hover,
.vector-user-links a:hover {
    color: #7ce3ff !important;
    text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}

/* ===== Sidebar: neon panels ===== */
.vector-sidebar,
.vector-menu,
.vector-menu-content {
    background: rgba(8, 10, 18, 0.96) !important;
    border-right: 1px solid rgba(159, 123, 255, 0.35) !important;
    box-shadow: 0 0 22px rgba(159, 123, 255, 0.35);
}

/* Sidebar section headers */
.vector-menu-heading,
#p-navigation .vector-menu-heading,
#p-tb .vector-menu-heading {
    color: #f5f7ff !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(79, 179, 255, 0.35) !important;
}

/* Sidebar links */
.vector-menu-content-list a {
    color: #c7d7ff !important;
}

.vector-menu-content-list a:hover {
    color: #7ce3ff !important;
    background: radial-gradient(circle at left, rgba(79, 179, 255, 0.25), transparent 60%) !important;
    text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}

/* ===== Tabs: page actions (Read / Edit / View history) ===== */
.vector-page-tools,
.vector-page-tools .vector-menu-content {
    background: rgba(8, 10, 18, 0.96) !important;
    border-left: 1px solid rgba(79, 179, 255, 0.35) !important;
}

/* Tabs themselves */
.vector-page-tools .vector-menu-content-list li a {
    color: #c7d7ff !important;
    border-radius: 999px;
    padding: 4px 12px;
    border: 1px solid transparent;
}

/* Active tab */
.vector-page-tools .vector-menu-content-list li.selected a,
.vector-page-tools .vector-menu-content-list li.selected a:visited {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
    border-color: rgba(124, 227, 255, 0.7) !important;
    box-shadow: 0 0 12px rgba(124, 227, 255, 0.8);
}

/* Hover tabs */
.vector-page-tools .vector-menu-content-list li a:hover {
    border-color: rgba(79, 179, 255, 0.6) !important;
    background: radial-gradient(circle at center, rgba(79, 179, 255, 0.25), transparent 70%) !important;
    text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}

/* ===== Search box: neon input ===== */
#p-search,
.vector-search-box {
    background: rgba(8, 10, 18, 0.96) !important;
    border-radius: 999px;
    padding: 2px 10px;
    border: 1px solid rgba(79, 179, 255, 0.5) !important;
    box-shadow: 0 0 14px rgba(79, 179, 255, 0.4);
}

.vector-search-box input {
    background: transparent !important;
    border: none !important;
    color: #e5f0ff !important;
}

.vector-search-box input::placeholder {
    color: #7b8bb5 !important;
}

.vector-search-box button,
.vector-search-box .mw-ui-button {
    background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
    border-radius: 999px !important;
    border: none !important;
    color: #05060a !important;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(124, 227, 255, 0.9);
}

.vector-search-box button:hover,
.vector-search-box .mw-ui-button:hover {
    filter: brightness(1.15);
}

/* ===== Content area ===== */
#content,
.mw-body {
    background: rgba(8, 10, 18, 0.92) !important;
    border-radius: 12px;
    border: 1px solid rgba(79, 179, 255, 0.35) !important;
    box-shadow: 0 0 24px rgba(79, 179, 255, 0.35);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #f5f7ff !important;
    text-shadow: 0 0 8px rgba(159, 123, 255, 0.6);
}

/* ===== Buttons / standard UI elements ===== */
.mw-ui-button,
.mw-ui-button.mw-ui-progressive {
    background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
    border-radius: 999px !important;
    border: none !important;
    color: #05060a !important;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(124, 227, 255, 0.9);
}

.mw-ui-button:hover,
.mw-ui-button.mw-ui-progressive:hover {
    filter: brightness(1.12);
}

/* Secondary buttons */
.mw-ui-button.mw-ui-quiet,
.mw-ui-button.mw-ui-neutral {
    background: transparent !important;
    border-radius: 999px !important;
    border: 1px solid rgba(159, 123, 255, 0.6) !important;
    color: #c7d7ff !important;
}

.mw-ui-button.mw-ui-quiet:hover,
.mw-ui-button.mw-ui-neutral:hover {
    background: radial-gradient(circle at center, rgba(159, 123, 255, 0.25), transparent 70%) !important;
}

/* ===== Tables / infoboxes ===== */
table,
.infobox,
.mw-parser-output table {
    background: rgba(8, 10, 18, 0.96) !important;
    border: 1px solid rgba(79, 179, 255, 0.35) !important;
}

th,
td {
    border-color: rgba(79, 179, 255, 0.25) !important;
}

/* ===== Footer ===== */
#footer,
.vector-footer {
    background: rgba(5, 6, 10, 0.95) !important;
    border-top: 1px solid rgba(79, 179, 255, 0.35) !important;
    color: #7b8bb5 !important;
}