User:Editingthingsforlife/timeless.js

/* ==========================================================================
   Improved "Madness Theme" Styles for MediaWiki
   ========================================================================== */

/* Apply these styles if the 'madness-theme' class is on the body or a main wrapper
   If 'madness-theme' IS your skin, you might not need to prefix with .madness-theme
   for every rule, but it helps ensure specificity if it's an added class. */

.madness-theme,
.madness-theme body {
    background-color: #1e1e1e !important; /* Dark grey background - less harsh than black */
    color: #e0e0e0 !important;            /* Light grey text for readability */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* --- Links --- */
.madness-theme a {
    color: #5dade2 !important; /* A pleasant, readable blue for links */
    text-decoration: none !important;
}

.madness-theme a:hover {
    color: #85c1e9 !important;
    text-decoration: underline !important;
}

.madness-theme a:visited {
    /* color: #a569bd !important; /* Optional: different color for visited links */
}

/* --- Headings --- */
.madness-theme h1, .madness-theme h2, .madness-theme h3, .madness-theme h4, .madness-theme h5, .madness-theme h6,
.madness-theme #firstHeading, /* Page Title */
.madness-theme .mw-first-heading {
    color: #f5f5f5 !important; /* Off-white for main headings */
    text-shadow: none !important; /* Remove aggressive text shadow */
    border-bottom-color: #444 !important; /* Softer border for headings */
}

.madness-theme #firstHeading,
.madness-theme .mw-first-heading {
    /* The "Editing MediaWiki:Common.js" title */
    background-color: transparent !important; /* Remove any specific background it had */
    padding-bottom: 0.5em !important;
    margin-bottom: 0.8em !important;
}

/* --- Main Content Area --- */
.madness-theme #content {
    background-color: #2a2a2a !important; /* Slightly lighter dark for content area */
    border: 1px solid #444 !important;    /* Subtle border */
    box-shadow: none !important;          /* REMOVE the aggressive red glow */
    /* Optional: A very subtle, dark shadow for depth if desired */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; */
    border-radius: 4px; /* Slightly rounded corners */
    padding: 20px; /* Ensure good padding */
}

.madness-theme #mw-content-text {
    /* The main text area within the content block */
    color: #dcdcdc !important; /* Ensure good text contrast */
}

/* --- Tabs / Page Actions (Message, Discussion, Edit, History) --- */
.madness-theme #p-views ul li a,
.madness-theme #p-cactions ul li a { /* For Vector-2022 and similar */
    background-color: #333 !important;
    border: 1px solid #444 !important;
    border-bottom: none !important;
    color: #cccccc !important;
    text-shadow: none !important;
    padding: 0.5em 1em !important;
}

.madness-theme #p-views ul li.selected a,
.madness-theme #p-cactions ul li.selected a {
    background-color: #2a2a2a !important; /* Match content background for selected tab */
    border-color: #444 !important;
    color: #f5f5f5 !important;
}

.madness-theme #p-views ul li a:hover,
.madness-theme #p-cactions ul li a:hover {
    background-color: #404040 !important;
    color: #ffffff !important;
}

/* --- Warning Messages --- */
.madness-theme .warningbox,
.madness-theme .usermessage,
.madness-theme div.error,
.madness-theme div.warning,
.madness-theme .mw-message-box-warning { /* More generic MediaWiki warning */
    background-color: #4d2f2f !important; /* Darker, less saturated red background */
    color: #f0f0f0 !important;           /* Light text for contrast */
    border: 1px solid #803030 !important; /* Muted red border */
    padding: 10px 15px !important;
    border-radius: 3px !important;
    text-shadow: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; /* Subtle shadow */
}

.madness-theme .warningbox p,
.madness-theme .usermessage p,
.madness-theme div.error p,
.madness-theme div.warning p {
     color: #f0f0f0 !important; /* Ensure paragraph text inside is also light */
     margin: 0.5em 0 !important;
}

/* --- Code Editor (e.g., AceEditor for JS/CSS pages) --- */
.madness-theme .ace_editor {
    background-color: #1a1a1a !important;
    color: #d4d4d4 !important;
    border: 1px solid #3c3c3c !important;
}

.madness-theme .ace_gutter {
    background: #252526 !important;
    color: #858585 !important;
}

.madness-theme .ace_gutter-active-line {
    background-color: #333333 !important;
}

.madness-theme .ace_marker-layer .ace_active-line {
    background: #303030 !important;
}

