diff --git a/css/items.css b/css/items.css index 80b3c6c..6a03a84 100644 --- a/css/items.css +++ b/css/items.css @@ -1,32 +1,74 @@ -.searchbox { - grid-column: 1; - padding: 0%; - display: grid; - grid-template-columns: repeat(4, 1fr); - width: 100%; - gap: 5px; +/* type selectors */ + +#type-box { + cursor: pointer; + overflow: auto; +} +#type-box > div { + display: inline-block; + width: calc(100% / 12); + float: left; } -.items { - grid-column: 1; - padding: 0%; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - width: 100%; - gap: 5px; - grid-template-rows: masonry; +.type-selected { + background-color: #0a0; } -.itemsearch { - padding: 0%; - display: grid; - grid-template-columns: 1fr; - width: 100%; - gap: 5px; +/* 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; } -.searchinput { - width: 100%; - max-width: 200px; +#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 */ +.reorder-filter { + height: 75%; + cursor: pointer; } +.asc-icon { + opacity: 0.25; + width: 1rem; + cursor: pointer; +} +.desc-icon { + opacity: 0.25; + width: 1rem; + transform: rotate(180deg); + cursor: pointer; +} +img.asc-sel { + opacity: 0.85; +} \ No newline at end of file diff --git a/items/index.html b/items/index.html index 183b479..c136130 100644 --- a/items/index.html +++ b/items/index.html @@ -18,6 +18,7 @@ +
-
+
Advanced Item Search
-
+
+
-
+
Name:
- -

-
-
-
Category:
- - - -

-
-
-
Rarity:
- - - -

-
-
-
Level Range:
- +

-
-
Filter 1:
- +
+
Type: All   None
+
+
+
+
+
+
+
+
+
+
+
+
+
+

-
-
Filter 2:
- -

-
-
-
Filter 3:
- -

-
-
-
Filter 4:
- -

-
-
-
- +
+
Rarity: All   None
+
+ +
N
U
S
R
L
F
M
+
+

-
- +
+
+
+
Filters:
+
+
+ + + + + +  to  +
+
+
+ + Add Filter +
+
+
+
+
+
+ +
+
+ +
diff --git a/media/icons/3-lines.svg b/media/icons/3-lines.svg new file mode 100644 index 0000000..b1c0a2d --- /dev/null +++ b/media/icons/3-lines.svg @@ -0,0 +1,8 @@ + + + diff --git a/media/icons/triangle.svg b/media/icons/triangle.svg new file mode 100644 index 0000000..0c07a50 --- /dev/null +++ b/media/icons/triangle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file