/* ============================================================ TimePicker24 v2.2 — Sweet 24hr Time Picker Popup is appended to — never clipped by overflow:hidden. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); :root { --tp-grad: linear-gradient(135deg, #845EC2, #D65F8E); --tp-purple: #845EC2; --tp-purple-light: #f5f3ff; --tp-purple-mid: #c4b5fd; --tp-sel-color: #845EC2; --tp-bg: #ffffff; --tp-surface: #fafafa; --tp-border: #e4e4e7; --tp-text: #18181b; --tp-muted: #a1a1aa; --tp-divider: #f4f4f5; --tp-shadow: 0 8px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07); --tp-font: 'DM Sans', sans-serif; } /* ── Wrapper — sits inline in the form ─────────────────── */ .tp-wrapper { display: block; width: 100%; font-family: var(--tp-font); position: relative; /* only for trigger layout, NOT popup */ } /* ── Trigger — matches Bootstrap .form-control height ───── */ .tp-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; height: 40px; padding: 8px; gap: 8px; background: var(--tp-bg); border: 1px solid var(--tp-purple-mid); border-radius: 4px; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s; } .tp-trigger:hover { border-color: var(--tp-purple); } .tp-trigger.tp-open { border-color: var(--tp-purple); outline: 0; box-shadow: 0 0 0 3px rgba(132,94,194,0.18); } .tp-trigger-left { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; } .tp-trigger-label { display: none; } .tp-trigger-val { font-size: 14px; font-weight: 500; color: var(--tp-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; } .tp-trigger-val.tp-placeholder { color: var(--tp-muted); font-weight: 400; } .tp-icon-box { width: 22px; height: 22px; background: var(--tp-grad); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp-icon-box svg { width: 13px; height: 13px; } /* ── Popup — fixed to viewport, appended to ──────── */ .tp-popup { display: none; position: fixed; /* fixed so it escapes ALL overflow:hidden ancestors */ z-index: 99999; background: var(--tp-bg); border-radius: 16px; box-shadow: var(--tp-shadow); overflow: hidden; font-family: var(--tp-font); /* width & top/bottom set by JS via positionPopup() */ } .tp-popup.tp-show { display: block; } /* Drop-down animation (opens below) */ .tp-popup.tp-drop-down.tp-show { animation: tp-pop-down 0.22s cubic-bezier(0.34, 1.45, 0.64, 1) forwards; transform-origin: top center; } /* Drop-up animation (opens above) */ .tp-popup.tp-drop-up.tp-show { animation: tp-pop-up 0.22s cubic-bezier(0.34, 1.45, 0.64, 1) forwards; transform-origin: bottom center; } @keyframes tp-pop-down { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tp-pop-up { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Big time display ───────────────────────────────────── */ .tp-big-time { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px; } .tp-big-seg { font-size: 14px; font-weight: 600; color: var(--tp-purple); font-variant-numeric: tabular-nums; line-height: 1; width: 40px; text-align: center; background: var(--tp-purple-light); border-radius: 12px; padding: 8px 0; } .tp-big-colon { font-size: 24px; font-weight: 700; color: var(--tp-border); line-height: 1; margin-bottom: 2px; } /* ── Drum columns ───────────────────────────────────────── */ .tp-drums-row { display: flex; align-items: flex-start; gap: 6px; padding: 0px 10px 0px 10px; } .tp-drum-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .tp-drum-col-label { font-size: 10px; font-weight: 600; color: var(--tp-muted); text-transform: uppercase; letter-spacing: 0.7px; } .tp-step-btn { width: 100%; height: 20px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); color: #71717a; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; } .tp-step-btn:hover { background: var(--tp-purple-light); border-color: var(--tp-purple-mid); color: var(--tp-purple); } .tp-step-btn:active { transform: scale(0.94); } /* Drum scroll area */ .tp-drum-outer { position: relative; width: 100%; height: 100px; } .tp-drum-hl { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 34px; background: var(--tp-purple-light); border-radius: 10px; z-index: 1; pointer-events: none; } .tp-drum-top-fade, .tp-drum-bot-fade { position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; } .tp-drum-top-fade { top: 0; background: linear-gradient(to bottom, #ffffff 20%, transparent); } .tp-drum-bot-fade { bottom: 0; background: linear-gradient(to top, #ffffff 20%, transparent); } .tp-drum-scroll { position: absolute; inset: 0; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; z-index: 3; padding: 47px 0; } .tp-drum-scroll::-webkit-scrollbar { display: none; } .tp-drum-item { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--tp-muted); scroll-snap-align: center; cursor: pointer; border-radius: 8px; transition: color 0.1s; user-select: none; font-variant-numeric: tabular-nums; } .tp-drum-item:hover { color: #52525b; } .tp-drum-item.tp-sel { color: var(--tp-sel-color); font-weight: 600; font-size: 14px; } /* ── Divider ────────────────────────────────────────────── */ .tp-hr { height: 1px; background: var(--tp-divider); margin: 0 14px; } /* ── Footer ─────────────────────────────────────────────── */ .tp-footer { padding: 10px; display: flex; justify-content: center; } .tp-set-btn { padding: 5px 22px; background: var(--tp-grad); border: none; border-radius: 10px; color: #ffffff; font-family: var(--tp-font); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.12s; letter-spacing: 0.2px; } .tp-set-btn:hover { opacity: 0.9; } .tp-set-btn:active { transform: scale(0.97); }