npm - @oat-sa/tao-core-ui - Versions diffs - 1.42.0 → 1.44.2 - Mend

@oat-sa/tao-core-ui 1.42.0 → 1.44.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/mediaplayer/css/player.css +21 -2
package/dist/mediaplayer/css/player.css.map +1 -1
package/dist/mediaplayer/players/html5.js +2 -2
package/dist/mediaplayer/support.js +17 -3
package/dist/mediaplayer.js +19 -5
package/dist/taskQueue/taskQueueModel.js +1 -1
package/package.json +14 -9
package/scss/inc/_forms.scss +8 -0
package/scss/inc/_select2.scss +8 -2
package/src/mediaplayer/css/player.css +21 -2
package/src/mediaplayer/css/player.css.map +1 -1
package/src/mediaplayer/players/html5.js +3 -2
package/src/mediaplayer/scss/player.scss +36 -6
package/src/mediaplayer/support.js +17 -4
package/src/mediaplayer/tpl/player.tpl +1 -2
package/src/mediaplayer.js +17 -4
package/src/taskQueue/taskQueueModel.js +4 -4

package/dist/mediaplayer/css/player.css CHANGED Viewed

@@ -342,6 +342,25 @@ Usage:
     bottom: 0;
 }
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"] {
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload {
+    width: 100%;
+    font-size: 20px;
+    line-height: 20px;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload .message {
+    font-size: 10px;
+    line-height: 15px;
+    margin-top: 2px;
+}
 .mediaplayer.ready .controls {
     visibility: visible;
 }
@@ -350,7 +369,7 @@ Usage:
     cursor: pointer;
 }
-.mediaplayer.ready.paused.canplay .player:hover [data-control="play"] {
+.mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control="play"] {
     display: inline-block;
 }
@@ -362,7 +381,7 @@ Usage:
     cursor: pointer;
 }
-.mediaplayer.ready.playing.canpause .player:hover [data-control="pause"] {
+.mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control="pause"] {
     display: inline-block;
 }

