@oat-sa/tao-core-ui 1.56.1 → 1.56.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.
- package/dist/mediaplayer/css/player.css +17 -5
- package/dist/mediaplayer/css/player.css.map +1 -1
- package/package.json +1 -1
- package/scss/.DS_Store +0 -0
- package/src/.DS_Store +0 -0
- package/src/css/basic.css +7845 -0
- package/src/css/basic.css.map +1 -0
- package/src/mediaplayer/css/player.css +17 -5
- package/src/mediaplayer/css/player.css.map +1 -1
- package/src/mediaplayer/scss/player.scss +16 -6
|
@@ -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":"AAaA;;;;;;CCPC;AD2QD,oEAAA;AEjRA,gBAAA;ADgBA;IACI,kBAAkB;ID4FlB,yBGxCqB;IHyCrB,kBAAkB;IAOlB,kBAA4B;ICjG5B,iBDuL+B;ICtL/B,eAAe;IACf,gBARiB;IASjB,gBAAgB;IAChB,cAAc;AAFlB;;AANA;IAYY,WAAW;IACX,WAAW;IACX,sBAAsB;AAFlC;;AAZA;IC8MoB,gBAAgB;AD9LpC;;AAhBA;IC6LyB,gBAAgB;ADzKzC;;AApBA;IAyBQ,aAAa;AADrB;;AAxBA;IA6BQ,kBAAkB;IAClB,yBAAuC;IACvC,WAAW;AADnB;;AA9BA;IAkCY,oBAAoB;IACpB,kBAAkB;IAClB,OAAO;IACP,MAAM;IACN,WAAW;IACX,YACJ;AADR;;AAvCA;IA2CY,cAAc;IACd,WAAW;IACX,YAAY;IACZ,gBAAgB;AAA5B;;AA9CA;IAkDY,kBAAkB;IAClB,UAAU;IACV,MAAM;IACN,OAAO;IACP,SAAS;IACT,QAAQ;IACR,UAAU;IACV,4BAA4B;AAAxC;;AAzDA;IA6DY,kBAAkB;IAClB,UAAU;IACV,QAAQ;IACR,SAAS;IACT,0BAA0B;IAC1B,iBAAiB;IACjB,kBAAkB;IAClB,qBAAqB;IACrB,aAAa;IDmIjB,eAAyB;IACzB,iBAA+B;IClI3B,YDwH6B;ACvHzC;;AAxEA;IDqGI,mBAA4B;IC1BhB,iBAAiB;IACjB,uBD+GmB;IC9GnB,YAAY;AAI5B;;AAjFA;IAgFoB,YAAY;AAKhC;;AArFA;IAqFgB,WAAW;IACX,eAAe;IACf,iBAAiB;AAIjC;;AA3FA;IA2FwB,UAAU;AAIlC;;AA/FA;IAgGoB,YAAY;IACZ,gBAAgB;AAGpC;;AApGA;IAoGoB,eAAe;AAInC;;AAxGA;IAwGoB,qEAAqE;AAIzF;;AA5GA;IA+GQ,kBAAkB;IAClB,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,mBAAmB;IACnB,WAAW;IACX,6BEhEiB;IFiEjB,YAxHa;AAyHrB;;AAvHA;IAyHY,kBAAkB;AAE9B;;AA3HA;IA4HY,mBAAmB;AAG/B;;AA/HA;IAgIY,kBAAkB;IDvFlB,qCAAwB;AC+FpC;;AAxIA;IAoIgB,kBAAkB;IAClB,mBAnJS;IAoJT,aApJS;IAqJT,cArJS;IAsJT,qBAAqB;IACrB,gBElFgB;IHdpB,qCAAwB;AC6GpC;;AAtJA;IA6IoB,UAAU;AAa9B;;AA1JA;IAiJoB,mBA/JK;AA4KzB;;AA9JA;IAsJgB,YAAY;IACZ,+BElGS;AF8GzB;;AAnKA;IA2JgB,YAAY;IACZ,8BEvGS;AFmHzB;;AAxKA;IAiKY,eAAe;IDpEvB,sBGpFyB;IHqFzB,kBAAkB;IAOlB,mBAA4B;IA5DpB,qCAAwB;IC4HxB,iBD0B6B;ACPzC;;AAxLA;IDqGI,mBAA4B;ICoEhB,iBDsByB;ACAzC;;AA/LA;IDqGI,mBAA4B;ICwEhB,mBExHS;AFiJzB;;AAtMA;IAiLgB,WAAW;IACX,YAAY;IDrFxB,sBGpFyB;IHqFzB,kBAAkB;IAOlB,mBAA4B;ICgFhB,mBDVkC;ACuClD;;AAlNA;IAwLgB,mBDbkC;AC2ClD;;AAtNA;IA2LgB,aAAa;AA+B7B;;AA1NA;IA+LgB,WAAW;AA+B3B;;AA9NA;IAkMoB,SAAS;AAgC7B;;AAlOA;IAuMgB,UAAU;AA+B1B;;AAtOA;IA0MoB,UAAU;AAgC9B;;AA1OA;IAgNY,eAAe;IAEf,cA/NY;IAgOZ,mBAjOa;IAmOb,WA/NK;IDkNT,eAAyB;IACzB,eAA+B;ICc3B,iBAAiB;AA6B7B;;AApPA;IA0NgB,cAAc;AA8B9B;;AAxPA;IA+NY,WAAW;IACX,kBAAkB;AA6B9B;;AA7PA;IAoOY,kBAAkB;IAClB,YAAY;IACZ,eAAe;IACf,kBApPY;AAiRxB;;AApQA;IA2OY,kBAxPY;IAyPZ,aA1Pa;AAuRzB;;AAzQA;IAgPY,aA9Pa;IA+Pb,cA/Pa;AA4RzB;;AA9QA;IAoPgB,kBAAkB;IAClB,aAAa;AA8B7B;;AAnRA;IAwPgB,eAAe;IACf,kBAAkB;IAClB,aAAa;IACb,uBDhEmB;ICiEnB,eAAe;IACf,eAAe;IACf,WAAW;IACX,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAW;IACX,kBAAkB;IAClB,yBE/MS;IFgNT,oBAAoB;IACpB,gBAAgB;ID7NpB,gFAAwB;ACiQpC;;AA1SA;IA0QoB,aAAa;IACb,UAAW;IACX,oBAAoB;AAoCxC;;AAhTA;IA8QwB,qBAAqB;IACrB,UAAW;IACX,qCAAqC;IDvOjD,qCAAwB;ACkRpC;;AA3TA;IAqRoB,WAAW;ID5OnB,oFAAwB;AC2RpC;;AApUA;IAyRoB,SAAS;IDhPjB,2DAAwB;ACoSpC;;AA7UA;IA+RgB,UAAW;IACX,aAAa;AAkD7B;;AAlVA;IAkSoB,eAAe;IACf,UAAU;IACV,WAAW;AAoD/B;;AAxVA;IAwSoB,WAAW;IACX,WAAW;AAoD/B;;AA7VA;IA6SoB,UAAU;IACV,aAAa;AAoDjC;;AAlWA;IAoTY,aAAa;AAkDzB;;AAtWA;IAuTY,aAAa;AAmDzB;;AA1WA;IA2TY,qBAAqB;AAmDjC;;AA9WA;IA8TY,aAAa;AAoDzB;;AAlXA;IAqUgB,aAAa;IACb,cApVS;IAqVT,QAAQ;AAiDxB;;AAxXA;IA+UgB,cA7VS;IA8VT,aA9VS;IA+VT,SAAS;AA6CzB;;AA9XA;IAyVwB,aAAa;IACb,mBAAmB;IACnB,sBAAsB;IACtB,SAAS;IACT,eAAe;IACf,yBAAyB;IACzB,gBAAgB;IAChB,mBAAmB;AAyC3C;;AAzYA;IAkW4B,uBAAuB;IACvB,eAAe;IACf,iBAAiB;IACjB,gBAAgB;AA2C5C;;AAhZA;IAwWgC,iBAAiB;IACjB,kBAAkB;IAClB,OAAO;IACP,eAAe;IACf,iBAAiB;AA4CjD;;AAxZA;IAgXgC,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;AA4CjD;;AA9ZA;IA6XY,mBAAmB;AAqC/B;;AAlaA;IAkYgB,eAAe;AAoC/B;;AAtaA;IAwYwB,qBAAqB;AAkC7C;;AA1aA;IAgZwB,aAAa;AA8BrC;;AA9aA;IAwZgB,eAAe;AA0B/B;;AAlbA;IA8ZwB,qBAAqB;AAwB7C;;AAtbA;IAwagB,qBAAqB;AAkBrC;;AA1bA;IAgbgB,qBAAqB;AAcrC;;AA9bA;IAmbgB,aAAa;AAe7B;;AAlcA;IA2bgB,aAAa;AAW7B;;AAtcA;IA8bgB,qBAAqB;AAYrC;;AA1cA;IAscgB,uBAAuB;AAQvC;;AA9cA;IA0cY,wBAAwB;AAQpC;;AAldA;IA6cY,wBAAwB;AASpC;;AAtdA;IAmdY,aAAa;AAOzB;;AA1dA;IAudY,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,YAAY;AAOxB;;AAjeA;IA6dgB,cExeQ;IFyeR,mBAAmB;IACnB,sBAAsB;AAQtC;;AAveA;IAyeQ,WAAW;IACX,sBAAsB;IACtB,kBAAkB;IAClB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,YAAY;IACZ,iBAAiB;IACjB,kBAAkB;IAClB,kBAAkB;IAClB,sBAAsB;IACtB,sBAAsB;IACtB,sCAAsC;AAE9C;;AAlBQ;IACI;QAAK,yBAAyB;IAsBtC;AACJ;;AA7fA;IA0fY,iBAAiB;IACjB,YAAY;AAOxB;;AAlgBA;IA+fgB,qBAAqB;AAOrC;;AAtgBA;IAugBgB,qBAAqB;AAGrC","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"]}
|
|
@@ -257,42 +257,52 @@ $controlsHeight: 36px;
|
|
|
257
257
|
width: $playerActionSize;
|
|
258
258
|
height: $playerActionSize;
|
|
259
259
|
|
|
260
|
-
|
|
260
|
+
.action {
|
|
261
|
+
position: relative;
|
|
262
|
+
z-index: 1001;
|
|
263
|
+
}
|
|
261
264
|
.volume {
|
|
262
265
|
cursor: default;
|
|
263
266
|
position: absolute;
|
|
264
|
-
z-index:
|
|
267
|
+
z-index: 1000;
|
|
265
268
|
background-color: $playerBackground;
|
|
266
|
-
|
|
269
|
+
margin: 1px 2px;
|
|
270
|
+
padding: 10px 0;
|
|
271
|
+
width: 100%;
|
|
267
272
|
height: 0;
|
|
268
273
|
top: 0;
|
|
269
274
|
left: -1px;
|
|
270
275
|
opacity : 0;
|
|
276
|
+
text-align: center;
|
|
271
277
|
border: solid 1px $playerBorder;
|
|
278
|
+
pointer-events: none;
|
|
279
|
+
overflow: hidden;
|
|
272
280
|
@include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);
|
|
273
281
|
|
|
274
282
|
&.up, &.down {
|
|
275
283
|
height: 120px;
|
|
276
|
-
padding: 10px 10px 5px 10px;
|
|
277
284
|
opacity : 1;
|
|
285
|
+
pointer-events: auto;
|
|
278
286
|
.slider {
|
|
287
|
+
display: inline-block;
|
|
279
288
|
opacity : 1;
|
|
280
289
|
transition: opacity 50ms linear 200ms;
|
|
281
290
|
@include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);
|
|
282
291
|
}
|
|
283
292
|
}
|
|
284
293
|
&.up {
|
|
285
|
-
top: -
|
|
294
|
+
top: -127px;
|
|
286
295
|
@include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);
|
|
287
296
|
}
|
|
288
297
|
&.down {
|
|
289
|
-
top:
|
|
298
|
+
top: 30px;
|
|
290
299
|
@include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);
|
|
291
300
|
}
|
|
292
301
|
}
|
|
293
302
|
|
|
294
303
|
.slider {
|
|
295
304
|
opacity : 0;
|
|
305
|
+
display: none;
|
|
296
306
|
.noUi-handle {
|
|
297
307
|
cursor: pointer;
|
|
298
308
|
width: 9px;
|