MediaWiki:Common.css: Difference between revisions

From UO Icebound
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Change the background color of the main menu sidebar */
/* General Page Background and Text */
body {
    background-color: #111111; /* Sets the background color for the entire page */
    color: #AFACA8; /* Sets the default text color */
}
 
/* Links Styling */
a {
    color: #89c5b7; /* Sets link color */
}
 
a:visited {
    color: #89c5b7; /* Sets visited link color */
}
 
/* Headers */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: #AFACA8; /* Header text color */
}
 
/* Sidebar */
#mw-panel {
#mw-panel {
     background-color: #111111; /* Dark background for sidebar */
     background-color: #111111; /* Sidebar background */
     color: #AFACA8; /* Light text color */
     color: #AFACA8; /* Sidebar text */
}
}


/* Change the color of the links in the main menu sidebar */
#mw-panel a {
#mw-panel a {
     color: #5C6969; /* Link color for the main menu */
     color: #89c5b7;
}
}


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


/* Change link hover color in the main menu sidebar */
/* Action Containers (Top Bar: Discussion, Edit, View History, etc.) */
#mw-panel a:hover {
#p-views, #p-cactions, #p-personal, #ca-edit, #ca-view, #ca-history {
     color: #AFACA8; /* Light color on hover for visibility */
    background-color: #111111; /* Background of action bar */
     color: #AFACA8; /* Text color */
}
}


/* Change the background color of portlet headers in the sidebar */
/* Links in the Action Containers */
.portlet-header {
#p-views a, #p-cactions a, #p-personal a, #ca-edit a, #ca-view a, #ca-history a {
    background-color: #222222; /* Dark background for portlet headers */
     color: #89c5b7;
     color: #AFACA8; /* Light text color for portlet headers */
}
}


/* Change the background color and text for the pinned tools navigation */
#p-views a:visited, #p-cactions a:visited, #p-personal a:visited,
.vector-pinned-container {
#ca-edit a:visited, #ca-view a:visited, #ca-history a:visited {
    background-color: #111111; /* Dark background for pinned tools */
     color: #6b7e7e;
     color: #AFACA8; /* Light text color for pinned tools */
    list-style: none; /* Remove bullet points */
}
}


/* Change the color of the links in the pinned tools navigation */
/* Pinned Menus */
.vector-pinned-container a {
.vector-pinnable-header {
     color: #5C6969; /* Link color for pinned tools */
    background-color: #111111; /* Pinned menu background */
     color: #AFACA8; /* Pinned menu text color */
}
}


/* Change the visited link color in the pinned tools navigation */
/* Header (Top of Page) */
.vector-pinned-container a:visited {
#mw-head, #p-personal, #p-views, #p-cactions, .vector-menu-tabs li {
     color: #89C5B7; /* Color for visited links in pinned tools */
    background-color: #111111; /* Header and action tabs background */
     color: #AFACA8; /* Header and action tabs text color */
}
}


/* Change link hover color in the pinned tools navigation */
/* Tabs in the top action bar */
.vector-pinned-container a:hover {
.vector-menu-tabs a, .vector-menu-tabs a:visited {
     color: #AFACA8; /* Light color on hover for visibility */
    background-color: #111111; /* Action tab background */
     color: #AFACA8; /* Action tab text color */
}
}


/* Ensure the text color is consistent for all other elements in the sidebar */
.vector-menu-tabs a:hover {
#mw-panel .mw-portlet-header,
     background-color: #333333; /* On hover, for better visibility */
#mw-panel .mw-portlet-body {
     color: #AFACA8;
     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 */
/* Containers */
#search {
#content, .mw-body, .vector-content, .mw-content-ltr {
     background-color: #222222; /* Dark background for the search bar */
     background-color: #111111; /* Background color for main content area */
     color: #AFACA8; /* Text color for the search bar */
     color: #AFACA8; /* Text color for main content area */
}
}


