93 lines
1.8 KiB
CSS
93 lines
1.8 KiB
CSS
/* type selectors */
|
|
|
|
#type-box {
|
|
cursor: pointer;
|
|
overflow: auto;
|
|
}
|
|
#type-box > div {
|
|
display: inline-block;
|
|
width: calc(100% / 12);
|
|
float: left;
|
|
}
|
|
|
|
.type-selected {
|
|
background-color: #0a0;
|
|
}
|
|
|
|
/* rarity selectors */
|
|
|
|
#rarity-box {
|
|
cursor: pointer;
|
|
width: 58.33%;
|
|
text-align: center;
|
|
}
|
|
#rarity-box > div {
|
|
width: calc(100% / 7);
|
|
aspect-ratio: 1/1;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
#rarity-box > div > b {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
#rarity-box > div.rarity-selected > b {
|
|
color: black;
|
|
}
|
|
|
|
#rarity-normal { color: #FFFFFF; }
|
|
#rarity-normal.rarity-selected { background-color: #FFFFFF; }
|
|
#rarity-unique { color: #FFFF55; }
|
|
#rarity-unique.rarity-selected { background-color: #FFFF55; }
|
|
#rarity-set { color: #55FF55; }
|
|
#rarity-set.rarity-selected { background-color: #55FF55; }
|
|
#rarity-rare { color: #FF55FF; }
|
|
#rarity-rare.rarity-selected { background-color: #FF55FF; }
|
|
#rarity-legendary { color: #55FFFF; }
|
|
#rarity-legendary.rarity-selected { background-color: #55FFFF; }
|
|
#rarity-fabled { color: #FF5555; }
|
|
#rarity-fabled.rarity-selected { background-color: #FF5555; }
|
|
#rarity-mythic { color: #AA00AA; }
|
|
#rarity-mythic.rarity-selected { background-color: #AA00AA; }
|
|
|
|
/* filters */
|
|
.filter-row {
|
|
border: 1px solid #121212;
|
|
}
|
|
.filter-dragged-over {
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.reorder-filter {
|
|
height: 75%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input.filter-input {
|
|
width: 27ch!important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.asc-icon {
|
|
opacity: 0.25;
|
|
width: 1rem;
|
|
}
|
|
.desc-icon {
|
|
opacity: 0.25;
|
|
width: 1rem;
|
|
transform: rotate(180deg);
|
|
}
|
|
img.asc-sel {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
input.min-max-input {
|
|
width: 6ch!important;
|
|
display: inline-block;
|
|
}
|
|
|
|
#filter-container > div > div > * {
|
|
margin: 0 2px;
|
|
} |