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

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 (14) hide show
  1. package/dist/mediaplayer/css/player.css +17 -5
  2. package/dist/mediaplayer/css/player.css.map +1 -1
  3. package/dist/resourcemgr.js +22 -10
  4. package/package.json +1 -1
  5. package/scss/ckeditor/skins/tao/scss/editor.scss +17 -0
  6. package/scss/ckeditor/skins/tao/scss/inc/_menu.scss +1 -6
  7. package/src/css/basic.css +7845 -0
  8. package/src/css/basic.css.map +1 -0
  9. package/src/mediaplayer/css/player.css +17 -5
  10. package/src/mediaplayer/css/player.css.map +1 -1
  11. package/src/mediaplayer/scss/player.scss +16 -6
  12. package/src/resourcemgr/tpl/layout.tpl +1 -1
  13. package/src/resourcemgr.js +13 -11
  14. package/src/scss/basic.scss +16 -0
package/dist/mediaplayer/css/player.css CHANGED
@@ -259,44 +259,56 @@ Usage:
259
259
  height: 2.2rem;
260
260
  }
261
261
 
262
+ .mediaplayer .controls .sound .action {
263
+ position: relative;
264
+ z-index: 1001;
265
+ }
266
+
262
267
  .mediaplayer .controls .sound .volume {
263
268
  cursor: default;
264
269
  position: absolute;
265
- z-index: 3;
270
+ z-index: 1000;
266
271
  background-color: black;
267
- padding: 0 10px 0 10px;
272
+ margin: 1px 2px;
273
+ padding: 10px 0;
274
+ width: 100%;
268
275
  height: 0;
269
276
  top: 0;
270
277
  left: -1px;
271
278
  opacity: 0;
279
+ text-align: center;
272
280
  border: solid 1px #333333;
281
+ pointer-events: none;
282
+ overflow: hidden;
273
283
  transition: height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms;
274
284
  }
275
285
 
276
286
  .mediaplayer .controls .sound .volume.up, .mediaplayer .controls .sound .volume.down {
277
287
  height: 120px;
278
- padding: 10px 10px 5px 10px;
279
288
  opacity: 1;
289
+ pointer-events: auto;
280
290
  }
281
291
 
282
292
  .mediaplayer .controls .sound .volume.up .slider, .mediaplayer .controls .sound .volume.down .slider {
293
+ display: inline-block;
283
294
  opacity: 1;
284
295
  transition: opacity 50ms linear 200ms;
285
296
  transition: opacity 50ms linear 200ms;
286
297
  }
287
298
 
288
299
  .mediaplayer .controls .sound .volume.up {
289
- top: -125px;
300
+ top: -127px;
290
301
  transition: height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear;
291
302
  }
292
303
 
293
304
  .mediaplayer .controls .sound .volume.down {
294
- top: 29px;
305
+ top: 30px;
295
306
  transition: height 300ms ease-out 50ms, opacity 50ms linear;
296
307
  }
297
308
 
298
309
  .mediaplayer .controls .sound .slider {
299
310
  opacity: 0;
311
+ display: none;
300
312
  }
301
313
 
