MediaWiki:Common.css: Difference between revisions

Revision as of 13:55, 20 December 2024

/* Dark Mode Styling for MediaWiki Skin */

/* General body styling */
body {
    background-color: #000000; /* Black background for the entire body */
    color: #FFFFFF; /* White text for better readability */
    font-family: Arial, sans-serif; /* Use a modern sans-serif font for clarity */
    line-height: 1.5; /* Improved line height for readability */
}

/* Links */
a {
    color: #C52A2A; /* Dark red for links */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

a:hover {
    color: #FF6464; /* Lighter red on hover */
}

/* Input boxes and text areas with large white text */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    background-color: #FFFFFF; /* White background for input */
    color: #000000; /* Black text in input for readability */
    border: 2px solid #C52A2A; /* Dark red border */
    padding: 10px; /* Add padding */
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 18px; /* Large font size for text */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

/* Change border color on focus */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: #FF6464; /* Lighter red when focused */
    outline: none; /* Remove default outline */
}

/* Style for buttons */
button,
input[type="submit"],
input[type="button"] {
    background-color: #C52A2A; /* Dark red background for buttons */
    color: #FFFFFF; /* White text on buttons */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Add padding */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Consistent font size for buttons */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #FF6464; /* Lighter red on hover */
    transform: translateY(-2px); /* Subtle lift effect on hover */
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    color: #C52A2A; /* Dark red for headings */
}

/* Code blocks */
pre, code {
    background-color: #222222; /* Dark gray for code blocks */
    color: #FFFFFF; /* White text in code */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Spacing inside code blocks */
    overflow-x: auto; /* Allow horizontal scrolling for code */
}

/* Navigation elements */
#mw-navigation {
    background-color: #1A1A1A; /* Darker background for navigation */
    padding: 10px; /* Padding for navigation */
    border-bottom: 1px solid #C52A2A; /* Dark red bottom border */
}

/* Footer styling */
#mw-footer {
    background-color: #1A1A1A; /* Dark footer */
    color: #FFFFFF; /* White text for footer */
    font-size: 14px; /* Font size for footer text */
    padding: 20px; /* Spacing in footer */
    text-align: center; /* Center align footer text */
}

/* Footer links */
#mw-footer a {
    color: #C52A2A; /* Dark red for footer links */
}

#mw-footer a:hover {
    color: #FF6464; /* Lighter red on hover for footer links */
}

/* Parser Profiling Data Styling */
#mw-parser-profile, .parser-profiling { /* Use the correct ID or class for the section */
    color: #FFFFFF; /* White text color for the section title */
    background-color: #1A1A1A; /* Optional: Dark background for better contrast */
}

/* Specific styles for Parser Profiling Data Values */
#mw-parser-profile span, #mw-parser-profile div { /* Targeting additional spans and divs within parser profiling */
    color: #FFFFFF; /* White color for text and values like CPU usage time, etc. */
}

/* Styling for the coding input area specifically */
input#parser-input-area { /* Use the selector for your specific input area */
    background-color: #FFFFFF; /* White background for the input area */
    color: #000000; /* Black text in the input area */
}