MediaWiki:Common.css: Difference between revisions

From Noe's Woes
Jump to: navigation, search
No edit summary
No edit summary
Line 3: Line 3:
/* General Body Styles */
/* General Body Styles */
body {
body {
background-color: #121212; /* Very dark background */
background-color: #1a1a1a; /* Lighter dark background */
color: #e0e0e0; /* Light gray text */
color: #d1d1d1; /* Lighter gray text */
}
}


Line 13: Line 13:


a:visited {
a:visited {
color: #99c2ff; /* Lighter color for visited links */
color: #a1c4ff; /* Lighter color for visited links */
}
}


a:hover {
a:hover {
color: #1e90ff; /* Blue when hovering over links */
color: #4da3ff; /* Lighter blue when hovering over links */
}
}


/* Red Links for Non-Existent Pages */
/* Red Links for Non-Existent Pages */
a.new {
a.new {
color: #ff4d4d; /* Red color for non-existent (red) links */
color: #ff6666; /* Lighter red color for non-existent links */
}
}


a.new:visited {
a.new:visited {
color: #ff4d4d; /* Keep red color for visited non-existent links */
color: #ff6666; /* Keep red color for visited non-existent links */
}
}


a.new:hover {
a.new:hover {
color: #ff3333; /* Darker red for hover effect on non-existent links */
color: #ff3333; /* Slightly darker red for hover effect on non-existent links */
}
}


/* Top Navigation Bar (Header) */
/* Top Navigation Bar (Header) */
#p-personal {
#p-personal {
background-color: #202020; /* Dark background for the personal nav */
background-color: #2a2a2a; /* Slightly lighter dark background for the personal nav */
color: #e0e0e0; /* Light text */
color: #d1d1d1; /* Light text */
}
}


Line 44: Line 44:


#p-personal a:hover {
#p-personal a:hover {
color: #1e90ff; /* Brighter blue hover effect */
color: #4da3ff; /* Lighter blue hover effect */
}
}


/* Navigation Bar (Top Menu) */
/* Navigation Bar (Top Menu) */
#p-navigation {
#p-navigation {
background-color: #2e2e2e; /* Slightly lighter background for navigation bar */
background-color: #353535; /* Lighter dark background for navigation bar */
color: #e0e0e0; /* Light text in the navigation */
color: #d1d1d1; /* Light text in the navigation */
}
}


Line 58: Line 58:


#p-navigation a:hover {
#p-navigation a:hover {
color: #1e90ff; /* Blue hover effect for navigation links */
color: #4da3ff; /* Blue hover effect for navigation links */
}
}


/* Sidebar */
/* Sidebar */
#p-sidebar {
#p-sidebar {
background-color: #202020; /* Same dark background for sidebar */
background-color: #2a2a2a; /* Same lighter dark background for sidebar */
color: #e0e0e0; /* Light text in the sidebar */
color: #d1d1d1; /* Light text in the sidebar */
}
}


/* Footer */
/* Footer */
#footer {
#footer {
background-color: #202020; /* Dark background for footer */
background-color: #2a2a2a; /* Lighter dark background for footer */
color: #e0e0e0; /* Light text in the footer */
color: #d1d1d1; /* Light text in the footer */
}
}


/* Content Section */
/* Content Section */
#content {
#content {
background-color: #181818; /* Dark background for content */
background-color: #222222; /* Lighter dark background for content */
color: #e0e0e0; /* Light text color */
color: #d1d1d1; /* Light text color */
}
}


Line 85: Line 85:


#content a:hover {
#content a:hover {
color: #1e90ff; /* Lighter blue hover effect for links */
color: #4da3ff; /* Lighter blue hover effect for links */
}
}


/* Tables */
/* Tables */
table {
table {
background-color: #202020; /* Dark background for tables */
background-color: #2a2a2a; /* Lighter dark background for tables */
color: #e0e0e0; /* Light text in table rows */
color: #d1d1d1; /* Light text in table rows */
}
}


table th,
table th,
table td {
table td {
border: 1px solid #444; /* Dark border for table cells */
border: 1px solid #666; /* Slightly lighter border for table cells */
padding: 8px;
padding: 8px;
}
}
Line 102: Line 102:
/* Buttons and Inputs */
/* Buttons and Inputs */
button, input[type="button"], input[type="submit"] {
button, input[type="button"], input[type="submit"] {
background-color: #333333; /* Dark button background */
background-color: #444444; /* Slightly lighter button background */
color: #ffffff; /* White text on buttons */
color: #ffffff; /* White text on buttons */
border: 1px solid #444444; /* Dark border */
border: 1px solid #666666; /* Lighter border */
}
}


