my-awesome-react-digital-clock/dist/my-awesome-react-digital-clock.css

A digital clock for React apps

.digital-clock{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.5em;border-radius:6px;font:15px/1.3 Arial,sans-serif}.digital-clock.light{background-color:#f3f3f3;color:#272e38}.digital-clock.dark{background-color:#272e38;color:#cacaca}.digital-time{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:75%;width:75%;gap:8px}.digital-time.light>*>span{background:#272e38}.digital-time.dark>*>span{background:#cacaca}.digital-time .colon{height:100%;align-content:center;font-size:40px;font-weight:700}.ampm{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;right:5%;bottom:15%}.ampm span{opacity:0}.ampm span.active{opacity:1}.weekdays{display:flex;flex-direction:row;justify-content:center;align-items:center;width:85%;gap:1em;font-size:12px}.weekdays span{opacity:.2}.weekdays span.active{opacity:1}.digital-number{position:relative;height:4em;width:2.5em}.digital-number span{position:absolute}.digital-number span.on{opacity:1}.digital-number span.off{opacity:0}.digital-number .horizontal{height:5px;width:100%;left:0}.digital-number .vertical{height:50%;width:5px}.digital-number .top{top:-2.5%;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}.digital-number .top.right,.digital-number .top.left{top:2.5%}.digital-number .mid{top:50%;clip-path:polygon(15% 0%,85% 0%,100% 50%,85% 100%,15% 100%,0% 50%)}.digital-number .bottom{top:102.5%;clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%)}.digital-number .bottom.right,.digital-number .bottom.left{top:55%}.digital-number .left{left:-5%;clip-path:polygon(0 0,100% 10%,100% 90%,0% 100%)}.digital-number .right{right:-5%;clip-path:polygon(0 10%,100% 0,100% 100%,0 90%)}