jabradoodle.css

/* size, shape, color */
.jab-container{
  display: table;
  position: relative;
  padding: 10px;

  font-family: arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 100;
  cursor: pointer;

  color: rgba(255,255,255,0.77);
  background-color: rgba(0,0,0,1);

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* prevent color flash as button sets visual state on init */
.jab-container.jab-post-init{
  transition: background-color 0.4s ease, color 0.4s ease;
}

.jab-container.jab-show-fillcontainer{
  display: block;
}


.jab-container:hover{
  color: rgba(255,255,255,1);
}

.jab-container.jab-state-loading{
  color: rgba(255,255,255,0.25);
  background-color: rgba(0,0,0,0.6);
  cursor: auto;
}

.jab-inline-el{
  display: none;
  position: relative;
  z-index: 2;
  margin-right: 6px;
  text-align: center;
  vertical-align:middle;
}

.jab-inline-el.jab-text-duration,
.jab-inline-el:last-child{
  margin-right: 0;
}

/* maintain UI state */
.jab-show-duration .jab-text-duration,
.jab-show-status.jab-state-inactive .jab-text-play,
.jab-show-status.jab-state-pause .jab-text-resume,
.jab-show-status.jab-state-active .jab-text-pause,
.jab-show-icons.jab-state-inactive .jab-icon-play,
.jab-show-icons.jab-state-pause .jab-icon-resume,
.jab-show-icons.jab-state-active .jab-icon-pause,
.jab-show-icons.jab-state-loading .jab-text-play,
.jab-show-icons.jab-state-loading .jab-icon-loader{
  display: inline-block;
}

.jab-progress{
  display: none;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.jab-show-progressbar.jab-state-active .jab-progress,
.jab-show-progressbar.jab-state-pause .jab-progress{
  display: block;
}

.jab-show-progressbar .jab-bar{
  width: 0;
  height: 100%;
  background-color: #7D7D7D;
  transition: width 0.4s ease;
}

/* svg icons */
.jab-svg-icon{
  width: 13px;
}

.jab-icon path{
  fill: #fff;
}

/**
 * Spinning Loader, by Luke Hass. MIT.
 * https://github.com/lukehaas/css-loaders
 */
.jab-loader{
  margin: 0 auto;
  font-size:10px;
  position:relative;
  text-indent:-9999em;
  border-top:2px solid rgba(255,255,255,0.2);
  border-right:2px solid rgba(255,255,255,0.2);
  border-bottom:2px solid rgba(255,255,255,0.2);
  border-left:2px solid rgba(255,255,255,1);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation:load8 1.1s infinite linear;
  animation:jab-loader-spin 1.1s infinite linear;
}

.jab-loader,
.jab-loader:after{
  border-radius:50%;
  width:8px;
  height:8px;
}

@-webkit-keyframes jab-loader-spin {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}

@keyframes jab-loader-spin {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}