/** * Timepicker styling */ /* Core timepicker styling */ .timepicker-wrapper { --fs-timepicker-wrapper-bg: rgba(0, 0, 0, 0.4); --fs-timepicker-elements-min-width: 310px; --fs-timepicker-elements-min-height: 325px; --fs-timepicker-elements-background: #fff; --fs-timepicker-elements-border-top-right-radius: 0.6rem; --fs-timepicker-elements-border-top-left-radius: 0.6rem; --fs-timepicker-head-bg: #3b71ca; --fs-timepicker-head-height: 100px; --fs-timepicker-head-border-top-right-radius: 0.5rem; --fs-timepicker-head-border-top-left-radius: 0.5rem; --fs-timepicker-head-padding-y: 10px; --fs-timepicker-head-padding-right: 24px; --fs-timepicker-head-padding-left: 50px; --fs-timepicker-button-font-size: 0.8rem; --fs-timepicker-button-min-width: 64px; --fs-timepicker-button-font-weight: 500; --fs-timepicker-button-line-height: 40px; --fs-timepicker-button-border-radius: 10px; --fs-timepicker-button-color: #4f4f4f; --fs-timepicker-button-hover-bg: rgba(0, 0, 0, 0.08); --fs-timepicker-button-focus-bg: rgba(0, 0, 0, 0.08); --fs-timepicker-button-padding-x: 10px; --fs-timepicker-button-height: 40px; --fs-timepicker-button-margin-bottom: 10px; --fs-timepicker-current-font-size: 3.75rem; --fs-timepicker-current-font-weight: 300; --fs-timepicker-current-line-height: 1.2; --fs-timepicker-current-color: #fff; --fs-timepicker-current-opacity: 0.54; --fs-timepicker-clock-wrapper-min-width: 310px; --fs-timepicker-clock-wrapper-max-width: 325px; --fs-timepicker-clock-wrapper-min-height: 305px; --fs-timepicker-clock-wrapper-text-color: #4f4f4f; --fs-timepicker-mode-wrapper-font-size: 18px; --fs-timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54); --fs-timepicker-clock-width: 260px; --fs-timepicker-clock-height: 260px; --fs-timepicker-clock-face-bg: #f0f0f0; --fs-timepicker-time-tips-inner-active-color: #fff; --fs-timepicker-time-tips-inner-active-bg: #3b71ca; --fs-timepicker-time-tips-inner-active-font-weight: 400; --fs-timepicker-dot-font-weight: 300; --fs-timepicker-dot-line-height: 1.2; --fs-timepicker-dot-color: #fff; --fs-timepicker-dot-font-size: 3.75rem; --fs-timepicker-dot-opacity: 0.54; --fs-timepicker-item-middle-dot-width: 6px; --fs-timepicker-item-middle-dot-height: 6px; --fs-timepicker-item-middle-dot-border-radius: 50%; --fs-timepicker-item-middle-dot-bg: #3b71ca; --fs-timepicker-hand-pointer-bg: #3b71ca; --fs-timepicker-hand-pointer-bottom: 50%; --fs-timepicker-hand-pointer-height: 40%; --fs-timepicker-hand-pointer-left: calc(50% - 1px); --fs-timepicker-hand-pointer-width: 2px; --fs-timepicker-circle-top: -21px; --fs-timepicker-circle-left: -15px; --fs-timepicker-circle-width: 4px; --fs-timepicker-circle-border-width: 14px; --fs-timepicker-circle-border-color: #3b71ca; --fs-timepicker-circle-height: 4px; --fs-timepicker-circle-active-background-color: #fff; --fs-timepicker-hour-mode-color: #fff; --fs-timepicker-hour-mode-opacity: 0.54; --fs-timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15); --fs-timepicker-hour-mode-active-color: #fff; --fs-timepicker-footer-border-bottom-left-radius: 0.5rem; --fs-timepicker-footer-border-bottom-right-radius: 0.5rem; --fs-timepicker-footer-height: 56px; --fs-timepicker-footer-padding-x: 12px; --fs-timepicker-footer-bg: #fff; --fs-timepicker-clock-animation: show-up-clock 350ms linear; --fs-timepicker-zindex: 1065; touch-action: none; z-index: var(--fs-timepicker-zindex); opacity: 1; right: 0; bottom: 0; top: 0; left: 0; background-color: var(--fs-timepicker-wrapper-bg); } /* Animation */ .animation { animation-fill-mode: both; } .fade-in { animation-name: fadeIn; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes show-up-clock { 0% { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* Timepicker components */ .timepicker-modal { margin: 0; font-family: "Roboto", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; color: #4f4f4f; text-align: left; background-color: #fff; z-index: var(--fs-timepicker-zindex); box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Ensure all elements inside the timepicker use border-box */ .timepicker-modal *, .timepicker-modal *::before, .timepicker-modal *::after { box-sizing: border-box; } .timepicker-container { max-height: calc(100% - 64px); overflow-y: auto; box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04); } .timepicker-elements { min-width: var(--fs-timepicker-elements-min-width); min-height: var(--fs-timepicker-elements-min-height); background: var(--fs-timepicker-elements-background); border-top-right-radius: var(--fs-timepicker-elements-border-top-right-radius); border-top-left-radius: var(--fs-timepicker-elements-border-top-left-radius); } .timepicker-head { background-color: var(--fs-timepicker-head-bg); height: var(--fs-timepicker-head-height); border-top-right-radius: var(--fs-timepicker-head-border-top-right-radius); border-top-left-radius: var(--fs-timepicker-head-border-top-left-radius); padding: var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-right) var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-left); } .timepicker-current { font-size: var(--fs-timepicker-current-font-size); font-weight: var(--fs-timepicker-current-font-weight); line-height: var(--fs-timepicker-current-line-height); color: var(--fs-timepicker-current-color); opacity: var(--fs-timepicker-current-opacity); border: none; background: transparent; padding: 0; position: relative; vertical-align: unset; } .timepicker-current.active { opacity: 1; } .timepicker-dot { font-size: var(--fs-timepicker-dot-font-size); font-weight: var(--fs-timepicker-dot-font-weight); line-height: var(--fs-timepicker-dot-line-height); color: var(--fs-timepicker-dot-color); opacity: var(--fs-timepicker-dot-opacity); border: none; background: transparent; padding: 0; } .timepicker-mode-wrapper { font-size: var(--fs-timepicker-mode-wrapper-font-size); color: var(--fs-timepicker-mode-wrapper-color); } .timepicker-hour-mode { padding: 0; background-color: transparent; border: none; color: var(--fs-timepicker-hour-mode-color); opacity: var(--fs-timepicker-hour-mode-opacity); cursor: pointer; } /* These focus styles are overridden later in the file with !important */ .timepicker-hour-mode:hover, .timepicker-hour-mode:focus, .timepicker-hour:hover, .timepicker-hour:focus, .timepicker-minute:hover, .timepicker-minute:focus { background-color: var(--fs-timepicker-hour-mode-hover-bg); outline: none; cursor: pointer; } .timepicker-hour-mode.active, .timepicker-hour.active, .timepicker-minute.active { color: #fff; opacity: 1; outline: none; } .timepicker-clock-wrapper { min-width: var(--fs-timepicker-clock-wrapper-min-width); max-width: var(--fs-timepicker-clock-wrapper-max-width); min-height: var(--fs-timepicker-clock-wrapper-min-height); overflow-x: hidden; height: 100%; color: var(--fs-timepicker-clock-wrapper-text-color); } .timepicker-clock { position: relative; border-radius: 100%; width: var(--fs-timepicker-clock-width); height: var(--fs-timepicker-clock-height); cursor: default; margin: 0 auto; background-color: var(--fs-timepicker-clock-face-bg); user-select: none; } .timepicker-clock-animation { animation: var(--fs-timepicker-clock-animation); } .timepicker-middle-dot { top: 50%; left: 50%; width: var(--fs-timepicker-item-middle-dot-width); height: var(--fs-timepicker-item-middle-dot-height); transform: translate(-50%, -50%); border-radius: var(--fs-timepicker-item-middle-dot-border-radius); background-color: var(--fs-timepicker-item-middle-dot-bg); } .timepicker-hand-pointer { background-color: var(--fs-timepicker-hand-pointer-bg); bottom: var(--fs-timepicker-hand-pointer-bottom); height: var(--fs-timepicker-hand-pointer-height); left: var(--fs-timepicker-hand-pointer-left); transform-origin: center bottom 0; width: var(--fs-timepicker-hand-pointer-width); } .timepicker-circle { top: var(--fs-timepicker-circle-top); left: var(--fs-timepicker-circle-left); width: var(--fs-timepicker-circle-width); border: var(--fs-timepicker-circle-border-width) solid var(--fs-timepicker-circle-border-color); height: var(--fs-timepicker-circle-height); box-sizing: content-box; border-radius: 100%; background-color: transparent; } .timepicker-circle.active { background-color: var(--fs-timepicker-circle-active-background-color); } .timepicker-time-tips-minutes, .timepicker-time-tips-hours { position: absolute; border-radius: 100%; width: 32px; height: 32px; text-align: center; cursor: pointer; font-size: 1.1rem; display: flex; justify-content: center; align-items: center; font-weight: 300; user-select: none; } .timepicker-time-tips-minutes.active, .timepicker-time-tips-hours.active { color: var(--fs-timepicker-time-tips-inner-active-color); background-color: var(--fs-timepicker-time-tips-inner-active-bg); font-weight: var(--fs-timepicker-time-tips-inner-active-font-weight); } .timepicker-footer { border-bottom-left-radius: var(--fs-timepicker-footer-border-bottom-left-radius); border-bottom-right-radius: var(--fs-timepicker-footer-border-bottom-right-radius); display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--fs-timepicker-footer-height); padding-left: var(--fs-timepicker-footer-padding-x); padding-right: var(--fs-timepicker-footer-padding-x); background-color: var(--fs-timepicker-footer-bg); } .timepicker-button { font-size: var(--fs-timepicker-button-font-size); min-width: var(--fs-timepicker-button-min-width); box-sizing: border-box; font-weight: var(--fs-timepicker-button-font-weight); line-height: var(--fs-timepicker-button-line-height); border-radius: var(--fs-timepicker-button-border-radius); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-timepicker-button-color); border: none; background-color: transparent; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; outline: none; padding: 0 var(--fs-timepicker-button-padding-x); height: var(--fs-timepicker-button-height); margin-bottom: var(--fs-timepicker-button-margin-bottom); cursor: pointer; } .timepicker-button:hover { background-color: var(--fs-timepicker-button-hover-bg); } .timepicker-button:focus { outline: none; background-color: var(--fs-timepicker-button-focus-bg); } /* Add missing button styling */ button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } /** Remove focus from buttons after clicked **/ /* Prevent selection/focus styling on all buttons in the timepicker */ .timepicker-modal button { -webkit-appearance: none; -moz-appearance: none; appearance: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Override focus styles completely */ .timepicker-modal button:focus { outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Prevent text selection on all elements */ .timepicker-modal * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* Add this to the body when the timepicker is active */ body.timepicker-active { -webkit-tap-highlight-color: transparent; } /* Add !important to ensure these styles take precedence */ .timepicker-current:focus, .timepicker-dot:focus, .timepicker-hour-mode:focus, .timepicker-button:focus { outline: none !important; background-color: transparent !important; } /* Only apply background color on hover, not on focus */ .timepicker-hour-mode:hover, .timepicker-hour:hover, .timepicker-minute:hover, .timepicker-button:hover { background-color: var(--fs-timepicker-hour-mode-hover-bg); } /* Ensure active states are properly styled */ .timepicker-hour-mode.active, .timepicker-hour.active, .timepicker-minute.active { color: #fff !important; opacity: 1 !important; }