MediaWiki:Common.css

From Noe's Woes
Revision as of 12:51, 23 March 2025 by Noelle Jade (talk | contribs)
Jump to: navigation, search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Dark Mode Global Styles */

/* General Body Styles */
body {
    background-color: #121212;  /* Very dark background */
    color: #e0e0e0;  /* Light gray text */
}

/* Links - Brighter Blue */
a {
    color: #66b3ff; /* Brighter blue for links */
}

a:visited {
    color: #99c2ff; /* Lighter color for visited links */
}

a:hover {
    color: #1e90ff;  /* Blue when hovering over links */
}

/* Red Links for Non-Existent Pages */
a.new {
    color: #ff4d4d;  /* Red color for non-existent (red) links */
}

a.new:visited {
    color: #ff4d4d;  /* Keep red color for visited non-existent links */
}

a.new:hover {
    color: #ff3333;  /* Darker red for hover effect on non-existent links */
}

/* Top Navigation Bar (Header) */
#p-personal {
    background-color: #202020;  /* Dark background for the personal nav */
    color: #e0e0e0;  /* Light text */
}

#p-personal a {
    color: #66b3ff; /* Brighter blue links */
}

#p-personal a:hover {
    color: #1e90ff;  /* Brighter blue hover effect */
}

/* Navigation Bar (Top Menu) */
#p-navigation {
    background-color: #2e2e2e;  /* Slightly lighter background for navigation bar */
    color: #e0e0e0;  /* Light text in the navigation */
}

#p-navigation a {
    color: #66b3ff; /* Brighter blue links in nav */
}

#p-navigation a:hover {
    color: #1e90ff; /* Blue hover effect for navigation links */
}

/* Sidebar */
#p-sidebar {
    background-color: #202020;  /* Same dark background for sidebar */
    color: #e0e0e0;  /* Light text in the sidebar */
}

/* Footer */
#footer {
    background-color: #202020;  /* Dark background for footer */
    color: #e0e0e0;  /* Light text in the footer */
}

/* Content Section */
#content {
    background-color: #181818;  /* Dark background for content */
    color: #e0e0e0;  /* Light text color */
}

/* Article Links */
#content a {
    color: #66b3ff;  /* Brighter blue links in content */
}

#content a:hover {
    color: #1e90ff;  /* Lighter blue hover effect for links */
}

/* Tables */
table {
    background-color: #202020;  /* Dark background for tables */
    color: #e0e0e0;  /* Light text in table rows */
}

table th,
table td {
    border: 1px solid #444;  /* Dark border for table cells */
    padding: 8px;
}

/* Buttons and Inputs */
button, input[type="button"], input[type="submit"] {
    background-color: #333333;  /* Dark button background */
    color: #ffffff;  /* White text on buttons */
    border: 1px solid #444444;  /* Dark border */
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #555555;  /* Lighter button background on hover */
}

/* Form Inputs */
input[type="text"], input[type="password"], input[type="email"], textarea {
    background-color: #333333;  /* Dark background for inputs */
    color: #e0e0e0;  /* Light text */
    border: 1px solid #444444;  /* Dark borders around input fields */
}

/* Search Box */
#searchInput {
    background-color: #333333;  /* Dark search box */
    color: #e0e0e0;  /* Light text */
    border: 1px solid #444444;  /* Dark borders */
}

/* Footer Links */
#footer a {
    color: #66b3ff;  /* Brighter blue for footer links */
}

#footer a:hover {
    color: #1e90ff;  /* Hover effect for footer links */
}