Ulas Kalayci
c4cb52d042
Extracts the tab-bar UI into a reusable renderSubTabs() utility (public/utils/sub-tabs.js + public/styles/sub-tabs.css) so all sub-module navigation shares one implementation and visual style. - Settings: replaces template-literal <nav class="settings-tabs"> with renderSubTabs(); tabs now show icon + label (pill-style), group separators via separatorBefore, panel switching via onChange - Kitchen: renderKitchenTabsBar() becomes a thin wrapper around renderSubTabs(); kitchen-tabs.css keeps only layout adjustment rules - CSS: kitchen-tab* rules removed from kitchen-tabs.css, settings-tab-btn* rules removed from settings.css; both now inherit from sub-tabs.css - tokens.css: adds --sub-tabs-height (52px default; kitchen overrides to --kitchen-tabs-height: 56px) - test-browser-loader.mjs: resolves browser-absolute /utils/*.js imports to public/ directory for Node test compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
871 B
CSS
32 lines
871 B
CSS
/* Modul: Kitchen Tabs Bar
|
|
* Layout-Fixes für Mahlzeiten/Rezepte/Einkauf bei aktiver Sub-Tab-Leiste.
|
|
* Tab-Styles kommen aus sub-tabs.css; hier nur Kitchen-spezifische Overrides.
|
|
*/
|
|
|
|
/* Höhe auf --kitchen-tabs-height überschreiben (56px statt Standard 52px) */
|
|
.kitchen-tabs-bar {
|
|
--sub-tabs-height: var(--kitchen-tabs-height);
|
|
}
|
|
|
|
/* Mahlzeiten: sticky day-header unterhalb der Tab-Leiste */
|
|
.has-kitchen-tabs .day-header {
|
|
top: var(--kitchen-tabs-height);
|
|
}
|
|
|
|
/* Einkauf: Viewport-Höhe um Tab-Leiste reduzieren (Mobile) */
|
|
.has-kitchen-tabs .shopping-page {
|
|
height: calc(
|
|
100dvh
|
|
- var(--nav-bottom-height)
|
|
- var(--safe-area-inset-bottom)
|
|
- var(--kitchen-tabs-height)
|
|
);
|
|
}
|
|
|
|
/* Einkauf: Viewport-Höhe (Desktop) */
|
|
@media (min-width: 1024px) {
|
|
.has-kitchen-tabs .shopping-page {
|
|
height: calc(100dvh - var(--kitchen-tabs-height));
|
|
}
|
|
}
|