Merge pull request #2 from feored/dev

Search bar

css/custom.css

@@ -1,3 +1,5 @@
+/* COLORS */
+
 :root {
 	/* https://d2mods.info/forum/viewtopic.php?t=16396 */
 	--color-unique: rgb(199, 179, 119);
@@ -7,16 +9,53 @@
 	--color-craft: rgb(255, 168, 0);
 	--color-server: rgb(255, 77, 77);
 	--color-set: rgb(0, 255, 0);
+
+	--color-topaz: rgb(255, 255, 0);
+	--color-amethyst: rgb(153, 50, 204);
+	--color-sapphire: rgb(79, 164, 230);
+	--color-ruby: rgb(173, 26, 12);
+	--color-emerald: rgb(27, 180, 47);
+	--color-diamond: rgb(134, 134, 134);
 }
 
-.highlight {
-	color: var(--color-set);
+.topaz {
+	color: var(--color-topaz);
+}
+
+.amethyst {
+	color: var(--color-amethyst);
+}
+
+.sapphire {
+	color: var(--color-sapphire);
+}
+
+.ruby {
+	color: var(--color-ruby);
+}
+
+.emerald {
+	color: var(--color-emerald);
+}
+
+.diamond {
+	color: var(--color-diamond);
 }
 
 .rune-text {
 	color: var(--color-craft);
 }
 
+/* LAYOUT */
+
+.flex {
+	display: flex;
+}
+
+.auto-width {
+	width: auto;
+}
+
 /* Custom CSS for the sidebar */
 .wrapper {
 	display: grid;
@@ -44,7 +83,7 @@
 
 }
 
-/* Fix default picocss size: https://github.com/picocss/pico/discussions/482#discussioncomment-9043725*/
+/* PicoCSS fixes : https://github.com/picocss/pico/discussions/482#discussioncomment-9043725*/
 
 :root {
 	--pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
@@ -95,29 +134,6 @@
 	}
 }
 
-#runes small {
-	/* color: var(--color-craft); */
-	font-size: medium;
-}
-
-.flex {
-	display: flex;
-}
-
-#filters fieldset {
-	margin-bottom: 0;
-}
-
-.filter-grid {
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	grid-template-rows: repeat(auto-fill, 1fr);
-	column-gap: var(--pico-grid-column-gap);
-	row-gap: var(--pico-grid-row-gap);
-}
-
-
 article,
 table {
 	border: 1px solid var(--pico-muted-border-color);
@@ -136,6 +152,38 @@ tbody tr td {
 	padding-bottom: calc(var(--pico-spacing));
 }
 
+[data-tooltip] {
+	width: max-content;
+}
+
+table.striped tbody tr:nth-child(odd of :not([hidden])) th,
+table.striped tbody tr:nth-child(odd of :not([hidden])) td {
+	background-color: var(--pico-table-row-stripped-background-color) !important;
+}
+
+table.striped tbody tr:nth-child(even of :not([hidden])) th,
+table.striped tbody tr:nth-child(even of :not([hidden])) td {
+	background-color: inherit !important;
+}
+
+
+/* Custom CSS for the runes */
+
+#runes small {
+	/* color: var(--color-craft); */
+	font-size: medium;
+}
+
+.rune-grid {
+	display: grid;
+	grid-template-columns: repeat(11, 1fr) 2fr;
+	grid-template-rows: 1fr;
+	grid-column-gap: var(--pico-grid-column-gap);
+	grid-row-gap: var(--pico-grid-row-gap);
+}
+
+
+/* Custom CSS for the runewords table*/
 
 #rwtable th,
 td {
@@ -148,39 +196,50 @@ td {
 	color: var(--color-unique);
 }
 
-/* ladder only */
-#rwtable tbody td:nth-child(1) small {
-	color: var(--color-set);
+#runeword-nb {
+	text-align: center;
+	font-style: italic;
+	color: var(--color-grey);
 }
 
-/* #rwtable tbody td:nth-child(2),
-#rwtable tbody td:nth-child(3) {
-	color: var(--color-grey);
-} */
+#rwtable tbody tr:hover td {
+	background: rgba(127, 127, 127, 0.1) !important;
+}
 
-#rwtable tbody td:nth-child(4) {
+td.runeword_name {
+	color: var(--color-unique);
+}
+
+/* Ladder Only */
+td.runeword_name small {
+	color: var(--color-set);
+}
+
+td.runeword_runes {
 	color: var(--color-craft);
 }
 
-#rwtable tbody td:nth-child(5) {
+td.runeword_stats {
 	color: var(--color-magic);
 }
 
-/* #rwtable tbody td:nth-child(6) {
-	color: var(--color-server);
-} */
-
-#runeword-nb {
-	text-align: center;
-	font-style: italic;
-	color: var(--color-grey);
+.runeword_level,
+.runeword_sockets,
+.runeword_can_make {
+	width: min-content;
 }
 
-/* tbody tr td {
-	cursor: pointer;
-	transition: 0.1s background cubic-bezier(0.86, 0, 0.07, 1); 
-}*/
+/* Custom CSS for the filters */
 
-tbody tr:hover td {
-	background: rgba(127, 127, 127, 0.1) !important;
+#filters fieldset {
+	margin-bottom: 0;
+}
+
+.filter-grid {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-template-rows: repeat(auto-fill, 1fr);
+	column-gap: var(--pico-grid-column-gap);
+	row-gap: var(--pico-grid-row-gap);
 }