mistserver/embed/skins/default.css

.mistvideo {
  line-height: 1.2;
  font-size: 14.5px;
}
.mistvideo svg {
  margin: 2.5px;
}
.mistvideo-video { /* keep video centered if container is larger (when fillSpace:true) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mistvideo-subtitles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mistvideo-subtitles > * {
  margin-bottom: 0.5em;
  padding: 0.1em 0.3em;
  text-align: center;
  background: rgba(0,0,0,0.6);
  white-space: pre-wrap;
}
.mistvideo-subtitles > *:empty {
  display: none;
}
.mistvideo[data-fullscreen] .mistvideo-subtitles {
  font-size: 3vh;
}
.mistvideo-background { background-color: $background; }
.mistvideo-totalTime:before {
  content: '/';
  margin: 0.2em;
}
.mistvideo-progress {
  padding: 10px 0;
  margin: -10px 0;
  z-index: 2; /*keep above control bar*/
}
.mistvideo-progress > * {
  height: 2px;
  background-color: $progressBackground;
  opacity: 0.95;
  position: relative;
}
.mistvideo-novideo .mistvideo-progress > *,
.mistvideo-progress:hover > * {
  height: 10px;
}

.mistvideo-progress:not(:hover) > * {
  transition: height 0.25s ease-in 0.5s;
}
.mistvideo-progress .bar {
  height: inherit;
  width: 0;
  position: absolute;
  border-right: inherit;
  background-color: $accent;
  z-index: 2; /*keep above buffer bar(s)*/
  transition: width 0.2s;
}
.mistvideo-progress .buffer {
  height: inherit;
  width: 0;
  position: absolute;
  background-color: $semiFill;
}
.mistvideo-progress .bar:after {
  content: '';
  border: 5px solid $accent;
  border-radius: 5px;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime {
  text-align: center;
  display: block;
}

.mistvideo-play[data-state="playing"] svg.play {
  display: none;
}
.mistvideo-play[data-state="paused"] svg.pause {
  display: none;
}
.mistvideo-main { align-items: center; }

.mistvideo svg.icon.timeout {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0;
  margin-right: 0.25em;
  vertical-align: top;
}

.mist.largeplay, .mist.muted {
  position: absolute;
  opacity: 0.5;
}
.mist.largeplay {
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}
.mist.muted {
  top: 0;
  right: 0;
  margin: 1%;
  max-height: 20%;
  width: auto;
}
.mistvideo-secondaryVideo {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 50%;
  max-width: fit-content;
  max-height: fit-content;
}
.mistvideo-polling {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
}
.mistvideo-polling svg.icon.loading {
  z-index: 0;
  opacity: 1;
}
.mistvideo:not([data-hide-submenu]) .mistvideo-hoverWindow:hover >svg.icon.settings .fill,
.mistvideo[data-show-submenu] svg.icon.settings .fill,
.mistvideo[data-fullscreen] svg.icon.fullscreen .fill {
  fill: $accent;
}
.mistvideo[data-show-submenu] .mistvideo-submenu {
  right: 5px;
}
.mistvideo[data-hide-submenu] .mistvideo-submenu {
  right: -1000px !important;
}
.mistvideo[data-show-submenu] .mistvideo-controls {
  bottom: 0;
}
.mistvideo-currentTime {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mistvideo-currentTime .mistvideo-realtime,
.mistvideo-progress .mistvideo-realtime {
  opacity: 0.6;
}
.mistvideo-videobackground {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(1cm);
}
.mistvideo-videobackground * {
  position: absolute;
  filter: opacity(0);
  transition: filter 0s 2s;
  width: 100%;
  height: 100%;
}
.mistvideo-videobackground [data-front] {
  z-index: 1;
  filter: opacity(1);
  transition: filter 2s; /* the length/delay is intentionally less than the timer delay (5s): when it overlaps (even slightly), the transition is not shown which is fugly. */
}
.mistvideo-videocontainer { /* hide blur overflow from the videobackground */
  position: relative;
  overflow: hidden;
}
.mistvideo.casting .mistvideo-controls {
  bottom: 0;
}
.mistvideo.casting .mistvideo-video {
  filter: blur(1em);
}
.mistvideo.casting .mistvideo-maincontainer {
  overflow: hidden;
}
.mistvideo.casting .mistvideo-casting {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  font-size: 2em;
  text-shadow: 1px 1px 5px #000a;
} 


.mistvideo-error[data-passive] {
  bottom: auto;
  left: auto;
  height: auto;
  margin: 0.5em;
  padding: 0.5em;
}
.mistvideo-error[data-passive] .message {
  max-width: none;
}
.mistvideo-error .mistvideo-buttoncontainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button {
  white-space: nowrap;
}
.browser-ie .mist.icon.loading {
  animation: mistvideo-spin 1.5s infinite linear;
  transform-origin: 50% 50%;
}
.browser-ie .mist.icon.loading .spin { animation: none; }
.mistvideo-chromecast {
  display: flex;
}
.mistvideo google-cast-launcher {
  width: 24px;
  height: 24px;

  --connected-color: $fill;
  --disconnected-color: $semiFill;
}
.mistvideo google-cast-launcher.active {
  --connected-color: $accent;
  --disconnected-color: $fill;
}
.mistvideo.casting .mistvideo-slideshow_mode {
  display: none;
}