User:Sur/vector.css: Difference between revisions

From Deadlock Wiki
Jump to navigation Jump to search
Sur (talk | contribs)
m Undo revision 7132 by Sur (talk)
Tag: Undo
Sur (talk | contribs)
mNo edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Used for {{Infobox_stat}} and [[Module:HeroData]]'s write_stat_infoboxes for hero pages */
.icon {
 
  filter: invert(0%);
.stat-infobox-table-container {
    overflow: hidden; /* Prevents the table from protruding */
    border-radius: 10px; /* Matching the main box's border radius */
}
 
.stat-infobox-table {
    width: 100%;
    border-collapse: collapse; /* Change to collapse for better border handling */
    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 {
    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 th:first-child,
.stat-infobox-table td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
 
.stat-infobox-table th:last-child,
.stat-infobox-table td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
}


.stat-infobox-table .darker {
@media (prefers-color-scheme: dark) {
     background-color: rgba(0, 0, 0, 0.25);
  .icon {
     filter: invert(100%);
  }
}
}

Latest revision as of 18:56, 6 October 2024

.icon {
  filter: invert(0%);
}

@media (prefers-color-scheme: dark) {
  .icon {
    filter: invert(100%);
  }
}