MediaWiki:Common.css: Difference between revisions

Revision as of 21:38, 8 October 2024

/* General reset to apply the background and text color across the site */
body, #content, .mw-body-content, #mw-head, #mw-panel, #footer {
    background-color: #111111 !important;
    color: #AFACA8 !important;
}

/* Headers (H1-H6) */
h1, h2, h3, h4, h5, h6 {
    background-color: #111111;
    color: #AFACA8;
    padding: 5px;
}

/* Links */
a {
    color: #5C6969; /* Link color */
    text-decoration: underline; /* Optional for underlined links */
}
a:visited {
    color: #89C5B7; /* Visited links color */
}
a:hover {
    color: #AFACA8; /* Hover color */
}

/* Sidebars */
#mw-panel, #mw-sidebar, .vector-sidebar, .vector-main-menu, .vector-pinned-container {
    background-color: #111111;
    color: #AFACA8;
}
#mw-panel a, .vector-main-menu a, .vector-pinned-container a {
    color: #5C6969; /* Sidebar link color */
}
#mw-panel a:hover, .vector-main-menu a:hover, .vector-pinned-container a:hover {
    color: #AFACA8; /* Sidebar link hover color */
}

/* Search Bar */
#searchInput {
    background-color: #222222;
    color: #AFACA8;
}
#searchButton {
    background-color: #5C6969;
    color: #AFACA8;
}
#searchButton:hover {
    background-color: #89C5B7;
}

/* Pinned Menus and Containers */
.vector-pinned-container {
    background-color: #111111;
    color: #AFACA8;
}
.vector-pinned-container a {
    color: #5C6969;
}
.vector-pinned-container a:hover {
    color: #AFACA8;
}

/* Header Bar */
#mw-head, #mw-header, .vector-header {
    background-color: #111111;
    color: #AFACA8;
}

/* Footer */
#footer {
    background-color: #111111;
    color: #AFACA8;
}

/* Tables */
table.wikitable {
    background-color: #111111;
    color: #AFACA8;
    border-color: #5C6969;
}
table.wikitable th, table.wikitable td {
    background-color: #222222;
    color: #AFACA8;
}

/* Action Buttons */
.mw-ui-button, .mw-ui-progressive, .mw-ui-destructive {
    background-color: #5C6969;
    color: #AFACA8;
    border-color: #5C6969;
}
.mw-ui-button:hover, .mw-ui-progressive:hover, .mw-ui-destructive:hover {
    background-color: #89C5B7;
    color: #111111;
}

/* Drop-down Menus */
.mw-ui-dropdown, .mw-dropdown-content {
    background-color: #111111;
    color: #AFACA8;
    border: 1px solid #5C6969;
}
.mw-ui-dropdown a, .mw-dropdown-content a {
    color: #5C6969;
}
.mw-ui-dropdown a:hover, .mw-dropdown-content a:hover {
    color: #AFACA8;
}

/* Notifications, Alerts, and Other Actions */
.vector-menu-content-list, .mw-notification-area {
    background-color: #111111;
    color: #AFACA8;
}
.vector-menu-content-list a, .mw-notification-area a {
    color: #5C6969;
}
.vector-menu-content-list a:hover, .mw-notification-area a:hover {
    color: #AFACA8;
}
/* Top bar (tabs) - Messages, Discussion, Edit, View History, etc. */
#p-views, .vector-menu-tabs, .vector-view-actions, .vector-tab-content {
    background-color: #111111 !important;
    color: #AFACA8 !important;
}

/* Individual tabs */
#p-views ul li, .vector-menu-tabs li, .vector-view-actions li {
    background-color: #111111 !important;
}

#p-views ul li a, .vector-menu-tabs li a, .vector-view-actions li a {
    color: #5C6969 !important;
}

/* Hover state for the tabs */
#p-views ul li a:hover, .vector-menu-tabs li a:hover, .vector-view-actions li a:hover {
    color: #AFACA8 !important;
    background-color: #5C6969 !important;
}

/* Active tab */
#p-views ul li.selected a, .vector-menu-tabs li.selected a, .vector-view-actions li.selected a {
    color: #AFACA8 !important;
    background-color: #5C6969 !important;
}

/* Set the logo to auto-scale */
#p-logo a img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Optionally control the max size of the logo */
#p-logo {
    max-width: 200px;  /* Adjust the max width as needed */
    max-height: 200px; /* Adjust the max height as needed */
}

/* Center the logo vertically within the header (optional) */
#p-logo a img {
    display: block;
    margin: 0 auto;
}
/* Set the logo to auto-scale */
#p-logo a img {
    max-width: 100%;
    height: auto;
    width: auto;
}