MediaWiki:Common.css: Difference between revisions

Revision as of 23:28, 27 October 2024

/* General page styling adjustments */
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;
}

#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 {
    border-collapse: separate;
    border-spacing: 0;
    border: 4px solid #2b2b2b;
    border-radius: 8px;
    overflow: visible;
    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,
.wikitable {
    border-collapse: separate;
    width: auto;
    overflow: visible;
    border-radius: 8px;
}

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

/* Tooltip styling */
.tooltip-cell .tooltip-text {
    visibility: hidden;
    width: 300px; /* Adjusted tooltip width */
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent background for better readability */
    border-radius: 5px;
    border: 1px solid #666;
    position: absolute;
    z-index: 1000;
    top: -10px;
    left: 105%; /* Places tooltip close to cell edge */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-10px);
    white-space: nowrap;
}

/* Tooltip images */
.tooltip-cell .tooltip-text img {
    width: 100%; /* Ensures image fills tooltip container */
    height: auto;
    display: block;
    border-radius: 3px;
    border: 1px solid #444;
    background: none;
}

/* Show tooltip on hover with fade and slide effect */
.tooltip-cell:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* Custom icon styling for main table cell */
.tooltip-cell img,
.tooltip-cell .custom-icon {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    width: 48px; /* Matches larger cell size */
    height: 48px;
    border: none;
    background: none;
}

/* Styling for custom icons, allows flexibility for various icon types */
.custom-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

/* Example: Define specific custom icon */
.icon-cosmic-coin {
    background-image: url('/path/to/cosmic_coin.png');
}

.icon-special-lootbox {
    background-image: url('/path/to/special_lootbox.png');
}

.icon-player-rank {
    background-image: url('/path/to/player_rank.png');
}