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
9.5 KiB
CSS
2 lines
9.5 KiB
CSS
.approve-card[data-v-6d3dd8b4]{gap:var(--space-3);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex}.approve-card__thumb[data-v-6d3dd8b4]{object-fit:cover;border-radius:var(--radius-sm);background:var(--color-border);flex-shrink:0;width:80px;height:80px}.approve-card__body[data-v-6d3dd8b4]{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.approve-card__from[data-v-6d3dd8b4]{font-size:var(--text-sm)}.approve-card__date[data-v-6d3dd8b4]{font-size:var(--text-xs);color:var(--color-text-muted)}.approve-card__badge[data-v-6d3dd8b4]{font-size:var(--text-xs);text-transform:capitalize;border-radius:999px;padding:2px 8px;font-weight:600;display:inline-block}.approve-card__badge--approved[data-v-6d3dd8b4]{color:#1a7f4b;background:#d4edda}.approve-card__badge--declined[data-v-6d3dd8b4]{color:#d93025;background:#fde8e8}.approve-card__actions[data-v-6d3dd8b4]{gap:var(--space-2);flex-wrap:wrap;margin-top:auto;display:flex}.manage__title[data-v-8355addd]{font-size:var(--text-md);margin:0 0 var(--space-2);font-weight:700}.manage__sub[data-v-8355addd]{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-4);line-height:1.4}.manage__empty[data-v-8355addd]{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-6) 0}.manage__list[data-v-8355addd]{margin-bottom:var(--space-5);flex-direction:column;gap:2px;display:flex}.manage__row[data-v-8355addd]{align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);min-height:56px;display:flex}.manage__row[data-v-8355addd]:last-child{border-bottom:0}.manage__device[data-v-8355addd]{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.manage__device-name[data-v-8355addd]{font-size:var(--text-base);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.manage__device-meta[data-v-8355addd]{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:capitalize}.manage__lock[data-v-8355addd]{border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-muted);transition:background var(--duration-fast,.15s), color var(--duration-fast,.15s);background:0 0;align-items:center;gap:4px;padding:4px 10px;font-weight:600;display:inline-flex}.manage__lock[data-v-8355addd]:disabled{opacity:.4;cursor:not-allowed}.manage__lock--on[data-v-8355addd]{color:#fff;background:#c49a20;border-color:#c49a20}.manage__toggle-wrap[data-v-8355addd]{cursor:pointer;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;display:flex}.manage__toggle-label[data-v-8355addd]{font-size:var(--text-xs);color:var(--color-text-muted);-webkit-user-select:none;user-select:none;font-weight:600}.manage__toggle[data-v-8355addd]{background:var(--color-border);border-radius:var(--radius-full);width:48px;height:28px;transition:background var(--duration-fast,.15s);border:0;flex-shrink:0;position:relative}.manage__toggle[data-v-8355addd]:after{content:"";width:22px;height:22px;transition:left var(--duration-fast,.15s);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.manage__toggle--on[data-v-8355addd]{background:var(--color-primary)}.manage__toggle--on[data-v-8355addd]:after{left:23px}.manage__done[data-v-8355addd]{width:100%}.share-sheet__title[data-v-24296e7b]{font-size:var(--text-md);margin-bottom:var(--space-1);font-weight:700}.share-sheet__sub[data-v-24296e7b]{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}.share-sheet__field[data-v-24296e7b]{margin-bottom:var(--space-3)}.share-sheet__input[data-v-24296e7b]{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);font-family:inherit}.share-sheet__input[data-v-24296e7b]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.share-sheet__error[data-v-24296e7b]{font-size:var(--text-sm);color:var(--color-danger,#d93025);margin-bottom:var(--space-3)}.share-sheet__success[data-v-24296e7b]{font-size:var(--text-sm);color:var(--color-success,#1a7f4b);margin-bottom:var(--space-3)}.share-sheet__btn[data-v-24296e7b]{width:100%}.library[data-v-dd1ac7ac]{padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}@media (width>=960px){.library[data-v-dd1ac7ac]{width:100%;max-width:1100px;padding-bottom:var(--space-8);margin:0 auto}}.library__header[data-v-dd1ac7ac]{padding:var(--space-4) var(--space-4) var(--space-3)}@media (width>=960px){.library__header[data-v-dd1ac7ac]{align-items:center;gap:var(--space-4);display:flex}}.library__add-btn[data-v-dd1ac7ac]{width:100%}@media (width>=960px){.library__add-btn[data-v-dd1ac7ac]{width:auto}}.library__tabs[data-v-dd1ac7ac]{border-bottom:1px solid var(--color-border);top:env(safe-area-inset-top);background:var(--color-bg);z-index:5;display:flex;position:sticky}.library__tab[data-v-dd1ac7ac]{padding:var(--space-3) 0;font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;font-weight:600}.library__tab--active[data-v-dd1ac7ac]{color:var(--color-primary);border-bottom-color:var(--color-primary)}.library__loading[data-v-dd1ac7ac]{color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-4);text-align:center}.library__subtabs[data-v-dd1ac7ac]{border-bottom:1px solid var(--color-border);background:var(--color-bg);display:flex}.library__subtab[data-v-dd1ac7ac]{padding:var(--space-2) 0;font-size:var(--text-xs);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;font-weight:600}.library__subtab--active[data-v-dd1ac7ac]{color:var(--color-primary);border-bottom-color:var(--color-primary)}.library__shared-list[data-v-dd1ac7ac]{gap:var(--space-3);padding:var(--space-4);flex-direction:column;display:flex}.library__pagination[data-v-dd1ac7ac]{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4);display:flex}.library__page-btn[data-v-dd1ac7ac]{padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;background:0 0;font-weight:600}.library__page-btn[data-v-dd1ac7ac]:disabled{opacity:.4;cursor:default}.library__page-info[data-v-dd1ac7ac]{font-size:var(--text-sm);color:var(--color-text-muted)}.library__empty[data-v-dd1ac7ac],.library__shared-empty[data-v-dd1ac7ac]{align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);color:var(--color-text-muted);text-align:center;flex-direction:column;display:flex}.library__empty-title[data-v-dd1ac7ac]{font-size:var(--text-md);color:var(--color-text);font-weight:700}.library__empty-sub[data-v-dd1ac7ac]{font-size:var(--text-sm);max-width:280px;line-height:1.5}.library__grid[data-v-dd1ac7ac]{gap:var(--space-3);padding:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.library__item[data-v-dd1ac7ac]{gap:var(--space-2);flex-direction:column;display:flex}.library__thumb[data-v-dd1ac7ac]{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--color-surface-2);position:relative;overflow:hidden}.library__img[data-v-dd1ac7ac]{object-fit:contain;width:100%;height:100%;display:block}.library__thumb-actions[data-v-dd1ac7ac]{top:var(--space-2);right:var(--space-2);gap:4px;display:flex;position:absolute}.library__action-btn[data-v-dd1ac7ac]{cursor:pointer;color:#fff;width:28px;height:28px;transition:background var(--duration-fast);background:#0000008c;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.library__action-btn[data-v-dd1ac7ac]:disabled{opacity:.5;cursor:default}.library__action-btn[data-v-dd1ac7ac]:hover:not(:disabled){background:#000000bf}.library__action-btn--danger[data-v-dd1ac7ac]:hover:not(:disabled){background:#b40000cc}.library__action-btn--warn[data-v-dd1ac7ac]{background:var(--color-warning,#f59e0b)}.library__action-btn--warn[data-v-dd1ac7ac]:hover:not(:disabled){background:color-mix(in srgb, var(--color-warning,#f59e0b) 85%, black)}.library__thumb-lock[data-v-dd1ac7ac]{left:var(--space-2);bottom:var(--space-2);color:#fff;pointer-events:none;background:#c49a20;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;display:flex;position:absolute;box-shadow:0 1px 3px #0000004d}.library__manage[data-v-dd1ac7ac]{width:100%;padding:var(--space-2) var(--space-1);cursor:pointer;text-align:left;border-radius:var(--radius-sm);transition:background var(--duration-fast);background:0 0;border:0;justify-content:space-between;align-items:center;display:flex}.library__manage[data-v-dd1ac7ac]:hover{background:var(--color-surface-2)}.library__manage-summary[data-v-dd1ac7ac]{font-size:var(--text-xs);color:var(--color-text-muted)}.library__manage-summary b[data-v-dd1ac7ac]{color:var(--color-text);font-weight:700}.library__manage-lock[data-v-dd1ac7ac]{color:#6b5210;font-weight:600}.library__manage-action[data-v-dd1ac7ac]{font-size:var(--text-xs);color:var(--color-primary);white-space:nowrap;font-weight:600}.library__sheet-title[data-v-dd1ac7ac]{font-size:var(--text-md);margin-bottom:var(--space-2);font-weight:700}.library__sheet-sub[data-v-dd1ac7ac]{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-5)}.library__sheet-actions[data-v-dd1ac7ac]{gap:var(--space-3);display:flex}.library__sheet-actions[data-v-dd1ac7ac]>*{flex:1}
|