/* Style the input field in the search bar */
/* Text Input Areas (Editing Page) */
textarea, input[type="text"], input[type="password"], select {
    background-color: #111111; /* Input field background */
    color: #AFACA8; /* Input field text color */
    border: 1px solid #AFACA8; /* Input field border */
}
 
/* Search Box */
#searchInput {
#searchInput {
     background-color: #222222; /* Dark background for input field */
     background-color: #111111; /* Search box background */
     color: #AFACA8; /* Text color for input field */
     color: #AFACA8; /* Search box text color */
    border: 1px solid #AFACA8; /* Border color for search box */
}
}


/* Style the search button */
/* Footer */
#searchButton {
#footer {
     background-color: #5C6969; /* Button background color */
     background-color: #111111; /* Footer background */
     color: #AFACA8; /* Button text color */
     color: #AFACA8; /* Footer text color */
}
}


/* Change the hover color for the search button */
/* Logo Styling (Optional, responsive) */
#searchButton:hover {
#p-logo a img {
     background-color: #89C5B7; /* Button hover background color */
     max-width: 100%;
    height: auto;
    width: auto;
}
}


/* General reset for all other elements in the sidebar with old backgrounds */
/* Tables */
#mw-panel * {
.wikitable {
     background-color: #111111 !important; /* Force dark background for all elements in the sidebar */
     background-color: #111111; /* Table background */
     color: #AFACA8 !important; /* Force light text color for all elements in the sidebar */
     color: #AFACA8; /* Table text */
    border: 1px solid #AFACA8; /* Table border */
}
}


/* General reset for all other elements with old backgrounds in the pinned tools */
/* Button Styling */
.vector-pinned-container * {
input[type="submit"], input[type="button"], button {
     background-color: #111111 !important; /* Force dark background for all elements in pinned tools */
     background-color: #111111;
     color: #AFACA8 !important; /* Force light text color for all elements in pinned tools */
     color: #AFACA8;
    border: 1px solid #AFACA8;
}
}


/* Change the background color of the entire page */
/* Message Boxes (Optional) */
body {
.mw-message-box {
     background-color: #111111; /* Dark background color */
     background-color: #111111;
     color: #AFACA8; /* Light font color for all text */
     color: #AFACA8;
}
}


/* Change the main page title */
 
.firstHeading {
 
     background-color: #111111; /* Background color */
/* General Border Color */
    color: #AFACA8; /* Text color */
* {
    padding: 10px; /* Optional: Add some padding */
     border-color: #AFACA8 !important; /* Sets border color for all elements */
}
}


/* 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 */
/* Message Box Borders (if applicable) */
.mw-headline {
.mw-message-box {
     color: #AFACA8; /* Text color */
     border: 1px solid #AFACA8 !important; /* Message box border */
    background-color: #111111; /* Background color */
    padding: 5px; /* Optional: Add some padding */
}
}


/* Change link colors */
/* Tables Border */
a {
.wikitable {
     color: #5C6969; /* Link color for empty links */
     border: 1px solid #AFACA8 !important; /* Table border */
}
}


/* Change the color of visited links */
/* Input Field Borders */
a:visited {
textarea, input[type="text"], input[type="password"], select {
     color: #89C5B7; /* Change to your desired color */
     border: 1px solid #AFACA8 !important; /* Input field border */
    text-decoration: underline; /* Ensures the underline is visible */
}
}
 
/* Change the background color of the Table of Contents */
/* Change link hover color */
#toc {
a:hover {
    background-color: #111111; /* Dark background color */
     color: #AFACA8; /* Light color on hover for visibility */
     color: #AFACA8; /* Optional: text color */
    padding: 10px; /* Optional: adds some padding */
    border-radius: 5px; /* Optional: rounds the corners */
}
}


/* Change the background color of the content area */
/* Optional: adjust link colors */
.mw-body, .mw-body-content {
#toc a {
     background-color: #111111; /* Background color for content */
     color: #89c5b7; /* Link color */
}
}


