@gfazioli/mantine-clock
Version:
React Clock components and hooks for Mantine with timezone support, countdown timers, customization options, and real-time updates.
23 lines • 5.6 kB
CSS
.me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-gray-1));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-9));--clock-minute-ticks-color-resolved:var(--clock-minute-ticks-color,var(--mantine-color-gray-5));--clock-primary-numbers-color-resolved:var(
--clock-primary-numbers-color,var(--mantine-color-dark-9)
);--clock-secondary-numbers-color-resolved:var(
--clock-secondary-numbers-color,var(--mantine-color-dark-6)
);--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-6));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-6));--clock-second-hand-color-resolved:var(--clock-second-hand-color,var(--mantine-color-red-6));--clock-seconds-arc-color-resolved:var(
--clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
);--clock-minutes-arc-color-resolved:var(
--clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
);--clock-hours-arc-color-resolved:var(
--clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
)}[data-mantine-color-scheme=dark] .me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-dark-8));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-0));--clock-minute-ticks-color-resolved:var(
--clock-minute-ticks-color,var(--mantine-color-gray-8)
);--clock-primary-numbers-color-resolved:var(
--clock-primary-numbers-color,var(--mantine-color-gray-0)
);--clock-secondary-numbers-color-resolved:var(
--clock-secondary-numbers-color,var(--mantine-color-gray-4)
);--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-5));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-5));--clock-seconds-arc-color-resolved:var(
--clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
);--clock-minutes-arc-color-resolved:var(
--clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
);--clock-hours-arc-color-resolved:var(
--clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
)}.me_3508fb61{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.me_3508fb61,.me_bfe0e7d2{align-items:center;display:flex;height:var(--clock-size,400px);justify-content:center;position:relative;width:var(--clock-size,400px)}.me_bfe0e7d2{z-index:2}.me_5cac7cf6{background:transparent;perspective:1000px;pointer-events:none;will-change:transform;z-index:2}.me_5cac7cf6,.me_a73eac6c{backface-visibility:hidden;border-radius:50%;position:relative;transform-style:preserve-3d}.me_a73eac6c{--clock-border-width:clamp(2px,0.0625em,4px);background-color:var(--clock-background-color);height:var(--clock-size,400px);overflow:hidden;user-select:none;width:var(--clock-size,400px);will-change:transform,box-shadow;z-index:3}.me_8cd76651{shape-rendering:geometricPrecision;height:100%;image-rendering:-webkit-optimize-contrast;left:0;text-rendering:geometricPrecision;top:0;width:100%;z-index:13}.me_46419d9b,.me_8cd76651{pointer-events:none;position:absolute}.me_46419d9b{backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.35);border:1px solid rgba(0,0,0,.03);border-radius:50%;box-shadow:0 0 20px hsla(0,0%,100%,.4),inset 0 0 8px hsla(0,0%,100%,.6);height:calc(var(--clock-size, 400px)*.09);left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--clock-size, 400px)*.09);z-index:16}[data-mantine-color-scheme=dark] .me_46419d9b{background-color:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.03);box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 0 8px rgba(0,0,0,.6)}.me_b7f1a195{background:var(--clock-second-hand-color-resolved);border-radius:50%;box-shadow:0 0 8px var(--clock-second-hand-color-resolved);position:absolute;z-index:17}.me_199c38a3{height:100%;left:0;position:absolute;top:0;width:100%;z-index:14}.me_7001a110{background-color:var(--clock-minute-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.025);opacity:var(--clock-minute-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.0025)}.me_42e74ca0,.me_7001a110{box-shadow:0 0 2px hsla(0,0%,100%,.3);position:absolute}.me_42e74ca0{background-color:var(--clock-hour-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.0375);opacity:var(--clock-hour-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.005)}.me_1037b208{color:var(--clock-hour-number-color);font-weight:500;opacity:var(--clock-hour-number-opacity,1);pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);user-select:none;z-index:15}.me_9129b04c{color:var(--clock-primary-numbers-color-resolved);opacity:var(--clock-primary-numbers-opacity,1)}.me_83b9a1fe{color:var(--clock-secondary-numbers-color-resolved);opacity:var(--clock-secondary-numbers-opacity,1)}.me_35043aee{position:absolute;transform-origin:center bottom;will-change:transform;z-index:15}.me_42e1bb72{background-color:var(--clock-hour-hand-color-resolved);box-shadow:0 0 3px var(--clock-hour-hand-color-resolved)}.me_6ffc0fe2{background-color:var(--clock-minute-hand-color-resolved);box-shadow:0 0 3px var(--clock-minute-hand-color-resolved)}.me_22ead85f{position:absolute;will-change:transform;z-index:17}.me_1a457e42{bottom:0;left:0}.me_1a457e42,.me_32db9852{background-color:var(--clock-second-hand-color-resolved);border-radius:calc(var(--clock-size, 400px)*.04);box-shadow:0 0 5px var(--clock-second-hand-color-resolved);position:absolute}.me_32db9852{bottom:calc(var(--clock-size, 400px)*-.035);height:calc(var(--clock-size, 400px)*.035)}