/* * Estilos del field type "duration" (input + popover de carriles) del addon sr-crm. * Servido como asset propio (FilamentAsset::register) para no depender de la purga * de Tailwind del host. Soporta modo claro/oscuro vía la clase .dark de Filament. */ .sr-duration { /* Altura del input y altura de cada opción de los carriles (px en el JS). */ --sr-duration-h: 2.25rem; --sr-duration-item: 36px; --sr-duration-rows: 5; position: relative; display: inline-block; } /* --- Control: input de texto + chevron --- */ .sr-duration-control { position: relative; width: 9rem; } .sr-duration-input { box-sizing: border-box; width: 100%; height: var(--sr-duration-h); padding: 0.375rem 1.75rem 0.375rem 0.625rem; border: 1px solid rgb(0 0 0 / 0.15); border-radius: 0.5rem; background-color: #fff; color: inherit; font-size: 0.875rem; line-height: 1.25rem; } .sr-duration-input:focus { outline: none; border-color: rgb(245 158 11); box-shadow: 0 0 0 1px rgb(245 158 11); } .sr-duration-control.is-disabled { opacity: 0.6; } .sr-duration-input:disabled { cursor: not-allowed; } .sr-duration-toggle { position: absolute; top: 50%; right: 0.375rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); border: 0; padding: 0; background: transparent; color: rgb(0 0 0 / 0.45); cursor: pointer; } .sr-duration-toggle svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; } .sr-duration-toggle.is-open svg { transform: rotate(180deg); } /* --- Popover --- */ .sr-duration-panel { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 30; padding: 0.25rem; border: 1px solid rgb(0 0 0 / 0.1); border-radius: 0.75rem; background-color: #fff; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 4px 10px -6px rgb(0 0 0 / 0.1); } /* Variante hacia arriba: cuando abajo no hay sitio suficiente. */ .sr-duration-panel.is-up { top: auto; bottom: calc(100% + 0.375rem); } .sr-duration-wheels { position: relative; display: flex; gap: 0.25rem; height: calc(var(--sr-duration-item) * var(--sr-duration-rows)); } .sr-duration-wheel { position: relative; width: 3.5rem; height: 100%; overflow-y: auto; /* Espacio para que la primera y última opción puedan centrarse en el marcador. */ padding-block: calc((var(--sr-duration-item) * var(--sr-duration-rows) - var(--sr-duration-item)) / 2); scroll-snap-type: y mandatory; -ms-overflow-style: none; /* Edge / IE */ scrollbar-width: none; /* Firefox */ } .sr-duration-wheel::-webkit-scrollbar { display: none; /* Chrome / Safari */ } .sr-duration-option { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--sr-duration-item); border: 0; background: transparent; color: rgb(0 0 0 / 0.4); font-size: 0.875rem; font-variant-numeric: tabular-nums; cursor: pointer; scroll-snap-align: center; transition: color 0.1s ease; } .sr-duration-option:hover { color: rgb(0 0 0 / 0.7); } .sr-duration-option.is-selected { color: rgb(0 0 0 / 0.9); font-weight: 600; } /* Banda central que marca la opción seleccionada en cada carril. */ .sr-duration-marker { position: absolute; left: 0; right: 0; top: 50%; height: var(--sr-duration-item); transform: translateY(-50%); border-top: 1px solid rgb(245 158 11 / 0.5); border-bottom: 1px solid rgb(245 158 11 / 0.5); background-color: rgb(245 158 11 / 0.08); border-radius: 0.375rem; pointer-events: none; } /* --- Modo oscuro (Filament añade .dark al ) --- */ .dark .sr-duration-input { background-color: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.2); } .dark .sr-duration-toggle { color: rgb(255 255 255 / 0.5); } .dark .sr-duration-panel { border-color: rgb(255 255 255 / 0.12); background-color: rgb(24 24 27); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.5), 0 4px 10px -6px rgb(0 0 0 / 0.4); } .dark .sr-duration-option { color: rgb(255 255 255 / 0.4); } .dark .sr-duration-option:hover { color: rgb(255 255 255 / 0.75); } .dark .sr-duration-option.is-selected { color: rgb(255 255 255 / 0.95); }