angular-flip-clock/dist/angular-flip-clock.min.css

Port of FlipClock.js to Angular without any dependencies

.dy-flip-clock{font:400 11px 'Helvetica Neue',Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;position:relative;width:100%;margin:1em}.dy-flip-clock *{box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}.dy-flip-clock:after,.dy-flip-clock:before{content:' ';display:table}.dy-flip-clock:after{clear:both}.dy-flip-clock-number{position:relative;list-style:none;float:left;margin:5px;width:60px;height:90px;font-size:80px;font-weight:700;line-height:87px;border-radius:6px;background:#000;box-shadow:0 2px 5px rgba(0,0,0,.7)}.dy-flip-clock-number-digit{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;line-height:87px;text-decoration:none!important}.dy-flip-clock-number-digit:first-child{z-index:2}.dy-flip-clock-card{display:block;height:100%;-webkit-perspective:200px;perspective:200px;margin:0!important;overflow:visible!important;cursor:default!important}.dy-flip-clock-card-down,.dy-flip-clock-card-up{z-index:1;position:absolute;left:0;width:100%;height:50%;font-size:80px;overflow:hidden;outline:transparent solid 1px}.dy-flip-clock-card-shadow{position:absolute;width:100%;height:100%;z-index:2}.dy-flip-clock-card-up{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;top:0}.dy-flip-clock-card-up:after{content:'';position:absolute;top:44px;left:0;z-index:5;width:100%;height:3px;background-color:#000;background-color:rgba(0,0,0,.4)}.dy-flip-clock-card-down{-webkit-transform-origin:50% 0;transform-origin:50% 0;bottom:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.dy-flip-clock-card-value{position:absolute;left:0;z-index:1;width:100%;height:200%;color:#ccc;text-shadow:0 1px 2px #000;text-align:center;background-color:#333;border-radius:6px;font-size:70px}.dy-flip-clock-card-value-up{top:0}.dy-flip-clock-card-value-down{bottom:0}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before{z-index:3}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active{-webkit-animation:dyFlipClockDigitZIndex .5s .5s linear both;animation:dyFlipClockDigitZIndex .5s .5s linear both;z-index:5}.dy-flip-clock-divider{float:left;display:inline-block;position:relative;width:20px;height:100px}.dy-flip-clock-divider-hidden{width:0}.dy-flip-clock-label{position:absolute;top:-1.5em;right:-86px;color:#000;text-shadow:none}.dy-flip-clock-dot{display:block;background:#323434;width:10px;height:10px;position:absolute;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);left:5px}.dy-flip-clock-dot-top{top:30px}.dy-flip-clock-dot-bottom{bottom:30px}@-webkit-keyframes dyFlipClockDigitZIndex{0%{z-index:2}100%,20%{z-index:4}}@keyframes dyFlipClockDigitZIndex{0%{z-index:2}100%,20%{z-index:4}}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-down{z-index:2;-webkit-animation:dyFlipClockTurnDown .5s .5s linear both;animation:dyFlipClockTurnDown .5s .5s linear both}@-webkit-keyframes dyFlipClockTurnDown{0%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-webkit-transform:rotateX(0);transform:rotateX(0)}}@keyframes dyFlipClockTurnDown{0%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-webkit-transform:rotateX(0);transform:rotateX(0)}}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-up{z-index:2;-webkit-animation:dyFlipClockTurnUp .5s linear both;animation:dyFlipClockTurnUp .5s linear both}@-webkit-keyframes dyFlipClockTurnUp{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg)}}@keyframes dyFlipClockTurnUp{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg)}}.dy-flip-clock-number-digit-active{z-index:3}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-up .dy-flip-clock-card-shadow{background:0 0,top,0,100% #000;background:0 0,bottom,0,100% #000;-webkit-animation:dyFlipClockShowShadow .5s linear both;animation:dyFlipClockShowShadow .5s linear both}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-up .dy-flip-clock-card-shadow{background:0 0,top,0,100% #000;background:0 0,bottom,0,100% #000;-webkit-animation:dyFlipClockHideShadow .5s .3s linear both;animation:dyFlipClockHideShadow .5s .3s linear both}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-down .dy-flip-clock-card-shadow{background:0 0,top,0,100% rgba(0,0,0,.1);background:0 0,bottom,0,100% rgba(0,0,0,.1);-webkit-animation:dyFlipClockShowShadow .5s linear both;animation:dyFlipClockShowShadow .5s linear both}.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-down .dy-flip-clock-card-shadow{background:0 0,top,0,100% rgba(0,0,0,.1);background:0 0,bottom,0,100% rgba(0,0,0,.1);-webkit-animation:dyFlipClockHideShadow .5s .2s linear both;animation:dyFlipClockHideShadow .5s .2s linear both}@-webkit-keyframes dyFlipClockShowShadow{0%{opacity:0}100%{opacity:1}}@keyframes dyFlipClockShowShadow{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes dyFlipClockHideShadow{0%{opacity:1}100%{opacity:0}}@keyframes dyFlipClockHideShadow{0%{opacity:1}100%{opacity:0}}