package/dist/mediaplayer/css/player.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n @each $icon in $iconList {\n #{$prefix}#{$icon} {\n background-position: $x * 1px $y * 1px;\n }\n @if $direction == 'x' {\n $x: $x - 16;\n } @else {\n $y: $y - 16;\n }\n }\n}\n\n/\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n first param - color, second - position. Also you can use px or other valid units for set position.\n/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n $percentage: 0;\n $units: '%';\n $count: length($colorList);\n $increment: 100 / ($count - 1);\n $css: #{$direction + ', '};\n $sep: ', ';\n @each $colorItem in $colorList {\n $color: $colorItem;\n @if (length($colorItem) > 1) {\n $color: nth($colorItem, 1);\n $percentage: nth($colorItem, 2);\n $units: '';\n }\n @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n $sep: '';\n }\n $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n $percentage: $percentage + $increment;\n }\n background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n $gridPx: 840;\n $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n $spanPercent: widthPerc($spanPx, $gridPx);\n $marginPercent: widthPerc($gutter, $gridPx);\n margin-left: $marginPercent;\n width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n @if $whatToPrefix == 'property' {\n @each $prefix in $prefixes {\n #{$prefix + $property}: #{$value};\n }\n }\n @else if $whatToPrefix == 'value' {\n @each $prefix in $prefixes {\n #{$property}: #{$prefix + $value};\n }\n }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n flex-item-align: stretch;\n -ms-flex-item-align: stretch;\n @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n // if both, min width and width are set, width will win this conflict\n @if ($width == auto) {\n @if ($minWidth != 1) {\n @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n }\n @else {\n @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n // for a discussion auto vs. main-size\n @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n }\n }\n @else {\n @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n border: 1px solid $color;\n border-radius: 2px;\n -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n -moz-border-radius: $radius * 1px;\n -webkit-border-radius: $radius * 1px;\n border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n @if $important == true {\n font-size: ($remPx) * 1px !important;\n font-size: ($remPx / 10) * 1rem !important;\n }\n @else {\n font-size: ($remPx) * 1px;\n font-size: ($remPx / 10) * 1rem;\n }\n}\n\n\n@mixin keyframes($name) {\n @-o-keyframes #{$name} { @content };\n @-moz-keyframes #{$name} { @content };\n @-webkit-keyframes #{$name} { @content };\n @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n $animation: animation;\n @if $type != '' {\n $animation: $animation + '-' + $type;\n }\n @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n @include keyframes(fade) {\n 0% {opacity:0;}\n 50% {opacity:1;}\n 100% {opacity:0;}\n }\n\n @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n @include font-size(20);\n font-family: $headingFont;\n font-style: normal;\n}\n\n@mixin disableSelect() {\n @include vendor-prefix(user-select, none, property);\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n position: relative;\n @include simple-border($playerBorder);\n @include border-radius(2);\n background: $playerBackground;\n max-width: 100%;\n min-height: $controlsHeight;\n min-width: 200px;\n direction: ltr;\n\n &.youtube {\n .player {\n width: 100%;\n height: 0px;\n padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n }\n }\n .icon-sound:before {\n @include icon-audio();\n }\n .icon-mute:before {\n @include icon-result-nok();\n }\n\n .error {\n display: none;\n }\n\n .player {\n position: relative;\n height: calc(100% - #{$controlsHeight});\n width: 100%;\n\n iframe {\n pointer-events: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%\n }\n\n .media:not(.youtube) {\n display: block;\n width: 100%;\n height: auto;\n max-height: 100%;\n }\n\n .player-overlay {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n background: transparent none;\n }\n\n .action {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%);\n margin-top: -32px;\n text-align: center;\n text-decoration: none;\n display: none;\n @include font-size(64);\n color: $playerTextOverlay;\n\n .icon {\n @include border-radius(10);\n padding: 6px 12px;\n background-color: $playerBackground;\n opacity: 0.2;\n\n &:hover {\n opacity: 0.6;\n }\n }\n\n &.reload {\n width: 100%;\n font-size: 50px;\n line-height: 30px;\n\n &:hover {\n .icon {\n opacity: 1;\n }\n }\n\n .icon {\n opacity: 0.6;\n background: none;\n }\n .message {\n font-size: 20px;\n }\n\n .icon, .message {\n text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n }\n }\n }\n }\n\n .controls {\n visibility: hidden;\n position: relative;\n padding: 5px;\n display: table;\n table-layout: fixed;\n width: 100%;\n border-top: 1px solid $playerBorder;\n height: $controlsHeight;\n\n .bar {\n display: table-row;\n }\n .control {\n display: table-cell;\n }\n\n .actions {\n position: relative;\n @include transition(all, 0.1,ease-in-out);\n\n .action {\n text-align: center;\n line-height: $playerActionSize;\n width: $playerActionSize;\n height: $playerActionSize;\n text-decoration: none;\n color: $playerIcon;\n @include transition(all, 0.2, ease-in-out);\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n line-height: $playerActionSize;\n }\n }\n\n .play {\n opacity: 0.7;\n border-right: 1px solid $playerBorder;\n }\n\n .mute {\n opacity: 0.8;\n border-left: 1px solid $playerBorder;\n }\n }\n\n .slider {\n cursor: pointer;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n @include transition(all, 0.1, ease-in-out);\n background: $playerSliderBackground;\n\n .noUi-background {\n @include border-radius(10);\n background: $playerSliderBackground;\n }\n &.noUi-connect, .noUi-connect {\n @include border-radius(10);\n background: $playerSliderColor;\n }\n\n .noUi-handle {\n width: 11px;\n height: 11px;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n background: $playerSliderHandle;\n }\n .noUi-handle:hover {\n background: $playerSliderHightlight;\n }\n .noUi-handle:after {\n display: none;\n }\n\n &.noUi-horizontal {\n height: 9px;\n\n .noUi-handle {\n top: -2px;\n }\n }\n\n &.noUi-vertical {\n width: 9px;\n\n .noUi-handle {\n left: -2px;\n }\n }\n }\n\n .infos {\n cursor: default;\n\n margin: 0 $playerActionSpace;\n line-height: $playerActionSize;\n\n color: $playerText;\n @include font-size(10);\n font-weight: bold;\n\n [data-control=\"time-end\"]:before {\n content: ' / ';\n }\n }\n\n .timer {\n width: 8rem;\n text-align: center;\n }\n\n .seek {\n position: relative;\n height: 1rem;\n margin-top: 5px;\n padding-left: $playerActionSpace;\n }\n\n .playback {\n margin-right: $playerActionSpace;\n width: $playerActionSize;\n }\n\n .sound {\n width: $playerActionSize;\n height: $playerActionSize;\n\n\n .volume {\n cursor: default;\n position: absolute;\n z-index: 3;\n background-color: $playerBackground;\n padding: 0 10px 0 10px;\n height: 0;\n top: 0;\n left: -1px;\n opacity : 0;\n border: solid 1px $playerBorder;\n @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n &.up, &.down {\n height: 120px;\n padding: 10px 10px 5px 10px;\n opacity : 1;\n .slider {\n opacity : 1;\n transition: opacity 50ms linear 200ms;\n @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n }\n }\n &.up {\n top: -125px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n &.down {\n top: 29px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n }\n\n .slider {\n opacity : 0;\n .noUi-handle {\n cursor: pointer;\n width: 9px;\n height: 9px;\n }\n\n &.noUi-horizontal {\n width: 50px;\n height: 7px;\n }\n\n &.noUi-vertical {\n width: 7px;\n height: 100px;\n }\n }\n }\n\n [data-control=\"play\"] {\n display: none;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n\n [data-control=\"mute\"] {\n display: inline-block;\n }\n [data-control=\"unmute\"] {\n display: none;\n }\n }\n\n &.video, &.youtube {\n .sound {\n .volume {\n width: 2.8rem;\n bottom: $playerActionSize;\n right: 0;\n }\n }\n }\n\n &.audio {\n .sound {\n .volume {\n height: $playerActionSize;\n right: $playerActionSize;\n bottom: 0;\n }\n }\n }\n\n &.ready {\n .controls {\n visibility: visible;\n }\n\n &.paused.canplay {\n .player-overlay {\n cursor: pointer;\n }\n\n .player:hover {\n [data-control=\"play\"] {\n display: inline-block;\n }\n }\n\n &.youtube.ended, &:not(.preview) {\n .player:hover {\n [data-control=\"play\"] {\n display: none;\n }\n }\n }\n }\n\n &.playing.canpause {\n .player-overlay {\n cursor: pointer;\n }\n\n .player:hover {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n }\n\n &.playing.canpause {\n .controls {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n\n &.paused.canplay {\n .controls {\n [data-control=\"play\"] {\n display: inline-block;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n }\n }\n\n &.muted {\n .controls {\n [data-control=\"mute\"] {\n display: none;\n }\n [data-control=\"unmute\"] {\n display: inline-block;\n }\n }\n }\n\n &.nogui {\n .player {\n iframe {\n pointer-events: inherit;\n }\n }\n .player-overlay {\n display: none !important;\n }\n .controls {\n display: none !important;\n }\n }\n\n &.error:not(.stalled) {\n .media, .controls {\n display: none;\n }\n\n .error {\n display: table;\n text-align: center;\n width: 100%;\n height: 100%;\n\n .message {\n color: $error;\n display: table-cell;\n vertical-align: middle;\n }\n }\n }\n\n &.loading:not(.stalled)::before {\n @keyframes spinner {\n to { transform: rotate(360deg); }\n }\n\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n margin-top: -15px;\n margin-left: -15px;\n border-radius: 50%;\n border: 1px solid #ccc;\n border-top-color: #07d;\n animation: spinner .6s linear infinite;\n }\n\n &.stalled {\n .video {\n filter: blur(4px);\n opacity: 0.4;\n }\n .player-overlay {\n [data-control=\"reload\"] {\n display: inline-block;\n }\n }\n }\n\n &.video:not(.preview):not(.error) {\n .player-overlay {\n [data-control=\"start\"] {\n display: inline-block;\n }\n }\n }\n}\n\n/# sourceMappingURL=player.css.map /","/* Do not edit /@mixin tao-icon-setup {\n / use !important to prevent issues with browser extensions that change fonts /\n font-family: 'tao' !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n@mixin icon-wrap-inline { content: \"\\e917\"; }\n@mixin icon-wrap-right { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}
1	+ {"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n @each $icon in $iconList {\n #{$prefix}#{$icon} {\n background-position: $x * 1px $y * 1px;\n }\n @if $direction == 'x' {\n $x: $x - 16;\n } @else {\n $y: $y - 16;\n }\n }\n}\n\n/\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n first param - color, second - position. Also you can use px or other valid units for set position.\n/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n $percentage: 0;\n $units: '%';\n $count: length($colorList);\n $increment: 100 / ($count - 1);\n $css: #{$direction + ', '};\n $sep: ', ';\n @each $colorItem in $colorList {\n $color: $colorItem;\n @if (length($colorItem) > 1) {\n $color: nth($colorItem, 1);\n $percentage: nth($colorItem, 2);\n $units: '';\n }\n @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n $sep: '';\n }\n $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n $percentage: $percentage + $increment;\n }\n background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n $gridPx: 840;\n $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n $spanPercent: widthPerc($spanPx, $gridPx);\n $marginPercent: widthPerc($gutter, $gridPx);\n margin-left: $marginPercent;\n width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n @if $whatToPrefix == 'property' {\n @each $prefix in $prefixes {\n #{$prefix + $property}: #{$value};\n }\n }\n @else if $whatToPrefix == 'value' {\n @each $prefix in $prefixes {\n #{$property}: #{$prefix + $value};\n }\n }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n flex-item-align: stretch;\n -ms-flex-item-align: stretch;\n @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n // if both, min width and width are set, width will win this conflict\n @if ($width == auto) {\n @if ($minWidth != 1) {\n @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n }\n @else {\n @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n // for a discussion auto vs. main-size\n @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n }\n }\n @else {\n @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n border: 1px solid $color;\n border-radius: 2px;\n -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n -moz-border-radius: $radius * 1px;\n -webkit-border-radius: $radius * 1px;\n border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n @if $important == true {\n font-size: ($remPx) * 1px !important;\n font-size: ($remPx / 10) * 1rem !important;\n }\n @else {\n font-size: ($remPx) * 1px;\n font-size: ($remPx / 10) * 1rem;\n }\n}\n\n\n@mixin keyframes($name) {\n @-o-keyframes #{$name} { @content };\n @-moz-keyframes #{$name} { @content };\n @-webkit-keyframes #{$name} { @content };\n @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n $animation: animation;\n @if $type != '' {\n $animation: $animation + '-' + $type;\n }\n @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n @include keyframes(fade) {\n 0% {opacity:0;}\n 50% {opacity:1;}\n 100% {opacity:0;}\n }\n\n @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n @include font-size(20);\n font-family: $headingFont;\n font-style: normal;\n}\n\n@mixin disableSelect() {\n @include vendor-prefix(user-select, none, property);\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n position: relative;\n @include simple-border($playerBorder);\n @include border-radius(2);\n background: $playerBackground;\n max-width: 100%;\n min-height: $controlsHeight;\n min-width: 200px;\n direction: ltr;\n\n &.youtube {\n .player {\n width: 100%;\n height: 0px;\n padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n }\n }\n .icon-sound:before {\n @include icon-audio();\n }\n .icon-mute:before {\n @include icon-result-nok();\n }\n\n .error {\n display: none;\n }\n\n .player {\n position: relative;\n height: calc(100% - #{$controlsHeight});\n width: 100%;\n\n iframe {\n pointer-events: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%\n }\n\n .media:not(.youtube) {\n display: block;\n width: 100%;\n height: auto;\n max-height: 100%;\n }\n\n .player-overlay {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n background: transparent none;\n }\n\n .action {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%);\n margin-top: -32px;\n text-align: center;\n text-decoration: none;\n display: none;\n @include font-size(64);\n color: $playerTextOverlay;\n\n .icon {\n @include border-radius(10);\n padding: 6px 12px;\n background-color: $playerBackground;\n opacity: 0.2;\n\n &:hover {\n opacity: 0.6;\n }\n }\n\n &.reload {\n width: 100%;\n font-size: 50px;\n line-height: 30px;\n\n &:hover {\n .icon {\n opacity: 1;\n }\n }\n\n .icon {\n opacity: 0.6;\n background: none;\n }\n .message {\n font-size: 20px;\n }\n\n .icon, .message {\n text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n }\n }\n }\n }\n\n .controls {\n visibility: hidden;\n position: relative;\n padding: 5px;\n display: table;\n table-layout: fixed;\n width: 100%;\n border-top: 1px solid $playerBorder;\n height: $controlsHeight;\n\n .bar {\n display: table-row;\n }\n .control {\n display: table-cell;\n }\n\n .actions {\n position: relative;\n @include transition(all, 0.1,ease-in-out);\n\n .action {\n text-align: center;\n line-height: $playerActionSize;\n width: $playerActionSize;\n height: $playerActionSize;\n text-decoration: none;\n color: $playerIcon;\n @include transition(all, 0.2, ease-in-out);\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n line-height: $playerActionSize;\n }\n }\n\n .play {\n opacity: 0.7;\n border-right: 1px solid $playerBorder;\n }\n\n .mute {\n opacity: 0.8;\n border-left: 1px solid $playerBorder;\n }\n }\n\n .slider {\n cursor: pointer;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n @include transition(all, 0.1, ease-in-out);\n background: $playerSliderBackground;\n\n .noUi-background {\n @include border-radius(10);\n background: $playerSliderBackground;\n }\n &.noUi-connect, .noUi-connect {\n @include border-radius(10);\n background: $playerSliderColor;\n }\n\n .noUi-handle {\n width: 11px;\n height: 11px;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n background: $playerSliderHandle;\n }\n .noUi-handle:hover {\n background: $playerSliderHightlight;\n }\n .noUi-handle:after {\n display: none;\n }\n\n &.noUi-horizontal {\n height: 9px;\n\n .noUi-handle {\n top: -2px;\n }\n }\n\n &.noUi-vertical {\n width: 9px;\n\n .noUi-handle {\n left: -2px;\n }\n }\n }\n\n .infos {\n cursor: default;\n\n margin: 0 $playerActionSpace;\n line-height: $playerActionSize;\n\n color: $playerText;\n @include font-size(10);\n font-weight: bold;\n\n [data-control=\"time-end\"]:before {\n content: ' / ';\n }\n }\n\n .timer {\n width: 8rem;\n text-align: center;\n }\n\n .seek {\n position: relative;\n height: 1rem;\n margin-top: 5px;\n padding-left: $playerActionSpace;\n }\n\n .playback {\n margin-right: $playerActionSpace;\n width: $playerActionSize;\n }\n\n .sound {\n width: $playerActionSize;\n height: $playerActionSize;\n\n\n .volume {\n cursor: default;\n position: absolute;\n z-index: 3;\n background-color: $playerBackground;\n padding: 0 10px 0 10px;\n height: 0;\n top: 0;\n left: -1px;\n opacity : 0;\n border: solid 1px $playerBorder;\n @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n &.up, &.down {\n height: 120px;\n padding: 10px 10px 5px 10px;\n opacity : 1;\n .slider {\n opacity : 1;\n transition: opacity 50ms linear 200ms;\n @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n }\n }\n &.up {\n top: -125px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n &.down {\n top: 29px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n }\n\n .slider {\n opacity : 0;\n .noUi-handle {\n cursor: pointer;\n width: 9px;\n height: 9px;\n }\n\n &.noUi-horizontal {\n width: 50px;\n height: 7px;\n }\n\n &.noUi-vertical {\n width: 7px;\n height: 100px;\n }\n }\n }\n\n [data-control=\"play\"] {\n display: none;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n\n [data-control=\"mute\"] {\n display: inline-block;\n }\n [data-control=\"unmute\"] {\n display: none;\n }\n }\n\n &.video, &.youtube {\n .sound {\n .volume {\n width: 2.8rem;\n bottom: $playerActionSize;\n right: 0;\n }\n }\n }\n\n &.audio {\n .sound {\n .volume {\n height: $playerActionSize;\n right: $playerActionSize;\n bottom: 0;\n }\n }\n\n &.stalled {\n .player {\n .player-overlay {\n [data-control=\"reload\"] {\n margin-top: 0;\n\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n &.reload {\n width: 100%;\n font-size: 20px;\n line-height: 20px;\n\n .message {\n font-size: 10px;\n line-height: 15px;\n margin-top: 2px;\n }\n }\n }\n }\n }\n }\n }\n\n &.ready {\n .controls {\n visibility: visible;\n }\n\n &.paused.canplay {\n .player-overlay {\n cursor: pointer;\n }\n\n &:not(.audio) {\n .player:hover {\n [data-control=\"play\"] {\n display: inline-block;\n }\n }\n }\n\n &.youtube.ended, &:not(.preview) {\n .player:hover {\n [data-control=\"play\"] {\n display: none;\n }\n }\n }\n }\n\n &.playing.canpause {\n .player-overlay {\n cursor: pointer;\n }\n\n &:not(.audio) {\n .player:hover {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n }\n }\n\n &.playing.canpause {\n .controls {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n\n &.paused.canplay {\n .controls {\n [data-control=\"play\"] {\n display: inline-block;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n }\n }\n\n &.muted {\n .controls {\n [data-control=\"mute\"] {\n display: none;\n }\n [data-control=\"unmute\"] {\n display: inline-block;\n }\n }\n }\n\n &.nogui {\n .player {\n iframe {\n pointer-events: inherit;\n }\n }\n .player-overlay {\n display: none !important;\n }\n .controls {\n display: none !important;\n }\n }\n\n &.error:not(.stalled) {\n .media, .controls {\n display: none;\n }\n\n .error {\n display: table;\n text-align: center;\n width: 100%;\n height: 100%;\n\n .message {\n color: $error;\n display: table-cell;\n vertical-align: middle;\n }\n }\n }\n\n &.loading:not(.stalled)::before {\n @keyframes spinner {\n to { transform: rotate(360deg); }\n }\n\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n margin-top: -15px;\n margin-left: -15px;\n border-radius: 50%;\n border: 1px solid #ccc;\n border-top-color: #07d;\n animation: spinner .6s linear infinite;\n }\n\n &.stalled {\n .video {\n filter: blur(4px);\n opacity: 0.4;\n }\n .player-overlay {\n [data-control=\"reload\"] {\n display: inline-block;\n }\n }\n }\n\n &.video:not(.preview):not(.error) {\n .player-overlay {\n [data-control=\"start\"] {\n display: inline-block;\n }\n }\n }\n}\n\n/# sourceMappingURL=player.css.map /","/* Do not edit /@mixin tao-icon-setup {\n / use !important to prevent issues with browser extensions that change fonts /\n font-family: 'tao' !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n@mixin icon-wrap-inline { content: \"\\e917\"; }\n@mixin icon-wrap-right { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/dist/mediaplayer/players/html5.js CHANGED Viewed

@@ -430,7 +430,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
           // it may be the symptom of a connectivity issue
           _this.detectStalledNetwork();
         }).on("error".concat(ns), function () {
-          if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE || media.error instanceof MediaError && media.error === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+          if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE || media.error instanceof MediaError && media.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
             // No source means the player does not support the supplied media.
             // Or it can be more explicit with the not supported error.
             // There is nothing that we can do from this stage.
@@ -709,7 +709,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
       stop: function stop() {
         debug('api call', 'stop');
-        if (media && state.playback) {
+        if (media && media.duration && state.playback && !state.stalled) {
           media.currentTime = media.duration;
         }
       },

package/dist/mediaplayer/support.js CHANGED Viewed

@@ -21,11 +21,13 @@ define(function () { 'use strict';
     /**
      * A Regex to detect Apple mobile browsers
      * @type {RegExp}
+     * @private
      */
     var reAppleMobiles = /ip(hone|od)/i;
     /**
      * A list of MIME types with codec declaration
      * @type {Object}
+     * @private
      */
     var supportedMimeTypes = {
@@ -39,11 +41,23 @@ define(function () { 'use strict';
       'audio/ogg': 'audio/ogg; codecs="vorbis"',
       'audio/wav': 'audio/wav; codecs="1"'
     };
+    /**
+     * Checks support for a MIME type.
+     * @param {HTMLMediaElement} media The media element on which check support
+     * @param {String} mimeType A MIME type to check the support for
+     * @returns {string}
+     * @private
+     */
+    var findSupport = function findSupport(media, mimeType) {
+      return media.canPlayType(mimeType).replace(/no/, '');
+    };
     /**
      * Support detection
      * @type {Object}
      */
     var support = {
       /**
        * Checks if the browser can play media
@@ -53,13 +67,13 @@ define(function () { 'use strict';
        * @private
        */
       checkSupport: function checkSupport(media, mimeType) {
-        var support = !!media.canPlayType;
+        var support = media.canPlayType;
         if (support && mimeType) {
-          return !!media.canPlayType(supportedMimeTypes[mimeType] || mimeType).replace(/no/, '');
+          return !!(supportedMimeTypes[mimeType] && findSupport(media, supportedMimeTypes[mimeType]) || findSupport(media, mimeType));
         }
-        return support;
+        return !!support;
       },
       /**

package/dist/mediaplayer.js CHANGED Viewed

@@ -146,7 +146,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Reload", options) : helperMissing.call(depth0, "__", "Reload", options)))
       + "\"></div>\n                <div class=\"message\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "You are encountering a prolonged connectivity loss.", options) : helperMissing.call(depth0, "__", "You are encountering a prolonged connectivity loss.", options)))
-      + "</div>\n                <div class=\"message\">"
+      + "<br />"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to reload.", options) : helperMissing.call(depth0, "__", "Click to reload.", options)))
       + "</div>\n            </a>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <div class=\"bar\">\n            <div class=\"control actions playback\">\n                <a class=\"action play\" data-control=\"play\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
@@ -358,8 +358,14 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
   /**
    * Builds a media player instance
    * @param {Object} config
-   * @param {String} config.type - The type of media to play
-   * @param {String|Array} config.url - The URL to the media
+   * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
+   * It might also contain the MIME type of the media as a shorthand.
+   * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
+   * please look at the `sources` option instead.
+   * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
+   * from the `type` property, otherwise it will request the server to get the content-type.
+   * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
+   * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
    * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
    * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
    * @param {Boolean} [config.loop] - The media will be played continuously
@@ -409,6 +415,10 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
         _.defaults(this.config, defaults.options);
+        if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+          this.config.mimeType = this.config.type;
+        }
         this._setType(this.config.type || defaults.type);
         this._reset();
@@ -989,8 +999,12 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
           source = _.clone(src);
         }
-        if (this.is('youtube') && !source.type) {
-          source.type = defaults.type;
+        if (!source.type) {
+          if (this.is('youtube')) {
+            source.type = defaults.type;
+          } else if (this.config.mimeType) {
+            source.type = this.config.mimeType;
+          }
         }
         if (!source.type) {

package/dist/taskQueue/taskQueueModel.js CHANGED Viewed

@@ -172,7 +172,7 @@ define(['jquery', 'lodash', 'i18n', 'core/eventifier', 'core/polling', 'core/dat
           taskId: taskId
         }, 'GET', {}, true).then(function (taskData) {
           // Workaround for translations
-          if (taskData.report !== undefined && taskData.report.children !== undefined) {
+          if (typeof taskData.report !== 'undefined' && typeof taskData.report.children !== 'undefined') {
             taskData.report.children = translateReportMessages(taskData.report.children);
           } //check taskData

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.42.0",
+    "version": "1.44.2",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {
@@ -9,13 +9,16 @@
         "test:cov": "npm run build:cov && npx qunit-testrunner --cov",
         "test:dev": "run-p test:keepAlive build:watch",
         "coverage": "nyc report",
+        "coverage:clover": "nyc report --reporter=clover",
         "coverage:html": "nyc report --reporter=lcov && open-cli coverage/lcov-report/index.html",
         "build": "cross-env NODE_ENV=production rollup --config ./build/rollup.config.js",
         "build:dev": "npm run build:watch",
         "build:watch": "rollup --config ./build/rollup.config.js --watch",
         "build:cov": "rollup --config ./build/rollup.config.js --environment COVERAGE",
         "buildScss": "node ./build/scss.js",
-        "lint": "eslint test src",
+        "lint:src": "eslint -c .eslintrc.js src",
+        "lint:test": "eslint -c test/.eslintrc.js test",
+        "lint:report": "eslint -c .eslintrc.js --output-file eslint_report.json --format json src | true",
         "prepare": "npm run buildScss && npm run build"
     },
     "keywords": [
@@ -39,9 +42,9 @@
     },
     "license": "GPL-2.0",
     "devDependencies": {
-        "@babel/core": "^7.4.5",
-        "@babel/preset-env": "^7.4.5",
-        "@oat-sa/browserslist-config-tao": "^0.1.0",
+        "@babel/core": "^7.15.5",
+        "@babel/preset-env": "^7.15.6",
+        "@oat-sa/browserslist-config-tao": "^0.3.1",
         "@oat-sa/eslint-config-tao": "^1.1.1",
         "@oat-sa/expr-eval": "^1.3.0",
         "@oat-sa/prettier-config": "^0.1.1",
@@ -56,7 +59,9 @@
         "decimal.js": "10.1.1",
         "devbridge-autocomplete": "^1.2.20",
         "dompurify": "^1.0.10",
-        "eve": "git://github.com/adobe-webplatform/eve.git#eef80ed",
+        "eslint": "^7.32.0",
+        "eslint-plugin-jsdoc": "^36.1.0",
+        "eve": "git+https://github.com/adobe-webplatform/eve.git#eef80ed",
         "flatpickr": "4.5.7",
         "fs-extra": "^8.0.1",
         "gamp": "^0.2.1",
@@ -70,14 +75,14 @@
         "moment-timezone": "0.5.10",
         "moo": "^0.5.0",
         "npm-run-all": "^4.1.5",
-        "nyc": "^14.1.1",
-        "open-cli": "^5.0.0",
+        "nyc": "^15.0.1",
+        "open-cli": "^7.0.1",
         "popper.js": "^1.14.5",
         "postcss": "^7.0.16",
         "postcss-node-sass": "^2.1.8",
         "postcss-scss": "^2.0.0",
         "promise-limit": "^2.7.0",
-        "qunit": "^2.9.2",
+        "qunit": "^2.17.2",
         "raphael": "2.2.0",
         "require-css": "^0.1.10",
         "requirejs-plugins": "^1.0.2",

package/scss/inc/_forms.scss CHANGED Viewed

@@ -571,6 +571,10 @@ label {
         text-align: right;
         margin: 30px 0 0 0;
         @extend %clearfix;
+        [dir="rtl"] & {
+            text-align: left;
+        }
     }
     .property-title {
@@ -711,6 +715,10 @@ label {
                 @include simple-border();
             }
         }
+        [dir="rtl"] & {
+            padding: 0 0 0 10px;
+        }
     }
     input {
         &[type="text"], &[type="password"] {

package/scss/inc/_select2.scss CHANGED Viewed

@@ -1,6 +1,5 @@
 @import 'inc/bootstrap';
 .select2-container * {
     text-decoration: none !important
 }
@@ -147,6 +146,13 @@
     border-top: 0;
     border-radius: 0 0 2px 2px;
+    &.rtl {
+        direction: rtl;
+    }
+    &.ltr {
+        direction: ltr;
+    }
 }
 .select2-drop-auto-width {
@@ -615,7 +621,7 @@ disabled look for disabled choices in the results dropdown
         color: $textColor;
         opacity: .55 !important;
-        .select2-search-field,
+        .select2-search-field,
         .select2-search-choice-close,
         .select2-arrow {
             display: none;

package/src/mediaplayer/css/player.css CHANGED Viewed

@@ -342,6 +342,25 @@ Usage:
     bottom: 0;
 }
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"] {
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload {
+    width: 100%;
+    font-size: 20px;
+    line-height: 20px;
+}
+.mediaplayer.audio.stalled .player .player-overlay [data-control="reload"].reload .message {
+    font-size: 10px;
+    line-height: 15px;
+    margin-top: 2px;
+}
 .mediaplayer.ready .controls {
     visibility: visible;
 }
@@ -350,7 +369,7 @@ Usage:
     cursor: pointer;
 }
-.mediaplayer.ready.paused.canplay .player:hover [data-control="play"] {
+.mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control="play"] {
     display: inline-block;
 }
@@ -362,7 +381,7 @@ Usage:
     cursor: pointer;
 }
-.mediaplayer.ready.playing.canpause .player:hover [data-control="pause"] {
+.mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control="pause"] {
     display: inline-block;
 }

package/src/mediaplayer/css/player.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n @each $icon in $iconList {\n #{$prefix}#{$icon} {\n background-position: $x * 1px $y * 1px;\n }\n @if $direction == 'x' {\n $x: $x - 16;\n } @else {\n $y: $y - 16;\n }\n }\n}\n\n/\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n first param - color, second - position. Also you can use px or other valid units for set position.\n/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n $percentage: 0;\n $units: '%';\n $count: length($colorList);\n $increment: 100 / ($count - 1);\n $css: #{$direction + ', '};\n $sep: ', ';\n @each $colorItem in $colorList {\n $color: $colorItem;\n @if (length($colorItem) > 1) {\n $color: nth($colorItem, 1);\n $percentage: nth($colorItem, 2);\n $units: '';\n }\n @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n $sep: '';\n }\n $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n $percentage: $percentage + $increment;\n }\n background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n $gridPx: 840;\n $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n $spanPercent: widthPerc($spanPx, $gridPx);\n $marginPercent: widthPerc($gutter, $gridPx);\n margin-left: $marginPercent;\n width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n @if $whatToPrefix == 'property' {\n @each $prefix in $prefixes {\n #{$prefix + $property}: #{$value};\n }\n }\n @else if $whatToPrefix == 'value' {\n @each $prefix in $prefixes {\n #{$property}: #{$prefix + $value};\n }\n }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n flex-item-align: stretch;\n -ms-flex-item-align: stretch;\n @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n // if both, min width and width are set, width will win this conflict\n @if ($width == auto) {\n @if ($minWidth != 1) {\n @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n }\n @else {\n @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n // for a discussion auto vs. main-size\n @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n }\n }\n @else {\n @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n border: 1px solid $color;\n border-radius: 2px;\n -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n -moz-border-radius: $radius * 1px;\n -webkit-border-radius: $radius * 1px;\n border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n @if $important == true {\n font-size: ($remPx) * 1px !important;\n font-size: ($remPx / 10) * 1rem !important;\n }\n @else {\n font-size: ($remPx) * 1px;\n font-size: ($remPx / 10) * 1rem;\n }\n}\n\n\n@mixin keyframes($name) {\n @-o-keyframes #{$name} { @content };\n @-moz-keyframes #{$name} { @content };\n @-webkit-keyframes #{$name} { @content };\n @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n $animation: animation;\n @if $type != '' {\n $animation: $animation + '-' + $type;\n }\n @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n @include keyframes(fade) {\n 0% {opacity:0;}\n 50% {opacity:1;}\n 100% {opacity:0;}\n }\n\n @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n @include font-size(20);\n font-family: $headingFont;\n font-style: normal;\n}\n\n@mixin disableSelect() {\n @include vendor-prefix(user-select, none, property);\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n position: relative;\n @include simple-border($playerBorder);\n @include border-radius(2);\n background: $playerBackground;\n max-width: 100%;\n min-height: $controlsHeight;\n min-width: 200px;\n direction: ltr;\n\n &.youtube {\n .player {\n width: 100%;\n height: 0px;\n padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n }\n }\n .icon-sound:before {\n @include icon-audio();\n }\n .icon-mute:before {\n @include icon-result-nok();\n }\n\n .error {\n display: none;\n }\n\n .player {\n position: relative;\n height: calc(100% - #{$controlsHeight});\n width: 100%;\n\n iframe {\n pointer-events: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%\n }\n\n .media:not(.youtube) {\n display: block;\n width: 100%;\n height: auto;\n max-height: 100%;\n }\n\n .player-overlay {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n background: transparent none;\n }\n\n .action {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%);\n margin-top: -32px;\n text-align: center;\n text-decoration: none;\n display: none;\n @include font-size(64);\n color: $playerTextOverlay;\n\n .icon {\n @include border-radius(10);\n padding: 6px 12px;\n background-color: $playerBackground;\n opacity: 0.2;\n\n &:hover {\n opacity: 0.6;\n }\n }\n\n &.reload {\n width: 100%;\n font-size: 50px;\n line-height: 30px;\n\n &:hover {\n .icon {\n opacity: 1;\n }\n }\n\n .icon {\n opacity: 0.6;\n background: none;\n }\n .message {\n font-size: 20px;\n }\n\n .icon, .message {\n text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n }\n }\n }\n }\n\n .controls {\n visibility: hidden;\n position: relative;\n padding: 5px;\n display: table;\n table-layout: fixed;\n width: 100%;\n border-top: 1px solid $playerBorder;\n height: $controlsHeight;\n\n .bar {\n display: table-row;\n }\n .control {\n display: table-cell;\n }\n\n .actions {\n position: relative;\n @include transition(all, 0.1,ease-in-out);\n\n .action {\n text-align: center;\n line-height: $playerActionSize;\n width: $playerActionSize;\n height: $playerActionSize;\n text-decoration: none;\n color: $playerIcon;\n @include transition(all, 0.2, ease-in-out);\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n line-height: $playerActionSize;\n }\n }\n\n .play {\n opacity: 0.7;\n border-right: 1px solid $playerBorder;\n }\n\n .mute {\n opacity: 0.8;\n border-left: 1px solid $playerBorder;\n }\n }\n\n .slider {\n cursor: pointer;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n @include transition(all, 0.1, ease-in-out);\n background: $playerSliderBackground;\n\n .noUi-background {\n @include border-radius(10);\n background: $playerSliderBackground;\n }\n &.noUi-connect, .noUi-connect {\n @include border-radius(10);\n background: $playerSliderColor;\n }\n\n .noUi-handle {\n width: 11px;\n height: 11px;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n background: $playerSliderHandle;\n }\n .noUi-handle:hover {\n background: $playerSliderHightlight;\n }\n .noUi-handle:after {\n display: none;\n }\n\n &.noUi-horizontal {\n height: 9px;\n\n .noUi-handle {\n top: -2px;\n }\n }\n\n &.noUi-vertical {\n width: 9px;\n\n .noUi-handle {\n left: -2px;\n }\n }\n }\n\n .infos {\n cursor: default;\n\n margin: 0 $playerActionSpace;\n line-height: $playerActionSize;\n\n color: $playerText;\n @include font-size(10);\n font-weight: bold;\n\n [data-control=\"time-end\"]:before {\n content: ' / ';\n }\n }\n\n .timer {\n width: 8rem;\n text-align: center;\n }\n\n .seek {\n position: relative;\n height: 1rem;\n margin-top: 5px;\n padding-left: $playerActionSpace;\n }\n\n .playback {\n margin-right: $playerActionSpace;\n width: $playerActionSize;\n }\n\n .sound {\n width: $playerActionSize;\n height: $playerActionSize;\n\n\n .volume {\n cursor: default;\n position: absolute;\n z-index: 3;\n background-color: $playerBackground;\n padding: 0 10px 0 10px;\n height: 0;\n top: 0;\n left: -1px;\n opacity : 0;\n border: solid 1px $playerBorder;\n @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n &.up, &.down {\n height: 120px;\n padding: 10px 10px 5px 10px;\n opacity : 1;\n .slider {\n opacity : 1;\n transition: opacity 50ms linear 200ms;\n @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n }\n }\n &.up {\n top: -125px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n &.down {\n top: 29px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n }\n\n .slider {\n opacity : 0;\n .noUi-handle {\n cursor: pointer;\n width: 9px;\n height: 9px;\n }\n\n &.noUi-horizontal {\n width: 50px;\n height: 7px;\n }\n\n &.noUi-vertical {\n width: 7px;\n height: 100px;\n }\n }\n }\n\n [data-control=\"play\"] {\n display: none;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n\n [data-control=\"mute\"] {\n display: inline-block;\n }\n [data-control=\"unmute\"] {\n display: none;\n }\n }\n\n &.video, &.youtube {\n .sound {\n .volume {\n width: 2.8rem;\n bottom: $playerActionSize;\n right: 0;\n }\n }\n }\n\n &.audio {\n .sound {\n .volume {\n height: $playerActionSize;\n right: $playerActionSize;\n bottom: 0;\n }\n }\n }\n\n &.ready {\n .controls {\n visibility: visible;\n }\n\n &.paused.canplay {\n .player-overlay {\n cursor: pointer;\n }\n\n .player:hover {\n [data-control=\"play\"] {\n display: inline-block;\n }\n }\n\n &.youtube.ended, &:not(.preview) {\n .player:hover {\n [data-control=\"play\"] {\n display: none;\n }\n }\n }\n }\n\n &.playing.canpause {\n .player-overlay {\n cursor: pointer;\n }\n\n .player:hover {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n }\n\n &.playing.canpause {\n .controls {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n\n &.paused.canplay {\n .controls {\n [data-control=\"play\"] {\n display: inline-block;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n }\n }\n\n &.muted {\n .controls {\n [data-control=\"mute\"] {\n display: none;\n }\n [data-control=\"unmute\"] {\n display: inline-block;\n }\n }\n }\n\n &.nogui {\n .player {\n iframe {\n pointer-events: inherit;\n }\n }\n .player-overlay {\n display: none !important;\n }\n .controls {\n display: none !important;\n }\n }\n\n &.error:not(.stalled) {\n .media, .controls {\n display: none;\n }\n\n .error {\n display: table;\n text-align: center;\n width: 100%;\n height: 100%;\n\n .message {\n color: $error;\n display: table-cell;\n vertical-align: middle;\n }\n }\n }\n\n &.loading:not(.stalled)::before {\n @keyframes spinner {\n to { transform: rotate(360deg); }\n }\n\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n margin-top: -15px;\n margin-left: -15px;\n border-radius: 50%;\n border: 1px solid #ccc;\n border-top-color: #07d;\n animation: spinner .6s linear infinite;\n }\n\n &.stalled {\n .video {\n filter: blur(4px);\n opacity: 0.4;\n }\n .player-overlay {\n [data-control=\"reload\"] {\n display: inline-block;\n }\n }\n }\n\n &.video:not(.preview):not(.error) {\n .player-overlay {\n [data-control=\"start\"] {\n display: inline-block;\n }\n }\n }\n}\n\n/# sourceMappingURL=player.css.map /","/* Do not edit /@mixin tao-icon-setup {\n / use !important to prevent issues with browser extensions that change fonts /\n font-family: 'tao' !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n@mixin icon-wrap-inline { content: \"\\e917\"; }\n@mixin icon-wrap-right { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}
1	+ {"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n @each $icon in $iconList {\n #{$prefix}#{$icon} {\n background-position: $x * 1px $y * 1px;\n }\n @if $direction == 'x' {\n $x: $x - 16;\n } @else {\n $y: $y - 16;\n }\n }\n}\n\n/\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n first param - color, second - position. Also you can use px or other valid units for set position.\n/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n $percentage: 0;\n $units: '%';\n $count: length($colorList);\n $increment: 100 / ($count - 1);\n $css: #{$direction + ', '};\n $sep: ', ';\n @each $colorItem in $colorList {\n $color: $colorItem;\n @if (length($colorItem) > 1) {\n $color: nth($colorItem, 1);\n $percentage: nth($colorItem, 2);\n $units: '';\n }\n @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n $sep: '';\n }\n $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n $percentage: $percentage + $increment;\n }\n background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n $gridPx: 840;\n $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n $spanPercent: widthPerc($spanPx, $gridPx);\n $marginPercent: widthPerc($gutter, $gridPx);\n margin-left: $marginPercent;\n width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n @if $whatToPrefix == 'property' {\n @each $prefix in $prefixes {\n #{$prefix + $property}: #{$value};\n }\n }\n @else if $whatToPrefix == 'value' {\n @each $prefix in $prefixes {\n #{$property}: #{$prefix + $value};\n }\n }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n flex-item-align: stretch;\n -ms-flex-item-align: stretch;\n @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n // if both, min width and width are set, width will win this conflict\n @if ($width == auto) {\n @if ($minWidth != 1) {\n @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n }\n @else {\n @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n // for a discussion auto vs. main-size\n @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n }\n }\n @else {\n @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n border: 1px solid $color;\n border-radius: 2px;\n -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n -moz-border-radius: $radius * 1px;\n -webkit-border-radius: $radius * 1px;\n border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n -webkit-border-top-left-radius: $radius * 1px;\n -moz-border-radius-topleft: $radius * 1px;\n border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n -webkit-border-top-right-radius: $radius * 1px;\n -moz-border-radius-topright: $radius * 1px;\n border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n -webkit-border-bottom-right-radius: $radius * 1px;\n -moz-border-radius-bottomright: $radius * 1px;\n border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n -webkit-border-bottom-left-radius: $radius * 1px;\n -moz-border-radius-bottomleft: $radius * 1px;\n border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n @if $important == true {\n font-size: ($remPx) * 1px !important;\n font-size: ($remPx / 10) * 1rem !important;\n }\n @else {\n font-size: ($remPx) * 1px;\n font-size: ($remPx / 10) * 1rem;\n }\n}\n\n\n@mixin keyframes($name) {\n @-o-keyframes #{$name} { @content };\n @-moz-keyframes #{$name} { @content };\n @-webkit-keyframes #{$name} { @content };\n @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n $animation: animation;\n @if $type != '' {\n $animation: $animation + '-' + $type;\n }\n @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n @include keyframes(fade) {\n 0% {opacity:0;}\n 50% {opacity:1;}\n 100% {opacity:0;}\n }\n\n @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n @include font-size(20);\n font-family: $headingFont;\n font-style: normal;\n}\n\n@mixin disableSelect() {\n @include vendor-prefix(user-select, none, property);\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n position: relative;\n @include simple-border($playerBorder);\n @include border-radius(2);\n background: $playerBackground;\n max-width: 100%;\n min-height: $controlsHeight;\n min-width: 200px;\n direction: ltr;\n\n &.youtube {\n .player {\n width: 100%;\n height: 0px;\n padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n }\n }\n .icon-sound:before {\n @include icon-audio();\n }\n .icon-mute:before {\n @include icon-result-nok();\n }\n\n .error {\n display: none;\n }\n\n .player {\n position: relative;\n height: calc(100% - #{$controlsHeight});\n width: 100%;\n\n iframe {\n pointer-events: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%\n }\n\n .media:not(.youtube) {\n display: block;\n width: 100%;\n height: auto;\n max-height: 100%;\n }\n\n .player-overlay {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n background: transparent none;\n }\n\n .action {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%);\n margin-top: -32px;\n text-align: center;\n text-decoration: none;\n display: none;\n @include font-size(64);\n color: $playerTextOverlay;\n\n .icon {\n @include border-radius(10);\n padding: 6px 12px;\n background-color: $playerBackground;\n opacity: 0.2;\n\n &:hover {\n opacity: 0.6;\n }\n }\n\n &.reload {\n width: 100%;\n font-size: 50px;\n line-height: 30px;\n\n &:hover {\n .icon {\n opacity: 1;\n }\n }\n\n .icon {\n opacity: 0.6;\n background: none;\n }\n .message {\n font-size: 20px;\n }\n\n .icon, .message {\n text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n }\n }\n }\n }\n\n .controls {\n visibility: hidden;\n position: relative;\n padding: 5px;\n display: table;\n table-layout: fixed;\n width: 100%;\n border-top: 1px solid $playerBorder;\n height: $controlsHeight;\n\n .bar {\n display: table-row;\n }\n .control {\n display: table-cell;\n }\n\n .actions {\n position: relative;\n @include transition(all, 0.1,ease-in-out);\n\n .action {\n text-align: center;\n line-height: $playerActionSize;\n width: $playerActionSize;\n height: $playerActionSize;\n text-decoration: none;\n color: $playerIcon;\n @include transition(all, 0.2, ease-in-out);\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n line-height: $playerActionSize;\n }\n }\n\n .play {\n opacity: 0.7;\n border-right: 1px solid $playerBorder;\n }\n\n .mute {\n opacity: 0.8;\n border-left: 1px solid $playerBorder;\n }\n }\n\n .slider {\n cursor: pointer;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n @include transition(all, 0.1, ease-in-out);\n background: $playerSliderBackground;\n\n .noUi-background {\n @include border-radius(10);\n background: $playerSliderBackground;\n }\n &.noUi-connect, .noUi-connect {\n @include border-radius(10);\n background: $playerSliderColor;\n }\n\n .noUi-handle {\n width: 11px;\n height: 11px;\n @include simple-border($playerSliderBorder);\n @include border-radius(10);\n background: $playerSliderHandle;\n }\n .noUi-handle:hover {\n background: $playerSliderHightlight;\n }\n .noUi-handle:after {\n display: none;\n }\n\n &.noUi-horizontal {\n height: 9px;\n\n .noUi-handle {\n top: -2px;\n }\n }\n\n &.noUi-vertical {\n width: 9px;\n\n .noUi-handle {\n left: -2px;\n }\n }\n }\n\n .infos {\n cursor: default;\n\n margin: 0 $playerActionSpace;\n line-height: $playerActionSize;\n\n color: $playerText;\n @include font-size(10);\n font-weight: bold;\n\n [data-control=\"time-end\"]:before {\n content: ' / ';\n }\n }\n\n .timer {\n width: 8rem;\n text-align: center;\n }\n\n .seek {\n position: relative;\n height: 1rem;\n margin-top: 5px;\n padding-left: $playerActionSpace;\n }\n\n .playback {\n margin-right: $playerActionSpace;\n width: $playerActionSize;\n }\n\n .sound {\n width: $playerActionSize;\n height: $playerActionSize;\n\n\n .volume {\n cursor: default;\n position: absolute;\n z-index: 3;\n background-color: $playerBackground;\n padding: 0 10px 0 10px;\n height: 0;\n top: 0;\n left: -1px;\n opacity : 0;\n border: solid 1px $playerBorder;\n @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n &.up, &.down {\n height: 120px;\n padding: 10px 10px 5px 10px;\n opacity : 1;\n .slider {\n opacity : 1;\n transition: opacity 50ms linear 200ms;\n @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n }\n }\n &.up {\n top: -125px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n &.down {\n top: 29px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n }\n\n .slider {\n opacity : 0;\n .noUi-handle {\n cursor: pointer;\n width: 9px;\n height: 9px;\n }\n\n &.noUi-horizontal {\n width: 50px;\n height: 7px;\n }\n\n &.noUi-vertical {\n width: 7px;\n height: 100px;\n }\n }\n }\n\n [data-control=\"play\"] {\n display: none;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n\n [data-control=\"mute\"] {\n display: inline-block;\n }\n [data-control=\"unmute\"] {\n display: none;\n }\n }\n\n &.video, &.youtube {\n .sound {\n .volume {\n width: 2.8rem;\n bottom: $playerActionSize;\n right: 0;\n }\n }\n }\n\n &.audio {\n .sound {\n .volume {\n height: $playerActionSize;\n right: $playerActionSize;\n bottom: 0;\n }\n }\n\n &.stalled {\n .player {\n .player-overlay {\n [data-control=\"reload\"] {\n margin-top: 0;\n\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n &.reload {\n width: 100%;\n font-size: 20px;\n line-height: 20px;\n\n .message {\n font-size: 10px;\n line-height: 15px;\n margin-top: 2px;\n }\n }\n }\n }\n }\n }\n }\n\n &.ready {\n .controls {\n visibility: visible;\n }\n\n &.paused.canplay {\n .player-overlay {\n cursor: pointer;\n }\n\n &:not(.audio) {\n .player:hover {\n [data-control=\"play\"] {\n display: inline-block;\n }\n }\n }\n\n &.youtube.ended, &:not(.preview) {\n .player:hover {\n [data-control=\"play\"] {\n display: none;\n }\n }\n }\n }\n\n &.playing.canpause {\n .player-overlay {\n cursor: pointer;\n }\n\n &:not(.audio) {\n .player:hover {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n }\n }\n\n &.playing.canpause {\n .controls {\n [data-control=\"pause\"] {\n display: inline-block;\n }\n }\n }\n\n &.paused.canplay {\n .controls {\n [data-control=\"play\"] {\n display: inline-block;\n }\n [data-control=\"pause\"] {\n display: none;\n }\n }\n }\n\n &.muted {\n .controls {\n [data-control=\"mute\"] {\n display: none;\n }\n [data-control=\"unmute\"] {\n display: inline-block;\n }\n }\n }\n\n &.nogui {\n .player {\n iframe {\n pointer-events: inherit;\n }\n }\n .player-overlay {\n display: none !important;\n }\n .controls {\n display: none !important;\n }\n }\n\n &.error:not(.stalled) {\n .media, .controls {\n display: none;\n }\n\n .error {\n display: table;\n text-align: center;\n width: 100%;\n height: 100%;\n\n .message {\n color: $error;\n display: table-cell;\n vertical-align: middle;\n }\n }\n }\n\n &.loading:not(.stalled)::before {\n @keyframes spinner {\n to { transform: rotate(360deg); }\n }\n\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n margin-top: -15px;\n margin-left: -15px;\n border-radius: 50%;\n border: 1px solid #ccc;\n border-top-color: #07d;\n animation: spinner .6s linear infinite;\n }\n\n &.stalled {\n .video {\n filter: blur(4px);\n opacity: 0.4;\n }\n .player-overlay {\n [data-control=\"reload\"] {\n display: inline-block;\n }\n }\n }\n\n &.video:not(.preview):not(.error) {\n .player-overlay {\n [data-control=\"start\"] {\n display: inline-block;\n }\n }\n }\n}\n\n/# sourceMappingURL=player.css.map /","/* Do not edit /@mixin tao-icon-setup {\n / use !important to prevent issues with browser extensions that change fonts /\n font-family: 'tao' !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n@mixin icon-wrap-inline { content: \"\\e917\"; }\n@mixin icon-wrap-right { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/src/mediaplayer/players/html5.js CHANGED Viewed

@@ -220,7 +220,8 @@ export default function html5PlayerFactory($container, config = {}) {
                 .on(`error${ns}`, () => {
                     if (
                         media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE ||
-                        (media.error instanceof MediaError && media.error === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
+                        (media.error instanceof MediaError &&
+                            media.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
                     ) {
                         // No source means the player does not support the supplied media.
                         // Or it can be more explicit with the not supported error.
@@ -511,7 +512,7 @@ export default function html5PlayerFactory($container, config = {}) {
         stop() {
             debug('api call', 'stop');
-            if (media && state.playback) {
+            if (media && media.duration && state.playback && !state.stalled) {
                 media.currentTime = media.duration;
             }
         },

package/src/mediaplayer/scss/player.scss CHANGED Viewed

@@ -344,6 +344,32 @@ $controlsHeight: 36px;
                 bottom: 0;
             }
         }
+        &.stalled {
+            .player {
+                .player-overlay {
+                    [data-control="reload"] {
+                        margin-top: 0;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: center;
+                        &.reload {
+                            width: 100%;
+                            font-size: 20px;
+                            line-height: 20px;
+                            .message {
+                                font-size: 10px;
+                                line-height: 15px;
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
     &.ready {
@@ -356,9 +382,11 @@ $controlsHeight: 36px;
                 cursor: pointer;
             }
-            .player:hover {
-                [data-control="play"] {
-                    display: inline-block;
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="play"] {
+                        display: inline-block;
+                    }
                 }
             }
@@ -376,9 +404,11 @@ $controlsHeight: 36px;
                 cursor: pointer;
             }
-            .player:hover {
-                [data-control="pause"] {
-                    display: inline-block;
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="pause"] {
+                        display: inline-block;
+                    }
                 }
             }
         }

package/src/mediaplayer/support.js CHANGED Viewed

@@ -19,12 +19,14 @@
 /**
  * A Regex to detect Apple mobile browsers
  * @type {RegExp}
+ * @private
  */
 const reAppleMobiles = /ip(hone|od)/i;
 /**
  * A list of MIME types with codec declaration
  * @type {Object}
+ * @private
  */
 const supportedMimeTypes = {
     // video
@@ -38,6 +40,15 @@ const supportedMimeTypes = {
     'audio/wav': 'audio/wav; codecs="1"'
 };
+/**
+ * Checks support for a MIME type.
+ * @param {HTMLMediaElement} media The media element on which check support
+ * @param {String} mimeType A MIME type to check the support for
+ * @returns {string}
+ * @private
+ */
+const findSupport = (media, mimeType) => media.canPlayType(mimeType).replace(/no/, '');
 /**
  * Support detection
  * @type {Object}
@@ -51,13 +62,15 @@ export default {
      * @private
      */
     checkSupport(media, mimeType) {
-        const support = !!media.canPlayType;
+        const support = media.canPlayType;
         if (support && mimeType) {
-            return !!media.canPlayType(supportedMimeTypes[mimeType] || mimeType).replace(/no/, '');
+            return !!(
+                (supportedMimeTypes[mimeType] && findSupport(media, supportedMimeTypes[mimeType])) ||
+                findSupport(media, mimeType)
+            );
         }
-        return support;
+        return !!support;
     },
     /**

package/src/mediaplayer/tpl/player.tpl CHANGED Viewed

@@ -9,8 +9,7 @@
             </a>
             <a class="action reload" data-control="reload">
                 <div class="icon icon-reload" title="{{__ 'Reload'}}"></div>
-                <div class="message">{{__ 'You are encountering a prolonged connectivity loss.'}}</div>
-                <div class="message">{{__ 'Click to reload.'}}</div>
+                <div class="message">{{__ 'You are encountering a prolonged connectivity loss.'}}<br />{{__ 'Click to reload.'}}</div>
             </a>
         </div>
     </div>

package/src/mediaplayer.js CHANGED Viewed

@@ -189,8 +189,14 @@ const isResponsiveSize = sizeProps => {
 /**
  * Builds a media player instance
  * @param {Object} config
- * @param {String} config.type - The type of media to play
- * @param {String|Array} config.url - The URL to the media
+ * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
+ * It might also contain the MIME type of the media as a shorthand.
+ * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
+ * please look at the `sources` option instead.
+ * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
+ * from the `type` property, otherwise it will request the server to get the content-type.
+ * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
+ * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
  * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
  * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
  * @param {Boolean} [config.loop] - The media will be played continuously
@@ -232,6 +238,9 @@ function mediaplayerFactory(config) {
             // load the config set, discard null values in order to allow defaults to be set
             this.config = _.omit(config || {}, value => typeof value === 'undefined' || value === null);
             _.defaults(this.config, defaults.options);
+            if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+                this.config.mimeType = this.config.type;
+            }
             this._setType(this.config.type || defaults.type);
             this._reset();
@@ -774,8 +783,12 @@ function mediaplayerFactory(config) {
                 source = _.clone(src);
             }
-            if (this.is('youtube') && !source.type) {
-                source.type = defaults.type;
+            if (!source.type) {
+                if (this.is('youtube')) {
+                    source.type = defaults.type;
+                } else if (this.config.mimeType) {
+                    source.type = this.config.mimeType;
+                }
             }
             if (!source.type) {

package/src/taskQueue/taskQueueModel.js CHANGED Viewed

@@ -81,7 +81,7 @@ function translateReportMessages(taskData) {
             translateReportMessages(item.children);
         }
         return item;
-    })
+    });
 }
 /**
@@ -159,10 +159,10 @@ export default function taskQueueModel(config) {
             status = request(config.url.get, { taskId: taskId }, 'GET', {}, true).then(function(taskData) {
                 // Workaround for translations
-		if (taskData.report !== undefined && taskData.report.children !== undefined) {
-		    taskData.report.children = translateReportMessages(taskData.report.children);
+                if (typeof taskData.report !== 'undefined' && typeof taskData.report.children !== 'undefined') {
+                    taskData.report.children = translateReportMessages(taskData.report.children);
                 }
-		//check taskData
+                //check taskData
                 if (taskData && taskData.status) {
                     if (_cache) {
                         //detect change