Styling Übersicht Events

This commit is contained in:
Simona Oswald 2026-04-25 22:44:07 +02:00
parent e3f7233581
commit 3b7f41e33d
7 changed files with 40 additions and 68 deletions

View File

@ -262,7 +262,7 @@ textarea:focus {
}
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
color: var(--blaxk);
color: var(--black);
}
.option-card input {

View File

@ -107,7 +107,7 @@
transition: background-color 0.2s ease;
}
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
.meta-filter input[type="date"]:hover::-webkit-calendar-picker-indicator {
filter: brightness(0.8);
}
@ -265,28 +265,6 @@
cursor: not-allowed;
}
/* ---------------------------------------------------------
Overview Empty State
--------------------------------------------------------- */
.empty-state {
text-align: center;
padding: var(--space-32) var(--space-40);
border-radius: var(--radius-lg);
background: var(--butter-light);
}
.empty-state-kicker {
color: var(--olive);
font-size: 1rem;
font-weight: 400;
}
.empty-state-link {
display: inline-block;
margin-top: 20px;
text-decoration: none;
}
/* ---------------------------------------------------------
Detail Page

View File

@ -138,40 +138,6 @@
.profile-event-actions {
display: flex;
align-items: center;
gap: var();
}
.profile-empty {
margin: 0;
color: var(--black);
}
.profile-empty-state {
text-align: center;
padding: 2.4rem 1.3rem;
border: 2px solid var(--olive-light);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08);
}
.profile-empty-kicker {
margin: 0 0 0.5rem;
color: var(--olive);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: var(--ls-lg);
}
.profile-empty-state h3 {
margin: 0;
font-size: 1.5rem;
color: var(--brown);
}
.profile-empty-state p {
margin: 0.65rem auto 1rem;
max-width: 36rem;
}
.form-grid {

View File

@ -445,7 +445,7 @@ label {
background: transparent;
color: var(--olive-dark);
opacity: 0.6;
padding: var() 0 var(--space-6) var(--space-24);
padding: var(--space-6) 0 var(--space-6) var(--space-24);
cursor: not-allowed;
}
@ -584,6 +584,12 @@ label {
color: var(--butter-light);
}
.category-item.disabled {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
.category-items {
display: inline-flex;
@ -951,6 +957,28 @@ input:focus {
border: 2px solid var(--olive);
}
/* ---------------------------------------------------------
Overview Empty State
--------------------------------------------------------- */
.empty-state {
text-align: center;
padding: var(--space-32) var(--space-40);
border-radius: var(--radius-lg);
background: var(--butter-light);
}
.empty-state-kicker {
color: var(--olive);
font-size: 1rem;
font-weight: 400;
}
.empty-state-link {
display: inline-block;
margin-top: 20px;
text-decoration: none;
}
/* Footer */

View File

@ -81,9 +81,9 @@
<summary>Nach Allergenen filtern</summary>
<div class="filter-row margin-bottom-16">
<div class="category-group">
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
<button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
<button class="category-item" type="button" data-allergie="Glutenfrei">Glutenfrei</button>
<button class="category-item" type="button" data-allergie="Laktosefrei">Laktosefrei</button>
<button class="category-item" type="button" data-allergie="Ohne Nüsse">Ohne Nüsse</button>
</div>
</div>

View File

@ -586,7 +586,7 @@
if (snackbar) {
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
snackbar.classList.add('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
}
applyFilters();
};
@ -613,7 +613,7 @@
setTimeout(() => {
snackbar.classList.remove('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
}, 4000);
}, 3000);
}
applyFilters();
};

View File

@ -583,12 +583,12 @@
if (events.length === 0) {
const emptyElement = document.createElement('div');
emptyElement.className = 'profile-empty-state';
emptyElement.className = 'empty-state';
emptyElement.innerHTML = `
<p class="profile-empty-kicker">Keine Treffer</p>
<div class="empty-state-kicker">Keine Treffer</div>
<h3>${emptyStateConfig.title}</h3>
<p>${emptyStateConfig.text}</p>
<a class="button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
<a class="empty-state-link button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
`;
container.appendChild(emptyElement);
return;