@oat-sa/tao-core-ui 1.68.0 → 2.0.0

package/src/mediaplayer/css/player.css

@@ -8,515 +8,426 @@ Usage:
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .mediaplayer {
-    position: relative;
-    border: 1px solid #333333;
-    border-radius: 2px;
-    border-radius: 2px;
-    background: black;
-    max-width: 100%;
-    min-height: 36px;
-    min-width: 200px;
-    direction: ltr;
-}
-
+  position: relative;
+  border: 1px solid rgb(51, 51, 51);
+  border-radius: 2px;
+  border-radius: 2px;
+  background: rgb(0, 0, 0);
+  max-width: 100%;
+  min-height: 36px;
+  min-width: 200px;
+  direction: ltr;
+}
 .mediaplayer.youtube .player {
-    width: 100%;
-    height: 0px;
-    padding-bottom: 56.25%;
+  width: 100%;
+  height: 0px;
+  padding-bottom: 56.25%;
 }
-
 .mediaplayer .icon-sound:before {
-    content: "\e6af";
+  content: "\e6af";
 }
-
 .mediaplayer .icon-mute:before {
-    content: "\e69e";
+  content: "\e69e";
 }
-
 .mediaplayer .error {
-    display: none;
+  display: none;
 }
-
 .mediaplayer .player {
-    position: relative;
-    height: calc(100% - 36px);
-    width: 100%;
+  position: relative;
+  height: calc(100% - 36px);
+  width: 100%;
 }
-
 .mediaplayer .player iframe {
-    pointer-events: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 .mediaplayer .player .media:not(.youtube) {
-    display: block;
-    width: 100%;
-    height: auto;
-    max-height: 100%;
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 100%;
 }
-
 .mediaplayer .player .player-overlay {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    opacity: 1;
-    background: transparent none;
-}
-
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 1;
+  background: transparent none;
+}
 .mediaplayer .player .player-overlay a.action span.icon {
-    font-family: 'tao' !important;
+  font-family: "tao" !important;
 }
-
 .mediaplayer .player .action {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%);
-    margin-top: -32px;
-    text-align: center;
-    text-decoration: none;
-    display: none;
-    font-size: 64px;
-    font-size: 6.4rem;
-    color: white;
-}
-
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-top: -32px;
+  text-align: center;
+  text-decoration: none;
+  display: none;
+  font-size: 64px;
+  font-size: 6.4rem;
+  color: rgb(255, 255, 255);
+}
 .mediaplayer .player .action .icon {
-    border-radius: 10px;
-    padding: 6px 12px;
-    background-color: black;
-    opacity: 0.2;
+  border-radius: 10px;
+  padding: 6px 12px;
+  background-color: rgb(0, 0, 0);
+  opacity: 0.2;
 }
-
 .mediaplayer .player .action .icon:hover {
-    opacity: 0.6;
+  opacity: 0.6;
 }
-
 .mediaplayer .player .action.reload {
-    width: 100%;
-    font-size: 50px;
-    line-height: 30px;
+  width: 100%;
+  font-size: 50px;
+  line-height: 30px;
 }
-
 .mediaplayer .player .action.reload:hover .icon {
-    opacity: 1;
-    font-family: 'tao' !important;
+  opacity: 1;
+  font-family: "tao" !important;
 }
-
 .mediaplayer .player .action.reload .icon {
-    opacity: 0.6;
-    background: none;
-    font-family: 'tao' !important;
+  opacity: 0.6;
+  background: none;
+  font-family: "tao" !important;
 }
-
 .mediaplayer .player .action.reload .message {
-    font-size: 20px;
+  font-size: 20px;
 }
-
 .mediaplayer .player .action.reload .icon, .mediaplayer .player .action.reload .message {
-    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
 }
-
 .mediaplayer .controls {
-    visibility: hidden;
-    position: relative;
-    padding: 5px;
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-    border-top: 1px solid #333333;
-    height: 36px;
-}
-
+  visibility: hidden;
+  position: relative;
+  padding: 5px;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  border-top: 1px solid rgb(51, 51, 51);
+  height: 36px;
+}
 .mediaplayer .controls .bar {
-    display: table-row;
+  display: table-row;
 }
-
 .mediaplayer .controls .control {
-    display: table-cell;
+  display: table-cell;
 }
-
 .mediaplayer .controls .actions {
-    position: relative;
-    transition: all, 0.1, ease-in-out, 0s;
+  position: relative;
+  transition: all, 0.1, ease-in-out, 0s;
 }
