Something went wrong. Try again.
slices images for the bsky.app photo carousel (min 5 images)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343/* slicer — minimal functional CSS (family convention: no glass, gradients, shadows) */
* { box-sizing: border-box;}
html { font-size: 18px; /* 18px base, family a11y convention */}
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #ffffff; color: #1a1a1a; line-height: 1.5;}
@media (prefers-color-scheme: dark) { body { background: #111111; color: #eeeeee; }}
button { font-size: 1rem; min-height: 48px; /* 48px touch targets */ padding: 0.5rem 1rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;}
button:hover { background: rgba(128, 128, 128, 0.15);}
input { font-size: 1rem; min-height: 48px; padding: 0.5rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; width: 100%; margin-bottom: 1rem;}
.app-container { max-width: 960px; margin: 0 auto; padding: 1rem;}
.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;}
.account { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem;}
.panel { margin-top: 2rem; border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 4px; padding: 1.5rem;}
.login-page { display: flex; justify-content: center; padding-top: 10vh;}
.login-content { width: 100%; max-width: 420px;}
/* Crop UI */
.crop-ui { margin-top: 1.5rem;}
.crop-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem;}
.crop-controls button.active { background: rgba(128, 128, 128, 0.35);}
.crop-controls label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem;}
.crop-controls select { font-size: 1rem; min-height: 48px; padding: 0.4rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit;}
.crop-canvas-container { position: relative; width: 100%; max-width: 860px;}
.crop-canvas-container canvas { width: 100%; height: auto; max-height: 70vh; display: block; border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 4px; touch-action: none; /* pointer events own the gestures */ cursor: grab;}
.crop-canvas-container canvas:active { cursor: grabbing;}
.crop-hint { font-size: 0.85rem; color: rgba(128, 128, 128, 0.9); margin-top: 0.5rem;}
.crop-error { color: #cc2222; font-weight: 600;}
.crop-warning { color: #b06000;}
/* Carousel simulator (plan Step 5) */
.carousel { margin-top: 1.5rem;}
.carousel-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;}
.carousel-toolbar [role="group"] { display: inline-flex; gap: 0.5rem;}
.carousel-hint { font-size: 0.85rem; color: rgba(128, 128, 128, 0.9); margin: 0;}
.carousel-frame { position: relative; overflow: hidden; width: 100%; max-width: 480px; aspect-ratio: 4 / 5; /* fixed frame: never resizes between slides */ border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 4px; touch-action: pan-y; /* horizontal swipes are ours; vertical scroll passes through */ cursor: grab; outline-offset: 2px;}
.carousel-frame:active { cursor: grabbing;}
.carousel-track { display: flex; height: 100%; will-change: transform;}
.carousel-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;}
.carousel-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.6); color: #ffffff; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.85rem; z-index: 2; pointer-events: none;}
.stitch-strip { display: flex; overflow-x: auto; border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 4px; background: #222222;}
.stitch-strip img { flex: 0 0 auto; height: 40vh; display: block;}
/* Alt text panel (plan Step 6) */
.alt-panel { max-width: 860px;}
.alt-note { font-size: 0.9rem; color: rgba(128, 128, 128, 0.9);}
.alt-field { display: block; margin-bottom: 1rem; font-size: 0.9rem;}
.alt-field input { margin-top: 0.25rem;}
.alt-overrides { margin-bottom: 1rem; font-size: 0.9rem;}
.alt-overrides summary { cursor: pointer; margin-bottom: 0.5rem; min-height: 48px; display: flex; align-items: center;}
.alt-preview p { font-size: 0.85rem; margin: 0.25rem 0; word-break: break-word;}
.publish-button { margin-top: 1rem; background: #1a1a1a; color: #ffffff;}
@media (prefers-color-scheme: dark) { .publish-button { background: #eeeeee; color: #111111; }}
.publish-button:disabled { opacity: 0.5; cursor: not-allowed;}
/* Content labels (red-team PLAN-08) */
.alt-labels { border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 4px; padding: 1rem; margin-bottom: 1rem;}
.alt-label-option { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; font-size: 0.95rem;}
.alt-label-option input { width: auto; min-height: auto; margin: 0;}
.publish-result { margin-top: 1rem; border: 1px solid rgba(0, 128, 0, 0.5); border-radius: 4px; padding: 1rem;}
/* Footer version + repo link */.footer-version { font-size: 0.85rem; opacity: 0.7;}.footer-version a { color: inherit;}