Widget De Estadísticas Reestructurado - Blogger

Anime-counter.css

/* Anime Counter v1.0.2 */

/*fix all themes*/
#Stats10 {
  margin: 0;
  padding: 0;
  line-height: initial;
}
/*  Counter */
.anime-counter {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index:901;
  font-size: 16px;
  -webkit-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
        user-select: none;
  pointer-events: none;
}
@-webkit-keyframes count {
  from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}
  top{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
@keyframes count {
  from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}
  top{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
.anime-counter .counter {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: Arial, helvetica;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  background: rgba(255,255,255,0.9);
  -webkit-animation: .3s .5s count backwards;
      animation: .3s .5s count backwards;
}
.anime-counter .counter > span:first-child {
  white-space: nowrap;
  padding: 10px;
  display: block;
  font-size: 0.9em;
  font-weight: 700;
  color: #555;
}
.anime-counter::before {
  background: no-repeat bottom center transparent;
  content: "";
  height: 274px;
  width: 163px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: -webkit-transform .3s;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-animation: .3s .55s count backwards;
      animation: .3s .55s count backwards;
}
/*option --> text-counter*/
.text-counter {
  font-size: 1.2em;
  background: #262626;
  color: #fff;
  padding: 5px 10px;
}
/*option --> graph-counter*/
.graph-counter {
  padding: 0 5px 5px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-flex-pack: center;
    -webkit-box-pack: center;
      justify-content: center;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-flex-align: start;
    -webkit-box-align: start;
      align-items: flex-start;
}
.graph-counter > span.digit {
  padding: .2em .3em;
  display: block;
  color: #fff;
  background: rgba(0, 0, 0, .85) !important;
  font-size: 1.4em;
  margin: 3px;
  border-radius: 2px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, .9);
  box-shadow: 0 60px 60px -30px rgba(255, 255, 255, .05) inset, 0 0 0 2px rgba(0, 0, 0, .15), 0 1px 0 0 rgba(255, 255, 255, .15) inset;
  width: auto;
  height: auto;
  line-height: initial;
}

.graph-counter > span.digit .blind-plate {
  position: absolute;
  width: 100%;
  top: 50%;
  display: block;
  border-top: 1px solid rgba(0, 0, 0, .7);
  margin-top: -1px;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  opacity: 1;
  height: auto;
}
  
.anime-counter::before {height: 274px;width: 205px;}  

.anime-counter::before {background-image: url(https://goo.gl/jrLrqA);}

.anime-counter.skin1::before {background-image: url(https://goo.gl/WLBlts);}
.anime-counter.skin2::before {background-image: url(https://goo.gl/qV9rKj);}
.anime-counter.skin3::before {background-image: url(https://goo.gl/PCRSvk);}
.anime-counter.skin4::before {background-image: url(https://goo.gl/dS7cAq);}

/*Responsive Counter*/
@media screen and (max-width:780px){.anime-counter::before{-webkit-transform: translateY(20%);-ms-transform: translateY(20%);transform: translateY(20%);}.anime-counter{font-size: 14px;}}
@media screen and (max-width:480px){.anime-counter {display: none;}}/*not available for mobile*/

/*custom theme*/
.anime-counter.custom::before {
  background-image: url(../custom.png);
}