-
 .mediaplayer .controls .actions .action {
-    text-align: center;
-    line-height: 2.2rem;
-    width: 2.2rem;
-    height: 2.2rem;
-    text-decoration: none;
-    color: gainsboro;
-    transition: all, 0.2, ease-in-out, 0s;
-}
-
+  text-align: center;
+  line-height: 2.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  text-decoration: none;
+  color: rgb(220, 220, 220);
+  transition: all, 0.2, ease-in-out, 0s;
+}
 .mediaplayer .controls .actions .action:hover {
-    opacity: 1;
+  opacity: 1;
 }
-
 .mediaplayer .controls .actions .action .icon {
-    line-height: 2.2rem;
-    font-family: 'tao' !important;
+  line-height: 2.2rem;
+  font-family: "tao" !important;
 }
-
 .mediaplayer .controls .actions .play {
-    opacity: 0.7;
-    border-right: 1px solid #333333;
+  opacity: 0.7;
+  border-right: 1px solid rgb(51, 51, 51);
 }
-
 .mediaplayer .controls .actions .mute {
-    opacity: 0.8;
-    border-left: 1px solid #333333;
+  opacity: 0.8;
+  border-left: 1px solid rgb(51, 51, 51);
 }
-
 .mediaplayer .controls .slider {
-    cursor: pointer;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-    border-radius: 10px;
-    transition: all, 0.1, ease-in-out, 0s;
-    background: white;
-}
-
+  cursor: pointer;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  border-radius: 10px;
+  transition: all, 0.1, ease-in-out, 0s;
+  background: rgb(255, 255, 255);
+}
 .mediaplayer .controls .slider .noUi-background {
-    border-radius: 10px;
-    background: white;
+  border-radius: 10px;
+  background: rgb(255, 255, 255);
 }
-
 .mediaplayer .controls .slider.noUi-connect, .mediaplayer .controls .slider .noUi-connect {
-    border-radius: 10px;
-    background: #333333;
+  border-radius: 10px;
+  background: rgb(51, 51, 51);
 }
-
 .mediaplayer .controls .slider .noUi-handle {
-    width: 11px;
-    height: 11px;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-    border-radius: 10px;
-    background: #858585;
-}
-
+  width: 11px;
+  height: 11px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  border-radius: 10px;
+  background: #858585;
+}
 .mediaplayer .controls .slider .noUi-handle:hover {
-    background: #5c5c5c;
+  background: #5c5c5c;
 }
-
 .mediaplayer .controls .slider .noUi-handle:after {
-    display: none;
+  display: none;
 }
-
 .mediaplayer .controls .slider.noUi-horizontal {
-    height: 9px;
+  height: 9px;
 }
-
 .mediaplayer .controls .slider.noUi-horizontal .noUi-handle {
-    top: -2px;
+  top: -2px;
 }
-
 .mediaplayer .controls .slider.noUi-vertical {
-    width: 9px;
+  width: 9px;
 }
-
 .mediaplayer .controls .slider.noUi-vertical .noUi-handle {
-    left: -2px;
+  left: -2px;
 }
-
 .mediaplayer .controls .infos {
-    cursor: default;
-    margin: 0 1rem;
-    line-height: 2.2rem;
-    color: #999;
-    font-size: 10px;
-    font-size: 1rem;
-    font-weight: bold;
-}
-
-.mediaplayer .controls .infos [data-control="time-end"]:before {
-    content: ' / ';
-}
-
+  cursor: default;
+  margin: 0 1rem;
+  line-height: 2.2rem;
+  color: #999;
+  font-size: 10px;
+  font-size: 1rem;
+  font-weight: bold;
+}
+.mediaplayer .controls .infos [data-control=time-end]:before {
+  content: " / ";
+}
 .mediaplayer .controls .timer {
-    width: 8rem;
-    text-align: center;
+  width: 8rem;
+  text-align: center;
 }
-
 .mediaplayer .controls .seek {
-    position: relative;
-    height: 1rem;
-    margin-top: 5px;
-    padding-left: 1rem;
+  position: relative;
+  height: 1rem;
+  margin-top: 5px;
+  padding-left: 1rem;
 }
-
 .mediaplayer .controls .playback {
-    margin-right: 1rem;
-    width: 2.2rem;
+  margin-right: 1rem;
+  width: 2.2rem;
 }
-
 .mediaplayer .controls .sound {
-    width: 2.2rem;
-    height: 2.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
 }
-
 .mediaplayer .controls .sound .action {
-    position: relative;
-    z-index: 1001;
+  position: relative;
+  z-index: 1001;
 }
