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
15 KiB
CSS
2 lines
15 KiB
CSS
.frame-card[data-v-576f3f64]{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast);position:relative;overflow:hidden}.frame-card--ok[data-v-576f3f64]{border-color:var(--color-border)}.frame-card--sync-fail[data-v-576f3f64]{border-color:#c49a20}.frame-card--offline[data-v-576f3f64]{border-color:#c0392b}.frame-card__settings-btn[data-v-576f3f64]{top:var(--space-2);right:var(--space-2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:36px;height:36px;color:var(--color-text);cursor:pointer;z-index:1;background:#ffffffd9;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 1px 4px #00000026}.frame-card__status-line[data-v-576f3f64]{font-size:var(--text-sm);align-items:center;gap:6px;font-weight:600;display:flex}.frame-card--ok .frame-card__status-line[data-v-576f3f64]{color:#1a7f4b}.frame-card--sync-fail .frame-card__status-line[data-v-576f3f64]{color:#8a6a00}.frame-card--offline .frame-card__status-line[data-v-576f3f64]{color:#c0392b}.frame-card__status-dot[data-v-576f3f64]{border-radius:50%;flex-shrink:0;width:8px;height:8px}.frame-card--ok .frame-card__status-dot[data-v-576f3f64]{background:#1a7f4b}.frame-card--sync-fail .frame-card__status-dot[data-v-576f3f64]{background:#c49a20}.frame-card--offline .frame-card__status-dot[data-v-576f3f64]{background:#c0392b}.frame-card__sync-line[data-v-576f3f64]{font-size:var(--text-xs);color:var(--color-text-muted);flex-wrap:wrap;gap:0 6px;margin-top:2px;display:flex}.frame-card__sync-sep[data-v-576f3f64]{opacity:.6}.frame-card--large[data-v-576f3f64]{flex-direction:column;height:100%;display:flex}.frame-card--large .frame-card__preview[data-v-576f3f64]{background:var(--color-surface-2);flex:none;justify-content:center;align-items:center;width:100%;min-width:0;max-height:40dvh;display:flex;overflow:hidden}.frame-card--large .frame-card__img[data-v-576f3f64]{object-fit:contain;width:100%;height:100%;display:block}.frame-card--large .frame-card__empty-preview[data-v-576f3f64]{color:var(--color-text-muted);opacity:.5;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.frame-card--large .frame-card__body[data-v-576f3f64]{min-height:0;padding:var(--space-4);gap:var(--space-3);flex-direction:column;flex:1;display:flex}.frame-card--large .frame-card__info[data-v-576f3f64]{flex-direction:column;gap:2px;min-width:0;display:flex}.frame-card--large .frame-card__name[data-v-576f3f64]{font-size:var(--text-md);font-weight:700}.frame-card--large .frame-card__add-btn[data-v-576f3f64]{width:100%;margin-top:auto}.frame-card--compact[data-v-576f3f64]{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);display:flex}.frame-card--compact .frame-card__preview[data-v-576f3f64]{border-radius:var(--radius-sm);background:var(--color-surface-2);flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex;overflow:hidden}.frame-card--compact .frame-card__img[data-v-576f3f64]{object-fit:cover;width:100%;height:100%}.frame-card--compact .frame-card__empty-preview[data-v-576f3f64]{color:var(--color-text-muted);opacity:.4}.frame-card--compact .frame-card__body[data-v-576f3f64]{justify-content:space-between;align-items:center;gap:var(--space-2);flex:1;min-width:0;display:flex}.frame-card--compact .frame-card__info[data-v-576f3f64]{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.frame-card--compact .frame-card__name[data-v-576f3f64]{font-size:var(--text-base);font-weight:700}.frame-card--compact .frame-card__count[data-v-576f3f64]{font-size:var(--text-xs);color:var(--color-text-muted)}.frame-card__add-btn[data-v-576f3f64]{flex-shrink:0}@media (orientation:landscape) and (height<=600px){.frame-card--large .frame-card__preview[data-v-576f3f64]{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.frame-card--large .frame-card__img[data-v-576f3f64]{object-fit:contain;width:100%;height:100%}.frame-card--large .frame-card__body[data-v-576f3f64]{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);flex-direction:row;flex:none}.frame-card--large .frame-card__info[data-v-576f3f64]{flex:1;min-width:0}.frame-card--large .frame-card__sync-line[data-v-576f3f64]{display:none}.frame-card--large .frame-card__add-btn[data-v-576f3f64]{flex-shrink:0;width:auto;margin-top:0}.frame-card--large .frame-card__settings-btn[data-v-576f3f64]{width:32px;height:32px;top:var(--space-1);right:var(--space-1)}}.input-wrap[data-v-c8235ab2]{width:100%;position:relative}.input-wrap__field[data-v-c8235ab2]{width:100%;min-height:56px;padding:22px var(--space-4) 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--font-family);font-size:var(--text-base);transition:border-color var(--duration-fast)}.input-wrap__field[data-v-c8235ab2]::placeholder{color:#0000}.input-wrap__field[data-v-c8235ab2]:focus{border-color:var(--color-primary);outline:none}.input-wrap__field:not(:placeholder-shown)~.input-wrap__label[data-v-c8235ab2],.input-wrap__field:focus~.input-wrap__label[data-v-c8235ab2]{font-size:var(--text-xs);color:var(--color-primary);top:8px;transform:none}.input-wrap__label[data-v-c8235ab2]{left:var(--space-4);color:var(--color-text-muted);font-size:var(--text-base);pointer-events:none;transition:top var(--duration-fast), font-size var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);position:absolute;top:50%;transform:translateY(-50%)}.input-wrap--error .input-wrap__field[data-v-c8235ab2]{border-color:var(--color-destructive)}.input-wrap__error[data-v-c8235ab2]{margin-top:var(--space-1);padding-left:var(--space-4);font-size:var(--text-sm);color:var(--color-destructive)}.orientation-picker[data-v-679dae08]{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.orientation-opt[data-v-679dae08]{align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast);min-height:var(--touch-min);flex-direction:column;display:flex}.orientation-opt--active[data-v-679dae08]{border-color:var(--color-primary)}.orientation-opt__diagram[data-v-679dae08]{width:48px;height:48px;color:var(--color-text-muted)}.orientation-opt__label[data-v-679dae08]{font-size:var(--text-xs);color:var(--color-text);font-weight:700}.orientation-opt__sub[data-v-679dae08]{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;line-height:1.2}.home-view[data-v-7458107d]{padding:var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-4));gap:var(--space-3);flex-direction:column;flex:1;display:flex}@media (width>=960px){.home-view[data-v-7458107d]{width:100%;max-width:820px;padding-bottom:var(--space-8);margin:0 auto}}.home-view__loading[data-v-7458107d]{color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-4) 0;text-align:center}.home-view__empty[data-v-7458107d]{padding-top:var(--space-6);justify-content:center;display:flex}.home-view__empty-card[data-v-7458107d]{background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-6) var(--space-5);text-align:center;align-items:center;gap:var(--space-3);flex-direction:column;width:100%;max-width:320px;display:flex}.home-view__empty-icon[data-v-7458107d]{color:var(--color-text-muted);opacity:.5}.home-view__empty-title[data-v-7458107d]{font-size:var(--text-md);font-weight:700}.home-view__empty-sub[data-v-7458107d]{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}.home-view__single[data-v-7458107d]{flex-direction:column;flex:1;display:flex}.home-view__stack[data-v-7458107d]{gap:var(--space-3);scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.home-view__stack[data-v-7458107d]::-webkit-scrollbar{display:none}.home-view__slide[data-v-7458107d]{box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;flex-direction:column;flex:none;min-height:100%;display:flex}@media (orientation:landscape) and (height<=600px){.home-view__stack[data-v-7458107d]{scroll-snap-type:x mandatory;gap:var(--space-3);margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4);flex-direction:row;overflow:auto hidden}.home-view__slide[data-v-7458107d]{scroll-snap-align:center;flex:0 0 min(320px,70vw);height:100%;min-height:0}}.home-view__sheet-title[data-v-7458107d]{font-size:var(--text-md);margin-bottom:var(--space-4);font-weight:700}.home-view__sheet-field[data-v-7458107d]{margin-bottom:var(--space-4)}.home-view__sheet-label[data-v-7458107d]{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);font-weight:600;display:block}.home-view__mode-select[data-v-7458107d],.home-view__tz-select[data-v-7458107d]{width:100%;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-size:var(--text-sm);cursor:pointer;appearance:auto;font-family:inherit}.home-view__mode-select[data-v-7458107d]:focus,.home-view__tz-select[data-v-7458107d]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.home-view__tz-select[data-v-7458107d],.home-view__times-mode[data-v-7458107d],.home-view__interval-mode[data-v-7458107d]{margin-top:var(--space-3)}.home-view__times-list[data-v-7458107d]{gap:var(--space-2);flex-direction:column;display:flex}.home-view__times-empty[data-v-7458107d]{font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-2) 0;font-style:italic}.home-view__time-row[data-v-7458107d]{align-items:center;gap:var(--space-1);display:flex}.home-view__time-part[data-v-7458107d]{min-height:var(--touch-min);padding:0 var(--space-2);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;appearance:auto;flex:1 1 0;min-width:0;font-family:inherit}.home-view__time-part--ampm[data-v-7458107d]{flex:none;min-width:64px}.home-view__time-part[data-v-7458107d]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.home-view__time-sep[data-v-7458107d]{color:var(--color-text-muted);padding:0 2px;font-weight:700}.home-view__time-remove[data-v-7458107d]{width:var(--touch-min);height:var(--touch-min);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast);background:0 0;flex:none;justify-content:center;align-items:center;display:inline-flex}.home-view__time-remove[data-v-7458107d]:hover,.home-view__time-remove[data-v-7458107d]:focus-visible{border-color:var(--color-danger,#c0392b);color:var(--color-danger,#c0392b);outline:none}.home-view__time-add[data-v-7458107d]{margin-top:var(--space-3);width:100%;min-height:var(--touch-min);border:1.5px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast);background:0 0;font-weight:600}.home-view__time-add[data-v-7458107d]:hover,.home-view__time-add[data-v-7458107d]:focus-visible{border-color:var(--color-primary);color:var(--color-primary);outline:none}.home-view__interval-input-row[data-v-7458107d]{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.home-view__interval-input[data-v-7458107d]{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);text-align:center;flex:0 0 96px;font-family:inherit;font-size:16px}.home-view__interval-input[data-v-7458107d]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.home-view__next-update[data-v-7458107d]{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text);font-weight:600}.home-view__rotation-checkbox[data-v-7458107d]{margin-top:var(--space-3);align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer;min-height:var(--touch-min);display:flex}.home-view__rotation-checkbox input[type=checkbox][data-v-7458107d]{cursor:pointer;width:22px;height:22px;accent-color:var(--color-primary)}.home-view__propagation-note[data-v-7458107d]{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic;line-height:1.4}.home-view__sheet-save[data-v-7458107d]{width:100%;margin-top:var(--space-2)}.home-view__remove[data-v-7458107d]{width:100%;margin-top:var(--space-5);padding:var(--space-2) var(--space-3);min-height:var(--touch-min);border-radius:var(--radius-md);color:var(--color-danger,#c0392b);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:1.5px solid #0000;font-weight:600}.home-view__remove[data-v-7458107d]:hover,.home-view__remove[data-v-7458107d]:focus-visible{border-color:var(--color-danger,#c0392b);outline:none}.home-view__remove[data-v-7458107d]:disabled{opacity:.6;cursor:not-allowed}.home-view__remove-modal[data-v-7458107d]{z-index:1000;padding:var(--space-4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#140e088c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.home-view__remove-modal-card[data-v-7458107d]{width:100%;max-width:360px;padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:0 10px 30px #00000040}.home-view__remove-modal-enter-active[data-v-7458107d],.home-view__remove-modal-leave-active[data-v-7458107d]{transition:opacity var(--duration-fast) ease}.home-view__remove-modal-enter-active .home-view__remove-modal-card[data-v-7458107d],.home-view__remove-modal-leave-active .home-view__remove-modal-card[data-v-7458107d]{transition:transform var(--duration-fast) ease}.home-view__remove-modal-enter-from[data-v-7458107d],.home-view__remove-modal-leave-to[data-v-7458107d]{opacity:0}.home-view__remove-modal-enter-from .home-view__remove-modal-card[data-v-7458107d],.home-view__remove-modal-leave-to .home-view__remove-modal-card[data-v-7458107d]{transform:scale(.96)}.home-view__remove-confirm-title[data-v-7458107d]{font-size:var(--text-md);color:var(--color-danger,#c0392b);margin-bottom:var(--space-2);font-weight:700}.home-view__remove-confirm-body[data-v-7458107d]{font-size:var(--text-sm);color:var(--color-text);margin-bottom:var(--space-2);line-height:1.5}.home-view__remove-confirm-aside[data-v-7458107d]{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border);line-height:1.5}.home-view__remove-confirm-actions[data-v-7458107d]{gap:var(--space-2);display:flex}.home-view__remove-cancel[data-v-7458107d],.home-view__remove-confirm-btn[data-v-7458107d]{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-size:var(--text-sm);cursor:pointer;flex:1 1 0;font-weight:600}.home-view__remove-cancel[data-v-7458107d]:disabled,.home-view__remove-confirm-btn[data-v-7458107d]:disabled{opacity:.6;cursor:not-allowed}.home-view__remove-confirm-btn[data-v-7458107d]{background:var(--color-danger,#c0392b);border-color:var(--color-danger,#c0392b);color:#fff}
|