Module:Sandbox/Aurelain/ArtifactsOverview/styles.css: Difference between revisions

Revision as of 12:59, 30 June 2026

.artifacts-overview table {
    width: 100%
}

.artifacts-overview th {
    padding-right: 4px !important; /* suppress the space allotted to the sortable markers */
    background: #21252a !important;
}

.artifacts-overview tr:hover {
    background: #13161a;
}

/* ===================================================== */
/*     C O L U M N S
/* ===================================================== */
/* Icon */
.artifacts-overview .artifact td:nth-child(1) {
    border-right: 0;
    padding: 0;
    width: 64px;
}

/* Name */
.artifacts-overview td:nth-child(2) {
    border-left: 0;
    padding-left:0;
}

/* ===================================================== */
/*     R A R I T I E S
/* ===================================================== */

/* 1-common */
.artifacts-overview .common td:nth-child(6) img,
.artifacts-overview .common td:nth-child(7) img {
    filter: invert(41%) sepia(0%) saturate(1905%) hue-rotate(315deg) brightness(94%) contrast(86%);
}

/* 2-rare */
.artifacts-overview .separator-tiny.rare {
    background: #70af51 !important;
}
.artifacts-overview .rare td:nth-child(6) img,
.artifacts-overview .rare td:nth-child(7) img {
    filter: invert(66%) sepia(59%) saturate(385%) hue-rotate(56deg) brightness(84%) contrast(85%);
}

/* 3-epic */
.artifacts-overview .separator-tiny.epic {
    background: #b16cca !important;
}

/* 4-legendary */
.artifacts-overview .separator-tiny.legendary {
    background: #c36b46 !important;
}


/* ===================================================== */
/*     S E P A R A T O R S
/* ===================================================== */
.artifacts-overview .separator:first-child,
.artifacts-overview .separator:last-child,
.artifacts-overview .separator + .separator {
    display: none;
}

.artifacts-overview .separator-tiny {
    height: 4px;
}

.artifacts-overview .separator-tiny td {
    padding: 0;
}

.artifacts-overview .separator-large {
    background-color: #101622 !important;
    font-size: 24px;
}

.artifacts-overview .separator-large td {
    text-align: center;
    padding: 0.5em;
}