xindoo-leaflet-plugin-trackplayback/dist/control.playback.css

track playback plugin based on leaflet

/* .leaflet-control-playback{position:relative;background-color:#7cbdf5;padding:10px;}
.leaflet-control-playback .optionsContainer{position:relative;}
.leaflet-control-playback .optionsContainer > div {
    display: inline-block;
}
.leaflet-control-playback .buttonContainer {}
.leaflet-control-playback .buttonContainer  a {
    display: inline-block;
    width: 32px;
    height: 32px;
    text-decoration: none;
}
.leaflet-control-playback .buttonContainer .btn-stop {
    background: url(./images/icon-play.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-start {
    background: url(./images/icon-stop.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-restart {
    background: url(./images/icon-restart.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-slow {
    background: url(./images/icon-slow.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-quick {
    background:  url(./images/icon-quick.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-close {
    background: url(./images/icon-close.png)   no-repeat center;
}
.leaflet-control-playback .infoContainer {}
.leaflet-control-playback .sliderContainer {} */
.leaflet-control-playback {
  position: relative;
  background-color: none;
  padding: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-shadow: 0px 0px 1px #000;
}

.leaflet-control-playback .optionsContainer {
  position: relative;
}

.leaflet-control-playback .optionsContainer>div {
  display: inline-block;
}

.showBox {
  display: flex !important
}

.trackplayback-checkbox {
  margin: 0 10px 0;
}

.leaflet-control-playback .buttonContainer {}

.leaflet-control-playback .buttonContainer a {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-decoration: none;
}

.leaflet-control-playback .buttonContainer .btn-stop {
  background: url(./images/icon-play.png) no-repeat center;
  background-size: contain;
  margin: 10px;
}

.leaflet-control-playback .buttonContainer .btn-start {
  background: url(./images/icon-stop.png) no-repeat center;
  background-size: contain;
  margin: 10px;
}

.leaflet-control-playback .buttonContainer .btn-restart {
  background: url(./images/icon-restart.png) no-repeat center;
  background-size: contain;
  margin: 10px;
}

.leaflet-control-playback .buttonContainer .btn-slow {
  background: url(./images/icon-slow.png) no-repeat center;
  background-size: contain;
  margin: 10px;
}

.leaflet-control-playback .buttonContainer .btn-quick {
  background: url(./images/icon-quick.png) no-repeat center;
  background-size: contain;
  margin: 10px;
}

.leaflet-control-playback .buttonContainer .btn-close {
  background: url(./images/icon-close.png) no-repeat center;
  background-size: contain;
  display: none
}

.leaflet-control-playback .infoContainer {}

.leaflet-control-playback .optionsContainer {
  display: flex;
  flex-direction: column;
  width: 20%;
}

.leaflet-control-playback .sliderContainer {
  width: 100%;
}

.leaflet-control-playback .sliderContainer input {
  width: 96%
}