MediaWiki:Common.css: Difference between revisions
From Noe's Woes
Noelle Jade (talk | contribs) No edit summary |
Noelle Jade (talk | contribs) No edit summary |
||
| Line 3: | Line 3: | ||
/* General Body Styles */ |
/* General Body Styles */ |
||
body { |
body { |
||
background-color: # |
background-color: #1a1a1a; /* Lighter dark background */ |
||
color: # |
color: #d1d1d1; /* Lighter gray text */ |
||
} |
} |
||
| Line 13: | Line 13: | ||
a:visited { |
a:visited { |
||
color: # |
color: #a1c4ff; /* Lighter color for visited links */ |
||
} |
} |
||
a:hover { |
a:hover { |
||
color: # |
color: #4da3ff; /* Lighter blue when hovering over links */ |
||
} |
} |
||
/* Red Links for Non-Existent Pages */ |
/* Red Links for Non-Existent Pages */ |
||
a.new { |
a.new { |
||
color: # |
color: #ff6666; /* Lighter red color for non-existent links */ |
||
} |
} |
||
a.new:visited { |
a.new:visited { |
||
color: # |
color: #ff6666; /* Keep red color for visited non-existent links */ |
||
} |
} |
||
a.new:hover { |
a.new:hover { |
||
color: #ff3333; /* |
color: #ff3333; /* Slightly darker red for hover effect on non-existent links */ |
||
} |
} |
||
/* Top Navigation Bar (Header) */ |
/* Top Navigation Bar (Header) */ |
||
#p-personal { |
#p-personal { |
||
background-color: # |
background-color: #2a2a2a; /* Slightly lighter dark background for the personal nav */ |
||
color: # |
color: #d1d1d1; /* Light text */ |
||
} |
} |
||
| Line 44: | Line 44: | ||
#p-personal a:hover { |
#p-personal a:hover { |
||
color: # |
color: #4da3ff; /* Lighter blue hover effect */ |
||
} |
} |
||
/* Navigation Bar (Top Menu) */ |
/* Navigation Bar (Top Menu) */ |
||
#p-navigation { |
#p-navigation { |
||
background-color: # |
background-color: #353535; /* Lighter dark background for navigation bar */ |
||
color: # |
color: #d1d1d1; /* Light text in the navigation */ |
||
} |
} |
||
| Line 58: | Line 58: | ||
#p-navigation a:hover { |
#p-navigation a:hover { |
||
color: # |
color: #4da3ff; /* Blue hover effect for navigation links */ |
||
} |
} |
||
/* Sidebar */ |
/* Sidebar */ |
||
#p-sidebar { |
#p-sidebar { |
||
background-color: # |
background-color: #2a2a2a; /* Same lighter dark background for sidebar */ |
||
color: # |
color: #d1d1d1; /* Light text in the sidebar */ |
||
} |
} |
||
/* Footer */ |
/* Footer */ |
||
#footer { |
#footer { |
||
background-color: # |
background-color: #2a2a2a; /* Lighter dark background for footer */ |
||
color: # |
color: #d1d1d1; /* Light text in the footer */ |
||
} |
} |
||
/* Content Section */ |
/* Content Section */ |
||
#content { |
#content { |
||
background-color: # |
background-color: #222222; /* Lighter dark background for content */ |
||
color: # |
color: #d1d1d1; /* Light text color */ |
||
} |
} |
||
| Line 85: | Line 85: | ||
#content a:hover { |
#content a:hover { |
||
color: # |
color: #4da3ff; /* Lighter blue hover effect for links */ |
||
} |
} |
||
/* Tables */ |
/* Tables */ |
||
table { |
table { |
||
background-color: # |
background-color: #2a2a2a; /* Lighter dark background for tables */ |
||
color: # |
color: #d1d1d1; /* Light text in table rows */ |
||
} |
} |
||
table th, |
table th, |
||
table td { |
table td { |
||
border: 1px solid # |
border: 1px solid #666; /* Slightly lighter border for table cells */ |
||
padding: 8px; |
padding: 8px; |
||
} |
} |
||
| Line 102: | Line 102: | ||
/* Buttons and Inputs */ |
/* Buttons and Inputs */ |
||
button, input[type="button"], input[type="submit"] { |
button, input[type="button"], input[type="submit"] { |
||
background-color: # |
background-color: #444444; /* Slightly lighter button background */ |
||
color: #ffffff; /* White text on buttons */ |
color: #ffffff; /* White text on buttons */ |
||
border: 1px solid # |
border: 1px solid #666666; /* Lighter border */ |
||
} |
} |
||
| Line 113: | Line 113: | ||
/* Form Inputs */ |
/* Form Inputs */ |
||
input[type="text"], input[type="password"], input[type="email"], textarea { |
input[type="text"], input[type="password"], input[type="email"], textarea { |
||
background-color: # |
background-color: #444444; /* Lighter dark background for inputs */ |
||
color: # |
color: #d1d1d1; /* Light text */ |
||
border: 1px solid # |
border: 1px solid #666666; /* Lighter borders around input fields */ |
||
} |
} |
||
/* Search Box */ |
/* Search Box */ |
||
#searchInput { |
#searchInput { |
||
background-color: # |
background-color: #444444; /* Lighter dark search box */ |
||
color: # |
color: #d1d1d1; /* Light text */ |
||
border: 1px solid # |
border: 1px solid #666666; /* Lighter borders */ |
||
} |
} |
||
| Line 131: | Line 131: | ||
#footer a:hover { |
#footer a:hover { |
||
color: # |
color: #4da3ff; /* Hover effect for footer links */ |
||
} |
} |
||
Revision as of 12:53, 23 March 2025
/* Dark Mode Global Styles */
/* General Body Styles */
body {
background-color: #1a1a1a; /* Lighter dark background */
color: #d1d1d1; /* Lighter gray text */
}
/* Links - Brighter Blue */
a {
color: #66b3ff; /* Brighter blue for links */
}
a:visited {
color: #a1c4ff; /* Lighter color for visited links */
}
a:hover {
color: #4da3ff; /* Lighter blue when hovering over links */
}
/* Red Links for Non-Existent Pages */
a.new {
color: #ff6666; /* Lighter red color for non-existent links */
}
a.new:visited {
color: #ff6666; /* Keep red color for visited non-existent links */
}
a.new:hover {
color: #ff3333; /* Slightly darker red for hover effect on non-existent links */
}
/* Top Navigation Bar (Header) */
#p-personal {
background-color: #2a2a2a; /* Slightly lighter dark background for the personal nav */
color: #d1d1d1; /* Light text */
}
#p-personal a {
color: #66b3ff; /* Brighter blue links */
}
#p-personal a:hover {
color: #4da3ff; /* Lighter blue hover effect */
}
/* Navigation Bar (Top Menu) */
#p-navigation {
background-color: #353535; /* Lighter dark background for navigation bar */
color: #d1d1d1; /* Light text in the navigation */
}
#p-navigation a {
color: #66b3ff; /* Brighter blue links in nav */
}
#p-navigation a:hover {
color: #4da3ff; /* Blue hover effect for navigation links */
}
/* Sidebar */
#p-sidebar {
background-color: #2a2a2a; /* Same lighter dark background for sidebar */
color: #d1d1d1; /* Light text in the sidebar */
}
/* Footer */
#footer {
background-color: #2a2a2a; /* Lighter dark background for footer */
color: #d1d1d1; /* Light text in the footer */
}
/* Content Section */
#content {
background-color: #222222; /* Lighter dark background for content */
color: #d1d1d1; /* Light text color */
}
/* Article Links */
#content a {
color: #66b3ff; /* Brighter blue links in content */
}
#content a:hover {
color: #4da3ff; /* Lighter blue hover effect for links */
}
/* Tables */
table {
background-color: #2a2a2a; /* Lighter dark background for tables */
color: #d1d1d1; /* Light text in table rows */
}
table th,
table td {
border: 1px solid #666; /* Slightly lighter border for table cells */
padding: 8px;
}
/* Buttons and Inputs */
button, input[type="button"], input[type="submit"] {
background-color: #444444; /* Slightly lighter button background */
color: #ffffff; /* White text on buttons */
border: 1px solid #666666; /* Lighter 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: #444444; /* Lighter dark background for inputs */
color: #d1d1d1; /* Light text */
border: 1px solid #666666; /* Lighter borders around input fields */
}
/* Search Box */
#searchInput {
background-color: #444444; /* Lighter dark search box */
color: #d1d1d1; /* Light text */
border: 1px solid #666666; /* Lighter borders */
}
/* Footer Links */
#footer a {
color: #66b3ff; /* Brighter blue for footer links */
}
#footer a:hover {
color: #4da3ff; /* Hover effect for footer links */
}