MediaWiki:Common.css: Difference between revisions

From UO Icebound
Jump to navigation Jump to search
No edit summary
No edit summary
 
(64 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Change the background color of the entire page */
/* General Page Background and Text */
body {
body {
     background-color: #111111; /* Dark background color */
     background-color: #111111; /* Sets the background color for the entire page */
     color: #AFACA8; /* Light font color for all text */
     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;
}
}


/* Change the main page title */
/* Action Containers (Top Bar: Discussion, Edit, View History, etc.) */
.firstHeading {
#p-views, #p-cactions, #p-personal, #ca-edit, #ca-view, #ca-history {
     background-color: #111111; /* Background color (matches the body) */
     background-color: #111111; /* Background of action bar */
     color: #AFACA8; /* Text color */
     color: #AFACA8; /* Text color */
    padding: 10px; /* Optional: Add some padding */
}
}


/* Change the color and background of all headings (H1-H6) */
/* Links in the Action Containers */
h1, h2, h3, h4, h5, h6 {
#p-views a, #p-cactions a, #p-personal a, #ca-edit a, #ca-view a, #ca-history a {
     color: #AFACA8; /* Text color */
     color: #89c5b7;
     background-color: #111111; /* Background color */
}
     padding: 5px; /* Optional: Add some padding */
 
#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 */
}
}


/* Change the color of section headlines */
/* Header (Top of Page) */
.mw-headline {
#mw-head, #p-personal, #p-views, #p-cactions, .vector-menu-tabs li {
     color: #AFACA8; /* Text color */
     background-color: #111111; /* Header and action tabs background */
     background-color: #111111; /* Background color */
     color: #AFACA8; /* Header and action tabs text color */
    padding: 5px; /* Optional: Add some padding */
}
}


/* Change link colors */
/* Tabs in the top action bar */
a {
.vector-menu-tabs a, .vector-menu-tabs a:visited {
     color: #5C6969; /* Link color for empty links */
    background-color: #111111; /* Action tab background */
     color: #AFACA8; /* Action tab text color */
}
}


/* Change the color of visited links */
.vector-menu-tabs a:hover {
a:visited {
     background-color: #333333; /* On hover, for better visibility */
     color: #89C5B7; /* Color for visited links */
    color: #AFACA8;
}
}


/* Change link hover color */
/* Containers */
a:hover {
#content, .mw-body, .vector-content, .mw-content-ltr {
     color: #AFACA8; /* Light color on hover for visibility */
    background-color: #111111; /* Background color for main content area */
     color: #AFACA8; /* Text color for main content area */
}
}


/* Change background color of the content area */
/* Text Input Areas (Editing Page) */
.mw-body {
textarea, input[type="text"], input[type="password"], select {
     background-color: #111111; /* Background color for content */
     background-color: #111111; /* Input field background */
    color: #AFACA8; /* Input field text color */
    border: 1px solid #AFACA8; /* Input field border */
}
}


/* Change sidebar background color and text */
/* Search Box */
#mw-panel, #mw-portlets {
#searchInput {
     background-color: #111111; /* Background color */
     background-color: #111111; /* Search box background */
     color: #AFACA8; /* Text color */
    color: #AFACA8; /* Search box text color */
     border: 1px solid #AFACA8; /* Border color for search box */
}
}


/* Change the Tools section */
/* Footer */
#mw-control-portal, #mw-tools {
#footer {
     background-color: #111111; /* Background color */
     background-color: #111111; /* Footer background */
     color: #AFACA8; /* Text color */
     color: #AFACA8; /* Footer text color */
}
}


/* Change the appearance of the edit interface */
/* Logo Styling (Optional, responsive) */
#wpTextbox1 {
#p-logo a img {
     background-color: #222222; /* Dark background for the editing text area */
     max-width: 100%;
     color: #AFACA8; /* Text color for the editing area */
    height: auto;
     width: auto;
}
}


/* Change the button colors in the edit toolbar */
/* Tables */
#mw-editform .mw-toolbar {
.wikitable {
     background-color: #111111; /* Background color for the toolbar */
     background-color: #111111; /* Table background */
     color: #AFACA8; /* Text color for the toolbar */
    color: #AFACA8; /* Table text */
     border: 1px solid #AFACA8; /* Table border */
}
}


/* Change the color of buttons */
/* Button Styling */
button, input[type="submit"] {
input[type="submit"], input[type="button"], button {
     background-color: #5C6969; /* Background color for buttons */
     background-color: #111111;
     color: #AFACA8; /* Text color for buttons */
    color: #AFACA8;
     border: 1px solid #AFACA8;
}
}


/* Change button hover color */
/* Message Boxes (Optional) */
button:hover, input[type="submit"]:hover {
.mw-message-box {
     background-color: #89C5B7; /* Lighter background color on hover */
     background-color: #111111;
    color: #AFACA8;
}
}


/* Change the background color of the editing summary box */
 
#wpSummary {
 
     background-color: #222222; /* Dark background for the summary box */
/* General Border Color */
    color: #AFACA8; /* Text color for the summary box */
* {
     border-color: #AFACA8 !important; /* Sets border color for all elements */
}
}


/* Change the sidebar portlet heading color */
 
.portlet-header {
/* Message Box Borders (if applicable) */
     background-color: #222222; /* Dark background for portlet headers */
.mw-message-box {
    color: #AFACA8; /* Text color for portlet headers */
     border: 1px solid #AFACA8 !important; /* Message box border */
}
}


/* Change the heading for the sidebar */
/* Tables Border */
#p-personal, #p-namespaces, #p-views {
.wikitable {
     background-color: #111111; /* Background color */
     border: 1px solid #AFACA8 !important; /* Table border */
    color: #AFACA8; /* Text color */
}
}


