wynnbuilder-forked-for-changes/css/items.css

101 lines
2 KiB
CSS
Raw Normal View History

2022-08-08 19:59:28 +00:00
/* type selectors */
#type-box {
cursor: pointer;
overflow: auto;
}
#type-box > div {
display: inline-block;
width: calc(100% / 12);
float: left;
2021-01-26 09:19:44 +00:00
}
2022-08-08 19:59:28 +00:00
.type-selected {
background-color: #0a0;
2021-01-26 09:19:44 +00:00
}
2022-08-08 19:59:28 +00:00
/* 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%);
2021-01-26 09:19:44 +00:00
}
2022-08-08 19:59:28 +00:00
#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; }
2021-01-26 09:19:44 +00:00
2022-08-08 19:59:28 +00:00
/* filters */
2022-08-26 21:07:07 +00:00
.filter-row {
border: 1px solid #121212;
}
.filter-dragged-over {
border: 1px solid white;
}
2022-08-08 19:59:28 +00:00
.reorder-filter {
2022-08-29 21:01:10 +00:00
height: 2ch;
2022-08-08 19:59:28 +00:00
cursor: pointer;
2021-01-26 09:19:44 +00:00
}
2022-08-19 00:15:17 +00:00
input.filter-input {
width: 27ch!important;
2022-08-29 21:01:10 +00:00
max-width: 90%;
2022-08-19 00:15:17 +00:00
display: inline-block;
}
2022-08-08 19:59:28 +00:00
.asc-icon {
opacity: 0.25;
2022-08-29 21:01:10 +00:00
width: 1.75ch;
2022-08-08 19:59:28 +00:00
}
.desc-icon {
opacity: 0.25;
2022-08-29 21:01:10 +00:00
width: 1.75ch;
2022-08-08 19:59:28 +00:00
transform: rotate(180deg);
}
img.asc-sel {
opacity: 0.85;
2022-08-19 00:15:17 +00:00
}
input.min-max-input {
width: 6ch!important;
display: inline-block;
}
#filter-container > div > div > * {
margin: 0 2px;
2022-08-29 21:01:10 +00:00
}
/* item display */
@media (min-width: 576px) and (max-width: 991px) {
div.col-sm-6 {
width: 100%;
}
2022-08-08 19:59:28 +00:00
}