Line 113: Line 113:
/* Form Inputs */
/* Form Inputs */
input[type="text"], input[type="password"], input[type="email"], textarea {
input[type="text"], input[type="password"], input[type="email"], textarea {
background-color: #333333; /* Dark background for inputs */
background-color: #444444; /* Lighter dark background for inputs */
color: #e0e0e0; /* Light text */
color: #d1d1d1; /* Light text */
border: 1px solid #444444; /* Dark borders around input fields */
border: 1px solid #666666; /* Lighter borders around input fields */
}
}


/* Search Box */
/* Search Box */
#searchInput {
#searchInput {
background-color: #333333; /* Dark search box */
background-color: #444444; /* Lighter dark search box */
color: #e0e0e0; /* Light text */
color: #d1d1d1; /* Light text */
border: 1px solid #444444; /* Dark borders */
border: 1px solid #666666; /* Lighter borders */
}
}


Line 131: Line 131:


#footer a:hover {
#footer a:hover {
color: #1e90ff; /* Hover effect for footer links */
color: #4da3ff; /* Hover effect for footer links */
}
}

Revision as of 12:53, 23 March 2025

/* Dark Mode Global Styles */

/* General Body Styles */
body {
    background-color: #1a1a1a;  /* Lighter dark background */
    color: #d1d1d1;  /* Lighter gray text */
}

/* Links - Brighter Blue */
a {
    color: #66b3ff; /* Brighter blue for links */
}

a:visited {
    color: #a1c4ff; /* Lighter color for visited links */
}

a:hover {
    color: #4da3ff;  /* Lighter blue when hovering over links */
}

/* Red Links for Non-Existent Pages */
a.new {
    color: #ff6666;  /* Lighter red color for non-existent links */
}

a.new:visited {
    color: #ff6666;  /* Keep red color for visited non-existent links */
}

a.new:hover {
    color: #ff3333;  /* Slightly darker red for hover effect on non-existent links */
}

/* Top Navigation Bar (Header) */
#p-personal {
    background-color: #2a2a2a;  /* Slightly lighter dark background for the personal nav */
    color: #d1d1d1;  /* Light text */
}

#p-personal a {
    color: #66b3ff; /* Brighter blue links */
}

#p-personal a:hover {
    color: #4da3ff;  /* Lighter blue hover effect */
}

/* Navigation Bar (Top Menu) */
#p-navigation {
    background-color: #353535;  /* Lighter dark background for navigation bar */
    color: #d1d1d1;  /* Light text in the navigation */
}

#p-navigation a {
    color: #66b3ff; /* Brighter blue links in nav */
}

#p-navigation a:hover {
    color: #4da3ff; /* Blue hover effect for navigation links */
}

/* Sidebar */
#p-sidebar {
    background-color: #2a2a2a;  /* Same lighter dark background for sidebar */
    color: #d1d1d1;  /* Light text in the sidebar */
}

/* Footer */
#footer {
    background-color: #2a2a2a;  /* Lighter dark background for footer */
    color: #d1d1d1;  /* Light text in the footer */
}

/* Content Section */
#content {
    background-color: #222222;  /* Lighter dark background for content */
    color: #d1d1d1;  /* Light text color */
}

/* Article Links */
#content a {
    color: #66b3ff;  /* Brighter blue links in content */
}

#content a:hover {
    color: #4da3ff;  /* Lighter blue hover effect for links */
}

/* Tables */
table {
    background-color: #2a2a2a;  /* Lighter dark background for tables */
    color: #d1d1d1;  /* Light text in table rows */
}

table th,
table td {
    border: 1px solid #666;  /* Slightly lighter border for table cells */
    padding: 8px;
}

/* Buttons and Inputs */
button, input[type="button"], input[type="submit"] {
    background-color: #444444;  /* Slightly lighter button background */
    color: #ffffff;  /* White text on buttons */
    border: 1px solid #666666;  /* Lighter border */
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #555555;  /* Lighter button background on hover */
}

/* Form Inputs */
input[type="text"], input[type="password"], input[type="email"], textarea {
    background-color: #444444;  /* Lighter dark background for inputs */
    color: #d1d1d1;  /* Light text */
    border: 1px solid #666666;  /* Lighter borders around input fields */
}

/* Search Box */
#searchInput {
    background-color: #444444;  /* Lighter dark search box */
    color: #d1d1d1;  /* Light text */
    border: 1px solid #666666;  /* Lighter borders */
}

/* Footer Links */
#footer a {
    color: #66b3ff;  /* Brighter blue for footer links */
}

#footer a:hover {
    color: #4da3ff;  /* Hover effect for footer links */
}