MediaWiki:Common.css: Difference between revisions

From UO Icebound
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* Change the background color of the entire page */
/* Change the background color of the main menu sidebar */
body {
#mw-panel {
     background-color: #111111; /* Dark background color */
     background-color: #111111; /* Dark background for sidebar */
     color: #AFACA8; /* Light font color for all text */
     color: #AFACA8; /* Light text color */
}
 
/* 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) */
h1, h2, h3, h4, h5, h6 {
    color: #AFACA8; /* Text color */
    background-color: #111111; /* Background color */
    padding: 5px; /* Optional: Add some padding */
}
 
/* 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 */
/* Change the color of the links in the main menu sidebar */
a {
#mw-panel a {
     color: #5C6969; /* Link color for empty links */
     color: #5C6969; /* Link color for the main menu */
}
}


/* Change the color of visited links */
/* Change the visited link color in the main menu sidebar */
a:visited {
#mw-panel a:visited {
     color: #89C5B7; /* Color for visited links */
     color: #89C5B7; /* Color for visited links in the sidebar */
}
}


/* Change link hover color */
/* Change link hover color in the main menu sidebar */
a:hover {
#mw-panel a:hover {
     color: #AFACA8; /* Light color on hover for visibility */
     color: #AFACA8; /* Light color on hover for visibility */
}
}


/* Change the background color of the content area */
/* Change the background color of portlet headers in the sidebar */
.mw-body, .mw-body-content {
.portlet-header {
     background-color: #111111; /* Background color for content */
     background-color: #222222; /* Dark background for portlet headers */
    color: #AFACA8; /* Light text color for portlet headers */
}
}


/* Change sidebar background color and text */
/* Change the background color and text for the pinned tools navigation */
#mw-panel, #mw-portlets {
.vector-pinned-container {
     background-color: #111111; /* Background color */
     background-color: #111111; /* Dark background for pinned tools */
     color: #AFACA8; /* Text color */
     color: #AFACA8; /* Light text color for pinned tools */
}
}


/* Change the Tools section */
/* Change the color of the links in the pinned tools navigation */
#mw-control-portal, #mw-tools {
.vector-pinned-container a {
     background-color: #111111; /* Background color */
     color: #5C6969; /* Link color for pinned tools */
    color: #AFACA8; /* Text color */
}
}


/* Change the appearance of the edit interface */
/* Change the visited link color in the pinned tools navigation */
#wpTextbox1 {
.vector-pinned-container a:visited {
    background-color: #222222; /* Dark background for the editing text area */
     color: #89C5B7; /* Color for visited links in pinned tools */
     color: #AFACA8; /* Text color for the editing area */
}
}


/* Change the button colors in the edit toolbar */
/* Change link hover color in the pinned tools navigation */
#mw-editform .mw-toolbar {
.vector-pinned-container a:hover {
    background-color: #111111; /* Background color for the toolbar */
     color: #AFACA8; /* Light color on hover for visibility */
    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 */
#mw-logo img {
    max-height: 40px; /* Optional: Adjust the height of the logo */
}
}


/* Change the vector header background */
/* Ensure the text color is consistent for all other elements in the sidebar */
.vector-header {
#mw-panel .mw-portlet-header,
     background-color: #111111; /* Dark background for the header */
#mw-panel .mw-portlet-body {
     color: #AFACA8; /* Light text color */
     background-color: #111111; /* Dark background for all portlet sections */
     color: #AFACA8; /* Light text color for all portlet sections */
}
}


/* Style the search bar */
/* Style the search bar in the sidebar */
#search {
#search {
     background-color: #222222; /* Dark background for the search bar */
     background-color: #222222; /* Dark background for the search bar */
     color: #AFACA8; /* Text color */
     color: #AFACA8; /* Text color for the search bar */
}
}


/* Style the search input field */
/* Style the input field in the search bar */
#searchInput {
#searchInput {
     background-color: #222222; /* Dark background for the input field */
     background-color: #222222; /* Dark background for input field */
     color: #AFACA8; /* Text color for input field */
     color: #AFACA8; /* Text color for input field */
}
}
Line 139: Line 77:
}
}


/* Change the background color of the 'what links here' section */
/* General reset for all other elements in the sidebar with old backgrounds */
#mw-whatlinkshere {
#mw-panel * {
     background-color: #111111; /* Background color */
     background-color: #111111 !important; /* Force dark background for all elements in the sidebar */
     color: #AFACA8; /* Text color */
     color: #AFACA8 !important; /* Force light text color for all elements in the sidebar */
}
}


/* Change the appearance of all notification messages */
/* General reset for all other elements with old backgrounds in the pinned tools */
.mw-notice {
.vector-pinned-container * {
    background-color: #222222; /* Dark background for notifications */
     background-color: #111111 !important; /* Force dark background for all elements in pinned tools */
    color: #AFACA8; /* Light text color */
     color: #AFACA8 !important; /* Force light text color for all elements in pinned tools */
}
 
/* 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 */
.vector-pinned-container {
    background-color: #111111; /* Dark background */
    color: #AFACA8; /* Text color */
}
 
/* Change the links within the vector pinned container */
.vector-pinned-container a {
    color: #5C6969; /* Link color for empty links */
}
 
.vector-pinned-container a:visited {
    color: #89C5B7; /* Color for visited links */
}
 
.vector-pinned-container a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}
 
/* General reset for all other elements with white backgrounds */
* {
     background-color: #111111 !important; /* Force dark background for all elements */
     color: #AFACA8 !important; /* Force light text color for all elements */
}
 
/* Specific adjustments to ensure proper visibility */
#mw-head, #mw-head-container, #mw-page-base, #mw-page-after-content {
    background-color: #111111 !important; /* Force dark background */
}
 
/* Adjust vector header and site notice */
.vector-header, .vector-sitenotice-container, .vector-main-menu-container {
    background-color: #111111 !important; /* Force dark background */
}
 
/* Ensure the search area and tools are dark */
#search, #mw-tools {
    background-color: #111111 !important; /* Force dark background */
}
 
/* Ensure consistency in the content area */
#content, .mw-body-content {
    background-color: #111111 !important; /* Force dark background */
}
 
/* Ensure portlet headers are styled */
.portlet-header {
    background-color: #222222 !important; /* Ensure dark background */
    color: #AFACA8 !important; /* Ensure light text */
}
}

Revision as of 15:52, 8 October 2024

/* Change the background color of the main menu sidebar */
#mw-panel {
    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 */
}