Module:Sandbox/Aurelain/ArtifactsOverview/styles.css

.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;
}

.artifacts-overview td {
    color: #cbced1;
}

/* ===================================================== */
/*     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 .artifact > td:nth-child(2) {
    border-left: 0;
    padding-left: 0;
}

/* Description */
.artifacts-overview .artifact > td:nth-child(3) {
    /*max-width: 500px;*/
}

/* Upgrade text */
.artifacts-overview .artifact > td:nth-child(4) .wiki-hint {
    border-bottom: none;
}

/* Cost */
.artifacts-overview th:nth-child(4),
.artifacts-overview .artifact > td:nth-child(5) {
    white-space: nowrap;
    text-align: center;
}

.artifacts-overview .artifact > td:nth-child(5) .wiki-hint {
    border-bottom: none;
}

.artifacts-overview .infinity {
    font-size: x-large;
    color: peru;
}

.artifacts-overview .step {
    vertical-align: 2px;
}

.artifacts-overview .floating-costs {
    padding: 10px;
    max-width: none;
}

.artifacts-overview .floating-costs table {
    border-collapse: collapse;
}

.artifacts-overview .floating-costs td {
    text-align: right;
}

/* Slot */
.artifacts-overview td:nth-child(6) {
    text-align: center;
}

/* Rarity */
.artifacts-overview td:nth-child(7) {
    font-weight: bold;
    text-align: center;
}

/* Set */
.artifacts-overview .artifact > td:nth-child(8) .wiki-hint {
    border-bottom: none;
}

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

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

.artifacts-overview .common td:nth-child(7) {
    color: #666;
}

/* 2-rare */
.artifacts-overview .separator-tiny.rare {
    background: #70af51 !important;
}

.artifacts-overview .rare td:nth-child(6) img {
    filter: invert(66%) sepia(59%) saturate(385%) hue-rotate(56deg) brightness(84%) contrast(85%);
}

.artifacts-overview .rare td:nth-child(7) {
    color: #70af51;
}

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

.artifacts-overview .epic td:nth-child(6) img {
    filter: invert(38%) sepia(9%) saturate(3992%) hue-rotate(240deg) brightness(97%) contrast(80%);
}

.artifacts-overview .epic td:nth-child(7) {
    color: #b16cca;
}

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

.artifacts-overview .legendary td:nth-child(6) img {
    filter: invert(56%) sepia(15%) saturate(4945%) hue-rotate(336deg) brightness(87%) contrast(72%);
}

.artifacts-overview .legendary td:nth-child(7) {
    color: #c36b46;
}

/* ===================================================== */
/*     S E T   H I N T
/* ===================================================== */

.artifacts-overview .set-floating {
    /*max-width: 300px;*/
    text-align: left;
}

.artifacts-overview .set-title {
    font-size: larger;
    font-weight: bold;
    color: #c8b36c;
    margin-bottom: 4px;
}

.artifacts-overview .set-level {
    margin-top: 8px;
    font-weight: bold;
}

.artifacts-overview .set-text {
    margin-left: 24px;
}

/* ===================================================== */
/*     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;
    border-bottom: solid 4px #666;
    position:relative;
}

.artifacts-overview .separator-large img {
    filter: invert(84%) sepia(18%) saturate(956%) hue-rotate(3deg) brightness(88%) contrast(80%);
}

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


/* ===================================================== */
/*     N A V
/* ===================================================== */
.artifacts-overview .nav img {
    filter: invert(86%) sepia(10%) saturate(1652%) hue-rotate(2deg) brightness(87%) contrast(80%);
}

.artifacts-overview .jump {
    margin-right: 8px;
}

.artifacts-overview .back-to-top {
    position:absolute;
    right:4px;
    top: 4px;
}

/* ===================================================== */
/*     T O G G L E
/* ===================================================== */
.artifacts-overview .nav .toggle {
    float:right;
}

.artifacts-overview .toggle {
    padding: 0.5em 1em;
    border: 1px solid #45494e;
    color: dodgerblue;
    border-radius: 4px;
}

.artifacts-overview .toggle:hover {
    text-decoration: underline;
    background: #2a3347;
}

.artifacts-overview .toggle:active {
    background: #101622;
}

.artifacts-overview .narrative-full-td {
    padding-bottom: 30px;
    text-align: center;
    font-style: italic;
    color: #bcb096;
    background: #13161a;
}

.artifacts-overview td .toggle {
    padding: 1px 2px;
}