MediaWiki:Vector-light.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 🌿 Light Theme - Header */
.mw-header {
background-color: #B2C8B2; /* Sage Green */
color: #4A4A4A; /* Dark Gray text */
border-bottom: 3px solid #2E8B57; /* Sea Green underline */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
padding: 10px;
}
/* 🔗 Links */
.mw-header a {
color: #006D77; /* Deep Teal */
text-decoration: none;
}
.mw-header a:hover {
color: #2E8B57; /* Sea Green */
text-decoration: underline;
}
/* 🟡 Logo */
.mw-header .mw-logo-wordmark {
font-family: 'Metamorphous', cursive;
color: #2E8B57;
font-size: 1.8em;
}
/* 🔄 Responsive */
@media (max-width: 768px) {
.mw-header {
flex-direction: column;
align-items: flex-start;
}
}
/* 🌤️ Light Theme */
.mw-page-container {
background-color: #f8f9fa; /* Light gray */
color: #001F3F; /* Navy text */
border: 1px solid #ccd1d9;
}
.mw-page-container a {
color: #007BFF; /* Azure links */
}
.mw-page-container a:hover {
color: #0056b3; /* Darker Azure */
text-decoration: underline;
}
.mw-page-container h1,
.mw-page-container h2,
.mw-page-container h3 {
color: #5F4B8B; /* Lavender for headers */
}
.mw-page-container .mw-header,
.mw-page-container .mw-footer {
background-color: #e9ecef; /* Light slate background */
color: #001F3F;
}
/* 🌿 Base Variables for Light Green Theme */
:root, .skin-vector, .notheme {
--color-dove-gray: #D8D8D8; /* Base background */
--color-sage-green: #B2C8B2; /* Panels and sidebars */
--color-tea-green: #D0F0C0; /* Soft tea green */
--color-mint-green: #98FF98; /* Brighter mint green */
--color-sea-green: #2E8B57; /* Sea green for emphasis */
--color-deep-teal: #006D77; /* For links and buttons */
--color-cerulean: #007BA7; /* Secondary hover effect */
--color-medium-gray: #8A8F8F; /* Text and borders */
--color-dark-gray: #4A4A4A; /* Strong text contrast */
--color-error-red: #FF6347; /* For errors */
}
/* 🌿 Global Background & Text */
body {
background-color: var(--color-dove-gray);
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(46, 139, 87, 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-cerulean);
text-shadow: 0 0 5px rgba(0, 123, 167, 0.3);
}
/* 📊 Sidebar */
.mw-panel {
background-color: var(--color-sage-green);
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-dove-gray);
border: 1px solid var(--color-sage-green);
padding: px;
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-tea-green);
border: 2px solid var(--color-sea-green);
border-radius: 8px;
padding: 10px;
color: var(--color-dark-gray);
}
#toc h2 {
color: var(--color-deep-teal);
text-align: center;
}
/* 🟢 Buttons */
.mw-ui-button {
background: linear-gradient(to bottom, var(--color-deep-teal), #005F67);
color: var(--color-dove-gray);
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-tea-green);
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-dove-gray);
text-align: center;
}
.infobox td {
border-top: 1px solid var(--color-medium-gray);
}
/* 📬 Messages */
.mw-message-box {
background-color: var(--color-mint-green);
border-left: 4px solid var(--color-sea-green);
color: var(--color-dark-gray);
}
.mw-message-box-warning {
background-color: var(--color-tea-green);
color: var(--color-dark-gray);
}
.mw-message-box-error {
background-color: var(--color-error-red);
color: var(--color-dove-gray);
}
/* 🔄 Scrollbars */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-sage-green);
}
::-webkit-scrollbar-thumb {
background-color: var(--color-sea-green);
border-radius: 5px;
border: 2px solid var(--color-sage-green);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-deep-teal);
}
/* 📋 VisualEditor Toolbar */
body.ve-active .oo-ui-toolbar {
background-color: var(--color-sage-green);
border-bottom: 2px solid var(--color-sea-green);
}
body.ve-active .oo-ui-toolbar .oo-ui-buttonWidget {
background-color: var(--color-sea-green);
color: var(--color-dove-gray);
}
body.ve-active .oo-ui-toolbar .oo-ui-buttonWidget:hover {
background-color: var(--color-deep-teal);
}
/* 💡 Portable Infobox */
.portable-infobox .pi-secondary-background {
background-color: var(--color-tea-green);
border: 1px solid var(--color-sea-green);
}
.portable-infobox .pi-title {
background-color: var(--color-sea-green);
color: var(--color-dove-gray);
}
.portable-infobox .pi-data-label {
color: var(--color-deep-teal);
}
.portable-infobox .pi-data {
background-color: var(--color-sage-green);
}
/* 📖 Code Blocks */
pre, code {
background-color: var(--color-sage-green);
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-cerulean); }
.cm-def { color: #FF4500; }
/* 💫 Search Bar */
#p-search input {
background-color: var(--color-sage-green);
color: var(--color-dark-gray);
border: 1px solid var(--color-sea-green);
border-radius: 4px;
transition: box-shadow 0.3s ease;
}
#p-search input:focus {
border-color: var(--color-mint-green);
box-shadow: 0 0 8px rgba(152, 255, 152, 0.5);
outline: none;
}
/* 🌟 Sticky Header */
.vector-sticky-header {
background-color: var(--color-sage-green);
border-bottom: 2px solid var(--color-sea-green);
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-mint-green);
}
/* === Main Menu Spacing === */
#p-views .vector-menu-content {
display: flex;
flex-wrap: wrap;
gap: 8px; /* Adjust spacing between menu items */
justify-content: flex-start;
}
/* === Ensure Overflow Actions Drop into a More Menu === */
#p-views .vector-menu-content > li {
flex: 0 0 auto;
white-space: nowrap;
}
/* === Fix for Mobile and Smaller Screens === */
@media (max-width: 768px) {
#p-views .vector-menu-content {
flex-direction: column;
}
}
nav {
display: block; /* Ensure it behaves as a block element */
/*margin: 10px 0; Add vertical spacing */
padding-left: 10px;
margin-top: 10px; /* Add vertical spacing */
border-radius: 5px; /* Optional: rounded corners */
}
/* Adjust navigation links inside nav */
nav a {
margin-right: 10px; /* Space between links */
text-decoration: none; /* Remove underlines */
color: #007BFF; /* Link color */
}
nav a:hover {
text-decoration: underline; /* Hover effect */
}