Jump to content

MediaWiki:Common.css: Difference between revisions

From THS Wiki
No edit summary
No edit summary
Line 78: Line 78:
}
}
/* Mobile-only styles (for screens smaller than 720px) */
/* Mobile-only styles (for screens smaller than 720px) */
@media screen and (max-width: 720px) {
@media screen and (max-width: 1281px) {
     /* Force the table to behave like a series of blocks */
     /* Force the table to behave like a series of blocks */
     .mobile-card-table,  
     .mobile-card-table,  
Line 98: Line 98:
     .mobile-card-table tr {
     .mobile-card-table tr {
         margin-bottom: 15px;
         margin-bottom: 15px;
        border: 1px solid #555; /* Silver/Grey border */
         padding: 10px;
         padding: 10px;
         background: rgba(255, 255, 255, 0.05); /* Subtle dark mode background */
         background: rgba(255, 255, 255, 0.05); /* Subtle dark mode background */

Revision as of 18:37, 21 February 2026


.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: 1281px) {
    /* 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;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05); /* Subtle dark mode background */
    }

}