|
|
| Line 1: |
Line 1: |
| /* 🌿 Base Variables for Light Green Theme */
| |
| :root {
| |
| --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: 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-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);
| |
| }
| |
