135 lines
6.2 KiB
CSS
135 lines
6.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.kestrel-page-heading { @apply text-xl font-semibold tracking-wide text-kestrel-text text-shadow-glow-sm; }
|
|
.kestrel-section-heading { @apply text-lg font-semibold tracking-wide text-kestrel-text text-shadow-glow-sm; }
|
|
.kestrel-panel-header { @apply flex items-center justify-between border-b border-kestrel-border px-4 py-3 shadow-border-header; }
|
|
.kestrel-video-frame { @apply relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black shadow-glow-inset-video; }
|
|
.kestrel-close-btn { @apply rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent; }
|
|
.kestrel-card { @apply rounded border border-kestrel-border bg-kestrel-surface shadow-glow-card; }
|
|
.kestrel-card-modal { @apply rounded-lg border border-kestrel-border bg-kestrel-surface shadow-glow-modal; }
|
|
.kestrel-label { @apply mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted; }
|
|
.kestrel-section-label { @apply mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted; }
|
|
.kestrel-input { @apply w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text placeholder:text-kestrel-muted outline-none transition-colors focus:border-kestrel-accent; }
|
|
.kestrel-btn-secondary { @apply rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border; }
|
|
.kestrel-context-menu-item { @apply block w-full px-3 py-1.5 text-left text-sm text-kestrel-text transition-colors hover:bg-kestrel-border; }
|
|
.kestrel-context-menu-item-danger { @apply block w-full px-3 py-1.5 text-left text-sm text-red-400 transition-colors hover:bg-kestrel-border; }
|
|
.kestrel-panel-base { @apply flex flex-col border border-kestrel-border bg-kestrel-surface; }
|
|
.kestrel-panel-inline { @apply rounded-lg shadow-glow; }
|
|
.kestrel-panel-overlay { @apply absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] shadow-glow-panel; }
|
|
}
|
|
|
|
/* Transitions: modal + drawer-backdrop (same fade) */
|
|
.modal-enter-active, .modal-leave-active,
|
|
.drawer-backdrop-enter-active, .drawer-backdrop-leave-active { transition: opacity 0.2s ease; }
|
|
.modal-enter-from, .modal-leave-to,
|
|
.drawer-backdrop-enter-from, .drawer-backdrop-leave-to { opacity: 0; }
|
|
.dropdown-enter-active, .dropdown-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
|
|
.dropdown-enter-from, .dropdown-leave-to { opacity: 0; transform: translateY(-4px); }
|
|
.modal-enter-active .relative, .modal-leave-active .relative { transition: transform 0.2s ease; }
|
|
.modal-enter-from .relative, .modal-leave-to .relative { transform: scale(0.96); }
|
|
|
|
.nav-drawer { box-shadow: 8px 0 24px -4px rgba(34, 201, 201, 0.12); }
|
|
@media (min-width: 768px) { .nav-drawer { box-shadow: none; } }
|
|
|
|
/* Leaflet map */
|
|
.kestrel-map-container {
|
|
background: #000 !important;
|
|
}
|
|
.kestrel-map-container .leaflet-container {
|
|
border: none !important;
|
|
outline: none !important;
|
|
}
|
|
.kestrel-map-container .leaflet-tile-pane,
|
|
.kestrel-map-container .leaflet-map-pane,
|
|
.kestrel-map-container .leaflet-tile-container {
|
|
background: #000 !important;
|
|
}
|
|
.kestrel-map-container img.leaflet-tile {
|
|
background: #000 !important;
|
|
mix-blend-mode: normal;
|
|
}
|
|
.kestrel-map-container .poi-div-icon {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.kestrel-map-container .poi-icon-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
.kestrel-map-container .kestrel-poi-tooltip,
|
|
.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-content-wrapper,
|
|
.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-tip {
|
|
@apply bg-kestrel-surface-elevated border border-kestrel-glow rounded-md shadow-elevated;
|
|
}
|
|
.kestrel-map-container .kestrel-poi-tooltip {
|
|
@apply text-kestrel-text-bright text-xs font-[inherit] py-1.5 px-2.5;
|
|
}
|
|
.kestrel-map-container .kestrel-poi-tooltip::before,
|
|
.kestrel-map-container .kestrel-poi-tooltip::after {
|
|
border-color: #1e293b;
|
|
}
|
|
.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-content {
|
|
@apply text-kestrel-text-bright my-2 mx-3 min-w-[200px];
|
|
}
|
|
.kestrel-map-container .kestrel-live-popup {
|
|
@apply text-kestrel-text-bright text-xs;
|
|
}
|
|
.kestrel-map-container .kestrel-live-popup img {
|
|
@apply block max-h-40 w-auto rounded bg-kestrel-bg;
|
|
}
|
|
.kestrel-map-container .leaflet-control-zoom,
|
|
.kestrel-map-container .leaflet-control-locate,
|
|
.kestrel-map-container .savetiles.leaflet-bar {
|
|
@apply rounded-md overflow-hidden font-mono border border-kestrel-glow shadow-glow-sm;
|
|
border-color: rgba(34, 201, 201, 0.35) !important;
|
|
}
|
|
.kestrel-map-container .leaflet-control-zoom a,
|
|
.kestrel-map-container .leaflet-control-locate,
|
|
.kestrel-map-container .savetiles.leaflet-bar a {
|
|
@apply w-8 h-8 leading-8 bg-kestrel-surface text-kestrel-text border-none rounded-none text-lg font-semibold no-underline transition-all duration-150;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
background: #0d1424 !important;
|
|
color: #b8c9e0 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.kestrel-map-container .leaflet-control-zoom a + a,
|
|
.kestrel-map-container .savetiles.leaflet-bar a + a {
|
|
border-top: 1px solid rgba(34, 201, 201, 0.2);
|
|
}
|
|
.kestrel-map-container .leaflet-control-zoom a:hover,
|
|
.kestrel-map-container .leaflet-control-locate:hover,
|
|
.kestrel-map-container .savetiles.leaflet-bar a:hover {
|
|
@apply bg-kestrel-surface-hover text-kestrel-accent shadow-glow-md text-shadow-glow-md;
|
|
}
|
|
.kestrel-map-container .savetiles.leaflet-bar {
|
|
@apply flex flex-col;
|
|
}
|
|
.kestrel-map-container .savetiles.leaflet-bar a {
|
|
@apply min-w-[5.5em] leading-tight py-1.5 px-2.5 whitespace-nowrap text-center text-[11px] font-medium tracking-wide;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
line-height: 1.25 !important;
|
|
padding: 6px 10px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
.kestrel-map-container .leaflet-control-locate {
|
|
@apply flex items-center justify-center p-0 cursor-pointer;
|
|
}
|
|
.kestrel-map-container .leaflet-control-locate svg {
|
|
color: currentColor;
|
|
}
|
|
.kestrel-map-container .live-session-icon {
|
|
animation: live-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes live-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|