/* Change sidebar background color and text */
#toc a:visited {
#mw-panel, #mw-portlets {
     color: #89c5b7; /* Visited link color */
    background-color: #111111; /* Background color */
     color: #AFACA8; /* Text color */
}
}


/* Change the Tools section */
/* Increase the font size of all body text */
#mw-control-portal, #mw-tools {
body {
     background-color: #111111; /* Background color */
     font-size: 18px; /* Adjust this value as needed */
    color: #AFACA8; /* Text color */
}
}


/* Change the appearance of the edit interface */
/* Increase the font size for specific elements */
#wpTextbox1 {
p, li {
     background-color: #222222; /* Dark background for the editing text area */
     font-size: 18px; /* Adjust this value for paragraphs and list items */
    color: #AFACA8; /* Text color for the editing area */
}
}


/* Change the button colors in the edit toolbar */
h1 {
#mw-editform .mw-toolbar {
     font-size: 36px; /* 2x */
     background-color: #111111; /* Background color for the toolbar */
    color: #AFACA8; /* Text color for the toolbar */
}
}


/* Change the color of buttons */
h2 {
button, input[type="submit"] {
     font-size: 30px; /* 1.67x */
     background-color: #5C6969; /* Background color for buttons */
    color: #AFACA8; /* Text color for buttons */
}
}


/* Change button hover color */
h3 {
button:hover, input[type="submit"]:hover {
     font-size: 24px; /* 1.33x */
     background-color: #89C5B7; /* Lighter background color on hover */
}
}


/* Change the background color of the editing summary box */
h4 {
#wpSummary {
     font-size: 20px; /* 1.11x */
     background-color: #222222; /* Dark background for the summary box */
    color: #AFACA8; /* Text color for the summary box */
}
}


/* Change the sidebar portlet heading color */
h5 {
.portlet-header {
     font-size: 18px; /* same as base */
     background-color: #222222; /* Dark background for portlet headers */
    color: #AFACA8; /* Text color for portlet headers */
}
}


/* Change the heading for the sidebar */
h6 {
#p-personal, #p-namespaces, #p-views {
     font-size: 16px; /* slightly smaller */
     background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
}


/* Change the site title and icon area */
.bold-gray
#siteSub, #mw-head, #mw-logo {
{
    background-color: #111111; /* Dark background for site title and logo */
  color: #DAA520;
    color: #AFACA8; /* Light text color */
  font-weight: bold;
}
}


/* Change the main page logo */
<style>
#mw-logo img {
ul.custom-bullets {
    max-height: 40px; /* Optional: Adjust the height of the logo */
  list-style: none;
  padding-left: 1.2em;
}
}


/* Change the vector header background */
ul.custom-bullets li::before {
.vector-header {
  content: "•";
    background-color: #111111; /* Dark background for the header */
  color: #AFACA8;
    color: #AFACA8; /* Light text color */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
}


/* Style the search bar */
/* Override all unordered list bullets */
#search {
ul {
    background-color: #222222; /* Dark background for the search bar */
  list-style: none;
    color: #AFACA8; /* Text color */
  padding-left: 1.2em; /* Keeps the visual indent */
}
}


/* Style the search input field */
ul li::before {
#searchInput {
  content: "•";
    background-color: #222222; /* Dark background for the input field */
  color: #AFACA8;
    color: #AFACA8; /* Text color for input field */
  font-size: 1em;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
}


/* Style the search button */
/* Sidebar TOC appearance */
#searchButton {
#sidebar-toc {
     background-color: #5C6969; /* Button background color */
     background-color: #111111;
     color: #AFACA8; /* Button text color */
    color: #AFACA8;
    padding: 10px;
    margin-top: 1em;
     border: 1px solid #AFACA8;
    border-radius: 5px;
    font-size: 14px;
}
}


/* Change the hover color for the search button */
/* Remove bullet points */
#searchButton:hover {
#sidebar-toc ul {
     background-color: #89C5B7; /* Button hover background color */
    list-style: none;
     padding-left: 0;
}
}


