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 1: | Line 1: | ||
/* Dark Mode Global Styles */ |
/* Dark Mode Global Styles */ |
||
/* General Body Styles */ |
|||
/* Apply dark background and light text when dark mode is active */ |
|||
body |
body { |
||
background-color: # |
background-color: #121212; /* Very dark background */ |
||
color: #e0e0e0; /* Light |
color: #e0e0e0; /* Light gray text */ |
||
} |
} |
||
| ⚫ | |||
/* Dark mode navigation bar */ |
|||
a { |
|||
| ⚫ | |||
color: #1e90ff; /* Bright blue for links */ |
|||
color: #e0e0e0; |
|||
} |
} |
||
| ⚫ | |||
/* Navigation links in dark mode */ |
|||
| ⚫ | |||
body.dark-mode #p-navigation a { |
|||
color: #e0e0e0; /* Light grey links */ |
|||
} |
} |
||
a:hover { |
|||
color: # |
color: #4fa3f7; /* Lighter blue when hovering over links */ |
||
} |
} |
||
/* |
/* Navigation Bar (Top Menu) */ |
||
| ⚫ | |||
body.dark-mode #footer { |
|||
background-color: # |
background-color: #1f1f1f; /* Dark background for the navigation bar */ |
||
color: #e0e0e0; |
color: #e0e0e0; /* Light text in the navigation */ |
||
} |
|||
/* Main content area */ |
|||
body.dark-mode #content { |
|||
background-color: #2f3136; /* Dark background */ |
|||
color: #e0e0e0; /* Light text */ |
|||
} |
|||
/* Links in the main content */ |
|||
body.dark-mode a { |
|||
color: #7289da; /* Blue color for links */ |
|||
} |
|||
| ⚫ | |||
| ⚫ | |||
} |
|||
body.dark-mode a:hover { |
|||
color: #99aab5; /* Hover effect for links */ |
|||
} |
|||
/* Buttons and input elements */ |
|||
body.dark-mode button, |
|||
body.dark-mode input[type="button"], |
|||
body.dark-mode input[type="submit"] { |
|||
background-color: #4e5156; /* Dark button background */ |
|||
color: #ffffff; /* White text */ |
|||
border: none; |
|||
} |
|||
body.dark-mode button:hover, |
|||
body.dark-mode input[type="button"]:hover, |
|||
body.dark-mode input[type="submit"]:hover { |
|||
background-color: #7289da; /* Blue hover effect for buttons */ |
|||
} |
|||
/* Textareas and form inputs */ |
|||
body.dark-mode input[type="text"], |
|||
body.dark-mode input[type="password"], |
|||
body.dark-mode input[type="email"], |
|||
body.dark-mode textarea { |
|||
background-color: #3a3f44; /* Dark background for inputs */ |
|||
color: #e0e0e0; /* Light text color */ |
|||
border: 1px solid #4e5156; /* Dark borders */ |
|||
} |
|||
| ⚫ | |||
body.dark-mode table { |
|||
background-color: #2f3136; /* Dark background for tables */ |
|||
color: #e0e0e0; /* Light text for table content */ |
|||
} |
|||
body.dark-mode th, |
|||
body.dark-mode td { |
|||
padding: 8px; |
|||
border: 1px solid #4e5156; /* Dark borders for table cells */ |
|||
} |
} |
||
/* Sidebar */ |
/* Sidebar */ |
||
#p-sidebar { |
|||
background-color: # |
background-color: #1f1f1f; /* Same dark* |
||
color: #e0e0e0; /* Light text in sidebar */ |
|||
} |
|||
/* Search box */ |
|||
body.dark-mode #searchInput { |
|||
background-color: #3a3f44; /* Dark background for search input */ |
|||
color: #e0e0e0; /* Light text */ |
|||
border: 1px solid #4e5156; /* Dark borders */ |
|||
} |
|||
/* Footer links */ |
|||
body.dark-mode #footer a { |
|||
color: #7289da; /* Blue color for footer links */ |
|||
} |
|||
body.dark-mode #footer a:hover { |
|||
color: #99aab5; /* Hover effect for footer links */ |
|||
} |
|||
Revision as of 12:48, 23 March 2025
/* Dark Mode Global Styles */
/* General Body Styles */
body {
background-color: #121212; /* Very dark background */
color: #e0e0e0; /* Light gray text */
}
/* Links */
a {
color: #1e90ff; /* Bright blue for links */
}
a:visited {
color: #636363; /* Slightly dimmer color for visited links */
}
a:hover {
color: #4fa3f7; /* Lighter blue when hovering over links */
}
/* Navigation Bar (Top Menu) */
#p-navigation {
background-color: #1f1f1f; /* Dark background for the navigation bar */
color: #e0e0e0; /* Light text in the navigation */
}
/* Sidebar */
#p-sidebar {
background-color: #1f1f1f; /* Same dark*
