From 9e119c4fa72413c66f2d1b58ed89cc0515f61fda Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Thu, 19 Sep 2024 18:05:13 +0500 Subject: [PATCH 1/6] feat!: Dropping Sass support from builtin video block, replacing with vanilla CSS --- .../static/sass/_builtin-block-variables.scss | 10 +- xmodule/assets/VideoBlockDisplay.css | 962 ++++++++++++++++++ xmodule/assets/VideoBlockEditor.css | 139 +++ xmodule/assets/tabs/_tabs.scss | 40 +- xmodule/assets/video/_accessible_menu.scss | 47 +- xmodule/assets/video/_display.scss | 94 +- xmodule/tests/test_util_builtin_assets.py | 50 + xmodule/util/builtin_assets.py | 20 + xmodule/video_block/video_block.py | 8 +- 9 files changed, 1275 insertions(+), 95 deletions(-) create mode 100644 xmodule/assets/VideoBlockDisplay.css create mode 100644 xmodule/assets/VideoBlockEditor.css diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss index 2c567c6fb1f4..e232cb57d575 100644 --- a/common/static/sass/_builtin-block-variables.scss +++ b/common/static/sass/_builtin-block-variables.scss @@ -16,7 +16,6 @@ :root { --action-primary-active-bg: $action-primary-active-bg; - --all-text-inputs: $all-text-inputs; --base-font-size: $base-font-size; --base-line-height: $base-line-height; --baseline: $baseline; @@ -26,6 +25,7 @@ --blue-d1: $blue-d1; --blue-d2: $blue-d2; --blue-d4: $blue-d4; + --blue-s1: $blue-s1; --body-color: $body-color; --border-color: $border-color; --bp-screen-lg: $bp-screen-lg; @@ -34,6 +34,8 @@ --danger: $danger; --darkGrey: $darkGrey; --error-color: $error-color; + --error-color-dark: darken($error-color, 11%); + --error-color-light: lighten($error-color, 25%); --font-bold: $font-bold; --font-family-sans-serif: $font-family-sans-serif; --general-color-accent: $general-color-accent; @@ -44,6 +46,12 @@ --gray-l3: $gray-l3; --gray-l4: $gray-l4; --gray-l6: $gray-l6; + --icon-correct: url($static-path + '/images/correct-icon.png'); + --icon-incorrect: url($static-path + '/images/incorrect-icon.png'); + --icon-info: url($static-path + '/images/info-icon.png'); + --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png'); + --icon-spinner: url($static-path + '/images/spinner.gif'); + --icon-unanswered: url($static-path + '/images/unanswered-icon.png'); --incorrect: $incorrect; --lightGrey: $lightGrey; --lighter-base-font-color: $lighter-base-font-color; diff --git a/xmodule/assets/VideoBlockDisplay.css b/xmodule/assets/VideoBlockDisplay.css new file mode 100644 index 000000000000..a16a69754bdb --- /dev/null +++ b/xmodule/assets/VideoBlockDisplay.css @@ -0,0 +1,962 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockDisplay.scss */ +.xmodule_display.xmodule_VideoBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 25, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock { + margin-bottom: calc((var(--baseline)*1.5)); } + /* line 29, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles { + display: none; } + /* line 33, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video { + background: whitesmoke; + display: block; + margin: 0 -12px; + padding: 12px; + border-radius: 5px; + outline: none; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video:after { + content: ""; + display: table; + clear: both; } + /* line 43, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover { + border: 0; } + /* line 51, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner { + display: none; } + /* line 59, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider { + visibility: hidden; } + /* line 63, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player { + position: relative; } + /* line 66, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before { + display: block; + content: ""; + width: 100%; + padding-top: 55%; } + /* line 75, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .tc-wrapper { + position: relative; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after { + content: ""; + display: table; + clear: both; } + /* line 81, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .focus_grabber { + position: relative; + display: inline; + width: 0; + height: 0; } + /* line 88, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .downloads-heading { + margin: 1em 0 0; } + /* line 92, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section { + display: flex; + justify-content: space-between; } + /* line 96, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback { + flex: 1; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; } + @media (min-width: 768px) { + /* line 110, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads { + display: flex; } } + /* line 115, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd { + margin: 0; } + /* line 120, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources { + margin: 0; } + /* line 126, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts { + margin: 0; + padding: 0; + list-style: none; } + /* line 131, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option { + margin: 0; } + /* line 134, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link { + font-size: 16px !important; + font-weight: unset; } + /* line 142, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding { + padding-right: 0; } + /* line 145, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag { + position: absolute; + left: -9999em; + display: inline-block; + vertical-align: middle; + color: var(--body-color); } + /* line 153, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo { + display: inline-block; + max-width: 100%; + max-height: calc((var(--baseline)*2)); + padding: calc((var(--baseline)/4)) 0; + vertical-align: middle; } + /* line 164, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback { + display: none; } + /* line 167, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons { + display: flex; } + /* line 170, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper { + margin-right: 10px; } + /* line 173, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn, + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn { + border: none; + box-shadow: none; + background: transparent; } + /* line 181, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .google-disclaimer { + display: none; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; } + /* line 188, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper { + float: left; + margin-right: 2.27273%; + width: 65.90909%; + background-color: black; + position: relative; } + /* line 197, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play { + color: #0075b4; } + /* line 201, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after { + background: #fff; } + /* line 206, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post { + height: 50px; + background-color: #111010; } + /* line 212, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + background: rgba(0, 0, 0, 0.7); + top: 50%; + left: 50%; + padding: 30px; + border-radius: 25%; } + /* line 223, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after { + animation: rotateCW 3s infinite linear; + content: ''; + display: block; + width: 30px; + height: 30px; + border: 7px solid white; + border-top-color: transparent; + border-radius: 100%; + position: relative; } + /* line 237, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + top: 46%; + left: 50%; + font-size: 4em; + cursor: pointer; + opacity: 0.1; } + /* line 248, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after { + background: var(--white); + position: absolute; + width: 50%; + height: 50%; + content: ''; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + z-index: -1; } + /* line 263, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions { + left: 5%; + position: absolute; + width: 90%; + box-sizing: border-box; + top: 70%; + text-align: center; } + /* line 273, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible { + max-height: calc((var(--baseline) * 3)); + border-radius: calc((var(--baseline) / 5)); + padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); + background: rgba(0, 0, 0, 0.75); + color: var(--yellow); } + /* line 280, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before { + position: absolute; + display: inline-block; + top: 50%; + left: var(--baseline); + margin-top: -0.6em; + font-family: 'FontAwesome'; + content: "\f142"; + color: var(--white); + opacity: 0.5; } + /* line 294, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging { + background: black; + cursor: move; } + /* line 299, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before { + opacity: 1; } + /* line 305, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player { + overflow: hidden; + min-height: 158px; } + /* line 309, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div { + height: 100%; } + /* line 312, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden { + display: none; } + /* line 317, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error { + padding: calc((var(--baseline) / 5)); + background: black; + color: white !important; } + /* line 324, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video { + left: 0; + display: block; + border: none; + width: 100%; } + /* line 334, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 { + text-align: center; + color: white; } + /* line 338, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden { + display: none; } + /* line 344, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls { + position: relative; + border: 0; + background: #282c2e; + color: #f0f3f5; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after { + content: ""; + display: table; + clear: both; } + /* line 354, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div { + opacity: 1; } + /* line 360, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control { + display: inline-block; + vertical-align: middle; + margin: 0; + border: 0; + border-radius: 0; + padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); + background: #282c2e; + box-shadow: none; + text-shadow: none; + color: #cfd8dc; } + /* line 375, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus { + background: #171a1b; } + /* line 380, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control { + color: #0ea6ec; } + /* line 390, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon { + width: 1em; } + /* line 393, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd { + width: auto; } + /* line 401, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider { + transform-origin: bottom left; + transition: height 0.7s ease-in-out 0s; + box-sizing: border-box; + position: absolute; + bottom: 100%; + left: 0; + right: 0; + z-index: 1; + height: calc((var(--baseline) / 4)); + margin-left: 0; + border: 1px solid #4f595d; + border-radius: 0; + background: #4f595d; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after { + content: ""; + display: table; + clear: both; } + /* line 418, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header { + background: #8e3e63; + border: 1px solid #8e3e63; + box-shadow: none; + top: -1px; + left: -1px; } + /* line 426, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range { + opacity: 0.3; + background-color: #1e91d3; } + /* line 431, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle { + transform-origin: bottom left; + transition: all 0.7s ease-in-out 0s; + box-sizing: border-box; + top: -1px; + height: calc((var(--baseline) / 4)); + width: calc((var(--baseline) / 4)); + margin-left: calc(-1 * (var(--baseline) / 8)); + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; } + /* line 448, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover { + background-color: #db8baf; + border-color: #db8baf; } + /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + float: left; + list-style: none; + border-right: 1px solid #282c2e; + padding: 0; } + @media (max-width: 1120px) { + /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + margin-right: lh(0.5); + font-size: 0.875em; } } + /* line 472, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus { + position: relative; } + /* line 476, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip { + white-space: nowrap; } + /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.75); + display: inline-block; + color: #cfd8dc; + -webkit-font-smoothing: antialiased; } + @media (max-width: 1120px) { + /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.5); } } + /* line 497, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls { + float: right; + border-left: 1px dotted #4f595d; } + /* line 501, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + border-left: 1px dotted #4f595d; } + /* line 515, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus { + position: relative; } + /* line 520, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container { + position: relative; } + /* line 523, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu { + transition: none; + position: absolute; + display: none; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 120px; + margin: 0; + border: none; + padding: 0; + box-shadow: none; + background-color: #282c2e; + list-style: none; } + /* line 542, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li { + color: #e7ecee; } + /* line 547, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang { + text-align: left; + display: block; + width: 100%; + border: 0; + border-radius: 0; + padding: lh(0.5); + background: #282c2e; + box-shadow: none; + color: #e7ecee; + overflow: hidden; + text-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 564, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus { + background-color: #4f595d; + color: #fcfcfc; } + /* line 572, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang { + border-left: calc(var(--baseline)/10) solid #0ea6ec; + font-weight: var(--font-bold); + color: #0ea6ec; } + /* line 584, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu { + display: block; } + /* line 590, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls { + display: inline-block; } + /* line 599, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon { + transform: rotate(-90deg); } + /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { + padding: 0 calc((var(--baseline)/3)) 0 0; + font-family: var(--font-family-sans-serif); + color: #e7ecee; } + @media (max-width: 1120px) { + /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); } } + /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5) 0 0; + color: #e7ecee; + font-weight: bold; } + @media (max-width: 1120px) { + /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5); } } + /* line 638, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu { + width: var(--baseline); + padding: calc((var(--baseline) / 2)) 0; } + /* line 653, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon { + transform: rotate(90deg); } + /* line 666, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume { + display: inline-block; + position: relative; } + /* line 671, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container { + display: block; + opacity: 1; } + /* line 677, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a { + border-left: none; } + /* line 681, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + transition: none; + display: none; + position: absolute; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 41px; + height: 120px; + background-color: #282c2e; } + /* line 696, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider { + height: 100px; + width: calc((var(--baseline) / 4)); + margin: 14px auto; + box-sizing: border-box; + border: 1px solid #4f595d; + background: #4f595d; } + /* line 704, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle { + transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s; + left: -5px; + box-sizing: border-box; + height: 13px; + width: 13px; + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; } + /* line 719, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus { + background: #db8baf; + border-color: #db8baf; } + /* line 726, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range { + background: #8e3e63; + border: 1px solid #8e3e63; + left: -1px; + bottom: -1px; } + /* line 736, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + font-weight: 700; + letter-spacing: -1px; } + /* line 740, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active { + color: #0ea6ec; } + /* line 744, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles { + display: none !important; } + /* line 750, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active { + color: #0ea6ec; } + /* line 756, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles { + transition: none; } + /* line 765, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider { + height: calc((var(--baseline) / 1.5)); } + /* line 768, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle { + height: calc((var(--baseline) / 1.5)); + width: calc((var(--baseline) / 1.5)); } + /* line 778, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions { + width: 65%; } + /* line 782, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions { + width: 90%; } + /* line 787, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles { + float: left; + overflow: auto; + max-height: 460px; + width: 31.81818%; + padding: 0; + font-size: 14px; + visibility: visible; } + /* line 797, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles a { + color: #0074b5; } + /* line 801, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu { + height: 100%; + margin: 0; + padding: 0 3px; + list-style: none; } + /* line 807, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li { + margin-bottom: 8px; + border: 0; + padding: 0; + color: #0074b5; + line-height: lh(); } + /* line 816, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span { + display: block; } + /* line 820, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current { + color: #333; + font-weight: 700; } + /* line 825, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused { + outline: #000 dotted thin; + outline-offset: -1px; } + /* line 830, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus { + text-decoration: underline; } + /* line 835, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty { + margin-bottom: 0; } + /* line 839, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type { + position: relative; } + /* line 842, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end { + position: absolute; + bottom: 0; } + /* line 852, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper { + width: 100%; + background-color: inherit; } + /* line 857, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 { + bottom: 0; + left: 0; + right: 0; + position: absolute; + z-index: 1; } + /* line 865, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post { + height: 0; } + /* line 871, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 { + color: black; } + /* line 880, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + background-color: rgba(243, 243, 243, 0.8); + height: 100%; + position: absolute; + right: 0; + bottom: 0; + top: 0; + width: 275px; + padding: 0 var(--baseline); + display: none; } + /* line 895, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen { + background: rgba(0, 0, 0, 0.95); + border: 0; + bottom: 0; + height: 100%; + left: 0; + margin: 0; + padding: 0; + position: fixed; + top: 0; + width: 100%; + vertical-align: middle; + border-radius: 0; } + /* line 913, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper { + width: 100%; } + /* line 919, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post { + height: 0; } + /* line 924, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper { + position: static; } + /* line 929, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 { + color: white; } + /* line 934, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper { + width: 100%; + height: 100%; + position: static; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after { + content: ""; + display: table; + clear: both; } + /* line 941, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper { + height: 100%; + width: 75%; + margin-right: 0; + vertical-align: middle; } + /* line 949, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video { + position: absolute; + width: auto; + height: auto; } + /* line 958, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; } + /* line 968, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles { + height: 100%; + width: 25%; + padding: lh(); + box-sizing: border-box; + transition: none; + background: var(--black); + visibility: visible; } + /* line 979, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li { + color: #aaa; } + /* line 982, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current { + color: var(--white); } + /* line 992, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object, + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe, + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video { + width: 100%; + height: 100%; } + /* line 1002, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: 100%; + background-color: var(--black); } + /* line 1015, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 { + background-size: 15%; } + /* line 1019, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll { + padding: var(--baseline); + border: none; + border-radius: var(--baseline); + background: var(--black-t2); + box-shadow: none; } + /* line 1026, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after { + display: none; } + /* line 1032, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img { + height: calc((var(--baseline) * 4)); + width: calc((var(--baseline) * 4)); } + /* line 1037, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus { + background: var(--blue); } + /* line 88, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + cursor: pointer; } + /* line 100, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + z-index: 0; } + /* line 101, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + z-index: 10; } + /* line 103, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + z-index: 1000; } + /* line 104, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay { + z-index: 10000; } + /* line 105, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu, + .xmodule_display.xmodule_VideoBlock .submenu { + z-index: 100000; } + /* line 11, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + display: inline-block; + speak: none; } + /* line 18, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container { + position: relative; } + /* line 22, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list { + display: block; } + /* line 27, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + top: 100%; + margin: 0; + padding: 0; + display: none; + position: absolute; + list-style: none; + background-color: var(--white); + border: 1px solid #eee; } + /* line 39, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + margin: 0; + padding: 0; + border-bottom: 1px solid #eee; + color: var(--white); } + /* line 47, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--gray-l2); + font-size: 14px; + line-height: 23px; } + /* line 56, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus { + color: var(--gray-d1); } + /* line 63, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a { + color: #009fe6; } + /* line 68, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child { + box-shadow: none; + border-bottom: 0; + margin-top: 0; } + /* line 81, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container { + display: inline-block; + vertical-align: top; + border-left: 1px solid #eee; } + /* line 87, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a { + background-color: var(--action-primary-active-bg); + color: var(--very-light-text); } + /* line 91, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after { + color: var(--very-light-text); } + /* line 97, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a { + transition: all var(--tmg-f2) ease-in-out 0s; + font-size: 12px; + display: block; + border-radius: 0 3px 3px 0; + background-color: var(--very-light-text); + padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75)); + color: var(--gray-l2); + min-width: 1.5em; + line-height: 14px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; } + /* line 112, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + content: "\f0d7"; + position: absolute; + right: calc((var(--baseline)*0.5)); + top: 33%; + color: var(--lighter-base-font-color); } + /* line 123, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list { + right: 0; } + /* line 126, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li { + font-size: 0.875em; } + /* line 129, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a { + border: 0; + display: block; + padding: 0.70788em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 143, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu, + .xmodule_display.xmodule_VideoBlock .submenu { + border: 1px solid #333; + background: var(--white); + color: #333; + padding: 0; + margin: 0; + list-style: none; + position: absolute; + top: 0; + display: none; + outline: none; + cursor: default; + white-space: nowrap; } + /* line 160, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu.is-opened, + .xmodule_display.xmodule_VideoBlock .submenu.is-opened { + display: block; } + /* line 164, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + border-top: 1px solid var(--gray-l3); + padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); + outline: none; } + /* line 170, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span { + color: #333; } + /* line 174, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child { + border-top: none; } + /* line 178, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus { + background: #333; + color: var(--white); } + /* line 182, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span { + color: var(--white); } + /* line 188, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + position: relative; + padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); } + /* line 192, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after { + content: '\25B6'; + position: absolute; + right: 5px; + line-height: 25px; + font-size: 10px; } + /* line 200, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu { + display: none; } + /* line 204, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened { + background: #333; + color: var(--white); } + /* line 208, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span { + color: var(--white); } + /* line 212, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu { + display: block; } + /* line 217, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected { + font-weight: bold; } + /* line 222, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled, + .xmodule_display.xmodule_VideoBlock .submenu .is-disabled { + pointer-events: none; + color: var(--gray-l3); } + /* line 228, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: transparent; } diff --git a/xmodule/assets/VideoBlockEditor.css b/xmodule/assets/VideoBlockEditor.css new file mode 100644 index 000000000000..3577fdb22d32 --- /dev/null +++ b/xmodule/assets/VideoBlockEditor.css @@ -0,0 +1,139 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */ +.xmodule_edit.xmodule_VideoBlock { } + /* line 123, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-col-wide { + width: 74.46809%; + margin-right: 2.12766%; + float: left; } + /* line 130, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-col-narrow { + width: 23.40426%; + float: left; } + /* line 342, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading { + box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); + padding: 15px 20px; } + /* line 368, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading { + animation: fadeIn 0.25s linear 1; + opacity: 0.6; + background-color: #fff; + padding: 30px 20px; + text-align: center; } + /* line 379, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading .spin { + display: inline-block; } + /* line 385, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading .copy { + padding-left: 5px; } + /* line 390, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .is-hidden { + display: none; } + /* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .tabs-wrapper { + padding-top: 0; + position: relative; } + /* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings { + display: block; } + /* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-single-tab-name { + display: none; } + /* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs { + position: relative; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after { + content: ""; + display: table; + clear: both; } + /* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header { + box-sizing: border-box; + padding: 18px var(--baseline); + top: 0 !important; + right: 0; + background-color: var(--blue); + border-bottom: 1px solid var(--blue-d2); + color: var(--white); } + /* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name { + position: relative; + top: 0; + left: 0; + width: 50%; + color: var(--white); + font-weight: 600; } + /* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em { + display: inline-block; + margin-right: calc((var(--baseline)/4)); + font-weight: 400; + color: var(--white); } + /* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs { + list-style: none; + right: 0; + top: calc((var(--baseline)/4)); + position: absolute; + padding: 12px calc((var(--baseline)*0.75)); } + /* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap { + display: inline-block; + margin-left: 8px; } + /* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab { + font-size: 14px; + font-size: 1.4rem; + background-color: rgba(255, 255, 255, 0.3); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + border: 1px solid var(--blue-d1); + border-radius: 3px; + padding: calc((var(--baseline)/4)) var(--baseline); + background-color: var(--blue); + font-weight: bold; + color: var(--white); } + /* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current { + background-color: var(--blue); + background-image: -webkit-linear-gradient(var(--blue), var(--blue)); + background-image: linear-gradient(to ,var(--blue)); + color: var(--blue-d1); + box-shadow: inset 0 1px 2px 1px var(--shadow-l1); + background-color: var(--blue-d4); + cursor: default; } + /* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus { + box-shadow: inset 0 1px 2px 1px var(--shadow); + background-image: linear-gradient(#009fe6, #009fe6) !important; } + /* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive { + display: none; } + /* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry { + text-align: center; } + /* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload { + display: none; } + /* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li { + display: block; + margin: calc(var(--baseline)/2) 0; } + /* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button { + font-size: 1em; + display: block; + width: 70%; + margin: 0 auto; + text-align: center; } + /* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .component-tab { + background: var(--white); + position: relative; + border-top: 1px solid #8891a1; } + /* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .component-tab#advanced { + padding: 0; + border: none; } diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss index ad47d915a230..4b8c2a387a91 100644 --- a/xmodule/assets/tabs/_tabs.scss +++ b/xmodule/assets/tabs/_tabs.scss @@ -31,12 +31,12 @@ .edit-header { box-sizing: border-box; - padding: 18px $baseline; + padding: 18px var(--baseline); top: 0 !important; // ugly override for second level tab override right: 0; - background-color: $blue; - border-bottom: 1px solid $blue-d2; - color: $white; + background-color: var(--blue); + border-bottom: 1px solid var(--blue-d2); + color: var(--white); //Component Name .component-name { @@ -44,16 +44,16 @@ top: 0; left: 0; width: 50%; - color: $white; + color: var(--white); font-weight: 600; em { display: inline-block; - margin-right: ($baseline/4); + margin-right: calc((var(--baseline)/4)); font-weight: 400; - color: $white; + color: var(--white); } } @@ -61,9 +61,9 @@ .editor-tabs { list-style: none; right: 0; - top: ($baseline/4); + top: calc((var(--baseline)/4)); position: absolute; - padding: 12px ($baseline*0.75); + padding: 12px calc((var(--baseline)*0.75)); .inner_tab_wrap { display: inline-block; @@ -73,25 +73,25 @@ @include font-size(14); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - border: 1px solid $blue-d1; + border: 1px solid var(--blue-d1); border-radius: 3px; - padding: ($baseline/4) ($baseline); - background-color: $blue; + padding: calc((var(--baseline)/4)) (var(--baseline)); + background-color: var(--blue); font-weight: bold; - color: $white; + color: var(--white); &.current { - @include linear-gradient($blue, $blue); + @include linear-gradient(var(--blue), var(--blue)); - color: $blue-d1; - box-shadow: inset 0 1px 2px 1px $shadow-l1; - background-color: $blue-d4; + color: var(--blue-d1); + box-shadow: inset 0 1px 2px 1px var(--shadow-l1); + background-color: var(--blue-d4); cursor: default; } &:hover, &:focus { - box-shadow: inset 0 1px 2px 1px $shadow; + box-shadow: inset 0 1px 2px 1px var(--shadow); background-image: linear-gradient(#009fe6, #009fe6) !important; } } @@ -113,7 +113,7 @@ .comp-subtitles-import-list { > li { display: block; - margin: $baseline/2 0; + margin: calc(var(--baseline)/2) 0; } .blue-button { @@ -128,7 +128,7 @@ } .component-tab { - background: $white; + background: var(--white); position: relative; border-top: 1px solid #8891a1; diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss index f7153fa98429..d411925f2390 100644 --- a/xmodule/assets/video/_accessible_menu.scss +++ b/xmodule/assets/video/_accessible_menu.scss @@ -1,11 +1,12 @@ @import 'base/mixins'; +@import 'lms/theme/variables-v1'; $a11y--gray: rgb(127, 127, 127); $a11y--blue: rgb(0, 159, 230); -$a11y--gray-d1: shade($gray, 20%); -$a11y--gray-l2: tint($gray, 40%); -$a11y--gray-l3: tint($gray, 60%); -$a11y--blue-s1: saturate($blue, 15%); +$a11y--gray-d1: var(--gray-d1); +$a11y--gray-l2: var(--gray-l2); +$a11y--gray-l3: var(--gray-l3); +$a11y--blue-s1: var(--blue-s1); %use-font-awesome { font-family: FontAwesome; @@ -32,7 +33,7 @@ $a11y--blue-s1: saturate($blue, 15%); display: none; position: absolute; list-style: none; - background-color: $white; + background-color: var(--white); border: 1px solid #eee; li { @@ -41,7 +42,7 @@ $a11y--blue-s1: saturate($blue, 15%); margin: 0; padding: 0; border-bottom: 1px solid #eee; - color: $white; + color: var(--white); a { display: block; @@ -84,23 +85,23 @@ $a11y--blue-s1: saturate($blue, 15%); &.open { > a { - background-color: $action-primary-active-bg; - color: $very-light-text; + background-color: var(--action-primary-active-bg); + color: var(--very-light-text); &::after { - color: $very-light-text; + color: var(--very-light-text); } } } > a { - @include transition(all $tmg-f2 ease-in-out 0s); + @include transition(all var(--tmg-f2) ease-in-out 0s); @include font-size(12); display: block; border-radius: 0 3px 3px 0; - background-color: $very-light-text; - padding: ($baseline*0.75) ($baseline*1.25) ($baseline*0.75) ($baseline*0.75); + background-color: var(--very-light-text); + padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75)); color: $a11y--gray-l2; min-width: 1.5em; line-height: 14px; @@ -113,9 +114,9 @@ $a11y--blue-s1: saturate($blue, 15%); content: "\f0d7"; position: absolute; - right: ($baseline*0.5); + right: calc((var(--baseline)*0.5)); top: 33%; - color: $lighter-base-font-color; + color: var(--lighter-base-font-color); } } @@ -144,7 +145,7 @@ $a11y--blue-s1: saturate($blue, 15%); @extend %ui-depth5; border: 1px solid #333; - background: $white; + background: var(--white); color: #333; padding: 0; margin: 0; @@ -162,8 +163,8 @@ $a11y--blue-s1: saturate($blue, 15%); .menu-item, .submenu-item { - border-top: 1px solid $gray-l3; - padding: ($baseline/4) ($baseline/2); + border-top: 1px solid var(--gray-l3); + padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); outline: none; & > span { @@ -176,17 +177,17 @@ $a11y--blue-s1: saturate($blue, 15%); &:focus { background: #333; - color: $white; + color: var(--white); & > span { - color: $white; + color: var(--white); } } } .submenu-item { position: relative; - padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2); + padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); &::after { content: '\25B6'; @@ -202,10 +203,10 @@ $a11y--blue-s1: saturate($blue, 15%); &.is-opened { background: #333; - color: $white; + color: var(--white); & > span { - color: $white; + color: var(--white); } & > .submenu { @@ -220,7 +221,7 @@ $a11y--blue-s1: saturate($blue, 15%); .is-disabled { pointer-events: none; - color: $gray-l3; + color: var(--gray-l3); } } diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss index fd5cd73b2105..56d01caeee82 100644 --- a/xmodule/assets/video/_display.scss +++ b/xmodule/assets/video/_display.scss @@ -23,7 +23,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light $cool-dark: rgb(79, 89, 93); // UXPL cool dark & { - margin-bottom: ($baseline*1.5); + margin-bottom: calc((var(--baseline)*1.5)); } .is-hidden { @@ -99,9 +99,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .branding, .wrapper-transcript-feedback { flex: 1; - margin-top: $baseline; + margin-top: var(--baseline); - @include padding-right($baseline); + @include padding-right(var(--baseline)); vertical-align: top; } @@ -147,14 +147,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark left: -9999em; display: inline-block; vertical-align: middle; - color: $body-color; + color: var(--body-color); } .brand-logo { display: inline-block; max-width: 100%; - max-height: ($baseline*2); - padding: ($baseline/4) 0; + max-height: calc((var(--baseline)*2)); + padding: calc((var(--baseline)/4)) 0; vertical-align: middle; } } @@ -163,7 +163,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .wrapper-transcript-feedback { display: none; - + .transcript-feedback-buttons { display: flex; } @@ -180,8 +180,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .google-disclaimer { display: none; - margin-top: $baseline; - @include padding-right($baseline); + margin-top: var(--baseline); + @include padding-right(var(--baseline)); vertical-align: top; } @@ -246,7 +246,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark opacity: 0.1; &::after { - background: $white; + background: var(--white); position: absolute; width: 50%; height: 50%; @@ -271,23 +271,23 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .closed-captions.is-visible { - max-height: ($baseline * 3); - border-radius: ($baseline / 5); - padding: 8px ($baseline / 2) 8px ($baseline * 1.5); + max-height: calc((var(--baseline) * 3)); + border-radius: calc((var(--baseline) / 5)); + padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); background: rgba(0, 0, 0, 0.75); - color: $yellow; + color: var(--yellow); &::before { position: absolute; display: inline-block; top: 50%; - @include left($baseline); + @include left(var(--baseline)); margin-top: -0.6em; font-family: 'FontAwesome'; content: "\f142"; - color: $white; + color: var(--white); opacity: 0.5; } @@ -316,7 +316,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .video-error, .video-hls-error { - padding: ($baseline / 5); + padding: calc((var(--baseline) / 5)); background: black; color: white !important; // the pattern library headings shim is more scoped } @@ -366,7 +366,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark margin: 0; border: 0; border-radius: 0; - padding: ($baseline / 2) ($baseline / 1.5); + padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark box-shadow: none; text-shadow: none; @@ -409,7 +409,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark left: 0; right: 0; z-index: 1; - height: ($baseline / 4); + height: calc((var(--baseline) / 4)); margin-left: 0; border: 1px solid $cool-dark; border-radius: 0; @@ -436,11 +436,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark box-sizing: border-box; top: -1px; - height: ($baseline / 4); - width: ($baseline / 4); - margin-left: -($baseline / 8); // center-center causes the control to be beyond the end of the sider + height: calc((var(--baseline) / 4)); + width: calc((var(--baseline) / 4)); + margin-left: calc(-1 * (var(--baseline) / 8)); // center-center causes the control to be beyond the end of the sider border: 1px solid $secondary-base; - border-radius: ($baseline / 5); + border-radius: calc((var(--baseline) / 5)); padding: 0; background: $secondary-base; box-shadow: none; @@ -527,7 +527,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark position: absolute; display: none; - bottom: ($baseline * 2); + bottom: calc((var(--baseline) * 2)); @include right(0); // right-align menus since this whole collection is on the right @@ -571,9 +571,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark &.is-active { .speed-option, .control-lang { - @include border-left($baseline/10 solid rgb(14, 166, 236)); + @include border-left(calc(var(--baseline)/10) solid rgb(14, 166, 236)); - font-weight: $font-bold; + font-weight: var(--font-bold); color: rgb(14, 166, 236); // UXPL primary accent } } @@ -610,9 +610,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .speed-button { .label { - @include padding(0 ($baseline/3) 0 0); + @include padding(0 calc((var(--baseline)/3)) 0 0); - font-family: $font-family-sans-serif; + font-family: var(--font-family-sans-serif); color: rgb(231, 236, 238); // UXPL grayscale-cool x-light @media (max-width: 1120px) { @@ -636,8 +636,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .lang { .language-menu { - width: $baseline; - padding: ($baseline / 2) 0; + width: var(--baseline); + padding: calc((var(--baseline) / 2)) 0; } .control { @@ -685,7 +685,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark display: none; position: absolute; - bottom: ($baseline * 2); + bottom: calc((var(--baseline) * 2)); @include right(0); @@ -695,7 +695,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .volume-slider { height: 100px; - width: ($baseline / 4); + width: calc((var(--baseline) / 4)); margin: 14px auto; box-sizing: border-box; border: 1px solid $cool-dark; @@ -704,14 +704,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .ui-slider-handle { @extend %ui-fake-link; - @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s); + @include transition(height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s); @include left(-5px); box-sizing: border-box; height: 13px; width: 13px; border: 1px solid $secondary-base; - border-radius: ($baseline / 5); + border-radius: calc((var(--baseline) / 5)); padding: 0; background: $secondary-base; box-shadow: none; @@ -763,11 +763,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark &:hover { .video-controls { .slider { - height: ($baseline / 1.5); + height: calc((var(--baseline) / 1.5)); .ui-slider-handle { - height: ($baseline / 1.5); - width: ($baseline / 1.5); + height: calc((var(--baseline) / 1.5)); + width: calc((var(--baseline) / 1.5)); } } } @@ -887,7 +887,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark bottom: 0; top: 0; width: 275px; - padding: 0 $baseline; + padding: 0 var(--baseline); display: none; } } @@ -973,14 +973,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark box-sizing: border-box; @include transition(none); - background: $black; + background: var(--black); visibility: visible; li { color: #aaa; &.current { - color: $white; + color: var(--white); } } } @@ -1010,17 +1010,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; - background-color: $black; + background-color: var(--black); &.is-html5 { background-size: 15%; } .btn-play.btn-pre-roll { - padding: $baseline; + padding: var(--baseline); border: none; - border-radius: $baseline; - background: $black-t2; + border-radius: var(--baseline); + background: var(--black-t2); box-shadow: none; &::after { @@ -1030,13 +1030,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } img { - height: ($baseline * 4); - width: ($baseline * 4); + height: calc((var(--baseline) * 4)); + width: calc((var(--baseline) * 4)); } &:hover, &:focus { - background: $blue; + background: var(--blue); } } } diff --git a/xmodule/tests/test_util_builtin_assets.py b/xmodule/tests/test_util_builtin_assets.py index bc26bed3d6be..acfd3806d09b 100644 --- a/xmodule/tests/test_util_builtin_assets.py +++ b/xmodule/tests/test_util_builtin_assets.py @@ -1,6 +1,7 @@ """ Tests for methods defined in builtin_assets.py """ +from django.conf import settings from unittest import TestCase from unittest.mock import patch @@ -66,3 +67,52 @@ def test_happy_path(self): mimetype='text/css', placement='head', ) + + +class AddCssToFragmentTests(TestCase): + """ + Tests for add_css_to_fragment. + TODO: Update the comments, remove all sass usage + We would have liked to also test two additional cases: + * When a theme is enabled, and add_css_to_fragment is called with a + theme-overriden Sass file, then a URL to themed CSS is added. + * When a theme is enabled, but add_css_to_fragment is called with a Sass + file that the theme doesn't override, then a URL to the original (unthemed) + CSS is added. + Unfortunately, under edx-platform tests, settings.STATICFILES_STORAGE does not + include the ThemeStorage class, so themed URL generation doesn't work. + """ + + def test_absolute_path_raises_value_error(self): + fragment = Fragment() + with self.assertRaises(ValueError): + builtin_assets.add_css_to_fragment( + fragment, + "/openedx/edx-platform/xmodule/assets/VideoBlockEditor.css", + ) + + def test_not_css_raises_value_error(self): + fragment = Fragment() + with self.assertRaises(ValueError): + builtin_assets.add_css_to_fragment( + fragment, + "vertical/public/js/vertical_student_view.js" + ) + + def test_misspelled_path_raises_not_found(self): + fragment = Fragment() + with self.assertRaises(FileNotFoundError): + builtin_assets.add_css_to_fragment( + fragment, + "VideoBlockEditorrrrr.css", + ) + + def test_happy_path(self): + fragment = Fragment() + builtin_assets.add_css_to_fragment(fragment, "VideoBlockEditor.css") + assert fragment.resources[0] == FragmentResource( + kind='url', + data=f'{settings.REPO_ROOT}/xmodule/assets/VideoBlockEditor.css', + mimetype='text/css', + placement='head', + ) diff --git a/xmodule/util/builtin_assets.py b/xmodule/util/builtin_assets.py index aaedc44cc649..5864e8a3c30f 100644 --- a/xmodule/util/builtin_assets.py +++ b/xmodule/util/builtin_assets.py @@ -12,6 +12,26 @@ from openedx.core.djangoapps.theming.helpers_static import get_static_file_url +def add_css_to_fragment(fragment, css_relative_path): + """ + Given a css path relative to xmodule/assets, add a compiled CSS URL to the fragment. + + Raises: + * ValueError if {css_relative_path} is absolute or does not end in '.css'. + * FileNotFoundError if edx-platform/xmodule/assets/{css_relative_path} is missing. + """ + if not isinstance(css_relative_path, Path): + css_relative_path = Path(css_relative_path) + if css_relative_path.is_absolute(): + raise ValueError(f"css_file_name should be relative; is absolute: {css_relative_path}") + if css_relative_path.suffix != '.css': + raise ValueError(f"css_file_name should be .css file; is: {css_relative_path}") + css_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / css_relative_path + if not css_absolute_path.is_file(): + raise FileNotFoundError(f"css file not found: {css_absolute_path}") + fragment.add_css_url(str(css_absolute_path)) + + def add_sass_to_fragment(fragment, sass_relative_path): """ Given a Sass path relative to xmodule/assets, add a compiled CSS URL to the fragment. diff --git a/xmodule/video_block/video_block.py b/xmodule/video_block/video_block.py index b4fddb63fa7a..46cdcb590102 100644 --- a/xmodule/video_block/video_block.py +++ b/xmodule/video_block/video_block.py @@ -48,7 +48,7 @@ from xmodule.modulestore.inheritance import InheritanceKeyValueStore, own_metadata from xmodule.raw_block import EmptyDataRawMixin from xmodule.validation import StudioValidation, StudioValidationMessage -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.video_block import manage_video_subtitles_save from xmodule.x_module import ( PUBLIC_VIEW, STUDENT_VIEW, @@ -242,7 +242,7 @@ def student_view(self, context): Return the student view. """ fragment = Fragment(self.get_html(context=context)) - add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss') + add_css_to_fragment(fragment, 'VideoBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay') shim_xmodule_js(fragment, 'Video') return fragment @@ -260,7 +260,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'VideoBlockEditor.scss') + add_css_to_fragment(fragment, 'VideoBlockEditor.css') add_webpack_js_to_fragment(fragment, 'VideoBlockEditor') shim_xmodule_js(fragment, 'TabsEditingDescriptor') return fragment @@ -276,7 +276,7 @@ def public_view(self, context): return self.student_view(context) fragment = Fragment(self.get_html(view=PUBLIC_VIEW, context=context)) - add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss') + add_css_to_fragment(fragment, 'VideoBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay') shim_xmodule_js(fragment, 'Video') return fragment From d06142e4201310313c6c03107495bc6628ce4ff2 Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Fri, 20 Sep 2024 17:53:25 +0500 Subject: [PATCH 2/6] chore: Remove css comments and format the files --- xmodule/assets/VideoBlockDisplay.css | 2051 ++++++++++++++------------ xmodule/assets/VideoBlockEditor.css | 282 ++-- 2 files changed, 1273 insertions(+), 1060 deletions(-) diff --git a/xmodule/assets/VideoBlockDisplay.css b/xmodule/assets/VideoBlockDisplay.css index a16a69754bdb..93c4b6adcec3 100644 --- a/xmodule/assets/VideoBlockDisplay.css +++ b/xmodule/assets/VideoBlockDisplay.css @@ -1,869 +1,1038 @@ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); -/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockDisplay.scss */ + .xmodule_display.xmodule_VideoBlock { - /* stylelint-disable-line */ - /* stylelint-disable-line */ - /* stylelint-disable-line */ - /* stylelint-disable-line */ - /* stylelint-disable-line */ - /* stylelint-disable-line */ } - /* line 25, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock { - margin-bottom: calc((var(--baseline)*1.5)); } - /* line 29, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles { - display: none; } - /* line 33, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video { + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ +} + +.xmodule_display.xmodule_VideoBlock { + margin-bottom: calc((var(--baseline) * 1.5)); +} + +.xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video { background: whitesmoke; display: block; margin: 0 -12px; padding: 12px; border-radius: 5px; - outline: none; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_display.xmodule_VideoBlock .video:after { - content: ""; - display: table; - clear: both; } - /* line 43, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover { - border: 0; } - /* line 51, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner { - display: none; } - /* line 59, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider { - visibility: hidden; } - /* line 63, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player { - position: relative; } - /* line 66, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before { - display: block; - content: ""; - width: 100%; - padding-top: 55%; } - /* line 75, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .tc-wrapper { - position: relative; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after { - content: ""; - display: table; - clear: both; } - /* line 81, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .focus_grabber { - position: relative; - display: inline; - width: 0; - height: 0; } - /* line 88, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .downloads-heading { - margin: 1em 0 0; } - /* line 92, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section { - display: flex; - justify-content: space-between; } - /* line 96, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video, - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts, - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts, - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding, - .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback { - flex: 1; - margin-top: var(--baseline); - padding-right: var(--baseline); - vertical-align: top; } - @media (min-width: 768px) { - /* line 110, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads { - display: flex; } } - /* line 115, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd { - margin: 0; } - /* line 120, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources { - margin: 0; } - /* line 126, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts { - margin: 0; - padding: 0; - list-style: none; } - /* line 131, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option { - margin: 0; } - /* line 134, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link { - font-size: 16px !important; - font-weight: unset; } - /* line 142, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding { - padding-right: 0; } - /* line 145, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag { - position: absolute; - left: -9999em; - display: inline-block; - vertical-align: middle; - color: var(--body-color); } - /* line 153, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo { - display: inline-block; - max-width: 100%; - max-height: calc((var(--baseline)*2)); - padding: calc((var(--baseline)/4)) 0; - vertical-align: middle; } - /* line 164, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback { - display: none; } - /* line 167, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons { - display: flex; } - /* line 170, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper { - margin-right: 10px; } - /* line 173, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn, - .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn { - border: none; - box-shadow: none; - background: transparent; } - /* line 181, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .google-disclaimer { - display: none; - margin-top: var(--baseline); - padding-right: var(--baseline); - vertical-align: top; } - /* line 188, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper { - float: left; - margin-right: 2.27273%; - width: 65.90909%; - background-color: black; - position: relative; } - /* line 197, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play { - color: #0075b4; } - /* line 201, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after { - background: #fff; } - /* line 206, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post { - height: 50px; - background-color: #111010; } - /* line 212, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner { - transform: translate(-50%, -50%); - position: absolute; - z-index: 1; - background: rgba(0, 0, 0, 0.7); - top: 50%; - left: 50%; - padding: 30px; - border-radius: 25%; } - /* line 223, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after { - animation: rotateCW 3s infinite linear; - content: ''; - display: block; - width: 30px; - height: 30px; - border: 7px solid white; - border-top-color: transparent; - border-radius: 100%; - position: relative; } - /* line 237, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play { - transform: translate(-50%, -50%); - position: absolute; - z-index: 1; - top: 46%; - left: 50%; - font-size: 4em; - cursor: pointer; - opacity: 0.1; } - /* line 248, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after { - background: var(--white); - position: absolute; - width: 50%; - height: 50%; - content: ''; - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - z-index: -1; } - /* line 263, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions { - left: 5%; + outline: none; +} + +.xmodule_display.xmodule_VideoBlock .video:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover { + border: 0; +} + +.xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider { + visibility: hidden; +} + +.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before { + display: block; + content: ""; + width: 100%; + padding-top: 55%; +} + +.xmodule_display.xmodule_VideoBlock .video .tc-wrapper { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_VideoBlock .video .focus_grabber { + position: relative; + display: inline; + width: 0; + height: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .downloads-heading { + margin: 1em 0 0; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section { + display: flex; + justify-content: space-between; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video, +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts, +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts, +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding, +.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback { + flex: 1; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; +} + +@media (min-width: 768px) { + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads { + display: flex; + } +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd { + margin: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources { + margin: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts { + margin: 0; + padding: 0; + list-style: none; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option { + margin: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link { + font-size: 16px !important; + font-weight: unset; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding { + padding-right: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag { + position: absolute; + left: -9999em; + display: inline-block; + vertical-align: middle; + color: var(--body-color); +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo { + display: inline-block; + max-width: 100%; + max-height: calc((var(--baseline) * 2)); + padding: calc((var(--baseline) / 4)) 0; + vertical-align: middle; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons { + display: flex; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper { + margin-right: 10px; +} + +.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn, +.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn { + border: none; + box-shadow: none; + background: transparent; +} + +.xmodule_display.xmodule_VideoBlock .video .google-disclaimer { + display: none; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper { + float: left; + margin-right: 2.27273%; + width: 65.90909%; + background-color: black; + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play { + color: #0075b4; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after { + background: #fff; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post { + height: 50px; + background-color: #111010; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + background: rgba(0, 0, 0, 0.7); + top: 50%; + left: 50%; + padding: 30px; + border-radius: 25%; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after { + animation: rotateCW 3s infinite linear; + content: ''; + display: block; + width: 30px; + height: 30px; + border: 7px solid white; + border-top-color: transparent; + border-radius: 100%; + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + top: 46%; + left: 50%; + font-size: 4em; + cursor: pointer; + opacity: 0.1; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after { + background: var(--white); + position: absolute; + width: 50%; + height: 50%; + content: ''; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + z-index: -1; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions { + left: 5%; + position: absolute; + width: 90%; + box-sizing: border-box; + top: 70%; + text-align: center; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible { + max-height: calc((var(--baseline) * 3)); + border-radius: calc((var(--baseline) / 5)); + padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); + background: rgba(0, 0, 0, 0.75); + color: var(--yellow); +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before { + position: absolute; + display: inline-block; + top: 50%; + left: var(--baseline); + margin-top: -0.6em; + font-family: 'FontAwesome'; + content: "\f142"; + color: var(--white); + opacity: 0.5; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging { + background: black; + cursor: move; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before { + opacity: 1; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player { + overflow: hidden; + min-height: 158px; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div { + height: 100%; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error { + padding: calc((var(--baseline) / 5)); + background: black; + color: white !important; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video { + left: 0; + display: block; + border: none; + width: 100%; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 { + text-align: center; + color: white; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls { + position: relative; + border: 0; + background: #282c2e; + color: #f0f3f5; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div { + opacity: 1; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control { + display: inline-block; + vertical-align: middle; + margin: 0; + border: 0; + border-radius: 0; + padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); + background: #282c2e; + box-shadow: none; + text-shadow: none; + color: #cfd8dc; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus { + background: #171a1b; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control { + color: #0ea6ec; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon { + width: 1em; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd { + width: auto; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider { + transform-origin: bottom left; + transition: height 0.7s ease-in-out 0s; + box-sizing: border-box; + position: absolute; + bottom: 100%; + left: 0; + right: 0; + z-index: 1; + height: calc((var(--baseline) / 4)); + margin-left: 0; + border: 1px solid #4f595d; + border-radius: 0; + background: #4f595d; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header { + background: #8e3e63; + border: 1px solid #8e3e63; + box-shadow: none; + top: -1px; + left: -1px; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range { + opacity: 0.3; + background-color: #1e91d3; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle { + transform-origin: bottom left; + transition: all 0.7s ease-in-out 0s; + box-sizing: border-box; + top: -1px; + height: calc((var(--baseline) / 4)); + width: calc((var(--baseline) / 4)); + margin-left: calc(-1 * (var(--baseline) / 8)); + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover { + background-color: #db8baf; + border-color: #db8baf; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + float: left; + list-style: none; + border-right: 1px solid #282c2e; + padding: 0; +} + +@media (max-width: 1120px) { + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + margin-right: lh(0.5); + font-size: 0.875em; + } +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip { + white-space: nowrap; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.75); + display: inline-block; + color: #cfd8dc; + -webkit-font-smoothing: antialiased; +} + +@media (max-width: 1120px) { + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.5); + } +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls { + float: right; + border-left: 1px dotted #4f595d; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + border-left: 1px dotted #4f595d; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu { + transition: none; + position: absolute; + display: none; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 120px; + margin: 0; + border: none; + padding: 0; + box-shadow: none; + background-color: #282c2e; + list-style: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li { + color: #e7ecee; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang { + text-align: left; + display: block; + width: 100%; + border: 0; + border-radius: 0; + padding: lh(0.5); + background: #282c2e; + box-shadow: none; + color: #e7ecee; + overflow: hidden; + text-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus { + background-color: #4f595d; + color: #fcfcfc; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang { + border-left: calc(var(--baseline) / 10) solid #0ea6ec; + font-weight: var(--font-bold); + color: #0ea6ec; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu { + display: block; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang, +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls { + display: inline-block; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon { + transform: rotate(-90deg); +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { + padding: 0 calc((var(--baseline) / 3)) 0 0; + font-family: var(--font-family-sans-serif); + color: #e7ecee; +} + +@media (max-width: 1120px) { + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { position: absolute; - width: 90%; - box-sizing: border-box; - top: 70%; - text-align: center; } - /* line 273, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible { - max-height: calc((var(--baseline) * 3)); - border-radius: calc((var(--baseline) / 5)); - padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); - background: rgba(0, 0, 0, 0.75); - color: var(--yellow); } - /* line 280, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before { - position: absolute; - display: inline-block; - top: 50%; - left: var(--baseline); - margin-top: -0.6em; - font-family: 'FontAwesome'; - content: "\f142"; - color: var(--white); - opacity: 0.5; } - /* line 294, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging { - background: black; - cursor: move; } - /* line 299, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before { - opacity: 1; } - /* line 305, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player { - overflow: hidden; - min-height: 158px; } - /* line 309, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div { - height: 100%; } - /* line 312, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden { - display: none; } - /* line 317, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error { - padding: calc((var(--baseline) / 5)); - background: black; - color: white !important; } - /* line 324, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video { - left: 0; - display: block; - border: none; - width: 100%; } - /* line 334, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 { - text-align: center; - color: white; } - /* line 338, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden { - display: none; } - /* line 344, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls { - position: relative; - border: 0; - background: #282c2e; - color: #f0f3f5; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after { - content: ""; - display: table; - clear: both; } - /* line 354, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div { - opacity: 1; } - /* line 360, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control { - display: inline-block; - vertical-align: middle; - margin: 0; - border: 0; - border-radius: 0; - padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); - background: #282c2e; - box-shadow: none; - text-shadow: none; - color: #cfd8dc; } - /* line 375, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus { - background: #171a1b; } - /* line 380, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control { - color: #0ea6ec; } - /* line 390, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon { - width: 1em; } - /* line 393, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd { - width: auto; } - /* line 401, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider { - transform-origin: bottom left; - transition: height 0.7s ease-in-out 0s; - box-sizing: border-box; - position: absolute; - bottom: 100%; - left: 0; - right: 0; - z-index: 1; - height: calc((var(--baseline) / 4)); - margin-left: 0; - border: 1px solid #4f595d; - border-radius: 0; - background: #4f595d; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after { - content: ""; - display: table; - clear: both; } - /* line 418, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header { - background: #8e3e63; - border: 1px solid #8e3e63; - box-shadow: none; - top: -1px; - left: -1px; } - /* line 426, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range { - opacity: 0.3; - background-color: #1e91d3; } - /* line 431, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle { - transform-origin: bottom left; - transition: all 0.7s ease-in-out 0s; - box-sizing: border-box; - top: -1px; - height: calc((var(--baseline) / 4)); - width: calc((var(--baseline) / 4)); - margin-left: calc(-1 * (var(--baseline) / 8)); - border: 1px solid #cb598d; - border-radius: calc((var(--baseline) / 5)); - padding: 0; - background: #cb598d; - box-shadow: none; } - /* line 448, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover { - background-color: #db8baf; - border-color: #db8baf; } - /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { - float: left; - list-style: none; - border-right: 1px solid #282c2e; - padding: 0; } - @media (max-width: 1120px) { - /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { - margin-right: lh(0.5); - font-size: 0.875em; } } - /* line 472, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus { - position: relative; } - /* line 476, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip { - white-space: nowrap; } - /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { - padding-left: lh(0.75); - display: inline-block; - color: #cfd8dc; - -webkit-font-smoothing: antialiased; } - @media (max-width: 1120px) { - /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { - padding-left: lh(0.5); } } - /* line 497, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls { - float: right; - border-left: 1px dotted #4f595d; } - /* line 501, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { - border-left: 1px dotted #4f595d; } - /* line 515, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus { - position: relative; } - /* line 520, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container { - position: relative; } - /* line 523, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu { - transition: none; - position: absolute; - display: none; - bottom: calc((var(--baseline) * 2)); - right: 0; - width: 120px; - margin: 0; - border: none; - padding: 0; - box-shadow: none; - background-color: #282c2e; - list-style: none; } - /* line 542, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li { - color: #e7ecee; } - /* line 547, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang { - text-align: left; - display: block; - width: 100%; - border: 0; - border-radius: 0; - padding: lh(0.5); - background: #282c2e; - box-shadow: none; - color: #e7ecee; - overflow: hidden; - text-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 564, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus { - background-color: #4f595d; - color: #fcfcfc; } - /* line 572, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang { - border-left: calc(var(--baseline)/10) solid #0ea6ec; - font-weight: var(--font-bold); - color: #0ea6ec; } - /* line 584, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu { - display: block; } - /* line 590, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang, - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls { - display: inline-block; } - /* line 599, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon { - transform: rotate(-90deg); } - /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { - padding: 0 calc((var(--baseline)/3)) 0 0; - font-family: var(--font-family-sans-serif); - color: #e7ecee; } - @media (max-width: 1120px) { - /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); } } - /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { - padding: 0 lh(0.5) 0 0; - color: #e7ecee; - font-weight: bold; } - @media (max-width: 1120px) { - /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { - padding: 0 lh(0.5); } } - /* line 638, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu { - width: var(--baseline); - padding: calc((var(--baseline) / 2)) 0; } - /* line 653, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon { - transform: rotate(90deg); } - /* line 666, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume { - display: inline-block; - position: relative; } - /* line 671, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container { - display: block; - opacity: 1; } - /* line 677, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a { - border-left: none; } - /* line 681, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { - transition: none; - display: none; - position: absolute; - bottom: calc((var(--baseline) * 2)); - right: 0; - width: 41px; - height: 120px; - background-color: #282c2e; } - /* line 696, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider { - height: 100px; - width: calc((var(--baseline) / 4)); - margin: 14px auto; - box-sizing: border-box; - border: 1px solid #4f595d; - background: #4f595d; } - /* line 704, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle { - transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s; - left: -5px; - box-sizing: border-box; - height: 13px; - width: 13px; - border: 1px solid #cb598d; - border-radius: calc((var(--baseline) / 5)); - padding: 0; - background: #cb598d; - box-shadow: none; } - /* line 719, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus { - background: #db8baf; - border-color: #db8baf; } - /* line 726, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range { - background: #8e3e63; - border: 1px solid #8e3e63; - left: -1px; - bottom: -1px; } - /* line 736, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { - font-weight: 700; - letter-spacing: -1px; } - /* line 740, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active { - color: #0ea6ec; } - /* line 744, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles { - display: none !important; } - /* line 750, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active { - color: #0ea6ec; } - /* line 756, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles { - transition: none; } - /* line 765, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider { - height: calc((var(--baseline) / 1.5)); } - /* line 768, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle { - height: calc((var(--baseline) / 1.5)); - width: calc((var(--baseline) / 1.5)); } - /* line 778, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions { - width: 65%; } - /* line 782, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions { - width: 90%; } - /* line 787, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles { - float: left; - overflow: auto; - max-height: 460px; - width: 31.81818%; - padding: 0; - font-size: 14px; - visibility: visible; } - /* line 797, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles a { - color: #0074b5; } - /* line 801, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu { - height: 100%; - margin: 0; - padding: 0 3px; - list-style: none; } - /* line 807, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li { - margin-bottom: 8px; - border: 0; - padding: 0; - color: #0074b5; - line-height: lh(); } - /* line 816, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span { - display: block; } - /* line 820, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current { - color: #333; - font-weight: 700; } - /* line 825, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused { - outline: #000 dotted thin; - outline-offset: -1px; } - /* line 830, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus { - text-decoration: underline; } - /* line 835, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty { - margin-bottom: 0; } - /* line 839, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type { - position: relative; } - /* line 842, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end { - position: absolute; - bottom: 0; } - /* line 852, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper { - width: 100%; - background-color: inherit; } - /* line 857, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 { - bottom: 0; - left: 0; - right: 0; - position: absolute; - z-index: 1; } - /* line 865, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre, - .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post { - height: 0; } - /* line 871, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 { - color: black; } - /* line 880, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { - background-color: rgba(243, 243, 243, 0.8); - height: 100%; - position: absolute; - right: 0; - bottom: 0; - top: 0; - width: 275px; - padding: 0 var(--baseline); - display: none; } - /* line 895, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen { - background: rgba(0, 0, 0, 0.95); - border: 0; - bottom: 0; - height: 100%; - left: 0; - margin: 0; - padding: 0; - position: fixed; - top: 0; - width: 100%; - vertical-align: middle; - border-radius: 0; } - /* line 913, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper { - width: 100%; } - /* line 919, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre, - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post { - height: 0; } - /* line 924, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper { - position: static; } - /* line 929, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 { - color: white; } - /* line 934, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper { - width: 100%; - height: 100%; - position: static; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after { - content: ""; - display: table; - clear: both; } - /* line 941, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper { - height: 100%; - width: 75%; - margin-right: 0; - vertical-align: middle; } - /* line 949, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object, - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe, - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video { - position: absolute; - width: auto; - height: auto; } - /* line 958, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls { - position: absolute; - bottom: 0; - left: 0; - width: 100%; } - /* line 968, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles { - height: 100%; - width: 25%; - padding: lh(); - box-sizing: border-box; - transition: none; - background: var(--black); - visibility: visible; } - /* line 979, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li { - color: #aaa; } - /* line 982, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current { - color: var(--white); } - /* line 992, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object, - .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe, - .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video { - width: 100%; - height: 100%; } - /* line 1002, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 100%; - background-color: var(--black); } - /* line 1015, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 { - background-size: 15%; } - /* line 1019, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll { - padding: var(--baseline); - border: none; - border-radius: var(--baseline); - background: var(--black-t2); - box-shadow: none; } - /* line 1026, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after { - display: none; } - /* line 1032, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img { - height: calc((var(--baseline) * 4)); - width: calc((var(--baseline) * 4)); } - /* line 1037, /openedx/edx-platform/xmodule/assets/video/_display.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus { - background: var(--blue); } - /* line 88, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { - cursor: pointer; } - /* line 100, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { - z-index: 0; } - /* line 101, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { - z-index: 10; } - /* line 103, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { - z-index: 1000; } - /* line 104, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay { - z-index: 10000; } - /* line 105, lms/static/sass/base/_mixins.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu, - .xmodule_display.xmodule_VideoBlock .submenu { - z-index: 100000; } - /* line 11, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + clip: rect(1px, 1px, 1px, 1px); + } +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5) 0 0; + color: #e7ecee; + font-weight: bold; +} + +@media (max-width: 1120px) { + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5); + } +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu { + width: var(--baseline); + padding: calc((var(--baseline) / 2)) 0; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon { + transform: rotate(90deg); +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume { + display: inline-block; + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container { + display: block; + opacity: 1; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a { + border-left: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + transition: none; + display: none; + position: absolute; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 41px; + height: 120px; + background-color: #282c2e; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider { + height: 100px; + width: calc((var(--baseline) / 4)); + margin: 14px auto; + box-sizing: border-box; + border: 1px solid #4f595d; + background: #4f595d; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle { + transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s; + left: -5px; + box-sizing: border-box; + height: 13px; + width: 13px; + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus { + background: #db8baf; + border-color: #db8baf; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range { + background: #8e3e63; + border: 1px solid #8e3e63; + left: -1px; + bottom: -1px; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + font-weight: 700; + letter-spacing: -1px; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active { + color: #0ea6ec; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles { + display: none !important; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active { + color: #0ea6ec; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles { + transition: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider { + height: calc((var(--baseline) / 1.5)); +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle { + height: calc((var(--baseline) / 1.5)); + width: calc((var(--baseline) / 1.5)); +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions { + width: 65%; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions { + width: 90%; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles { + float: left; + overflow: auto; + max-height: 460px; + width: 31.81818%; + padding: 0; + font-size: 14px; + visibility: visible; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles a { + color: #0074b5; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu { + height: 100%; + margin: 0; + padding: 0 3px; + list-style: none; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li { + margin-bottom: 8px; + border: 0; + padding: 0; + color: #0074b5; + line-height: lh(); +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span { + display: block; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current { + color: #333; + font-weight: 700; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused { + outline: #000 dotted thin; + outline-offset: -1px; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus { + text-decoration: underline; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty { + margin-bottom: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end { + position: absolute; + bottom: 0; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper { + width: 100%; + background-color: inherit; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 { + bottom: 0; + left: 0; + right: 0; + position: absolute; + z-index: 1; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre, +.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post { + height: 0; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 { + color: black; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + background-color: rgba(243, 243, 243, 0.8); + height: 100%; + position: absolute; + right: 0; + bottom: 0; + top: 0; + width: 275px; + padding: 0 var(--baseline); + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen { + background: rgba(0, 0, 0, 0.95); + border: 0; + bottom: 0; + height: 100%; + left: 0; + margin: 0; + padding: 0; + position: fixed; + top: 0; + width: 100%; + vertical-align: middle; + border-radius: 0; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper { + width: 100%; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre, +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post { + height: 0; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper { + position: static; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 { + color: white; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper { + width: 100%; + height: 100%; + position: static; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper { + height: 100%; + width: 75%; + margin-right: 0; + vertical-align: middle; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object, +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe, +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video { + position: absolute; + width: auto; + height: auto; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles { + height: 100%; + width: 25%; + padding: lh(); + box-sizing: border-box; + transition: none; + background: var(--black); + visibility: visible; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li { + color: #aaa; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current { + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object, +.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe, +.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video { + width: 100%; + height: 100%; +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: 100%; + background-color: var(--black); +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 { + background-size: 15%; +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll { + padding: var(--baseline); + border: none; + border-radius: var(--baseline); + background: var(--black-t2); + box-shadow: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img { + height: calc((var(--baseline) * 4)); + width: calc((var(--baseline) * 4)); +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus { + background: var(--blue); +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + cursor: pointer; +} + +.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + z-index: 0; +} + +.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + z-index: 10; +} + +.xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + z-index: 1000; +} + +.xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay { + z-index: 10000; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu, +.xmodule_display.xmodule_VideoBlock .submenu { + z-index: 100000; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { font-family: FontAwesome; -webkit-font-smoothing: antialiased; display: inline-block; - speak: none; } - /* line 18, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container { - position: relative; } - /* line 22, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list { - display: block; } - /* line 27, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { - top: 100%; - margin: 0; - padding: 0; - display: none; - position: absolute; - list-style: none; - background-color: var(--white); - border: 1px solid #eee; } - /* line 39, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { - margin: 0; - padding: 0; - border-bottom: 1px solid #eee; - color: var(--white); } - /* line 47, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--gray-l2); - font-size: 14px; - line-height: 23px; } - /* line 56, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus { - color: var(--gray-d1); } - /* line 63, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a { - color: #009fe6; } - /* line 68, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child { - box-shadow: none; - border-bottom: 0; - margin-top: 0; } - /* line 81, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container { + speak: none; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container { + position: relative; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list { + display: block; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + top: 100%; + margin: 0; + padding: 0; + display: none; + position: absolute; + list-style: none; + background-color: var(--white); + border: 1px solid #eee; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + margin: 0; + padding: 0; + border-bottom: 1px solid #eee; + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--gray-l2); + font-size: 14px; + line-height: 23px; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus { + color: var(--gray-d1); +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a { + color: #009fe6; +} + +.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child { + box-shadow: none; + border-bottom: 0; + margin-top: 0; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container { display: inline-block; vertical-align: top; - border-left: 1px solid #eee; } - /* line 87, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a { - background-color: var(--action-primary-active-bg); - color: var(--very-light-text); } - /* line 91, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after { - color: var(--very-light-text); } - /* line 97, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a { - transition: all var(--tmg-f2) ease-in-out 0s; - font-size: 12px; - display: block; - border-radius: 0 3px 3px 0; - background-color: var(--very-light-text); - padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75)); - color: var(--gray-l2); - min-width: 1.5em; - line-height: 14px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; } - /* line 112, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { - content: "\f0d7"; - position: absolute; - right: calc((var(--baseline)*0.5)); - top: 33%; - color: var(--lighter-base-font-color); } - /* line 123, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list { - right: 0; } - /* line 126, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li { - font-size: 0.875em; } - /* line 129, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a { - border: 0; - display: block; - padding: 0.70788em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 143, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu, - .xmodule_display.xmodule_VideoBlock .submenu { + border-left: 1px solid #eee; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a { + background-color: var(--action-primary-active-bg); + color: var(--very-light-text); +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after { + color: var(--very-light-text); +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a { + transition: all var(--tmg-f2) ease-in-out 0s; + font-size: 12px; + display: block; + border-radius: 0 3px 3px 0; + background-color: var(--very-light-text); + padding: calc((var(--baseline) * 0.75)) calc((var(--baseline) * 1.25)) calc((var(--baseline) * 0.75)) calc((var(--baseline) * 0.75)); + color: var(--gray-l2); + min-width: 1.5em; + line-height: 14px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + content: "\f0d7"; + position: absolute; + right: calc((var(--baseline) * 0.5)); + top: 33%; + color: var(--lighter-base-font-color); +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list { + right: 0; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li { + font-size: 0.875em; +} + +.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a { + border: 0; + display: block; + padding: 0.70788em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu, +.xmodule_display.xmodule_VideoBlock .submenu { border: 1px solid #333; background: var(--white); color: #333; @@ -875,88 +1044,104 @@ display: none; outline: none; cursor: default; - white-space: nowrap; } - /* line 160, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu.is-opened, - .xmodule_display.xmodule_VideoBlock .submenu.is-opened { - display: block; } - /* line 164, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item, - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, - .xmodule_display.xmodule_VideoBlock .submenu .menu-item, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { - border-top: 1px solid var(--gray-l3); - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - outline: none; } - /* line 170, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span, - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span, - .xmodule_display.xmodule_VideoBlock .submenu .menu-item > span, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span { - color: #333; } - /* line 174, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child, - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child, - .xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child { - border-top: none; } - /* line 178, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus, - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus, - .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus { - background: #333; - color: var(--white); } - /* line 182, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span, - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span, - .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span { - color: var(--white); } - /* line 188, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { - position: relative; - padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); } - /* line 192, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after { - content: '\25B6'; - position: absolute; - right: 5px; - line-height: 25px; - font-size: 10px; } - /* line 200, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu { - display: none; } - /* line 204, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened { - background: #333; - color: var(--white); } - /* line 208, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span { - color: var(--white); } - /* line 212, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu { - display: block; } - /* line 217, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected, - .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected { - font-weight: bold; } - /* line 222, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled, - .xmodule_display.xmodule_VideoBlock .submenu .is-disabled { - pointer-events: none; - color: var(--gray-l3); } - /* line 228, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ - .xmodule_display.xmodule_VideoBlock .overlay { + white-space: nowrap; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu.is-opened, +.xmodule_display.xmodule_VideoBlock .submenu.is-opened { + display: block; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item, +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, +.xmodule_display.xmodule_VideoBlock .submenu .menu-item, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + border-top: 1px solid var(--gray-l3); + padding: calc((var(--baseline) / 4)) calc((var(--baseline) / 2)); + outline: none; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span, +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span, +.xmodule_display.xmodule_VideoBlock .submenu .menu-item > span, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span { + color: #333; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child, +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child, +.xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child { + border-top: none; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus, +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus, +.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus { + background: #333; + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span, +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span, +.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span { + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + position: relative; + padding: calc((var(--baseline) / 4)) var(--baseline) calc((var(--baseline) / 4)) calc((var(--baseline) / 2)); +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after { + content: '\25B6'; + position: absolute; + right: 5px; + line-height: 25px; + font-size: 10px; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu { + display: none; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened { + background: #333; + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span { + color: var(--white); +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu { + display: block; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected, +.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected { + font-weight: bold; +} + +.xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled, +.xmodule_display.xmodule_VideoBlock .submenu .is-disabled { + pointer-events: none; + color: var(--gray-l3); +} + +.xmodule_display.xmodule_VideoBlock .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background-color: transparent; } + background-color: transparent; +} diff --git a/xmodule/assets/VideoBlockEditor.css b/xmodule/assets/VideoBlockEditor.css index 3577fdb22d32..4a570a5fec89 100644 --- a/xmodule/assets/VideoBlockEditor.css +++ b/xmodule/assets/VideoBlockEditor.css @@ -1,139 +1,167 @@ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); -/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */ -.xmodule_edit.xmodule_VideoBlock { } - /* line 123, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-col-wide { + +.xmodule_edit.xmodule_VideoBlock { +} + +.xmodule_edit.xmodule_VideoBlock .ui-col-wide { width: 74.46809%; margin-right: 2.12766%; - float: left; } - /* line 130, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-col-narrow { + float: left; +} + +.xmodule_edit.xmodule_VideoBlock .ui-col-narrow { width: 23.40426%; - float: left; } - /* line 342, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-loading { + float: left; +} + +.xmodule_edit.xmodule_VideoBlock .ui-loading { box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); - padding: 15px 20px; } - /* line 368, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-loading { + padding: 15px 20px; +} + +.xmodule_edit.xmodule_VideoBlock .ui-loading { animation: fadeIn 0.25s linear 1; opacity: 0.6; background-color: #fff; padding: 30px 20px; - text-align: center; } - /* line 379, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-loading .spin { - display: inline-block; } - /* line 385, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .ui-loading .copy { - padding-left: 5px; } - /* line 390, common/static/sass/_mixins.scss */ - .xmodule_edit.xmodule_VideoBlock .is-hidden { - display: none; } - /* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .tabs-wrapper { + text-align: center; +} + +.xmodule_edit.xmodule_VideoBlock .ui-loading .spin { + display: inline-block; +} + +.xmodule_edit.xmodule_VideoBlock .ui-loading .copy { + padding-left: 5px; +} + +.xmodule_edit.xmodule_VideoBlock .is-hidden { + display: none; +} + +.xmodule_edit.xmodule_VideoBlock .tabs-wrapper { padding-top: 0; - position: relative; } - /* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings { - display: block; } - /* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-single-tab-name { - display: none; } - /* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs { - position: relative; } - /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after { - content: ""; - display: table; - clear: both; } - /* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header { - box-sizing: border-box; - padding: 18px var(--baseline); - top: 0 !important; - right: 0; - background-color: var(--blue); - border-bottom: 1px solid var(--blue-d2); - color: var(--white); } - /* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name { - position: relative; - top: 0; - left: 0; - width: 50%; - color: var(--white); - font-weight: 600; } - /* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em { - display: inline-block; - margin-right: calc((var(--baseline)/4)); - font-weight: 400; - color: var(--white); } - /* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs { - list-style: none; - right: 0; - top: calc((var(--baseline)/4)); - position: absolute; - padding: 12px calc((var(--baseline)*0.75)); } - /* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap { - display: inline-block; - margin-left: 8px; } - /* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab { - font-size: 14px; - font-size: 1.4rem; - background-color: rgba(255, 255, 255, 0.3); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - border: 1px solid var(--blue-d1); - border-radius: 3px; - padding: calc((var(--baseline)/4)) var(--baseline); - background-color: var(--blue); - font-weight: bold; - color: var(--white); } - /* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current { - background-color: var(--blue); - background-image: -webkit-linear-gradient(var(--blue), var(--blue)); - background-image: linear-gradient(to ,var(--blue)); - color: var(--blue-d1); - box-shadow: inset 0 1px 2px 1px var(--shadow-l1); - background-color: var(--blue-d4); - cursor: default; } - /* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus { - box-shadow: inset 0 1px 2px 1px var(--shadow); - background-image: linear-gradient(#009fe6, #009fe6) !important; } - /* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive { - display: none; } - /* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry { - text-align: center; } - /* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload { - display: none; } - /* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li { - display: block; - margin: calc(var(--baseline)/2) 0; } - /* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button { - font-size: 1em; - display: block; - width: 70%; - margin: 0 auto; - text-align: center; } - /* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .component-tab { + position: relative; +} + +.xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings { + display: block; +} + +.xmodule_edit.xmodule_VideoBlock .editor-single-tab-name { + display: none; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs { + position: relative; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header { + box-sizing: border-box; + padding: 18px var(--baseline); + top: 0 !important; + right: 0; + background-color: var(--blue); + border-bottom: 1px solid var(--blue-d2); + color: var(--white); +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name { + position: relative; + top: 0; + left: 0; + width: 50%; + color: var(--white); + font-weight: 600; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em { + display: inline-block; + margin-right: calc((var(--baseline) / 4)); + font-weight: 400; + color: var(--white); +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs { + list-style: none; + right: 0; + top: calc((var(--baseline) / 4)); + position: absolute; + padding: 12px calc((var(--baseline) * 0.75)); +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap { + display: inline-block; + margin-left: 8px; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab { + font-size: 14px; + font-size: 1.4rem; + background-color: rgba(255, 255, 255, 0.3); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + border: 1px solid var(--blue-d1); + border-radius: 3px; + padding: calc((var(--baseline) / 4)) var(--baseline); + background-color: var(--blue); + font-weight: bold; + color: var(--white); +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current { + background-color: var(--blue); + background-image: -webkit-linear-gradient(var(--blue), var(--blue)); + background-image: linear-gradient(to, var(--blue)); + color: var(--blue-d1); + box-shadow: inset 0 1px 2px 1px var(--shadow-l1); + background-color: var(--blue-d4); + cursor: default; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus { + box-shadow: inset 0 1px 2px 1px var(--shadow); + background-image: linear-gradient(#009fe6, #009fe6) !important; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive { + display: none; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry { + text-align: center; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload { + display: none; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li { + display: block; + margin: calc(var(--baseline) / 2) 0; +} + +.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button { + font-size: 1em; + display: block; + width: 70%; + margin: 0 auto; + text-align: center; +} + +.xmodule_edit.xmodule_VideoBlock .component-tab { background: var(--white); position: relative; - border-top: 1px solid #8891a1; } - /* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ - .xmodule_edit.xmodule_VideoBlock .component-tab#advanced { - padding: 0; - border: none; } + border-top: 1px solid #8891a1; +} + +.xmodule_edit.xmodule_VideoBlock .component-tab#advanced { + padding: 0; + border: none; +} From c993f0e7a0204069f1306cfce4e1a6c557574ee3 Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Fri, 20 Sep 2024 17:54:24 +0500 Subject: [PATCH 3/6] chore: Delete converted scss files --- xmodule/assets/VideoBlockDisplay.scss | 4 ---- xmodule/assets/VideoBlockEditor.scss | 3 --- 2 files changed, 7 deletions(-) delete mode 100644 xmodule/assets/VideoBlockDisplay.scss delete mode 100644 xmodule/assets/VideoBlockEditor.scss diff --git a/xmodule/assets/VideoBlockDisplay.scss b/xmodule/assets/VideoBlockDisplay.scss deleted file mode 100644 index ccd9a3ed1326..000000000000 --- a/xmodule/assets/VideoBlockDisplay.scss +++ /dev/null @@ -1,4 +0,0 @@ -.xmodule_display.xmodule_VideoBlock { - @import "video/display.scss"; - @import "video/accessible_menu.scss"; -} diff --git a/xmodule/assets/VideoBlockEditor.scss b/xmodule/assets/VideoBlockEditor.scss deleted file mode 100644 index eb966091ce46..000000000000 --- a/xmodule/assets/VideoBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_VideoBlock { - @import "tabs/tabs.scss"; -} From a5097630092aaed9cf46389e63a8ba9c5d1c38e7 Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Sat, 21 Sep 2024 16:14:49 +0500 Subject: [PATCH 4/6] fix: fixes --- xmodule/tests/test_util_builtin_assets.py | 11 ++++++++--- xmodule/util/builtin_assets.py | 3 ++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/xmodule/tests/test_util_builtin_assets.py b/xmodule/tests/test_util_builtin_assets.py index acfd3806d09b..1e5ccef4e050 100644 --- a/xmodule/tests/test_util_builtin_assets.py +++ b/xmodule/tests/test_util_builtin_assets.py @@ -1,6 +1,8 @@ """ Tests for methods defined in builtin_assets.py """ +from pathlib import PosixPath + from django.conf import settings from unittest import TestCase from unittest.mock import patch @@ -110,9 +112,12 @@ def test_misspelled_path_raises_not_found(self): def test_happy_path(self): fragment = Fragment() builtin_assets.add_css_to_fragment(fragment, "VideoBlockEditor.css") - assert fragment.resources[0] == FragmentResource( - kind='url', - data=f'{settings.REPO_ROOT}/xmodule/assets/VideoBlockEditor.css', + fr = FragmentResource( + # kind='url', + # data=f'{settings.REPO_ROOT}/xmodule/assets/VideoBlockEditor.css', + kind='text', + data=PosixPath(f"{settings.REPO_ROOT}/xmodule/assets/VideoBlockEditor.css").read_text(encoding="utf-8"), mimetype='text/css', placement='head', ) + assert fragment.resources[0] == fr diff --git a/xmodule/util/builtin_assets.py b/xmodule/util/builtin_assets.py index 5864e8a3c30f..218609fa709f 100644 --- a/xmodule/util/builtin_assets.py +++ b/xmodule/util/builtin_assets.py @@ -29,7 +29,8 @@ def add_css_to_fragment(fragment, css_relative_path): css_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / css_relative_path if not css_absolute_path.is_file(): raise FileNotFoundError(f"css file not found: {css_absolute_path}") - fragment.add_css_url(str(css_absolute_path)) + # fragment.add_css_url(str(css_absolute_path)) + fragment.add_css(css_absolute_path.read_text(encoding='utf-8')) def add_sass_to_fragment(fragment, sass_relative_path): From 74218aae2d08bb2b91b05a3632790a52537ac3f6 Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Mon, 23 Sep 2024 12:47:53 +0500 Subject: [PATCH 5/6] feat!: Dropping Sass support from builtin annotatable block --- xmodule/annotatable_block.py | 6 +- xmodule/assets/AnnotatableBlockDisplay.css | 151 ++++++++++++++++++++ xmodule/assets/AnnotatableBlockDisplay.scss | 3 - xmodule/assets/AnnotatableBlockEditor.css | 4 + xmodule/assets/AnnotatableBlockEditor.scss | 3 - 5 files changed, 158 insertions(+), 9 deletions(-) create mode 100644 xmodule/assets/AnnotatableBlockDisplay.css delete mode 100644 xmodule/assets/AnnotatableBlockDisplay.scss create mode 100644 xmodule/assets/AnnotatableBlockEditor.css delete mode 100644 xmodule/assets/AnnotatableBlockEditor.scss diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py index e41e2b17a52f..cec677f6c5d5 100644 --- a/xmodule/annotatable_block.py +++ b/xmodule/annotatable_block.py @@ -11,7 +11,7 @@ from openedx.core.djangolib.markup import HTML, Text from xmodule.editing_block import EditingMixin from xmodule.raw_block import RawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.xml_block import XmlMixin from xmodule.x_module import ( ResourceTemplates, @@ -180,7 +180,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen """ fragment = Fragment() fragment.add_content(self.get_html()) - add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay') shim_xmodule_js(fragment, 'Annotatable') @@ -193,7 +193,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor') shim_xmodule_js(fragment, self.studio_js_module_name) return fragment diff --git a/xmodule/assets/AnnotatableBlockDisplay.css b/xmodule/assets/AnnotatableBlockDisplay.css new file mode 100644 index 000000000000..3a251123f2e8 --- /dev/null +++ b/xmodule/assets/AnnotatableBlockDisplay.css @@ -0,0 +1,151 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +.xmodule_display.xmodule_AnnotatableBlock { + /* TODO: move top-level variables to a common _variables.scss. + * NOTE: These variables were only added here because when this was integrated with the CMS, + * SASS compilation errors were triggered because the CMS didn't have the same variables defined + * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. + * -Abarrett and Vshnayder + */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper { + position: relative; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-header { + margin-bottom: 0.5em; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section { + position: relative; + padding: 0.5em 1em; + border: 1px solid var(--gray-l3); + border-radius: 0.5em; + margin-bottom: 0.5em; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded { + background-color: #ededed; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title { + font-weight: bold; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a { + font-weight: normal; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body { + border-top: 1px solid var(--gray-l3); + margin-top: 0.5em; + padding-top: 0.5em; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after { + content: ""; + display: table; + clear: both; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template { + list-style: disc; + margin-left: 4em; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b { + font-weight: bold; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i { + font-style: italic; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code { + display: inline; + white-space: pre; + font-family: Courier New, monospace; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle { + position: absolute; + right: 0; + margin: 2px 1em 2px 0; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after { + content: " \2191"; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after { + content: " \2193"; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span { + display: inline; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight { + background-color: rgba(255, 255, 10, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected { + background-color: rgba(255, 255, 10, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow { + background-color: rgba(255, 255, 10, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected { + background-color: rgba(255, 255, 10, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red { + background-color: rgba(178, 19, 16, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected { + background-color: rgba(178, 19, 16, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange { + background-color: rgba(255, 165, 0, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected { + background-color: rgba(255, 165, 0, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green { + background-color: rgba(25, 255, 132, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected { + background-color: rgba(25, 255, 132, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue { + background-color: rgba(35, 163, 255, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected { + background-color: rgba(35, 163, 255, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple { + background-color: rgba(115, 9, 178, 0.3); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected { + background-color: rgba(115, 9, 178, 0.9); } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide { + cursor: none; + background-color: inherit; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon { + display: none; } + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment { + display: none; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip { + font-size: 0.875em; + border: 1px solid #333; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.85); + color: var(--white); + -webkit-font-smoothing: antialiased; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar { + font-size: 1em; + color: inherit; + background-color: transparent; + padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); + border: none; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title { + padding: calc((var(--baseline)/4)) 0; + border-bottom: 2px solid #333; + font-weight: bold; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon { + right: 10px; + background: #333; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover { + color: inherit; + border: 1px solid var(--gray-l3); } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content { + color: inherit; + font-size: 0.875em; + text-align: left; + font-weight: 400; + padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)); + background-color: transparent; + border-color: transparent; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p { + color: inherit; + line-height: normal; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable { + max-width: 375px; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content { + padding: 0 calc((var(--baseline)/2)); } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment { + display: block; + margin: 0 0 calc((var(--baseline)/2)) 0; + max-height: 225px; + overflow: auto; + line-height: normal; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply { + display: block; + border-top: 2px solid #333; + padding: calc((var(--baseline)/4)) 0; + margin: 0; + text-align: center; } + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after { + content: ''; + display: inline-block; + position: absolute; + bottom: -20px; + left: 50%; + height: 0; + width: 0; + margin-left: calc(-1 * (var(--baseline) / 4)); + border: 10px solid transparent; + border-top-color: rgba(0, 0, 0, 0.85); } diff --git a/xmodule/assets/AnnotatableBlockDisplay.scss b/xmodule/assets/AnnotatableBlockDisplay.scss deleted file mode 100644 index 66e1e756f3da..000000000000 --- a/xmodule/assets/AnnotatableBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_AnnotatableBlock { - @import "annotatable/display.scss"; -} diff --git a/xmodule/assets/AnnotatableBlockEditor.css b/xmodule/assets/AnnotatableBlockEditor.css new file mode 100644 index 000000000000..fd56a921bc05 --- /dev/null +++ b/xmodule/assets/AnnotatableBlockEditor.css @@ -0,0 +1,4 @@ +.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror { + background: #fff; + font-size: 13px; + color: #3c3c3c; } diff --git a/xmodule/assets/AnnotatableBlockEditor.scss b/xmodule/assets/AnnotatableBlockEditor.scss deleted file mode 100644 index 8f2852422d7d..000000000000 --- a/xmodule/assets/AnnotatableBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_AnnotatableBlock { - @import "codemirror/codemirror.scss"; -} From ff2262d716497bcba1becce314fbbd3da7ab10b1 Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Mon, 23 Sep 2024 13:47:53 +0500 Subject: [PATCH 6/6] chore: chore --- xmodule/assets/annotatable/_display.scss | 197 ----------------------- 1 file changed, 197 deletions(-) delete mode 100644 xmodule/assets/annotatable/_display.scss diff --git a/xmodule/assets/annotatable/_display.scss b/xmodule/assets/annotatable/_display.scss deleted file mode 100644 index 9aaa8649c6c5..000000000000 --- a/xmodule/assets/annotatable/_display.scss +++ /dev/null @@ -1,197 +0,0 @@ -/* TODO: move top-level variables to a common _variables.scss. - * NOTE: These variables were only added here because when this was integrated with the CMS, - * SASS compilation errors were triggered because the CMS didn't have the same variables defined - * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. - * -Abarrett and Vshnayder - */ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -$annotatable--border-color: var(--gray-l3); -$annotatable--body-font-size: em(14); - -.annotatable-wrapper { - position: relative; -} - -.annotatable-header { - margin-bottom: 0.5em; -} - -.annotatable-section { - position: relative; - padding: 0.5em 1em; - border: 1px solid $annotatable--border-color; - border-radius: 0.5em; - margin-bottom: 0.5em; - - &.shaded { background-color: #ededed; } - - .annotatable-section-title { - font-weight: bold; - a { font-weight: normal; } - } - - .annotatable-section-body { - border-top: 1px solid $annotatable--border-color; - margin-top: 0.5em; - padding-top: 0.5em; - - @include clearfix(); - } - - ul.instructions-template { - list-style: disc; - margin-left: 4em; - b { font-weight: bold; } - i { font-style: italic; } - - code { - display: inline; - white-space: pre; - font-family: Courier New, monospace; - } - } -} - -.annotatable-toggle { - position: absolute; - right: 0; - margin: 2px 1em 2px 0; - &.expanded::after { content: " \2191"; } - &.collapsed::after { content: " \2193"; } -} - -.annotatable-span { - @extend %ui-fake-link; - - display: inline; - - $highlight_index: 0; - - @each $highlight in ( - (yellow rgba(255, 255,10, 0.3) rgba(255, 255,10, 0.9)), - (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)), - (orange rgba(255,165,0, 0.3) rgba(255,165,0, 0.9)), - (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)), - (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)), - (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) { - - $highlight_index: $highlight_index + 1; - $marker: nth($highlight, 1); - $color: nth($highlight, 2); - $selected_color: nth($highlight, 3); - - @if $highlight_index == 1 { - &.highlight { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.highlight-#{$marker} { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.hide { - cursor: none; - background-color: inherit; - - .annotatable-icon { - display: none; - } - } - - .annotatable-comment { - display: none; - } -} - -.ui-tooltip.qtip.ui-tooltip { - font-size: $annotatable--body-font-size; - border: 1px solid #333; - border-radius: 1em; - background-color: rgba(0, 0, 0, 0.85); - color: var(--white); - -webkit-font-smoothing: antialiased; - - .ui-tooltip-titlebar { - font-size: em(16); - color: inherit; - background-color: transparent; - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - border: none; - - .ui-tooltip-title { - padding: calc((var(--baseline)/4)) 0; - border-bottom: 2px solid #333; - font-weight: bold; - } - - .ui-tooltip-icon { - right: 10px; - background: #333; - } - - .ui-state-hover { - color: inherit; - border: 1px solid var(--gray-l3); - } - } - - .ui-tooltip-content { - color: inherit; - font-size: em(14); - text-align: left; - font-weight: 400; - padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)); - background-color: transparent; - border-color: transparent; - } - - p { - color: inherit; - line-height: normal; - } -} - -.ui-tooltip.qtip.ui-tooltip-annotatable { - max-width: 375px; - - .ui-tooltip-content { - padding: 0 calc((var(--baseline)/2)); - - .annotatable-comment { - display: block; - margin: 0 0 calc((var(--baseline)/2)) 0; - max-height: 225px; - overflow: auto; - line-height: normal; - } - - .annotatable-reply { - display: block; - border-top: 2px solid #333; - padding: calc((var(--baseline)/4)) 0; - margin: 0; - text-align: center; - } - } - - &::after { - content: ''; - display: inline-block; - position: absolute; - bottom: -20px; - left: 50%; - height: 0; - width: 0; - margin-left: calc(-1 * (var(--baseline) / 4)); - border: 10px solid transparent; - border-top-color: rgba(0, 0, 0, 0.85); - } -}