/* Change the site title and icon area */
/* Input Field Borders */
#siteSub, #mw-head, #mw-logo {
textarea, input[type="text"], input[type="password"], select {
     background-color: #111111; /* Dark background for site title and logo */
    border: 1px solid #AFACA8 !important; /* Input field border */
     color: #AFACA8; /* Light text color */
}
/* 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 */
}
}


/* Change the main page logo */
/* Optional: adjust link colors */
#mw-logo img {
#toc a {
     max-height: 40px; /* Optional: Adjust the height of the logo */
     color: #89c5b7; /* Link color */
}
}


/* Change the vector header background */
#toc a:visited {
.vector-header {
     color: #89c5b7; /* Visited link color */
    background-color: #111111; /* Dark background for the header */
     color: #AFACA8; /* Light text color */
}
}


/* Style the search bar */
/* Increase the font size of all body text */
#search {
body {
     background-color: #222222; /* Dark background for the search bar */
     font-size: 18px; /* Adjust this value as needed */
    color: #AFACA8; /* Text color */
}
}


/* Style the search input field */
/* Increase the font size for specific elements */
#searchInput {
p, li {
     background-color: #222222; /* Dark background for the input field */
     font-size: 18px; /* Adjust this value for paragraphs and list items */
    color: #AFACA8; /* Text color for input field */
}
}


/* Style the search button */
h1 {
#searchButton {
     font-size: 36px; /* 2x */
     background-color: #5C6969; /* Button background color */
    color: #AFACA8; /* Button text color */
}
}


/* Change the hover color for the search button */
h2 {
#searchButton:hover {
     font-size: 30px; /* 1.67x */
     background-color: #89C5B7; /* Button hover background color */
}
}


/* Change the background color of the 'what links here' section */
h3 {
#mw-whatlinkshere {
     font-size: 24px; /* 1.33x */
     background-color: #111111; /* Background color */
    color: #AFACA8; /* Text color */
}
}


/* Change the appearance of all notification messages */
h4 {
.mw-notice {
     font-size: 20px; /* 1.11x */
     background-color: #222222; /* Dark background for notifications */
    color: #AFACA8; /* Light text color */
}
}


/* Change the footer background */
h5 {
#footer {
     font-size: 18px; /* same as base */
     background-color: #111111; /* Dark background for footer */
    color: #AFACA8; /* Light text color */
}
}


/* Style the right tools section */
h6 {
#mw-tb {
     font-size: 16px; /* slightly smaller */
     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 */
.bold-gray
#mw-head {
{
    background-color: #111111; /* Dark background for the header area */
  color: #DAA520;
  font-weight: bold;
}
}


/* Change the sidebar background for the main menu and other links */
<style>
#mw-panel {
ul.custom-bullets {
    background-color: #111111; /* Ensure sidebar background is dark */
  list-style: none;
    color: #AFACA8; /* Ensure sidebar text is light */
  padding-left: 1.2em;
}
}


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


/* Change the page container background */
/* Override all unordered list bullets */
#content {
ul {
    background-color: #111111; /* Dark background for the page container */
  list-style: none;
    color: #AFACA8; /* Light text color */
  padding-left: 1.2em; /* Keeps the visual indent */
}
}


/* Change the vector site notice container */
ul li::before {
.vector-sitenotice-container {
  content: "•";
    background-color: #111111; /* Dark background */
  color: #AFACA8;
    color: #AFACA8; /* Text color */
  font-size: 1em;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
}


/* Change the vector column start background */
/* Sidebar TOC appearance */
.vector-column-start {
#sidebar-toc {
     background-color: #111111; /* Dark background */
     background-color: #111111;
     color: #AFACA8; /* Text color */
     color: #AFACA8;
    padding: 10px;
    margin-top: 1em;
    border: 1px solid #AFACA8;
    border-radius: 5px;
    font-size: 14px;
}
}


/* Change the vector main menu container */
/* Remove bullet points */
.vector-main-menu-container {
#sidebar-toc ul {
     background-color: #111111; /* Dark background */
     list-style: none;
     color: #AFACA8; /* Text color */
     padding-left: 0;
}
}


/* Change all mw-page-container-inner */
/* TOC links */
.mw-page-container-inner {
#sidebar-toc a {
     background-color: #111111; /* Dark background */
     color: #89c5b7;
     color: #AFACA8; /* Text color */
     text-decoration: none;
}
}


/* Change all aspects of the vector header container */
#sidebar-toc a:hover {
.vector-header-container {
     text-decoration: underline;
     background-color: #111111; /* Dark background */
}
     color: #AFACA8; /* Text color */
#sidebar-toc .toctitle {
     display: none;
}
}


/* Change the vector main menu container */
/* Target TOC inside the sidebar specifically */
.vector-main-menu-container {
#sidebar-toc ul,
     background-color: #111111; /* Dark background */
#sidebar-toc li,
     color: #AFACA8; /* Text color */
#sidebar-toc ul li {
     list-style: none !important;
    margin-left: 0 !important;
     padding-left: 0 !important;
}
}


/* Style the links within the vector main menu */
/* Optional: remove any leftover ::before markers */
.vector-main-menu-container a {
#sidebar-toc li::before {
     color: #5C6969; /* Link color for empty links */
     content: none !important;
}
}


.vector-main-menu-container a:visited {
#sidebar-toc {
     color: #89C5B7; /* Color for visited links */
     counter-reset: none !important;
}
}


.vector-main-menu-container a:hover {
#sidebar-toc li::before {
     color: #AFACA8; /* Light color on hover for visibility */
     content: none !important;
}
}

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;
}