Files
pictureFrame-webApp/public/build/assets/BaseBottomSheet-9_gNUOjo.css
T
football2801 78ff21fb98
CI / test (push) Has been cancelled
fix(home): shrink frame card, three-state status, draggable sheet, label overlap
- HomeView clears the bottom nav so + Add Photo isn't covered.
- Cap large frame-card preview to min(240px, 30dvh) so portrait frames
  no longer dominate the screen at full mobile width.
- Three-state device status — green/Online (recent sync), yellow/Sync
  issue (one window missed), red/Offline (two+ windows missed). Window
  is rotationIntervalMinutes for interval-mode devices, 24h for daily
  wakeHour-mode devices.
- Show last-sync ("synced 2h ago") and next-expected-sync line on the
  large card. wakeHour devices show local-hour ("next sync ~4 AM
  tomorrow") in the device's configured timezone.
- BaseBottomSheet drag-to-dismiss on the handle. Touch and pointer
  events; releases past 80px close the sheet. Snaps back below.
- BaseInput floating label rewrite — taller field, label re-anchors
  to top: 8px when filled/focused so it sits cleanly above the value
  instead of overlapping it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-06 18:23:35 -04:00

2 lines
2.7 KiB
CSS

.btn[data-v-7d3f1e61]{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--touch-min);padding:0 var(--space-5);border-radius:var(--radius-full);font-family:var(--font-family);font-size:var(--text-base);cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);white-space:nowrap;border:none;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.btn[data-v-7d3f1e61]:disabled{opacity:.4;cursor:not-allowed}.btn[data-v-7d3f1e61]:not(:disabled):active{transform:scale(.96)}.btn--primary[data-v-7d3f1e61]{background:var(--color-primary);color:var(--color-primary-fg)}.btn--secondary[data-v-7d3f1e61]{background:var(--color-secondary);color:var(--color-secondary-fg);border:1px solid var(--color-border)}.btn--ghost[data-v-7d3f1e61]{color:var(--color-text);border:1px solid var(--color-border);background:0 0}.btn--destructive[data-v-7d3f1e61]{background:var(--color-destructive);color:var(--color-destructive-fg)}.btn--icon-pill[data-v-7d3f1e61]{width:var(--touch-min);border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text);padding:0}.btn__spinner[data-v-7d3f1e61]{border:2px solid;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin-7d3f1e61}@keyframes spin-7d3f1e61{to{transform:rotate(360deg)}}.sheet-overlay[data-v-967683c3]{z-index:100;background:#0006;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet[data-v-967683c3]{background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;padding:0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));max-height:90dvh;transition:transform .2s var(--ease-out);outline:none;overflow-y:auto}.sheet--dragging[data-v-967683c3]{transition:none}.sheet__handle-target[data-v-967683c3]{padding:var(--space-3) 0 var(--space-4);margin:0 calc(-1 * var(--space-4));cursor:grab;touch-action:none;justify-content:center;display:flex}.sheet__handle-target[data-v-967683c3]:active{cursor:grabbing}.sheet__handle[data-v-967683c3]{border-radius:var(--radius-full);background:var(--color-border);width:36px;height:4px}.sheet-enter-active .sheet-overlay[data-v-967683c3]{transition:background var(--duration-base) var(--ease-out)}.sheet-enter-active .sheet[data-v-967683c3]{transition:transform .25s var(--ease-out)}.sheet-leave-active .sheet[data-v-967683c3]{transition:transform .2s ease-in}.sheet-leave-active[data-v-967683c3]{transition:background .2s ease-in}.sheet-enter-from[data-v-967683c3]{background:0 0}.sheet-enter-from .sheet[data-v-967683c3]{transform:translateY(100%)}.sheet-leave-to[data-v-967683c3]{background:0 0}.sheet-leave-to .sheet[data-v-967683c3]{transform:translateY(100%)}