MediaWiki:Minerva.css: Difference between revisions

Revision as of 04:48, 8 December 2024

/* <pre> */

/* Ensure the body background image is fully visible */

.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;
}

body {
    background: url('https://wiki.cosmicsky.net/images/thumb/4/48/BackgroundThree.png/1600px-BackgroundThree.png?20240916194629') no-repeat center center fixed, var(--body-background-color);
    background-size: cover;
    color: var(--text-color);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* 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 */
}

/* Content areas: transparent */
.content, .pre-content, .mw-parser-output {
    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 */
}

/* Sticky header with custom layout and spacing adjustments */
.header-container.header-chrome {
    position: sticky;
    top: 0;
    background: rgba(10, 10, 10, 0.35) !important; /* Even darker color with 35% transparency */
    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; /* Increased 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 */
}

/* 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 */
}

/* Menu icon adjustments */
.menu-icon {
    font-size: 48px; /* Make the icon larger */
    margin-right: 15px; /* Space between the icon and the branding box */
    align-self: center; /* Center the icon vertically */
    z-index: 10; /* Ensure the icon stays on top if needed */
    position: relative; /* Adjust the position if required */
}

/* Branding box: Ensure it properly covers the logo and is clickable */
.branding-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure it spans the full width of the header */
    height: 100%; /* Ensure the height is flexible to accommodate the logo */
    max-width: 350px; /* Max width for responsiveness */
    padding: 0 10px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in width/height calculations */
    position: relative;
    overflow: hidden; /* Prevent any content from overflowing */
}

/* Branding link inside the box: Ensures it fully covers the box */
.branding-box a {
    display: block;
    width: 100%; /* Fill the entire width of the branding box */
    height: 100%; /* Fill the entire height of the branding box */
    background: url('https://wiki.cosmicsky.net/images/6/62/CosmicLogo.png?20240913203127') no-repeat center center;
    background-size: contain; /* Ensure the logo scales properly */
    text-indent: -9999px; /* Hide text inside the anchor */
    overflow: hidden; /* Prevent anything from overflowing */
}


}
/* More Button and Icon */
#page-actions-overflow-toggle span.minerva-icon--ellipsis {
    filter: brightness(0) invert(1) !important; /* Ensure the three dots are white */
}

#page-actions-overflow-toggle span {
    color: white !important; /* Ensure the "More" button text is white */
}

/* Dropdown List Items Background and Text */
.toggle-list__list {
    background-color: rgba(50, 50, 50, 0.9) !important; /* Dark background for the list */
    color: white !important; /* White text for the dropdown items */
}

/* Individual List Items */
.toggle-list-item__anchor {
    color: white !important; /* Ensure text is white */
    background-color: transparent !important; /* Transparent background for the anchor items */
}

.toggle-list-item__anchor:hover {
    background-color: rgba(70, 70, 70, 0.8) !important; /* Lighter background when hovered */
}

/* Icon color inside the list items */
.toggle-list-item__anchor span.minerva-icon {
    filter: brightness(0) invert(1) !important; /* Ensure icons are white */
}

/* Popup Menu Styling */
.mw-ui-popup {
    background-color: rgba(50, 50, 50, 0.9) !important; /* Dark background for the pop-up */
    color: white !important; /* White text for pop-up */
    border-radius: 8px !important; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important; /* Subtle shadow */
}

/* Fix for the heading and body of the pop-up */
.mw-ui-popup .mw-ui-popup-heading,
.mw-ui-popup .mw-ui-popup-body {
    color: white !important; /* White text */
    background-color: rgba(50, 50, 50, 0.9) !important; /* Dark background */
}

/* Ensure pop-up menu items are styled with proper background */
.mw-ui-popup .mw-ui-popup-body .mw-ui-menu li {
    color: white !important; /* White text */
    background-color: rgba(50, 50, 50, 0.9) !important; /* Dark background */
}

