Skip to main content

priv/static/assets/phoenix_live_calendar.css

/* PhoenixLiveCalendar — Optional CSS for animations and urgency indicators.
   Import this in your app.css if you want animated urgency borders:

   @import "../../deps/phoenix_live_calendar/priv/static/assets/phoenix_live_calendar.css";
*/

/* Urgency pulse animations */
@keyframes cal-pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

@keyframes cal-pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Back-to-back booking proximity indicator */
@keyframes cal-proximity-flash {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--cal-proximity-color, oklch(var(--wa, 0.8 0.2 80))); }
}

/* Selecting state for drag-to-select */
.cal-selecting {
  background-color: oklch(var(--p, 0.6 0.2 260) / 0.15);
}

/* Drag states */
.cal-dragging {
  opacity: 0.4;
}

.cal-drop-target {
  background-color: oklch(var(--p, 0.6 0.2 260) / 0.1);
  outline: 2px dashed oklch(var(--p, 0.6 0.2 260) / 0.3);
}

.cal-resizing {
  opacity: 0.7;
}

.cal-long-press {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ghost element during drag */
.cal-ghost {
  pointer-events: none;
  opacity: 0.7;
  transform: rotate(2deg);
}

/* Reduced motion — disable all calendar animations */
@media (prefers-reduced-motion: reduce) {
  .cal-urgency-attention,
  .cal-urgency-warning,
  .cal-urgency-critical,
  .cal-status-pending {
    animation: none !important;
  }
}