MediaWiki:Common.css: Difference between revisions

From UO Icebound
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
 
/* General reset to apply the background and text color across the site */
 
body, #content, .mw-body-content, #mw-head, #mw-panel, #footer {
/* Change the background color of the main menu sidebar */
     background-color: #111111 !important;
#mw-panel {
     color: #AFACA8 !important;
    background-color: #111111; /* Dark background for sidebar */
    color: #AFACA8; /* Light text color */
}
 
/* Change the color of the links in the main menu sidebar */
#mw-panel a {
    color: #5C6969; /* Link color for the main menu */
}
 
/* Change the visited link color in the main menu sidebar */
#mw-panel a:visited {
    color: #89C5B7; /* Color for visited links in the sidebar */
 
}
 
/* Change link hover color in the main menu sidebar */
#mw-panel a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}
 
/* Change the background color of portlet headers in the sidebar */
.portlet-header {
    background-color: #222222; /* Dark background for portlet headers */
    color: #AFACA8; /* Light text color for portlet headers */
}
 
/* Change the background color and text for the pinned tools navigation */
.vector-pinned-container {
    background-color: #111111; /* Dark background for pinned tools */
    color: #AFACA8; /* Light text color for pinned tools */
}
 
/* Change the color of the links in the pinned tools navigation */
.vector-pinned-container a {
    color: #5C6969; /* Link color for pinned tools */
}
 
/* Change the visited link color in the pinned tools navigation */
.vector-pinned-container a:visited {
    color: #89C5B7; /* Color for visited links in pinned tools */
}
 
/* Change link hover color in the pinned tools navigation */
.vector-pinned-container a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}
 
/* Ensure the text color is consistent for all other elements in the sidebar */
#mw-panel .mw-portlet-header,
#mw-panel .mw-portlet-body {
    background-color: #111111; /* Dark background for all portlet sections */
    color: #AFACA8; /* Light text color for all portlet sections */
}
 
/* Style the search bar in the sidebar */
#search {
    background-color: #222222; /* Dark background for the search bar */
    color: #AFACA8; /* Text color for the search bar */
}
 
/* Style the input field in the search bar */
#searchInput {
    background-color: #222222; /* Dark background for input field */
    color: #AFACA8; /* Text color for input field */
}
 
/* Style the search button */
#searchButton {
    background-color: #5C6969; /* Button background color */
    color: #AFACA8; /* Button text color */
}
 
/* Change the hover color for the search button */
#searchButton:hover {
    background-color: #89C5B7; /* Button hover background color */
}
 
/* General reset for all other elements in the sidebar with old backgrounds */
#mw-panel * {
    background-color: #111111 !important; /* Force dark background for all elements in the sidebar */
    color: #AFACA8 !important; /* Force light text color for all elements in the sidebar */
}
 
/* General reset for all other elements with old backgrounds in the pinned tools */
.vector-pinned-container * {
     background-color: #111111 !important; /* Force dark background for all elements in pinned tools */
     color: #AFACA8 !important; /* Force light text color for all elements in pinned tools */
}
/* Change the background color of the entire page */
body {
    background-color: #111111; /* Dark background color */
    color: #AFACA8; /* Light font color for all text */
    font-size: 18px; /* Adjust the number to your desired font size */
}
}
 
/* Change the main page title */
.firstHeading {
    background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
    padding: 10px; /* Optional: Add some padding */
}
}


/* Change the color and background of all headings (H1-H6) */
/* Headers (H1-H6) */
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
    color: #AFACA8; /* Text color */
     background-color: #111111;
     background-color: #111111; /* Background color */
     color: #AFACA8;
    padding: 5px; /* Optional: Add some padding */
     padding: 5px;
}
 
h1 {
    font-size: 2.2em; /* Relative to the body font size */
}
 
h2 {
    font-size: 2em;
}
 
h3 {
    font-size: 1.75em;
}
 
h4 {
    font-size: 1.5em;
}
 
h5 {
    font-size: 1.25em;
}
 
h6 {
    font-size: 1em;
}
 
/* Change the color of section headlines */
.mw-headline {
     color: #AFACA8; /* Text color */
    background-color: #111111; /* Background color */
     padding: 5px; /* Optional: Add some padding */
}
}


