User:Sur/vector.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.

/* Used for {{Infobox_stat}} and [[Module:HeroData]]'s write_stat_infoboxes for hero pages*/

.stat-infobox-table {
    width: 100%;
    border-collapse: separate;
    margin-top: 10px; /* Add space above to prevent overlap with content above */
}

.stat-infobox-table th, 
.stat-infobox-table td {
    padding: 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    max-width: 320px;
    font-family: 'Retail Demo', sans-serif;
}

.stat-infobox-table th:hover,
.stat-infobox-table td:hover {
	padding: 5px;
    overflow: visible;
    text-overflow: clip;
    background-color: rgba(0, 0, 0, .4);
}

.stat-infobox-table td::before, 
.stat-infobox-table th::before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
    mix-blend-mode: multiply;
}

.stat-infobox-table .darker {
    background-color: rgba(0, 0, 0, 0.25);
}