User:Editingthingsforlife/vector-2022.css

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

/* Global styles */
body {
    background: linear-gradient(135deg, #1E2528, #2A3439); /* Muted, unsettling gradient */
    color: #D8E0E3; /* Off-white text for readability but slight unease */
    font-family: 'Roboto', sans-serif; /* Clean, sterile font */
    font-weight: 300; /* Light weight for a ghostly feel */
    font-size: 1.1em;
    opacity: 0.95; /* Slight transparency for an ethereal effect */
}

/* Content wrapper */
.mw-page-container {
    background: rgba(30, 37, 40, 0.8); /* Semi-transparent dark teal */
    border: 1px solid #4A5B66; /* Cold, muted border */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Deep, ominous shadow */
    padding: 15px;
}

/* Header (masthead) */
.vector-header-container {
    background: #1E2528; /* Dark, muted teal */
    border-bottom: 2px solid #4A5B66;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Links */
a {
    color: #4A5B66; /* Cold blue for links */
    text-decoration: none; /* Remove underline for a cleaner, uncanny look */
    transition: color 0.3s ease-in-out, transform 0.2s ease;
}

a:hover {
    color: #D8E0E3; /* Shift to off-white on hover */
    transform: scale(1.02); /* Subtle enlargement for unease */
    filter: brightness(0.9); /* Slight dimming */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #D8E0E3;
    font-weight: 400; /* Less bold for a ghostly effect */
    letter-spacing: 0.05em; /* Slightly stretched for unease */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Sidebar */
.vector-sitenotice-container, .vector-toc {
    background: rgba(42, 52, 57, 0.9); /* Slightly darker than content */
    border: 1px solid #4A5B66;
    border-radius: 3px;
}

/* Buttons and inputs */
input, button, .mw-ui-button {
    background: #2A3439;
    color: #D8E0E3;
    border: 1px solid #4A5B66;
    transition: background 0.3s ease;
}

input:hover, button:hover, .mw-ui-button:hover {
    background: #4A5B66;
    filter: brightness(1.1); /* Slight brightening for interaction */
}

/* Footer */
.footer {
    background: #1E2528;
    color: #D8E0E3;
    border-top: 1px solid #4A5B66;
    padding: 10px;
}

/* Subtle animation for content blocks */
.mw-parser-output {
    animation: fadeIn 2s ease-in; /* Slow fade-in for eerie effect */
}

@keyframes fadeIn {
    0% { opacity: 0.7; }
    100% { opacity: 0.95; }
}

/* Remove stereotypical horror elements */
::selection {
    background: #4A5B66; /* Avoid red or bright colors */
    color: #D8E0E3;
}