/* Change link colors */
/* Links */
a {
a {
     color: #5C6969; /* Link color for empty links */
     color: #5C6969; /* Link color */
    text-decoration: underline; /* Optional for underlined links */
}
}
/* Change the color of visited links */
a:visited {
a:visited {
     color: #89C5B7; /* Change to your desired color */
     color: #89C5B7; /* Visited links color */
    text-decoration: underline; /* Ensures the underline is visible */
}
}
/* Change link hover color */
a:hover {
a:hover {
     color: #AFACA8; /* Light color on hover for visibility */
     color: #AFACA8; /* Hover color */
}
 
/* Change the background color of the content area */
.mw-body, .mw-body-content {
    background-color: #111111; /* Background color for content */
}
 
/* Change sidebar background color and text */
#mw-panel, #mw-portlets {
    background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
 
/* Change the Tools section */
#mw-control-portal, #mw-tools {
    background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
 
/* Change the appearance of the edit interface */
#wpTextbox1 {
    background-color: #222222; /* Dark background for the editing text area */
    color: #AFACA8; /* Text color for the editing area */
}
 
/* Change the button colors in the edit toolbar */
#mw-editform .mw-toolbar {
    background-color: #111111; /* Background color for the toolbar */
    color: #AFACA8; /* Text color for the toolbar */
}
 
/* Change the color of buttons */
button, input[type="submit"] {
    background-color: #5C6969; /* Background color for buttons */
    color: #AFACA8; /* Text color for buttons */
}
 
/* Change button hover color */
button:hover, input[type="submit"]:hover {
    background-color: #89C5B7; /* Lighter background color on hover */
}
 
/* Change the background color of the editing summary box */
#wpSummary {
    background-color: #222222; /* Dark background for the summary box */
    color: #AFACA8; /* Text color for the summary box */
}
 
/* Change the sidebar portlet heading color */
.portlet-header {
    background-color: #222222; /* Dark background for portlet headers */
    color: #AFACA8; /* Text color for portlet headers */
}
 
/* Change the heading for the sidebar */
#p-personal, #p-namespaces, #p-views {
    background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
 
/* Change the site title and icon area */
#siteSub, #mw-head, #mw-logo {
    background-color: #111111; /* Dark background for site title and logo */
    color: #AFACA8; /* Light text color */
}
}


/* Change the main page logo */
/* Sidebars */
#mw-logo img {
#mw-panel, #mw-sidebar, .vector-sidebar, .vector-main-menu, .vector-pinned-container {
     max-height: 40px; /* Optional: Adjust the height of the logo */
     background-color: #111111;
    color: #AFACA8;
}
}
 
#mw-panel a, .vector-main-menu a, .vector-pinned-container a {
/* Change the vector header background */
     color: #5C6969; /* Sidebar link color */
.vector-header {
    background-color: #111111; /* Dark background for the header */
     color: #AFACA8; /* Light text color */
}
}
 
#mw-panel a:hover, .vector-main-menu a:hover, .vector-pinned-container a:hover {
/* Style the search bar */
     color: #AFACA8; /* Sidebar link hover color */
#search {
    background-color: #222222; /* Dark background for the search bar */
     color: #AFACA8; /* Text color */
}
}


/* Style the search input field */
/* Search Bar */
#searchInput {
#searchInput {
     background-color: #222222; /* Dark background for the input field */
     background-color: #222222;
     color: #AFACA8; /* Text color for input field */
     color: #AFACA8;
}
}
/* Style the search button */
#searchButton {
#searchButton {
     background-color: #5C6969; /* Button background color */
     background-color: #5C6969;
     color: #AFACA8; /* Button text color */
     color: #AFACA8;
}
}
/* Change the hover color for the search button */
#searchButton:hover {
#searchButton:hover {
     background-color: #89C5B7; /* Button hover background color */
     background-color: #89C5B7;
}
 
/* Change the background color of the 'what links here' section */
#mw-whatlinkshere {
    background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
 
/* Change the appearance of all notification messages */
.mw-notice {
    background-color: #222222; /* Dark background for notifications */
    color: #AFACA8; /* Light text color */
}
 
