MediaWiki:Common.css: Difference between revisions

Revision as of 22:10, 11 November 2024

/* General page styling adjustments */

/* Sticky Header Styling */
body:not(.page-Main_Page) .vector-header-container {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent for distinction */
    padding: 1em !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it stays on top */
    width: 100%;
}

/* Center-align and enlarge search bar in the header */
body:not(.page-Main_Page) #p-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px; /* Wider search bar */
}

body:not(.page-Main_Page) #p-search form {
    display: flex;
    align-items: center;
}

body:not(.page-Main_Page) #p-search input {
    width: 100%;
    padding: 0.75em; /* Larger padding for a bigger input box */
    font-size: 1em;
    border: 2px solid #666;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background for search */
    color: #c1c1c1;
}

/* Footer Styling */
body:not(.page-Main_Page) #mw-footer {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Matching opacity to header */
    padding: 1em;
    text-align: center;
    color: #c1c1c1;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1000; /* Ensure it stays on top of other content */
}

/* Ensure footer links and text have readable colors */
body:not(.page-Main_Page) #mw-footer a {
    color: #66D9EF !important;
    text-decoration: none;
}

body:not(.page-Main_Page) #mw-footer a:hover {
    text-decoration: underline;
}

/* Center-align text within footer */
body:not(.page-Main_Page) #mw-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 0;
}

/* Center-align the main content with seamless background */
body:not(.page-Main_Page) .mw-page-container,
body:not(.page-Main_Page) .mw-body,
body:not(.page-Main_Page) .mw-body-content,
body:not(.page-Main_Page) #content {
    background-color: transparent !important; /* Make background seamless */
    border: none !important; /* Remove any visible borders */
    box-shadow: none !important; /* Remove shadows */
    max-width: 1200px; /* Set a max width for centering */
    margin: 0 auto !important; /* Center content */
    padding: 1em !important; /* Add padding for readability */
    color: #c1c1c1 !important;
}

/* Adjust main content padding for readability */
body:not(.page-Main_Page) .mw-body {
    padding-left: 2em !important;
    padding-right: 2em !important;
}

/* Transparent background for tables, boxes, and other elements */
body:not(.page-Main_Page) table,
body:not(.page-Main_Page) .infobox,
body:not(.page-Main_Page) .navbox,
body:not(.page-Main_Page) .toc,
body:not(.page-Main_Page) .wikitable,
body:not(.page-Main_Page) .thumb,
body:not(.page-Main_Page) .mw-parser-output .quotebox,
body:not(.page-Main_Page) #mw-panel {
    background-color: transparent !important; /* Transparent for seamless background */
    border: none !important; /* Remove borders */
}

/* Global background settings for a seamless experience */
html, body {
    background-image: url('https://wiki.cosmicsky.net/images/thumb/4/48/BackgroundThree.png/1600px-BackgroundThree.png?20240916194629') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    height: 100% !important;
}














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



body:not(.page-Main_Page) .mw-body {
    margin-left: 10em !important; /* Keep left margin */
    margin-right: 10em !important; /* Apply right margin */
}

/* Remove right margin specifically for the main page */
body.page-Main_Page .mw-body {
    margin-left: 10em !important; /* Keep left margin */
    margin-right: 0 !important;   /* Remove right margin */
}





#ca-nstab-main, body.mw-anonuser #ca-history, 
body.mw-anonuser #ca-view, body.mw-anonuser #ca-viewsource, 
body.mw-anonuser #ca-login {
    display: none !important;
}

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

/* Styling for table cells */
table.wikitable th, table.wikitable td {
    padding: 12px 16px;
    border: 1px solid #666666;
    color: #c1c1c1;
    font-size: 1.15em;
}

/* Alternating row colors */
table.wikitable tr:nth-child(even) {
    background-color: #333333;
}

table.wikitable tr:nth-child(odd) {
    background-color: #4d4d4d;
}

/* Table header styling */
table.wikitable th {
    background-color: #595959;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.3em;
    font-family: "Georgia", serif;
    border: 1px solid #666666;
}

/* Rounded corners for specific cells */
table.wikitable tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

table.wikitable tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

table.wikitable tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

table.wikitable tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Tooltip table styling */
.tooltip-table {
    border-collapse: separate;
    width: auto; /* Keeps tooltip table width adaptive to content */
    overflow: visible; /* Ensures tooltips extend outside table bounds */
    border-radius: 8px;
}

/* Table cell styling for tooltip table */
.tooltip-table td {
    position: relative;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    width: 48px; /* Maintains consistent size for tooltip cells */
    height: 48px;
    border: 1px solid black;
    overflow: visible;
    box-sizing: border-box;
}

/* Tooltip styling */
.tooltip-cell .tooltip-text {
    visibility: hidden;
    width: 375px; /* Fixed width for consistent tooltip size */
    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; /* Prevents tooltip from capturing mouse events */
}

/* Tooltip images */
.tooltip-cell .tooltip-text img {
    width: 100%; /* Ensures image fills the tooltip container */
    height: auto;
    display: block;
    margin: 0 auto;
    border: none !important;
    background: none;
}

/* Show tooltip on hover */
.tooltip-cell:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* Enable hover effect only within the tooltip-cell */
}

/* Image styling for main table cell */
.tooltip-cell img {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    width: 48px; /* Maintains consistent size for main table cell images */
    height: 48px;
    border: none;
    background: none;
}