Ulas Kalayci
82a1f2c239
Add support for customizable birthday reminders with preset offsets (none, at time, 15min, 1h, 1d, 2d, 1w, 2w) and custom intervals. Users can now configure when to be reminded of upcoming birthdays. - Add migration 31: reminder_offset, reminder_custom_amount, reminder_custom_unit to birthdays table - Update POST/PUT /birthdays routes to accept reminder fields - Add getOffsetMinutes() helper in birthday service - Update birthdayReminderAt() to calculate reminder time with offset - Modify syncBirthdayReminder() to handle empty offset (no reminder) - Add renderBirthdayReminderSection() UI component - Move reminder-custom CSS from calendar.css to reminders.css - Add protocol check to service worker (non-http protocol guard) All translations already present in de.json. Tests: 109 passing, 0 failing. Co-Authored-By: Rafael Foster <rafaelfoster@users.noreply.github.com> Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
103 lines
2.1 KiB
CSS
103 lines
2.1 KiB
CSS
/* --------------------------------------------------------
|
|
Modul: Erinnerungen (Reminders)
|
|
Zweck: Bell-Badge in der Navigation, Reminder-Toast-Styling
|
|
-------------------------------------------------------- */
|
|
|
|
/* Bell-Badge: Rote Zahl über dem Bell-Icon */
|
|
.nav-item--reminder {
|
|
position: relative;
|
|
}
|
|
|
|
.reminder-bell-badge {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
border-radius: var(--radius-full, 9999px);
|
|
background: var(--color-priority-urgent);
|
|
color: var(--color-text-on-accent);
|
|
font-size: var(--text-2xs);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: 16px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Reminder-Toast: Bell-Icon + Textblock */
|
|
.toast--reminder {
|
|
gap: var(--space-2, 8px);
|
|
cursor: pointer;
|
|
padding-right: var(--space-2, 8px);
|
|
}
|
|
|
|
.toast__reminder-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
color: var(--module-reminders);
|
|
}
|
|
|
|
.toast__reminder-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toast__reminder-text strong {
|
|
font-size: var(--text-xs, 0.75rem);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.toast__reminder-text span {
|
|
font-size: var(--text-sm, 0.875rem);
|
|
font-weight: var(--font-weight-medium);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Reminder-Abschnitt in Modals */
|
|
.reminder-section {
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: var(--space-4, 16px);
|
|
margin-top: var(--space-4, 16px);
|
|
}
|
|
|
|
.reminder-section__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2, 8px);
|
|
margin-bottom: var(--space-3, 12px);
|
|
}
|
|
|
|
.reminder-section__title {
|
|
font-size: var(--text-sm, 0.875rem);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.reminder-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3, 12px);
|
|
}
|
|
|
|
.reminder-fields .modal-grid {
|
|
align-items: end;
|
|
}
|
|
|
|
.reminder-custom {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.reminder-custom[hidden] {
|
|
display: none !important;
|
|
}
|