MediaWiki:Common.css: Difference between revisions

Revision as of 14:26, 20 December 2024

/* 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 */
    }
}