/** * Ellavia / TouchSlovakia — TsTimePicker shared widget (9.5.2026) * * Vizuálne sa mimikuje TsCalendar (`/assets/css/custom-calendar.css`): * .ts-time-picker ←→ .ts-calendar-field * .ts-time-picker__trigger ←→ .ts-calendar-trigger * .ts-time-picker__icon ←→ .ts-calendar-icon * .ts-time-picker__popover ←→ .ts-calendar * .ts-time-picker__backdrop ←→ .ts-calendar__backdrop * * Hodnota: HH:MM (24h, slovenská konvencia). Žiadne nové farebné tokeny — * literály sú zhodné s TsCalendar (#d1d5db border, #E8A53D admin highlight, * rgba(172,133,16,...) gold accent — referencia portal.css `--accent`). */ /* === Trigger button (vyzerá ako input — paritne s .ts-calendar-trigger) === */ .ts-time-picker { position: relative; display: inline-block; min-width: 130px; } .ts-time-picker__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #1f2937; font-family: inherit; font-size: 14px; font-weight: 500; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; line-height: 1.3; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; transition: border-color 0.16s ease, box-shadow 0.16s ease; min-height: 36px; } .ts-time-picker__trigger:hover, .ts-time-picker__trigger:focus-visible { border-color: #94a3b8; outline: none; } .ts-time-picker__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(172, 133, 16, 0.25); } .ts-time-picker__trigger.is-placeholder { color: #9ca3af; font-weight: 400; } .ts-time-picker__icon { flex-shrink: 0; width: 16px; height: 16px; color: #6b7280; pointer-events: none; } /* === Popover (rendered into / open dialog, position:fixed via JS) === * Z-index musí byť rovnako vysoký ako TsCalendar (kvôli stacking-u v admin * modaloch, .hc-modal @ 1300). */ .ts-time-picker__popover { position: fixed; z-index: 2147483646; min-width: 240px; max-width: calc(100vw - 16px); background: #fff; border-radius: 10px; border: 1px solid rgba(7, 21, 50, 0.08); box-shadow: 0 16px 40px rgba(7, 21, 50, 0.18), 0 0 0 1px rgba(7, 21, 50, 0.10); padding: 10px 10px 8px; display: none; font-family: inherit; color: #1f2937; } .ts-time-picker__popover.is-open { display: block; } .ts-time-picker__backdrop { position: fixed; inset: 0; z-index: 2147483645; background: transparent; display: none; } .ts-time-picker__backdrop.is-open { display: block; } /* === "Teraz" shortcut chip ============================================== */ .ts-time-picker__now { display: block; width: 100%; margin: 0 0 8px; padding: 6px 10px; border: 1px solid rgba(7, 21, 50, 0.14); border-radius: 6px; background: #fff; color: #1f2937; font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: center; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; transition: background 0.12s ease, border-color 0.12s ease; } .ts-time-picker__now:hover, .ts-time-picker__now:focus-visible { background: rgba(172, 133, 16, 0.18); border-color: rgba(172, 133, 16, 0.25); outline: none; } /* === Hours/Minutes columns ============================================= */ .ts-time-picker__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; } .ts-time-picker__col { display: flex; flex-direction: column; min-width: 0; } .ts-time-picker__col-head { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7290; padding: 4px 0 6px; } .ts-time-picker__list { position: relative; height: 200px; overflow-y: auto; border: 1px solid rgba(7, 21, 50, 0.08); border-radius: 8px; background: #fff; scrollbar-width: thin; scrollbar-color: rgba(7, 21, 50, 0.18) transparent; } .ts-time-picker__list::-webkit-scrollbar { width: 6px; } .ts-time-picker__list::-webkit-scrollbar-thumb { background: rgba(7, 21, 50, 0.18); border-radius: 3px; } .ts-time-picker__cell { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: #1f2937; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, color 0.12s ease; border-bottom: 1px solid rgba(7, 21, 50, 0.08); } .ts-time-picker__cell:last-child { border-bottom: 0; } .ts-time-picker__cell:hover:not(:disabled) { background: rgba(172, 133, 16, 0.18); } .ts-time-picker__cell:focus-visible { outline: 2px solid #E8A53D; outline-offset: -2px; } .ts-time-picker__cell.is-selected { background: #E8A53D; color: #071532; } .ts-time-picker__cell.is-selected:hover { background: #E8A53D; } .ts-time-picker__cell:disabled { color: rgba(7, 21, 50, 0.32); cursor: not-allowed; opacity: 0.55; background: transparent; } /* === Footer (Vymazať / Hotovo) ========================================= */ .ts-time-picker__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(7, 21, 50, 0.08); } .ts-time-picker__btn { background: transparent; border: 0; padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #1f2937; cursor: pointer; border-radius: 6px; transition: background 0.16s ease; } .ts-time-picker__btn:hover, .ts-time-picker__btn:focus-visible { background: rgba(7, 21, 50, 0.08); outline: none; } .ts-time-picker__btn--clear { color: #b91c1c; } .ts-time-picker__btn--done { background: #E8A53D; color: #071532; } .ts-time-picker__btn--done:hover, .ts-time-picker__btn--done:focus-visible { /* Hover stmavnutie cez box-shadow inset (žiadny nový color literal). */ box-shadow: inset 0 0 0 999px rgba(7, 21, 50, 0.10); } /* === Mobile: full-width-ish, väčší tap target ========================= */ @media (max-width: 600px) { .ts-time-picker__popover { min-width: 0; width: calc(100vw - 16px); max-width: 320px; padding: 12px 12px 10px; border-radius: 12px; } .ts-time-picker__cell { font-size: 15px; min-height: 36px; } .ts-time-picker__list { height: 220px; } } /* === Admin variant — paritne s body.ts-admin .ts-calendar-trigger ====== */ body.ts-admin .ts-time-picker__trigger { border-color: #d1d5db; font-size: 13.5px; font-weight: 500; padding: 6px 10px; min-height: 34px; } body.ts-admin .ts-time-picker__trigger:focus-visible { border-color: #E8A53D; box-shadow: 0 0 0 3px rgba(172, 133, 16, 0.20); } body.ts-admin .ts-time-picker__popover { padding: 10px; border-radius: 8px; } /* === Inline use-case: hr-interval (host-resource-edit opening hours) === * Pôvodný native `` mal padding 6px 10px / font 13px; * keď nahradíme widget-om, chcem aby bol vizuálne zhodný. */ .hr-interval .ts-time-picker { min-width: 110px; flex: 0 0 auto; } .hr-interval .ts-time-picker__trigger { padding: 6px 10px; font-size: 13px; min-height: 32px; } /* Override-form má rovnaké inputy radené do flex-row. */ .hr-override-form .ts-time-picker { min-width: 130px; } .hr-override-form .ts-time-picker__trigger { padding: 7px 10px; font-size: 13px; min-height: 34px; }