/* Ensure items in the pop-up list change color on hover */
.mw-ui-popup .mw-ui-popup-body .mw-ui-menu li:hover {
    background-color: rgba(70, 70, 70, 0.8) !important; /* Lighter background on hover */
    cursor: pointer; /* Make the cursor change to indicate interactivity */
}
/* Make the header span the full width of the page */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px; /* Adjust spacing */
    height: 120px; /* Header height */
    box-sizing: border-box; /* Ensure padding is included in height calculations */
}


/* Enlarge the logo */
.branding-box img {
    width: 300px; /* Set a larger width for the logo */
    height: auto; /* Maintain aspect ratio */
}


/* Adjust layout of the header to space out items */
.minerva-header {
    display: flex;
    justify-content: space-between; /* Space out header items */
    align-items: center; /* Vertically center items */
    width: 100%; /* Make sure header spans full width */
}


/* Style the navigation menu items */
.toggle-list-item__anchor {
    font-size: 18px; /* Larger font for menu items */
    padding: 12px 20px; /* Add padding for bigger clickable area */
}

/* Style the user menu items */
.minerva-user-menu li a {
    font-size: 18px; /* Larger font for user menu items */
    padding: 12px; /* Add padding for bigger clickable area */
}

/* Adjust user menu and notifications section */
.minerva-user-navigation {
    padding-right: 20px; /* Add spacing to the right */
}

/* Remove the default margin for the header */
.minerva-header .minerva-user-navigation,
.minerva-header .search-container {
    margin: 0; /* Ensure no extra margin is applied */
}

/* Center the main menu and user navigation */
.minerva-header .minerva-user-navigation {
    margin-left: auto; /* Push to the right side */
}

/* Make the header more spacious and increase the font size of the menu */
.navigation-drawer {
    font-size: 18px; /* Larger text for menu items */
    padding: 15px 20px; /* Add more padding to menu items */
}
.searchresults .mw-search-createlink{
    display: block;
}


/* 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: 15px;
    margin: 0 0 20px 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;
}

.toctogglelabel::before {
    content: "\2630"; /* Three-line icon */
    font-size: 22px; /* Larger size for the button */
    cursor: pointer;
    color: white;
}

/* 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: 10px; /* Spacing between rows */
}

/* Numbering for List Items */
#toc ul li {
    counter-increment: toc-counter; /* Increment counter */
    position: relative;
    padding-left: 25px; /* Space for numbers */
}

#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;
}

#toc ul li a:hover {
    color: #62a0ea; /* Highlight color on hover */
}

/* 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 */
    }
}

/* END TOC EDITS END TOC EDITS END TOC EDITS END TOC EDITS */

/* 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 */
}

/* Style the page heading */
.page-heading {
    width: 100%; /* Ensure it stretches within the .heading-holder */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Consistent box-sizing */
}

/* Style for the page title (keep left-aligned) */
h1#firstHeading {
    font-size: 3em; /* Larger font size for emphasis */
    color: white; /* White text color */
    text-align: left; /* Ensure the text stays left-aligned */
    border-bottom: 2px solid rgba(68, 68, 68, 0.7); /* Maintain existing underline */
    padding-bottom: 20px; /* Space between text and underline */
    margin-bottom: 5px; /* Add 5px of padding below the header */
    padding-top: 30px; /* Space above the header */
}

/* 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 */
    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 */
}



/* 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 */
}



/* Further reduce space below the page name */
h1#firstHeading {
    margin-bottom: 5px; /* Minimized space below the title */
    padding-bottom: 2px; /* Tighter padding for the underline */
    border-bottom: 2px solid rgba(68, 68, 68, 0.7); /* Keep the underline consistent */
}

/* 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 */
}

/* INNER PAGE HEADER STYLING */


/* General styles for H1 and H2 headers */
h1 .mw-headline, h2 .mw-headline {
    font-weight: bold;
}

/* Bold bright teal for links to existing pages that haven't been clicked */
h1 .mw-headline a:not(.new):link, 
h2 .mw-headline a:not(.new):link {
    text-decoration: none; /* No underline */
    color: #00d1d1; /* Bright teal for unvisited links */
    font-weight: bold;
}

