Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697/* src/layout/GestureIndicator.css */
/* Pull indicator — appears during vertical swipe gestures. * Centered card that expands with progress, with a chevron arrow * showing the pull direction. Squared off to match app design language. */
.gesture-indicator { position: fixed; left: 50%; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 6px; /* Starts compact, widens with progress */ width: calc(48px + 160px * var(--gesture-progress, 0)); height: 34px; transform: translateX(-50%); background: var(--background-secondary, #2d2d2d); border: 1px solid var(--background-modifier-border, #3d3d3d); /* Square corners match the rectilinear chrome. */ border-radius: 0; opacity: calc(0.5 + 0.5 * var(--gesture-progress, 0)); pointer-events: none; user-select: none; -webkit-user-select: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
/* Position further from edge for visibility */.gesture-indicator[data-edge="top"] { top: 52px; /* Below the header (~40px) + gap */}
.gesture-indicator[data-edge="bottom"] { bottom: 36px; /* Above the status bar (~24px) + gap */}
@media (max-width: 767px) { .gesture-indicator[data-edge="bottom"] { top: calc( var(--reams-visual-viewport-offset-top, 0px) + var(--reams-visual-viewport-height, 100dvh) - 70px ); bottom: auto; }}
/* Chevron arrow — rotates to point in pull direction */.gesture-indicator-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted, #999); opacity: calc(0.4 + 0.6 * var(--gesture-progress, 0));}
.gesture-indicator[data-edge="top"] .gesture-indicator-chevron { transform: rotate(0deg); /* Points down (pull direction) */}
.gesture-indicator[data-edge="bottom"] .gesture-indicator-chevron { transform: rotate(180deg); /* Points up (pull direction) */}
/* Subtle scale bump when ready to activate */.gesture-indicator[data-ready="true"] { transform: translateX(-50%) scale(1.04); border-color: var(--text-muted, #999); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);}
/* Label — fades in as pill widens */.gesture-indicator-label { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-muted, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 26px); /* Fade in with progress squared for a snappier reveal */ opacity: calc(var(--gesture-progress, 0) * var(--gesture-progress, 0));}
.gesture-indicator[data-ready="true"] .gesture-indicator-label { color: var(--text-normal, #e0e0e0);}
.gesture-indicator[data-ready="true"] .gesture-indicator-chevron { color: var(--text-normal, #e0e0e0);}