|
Tags: Blanking Manual revert |
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| :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 */
| |
| }
| |
| }
| |
