User:Sunky/monobook.css

From SRB2 Wiki
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* General background color changes */
body {
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text for readability */
}

/* Notifications - update to match dark mode */
#pt-notifications-alert .mw-echo-notifications-badge, 
#pt-notifications-notice .mw-echo-notifications-badge {
    background-color: #444; /* Darker background for badges */
    border: 1px solid #666; /* Lighter border for better contrast */
    color: #fff; /* White text for better contrast */
}

#pt-notifications-alert .mw-echo-notifications-badge:hover, 
#pt-notifications-notice .mw-echo-notifications-badge:hover {
    background-color: #555; /* Slightly lighter on hover */
}

#pt-notifications-alert .mw-echo-notifications-badge:after, 
#pt-notifications-notice .mw-echo-notifications-badge:after {
    background-color: #666; /* Lighter badge color */
    color: #fff; /* White text */
}

/* Dimmed notifications */
#pt-notifications-alert .mw-echo-notifications-badge-dimmed,
#pt-notifications-notice .mw-echo-notifications-badge-dimmed {
    opacity: 0.6; /* Make dimmed badges even more visible on dark mode */
}

/* Hover effect changes */
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications:after, 
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after {
    background-color: #ff4500; /* Red for unread notifications */
}

#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after {
    background-color: #0066cc; /* Blue for unread notifications */
}

/* Help link background */
#mw-indicator-mw-helplink a {
    background-image: url(/w/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
    background-position: left center;
    background-repeat: no-repeat;
    color: #fff; /* White text */
    padding-left: 25px;
    line-height: 20px;
}

/* Edit section and collapsible section text color */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
    color: #bbb; /* Lighter color for text */
}

.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,
.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
    color: #bbb; /* Same lighter color for right-to-left */
}

/* Fieldset layout adjustments */
.mw-htmlform-ooui .oo-ui-fieldsetLayout-header {
    background-color: #333; /* Dark background for headers */
    color: #fff; /* White text for clarity */
}

/* Matrix table adjustments */
.mw-htmlform-ooui .mw-htmlform-matrix td {
    background-color: #2a2a2a; /* Darker background for table cells */
    color: #ddd; /* Light text */
}

.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
    background-color: #333; /* Slightly lighter for even rows */
}

.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
    background-color: #444; /* Hover effect for rows */
}

/* Inputs, buttons, and form elements */
.mw-htmlform-ooui .oo-ui-fieldLayout {
    background-color: #1e1e1e; /* Darker field background */
    color: #fff; /* White text for fields */
}

.mw-htmlform-ooui .mw-htmlform-matrix td input {
    background-color: #333; /* Dark input fields */
    color: #fff; /* White text in inputs */
}