MediaWiki:Common.css: Difference between revisions

Revision as of 14:16, 20 December 2024

:root {
    --black: #000000;
    --white: #FFFFFF;
    --maroon: #A52A2A;
    --light-maroon: #FF6464;
    --dark-maroon: #4B0000;
    --footer-bg: #2A2A2A;
}

/* General body styling */
body {
    background-color: var(--black); /* Black background for the entire body */
    color: var(--white); /* White text color for readability */
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
    line-height: 1.6; /* Improved line height for readability */
    margin: 0; /* Remove default margin */
    padding: 20px; /* Add padding */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--maroon); /* Maroon color for headings */
    margin: 1em 0 0.5em; /* Spacing above/below headings */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

/* Paragraphs */
p {
    color: var(--dark-maroon); /* Dark maroon for paragraphs */
    margin: 1em 0; /* Margins around paragraphs */
}

/* Links */
a {
    color: var(--maroon); /* Maroon for links */
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s; /* Animates the color change */
}

a:hover {
    color: var(--light-maroon); /* Lighter maroon on hover */
    text-decoration: underline; /* Underline on hover for emphasis */
}

/* Input boxes and text areas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    background-color: var(--white); /* White for inputs */
    color: var(--dark-maroon); /* Dark maroon text */
    border: 2px solid var(--maroon); /* Maroon border */
    padding: 10px; /* Add padding */
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 16px; /* Comfortable font size for inputs */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

input:focus,
textarea:focus {
    border-color: var(--light-maroon); /* Lighter maroon on focus */
    outline: none; /* Remove default outline */
}

/* Buttons */
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--maroon); /* Maroon background for buttons */
    color: var(--white); /* White text on buttons */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Add padding to buttons */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Consistent font size for buttons */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

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

/* Code blocks */
pre, code {
    background-color: var(--dark-maroon); /* Dark maroon background for code blocks */
    color: var(--white); /* White text in code blocks */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Spacing inside code blocks */
    overflow-x: auto; /* Allow horizontal scrolling for code */
}

/* Footer styling */
#mw-footer {
    background-color: var(--footer-bg); /* Dark background for footer */
    color: var(--dark-maroon); /* Dark maroon for footer text */
    font-size: 14px; /* Font size for footer text */
    padding: 20px; /* Spacing in footer */
    text-align: center; /* Center align footer text */
}

#mw-footer a {
    color: var(--maroon); /* Maroon for footer links */
}

#mw-footer a:hover {
    color: var(--light-maroon); /* Lighter maroon on hover for footer links */
}

/* Custom styles for specific sections */
#custom-section {
    background-color: var(--dark-maroon); /* Darker maroon for custom sections */
    color: var(--white); /* White text colors within the section */
    padding: 20px; /* Add padding for spacing */
    border-radius: 5px; /* Rounded corners */
}

/* Responsive Design */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Reduce padding on smaller screens */
    }

    button, input[type="submit"], input[type="button"] {
        width: 100%; /* Make buttons full width */
        font-size: 14px; /* Slightly smaller font size for buttons */
    }

    h1 {
        font-size: 1.8em; /* Adjust heading sizes for smaller screens */
    }

    h2, h3 {
        font-size: 1.5em; /* Adjust heading sizes for smaller screens */
    }
}