MediaWiki:Minerva.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 1st PAGE HEADING CHANGES */
#firstHeading,
.firstHeading,
.mw-first-heading {
max-width: 90%; /* Adjust width to split the difference */
margin: 0 auto; /* Center-align */
text-align: center; /* Center-align the heading text */
box-sizing: border-box; /* Include padding in width calculations */
}
h1#firstHeading {
font-size: 3em; /* Larger font size for emphasis */
color: #c1c1c1; /* Light grey for consistency */
text-align: left; /* Left-aligned text */
border-bottom: 2px solid #c1c1c1; /* Light grey underline like other headers */
padding-bottom: 10px; /* Space between text and underline */
margin-bottom: 20px; /* Space between the underline and the page body */
padding-top: 30px; /* Space above the header */
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
#firstHeading,
.firstHeading,
.mw-first-heading {
max-width: 100%; /* Full width on mobile */
text-align: left; /* Left-align the heading text */
margin: 0; /* Remove centering */
}
h1#firstHeading {
text-align: left; /* Ensure text is left-aligned */
margin-left: 0; /* Remove any left margin */
}
}
/* TEXT/FONT STYLES OF PAGE DETAILS */
/* General Text Styling */
body, p, span, div {
color: #c1c1c1; /* Light grey for default text */
font-family: Georgia, Times, serif; /* Serif font for default text */
line-height: 1.5;
}
/* Header Styling (H1-H6) */
h1, h2, h3, h4, h5, h6 {
color: #c1c1c1; /* Default light grey for headers */
font-family: Georgia, Times, serif; /* Serif font for headers */
line-height: 1.3;
margin-top: 1em;
margin-bottom: 0.25em; /* Reduced space between header and content */
padding-bottom: 2px; /* Minimal padding for underline */
}
/* Underline for H1 and H2 */
h1, h2 {
border-bottom: 1px solid #c1c1c1; /* Light grey underline */
}
/* Hyperlinks in Headers */
h1 .mw-headline a, h2 .mw-headline a, h3 .mw-headline a {
color: #66D9EF; /* Bright light cyan for unvisited header links (existing page) */
font-family: Georgia, Times, serif; /* Match header font */
}
h1 .mw-headline a:visited, h2 .mw-headline a:visited, h3 .mw-headline a:visited {
color: #499dad; /* Light cyan for visited header links (existing page) */
font-family: Georgia, Times, serif; /* Match header font */
}
h1 .mw-headline a.new, h2 .mw-headline a.new, h3 .mw-headline a.new {
color: #d44; /* Red for headers linking to non-existent pages */
font-family: Georgia, Times, serif; /* Match header font */
}
/* Headers Without Links */
h1 .mw-headline:not(a), h2 .mw-headline:not(a), h3 .mw-headline:not(a) {
color: #c1c1c1; /* Light grey for headers without links */
}
/* Hyperlink Colors (General) */
a, .mw-body a.external, .mw-body a.extiw {
color: #66D9EF; /* Bright light cyan for unvisited links */
text-decoration: none; /* No underline */
font-family: Georgia, Times, serif; /* Ensure consistency */
}
a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited {
color: #499dad; /* Light cyan for visited links */
text-decoration: none;
}
a.new, #p-personal a.new {
color: #d44; /* Red for non-existent links */
text-decoration: none;
}
/* Hyperlink Hover Effect */
a:hover, .mw-body a:hover {
color: #33d4d4; /* Slightly brighter cyan on hover */
text-decoration: underline;
}
/* Horizontal Rule Styling */
hr {
color: #222; /* Darker grey line */
border: none;
border-top: 1px solid #222;
margin: 1em 0;
}
/* Input and Textarea Styling */
input, textarea {
background-color: #4c4c4c; /* Dark grey background */
border-color: #4c4c4c;
color: #c1c1c1; /* Light grey text */
font-family: Georgia, Times, serif; /* Ensure consistent font */
}
/* Navigation Menu Styling */
div#mw-head div.vectorMenu h3 span, div.vectorMenu li a {
color: #66D9EF; /* Bright light cyan for links in the navigation menu */
font-family: Georgia, Times, serif; /* Consistent font */
}
div.vectorMenu li.selected a, div.vectorMenu li.selected a:visited {
color: #499dad; /* Light cyan for visited links */
text-decoration: none;
}
/* General Page Background and Body Content */
html, body {
font-family: Georgia, Times, serif; /* Default body font */
background-color: #2a2a2a; /* Dark grey background */
margin: 0;
padding: 0;
}
.mw-body {
color: #c1c1c1; /* Light grey text */
font-family: Georgia, Times, serif; /* Default body text font */
background-color: #333; /* Darker grey for content background */
}
.mw-body p {
line-height: inherit;
margin: 0.5em 0 1.5em 0; /* Add more spacing below paragraphs */
}
/* Table of Contents and Sidebar Styling */
#toc, div.toc, ul#filetoc, li.gallerybox div.thumb {
background-color: #4c4c4c;
border-color: #666; /* Medium grey for borders */
font-family: Georgia, Times, serif; /* Consistent font */
}
div.thumbinner, .catlinks {
background-color: #4c4c4c;
border-color: #666;
}
code {
border: none;
background-color: inherit;
color: inherit;
font-family: monospace; /* Explicitly set for code blocks */
}
/* PAGE BACKGROUND */
/* Apply background to the html element */
html {
height: 100%; /* Full height of the viewport */
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
overflow-y: hidden; /* Prevent unintended vertical scrolling */
background: url('https://wiki.cosmicsky.net/images/thumb/4/48/BackgroundThree.png/1600px-BackgroundThree.png?20240916194629') no-repeat center center fixed;
background-size: cover;
}
/* Ensure body inherits full height and uses the background */
body {
height: 100%; /* Match the height of the html element */
margin: 0;
padding: 0;
display: flex; /* Allow flex layout for consistent child alignment */
flex-direction: column; /* Stack children vertically */
overflow-x: hidden; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow scrolling within body only */
color: var(--text-color);
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Extend the viewport container */
.mw-mf-viewport {
flex: 1; /* Ensure it grows to fill the remaining space */
display: block; /* Avoid flex container issues */
background: transparent !important; /* Ensure no background overlay */
overflow: visible; /* Avoid additional scroll bars */
}
/* Button Styling */
.mw-ui-button {
background-color: #212121 !important;
border: 2px solid #333333 !important;
outline: none !important;
text-align: center;
cursor: pointer;
}
.mw-ui-button:hover {
border-color: #eceada !important;
}
/* Main page container: fully transparent */
#mw-mf-page-center {
background-color: transparent !important; /* Remove the grey background */
box-shadow: none !important; /* Remove shadows */
border: none !important; /* Remove borders */
padding: 0; /* Ensure no unnecessary padding adds opacity */
flex: 1; /* Allow it to stretch and fill the viewport */
overflow: visible; /* Prevent extra scrolling */
}
/* Content areas: transparent */
.content, .pre-content, .mw-parser-output, .mw-body {
background-color: transparent !important; /* Fully transparent content */
box-shadow: none !important; /* Remove any shadows */
border: none !important; /* Remove borders */
padding: 15px; /* Optional padding for readability */
color: var(--text-color); /* Ensure text remains readable */
z-index: auto; /* Prevent overlapping stacking context */
flex: 1; /* Allow these areas to grow and fill the remaining space */
}
/* Sticky header with custom layout and spacing adjustments */
.header-container.header-chrome {
position: sticky;
top: 0;
background: rgba(10, 10, 10, 0.35) !important; /* Transparent header */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Maintain shadow for visibility */
border-bottom: 1px solid rgba(68, 68, 68, 0.7); /* Subtle bottom border */
z-index: 1000; /* Ensure header stays above all other elements */
height: 120px; /* Header height */
display: flex; /* Use flexbox for layout */
align-items: center; /* Vertically center the items */
justify-content: space-between; /* Distribute space between elements */
padding: 0; /* Remove unnecessary padding */
overflow-x: hidden; /* Prevent header overflow */
}
/* Remove default padding or centering restrictions */
.header-container .branding-box,
.header-container .search-container,
.header-container .menu-icon {
margin: 0 !important; /* Reset all margins */
padding: 0 !important; /* Reset all padding */
flex-shrink: 0; /* Prevent elements from shrinking */
}
/* Adjust the branding box to ensure it properly covers the icon */
.branding-box {
display: flex;
justify-content: center;
align-items: center;
margin: 0 20px; /* Add spacing around the logo */
width: auto; /* Adjust width dynamically */
max-width: 350px; /* Limit maximum width for responsiveness */
height: 100px; /* Adjust the height of the logo */
box-sizing: border-box; /* Ensure the padding is included in the width */
}
/* Enlarge the branding/logo area and prevent it from overflowing */
.branding-box a {
display: block;
width: 100%;
height: 100%;
background: url('https://wiki.cosmicsky.net/images/6/62/CosmicLogo.png?20240913203127') no-repeat center center;
background-size: contain;
text-indent: -9999px;
overflow: hidden;
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
html, body {
overflow-x: hidden; /* Prevent horizontal scrolling */
}
.mw-mf-viewport {
min-height: 100%; /* Ensure the viewport container spans the full height */
overflow: visible; /* Avoid clipping on mobile */
}
.branding-box {
margin: 0; /* Remove extra spacing */
width: auto; /* Allow flexibility on mobile */
max-width: 200px; /* Smaller logo for mobile */
height: 80px; /* Reduce height on mobile */
align-self: flex-start; /* Align branding to the left */
}
.header-container.header-chrome {
height: auto; /* Adjust height dynamically for smaller devices */
flex-direction: column; /* Stack items vertically on mobile */
align-items: flex-start; /* Left-align items */
}
}
/* Adjust the page heading wrapper to match a slightly narrower body width */
.pre-content.heading-holder {
width: 90%; /* Make it slightly less wide */
max-width: none; /* Remove width restriction */
margin: 0 auto; /* Center the wrapper */
padding: 0; /* Remove unnecessary padding */
box-sizing: border-box; /* Include padding in width calculations */
}
/* Optional: Adjust tagline alignment and width */
.page-heading .tagline {
width: 100%; /* Match the heading width */
margin: 0; /* Remove default margins */
text-align: left; /* Keep tagline left-aligned */
font-size: 1rem; /* Adjust font size */
color: #ccc; /* Optional: Subtle text color for tagline */
}
/* Style the main content area to match the narrower width */
#mw-content-text,
#bodyContent {
width: 90%; /* Match the narrower width for larger screens */
max-width: none; /* Remove restrictions on maximum width */
margin: 0 auto; /* Center the content */
padding-top: 5px; /* Add space between the header and content */
box-sizing: border-box; /* Include padding in width calculations */
}
/* Hide the "Page" and "Discussion" buttons */
#p-associated-pages {
display: none !important; /* Remove the entire button container */
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
.pre-content.heading-holder,
#mw-content-text,
#bodyContent {
width: 100%; /* Full width on mobile */
margin: 0; /* Remove centering margin */
padding: 0; /* Remove unnecessary padding */
}
}
/* SEARCH BAR EDITS */
/* Fix background for the entire search results container */
.suggestions-results {
background-color: rgba(30, 30, 30, 0.95) !important; /* Dark background */
border: none !important; /* Remove any borders */
color: white !important; /* Ensure all text is white */
border-radius: 5px; /* Rounded corners */
padding: 5px; /* Add padding */
margin: 0 auto; /* Center the dropdown */
max-width: 900px; /* Match the search bar width */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
}
/* Fix individual suggestion results */
.suggestions-result {
background-color: rgba(42, 42, 42, 0.9); /* Slightly lighter background */
color: white !important; /* Ensure text is white */
padding: 10px; /* Add padding */
border-radius: 4px; /* Rounded corners */
margin-bottom: 5px; /* Space between results */
cursor: pointer; /* Pointer on hover */
border: none !important; /* Remove white border */
}
.suggestions-result:hover {
background-color: rgba(60, 60, 60, 0.9); /* Slightly lighter on hover */
}
/* Fix for the special box in the search results */
.suggestions-special {
background-color: rgba(30, 30, 30, 0.9) !important; /* Dark background */
color: white !important; /* Ensure all text is white */
border-radius: 5px; /* Rounded corners */
padding: 10px;
margin-top: 5px; /* Space above */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
border: none !important; /* Remove any borders */
}
/* Special box text styling */
.suggestions-special .special-label,
.suggestions-special .special-query {
color: white !important; /* Ensure all text inside is white */
}
/* Search bar styling */
input.search {
width: 70%; /* Make the search bar wider */
max-width: 900px; /* Limit the maximum width */
height: 50px; /* Make it taller */
font-size: 18px; /* Larger text size */
padding: 10px 15px; /* Padding inside the search bar */
background-color: rgba(30, 30, 30, 0.9) !important; /* Dark background */
color: white !important; /* White text */
border: 1px solid rgba(68, 68, 68, 0.8); /* Use dark grey border */
border-radius: 5px; /* Rounded corners */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}
input.search:focus {
outline: none !important; /* Remove focus outline */
border-color: rgba(90, 90, 90, 0.9); /* Slightly lighter grey border when focused */
}
input.search::placeholder {
color: rgba(200, 200, 200, 0.7) !important; /* Light grey placeholder text */
}
/* Adjust search button to match the search bar */
.search-container button#searchIcon {
margin-left: 10px; /* Spacing between search bar and button */
height: 50px; /* Match height with search bar */
background-color: rgba(30, 30, 30, 0.9); /* Dark background */
border: 1px solid rgba(68, 68, 68, 0.8); /* Use dark grey border */
color: white; /* White icon color */
padding: 8px 12px; /* Adjust button size */
border-radius: 5px; /* Rounded corners */
cursor: pointer;
}
.search-container button#searchIcon:hover {
background-color: rgba(60, 60, 60, 0.9); /* Slightly lighter on hover */
border-color: rgba(90, 90, 90, 0.9); /* Adjust border on hover */
}
/* Remove space between the title underline and content */
.mw-parser-output {
margin-top: -10px; /* Move content closer to the title underline */
padding-top: 0; /* Ensure no padding at the top of content */
}
/* Completely remove padding for main content */
.content, .pre-content {
padding-top: 0 !important; /* Ensure no padding above the main content */
margin-top: -10px !important; /* Move content closer to the title */
}
/* Optional: Remove any additional global spacing */
body.page-Main_Page .mw-body {
margin-top: 0 !important; /* Eliminate extra margin on the main body */
padding-top: 0 !important; /* Tighten top padding globally */
}
/* TOC Underline Fix */
/* Remove underline from TOC heading */
#mw-toc-heading {
border-bottom: none !important; /* Remove underline */
margin-bottom: 0; /* Adjust spacing if necessary */
}
/* LEFT MENU POP UP STYLING */
/* Menu container */
#mw-mf-page-left {
background-color: #2c2c2c; /* Dark grey background for the entire menu */
color: white; /* White text for all items */
border-right: 1px solid #444; /* Optional border for separation */
}
/* Target all list items */
#mw-mf-page-left ul.toggle-list__list {
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
}
/* Ensure links (buttons) always have dark grey backgrounds */
#mw-mf-page-left .toggle-list-item__anchor {
display: flex; /* Align text and icons horizontally */
align-items: center;
padding: 10px 15px; /* Add padding for better button size */
background-color: #2c2c2c !important; /* Force dark grey background */
color: white; /* White text */
text-decoration: none; /* Remove underlines */
border-bottom: 1px solid #444; /* Optional separators */
font-weight: bold; /* Make text bold */
}
/* Remove any parent white background influence */
#mw-mf-page-left .toggle-list-item {
background-color: #2c2c2c !important; /* Force dark grey for list items */
}
/* Hover effect for links */
#mw-mf-page-left .toggle-list-item__anchor:hover {
background-color: #444; /* Slightly lighter grey */
color: white; /* White text remains */
}
/* Icons within menu */
#mw-mf-page-left .minerva-icon {
margin-right: 10px; /* Add spacing between icon and text */
font-size: 16px; /* Adjust icon size */
color: white; /* Ensure icons are white */
}
/* Text labels in buttons */
#mw-mf-page-left .toggle-list-item__label {
text-decoration: none; /* No underline */
color: white; /* White text for button labels */
}
/* Menu headings */
#mw-mf-page-left h2 {
color: white; /* White text for headings */
padding: 10px 15px; /* Add padding */
margin: 0;
border-bottom: 1px solid #444; /* Subtle heading separator */
}
/* Force styles on any conflicting elements */
#mw-mf-page-left .toggle-list-item,
#mw-mf-page-left .toggle-list-item__anchor,
#mw-mf-page-left ul.toggle-list__list li {
background-color: #2c2c2c !important; /* Force dark grey background for all states */
color: white; /* Ensure white text */
border: none; /* Remove extra borders if present */
}
/* TOC TOC TOC TOC TOC TOC TOC TOC TOC */
/* TOC Container Styling */
#toc {
background-color: rgba(50, 50, 50, 0.95); /* Uniform dark gray background */
border-radius: 8px; /* Rounded corners */
border: 1px solid rgba(68, 68, 68, 0.8); /* Subtle border */
padding: 5px;
margin: 0 0 10px 0; /* Left align with bottom spacing */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Depth */
text-align: left;
position: relative;
}
/* TOC Title Section */
.toctitle {
display: flex;
align-items: center;
justify-content: flex-start; /* Align everything to the left */
font-size: 18px;
font-weight: bold;
color: white;
margin-bottom: 10px;
}
/* Three-line Button Styling */
.toctogglespan {
display: inline-flex; /* Keep inline with the title */
align-items: center; /* Center-align with the title */
margin-right: 10px;
}
/* Styling for the three-line icon */
.toctogglelabel::before {
content: "\2630"; /* Three-line icon */
font-size: 22px; /* Larger size for the button */
cursor: pointer;
color: white;
display: inline-block; /* Ensure proper alignment */
margin-right: 5px; /* Adjust spacing from the text */
padding-left: 14px; /* Adjust left padding to align better */
padding-top: 11px; /* Adjust top padding for vertical alignment */
}
/* Styling for the 'Contents' Heading */
.toctitle h2 {
font-size: 20px;
font-weight: bold;
margin: 0; /* No additional margin to keep aligned */
color: white;
text-align: left;
display: inline; /* Keep inline with the button */
}
/* TOC List Styling */
#toc ul {
list-style: none; /* Remove default bullets */
padding: 0;
margin: 0;
display: grid;
grid-template-rows: repeat(6, auto); /* 6 items per column */
grid-auto-flow: column; /* Flow into columns */
column-gap: 20px; /* Spacing between columns */
row-gap: 2px; /* Much smaller spacing between rows */
}
/* Numbering for List Items */
#toc ul li {
counter-increment: toc-counter; /* Increment counter */
position: relative;
padding-left: 25px; /* Space for numbers */
margin: 0; /* Remove any margin from list items */
}
#toc ul li::before {
content: counter(toc-counter) "."; /* Add the numbering */
position: absolute;
left: 0;
color: #62a0ea; /* Light blue for numbers */
font-weight: bold;
}
/* Links in TOC */
#toc ul li a {
color: white;
text-decoration: none;
font-size: 14px;
padding: 4px 12px; /* Reduced vertical padding */
display: inline-block; /* Ensures padding is respected */
border-radius: 6px; /* Rounded corners for the button effect */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
}
/* Highlight effect for TOC items when hovered (button effect) */
#toc ul li a:hover {
color: white; /* Keep text white on hover */
background-color: #62a0ea; /* Blue background for button effect */
padding-left: 12px; /* Slight left padding to show effect */
transform: scale(1.05); /* Slight zoom effect */
}
/* Nested Lists (H2, H3) */
#toc ul li ul {
padding-left: 20px;
}
#toc ul li ul li {
padding-left: 15px;
font-size: 13px; /* Smaller font for nested items */
}
#toc ul li ul li::before {
content: counters(toc-counter, ".") "."; /* Nested numbering */
font-size: 13px;
}
/* Collapse Functionality */
#toc.collapsed ul {
display: none; /* Hide content when collapsed */
}
/* Responsive Adjustments */
@media (max-width: 768px) {
#toc {
width: 100%; /* Full width on small screens */
}
#toc ul {
grid-template-rows: repeat(auto-fit, minmax(1fr)); /* Single column on smaller screens */
}
}
/* MORE BUTTON DROPDOWN */
/* Style for the toggle list background and text */
#p-tb {
background-color: #333333; /* Dark grey background */
color: white; /* White text */
}
/* Style for the individual items */
#p-tb .toggle-list-item {
background-color: #333333; /* Dark grey background for each item */
color: white; /* White text */
}
/* Style for the anchor tags (links) */
#p-tb .toggle-list-item__anchor {
color: white; /* White text for links */
text-decoration: none; /* Remove underline from links */
display: flex; /* To keep icon and text aligned */
align-items: center; /* Center align the icon and text */
}
/* Hover effect for the links */
#p-tb .toggle-list-item__anchor:hover {
background-color: #555555; /* Slightly lighter grey on hover */
}
/* Style for the icons */
#p-tb .minerva-icon {
margin-right: 8px; /* Space between icon and text */
}
/* Style for the label text */
#p-tb .toggle-list-item__label {
font-size: 14px; /* Optional: adjust font size */
}
/* END TOC EDITS END TOC EDITS END TOC EDITS END TOC EDITS */