Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

← Older editNewer edit →
Line 1: Line 1:
/* 🌌 Base Variables for Medium Theme */
/* 🌞 Base Variables for Light Theme */
:root {
:root {
     --color-deep-slate: #2F4F4F;
     --color-soft-white: #F5F7F8;         /* Soft, clean background */
     --color-slate: #708090;
     --color-very-light-gray: #E8EDEE;   /* Slight contrast for panels */
     --color-medium-slate: #536872;
     --color-medium-gray: #A9A9A9;       /* For text and borders */
     --color-shale: #6B7C7C;
     --color-dove-gray: #6E6E6E;         /* For headings */
     --color-dark-teal: #006D77;
     --color-dark-gray: #333333;         /* Strong text contrast */
     --color-cerulean: #007BA7;
     --color-deep-teal: #008080;         /* Teal */
     --color-dove-gray: #D8D8D8;   /* Replaces White */
     --color-sea-green: #2E8B57;         /* Sea Green */
     --color-medium-gray: #A9A9A9; /* Replaces Light Gray */
     --color-sky-blue: #87CEEB;           /* For subtle highlights */
     --color-dark-gray: #1E1E1E;
     --color-golden-sand: #FFD700;       /* Attention elements */
     --background-color-base: #5E5E5E;
     --color-error-red: #FF6347;         /* For errors */
    --color-royal-blue: #0044FF;
}
}


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


Line 25: Line 25:
.mw-body h1, .mw-body-content h1,
.mw-body h1, .mw-body-content h1,
.mw-logo-wordmark, #firstHeadingTitle {
.mw-logo-wordmark, #firstHeadingTitle {
     color: var(--color-royal-blue);
     color: var(--color-sea-green);
     font-family: 'Metamorphous', cursive;
     font-family: 'Metamorphous', cursive;
    text-shadow: 1px 1px 2px rgba(0, 128, 128, 0.2);
}
}


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


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


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


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


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


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


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


#toc h2 {
#toc h2 {
     color: var(--color-dark-teal);
     color: var(--color-sea-green);
     text-align: center;
     text-align: center;
}
}
Line 78: Line 83:
/* 🟢 Buttons */
/* 🟢 Buttons */
.mw-ui-button {
.mw-ui-button {
     background-color: var(--color-dark-teal);
     background: linear-gradient(to bottom, var(--color-deep-teal), #006666);
     color: var(--color-dove-gray);
     color: var(--color-soft-white);
     border: none;
     border: none;
     padding: 8px 16px;
     padding: 8px 16px;
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     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 {
.mw-ui-button:hover {
     background-color: var(--color-cerulean);
     background: linear-gradient(to bottom, var(--color-sea-green), #1B6E47);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}


/* 📋 Infobox */
/* 📋 Infobox */
.infobox {
.infobox {
     background-color: var(--color-medium-slate);
     background-color: var(--color-very-light-gray);
     border: 2px solid var(--color-cerulean);
     border: 2px solid var(--color-sea-green);
     color: var(--color-dove-gray);
     color: var(--color-dark-gray);
     width: 250px;
     width: 250px;
     float: right;
     float: right;
Line 103: Line 111:


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


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


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


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


.mw-message-box-error {
.mw-message-box-error {
     background-color: #FF6347; /* Tomato for errors */
     background-color: var(--color-error-red);
     color: var(--color-dove-gray);
     color: var(--color-soft-white);
}
}


Line 135: Line 143:


::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
     background: var(--color-medium-slate);
     background: var(--color-very-light-gray);
    border-radius: 5px;
}
}


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


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


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


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


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


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


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


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


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


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


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


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


#p-search input:focus {
#p-search input:focus {
     border-color: var(--color-cerulean);
     border-color: var(--color-sea-green);
     box-shadow: 0 0 8px rgba(0, 123, 167, 0.5);
     box-shadow: 0 0 8px rgba(46, 139, 87, 0.5);
     outline: none;
     outline: none;
}
}
Line 219: Line 224:
/* 🌟 Sticky Header */
/* 🌟 Sticky Header */
.vector-sticky-header {
.vector-sticky-header {
     background-color: var(--color-medium-slate);
     background-color: var(--color-very-light-gray);
     border-bottom: 2px solid var(--color-dark-teal);
     border-bottom: 2px solid var(--color-deep-teal);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
}


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


.vector-sticky-header a:hover {
.vector-sticky-header a:hover {
     color: var(--color-cerulean);
     color: var(--color-sea-green);
}
}
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Vector-2022.css"