football2801
d266770170
CI / test (push) Has been cancelled
The natural 5:3 aspect ratio renders landscape devices as a ~200px-tall strip on a phone — too small now that the carousel gives each slide the full viewport. Set min-height: 50dvh so landscape preview is at least half the screen tall, with object-fit: contain letterboxing the photo. Portrait frames (3:5) still drive their height from the natural aspect ratio, since that's already taller than the 50dvh floor. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 lines
8.7 KiB
CSS
2 lines
8.7 KiB
CSS
.frame-card[data-v-bdbefeb4]{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-bdbefeb4]{border-color:var(--color-border)}.frame-card--sync-fail[data-v-bdbefeb4]{border-color:#c49a20}.frame-card--offline[data-v-bdbefeb4]{border-color:#c0392b}.frame-card__settings-btn[data-v-bdbefeb4]{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-bdbefeb4]{font-size:var(--text-sm);align-items:center;gap:6px;font-weight:600;display:flex}.frame-card--ok .frame-card__status-line[data-v-bdbefeb4]{color:#1a7f4b}.frame-card--sync-fail .frame-card__status-line[data-v-bdbefeb4]{color:#8a6a00}.frame-card--offline .frame-card__status-line[data-v-bdbefeb4]{color:#c0392b}.frame-card__status-dot[data-v-bdbefeb4]{border-radius:50%;flex-shrink:0;width:8px;height:8px}.frame-card--ok .frame-card__status-dot[data-v-bdbefeb4]{background:#1a7f4b}.frame-card--sync-fail .frame-card__status-dot[data-v-bdbefeb4]{background:#c49a20}.frame-card--offline .frame-card__status-dot[data-v-bdbefeb4]{background:#c0392b}.frame-card__sync-line[data-v-bdbefeb4]{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-bdbefeb4]{opacity:.6}.frame-card--large .frame-card__preview[data-v-bdbefeb4]{background:var(--color-surface-2);justify-content:center;align-items:center;min-height:50dvh;display:flex}.frame-card--large .frame-card__img[data-v-bdbefeb4]{object-fit:contain;width:100%;height:100%}.frame-card--large .frame-card__empty-preview[data-v-bdbefeb4]{color:var(--color-text-muted);opacity:.5}.frame-card--large .frame-card__body[data-v-bdbefeb4]{padding:var(--space-4);justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.frame-card--large .frame-card__info[data-v-bdbefeb4]{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.frame-card--large .frame-card__name[data-v-bdbefeb4]{font-size:var(--text-md);font-weight:700}.frame-card--compact[data-v-bdbefeb4]{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);display:flex}.frame-card--compact .frame-card__preview[data-v-bdbefeb4]{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-bdbefeb4]{object-fit:cover;width:100%;height:100%}.frame-card--compact .frame-card__empty-preview[data-v-bdbefeb4]{color:var(--color-text-muted);opacity:.4}.frame-card--compact .frame-card__body[data-v-bdbefeb4]{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-bdbefeb4]{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.frame-card--compact .frame-card__name[data-v-bdbefeb4]{font-size:var(--text-base);font-weight:700}.frame-card--compact .frame-card__count[data-v-bdbefeb4]{font-size:var(--text-xs);color:var(--color-text-muted)}.frame-card__add-btn[data-v-bdbefeb4]{flex-shrink:0}.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-fa9460ba]{padding:var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-4));gap:var(--space-3);flex-direction:column;display:flex}.home-view__loading[data-v-fa9460ba]{color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-4) 0;text-align:center}.home-view__empty[data-v-fa9460ba]{padding-top:var(--space-6);justify-content:center;display:flex}.home-view__empty-card[data-v-fa9460ba]{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-fa9460ba]{color:var(--color-text-muted);opacity:.5}.home-view__empty-title[data-v-fa9460ba]{font-size:var(--text-md);font-weight:700}.home-view__empty-sub[data-v-fa9460ba]{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}.home-view__single[data-v-fa9460ba]{flex-direction:column;display:flex}.home-view__carousel[data-v-fa9460ba]{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--space-4));display:flex;overflow:auto hidden}.home-view__carousel[data-v-fa9460ba]::-webkit-scrollbar{display:none}.home-view__slide[data-v-fa9460ba]{box-sizing:border-box;padding:0 var(--space-4);scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%}.home-view__dots[data-v-fa9460ba]{justify-content:center;gap:var(--space-2);padding-top:var(--space-3);display:flex}.home-view__dot[data-v-fa9460ba]{background:var(--color-border);cursor:pointer;width:8px;height:8px;transition:background var(--duration-fast), transform var(--duration-fast);border:none;border-radius:50%;padding:0}.home-view__dot--active[data-v-fa9460ba]{background:var(--color-primary);transform:scale(1.25)}.home-view__sheet-title[data-v-fa9460ba]{font-size:var(--text-md);margin-bottom:var(--space-4);font-weight:700}.home-view__sheet-field[data-v-fa9460ba]{margin-bottom:var(--space-4)}.home-view__sheet-label[data-v-fa9460ba]{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);font-weight:600;display:block}.home-view__interval-grid[data-v-fa9460ba]{gap:var(--space-2);flex-wrap:wrap;display:flex}.home-view__tz-select[data-v-fa9460ba]{width:100%;margin-top:var(--space-3);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__tz-select[data-v-fa9460ba]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.home-view__interval-chip[data-v-fa9460ba]{border:1.5px solid var(--color-border);font-size:var(--text-sm);cursor:pointer;color:var(--color-text-muted);transition:all var(--duration-fast);min-height:var(--touch-min);background:0 0;border-radius:999px;padding:6px 14px;font-weight:600}.home-view__interval-chip--on[data-v-fa9460ba]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg)}.home-view__sheet-save[data-v-fa9460ba]{width:100%;margin-top:var(--space-2)}
|