-
 .mediaplayer .controls .sound .volume {
-    cursor: default;
-    position: absolute;
-    z-index: 1000;
-    background-color: black;
-    margin: 1px 2px;
-    padding: 10px 0;
-    width: 100%;
-    height: 0;
-    top: 0;
-    left: -1px;
-    opacity: 0;
-    text-align: center;
-    border: solid 1px #333333;
-    pointer-events: none;
-    overflow: hidden;
-    transition: height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms;
-}
-
+  cursor: default;
+  position: absolute;
+  z-index: 1000;
+  background-color: rgb(0, 0, 0);
+  margin: 1px 2px;
+  padding: 10px 0;
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: -1px;
+  opacity: 0;
+  text-align: center;
+  border: solid 1px rgb(51, 51, 51);
+  pointer-events: none;
+  overflow: hidden;
+  transition: height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms;
+}
 .mediaplayer .controls .sound .volume.up, .mediaplayer .controls .sound .volume.down {
-    height: 120px;
-    opacity: 1;
-    pointer-events: auto;
+  height: 120px;
+  opacity: 1;
+  pointer-events: auto;
 }
-
 .mediaplayer .controls .sound .volume.up .slider, .mediaplayer .controls .sound .volume.down .slider {
-    display: inline-block;
-    opacity: 1;
-    transition: opacity 50ms linear 200ms;
-    transition: opacity 50ms linear 200ms;
+  display: inline-block;
+  opacity: 1;
+  transition: opacity 50ms linear 200ms;
+  transition: opacity 50ms linear 200ms;
 }
-
 .mediaplayer .controls .sound .volume.up {
-    top: -127px;
-    transition: height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear;
+  top: -127px;
+  transition: height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear;
 }
-
 .mediaplayer .controls .sound .volume.down {
-    top: 30px;
-    transition: height 300ms ease-out 50ms, opacity 50ms linear;
+  top: 30px;
+  transition: height 300ms ease-out 50ms, opacity 50ms linear;
 }
-
 .mediaplayer .controls .sound .slider {
-    opacity: 0;
-    display: none;
+  opacity: 0;
+  display: none;
 }
-
 .mediaplayer .controls .sound .slider .noUi-handle {
-    cursor: pointer;
-    width: 9px;
-    height: 9px;
+  cursor: pointer;
+  width: 9px;
+  height: 9px;
 }
-
 .mediaplayer .controls .sound .slider.noUi-horizontal {
-    width: 50px;
-    height: 7px;
+  width: 50px;
+  height: 7px;
 }
-
 .mediaplayer .controls .sound .slider.noUi-vertical {
-    width: 7px;
-    height: 100px;
+  width: 7px;
+  height: 100px;
 }
