component.css

.ui-clock { font-size: 12px; position: absolute; background-color: #FFF; max-width: 250px; width: 100%; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: var(--radius); z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; transform: scale(0.6); transition: all 0.2s; }
.ui-clock-visible { transform: scale(1); opacity: 1; }
.ui-clock-header { height: 40px; font-weight: bold; border-bottom: 1px solid #E0E0E0; text-align: center; font-size: 16pt; padding: 5px 10px 0; }
.ui-clock-header span { font-size: 16pt; color: gray; }
.ui-clock span { cursor: pointer; }
span.ui-clock-active { color: #000; }
.ui-clock-body { background-color: #f9f9f9; width: 250px; height: 220px; }
.ui-clock-holder { position: absolute; left: 20px; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; width: 200px; height: 200px; margin-top: 10px; }
.ui-clock-dial { width: 200px; height: 200px; position: absolute; left: -1px; top: -1px; }
.ui-clock-minutes { visibility: hidden; }
.ui-clock-tick { border-radius: 50%; color: #666; line-height: 26px; text-align: center; width: 26px; height: 26px; position: absolute; cursor: pointer; }
.ui-clock-tick-selected { background-color: rgba(0,0,0,0.2); }
.ui-clock-swap { left: 85px; top: 87px; font-size: 16pt; position: absolute; cursor: pointer; }
.ui-clock-footer { border-top: 1px solid #E0E0E0; background-color: #F0F0F0; padding: 8px 10px; height: 34px; }
.ui-clock-footer span { font-weight: bold; float: right; color: #B7292E; }

.ui-dark .ui-clock,.ui-dark .ui-clock-body { background-color: #303030; border-color: #353535; color: #A0A0A0; box-shadow: 1px 5px 10px rgba(0,0,0,0.2); }
.ui-dark .ui-clock-header { border-bottom-color: #404040; }
.ui-dark .ui-clock-header a { color: #FFF; }
.ui-dark span.ui-clock-active { color: #FFF; }
.ui-dark .ui-clock-holder { background-color: #353535; border-color: #505050; }
.ui-dark .ui-clock-tick { color: #EEE; }
.ui-dark .ui-clock-tick-selected { background-color: rgba(255, 255, 255, 0.3); }
.ui-dark .ui-clock-swap { color:#FFF; }
.ui-dark .ui-clock-footer { background-color: #252525; border-top-color: #404040; }