Merged the drops filters, better organization of colors and new custom checkbox

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "khguide"
-version = "1.3.0"
+version = "1.3.2"
 edition = "2024"
 
 [dependencies]

input/kh1/enemies/wizard.toml

@@ -1,7 +1,7 @@
 name = "Wizard"
 
 [[world]]
-name = "Holloween Town"
+name = "Halloween Town"
 
 [[world]]
 name = "Traverse Town"

public/styles/common/base.css

@@ -30,7 +30,7 @@ table {
 	margin-top: 10px;
 
 	thead th {
-		background-color: #252525;
+		background-color: var(--bg-dark-color);
 	}
 }
 
@@ -39,39 +39,34 @@ ul {
 }
 
 a {
-	color: #00ff00;
+	color: var(--link-color);
 	text-decoration: none;
 
-	&:hover {
+	&:visited {
-		color: #9dff9d;
+		color: var(--link-visited-color);
 	}
 
-	&:visited {
+	&:hover {
-		color: #00a200;
+		color: var(--link-hover-color);
-
-		&:hover {
-			color: #65a565;
-		}
 	}
 }
 
 button {
 	margin-left: 16px;
-	background: #444;
+	background: var(--button-bg-color);
-	color: #fff;
+	color: var(--text-color);
 	padding: 8px;
-	border-color: #555;
+	border-color: var(--button-border-color);
-	border-bottom-color: rgb(85, 85, 85);
 	border-style: groove;
-	border-bottom-color: #0a0;
+	border-bottom-color: var(--primary-color);
 	transition-duration: 0.1s;
 
 	&:hover {
-		background: #4f4f4f;
+		background: var(--button-hover-bg-color);
 	}
 
 	&:active {
-		background: #3f3f3f;
+		background: var(--button-active-bg-color);
 		transform: translateY(1px);
 	}
 
@@ -80,3 +75,42 @@ button {
 		cursor: not-allowed;
 	}
 }
+
+input[type="checkbox"] {
+	appearance: none;
+	position: relative;
+	cursor: pointer;
+	width: 24px;
+	height: 24px;
+	padding-top: 8px;
+
+	&::before {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		content: "";
+		background-color: var(--bg-dark-color);
+		border: 1px solid var(--button-border-color);
+		border-radius: 5px;
+	}
+
+	&:hover::before {
+		background-color: var(--bg-light-color);
+	}
+
+	&:checked::after {
+		position: absolute;
+		content: "\2713";
+		color: var(--primary-color);
+		font-size: 48px;
+		top: -10px;
+		left: -4px;
+		align-content: center;
+		text-align: center;
+		white-space: pre;
+	}
+
+	&:checked:hover::after {
+		color: var(--primary-light-color);
+	}
+}

public/styles/common/colors.css

@@ -1,4 +1,18 @@
 :root {
 	--bg-color: #333;
+	--bg-dark-color: #252525;
+	--bg-light-color: #545454;
 	--text-color: #fff;
+
+	--link-color: #0f0;
+	--link-hover-color: #9dff9d;
+	--link-visited-color: #00a200;
+
+	--button-bg-color: #444;
+	--button-hover-bg-color: #4f4f4f;
+	--button-active-bg-color: #3f3f3f;
+	--button-border-color: #555;
+
+	--primary-color: #00aa00;
+	--primary-light-color: #60de60;
 }

public/styles/common/drops.css

@@ -85,3 +85,15 @@
 		}
 	}
 }
+
+.material-filters {
+	display: flex;
+	flex-wrap: wrap;
+	width: 25%;
+	row-gap: 20px;
+	position: relative;
+
+	div {
+		flex-basis: 25%;
+	}
+}

templates/components/common/drops.html

@@ -1,6 +1,30 @@
-{% include "components/common/only-tracked-filter.html" %}
+<input
+	type="checkbox"
+	id="onlyTracked"
+	name="onlyTracked"
+	autocomplete="off"
+	value=""
+/>
+<label for="onlyTracked">Show only tracked</label>
 <br />
-{% include "components/common/kind-filters.html" %}
+
+<div class="material-filters">
+	{% for kind in material_kinds %}
+		<div>
+			<input
+				type="checkbox"
+				id="{{ kind }}Filter"
+				name="kindFilter"
+				autocomplete="off"
+				value="{{ kind }}"
+			/>
+			<label for="{{ kind }}Filter">{{ kind|capitalize }}</label>
+		</div>
+		{#{% if loop.index0 == 6 %}
+			<br />
+		{% endif %}#}
+	{% endfor %}
+</div>
 <br />
 
 {% for drop in drops %}

templates/components/common/kind-filters.html

@@ -1,13 +0,0 @@
-{% for kind in material_kinds %}
-	<input
-		type="checkbox"
-		id="{{ kind }}Filter"
-		name="kindFilter"
-		autocomplete="off"
-		value="{{ kind }}"
-	/>
-	<label for="{{ kind }}Filter">{{ kind|capitalize }}</label>
-	{% if loop.index0 == 6 %}
-		<br />
-	{% endif %}
-{% endfor %}

templates/components/common/only-tracked-filter.html

@@ -1,8 +0,0 @@
-<input
-	type="checkbox"
-	id="onlyTracked"
-	name="onlyTracked"
-	autocomplete="off"
-	value=""
-/>
-<label for="onlyTracked">Show only tracked</label>