MediaWiki:Modern.css

/* Base colors - refined versions of original palette */
:root {
    --primary-green: #1A4731;       /* Darker, softer green (original: #005934) */
    --header-green: #0D3B22;        /* Softer header green (original: #005930) */
    --gold-accent: #D4A017;         /* Warmer, less harsh gold (original: #d09300) */
    --maroon: #763C3C;              /* Softer maroon (original: #8c3c3c) */
    --content-bg: #FFF8E1;          /* Warm cream instead of bright yellow */
    --text-color: #2D2D2D;          /* Soft black for better readability */
    --border-color: #C9B18B;        /* Warm beige border instead of black */
}

/* Modern skin adjustments */
body {
    background-color: var(--primary-green);
    color: var(--text-color);
    font-family: sans-serif;
    line-height: 1.6;
    font-size: 16px; /* Slightly larger base font size */
}

#mw_main,
#p-personal,
#mw_header,
.os-suggest {
    font-size: 130%;
}

/* Header */
#mw_header {
    background-color: var(--header-green);
    color: #F0F0F0; /* Light gray text for better contrast */
    height: 3em; /* Slightly taller */
    padding: 0.5em 0;
}

#mw_header h1 {
    color: var(--gold-accent);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

/* Personal toolbar */
#p-personal {
    background-color: var(--header-green);
    border-bottom: 1px solid var(--gold-accent);
    border-top: 1px solid var(--gold-accent);
    height: 2.5em; /* More comfortable height */
}

#p-personal ul {
    background-color: var(--header-green);
}

#p-personal li a {
    color: #F0F0F0;
    padding: 0.5em 1em; /* Better click area */
}

#p-personal li a:hover {
    color: var(--gold-accent);
}

#p-personal li:hover {
    background-color: rgba(0,0,0,0.2); /* Subtle hover effect */
}

/* Main content */
#content {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 1.5em; /* More breathing room */
    line-height: 1.7; /* Better readability */
}

/* Sidebar */
#mw_portlets {
    background-color: var(--maroon);
    border-right: 1px solid var(--border-color);
    color: #F0F0F0; /* Light text on dark background */
}

.mw-portlet > label,
.portlet h3 {
    background-color: #5A2A2A; /* Darker maroon for headers */
    color: var(--gold-accent);
    border-color: var(--header-green);
    padding: 0.7em 1em; /* More comfortable padding */
}

/* Links */
a {
    color: #2A5C8A; /* Pleasant blue that works with the palette */
    text-decoration: none;
    transition: color 0.2s; /* Smooth hover effect */
}

a:hover {
    color: var(--gold-accent);
    text-decoration: underline;
}

a:visited {
    color: #5D3A9B; /* Purple that complements the palette */
}

/* Tables of contents */
#toc,
.toc {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
}

/* Footer */
.mw-footer {
    background-color: var(--header-green);
    color: #F0F0F0;
    padding: 1.5em;
}

.mw-footer a {
    color: var(--gold-accent);
}

/* Code/preformatted text */
pre, .mw-code {
    background-color: #F5F5F5;
    border: 1px solid var(--border-color);
    padding: 1em;
    line-height: 1.5;
}

/* Buttons */
input[type="submit"],
input[type="button"] {
    background-color: var(--maroon);
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 3px;
    transition: background-color 0.2s;
}

input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #8A4A4A;
}

/* Text improvements */
p, li {
    line-height: 1.7;
    margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--header-green);
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

/* Special elements */
#p-cactions li.selected {
    background-color: var(--gold-accent);
    color: var(--header-green);
}

#p-cactions li a {
    color: var(--maroon);
}

#p-cactions li.selected a {
    color: var(--header-green);
}