MediaWiki:Common.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.mw-logo-wordmark {
    display: none !important;
}

.mw-anon-user #vector-page-tools-dropdown,
.mw-anon-user #p-tb, 
.mw-anon-user .vector-column-end {
    display: none !important;
}

.mw-page-container, 
.mw-content-container, 
.vector-sticky-header {
    max-width: none !important;
}

.mw-logo-icon {
    width: 160px !important;
    height: 160px !important;
}

/* Full-width banner at the absolute top, behind everything */
body {
    background-image: url('https://wiki.thehumanserver.org/images/9/9e/Wiki_background_top.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* Forces image to fit screen width */
    background-attachment: scroll; /* Use 'fixed' if you want it to stay when scrolling */
}

/* Vector-2022 Specific: Make the skin's main containers transparent to reveal the banner */
.mw-page-container, 
.mw-header, 
.vector-sticky-header {
    background-color: transparent !important;
}

/* Optional: Add space at the top so the banner isn't covered by the logo/search bar */
.mw-header {
    margin-top: 20px; /* Adjust this value to the height of your banner */
}
#content {
    background-color: #2f2f2f; /* Makes content semi-transparent */
}
/* Make the top-right personal tools larger and stick to the corner */
.vector-user-links {
    position: fixed; 
    top: 10px;        
    right: 20px;     
    z-index: 1000;     
    transform: scale(1.2); 
    transform-origin: top right; 
    background: rgba(0, 0, 0, 0.5); 
    padding: 5px 10px;
    border-radius: 8px;
}

/* Adjust icons specifically if they look blurry after scaling */
.vector-user-links .vector-icon {
    width: 24px;  /* Increase base icon size */
    height: 24px;
}
/* Change all links to silver */
a {
    color: #d1d1d1 !important; /* You can also use the hex code #C0C0C0 */
}

/* Optional: Change color for visited links to stay silver */
a:visited {
    color: silver !important;
}

/* Optional: Slightly brighter silver or a different effect on hover */
a:hover {
    color: #e0e0e0 !important;
    text-decoration: underline;
}
/* Mobile-only styles (for screens smaller than 720px) */
@media screen and (max-width: 720px) {
    /* Force the table to behave like a series of blocks */
    .mobile-card-table, 
    .mobile-card-table tbody, 
    .mobile-card-table tr, 
    .mobile-card-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Hide the original header row since it won't align with the new "cards" */
    .mobile-card-table thead, 
    .mobile-card-table tr:first-child {
        display: none !important;
    }

    /* Style each row like a card */
    .mobile-card-table tr {
        margin-bottom: 15px;
        border: 1px solid #555; /* Silver/Grey border */
        padding: 10px;
        background: rgba(255, 255, 255, 0.05); /* Subtle dark mode background */
    }

    /* Optional: Label the data so users know what each line is */
    /* This assumes you know the order of your columns */
    .mobile-card-table td:nth-of-type(1):before { content: "Name: "; font-weight: bold; }
    .mobile-card-table td:nth-of-type(2):before { content: "Type: "; font-weight: bold; }
    .mobile-card-table td:nth-of-type(3):before { content: "Location: "; font-weight: bold; }
}