verbesserung patch und kutte

This commit is contained in:
kai
2026-08-26 10:51:46 +02:00
parent a18dba1c8f
commit b7128e8aaf
2 changed files with 6 additions and 9 deletions
+5 -8
View File
@@ -19,11 +19,10 @@
.kutte::before, .kutte::after { content: ""; position: absolute; top: 0; width: 30%; height: 62px; background: #111; border-bottom: 3px solid #404040; }
.kutte::before { left: 0; border-radius: 24px 0 45% 0; }
.kutte::after { right: 0; border-radius: 0 24px 0 45%; }
.patch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 14px; }
.patch { min-height: 94px; padding: 10px 7px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; }
.patch-icon { font-size: 1.6rem; }
.patch-image { width: 58px; height: 58px; object-fit: contain; }
.patch small { color: #d1d5db; }
.patch-grid { display: grid; grid-template-columns: repeat(auto-fill, 105px); gap: 14px; justify-content: start; align-content: start; }
.patch { width: 105px; height: 105px; padding: 5px; display: grid; place-items: center; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; overflow: hidden; }
.patch-icon { font-size: 2.5rem; }
.patch-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.patch.locked { opacity: .38; filter: grayscale(1); }
.patch.earned { border-style: solid; border-color: #a78bfa; box-shadow: 0 0 12px rgba(167, 139, 250, .35); }
.profile-edit { margin-top: 24px; }
@@ -63,14 +62,12 @@
<div class="patch-grid">
{% for badge in badges %}
{% if badge.earned %}
<div class="patch earned" title="{{ badge.description }}">
<div class="patch earned" title="{{ badge.name }} {{ badge.description }}" aria-label="{{ badge.name }}: {{ badge.description }}">
{% if badge.image_path %}
<img class="patch-image" src="{{ badge.image_path }}" alt="Patch {{ badge.name }}">
{% else %}
<span class="patch-icon">{{ badge.icon }}</span>
{% endif %}
<strong>{{ badge.name }}</strong>
<small>Freigeschaltet</small>
</div>
{% endif %}
{% endfor %}