.madness-theme .ace_cursor {
    color: #f0f0f0 !important;
}

/* Common Syntax Highlighting (adjust to your preference/editor's classes) */
.madness-theme .ace_keyword { color: #569cd6 !important; }
.madness-theme .ace_string { color: #ce9178 !important; }
.madness-theme .ace_comment { color: #6A9955 !important; font-style: italic; }
.madness-theme .ace_variable { color: #9cdcfe !important; }
.madness-theme .ace_numeric { color: #b5cea8 !important; }
.madness-theme .ace_function, .madness-theme .ace_support.ace_function { color: #dcdcaa !important; }
.madness-theme .ace_constant.ace_language { color: #4fc1ff !important; }
.madness-theme .ace_tag { color: #569cd6 !important; }
.madness-theme .ace_attr-name { color: #9cdcfe !important; }
.madness-theme .ace_attr-value { color: #ce9178 !important; }

/* --- Sidebars (Navigation, Tools, etc.) --- */
/* This part is more involved if the sidebars are currently light.
   You'd need to target specific IDs like #p-navigation, #p-search, #p-tb, etc.
   The following are examples if you want to make them dark to match. */

.madness-theme #mw-panel, /* Common wrapper for sidebars in skins like Vector */
.madness-theme #column-one { /* Older skins */
    background-color: #252526 !important;
}

.madness-theme #mw-panel .portal,
.madness-theme #column-one .portlet {
    background-color: #252526 !important;
    border: none !important;
    margin-bottom: 1em !important;
}

.madness-theme #mw-panel .portal h3,
.madness-theme #column-one .portlet h3, /* For older skins like Monobook */
.madness-theme #mw-panel .vector-menu-heading { /* For Vector-2022 */
    color: #b0b0b0 !important;
    background-color: #333333 !important;
    border: 1px solid #444 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0.4em 0.8em !important;
    font-size: 0.9em !important;
    text-shadow: none !important;
}

.madness-theme #mw-panel .body ul li a,
.madness-theme #column-one .pBody ul li a,
.madness-theme #mw-panel .vector-menu-content a {
    color: #b0b0b0 !important;
}

.madness-theme #mw-panel .body ul li a:hover,
.madness-theme #column-one .pBody ul li a:hover,
.madness-theme #mw-panel .vector-menu-content a:hover {
    background-color: #383838 !important;
    color: #ffffff !important;
}


/* --- Search Bar --- */
.madness-theme #searchInput {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}
.madness-theme #searchInput:focus {
    border-color: #5dade2 !important;
}
.madness-theme #searchButton, .madness-theme #mw-searchButton {
    background-color: #444 !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
}


/* --- Buttons --- */
.madness-theme input[type="submit"],
.madness-theme input[type="button"],
.madness-theme button,
.madness-theme .mw-ui-button {
    background-color: #4a4a4a !important;
    color: #f0f0f0 !important;
    border: 1px solid #666 !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    text-shadow: none !important;
    cursor: pointer;
}

.madness-theme input[type="submit"]:hover,
.madness-theme input[type="button"]:hover,
.madness-theme button:hover,
.madness-theme .mw-ui-button:hover {
    background-color: #5a5a5a !important;
    border-color: #777 !important;
}

.madness-theme .mw-ui-button.mw-ui-progressive { /* "Save page" like buttons */
    background-color: #3070a0 !important;
    border-color: #285a80 !important;
}
.madness-theme .mw-ui-button.mw-ui-progressive:hover {
    background-color: #3880b8 !important;
}

.madness-theme .mw-ui-button.mw-ui-destructive { /* "Delete" like buttons */
    background-color: #a03030 !important;
    border-color: #802828 !important;
}
.madness-theme .mw-ui-button.mw-ui-destructive:hover {
    background-color: #b83838 !important;
}

/* --- Tables --- */
.madness-theme table.wikitable {
    background-color: #2c2c2c !important;
    border: 1px solid #454545 !important;
    color: #c0c0c0 !important;
}
.madness-theme table.wikitable > tr > th,
.madness-theme table.wikitable > * > tr > th {
    background-color: #383838 !important;
    border: 1px solid #454545 !important;
    color: #e0e0e0 !important;
}
.madness-theme table.wikitable > tr > td,
.madness-theme table.wikitable > * > tr > td {
    border: 1px solid #454545 !important;
}

/* Make sure !important is used if these styles are being overridden by very specific skin styles */
/* However, if this IS the skin's CSS, !important can often be omitted if selectors are specific enough. */