302
314
  .mediaplayer .controls .sound .slider .noUi-handle {
package/dist/mediaplayer/css/player.css.map CHANGED
@@ -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\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n margin: 0;\n padding: 0;\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 display: flex;\n align-items: center;\n background-color: #000;\n margin: 0;\n flex-wrap: wrap;\n padding: 5px 5px 5px 50px;\n text-align: left;\n line-height: 2.3rem;\n &.reload {\n width: calc(100% + 2px);\n font-size: 20px;\n line-height: 20px;\n min-height: 36px;\n\n .icon {\n text-shadow: none;\n position: absolute;\n left: 0;\n font-size: 2rem;\n font-weight: bold;\n }\n\n .message {\n text-shadow: none;\n font-size: 1.3rem;\n margin-right: 5px;\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: never;\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-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\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","// 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\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n margin: 0;\n padding: 0;\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 .action {\n position: relative;\n z-index: 1001;\n }\n .volume {\n cursor: default;\n position: absolute;\n z-index: 1000;\n background-color: $playerBackground;\n margin: 1px 2px;\n padding: 10px 0;\n width: 100%;\n height: 0;\n top: 0;\n left: -1px;\n opacity : 0;\n text-align: center;\n border: solid 1px $playerBorder;\n pointer-events: none;\n overflow: hidden;\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 opacity : 1;\n pointer-events: auto;\n .slider {\n display: inline-block;\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: -127px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n &.down {\n top: 30px;\n @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n }\n }\n\n .slider {\n opacity : 0;\n display: none;\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 display: flex;\n align-items: center;\n background-color: #000;\n margin: 0;\n flex-wrap: wrap;\n padding: 5px 5px 5px 50px;\n text-align: left;\n line-height: 2.3rem;\n &.reload {\n width: calc(100% + 2px);\n font-size: 20px;\n line-height: 20px;\n min-height: 36px;\n\n .icon {\n text-shadow: none;\n position: absolute;\n left: 0;\n font-size: 2rem;\n font-weight: bold;\n }\n\n .message {\n text-shadow: none;\n font-size: 1.3rem;\n margin-right: 5px;\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: never;\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-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\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","// 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/resourcemgr.js CHANGED
@@ -118,10 +118,20 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
118
118
  var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
119
119
  this.compilerInfo = [4,'>= 1.0.0'];
120
120
  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
121
- var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
122
-
121
+ var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;
122
+
123
+ function program1(depth0,data) {
124
+
125
+ var stack1, helper;
126
+ if (helper = helpers.className) { stack1 = helper.call(depth0, {hash:{},data:data}); }
127
+ else { helper = (depth0 && depth0.className); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
128
+ return escapeExpression(stack1);
129
+ }
123
130
 
124
- buffer += "<div class=\"resourcemgr modal\">\n\n <h2>";
131
+ buffer += "<div class=\"resourcemgr modal ";
132
+ stack1 = helpers['if'].call(depth0, (depth0 && depth0.className), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
133
+ if(stack1 || stack1 === 0) { buffer += stack1; }
134
+ buffer += "\">\n\n <h2>";
125
135
  if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
126
136
  else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
127
137
  buffer += escapeExpression(stack1)
@@ -190,7 +200,7 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
190
200
  * @returns {jQueryElement} for chaining
191
201
  */
192
202
  init: function init(options) {
193
- var self = resourceMgr; //get options using default
203
+ var that = resourceMgr; //get options using default
194
204
 
195
205
  options = _.defaults(options, defaults);
196
206
  return this.each(function () {
@@ -207,14 +217,14 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
207
217
  });
208
218
  });
209
219
 
210
- $target = options.$target || self._createTarget($elt);
220
+ $target = options.$target || that._createTarget($elt);
211
221
  $target.modal({
212
222
  startClosed: true,
213
223
  minWidth: 'responsive'
214
224
  }); //rethrow some events
215
225
 
216
226
  $target.on('select.' + ns, function (e, files) {
217
- self._close($elt);
227
+ that._close($elt);
218
228
 
219
229
  $elt.trigger(e, [files]);
220
230
  });
@@ -258,13 +268,13 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
258
268
  $elt.trigger('create.' + ns, [$target[0]]);
259
269
 
260
270
  if (options.open) {
261
- self._open($elt);
271
+ that._open($elt);
262
272
  }
263
273
  } else {
264
274
  options = $elt.data(dataNs);
265
275
 
266
276
  if (options.open) {
267
- self._open($elt);
277
+ that._open($elt);
268
278
  }
269
279
  }
270
280
  });
@@ -277,7 +287,8 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
277
287
  options.targetId = 'resourcemgr-' + $$1(document).find('.resourcemgr').length; //generate
278
288
 
279
289
  options.$target = $$1(layout({
280
- title: options.title || ''
290
+ title: options.title || '',
291
+ className: options.className || ''
281
292
  }));
282
293
  options.$target.attr('id', options.targetId).css('display', 'none').appendTo(options.appendContainer);
283
294
  $elt.data(dataNs, options);
@@ -318,8 +329,9 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
318
329
  var $elt = $$1(this);
319
330
  var options = $elt.data(dataNs);
320
331
  $elt.data(dataNs, null);
332
+ /*eslint no-undefined: "error"*/
321
333
 
322
- if (options.bindEvent !== undefined && options.bindEvent !== false) {
334
+ if (typeof options.bindEvent !== 'undefined' && options.bindEvent !== false) {
323
335
  $elt.off(options.bindEvent);
324
336
  }
325
337
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oat-sa/tao-core-ui",
3
- "version": "1.58.2",
3
+ "version": "1.60.0",
4
4
  "displayName": "TAO Core UI",
5
5
  "description": "UI libraries of TAO",
6
6
  "scripts": {
package/scss/ckeditor/skins/tao/scss/editor.scss CHANGED
@@ -109,3 +109,20 @@ legend.cke_voice_label {
109
109
  text-shadow: none;
110
110
  color: $textColor;
111
111
  }
112
+
113
+ .cke_taolanguage_enabled.cke_focus {
114
+ // beware in may contains multiple level between, do not use '>'
115
+ span[lang][dir] {
116
+ border-right: 1px solid transparent;
117
+ border-left: 1px solid transparent;
118
+ box-shadow: inset 0px 0px 0px 1px $textColor;
119
+ padding: 0 4px;
120
+
121
+ // Avoid inherited languages block to be styled.
122
+ span[lang][dir] {
123
+ border: none;
124
+ box-shadow: none;
125
+ padding: 0;
126
+ }
127
+ }
128
+ }
package/scss/ckeditor/skins/tao/scss/inc/_menu.scss CHANGED
@@ -83,12 +83,7 @@ Special outer level classes used in this file:
83
83
  .cke_menubutton:active,
84
84
  .cke_menubutton:focus {
85
85
  outline: none;
86
- background-color: $uiReviewPanelBg;
87
- color: $textColor;
88
- &:after {
89
- color: $grey;
90
- border-color: $grey;
91
- }
86
+ background: none;
92
87
  }
93
88
 
94
89
  .cke_menubutton:hover,