MediaWiki:Vector-2022.css

/* 🌞 Base Variables for Light Theme */
:root {
    --color-soft-white: #F5F7F8;         /* Soft, clean background */
    --color-very-light-gray: #E8EDEE;    /* Slight contrast for panels */
    --color-medium-gray: #A9A9A9;        /* For text and borders */
    --color-dove-gray: #6E6E6E;          /* For headings */
    --color-dark-gray: #333333;          /* Strong text contrast */
    --color-deep-teal: #008080;          /* Teal */
    --color-sea-green: #2E8B57;          /* Sea Green */
    --color-sky-blue: #87CEEB;           /* For subtle highlights */
    --color-golden-sand: #FFD700;        /* Attention elements */
    --color-error-red: #FF6347;          /* For errors */
}

/* 🌞 Global Background & Text */
body {
    background-color: var(--color-soft-white);
    color: var(--color-dark-gray);
    font-family: 'Bona Nova', serif;
    line-height: 1.6;
}

/* 🟡 Headers */
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body-content h1,
.mw-logo-wordmark, #firstHeadingTitle {
    color: var(--color-sea-green);
    font-family: 'Metamorphous', cursive;
    text-shadow: 1px 1px 2px rgba(0, 128, 128, 0.2);
}

/* 🔗 Links */
a {
    color: var(--color-deep-teal);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--color-sky-blue);
    text-shadow: 0 0 5px rgba(135, 206, 235, 0.4);
}

/* 📊 Sidebar */
#mw-panel {
    background-color: var(--color-very-light-gray);
    color: var(--color-dark-gray);
    border-right: 1px solid var(--color-medium-gray);
}

#mw-panel a {
    color: var(--color-deep-teal);
}

#mw-panel a:hover {
    color: var(--color-sea-green);
}

/* 📁 Content Area */
#content {
    background-color: var(--color-soft-white);
    border: 1px solid var(--color-very-light-gray);
    padding: 20px;
    color: var(--color-dark-gray);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 📋 Table of Contents */
#toc {
    background-color: var(--color-very-light-gray);
    border: 2px solid var(--color-deep-teal);
    border-radius: 8px;
    padding: 10px;
    color: var(--color-dark-gray);
}

#toc h2 {
    color: var(--color-sea-green);
    text-align: center;
}

/* 🟢 Buttons */
.mw-ui-button {
    background: linear-gradient(to bottom, var(--color-deep-teal), #006666);
    color: var(--color-soft-white);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mw-ui-button:hover {
    background: linear-gradient(to bottom, var(--color-sea-green), #1B6E47);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 📋 Infobox */
.infobox {
    background-color: var(--color-very-light-gray);
    border: 2px solid var(--color-sea-green);
    color: var(--color-dark-gray);
    width: 250px;
    float: right;
    margin: 0 0 1em 1em;
    padding: 10px;
    border-radius: 8px;
}

.infobox th {
    background-color: var(--color-deep-teal);
    color: var(--color-soft-white);
    text-align: center;
}

.infobox td {
    border-top: 1px solid var(--color-medium-gray);
}

/* 📬 Messages */
.mw-message-box {
    background-color: var(--color-sky-blue);
    border-left: 4px solid var(--color-sea-green);
    color: var(--color-dark-gray);
}

.mw-message-box-warning {
    background-color: var(--color-golden-sand);
    color: var(--color-dark-gray);
}

.mw-message-box-error {
    background-color: var(--color-error-red);
    color: var(--color-soft-white);
}

/* 🔄 Scrollbars */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-very-light-gray);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-deep-teal);
    border-radius: 5px;
    border: 2px solid var(--color-very-light-gray);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-sea-green);
}

/* 📋 VisualEditor Toolbar */
body.ve-active .oo-ui-toolbar {
    background-color: var(--color-very-light-gray);
    border-bottom: 2px solid var(--color-deep-teal);
}

body.ve-active .oo-ui-toolbar .oo-ui-buttonWidget {
    background-color: var(--color-deep-teal);
    color: var(--color-soft-white);
}

body.ve-active .oo-ui-toolbar .oo-ui-buttonWidget:hover {
    background-color: var(--color-sea-green);
}

/* 💡 Portable Infobox */
.portable-infobox .pi-secondary-background {
    background-color: var(--color-very-light-gray);
    border: 1px solid var(--color-deep-teal);
}

.portable-infobox .pi-title {
    background-color: var(--color-sea-green);
    color: var(--color-soft-white);
}

.portable-infobox .pi-data-label {
    color: var(--color-deep-teal);
}

.portable-infobox .pi-data {
    background-color: var(--color-soft-white);
}

/* 📖 Code Blocks */
pre, code {
    background-color: var(--color-very-light-gray);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    padding: 6px;
}

/* 🖌️ Syntax Highlighting */
.cm-keyword { color: var(--color-deep-teal); font-weight: bold; }
.cm-string { color: #4CAF50; } /* A fresh green */
.cm-comment { color: var(--color-medium-gray); font-style: italic; }
.cm-number { color: var(--color-sea-green); }
.cm-variable { color: var(--color-royal-blue); }
.cm-def { color: #FF4500; }

/* 💫 Search Bar */
#p-search input {
    background-color: var(--color-very-light-gray);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-deep-teal);
    border-radius: 4px;
    transition: box-shadow 0.3s ease;
}

#p-search input:focus {
    border-color: var(--color-sea-green);
    box-shadow: 0 0 8px rgba(46, 139, 87, 0.5);
    outline: none;
}

/* 🌟 Sticky Header */
.vector-sticky-header {
    background-color: var(--color-very-light-gray);
    border-bottom: 2px solid var(--color-deep-teal);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.vector-sticky-header a {
    color: var(--color-deep-teal);
}

.vector-sticky-header a:hover {
    color: var(--color-sea-green);
}