MediaWiki:Common.css: Difference between revisions

Revision as of 12:46, 23 March 2025

/* Dark Mode Global Styles */

/* Apply dark background and light text when dark mode is active */
body.dark-mode {
    background-color: #2f3136; /* Dark grey background */
    color: #e0e0e0; /* Light grey text */
}

/* Dark mode navigation bar */
body.dark-mode #p-navigation {
    background-color: #202225; /* Darker grey background */
    color: #e0e0e0;
}

/* Navigation links in dark mode */
body.dark-mode #p-navigation a {
    color: #e0e0e0; /* Light grey links */
}

body.dark-mode #p-navigation a:hover {
    color: #7289da; /* Blue hover effect for links (Discord-like) */
}

/* Dark mode footer */
body.dark-mode #footer {
    background-color: #202225;
    color: #e0e0e0;
}

/* 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:visited {
    color: #99aab5; /* Lighter color for visited 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 */
}

/* Tables */
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 */
body.dark-mode #p-sidebar {
    background-color: #202225; /* Dark sidebar background */
    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 */
}