media-player-control-bar.component.scss

@mixin slider-active-color() {
  --mdc-slider-handle-color: #006064;
  --mdc-slider-focus-handle-color: #006064;
  --mdc-slider-hover-handle-color: #006064;
  --mdc-slider-active-track-color: #006064;
  --mdc-slider-inactive-track-color: #006064;
  --mdc-slider-with-tick-marks-active-container-color: #fff;
  --mdc-slider-with-tick-marks-inactive-container-color: #006064;
  --mat-mdc-slider-ripple-color: #006064;
  --mat-mdc-slider-hover-ripple-color: null;
  --mat-mdc-slider-focus-ripple-color: null;
}

@mixin slider-disabled-color() {
  --mdc-slider-disabled-handle-color: #006064;
  --mdc-slider-disabled-active-track-color: #006064;
  --mdc-slider-disabled-inactive-track-color: #006064;
  --mdc-slider-with-tick-marks-disabled-container-color: #006064;
  --mat-mdc-slider-value-indicator-opacity: 1.0;
}

.control-bar {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

.control-button {
  height: 50px;
  min-width: 24px;
  border-radius: 0;
  z-index: 1;
  .player-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
}

.enabled-control:hover{
  color: #006064;
}

.time {
  cursor: pointer;
  white-space: nowrap;
  padding: 0 5px;
  z-index: 1;
}

.runs {
  white-space: nowrap;
  padding: 0 5px;
}

.time:hover {
  color: #006064;
}

.active-control{
 color: #006064;
}

.duration{
  flex-grow: 5;
  min-width: 20%;
  margin-top: 3px;
  margin-right: 20px;
  @include slider-active-color();
  @include slider-disabled-color();
}

.volume{
  flex-grow: 2;
  min-width: 10%;
  margin-top: 3px;
  margin-right: 20px;
  @include slider-active-color();
}

.status-bar{
  padding: 10px;
  color: #f44336;
  font-size: 75%;
}

.hint-border{
  border: 2px #f44336 solid;
}

:host ::ng-deep mat-slider input {
  pointer-events: inherit !important;
}