Template:Sandbox/Aurelain/ArtifactSummary/styles.css

.artifact-summary {
    display: flex;
}

.artifact-summary .icon {
    flex-shrink:0;
}

.artifact-summary .about {
    margin-left:4px;
    flex-grow:1;
}

.artifact-summary .header {
    /*margin-bottom: 4px;*/
}

.artifact-summary .common {
    color: #666;
}

.artifact-summary .common img {
    filter: invert(41%) sepia(0%) saturate(1905%) hue-rotate(315deg) brightness(94%) contrast(86%);
}

.artifact-summary .rare {
    color: #70af51;
}

.artifact-summary .rare img {
    filter: invert(66%) sepia(59%) saturate(385%) hue-rotate(56deg) brightness(84%) contrast(85%);
}

.artifact-summary .epic {
    color: #9352ab;
}

.artifact-summary .epic img {
    filter: invert(38%) sepia(9%) saturate(3992%) hue-rotate(240deg) brightness(97%) contrast(80%);
}

.artifact-summary .legendary {
    color: #c36b46;
}

.artifact-summary .legendary img {
    filter: invert(56%) sepia(15%) saturate(4945%) hue-rotate(336deg) brightness(87%) contrast(72%);
}