/* Change the footer background */
#footer {
    background-color: #111111; /* Dark background for footer */
    color: #AFACA8; /* Light text color */
}
 
/* Style the right tools section */
#mw-tb {
    background-color: #111111; /* Background color for the tools section */
    color: #AFACA8; /* Text color for the tools section */
}
 
/* Change the background color of the MediaWiki logo section */
#mw-head {
    background-color: #111111; /* Dark background for the header area */
}
 
/* Change the sidebar background for the main menu and other links */
#mw-panel {
    background-color: #111111; /* Ensure sidebar background is dark */
    color: #AFACA8; /* Ensure sidebar text is light */
}
 
/* Change the header container background */
#mw-head-container {
    background-color: #111111; /* Dark background for header container */
    color: #AFACA8; /* Light text color */
}
 
/* Change the page container background */
#content {
    background-color: #111111; /* Dark background for the page container */
    color: #AFACA8; /* Light text color */
}
 
/* Change the vector site notice container */
.vector-sitenotice-container {
    background-color: #111111; /* Dark background */
    color: #AFACA8; /* Text color */
}
 
/* Change the vector column start background */
.vector-column-start {
    background-color: #111111; /* Dark background */
    color: #AFACA8; /* Text color */
}
 
/* Change the vector main menu container */
.vector-main-menu-container {
    background-color: #111111; /* Dark background */
    color: #AFACA8; /* Text color */
}
 
/* Change the vector main menu background and text color */
.vector-main-menu {
    background-color: #111111; /* Dark background */
    color: #AFACA8; /* Text color */
}
 
/* Change the links within the vector main menu */
.vector-main-menu a {
    color: #5C6969; /* Link color for empty links */
}
 
.vector-main-menu a:visited {
    color: #89C5B7; /* Color for visited links */
}
 
.vector-main-menu a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}
}


/* Change the vector pinned container background and text color */
/* Pinned Menus and Containers */
.vector-pinned-container {
.vector-pinned-container {
     background-color: #111111; /* Dark background */
     background-color: #111111;
     color: #AFACA8; /* Text color */
     color: #AFACA8;
}
}
/* Change the links within the vector pinned container */
.vector-pinned-container a {
.vector-pinned-container a {
     color: #5C6969; /* Link color for empty links */
     color: #5C6969;
}
}
 
.vector-pinned-container a:hover {
.vector-pinned-container a:visited {
     color: #AFACA8;
     color: #89C5B7; /* Color for visited links */
}
}


.vector-pinned-container a:hover {
/* Header Bar */
     color: #AFACA8; /* Light color on hover for visibility */
#mw-head, #mw-header, .vector-header {
    background-color: #111111;
     color: #AFACA8;
}
}


/* General reset for all other elements with white backgrounds */
/* Footer */
* {
#footer {
     background-color: #111111 !important; /* Force dark background for all elements */
     background-color: #111111;
     color: #AFACA8 !important; /* Force light text color for all elements */
     color: #AFACA8;
}
}


/* Specific adjustments to ensure proper visibility */
/* Tables */
#mw-head, #mw-head-container, #mw-page-base, #mw-page-after-content {
table.wikitable {
     background-color: #111111 !important; /* Force dark background */
    background-color: #111111;
    color: #AFACA8;
     border-color: #5C6969;
}
}
 
table.wikitable th, table.wikitable td {
/* Adjust vector header and site notice */
     background-color: #222222;
.vector-header, .vector-sitenotice-container, .vector-main-menu-container {
    color: #AFACA8;
     background-color: #111111 !important; /* Force dark background */
}
}


/* Ensure the search area and tools are dark */
/* Action Buttons */
#search, #mw-tools {
.mw-ui-button, .mw-ui-progressive, .mw-ui-destructive {
     background-color: #111111 !important; /* Force dark background */
     background-color: #5C6969;
    color: #AFACA8;
    border-color: #5C6969;
}
}
 
.mw-ui-button:hover, .mw-ui-progressive:hover, .mw-ui-destructive:hover {
/* Ensure consistency in the content area */
     background-color: #89C5B7;
#content, .mw-body-content {
    color: #111111;
     background-color: #111111 !important; /* Force dark background */
}
}


