feat: add categorized settings tabs (#30)
Six tabs (General, Meals, Budget, Shopping, Calendar, Account) replace the flat single-page layout. Active tab persists via sessionStorage. Calendar tab auto-activates on OAuth redirect. Tab bar is sticky. All labels translated in de/en/es/it/sv.
This commit is contained in:
@@ -42,6 +42,54 @@
|
||||
border: 1px solid var(--color-danger);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Tab-Navigation
|
||||
-------------------------------------------------------- */
|
||||
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--space-6);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-background);
|
||||
z-index: 10;
|
||||
padding-top: var(--space-1);
|
||||
}
|
||||
|
||||
.settings-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-tab-btn {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast), border-color var(--transition-fast);
|
||||
min-height: 44px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.settings-tab-btn:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.settings-tab-btn--active {
|
||||
color: var(--color-accent);
|
||||
border-bottom-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Sections
|
||||
-------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user