Styling Übersicht Events
This commit is contained in:
parent
e3f7233581
commit
3b7f41e33d
@ -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 {
|
||||
|
||||
@ -107,8 +107,8 @@
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||
filter: brightness(0.8);
|
||||
.meta-filter input[type="date"]:hover::-webkit-calendar-picker-indicator {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.meta-filter select {
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 */
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user