-
-.mediaplayer .controls [data-control="play"] {
-    display: none;
+.mediaplayer .controls [data-control=play] {
+  display: none;
 }
-
-.mediaplayer .controls [data-control="pause"] {
-    display: none;
+.mediaplayer .controls [data-control=pause] {
+  display: none;
 }
-
-.mediaplayer .controls [data-control="mute"] {
-    display: inline-block;
+.mediaplayer .controls [data-control=mute] {
+  display: inline-block;
 }
-
-.mediaplayer .controls [data-control="unmute"] {
-    display: none;
+.mediaplayer .controls [data-control=unmute] {
+  display: none;
 }
-
 .mediaplayer.video .sound .volume, .mediaplayer.youtube .sound .volume {
-    width: 2.8rem;
-    bottom: 2.2rem;
-    right: 0;
+  width: 2.8rem;
+  bottom: 2.2rem;
+  right: 0;
 }
-
 .mediaplayer.audio .sound .volume {
-    height: 2.2rem;
-    right: 2.2rem;
-    bottom: 0;
-}
-
-.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"] {
-    display: flex;
-    align-items: center;
-    background-color: #000;
-    margin: 0;
-    flex-wrap: wrap;
-    padding: 5px 5px 5px 50px;
-    text-align: left;
-    line-height: 2.3rem;
-}
-
-.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload {
-    width: calc(100% + 2px);
-    font-size: 20px;
-    line-height: 20px;
-    min-height: 36px;
-}
-
-.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload .icon {
-    text-shadow: none;
-    position: absolute;
-    left: 0;
-    font-size: 2rem;
-    font-weight: bold;
-}
-
-.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload .message {
-    text-shadow: none;
-    font-size: 1.3rem;
-    margin-right: 5px;
-}
-
+  height: 2.2rem;
+  right: 2.2rem;
+  bottom: 0;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control=reload] {
+  display: flex;
+  align-items: center;
+  background-color: #000;
+  margin: 0;
+  flex-wrap: wrap;
+  padding: 5px 5px 5px 50px;
+  text-align: left;
+  line-height: 2.3rem;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control=reload].reload {
+  width: calc(100% + 2px);
+  font-size: 20px;
+  line-height: 20px;
+  min-height: 36px;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control=reload].reload .icon {
+  text-shadow: none;
+  position: absolute;
+  left: 0;
+  font-size: 2rem;
+  font-weight: bold;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control=reload].reload .message {
+  text-shadow: none;
+  font-size: 1.3rem;
+  margin-right: 5px;
+}
 .mediaplayer.ready .controls {
-    visibility: visible;
+  visibility: visible;
 }
-
 .mediaplayer.ready.paused.canplay .player-overlay {
-    cursor: pointer;
-    font-family: 'tao' !important;
+  cursor: pointer;
+  font-family: "tao" !important;
 }
-
 .mediaplayer.ready.paused.canplay .player-overlay a.action span.icon {
-    font-family: 'tao' !important;
+  font-family: "tao" !important;
 }
-
-.mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control="play"] {
-    display: inline-block;
+.mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control=play] {
+  display: inline-block;
 }
-
-.mediaplayer.ready.paused.canplay.youtube.ended .player:hover [data-control="play"], .mediaplayer.ready.paused.canplay:not(.preview) .player:hover [data-control="play"] {
-    display: none;
+.mediaplayer.ready.paused.canplay.youtube.ended .player:hover [data-control=play], .mediaplayer.ready.paused.canplay:not(.preview) .player:hover [data-control=play] {
+  display: none;
 }
-
 .mediaplayer.ready.playing.canpause .player-overlay {
-    cursor: pointer;
+  cursor: pointer;
 }
-
 .mediaplayer.ready.playing.canpause .player-overlay .action .icon {
-    font-family: 'tao' !important;
+  font-family: "tao" !important;
 }
-
-.mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control="pause"] {
-    display: inline-block;
+.mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control=pause] {
+  display: inline-block;
 }
-
 .mediaplayer.playing.canpause .action .icon {
-    font-family: 'tao' !important;
+  font-family: "tao" !important;
 }
-
-.mediaplayer.playing.canpause .controls [data-control="pause"] {
-    display: inline-block;
+.mediaplayer.playing.canpause .controls [data-control=pause] {
+  display: inline-block;
 }
-
 .mediaplayer.paused.canplay .action .icon {
-    font-family: 'tao' !important;
+  font-family: "tao" !important;
 }
-
-.mediaplayer.paused.canplay .controls [data-control="play"] {
-    display: inline-block;
+.mediaplayer.paused.canplay .controls [data-control=play] {
+  display: inline-block;
 }
-
-.mediaplayer.paused.canplay .controls [data-control="pause"] {
-    display: none;
+.mediaplayer.paused.canplay .controls [data-control=pause] {
+  display: none;
 }
-
-.mediaplayer.muted .controls [data-control="mute"] {
-    display: none;
+.mediaplayer.muted .controls [data-control=mute] {
+  display: none;
 }
-
-.mediaplayer.muted .controls [data-control="unmute"] {
-    display: inline-block;
+.mediaplayer.muted .controls [data-control=unmute] {
+  display: inline-block;
 }
-
 .mediaplayer.nogui .player iframe {
-    pointer-events: inherit;
+  pointer-events: inherit;
 }
-
 .mediaplayer.nogui .player-overlay {
-    display: none !important;
+  display: none !important;
 }
-
 .mediaplayer.nogui .controls {
-    display: none !important;
+  display: none !important;
 }
-
 .mediaplayer.error:not(.stalled) .media, .mediaplayer.error:not(.stalled) .controls {
-    display: none;
+  display: none;
 }
-
 .mediaplayer.error:not(.stalled) .error {
-    display: table;
-    text-align: center;
-    width: 100%;
-    height: 100%;
+  display: table;
+  text-align: center;
+  width: 100%;
+  height: 100%;
 }
-
 .mediaplayer.error:not(.stalled) .error .message {
-    color: #ba122b;
-    display: table-cell;
-    vertical-align: middle;
+  color: rgb(186, 18, 43);
+  display: table-cell;
+  vertical-align: middle;
 }
-
 .mediaplayer.loading:not(.stalled)::before {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 30px;
-    height: 30px;
-    margin-top: -15px;
-    margin-left: -15px;
-    border-radius: 50%;
-    border: 1px solid #ccc;
-    border-top-color: #07d;
-    animation: spinner .6s linear infinite;
-}
-
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -15px;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  border-top-color: #07d;
+  animation: spinner 0.6s linear infinite;
+}
 @keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
-
 .mediaplayer.stalled .video {
-    filter: blur(4px);
-    opacity: 0.4;
+  filter: blur(4px);
+  opacity: 0.4;
 }
-
-.mediaplayer.stalled .player-overlay [data-control="reload"] {
-    display: inline-block;
+.mediaplayer.stalled .player-overlay [data-control=reload] {
+  display: inline-block;
 }
-
-.mediaplayer.video:not(.preview):not(.error) .player-overlay [data-control="start"] {
-    display: inline-block;
+.mediaplayer.video:not(.preview):not(.error) .player-overlay [data-control=start] {
+  display: inline-block;
 }
-
 /*# sourceMappingURL=player.css.map */