/* Ensure portlet headers are styled */
/* Drop-down Menus */
.portlet-header {
.mw-ui-dropdown, .mw-dropdown-content {
     background-color: #222222 !important; /* Ensure dark background */
     background-color: #111111;
     color: #AFACA8 !important; /* Ensure light text */
     color: #AFACA8;
    border: 1px solid #5C6969;
}
}
.vector-pinned-container:after {
.mw-ui-dropdown a, .mw-dropdown-content a {
     content: none; /* Removes the :after pseudo-element */
     color: #5C6969;
    display: none; /* Ensures it does not display */
}
}
.vector-toc:after {
.mw-ui-dropdown a:hover, .mw-dropdown-content a:hover {
    content: none; /* Removes the :after pseudo-element */
     color: #AFACA8;
     display: none; /* Ensures it does not display */
}
}
hr {
 
    border-top: 1px solid #AFACA8; /* Set the top border color to the desired text color */
/* Notifications, Alerts, and Other Actions */
    height: 1px; /* Optional: Set the height of the horizontal rule */
.vector-menu-content-list, .mw-notification-area {
    background-color: #AFACA8; /* Set the background color to match the text color */
     background-color: #111111;
}
     color: #AFACA8;
/* Set the logo image */
#p-logo img {
    content: url('http://64.225.27.204:8080/index.php/MediaWiki_talk:SiteLogo');
    width: auto;
    height: auto;
}
/* Style for the top bar links */
#p-namespaces a,
#p-views a,
#p-actions a {
     text-decoration: underline; /* Ensures the underline is always visible */
     color: #AFACA8; /* Your desired text color */
}
}
 
.vector-menu-content-list a, .mw-notification-area a {
/* Optional: Change the hover color */
     color: #5C6969;
#p-namespaces a:hover,
#p-views a:hover,
#p-actions a:hover {
     color: #5C6969; /* Your hover color */
}
}
/* Change bullet color to match text color */
.vector-menu-content-list a:hover, .mw-notification-area a:hover {
ul {
     color: #AFACA8;
    list-style-type: disc; /* Ensure standard bullet point */
     color: #AFACA8; /* Set bullet color to match text color */
}
}
 
/* Top bar (tabs) - Messages, Discussion, Edit, View History, etc. */
/* Ensure that bullets inherit text color */
#p-views, .vector-menu-tabs, .vector-view-actions, .vector-tab-content {
ul li {
    background-color: #111111 !important;
     color: #AFACA8; /* Set list item color */
     color: #AFACA8 !important;
}
}


/* Optional: Change bullet color for nested lists */
/* Individual tabs */
ul ul {
#p-views ul li, .vector-menu-tabs li, .vector-view-actions li {
    list-style-type: circle; /* Change bullet style for nested lists */
     background-color: #111111 !important;
}
/* Remove ::after from the main table of contents */
.mw-table-of-contents-container::after,
.vector-toc-landmark::after,
.vector-toc .mw-parser-output::after {
     display: none !important;
    content: none !important;
}
}


/* Additionally, remove from other relevant containers */
#p-views ul li a, .vector-menu-tabs li a, .vector-view-actions li a {
.vector-toc-container::after {
     color: #5C6969 !important;
     display: none !important;
    content: none !important;
}
}


/* Specific targeting for table elements if necessary */
/* Hover state for the tabs */
.mw-parser-output table::after {
#p-views ul li a:hover, .vector-menu-tabs li a:hover, .vector-view-actions li a:hover {
     display: none !important;
     color: #AFACA8 !important;
     content: none !important;
     background-color: #5C6969 !important;
}
}


/* Style the vector-page-titlebar-toc */
/* Active tab */
.vector-page-titlebar-toc {
#p-views ul li.selected a, .vector-menu-tabs li.selected a, .vector-view-actions li.selected a {
     background-color: #111111; /* Same dark background as the sidebar */
     color: #AFACA8 !important;
     color: #AFACA8; /* Same light font color */
     background-color: #5C6969 !important;
}
}

Revision as of 21:37, 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;
}
Retrieved from "http://wiki.uoicebound.com/index.php?title=MediaWiki:Common.css&oldid=205"