Merged the drops filters, better organization of colors and new custom checkbox
parent
abcc8e99db
commit
fb7509ec14
|
|
@ -1,6 +1,6 @@
|
|||
[package]
|
||||
name = "khguide"
|
||||
version = "1.3.0"
|
||||
version = "1.3.2"
|
||||
edition = "2024"
|
||||
|
||||
[dependencies]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
name = "Wizard"
|
||||
|
||||
[[world]]
|
||||
name = "Holloween Town"
|
||||
name = "Halloween Town"
|
||||
|
||||
[[world]]
|
||||
name = "Traverse Town"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
color: #9dff9d;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #00a200;
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #65a565;
|
||||
}
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 16px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
background: var(--button-bg-color);
|
||||
color: var(--text-color);
|
||||
padding: 8px;
|
||||
border-color: #555;
|
||||
border-bottom-color: rgb(85, 85, 85);
|
||||
border-color: var(--button-border-color);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,3 +85,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.material-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 25%;
|
||||
row-gap: 20px;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<input
|
||||
type="checkbox"
|
||||
id="onlyTracked"
|
||||
name="onlyTracked"
|
||||
autocomplete="off"
|
||||
value=""
|
||||
/>
|
||||
<label for="onlyTracked">Show only tracked</label>
|
||||
Loading…
Reference in New Issue