MediaWiki:Minerva.css: Difference between revisions

Revision as of 20:02, 4 December 2024

/* All CSS here will be loaded for users of the MinervaNeue skin */


/* <pre> */

/* Ensure the body background image is fully visible */
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(30, 30, 30, 0.5) !important; /* Keep 50% transparent */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add 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 */
}

/* Left-align the menu icon (three lines) */
.menu-icon {
    position: relative;
    left: 10px; /* Slight spacing from the left edge */
    font-size: 36px; /* Make the menu icon larger */
    margin-right: 15px; /* Add spacing between the icon and the branding */
}

/* Enlarge the branding/logo area */
.branding-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px; /* Add spacing around the logo */
    width: 350px; /* Widen the logo area */
}

.branding-box a {
    display: inline-block;
    width: 100%; /* Use full width of the branding box */
    height: 100px; /* Adjust the height of the logo */
    background: url('http://localhost:8080/w/images/thumb/6/62/CosmicLogo.png/180px-CosmicLogo.png') no-repeat center center; /* Custom logo */
    background-size: contain; /* Ensure the logo scales properly */
    text-indent: -9999px; /* Hide text */
    overflow: hidden;
}


}
/* 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 {
    width: 100vw; /* Full width of the viewport */
    max-width: none; /* Remove any max-width restriction */
    padding: 0 50px; /* Add padding to ensure spacing on the sides */
    display: flex; /* Flexbox layout for header items */
    justify-content: space-between; /* Space out items evenly */
    align-items: center; /* Center items vertically */
}

/* Make the branding/logo area wider */
.branding-box {
    width: auto; /* Let the logo area expand */
    padding: 0 20px; /* Add padding around the logo */
}

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

/* Increase the size of the menu icon */
.menu-icon {
    font-size: 48px; /* Increase size of the menu icon */
    margin-right: 15px; /* Add spacing between the icon and branding */
}

/* 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 Container and Title */
#mw-toc-heading {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5px; /* Align contents more tightly */
}

/* TOC 3-line icon */
#mw-toc-heading::before {
    content: "\2630"; /* Three-line icon */
    font-size: 24px;
    padding-right: 10px; /* Space between icon and label */
    cursor: pointer;
    color: white;
}

/* TOC Container */
#toc {
    width: 100%;
    max-width: 380px; /* Control the size of the TOC */
    padding: 10px;
    background-color: rgba(50, 50, 50, 0.9); /* Darker background */
    border: none; /* Remove border */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Soft shadow */
    position: relative;
    margin-bottom: 15px; /* Space below TOC */
}

/* TOC Expand/Collapse button */
#toc .mw-ui-icon-mf-expand {
    position: absolute;
    right: 10px; /* Align it to the right side */
    top: 10px; /* Adjust vertical positioning */
    cursor: pointer;
    color: white;
    font-size: 20px;
}

/* Hide the default TOC toggle button */
#toctogglecheckbox {
    display: none; /* Hide checkbox */
}

/* TOC List Styling */
#toc ul {
    list-style: decimal; /* Numbered list */
    padding-left: 20px;
    margin: 0;
    column-count: 2; /* Two columns for items */
    column-gap: 10px; /* Spacing between columns */
}

/* Styling for each list item */
#toc .toclevel-1 {
    font-size: 16px;
    margin-bottom: 5px;
}

#toc .toclevel-1 a {
    color: #62a0ea; /* Blue color for links */
    text-decoration: none;
}

#toc .toclevel-1 a:hover {
    color: #ff7f7f; /* Highlight color on hover */
}

/* TOC Break after item 6 */
#toc ul li:nth-child(n+7) {
    page-break-before: always; /* Forces break after 6th item */
}



/* Page title header with line below */
h1#firstHeading {
    border-bottom: 2px solid rgba(68, 68, 68, 0.7); /* Dark grey underline */
    padding-bottom: 20px; /* Add spacing between the text and the underline */
    margin-bottom: 15px; /* Space below the header */
    padding-top: 30px; /* Adjust padding at the top of the page name to space below the page edit buttons */
    color: white; /* White text color for headers */
}

/* Inline headers with underline */
.mw-headline {
    font-size: 24px; /* Adjust headline size */
    font-weight: bold; /* Ensure bold text */
    border-bottom: 2px solid rgba(68, 68, 68, 0.7); /* Add underline to inline headers */
    padding-bottom: 5px; /* Add space between the text and the underline */
}

/* Edit section link styling */
.mw-editsection a {
    color: #62a0ea; /* Blue color for the edit link */
    font-size: 16px; /* Adjust font size */
}

.mw-editsection a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Adjust inline headers' layout */
.mw-headline a {
    color: white; /* Ensure the inline links are white */
}

.mw-headline a:hover {
    text-decoration: underline; /* Add underline on hover */
}
/* Enlarge the page title by 2x */
h1#firstHeading {
    font-size: 3em; /* 2x size increase */
    border-bottom: 2px solid rgba(68, 68, 68, 0.7); /* Dark grey underline */
    padding-bottom: 15px;
    margin-bottom: 20px;
    padding-top: 30px;
    color: white; /* White text color for headers */
}

/* Hide "Page" and "Discussion" buttons */
.minerva__tab.selected,
.minerva__tab.new {
    display: none !important; /* Remove the page and discussion buttons */
}

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