football2801
5bb8289a54
CI / test (push) Has been cancelled
The existing PWA layout was mobile-first only: BottomNav hides at ≥960px with no replacement, leaving desktop users with zero navigation and views that stretch to viewport width. Fixes both: - New TopNav.vue mirrors BottomNav (Home / Library / Settings) but renders as a top horizontal app bar at ≥960px only. Includes the wordmark + mark. - App.vue includes <TopNav v-if="!route.meta.hideNav" /> alongside BottomNav so upload-flow hideNav: true still hides both. - HomeView, LibraryView, SettingsView get desktop max-widths (820 / 1100 / 720 respectively) so content centers instead of stretching to 1440+. Same cream/terracotta theme tokens, no aesthetic change — just gives v1 proper desktop chrome. Prep for v2 opt-in landing next. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 lines
5.3 KiB
CSS
2 lines
5.3 KiB
CSS
.settings[data-v-12810af3]{padding:var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-6));max-width:480px;margin:0 auto}@media (width>=960px){.settings[data-v-12810af3]{max-width:720px;padding-top:var(--space-8);padding-bottom:var(--space-8)}}.settings__title[data-v-12810af3]{font-size:var(--text-xl);margin-bottom:var(--space-6);font-weight:700}.settings__section[data-v-12810af3]{margin-bottom:var(--space-6)}.settings__section-title[data-v-12810af3]{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);font-weight:700}.settings__row[data-v-12810af3]{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);font-size:var(--text-base);justify-content:space-between;align-items:center;display:flex}.settings__row-label[data-v-12810af3]{color:var(--color-text-muted)}.settings__row-value[data-v-12810af3]{font-weight:600}.settings__logout[data-v-12810af3]{min-height:var(--touch-min);padding:var(--space-3) 0;color:var(--color-destructive);font-weight:600;font-size:var(--text-base);align-items:center;text-decoration:none;display:flex}.settings__action-link[data-v-12810af3]{width:100%;min-height:var(--touch-min);padding:var(--space-3) 0;border:none;border-bottom:1px solid var(--color-border);color:var(--color-primary);font-weight:600;font-size:var(--text-base);cursor:pointer;text-align:left;background:0 0;align-items:center;font-family:inherit;display:flex}.settings__hint[data-v-12810af3]{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-3);line-height:1.4}.settings__install[data-v-12810af3]{width:100%;min-height:var(--touch-min);background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--radius-pill,9999px);font-size:var(--text-base);cursor:pointer;border:none;justify-content:center;align-items:center;font-weight:700;display:flex}.install-modal[data-v-12810af3]{padding:var(--space-4);z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.install-modal__card[data-v-12810af3]{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg,16px);padding:var(--space-5);width:100%;max-width:380px;position:relative;box-shadow:0 20px 60px #00000040}.install-modal__close[data-v-12810af3]{top:var(--space-2);right:var(--space-3);color:var(--color-text-muted);cursor:pointer;padding:var(--space-1) var(--space-2);background:0 0;border:none;font-size:1.75rem;line-height:1;position:absolute}.install-modal__title[data-v-12810af3]{font-size:var(--text-lg);margin-bottom:var(--space-3);padding-right:var(--space-5);font-weight:700}.install-modal__steps[data-v-12810af3]{margin:0 0 var(--space-3) var(--space-4);padding:0;line-height:1.5}.install-modal__steps li[data-v-12810af3]{margin-bottom:var(--space-2)}.install-modal__footer[data-v-12810af3]{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-3);border-top:1px solid var(--color-border);padding-top:var(--space-3);line-height:1.4}.pw-form[data-v-12810af3]{gap:var(--space-3);margin-top:var(--space-2);flex-direction:column;display:flex}.pw-form__field[data-v-12810af3]{flex-direction:column;gap:4px;display:flex}.pw-form__label[data-v-12810af3]{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600}.pw-form__input[data-v-12810af3]{min-height:var(--touch-min);padding:0 var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:16px}.pw-form__input[data-v-12810af3]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.pw-form__input[aria-invalid=true][data-v-12810af3]{border-color:var(--color-destructive,#c0392b)}.pw-form__hint[data-v-12810af3]{font-size:var(--text-xs);color:var(--color-text-muted)}.pw-form__error[data-v-12810af3]{font-size:var(--text-sm);color:var(--color-destructive,#c0392b)}.pw-form__success[data-v-12810af3]{font-size:var(--text-sm);color:var(--color-success,#2e7d32);font-weight:600}.theme-grid[data-v-12810af3]{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.theme-swatch[data-v-12810af3]{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--swatch-bg);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast);min-height:var(--touch-min);border:2px solid #0000;flex-direction:column;display:flex;position:relative}.theme-swatch--active[data-v-12810af3]{border-color:var(--swatch-primary)}.theme-swatch__preview[data-v-12810af3]{border-radius:var(--radius-sm);background:var(--swatch-bg);border:1px solid color-mix(in srgb, var(--swatch-text) 15%, transparent);flex-direction:column;justify-content:center;gap:4px;width:100%;height:36px;padding:0 6px;display:flex}.theme-swatch__bar[data-v-12810af3]{background:var(--swatch-primary);border-radius:3px;width:60%;height:6px;display:block}.theme-swatch__dot[data-v-12810af3]{background:var(--swatch-text);opacity:.4;border-radius:2px;width:80%;height:4px;display:block}.theme-swatch__label[data-v-12810af3]{font-size:var(--text-xs);color:var(--color-text);text-align:center;font-weight:600;line-height:1.2}.theme-swatch__check[data-v-12810af3]{top:var(--space-1);right:var(--space-2);font-size:var(--text-sm);color:var(--swatch-primary);font-weight:700;position:absolute}
|