MediaWiki:Common.css: Difference between revisions

Revision as of 13:46, 20 December 2024

/* Common.css - Dark Theme for Star Citizen Skin */

/* General body styling */
body {
    background-color: #121212; /* Slightly darker background for a modern look */
    color: #E0E0E0; /* Light gray for main text for better readability */
    font-family: Arial, sans-serif; /* Modern font */
    line-height: 1.6; /* 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 - WHITE BACKGROUND, BLACK 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: #333333; /* Dark gray text for input for a softer contrast */
    border: 1px solid #C52A2A; /* Dark red border */
    padding: 10px; /* Increased padding for better touch targets */
    border-radius: 8px; /* More rounded corners for a modern look */
    font-size: 16px; /* Improved font-size for readability */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

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; /* Increased padding for buttons */
    border-radius: 5px; /* 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 */
    margin-top: 20px; /* Spacing above headings */
    margin-bottom: 10px; /* Spacing below headings */
}

/* Code blocks */
pre, code {
    background-color: #1E1E1E; /* Darker gray for code */
    color: #F8F8F2; /* Light text in code for better contrast */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Spacing inside code blocks */
    overflow-x: auto; /* Allow horizontal scrolling for code */
}

/* Navigation elements */
#mw-navigation {
    background-color: #FFFFFF; /* Darker background for navigation */
    padding: 10px; /* Padding for navigation */
}

/* Footer styling */
#mw-footer {
    background-color: #282828; /* Darker footer */
    color: #B0B0B0; /* Lighter gray 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 */
}