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.
/* General page styling adjustments */
/* Hide the sidebar/navigation drawer on the left side of the header */
#mw-mf-page-left {
display: none !important; /* Completely hide the sidebar */
}
/* If you also want to hide the icon that opens the sidebar */
#mw-mf-main-menu-button {
display: none !important; /* Hide the button/icon that toggles the sidebar */
}
/* Remove any borders, padding, or margins above .minerva-header */
.minerva-header {
border-top: none !important; /* Ensure no top border */
margin-top: 0 !important; /* Remove any top margin */
padding-top: 0 !important; /* Remove any top padding */
box-shadow: none !important; /* Remove shadow if it's causing the line */
}
/* Ensure the parent container of .minerva-header doesn't add extra space */
.header-container {
border-top: none !important; /* No top border */
margin-top: 0 !important; /* Remove any top margin */
padding-top: 0 !important; /* Remove any top padding */
box-shadow: none !important; /* Remove any shadow */
}
/* Hide the "last modified" bar */
.last-modified-bar,
.last-modified-bar__text,
.modified-enhancement {
display: none !important; /* Completely hide the elements */
}
/* Remove the white lines associated with the last edited bar */
.last-modified-bar,
.last-modified-bar__text,
.modified-enhancement {
border: none !important; /* Remove borders */
}
/* <pre> */
:root {
/* General colors and background */
--body-main: transparent; /* Fully transparent main background */
--body-light: transparent; /* Fully transparent lighter grey */
--body-mid: transparent; /* Fully transparent medium grey */
--body-dark: transparent; /* Fully transparent dark grey */
--body-border: rgba(68, 68, 68, 0.5); /* Semi-transparent border color */
--body-background-color: transparent; /* Fully transparent body background */
--background-text-color: #ccc; /* Lighter text color */
--link-color: #62a0ea; /* Blue for links */
--redlink-color: #ff4d4d; /* Red for broken links */
--text-color: #e0e0e0; /* Text color */
--subtle-color: #999; /* Subtle elements */
/* Buttons and interactive elements */
--button-background: rgba(51, 51, 51, 0.8);
--button-color: #fff;
--button-border: rgba(85, 85, 85, 0.7);
--button-dark: rgba(42, 42, 42, 0.8);
--button-light: rgba(68, 68, 68, 0.7);
/* Sidebar or menus */
--sidebar: rgba(39, 39, 39, 0.8);
/* Other UI elements */
--search-box: rgba(50, 50, 50, 0.9);
--thumb-bg: transparent; /* Fully transparent thumbnails */
--thumb-caption-bg: transparent;
--sourceeditor-input-background: transparent;
--sourceeditor-background: transparent;
--sourceeditor-border: rgba(68, 68, 68, 0.7);
--codemirror-gutter-background: transparent;
/* Background image */
--body-background-image: url('http://localhost:8080/w/images/4/48/BackgroundThree.png');
}
body {
background-color: transparent; /* Body is fully transparent */
background-image: var(--body-background-image); /* Set background image */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Cover the entire screen */
color: var(--text-color); /* Ensure text remains visible */
margin: 0; /* Remove default body margin */
padding: 0; /* Remove default padding */
width: 100%; /* Allow full width of the viewport */
max-width: none; /* Ensure no restriction on width */
}
/* Sticky header spans site width */
.header-container {
position: sticky; /* Make it stick to the top */
top: 0; /* Stick to the very top */
z-index: 1000; /* Ensure it stays above other elements */
background-color: rgba(30, 30, 30, 0.35); /* 50% transparency */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add shadow for better visibility */
display: flex; /* Flex layout for header elements */
align-items: center; /* Center header items vertically */
justify-content: space-between; /* Distribute space between header elements */
}
/* Buttons and page alignment */
.page-buttons-box {
display: flex;
justify-content: center; /* Center the buttons */
align-items: center;
gap: 10px; /* Space between buttons */
background-color: rgba(42, 42, 42, 0.9); /* Background for the button box */
border: 1px solid rgba(68, 68, 68, 0.7); /* Border around the button box */
border-radius: 8px; /* Rounded corners */
padding: 10px; /* Padding inside the box */
margin-bottom: 15px; /* Space below the button box */
box-sizing: border-box; /* Include padding and borders in width */
}
/* Remove unnecessary left padding from pages */
#mw-page-base, #content, .mw-body {
background-color: transparent !important; /* Fully transparent */
color: var(--background-text-color); /* Text remains readable */
border: none; /* Remove borders around the page */
box-shadow: none; /* Remove any shadows that obscure transparency */
}
/* General page styling adjustments */
body.page-Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-submit h1.firstHeading {
display: none;
}
.mw-page-title-main .mw-namespace {
display: none;
}
.page-header h1.firstHeading {
display: none;
}
/* Main page-specific adjustments */
body.page-Main_Page .mw-body {
padding-left: 1em;
padding-right: 1em;
}
/* WIKITABLE */
/* General Wikitable Styling */
table.wikitable {
width: 100%; /* Ensures table spans the available width */
max-width: none; /* Removes any fixed width constraint */
border-collapse: separate;
border-spacing: 0;
border: 4px solid #2b2b2b;
border-radius: 8px;
overflow: visible; /* Ensures tooltip can extend beyond table */
font-family: "Georgia", serif;
color: #c1c1c1;
background-color: #4c4c4c;
}
table.wikitable th, table.wikitable td {
padding: 12px 16px;
border: 1px solid #666666;
color: #c1c1c1;
font-size: 1.15em;
}
table.wikitable tr:nth-child(even) {
background-color: #333333;
}
table.wikitable tr:nth-child(odd) {
background-color: #4d4d4d;
}
table.wikitable th {
background-color: #595959;
color: #ffffff;
font-weight: bold;
font-size: 1.3em;
font-family: "Georgia", serif;
border: 1px solid #666666;
}
/* Tooltip table styling */
.tooltip-table {
border-collapse: separate;
width: auto;
overflow: visible;
border-radius: 8px;
}
.tooltip-table td {
position: relative;
text-align: center;
vertical-align: middle;
padding: 0;
width: 48px;
height: 48px;
border: 1px solid black;
overflow: visible;
box-sizing: border-box;
}
.tooltip-cell .tooltip-text {
visibility: hidden;
width: 375px;
max-width: none;
padding: 0 !important;
margin: 0;
background: transparent !important;
border: none;
position: absolute;
z-index: 1000;
top: -10px;
left: 100%;
opacity: 0;
transition: opacity 0.3s;
box-sizing: border-box;
white-space: nowrap;
pointer-events: none;
}
.tooltip-cell:hover .tooltip-text {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.tooltip-cell img {
display: inline-block;
margin: 0 auto;
padding: 0;
width: 48px;
height: 48px;
border: none;
background: none;
}
.tooltip-cell .tooltip-text img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none !important;
background: none;
}
/* Style the page action menu container */
.page-actions-menu {
border: 5px solid rgba(255, 255, 255, 0.25); /* Thin, transparent white border */
border-radius: 8px; /* Rounded corners */
padding: 4px; /* Adjust padding to fit buttons inside */
display: flex;
justify-content: space-between;
background-color: #333; /* Dark background for the menu */
position: absolute; /* Position the menu absolutely */
top: 20px; /* Adjust the distance from the top (slightly above the page name) */
right: 10px; /* Move the menu to the right */
z-index: 1000; /* Ensure it's above other elements */
}
/* Remove space from the right and make the border wrap the buttons */
.page-actions-menu__list {
display: flex;
gap: 0; /* No gap between buttons */
margin: 0; /* Remove any default margin */
padding: 0; /* Remove any default padding */
}
/* Style each button in the menu */
.page-actions-menu__list-item {
list-style: none;
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
/* Make the icon and text white */
.page-actions-menu__list-item a,
.page-actions-menu__list-item img {
color: white; /* White text */
filter: brightness(0) invert(1); /* Invert the icon color to white */
}
/* Ensure the "More" button and three dots are white */
.page-actions-menu__list-item#p-more a,
.page-actions-menu__list-item#p-more img {
color: white;
filter: brightness(0) invert(1);
}
/* Optional: Hover effect for better interaction */
.page-actions-menu__list-item:hover {
background-color: #444; /* Slightly lighter background on hover */
cursor: pointer;
}
/* Optional: Adjust the size of the icons */
.page-actions-menu__list-item img {
width: 16px; /* Set a uniform size for the icons */
height: 16px; /* Set a uniform height for the icons */
}
/* Fix the "More" button pop-up's background and text color */
#mw-ui-popups .mw-ui-popup {
background-color: rgba(50, 50, 50, 0.9); /* Darker background */
color: white; /* White text */
border-radius: 8px; /* Rounded corners for the pop-up */
}
/* Hide the Language button from the page action menu */
.language-selector {
display: none !important; /* Hide the Language button */
}
/* Style for the 'No results found' message */
.mw-search-nonefound {
font-size: 18px; /* Adjust font size */
color: #e0e0e0; /* Set text color */
margin-bottom: 15px; /* Add some space below the message */
}
/* Style for the 'Create the page' message */
.mw-search-createlink {
font-size: 18px; /* Adjust font size */
color: #62a0ea; /* Link color */
font-weight: bold; /* Make it stand out */
margin-top: 10px; /* Add some space above */
}
/* Style for the 'Create the page' link */
.mw-search-createlink a.new {
color: #62a0ea; /* Set link color */
text-decoration: none; /* Remove underline */
}
.mw-search-createlink a.new:hover {
text-decoration: underline; /* Add underline on hover */
}
/* Ensure the visual clear divs do not interfere with layout */
.mw-search-visualclear {
clear: both;
display: block;
}
/* HEADER SPACING ADJUSTMENTS */
/* Ensure the header spans narrower */
.header-container {
width: 100%; /* Full width across the page */
max-width: 1440px; /* Reduce width to make it about 10% smaller */
margin: 0 auto; /* Center the header container */
padding: 0 10px; /* Add horizontal padding */
box-sizing: border-box; /* Include padding in width calculations */
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(10, 10, 10, 0.35); /* Even darker shade with 35% transparency */
border-bottom: none !important; /* Remove bottom border */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}
/* Adjust the inner header content width */
.minerva-header {
width: 100%; /* Full width of the container */
max-width: 1440px; /* Match the reduced width of the header container */
margin: 0 auto; /* Center-align the header */
display: flex;
justify-content: space-between; /* Space out the elements */
align-items: center; /* Vertically align all items */
padding: 0; /* Remove unnecessary padding */
position: relative; /* Position for precise element alignment */
}
/* Adjust menu button spacing (move closer to branding box) */
.navigation-drawer {
margin-right: 5px; /* Reduce spacing between menu button and branding */
padding-left: 0; /* Remove left padding */
}
/* Branding box adjustments */
.branding-box {
flex: 0 1 auto; /* Allow resizing without collapsing */
font-size: 1.8em; /* Increase font size for prominence */
padding: 0; /* Remove padding around the branding */
margin-right: 10px; /* Reduce space between branding and search bar */
text-align: left; /* Align branding content to the left */
}
/* Center-align the search bar and make it narrower */
.minerva-search-form {
flex: 2; /* Allow search bar to take space */
display: flex;
justify-content: center; /* Center the search bar within available space */
align-items: center; /* Ensure vertical alignment */
position: absolute; /* Absolute positioning for precise centering */
left: 50%; /* Position relative to the left edge */
transform: translateX(-50%); /* Adjust for true centering */
width: 1440px; /* Match the reduced header width */
}
/* Search bar styling */
input.search {
width: 100%; /* Stretch to fit container */
height: 45px; /* Taller search bar */
border: 1px solid rgba(68, 68, 68, 0.8); /* Dark grey border */
border-radius: 5px; /* Rounded corners */
background-color: rgba(30, 30, 30, 0.9); /* Consistent dark background */
color: white; /* White text */
padding: 0 15px; /* Ensure proper padding inside */
text-align: center; /* Center-align the input text */
}
/* Adjust placeholder text alignment */
input.search::placeholder {
color: rgba(200, 200, 200, 0.7); /* Placeholder in light grey */
text-align: center; /* Ensure placeholder text is centered */
}
/* Adjust search button alignment */
#searchIcon {
height: 45px; /* Match height of the search bar */
margin-left: 10px; /* Add space between search button and search bar */
background-color: rgba(30, 30, 30, 0.9); /* Consistent dark background */
border: 1px solid rgba(68, 68, 68, 0.8); /* Match border with search bar */
border-radius: 5px; /* Rounded corners */
}
/* Adjust user navigation (move far right) */
.minerva-user-navigation {
margin-left: auto; /* Push navigation to the far right */
padding-right: 15px; /* Add spacing from the right edge */
}
/* Add consistent spacing between header items */
.minerva-header > * {
margin: 0 10px; /* Space between header elements */
}
/* Remove any residual line above the header */
.header-container {
border-top: none !important; /* Ensure no top border */
}
/* Add padding and spacing to notifications and user menu items */
.minerva-notifications ul li a,
.minerva-user-menu label {
padding: 5px 10px; /* Add padding for better clickability */
border-radius: 5px; /* Rounded corners */
background-color: rgba(42, 42, 42, 0.9); /* Consistent dark background */
color: white; /* White text */
}
.minerva-user-menu ul li a:hover {
background-color: rgba(60, 60, 60, 0.9); /* Lighter hover background */
}
/* SPECIFIC CHANGES TO PAGE HEADER (H1) */
/* Adjust the width and spacing of the page header */
#firstHeading,
.firstHeading,
.mw-first-heading {
max-width: 90%; /* Reduce the width to 90% of the container */
margin: 0 auto 20px auto; /* Center-align and add spacing below */
text-align: center; /* Center-align the heading text */
box-sizing: border-box; /* Include padding in width calculations */
}
/* Optional: Add padding for better spacing */
#firstHeading span.mw-page-title-main {
padding: 0 15px; /* Add padding inside the page title container */
}
/* PAGE WIDTH and MISC */
/* Target the main content wrapper for Minerva */
#mw-content-text {
width: 90%; /* Allow the content to stretch */
max-width: none; /* Remove any restrictions on maximum width */
margin: 0 auto; /* Center the content */
box-sizing: border-box; /* Include padding and border in width */
}
/* Adjust the Minerva page container */
.content {
width: 100%; /* Expand the width to fill the page */
padding: 0 20px; /* Add padding for spacing */
box-sizing: border-box;
}
/* Adjust the bodyContent container */
#bodyContent {
width: 90%; /* Stretch the content area */
max-width: none; /* Remove default restrictions */
margin: 0 auto; /* Center align */
}
/* Ensure the header bar adjusts for wider content */
.minerva-header {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
/* Ensure the table of contents (TOC) adjusts to the content width */
#toc {
max-width: 90%;
margin: 0 auto;
}
/* Mobile-specific adjustments for Minerva */
@media (max-width: 768px) {
#mw-content-text,
#bodyContent,
.content {
width: 100%; /* Full width on smaller screens */
padding: 0 10px; /* Add smaller padding for mobile */
}
}
/* FOOTER */
/* FOOTER */
/* Style the main footer container */
.post-content.footer-content {
position: relative; /* For pseudo-element positioning */
width: 100vw; /* Full width of the viewport */
max-width: 100%; /* Prevent any unintended clipping */
height: 200px; /* Set height for the footer */
display: flex; /* Use flexbox for layout */
justify-content: space-between; /* Space out child elements */
align-items: flex-start; /* Align items to the top */
padding: 60px 0; /* Increase padding for inner content */
color: white; /* Default text color */
z-index: 1000; /* Ensure it appears above other elements */
margin: 0 auto; /* Center align the footer if necessary */
overflow: hidden; /* Ensure no overflow outside the footer */
}
/* Add the background image as a pseudo-element */
.post-content.footer-content::before {
content: ""; /* Empty content for the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%; /* Cover the full width of the container */
height: 100%; /* Cover the full height of the container */
background-image: url('https://wiki.cosmicsky.net/images/thumb/a/ad/FooterBackground2.png/1200px-FooterBackground2.png?20241208044913'); /* Custom background image */
background-repeat: no-repeat; /* Prevent background tiling */
background-position: center; /* Center the image */
background-size: cover; /* Ensure the image covers the width */
z-index: -1; /* Place the background behind other elements */
}
/* Branding box styles */
.minerva-footer-logo {
position: relative;
width: 300px; /* Adjust branding box width */
height: 150px; /* Adjust branding box height */
margin-left: 120px; /* Left-align the branding box */
margin-bottom: 10px; /* Add bottom padding */
overflow: hidden; /* Ensure no extra content shows */
text-indent: -9999px; /* Hide the "MediaWiki" text */
border: none; /* Remove the line under the branding box */
}
.minerva-footer-logo::before {
content: ""; /* Pseudo-element for the branding logo */
position: absolute;
top: 0;
left: 0;
width: 100%; /* Cover the branding box */
height: 100%;
background: url('https://wiki.cosmicsky.net/images/6/62/CosmicLogo.png?20240913203127') no-repeat center center; /* Branding logo */
background-size: contain; /* Ensure the image scales correctly */
cursor: pointer; /* Indicate interactivity */
}
/* Privacy policy and misc info placement */
#footer-places {
position: absolute; /* Position relative to the footer */
bottom: 20px; /* Adjust bottom padding */
right: 20px; /* Adjust right padding */
text-align: right; /* Align text to the right */
list-style: none; /* Remove list bullets */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
#footer-places li {
display: inline; /* Display list items inline */
margin: 0 5px; /* Add spacing between items */
}
#footer-places a {
color: white; /* Ensure links are white */
text-decoration: none; /* Remove underline */
font-size: 14px; /* Adjust font size */
}
#footer-places a:hover {
text-decoration: underline; /* Add underline on hover */
}
/* Text box for 16 test items */
.post-content.footer-content .footer-items {
position: absolute; /* Absolute positioning for centering */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Offset to ensure true centering */
width: 60%; /* Set a fixed width for the text box */
padding: 20px; /* Inner padding for spacing */
background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for visibility */
border-radius: 10px; /* Rounded corners */
z-index: 2; /* Ensure it appears above the background */
display: grid; /* Grid layout for the items */
grid-template-columns: repeat(4, 1fr); /* 4 columns for the items */
gap: 10px; /* Space between items */
text-align: center; /* Center align items */
}
/* Generate the 16 test items dynamically using ::before */
.post-content.footer-content .footer-items::before {
content: "Test Item 1\nTest Item 2\nTest Item 3\nTest Item 4\nTest Item 5\nTest Item 6\nTest Item 7\nTest Item 8\nTest Item 9\nTest Item 10\nTest Item 11\nTest Item 12\nTest Item 13\nTest Item 14\nTest Item 15\nTest Item 16";
white-space: pre-wrap; /* Allow line breaks for content */
font-size: 14px; /* Adjust font size */
color: white; /* Ensure text is visible */
background: rgba(255, 255, 255, 0.2); /* Add a background for better visibility */
padding: 10px; /* Add inner padding */
border-radius: 5px; /* Rounded corners */
}