User:Editingthingsforlife/vector-2022.css

/* Eerie theme for Miraheze/WikiOasis Vector-2022 skin */

/* Global styles */
body {
    background: linear-gradient(to bottom, #1A1F23, #2B3238); /* Dark, muted gradient */
    color: #C9D1D5; /* Desaturated off-white for text */
    font-family: 'Arial', sans-serif; /* Simple, slightly cold font */
    font-weight: 300; /* Light weight for an ethereal feel */
    font-size: 1em;
}

/* Page container */
.mw-page-container {
    background: rgba(26, 31, 35, 0.85); /* Semi-transparent dark background */
    border: 1px solid #3A464F; /* Muted, cold border */
    border-radius: 4px;
    padding: 10px;
}

/* Header */
.vector-header-container {
    background: #1A1F23; /* Dark header */
    border-bottom: 1px solid #3A464F;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */
}

/* Site notice (banner) */
#siteNotice {
    background: #2B3238; /* Slightly lighter than header */
    color: #C9D1D5;
    border-bottom: 1px solid #3A464F;
    padding: 5px;
    text-align: center;
}

/* Sidebar */
.vector-menu-portal .vector-menu-content {
    background: #2B3238; /* Dark sidebar background */
    border-right: 1px solid #3A464F;
}

.vector-menu-portal h3 {
    color: #C9D1D5;
    font-weight: 400;
    border-bottom: 1px solid #3A464F;
    padding-bottom: 5px;
}

.vector-menu-portal .vector-menu-content li a {
    color: #5A6B77; /* Muted blue for links */
    transition: color 0.3s ease;
}

.vector-menu-portal .vector-menu-content li a:hover {
    color: #C9D1D5; /* Off-white on hover */
}

/* Main content */
.mw-body {
    background: transparent;
    color: #C9D1D5;
}

/* Title (e.g., "Main Page") */
#firstHeading {
    color: #C9D1D5;
    font-weight: 400;
    letter-spacing: 0.03em; /* Slightly stretched for unease */
}

/* Links in content */
.mw-body a {
    color: #5A6B77;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mw-body a:hover {
    color: #C9D1D5;
    filter: brightness(0.9); /* Slight dimming on hover */
}

/* Footer */
.footer {
    background: #1A1F23;
    color: #C9D1D5;
    border-top: 1px solid #3A464F;
    padding: 8px;
}

/* Subtle fade-in animation for content */
.mw-parser-output {
    animation: eerieFade 1.5s ease-in;
}

@keyframes eerieFade {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Avoid stereotypical horror elements */
::selection {
    background: #3A464F;
    color: #C9D1D5;
}