/* Bold less bright teal for links to existing pages that have been clicked */
h1 .mw-headline a:not(.new):visited, 
h2 .mw-headline a:not(.new):visited {
    text-decoration: none; /* No underline */
    color: #008080; /* Less bright teal for visited links */
    font-weight: bold;
}

/* Red for links to non-existent pages */
h1 .mw-headline a.new, 
h2 .mw-headline a.new {
    color: red;
    text-decoration: none; /* No underline */
    font-weight: bold;
}

/* White underline for H1 and H2 headers */
h1, h2 {
    position: relative;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid white; /* White underline */
}

/* Remove underline from TOC heading */
#mw-toc-heading {
    border-bottom: none !important; /* Remove underline */
    margin-bottom: 0; /* Adjust spacing if necessary */
}

/* Optional hover effect for links to existing pages */
h1 .mw-headline a:not(.new):hover, 
h2 .mw-headline a:not(.new):hover {
    color: #00ffff; /* Lighter teal on hover */
}


/* 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 */
}


/* MENU BUTTON POP UP CHANGES */


/* Transform the side menu into a full popup below the menu button */
#mw-mf-page-left {
    display: none; /* Hidden by default */
    position: absolute; /* Position below the menu button */
    top: 52px; /* Adjust to position 8px higher */
    left: 15px; /* Add padding to move off the left edge of the page */
    background-color: #2c2c2c; /* Dark grey background */
    border: 1px solid #444; /* Subtle border */
    border-radius: 8px; /* Rounded edges */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    z-index: 1000; /* Ensure the menu is above other elements */
    padding: 10px;
    width: 280px; /* Adjust width to fit content */
    height: auto; /* Dynamically adjust height to fit content */
    overflow: visible; /* Ensure no scrolling or clipping */
}

/* Extend the background of #mw-mf-page-left */
#mw-mf-page-left::before {
    content: ""; /* Create an empty pseudo-element */
    position: absolute;
    top: 0; /* Start at the top of the container */
    left: 0; /* Align with the left of the container */
    width: 100%; /* Match the container's width */
    height: 270px; /* Slightly increase height by 5px */
    background-color: #2c2c2c; /* Match the container's background */
    border-radius: 8px; /* Ensure rounded corners match */
    z-index: -1; /* Place it behind the content */
}

/* Show the menu as a popup when the checkbox is checked */
#main-menu-input:checked ~ #mw-mf-page-left {
    display: block !important; /* Make it visible */
}

/* Style the list items inside the popup */
#mw-mf-page-left ul.toggle-list__list {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
}

/* Style individual links in the popup */
#mw-mf-page-left .toggle-list-item__anchor {
    display: flex; /* Align text and icons horizontally */
    align-items: center;
    padding: 8px 12px; /* Add padding */
    text-decoration: none; /* Remove underline */
    color: white; /* White text */
    background-color: #2c2c2c; /* Match popup background */
    font-weight: bold; /* Bold text */
    border-bottom: 1px solid #444; /* Subtle separator */
}

/* Hover effect for links */
#mw-mf-page-left .toggle-list-item__anchor:hover {
    background-color: #444; /* Slightly lighter grey */
}

/* Style icons inside the popup */
#mw-mf-page-left .minerva-icon {
    margin-right: 10px; /* Add space between icon and text */
    font-size: 16px; /* Adjust icon size */
    color: white; /* White icons */
}

/* Additional styling for labels */
#mw-mf-page-left .toggle-list-item__label {
    color: white; /* Ensure white text for labels */
}

/* Optional: Ensure the checkbox and label do not affect layout */
#main-menu-input {
    display: none; /* Hide the checkbox itself */
}

/* Target the label tied to the menu button */
#mw-mf-main-menu-button {
    margin: 0;
    padding: 0;
    background: none; /* Remove any background color */
    border: none; /* Remove borders */
    display: inline-block; /* Ensure it's inline with other elements */
    width: auto; /* Allow natural width */
    height: auto; /* Allow natural height */
}

/* Optional: Remove any visual mask or extra element tied to the menu */
.main-menu-mask {
    display: none; /* Hide the mask element entirely */
}