@oat-sa/tao-core-ui 1.60.0 → 1.60.2

package/src/mediaplayer/scss/player.scss

@@ -1,540 +1,569 @@
-@import "inc/bootstrap";
-
-$playerActionSize: 2.2rem;
-$playerActionSpace: 1rem;
-$playerBackground: black();
-$playerBorder: $darkBar;
-$playerText: #999;
-$playerIcon: $darkBarIcon;
-$playerTextOverlay: white();
-$playerSliderBorder: $uiGeneralContentBorder;
-$playerSliderBackground: $uiGeneralContentBg;
-$playerSliderColor: $darkBar;
-$playerSliderHandle: whiten($playerSliderColor, .4);
-$playerSliderHightlight: whiten($playerSliderColor, .2);
-$controlsHeight: 36px;
-
-.mediaplayer {
-    position: relative;
-    @include simple-border($playerBorder);
-    @include border-radius(2);
-    background: $playerBackground;
-    max-width: 100%;
-    min-height: $controlsHeight;
-    min-width: 200px;
-    direction: ltr;
-
-    &.youtube {
-        .player {
-            width: 100%;
-            height: 0px;
-            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos
-        }
-    }
-    .icon-sound:before {
-        @include icon-audio();
-    }
-    .icon-mute:before {
-        @include icon-result-nok();
-    }
-
-    .error {
-        display: none;
-    }
-
-    .player {
-        position: relative;
-        height: calc(100% - #{$controlsHeight});
-        width: 100%;
-
-        iframe {
-            pointer-events: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%
-        }
-
-        .media:not(.youtube) {
-            display: block;
-            width: 100%;
-            height: auto;
-            max-height: 100%;
-        }
-
-        .player-overlay {
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            opacity: 1;
-            background: transparent none;
-        }
-
-        .action {
-            position: absolute;
-            z-index: 2;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%);
-            margin-top: -32px;
-            text-align: center;
-            text-decoration: none;
-            display: none;
-            @include font-size(64);
-            color: $playerTextOverlay;
-
-            .icon {
-                @include border-radius(10);
-                padding: 6px 12px;
-                background-color: $playerBackground;
-                opacity: 0.2;
-
-                &:hover {
-                    opacity: 0.6;
-                }
-            }
-
-            &.reload {
-                width: 100%;
-                font-size: 50px;
-                line-height: 30px;
-
-                &:hover {
-                    .icon {
-                        opacity: 1;
-                    }
-                }
-
-                .icon {
-                    opacity: 0.6;
-                    background: none;
-                }
-                .message {
-                    font-size: 20px;
-                }
-
-                .icon, .message {
-                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
-                }
-            }
-        }
-    }
-
-    .controls {
-        visibility: hidden;
-        position: relative;
-        padding: 5px;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-        border-top: 1px solid $playerBorder;
-        height: $controlsHeight;
-
-        .bar {
-            display: table-row;
-        }
-        .control {
-            display: table-cell;
-        }
-
-        .actions {
-            position: relative;
-            @include transition(all, 0.1,ease-in-out);
-
-            .action {
-                text-align: center;
-                line-height: $playerActionSize;
-                width: $playerActionSize;
-                height: $playerActionSize;
-                text-decoration: none;
-                color: $playerIcon;
-                @include transition(all, 0.2, ease-in-out);
-
-                &:hover {
-                    opacity: 1;
-                }
-
-                .icon {
-                    line-height: $playerActionSize;
-                }
-            }
-
-            .play {
-                opacity: 0.7;
-                border-right: 1px solid $playerBorder;
-            }
-
-            .mute {
-                opacity: 0.8;
-                border-left: 1px solid $playerBorder;
-            }
-        }
-
-        .slider {
-            cursor: pointer;
-            @include simple-border($playerSliderBorder);
-            @include border-radius(10);
-            @include transition(all, 0.1, ease-in-out);
-            background: $playerSliderBackground;
-
-            .noUi-background {
-                @include border-radius(10);
-                background: $playerSliderBackground;
-            }
-            &.noUi-connect, .noUi-connect {
-                @include border-radius(10);
-                background: $playerSliderColor;
-            }
-
-            .noUi-handle {
-                width: 11px;
-                height: 11px;
-                @include simple-border($playerSliderBorder);
-                @include border-radius(10);
-                background: $playerSliderHandle;
-            }
-            .noUi-handle:hover {
-                background: $playerSliderHightlight;
-            }
-            .noUi-handle:after {
-                display: none;
-            }
-
-            &.noUi-horizontal {
-                height: 9px;
-
-                .noUi-handle {
-                    top: -2px;
-                }
-            }
-
-            &.noUi-vertical {
-                width: 9px;
-
-                .noUi-handle {
-                    left: -2px;
-                }
-            }
-        }
-
-        .infos {
-            cursor: default;
-
-            margin: 0 $playerActionSpace;
-            line-height: $playerActionSize;
-
-            color: $playerText;
-            @include font-size(10);
-            font-weight: bold;
-
-            [data-control="time-end"]:before {
-                content: ' / ';
-            }
-        }
-
-        .timer {
-            width: 8rem;
-            text-align: center;
-        }
-
-        .seek {
-            position: relative;
-            height: 1rem;
-            margin-top: 5px;
-            padding-left: $playerActionSpace;
-        }
-
-        .playback {
-            margin-right: $playerActionSpace;
-            width: $playerActionSize;
-        }
-
-        .sound {
-            width: $playerActionSize;
-            height: $playerActionSize;
-
-            .action {
-                position: relative;
-                z-index: 1001;
-            }
-            .volume {
-                cursor: default;
-                position: absolute;
-                z-index: 1000;
-                background-color: $playerBackground;
-                margin: 1px 2px;
-                padding: 10px 0;
-                width: 100%;
-                height: 0;
-                top: 0;
-                left: -1px;
-                opacity : 0;
-                text-align: center;
-                border: solid 1px $playerBorder;
-                pointer-events: none;
-                overflow: hidden;
-                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);
-
-                &.up, &.down {
-                    height: 120px;
-                    opacity : 1;
-                    pointer-events: auto;
-                    .slider {
-                        display: inline-block;
-                        opacity : 1;
-                        transition: opacity 50ms linear 200ms;
-                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);
-                    }
-                }
-                &.up {
-                    top: -127px;
-                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);
-                }
-                &.down {
-                    top: 30px;
-                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);
-                }
-            }
-
-            .slider {
-                opacity : 0;
-                display: none;
-                .noUi-handle {
-                    cursor: pointer;
-                    width: 9px;
-                    height: 9px;
-                }
-
-                &.noUi-horizontal {
-                    width: 50px;
-                    height: 7px;
-                }
-
-                &.noUi-vertical {
-                    width: 7px;
-                    height: 100px;
-                }
-            }
-        }
-
-        [data-control="play"] {
-            display: none;
-        }
-        [data-control="pause"] {
-            display: none;
-        }
-
-        [data-control="mute"] {
-            display: inline-block;
-        }
-        [data-control="unmute"] {
-            display: none;
-        }
-    }
-
-    &.video, &.youtube {
-        .sound {
-            .volume {
-                width: 2.8rem;
-                bottom: $playerActionSize;
-                right: 0;
-            }
-        }
-    }
-
-    &.audio {
-        .sound {
-            .volume {
-                height: $playerActionSize;
-                right: $playerActionSize;
-                bottom: 0;
-            }
-        }
-
-        &.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;
-                        &.reload {
-                            width: calc(100% + 2px);
-                            font-size: 20px;
-                            line-height: 20px;
-                            min-height: 36px;
-
-                            .icon {
-                                text-shadow: none;
-                                position: absolute;
-                                left: 0;
-                                font-size: 2rem;
-                                font-weight: bold;
-                            }
-
-                            .message {
-                                text-shadow: none;
-                                font-size: 1.3rem;
-                                margin-right: 5px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &.ready {
-        .controls {
-            visibility: visible;
-        }
-
-        &.paused.canplay {
-            .player-overlay {
-                cursor: pointer;
-            }
-
-            &:not(.audio) {
-                .player:hover {
-                    [data-control="play"] {
-                        display: inline-block;
-                    }
-                }
-            }
-
-            &.youtube.ended, &:not(.preview) {
-                .player:hover {
-                    [data-control="play"] {
-                        display: none;
-                    }
-                }
-            }
-        }
-
-        &.playing.canpause {
-            .player-overlay {
-                cursor: pointer;
-            }
-
-            &:not(.audio) {
-                .player:hover {
-                    [data-control="pause"] {
-                        display: inline-block;
-                    }
-                }
-            }
-        }
-    }
-
-    &.playing.canpause {
-        .controls {
-            [data-control="pause"] {
-                display: inline-block;
-            }
-        }
-    }
-
-    &.paused.canplay {
-        .controls {
-            [data-control="play"] {
-                display: inline-block;
-            }
-            [data-control="pause"] {
-                display: none;
-            }
-        }
-    }
-
-    &.muted {
-        .controls {
-            [data-control="mute"] {
-                display: none;
-            }
-            [data-control="unmute"] {
-                display: inline-block;
-            }
-        }
-    }
-
-    &.nogui {
-        .player {
-            iframe {
-                pointer-events: inherit;
-            }
-        }
-        .player-overlay {
-            display: none !important;
-        }
-        .controls {
-            display: none !important;
-        }
-    }
-
-    &.error:not(.stalled) {
-        .media, .controls {
-            display: none;
-        }
-
-        .error {
-            display: table;
-            text-align: center;
-            width: 100%;
-            height: 100%;
-
-            .message {
-                color: $error;
-                display: table-cell;
-                vertical-align: middle;
-            }
-        }
-    }
-
-    &.loading:not(.stalled)::before {
-        @keyframes spinner {
-            to { transform: rotate(360deg); }
-        }
-
-        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;
-    }
-
-    &.stalled {
-        .video {
-            filter: blur(4px);
-            opacity: 0.4;
-        }
-        .player-overlay {
-            [data-control="reload"] {
-                display: inline-block;
-            }
-        }
-    }
-
-    &.video:not(.preview):not(.error) {
-        .player-overlay {
-            [data-control="start"] {
-                display: inline-block;
-            }
-        }
-    }
-}
+@import "inc/bootstrap";
+
+$playerActionSize: 2.2rem;
+$playerActionSpace: 1rem;
+$playerBackground: black();
+$playerBorder: $darkBar;
+$playerText: #999;
+$playerIcon: $darkBarIcon;
+$playerTextOverlay: white();
+$playerSliderBorder: $uiGeneralContentBorder;
+$playerSliderBackground: $uiGeneralContentBg;
+$playerSliderColor: $darkBar;
+$playerSliderHandle: whiten($playerSliderColor, .4);
+$playerSliderHightlight: whiten($playerSliderColor, .2);
+$controlsHeight: 36px;
+
+.mediaplayer {
+    position: relative;
+    @include simple-border($playerBorder);
+    @include border-radius(2);
+    background: $playerBackground;
+    max-width: 100%;
+    min-height: $controlsHeight;
+    min-width: 200px;
+    direction: ltr;
+
+    &.youtube {
+        .player {
+            width: 100%;
+            height: 0px;
+            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos
+        }
+    }
+    .icon-sound:before {
+        @include icon-audio();
+    }
+    .icon-mute:before {
+        @include icon-result-nok();
+    }
+
+    .error {
+        display: none;
+    }
+
+    .player {
+        position: relative;
+        height: calc(100% - #{$controlsHeight});
+        width: 100%;
+
+        iframe {
+            pointer-events: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%
+        }
+
+        .media:not(.youtube) {
+            display: block;
+            width: 100%;
+            height: auto;
+            max-height: 100%;
+        }
+
+        .player-overlay {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            opacity: 1;
+            background: transparent none;
+            a.action {
+                 span.icon {
+                    font-family: 'tao' !important;
+                }
+            }
+        }
+
+        .action {
+            position: absolute;
+            z-index: 2;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%);
+            margin-top: -32px;
+            text-align: center;
+            text-decoration: none;
+            display: none;
+            @include font-size(64);
+            color: $playerTextOverlay;
+
+            .icon {
+                @include border-radius(10);
+                padding: 6px 12px;
+                background-color: $playerBackground;
+                opacity: 0.2;
+
+                &:hover {
+                    opacity: 0.6;
+                }
+            }
+
+            &.reload {
+                width: 100%;
+                font-size: 50px;
+                line-height: 30px;
+
+                &:hover {
+                    .icon {
+                        opacity: 1;
+                        font-family: 'tao' !important;
+                    }
+                }
+
+                .icon {
+                    opacity: 0.6;
+                    background: none;
+                    font-family: 'tao' !important;
+                }
+                .message {
+                    font-size: 20px;
+                }
+
+                .icon, .message {
+                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+                }
+            }
+        }
+    }
+
+    .controls {
+        visibility: hidden;
+        position: relative;
+        padding: 5px;
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+        border-top: 1px solid $playerBorder;
+        height: $controlsHeight;
+
+        .bar {
+            display: table-row;
+        }
+        .control {
+            display: table-cell;
+        }
+
+        .actions {
+            position: relative;
+            @include transition(all, 0.1,ease-in-out);
+
+            .action {
+                text-align: center;
+                line-height: $playerActionSize;
+                width: $playerActionSize;
+                height: $playerActionSize;
+                text-decoration: none;
+                color: $playerIcon;
+                @include transition(all, 0.2, ease-in-out);
+
+                &:hover {
+                    opacity: 1;
+                }
+
+                .icon {
+                    line-height: $playerActionSize;
+                    font-family: 'tao' !important;
+                }
+            }
+
+            .play {
+                opacity: 0.7;
+                border-right: 1px solid $playerBorder;
+            }
+
+            .mute {
+                opacity: 0.8;
+                border-left: 1px solid $playerBorder;
+            }
+        }
+
+        .slider {
+            cursor: pointer;
+            @include simple-border($playerSliderBorder);
+            @include border-radius(10);
+            @include transition(all, 0.1, ease-in-out);
+            background: $playerSliderBackground;
+
+            .noUi-background {
+                @include border-radius(10);
+                background: $playerSliderBackground;
+            }
+            &.noUi-connect, .noUi-connect {
+                @include border-radius(10);
+                background: $playerSliderColor;
+            }
+
+            .noUi-handle {
+                width: 11px;
+                height: 11px;
+                @include simple-border($playerSliderBorder);
+                @include border-radius(10);
+                background: $playerSliderHandle;
+            }
+            .noUi-handle:hover {
+                background: $playerSliderHightlight;
+            }
+            .noUi-handle:after {
+                display: none;
+            }
+
+            &.noUi-horizontal {
+                height: 9px;
+
+                .noUi-handle {
+                    top: -2px;
+                }
+            }
+
+            &.noUi-vertical {
+                width: 9px;
+
+                .noUi-handle {
+                    left: -2px;
+                }
+            }
+        }
+
+        .infos {
+            cursor: default;
+
+            margin: 0 $playerActionSpace;
+            line-height: $playerActionSize;
+
+            color: $playerText;
+            @include font-size(10);
+            font-weight: bold;
+
+            [data-control="time-end"]:before {
+                content: ' / ';
+            }
+        }
+
+        .timer {
+            width: 8rem;
+            text-align: center;
+        }
+
+        .seek {
+            position: relative;
+            height: 1rem;
+            margin-top: 5px;
+            padding-left: $playerActionSpace;
+        }
+
+        .playback {
+            margin-right: $playerActionSpace;
+            width: $playerActionSize;
+        }
+
+        .sound {
+            width: $playerActionSize;
+            height: $playerActionSize;
+
+            .action {
+                position: relative;
+                z-index: 1001;
+            }
+            .volume {
+                cursor: default;
+                position: absolute;
+                z-index: 1000;
+                background-color: $playerBackground;
+                margin: 1px 2px;
+                padding: 10px 0;
+                width: 100%;
+                height: 0;
+                top: 0;
+                left: -1px;
+                opacity : 0;
+                text-align: center;
+                border: solid 1px $playerBorder;
+                pointer-events: none;
+                overflow: hidden;
+                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);
+
+                &.up, &.down {
+                    height: 120px;
+                    opacity : 1;
+                    pointer-events: auto;
+                    .slider {
+                        display: inline-block;
+                        opacity : 1;
+                        transition: opacity 50ms linear 200ms;
+                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);
+                    }
+                }
+                &.up {
+                    top: -127px;
+                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);
+                }
+                &.down {
+                    top: 30px;
+                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);
+                }
+            }
+
+            .slider {
+                opacity : 0;
+                display: none;
+                .noUi-handle {
+                    cursor: pointer;
+                    width: 9px;
+                    height: 9px;
+                }
+
+                &.noUi-horizontal {
+                    width: 50px;
+                    height: 7px;
+                }
+
+                &.noUi-vertical {
+                    width: 7px;
+                    height: 100px;
+                }
+            }
+        }
+
+        [data-control="play"] {
+            display: none;
+        }
+        [data-control="pause"] {
+            display: none;
+        }
+
+        [data-control="mute"] {
+            display: inline-block;
+        }
+        [data-control="unmute"] {
+            display: none;
+        }
+    }
+
+    &.video, &.youtube {
+        .sound {
+            .volume {
+                width: 2.8rem;
+                bottom: $playerActionSize;
+                right: 0;
+            }
+        }
+    }
+
+    &.audio {
+        .sound {
+            .volume {
+                height: $playerActionSize;
+                right: $playerActionSize;
+                bottom: 0;
+            }
+        }
+
+        &.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;
+                        &.reload {
+                            width: calc(100% + 2px);
+                            font-size: 20px;
+                            line-height: 20px;
+                            min-height: 36px;
+
+                            .icon {
+                                text-shadow: none;
+                                position: absolute;
+                                left: 0;
+                                font-size: 2rem;
+                                font-weight: bold;
+                            }
+
+                            .message {
+                                text-shadow: none;
+                                font-size: 1.3rem;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.ready {
+        .controls {
+            visibility: visible;
+        }
+
+        &.paused.canplay {
+            .player-overlay {
+                cursor: pointer;
+                font-family: 'tao' !important;
+                a.action {
+                    span.icon {
+                        font-family: 'tao' !important;
+                    }
+                }
+            }
+
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="play"] {
+                        display: inline-block;
+                    }
+                }
+            }
+
+            &.youtube.ended, &:not(.preview) {
+                .player:hover {
+                    [data-control="play"] {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        &.playing.canpause {
+            .player-overlay {
+                cursor: pointer;
+                .action {
+                    .icon {
+                        font-family: 'tao' !important;
+                    }
+                }
+            }
+
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="pause"] {
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+    }
+
+    &.playing.canpause {
+        .action {
+            .icon {
+                font-family: 'tao' !important;
+            }
+        }
+        .controls {
+            [data-control="pause"] {
+                display: inline-block;
+            }
+        }
+    }
+
+    &.paused.canplay {
+        .action {
+            .icon {
+                font-family: 'tao' !important;
+            }
+        }
+        .controls {
+            [data-control="play"] {
+                display: inline-block;
+            }
+            [data-control="pause"] {
+                display: none;
+            }
+        }
+    }
+
+    &.muted {
+        .controls {
+            [data-control="mute"] {
+                display: none;
+            }
+            [data-control="unmute"] {
+                display: inline-block;
+            }
+        }
+    }
+
+    &.nogui {
+        .player {
+            iframe {
+                pointer-events: inherit;
+            }
+        }
+        .player-overlay {
+            display: none !important;
+        }
+        .controls {
+            display: none !important;
+        }
+    }
+
+    &.error:not(.stalled) {
+        .media, .controls {
+            display: none;
+        }
+
+        .error {
+            display: table;
+            text-align: center;
+            width: 100%;
+            height: 100%;
+
+            .message {
+                color: $error;
+                display: table-cell;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    &.loading:not(.stalled)::before {
+        @keyframes spinner {
+            to { transform: rotate(360deg); }
+        }
+
+        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;
+    }
+
+    &.stalled {
+        .video {
+            filter: blur(4px);
+            opacity: 0.4;
+        }
+        .player-overlay {
+            [data-control="reload"] {
+                display: inline-block;
+            }
+        }
+    }
+
+    &.video:not(.preview):not(.error) {
+        .player-overlay {
+            [data-control="start"] {
+                display: inline-block;
+            }
+        }
+    }
+}