/* Change the background color of the 'what links here' section */
/* TOC links */
#mw-whatlinkshere {
#sidebar-toc a {
     background-color: #111111; /* Background color */
     color: #89c5b7;
     color: #AFACA8; /* Text color */
     text-decoration: none;
}
}


/* Change the appearance of all notification messages */
#sidebar-toc a:hover {
.mw-notice {
     text-decoration: underline;
     background-color: #222222; /* Dark background for notifications */
    color: #AFACA8; /* Light text color */
}
}
 
#sidebar-toc .toctitle {
/* Change the footer background */
     display: none;
#footer {
     background-color: #111111; /* Dark background for footer */
    color: #AFACA8; /* Light text color */
}
}


/* Style the right tools section */
/* Target TOC inside the sidebar specifically */
#mw-tb {
#sidebar-toc ul,
     background-color: #111111; /* Background color for the tools section */
#sidebar-toc li,
     color: #AFACA8; /* Text color for the tools section */
#sidebar-toc ul li {
     list-style: none !important;
    margin-left: 0 !important;
     padding-left: 0 !important;
}
}


/* Change the background color of the MediaWiki logo section */
/* Optional: remove any leftover ::before markers */
#mw-head {
#sidebar-toc li::before {
     background-color: #111111; /* Dark background for the header area */
     content: none !important;
}
}


/* Change the sidebar background for the main menu and other links */
#sidebar-toc {
#mw-panel {
     counter-reset: none !important;
     background-color: #111111; /* Ensure sidebar background is dark */
    color: #AFACA8; /* Light text color */
}
}


/* Remove bullets from all list items in the vector-pinned-container */
#sidebar-toc li::before {
.vector-pinned-container li {
     content: none !important;
     list-style: none; /* Remove bullet points */
}
}

Latest revision as of 22:27, 9 August 2025

/* General Page Background and Text */
body {
    background-color: #111111; /* Sets the background color for the entire page */
    color: #AFACA8; /* Sets the default text color */
}

/* Links Styling */
a {
    color: #89c5b7; /* Sets link color */
}

a:visited {
    color: #89c5b7; /* Sets visited link color */
}

/* Headers */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: #AFACA8; /* Header text color */
}

/* Sidebar */
#mw-panel {
    background-color: #111111; /* Sidebar background */
    color: #AFACA8; /* Sidebar text */
}

#mw-panel a {
    color: #89c5b7;
}

#mw-panel a:visited {
    color: #89c5b7;
}

/* Action Containers (Top Bar: Discussion, Edit, View History, etc.) */
#p-views, #p-cactions, #p-personal, #ca-edit, #ca-view, #ca-history {
    background-color: #111111; /* Background of action bar */
    color: #AFACA8; /* Text color */
}

/* Links in the Action Containers */
#p-views a, #p-cactions a, #p-personal a, #ca-edit a, #ca-view a, #ca-history a {
    color: #89c5b7;
}

#p-views a:visited, #p-cactions a:visited, #p-personal a:visited, 
#ca-edit a:visited, #ca-view a:visited, #ca-history a:visited {
    color: #6b7e7e;
}

/* Pinned Menus */
.vector-pinnable-header {
    background-color: #111111; /* Pinned menu background */
    color: #AFACA8; /* Pinned menu text color */
}

/* Header (Top of Page) */
#mw-head, #p-personal, #p-views, #p-cactions, .vector-menu-tabs li {
    background-color: #111111; /* Header and action tabs background */
    color: #AFACA8; /* Header and action tabs text color */
}

/* Tabs in the top action bar */
.vector-menu-tabs a, .vector-menu-tabs a:visited {
    background-color: #111111; /* Action tab background */
    color: #AFACA8; /* Action tab text color */
}

.vector-menu-tabs a:hover {
    background-color: #333333; /* On hover, for better visibility */
    color: #AFACA8;
}

/* Containers */
#content, .mw-body, .vector-content, .mw-content-ltr {
    background-color: #111111; /* Background color for main content area */
    color: #AFACA8; /* Text color for main content area */
}

/* Text Input Areas (Editing Page) */
textarea, input[type="text"], input[type="password"], select {
    background-color: #111111; /* Input field background */
    color: #AFACA8; /* Input field text color */
    border: 1px solid #AFACA8; /* Input field border */
}

/* Search Box */
#searchInput {
    background-color: #111111; /* Search box background */
    color: #AFACA8; /* Search box text color */
    border: 1px solid #AFACA8; /* Border color for search box */
}

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

/* Logo Styling (Optional, responsive) */
#p-logo a img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Tables */
.wikitable {
    background-color: #111111; /* Table background */
    color: #AFACA8; /* Table text */
    border: 1px solid #AFACA8; /* Table border */
}

/* Button Styling */
input[type="submit"], input[type="button"], button {
    background-color: #111111;
    color: #AFACA8;
    border: 1px solid #AFACA8;
}

/* Message Boxes (Optional) */
.mw-message-box {
    background-color: #111111;
    color: #AFACA8;
}



/* General Border Color */
* {
    border-color: #AFACA8 !important; /* Sets border color for all elements */
}


/* Message Box Borders (if applicable) */
.mw-message-box {
    border: 1px solid #AFACA8 !important; /* Message box border */
}

/* Tables Border */
.wikitable {
    border: 1px solid #AFACA8 !important; /* Table border */
}

/* Input Field Borders */
textarea, input[type="text"], input[type="password"], select {
    border: 1px solid #AFACA8 !important; /* Input field border */
}
/* Change the background color of the Table of Contents */
#toc {
    background-color: #111111; /* Dark background color */
    color: #AFACA8; /* Optional: text color */
    padding: 10px; /* Optional: adds some padding */
    border-radius: 5px; /* Optional: rounds the corners */
}

/* Optional: adjust link colors */
#toc a {
    color: #89c5b7; /* Link color */
}

#toc a:visited {
    color: #89c5b7; /* Visited link color */
}

/* Increase the font size of all body text */
body {
    font-size: 18px; /* Adjust this value as needed */
}

/* Increase the font size for specific elements */
p, li {
    font-size: 18px; /* Adjust this value for paragraphs and list items */
}

h1 {
    font-size: 36px; /* 2x */
}

h2 {
    font-size: 30px; /* 1.67x */
}

h3 {
    font-size: 24px; /* 1.33x */
}

h4 {
    font-size: 20px; /* 1.11x */
}

h5 {
    font-size: 18px; /* same as base */
}

h6 {
    font-size: 16px; /* slightly smaller */
}

.bold-gray
{
  color: #DAA520;
  font-weight: bold;
}

<style>
ul.custom-bullets {
  list-style: none;
  padding-left: 1.2em;
}

ul.custom-bullets li::before {
  content: "•";
  color: #AFACA8;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Override all unordered list bullets */
ul {
  list-style: none;
  padding-left: 1.2em; /* Keeps the visual indent */
}

ul li::before {
  content: "•";
  color: #AFACA8;
  font-size: 1em;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Sidebar TOC appearance */
#sidebar-toc {
    background-color: #111111;
    color: #AFACA8;
    padding: 10px;
    margin-top: 1em;
    border: 1px solid #AFACA8;
    border-radius: 5px;
    font-size: 14px;
}

/* Remove bullet points */
#sidebar-toc ul {
    list-style: none;
    padding-left: 0;
}

/* TOC links */
#sidebar-toc a {
    color: #89c5b7;
    text-decoration: none;
}

#sidebar-toc a:hover {
    text-decoration: underline;
}
#sidebar-toc .toctitle {
    display: none;
}

/* Target TOC inside the sidebar specifically */
#sidebar-toc ul,
#sidebar-toc li,
#sidebar-toc ul li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Optional: remove any leftover ::before markers */
#sidebar-toc li::before {
    content: none !important;
}

#sidebar-toc {
    counter-reset: none !important;
}

#sidebar-toc li::before {
    content: none !important;
}