From a5919c0af56ca655bb9ddaf96ea298b375b9af21 Mon Sep 17 00:00:00 2001 From: farhan Date: Tue, 1 Oct 2024 16:58:21 +0500 Subject: [PATCH] chore: remove video block scss files --- xmodule/assets/VideoBlockDisplay.scss | 4 - xmodule/assets/VideoBlockEditor.scss | 3 - xmodule/assets/tabs/_tabs.scss | 141 --- xmodule/assets/video/_accessible_menu.scss | 237 ----- xmodule/assets/video/_display.scss | 1043 -------------------- 5 files changed, 1428 deletions(-) delete mode 100644 xmodule/assets/VideoBlockDisplay.scss delete mode 100644 xmodule/assets/VideoBlockEditor.scss delete mode 100644 xmodule/assets/tabs/_tabs.scss delete mode 100644 xmodule/assets/video/_accessible_menu.scss delete mode 100644 xmodule/assets/video/_display.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"; -} diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss deleted file mode 100644 index 4b8c2a387a91..000000000000 --- a/xmodule/assets/tabs/_tabs.scss +++ /dev/null @@ -1,141 +0,0 @@ -// styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings) -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; - - -.tabs-wrapper { - padding-top: 0; - position: relative; - - .wrapper-comp-settings { - // set visibility to metadata editor - display: block; - } -} - -.editor-single-tab-name { - display: none; -} - - -.editor-with-tabs { - @include clearfix(); - - position: relative; - - - .edit-header { - box-sizing: border-box; - - padding: 18px var(--baseline); - top: 0 !important; // ugly override for second level tab override - right: 0; - background-color: var(--blue); - border-bottom: 1px solid var(--blue-d2); - color: var(--white); - - //Component Name - .component-name { - position: relative; - top: 0; - left: 0; - width: 50%; - color: var(--white); - font-weight: 600; - - - - em { - display: inline-block; - margin-right: calc((var(--baseline)/4)); - font-weight: 400; - color: var(--white); - } - } - - //Nav-Edit Modes - .editor-tabs { - list-style: none; - right: 0; - top: calc((var(--baseline)/4)); - position: absolute; - padding: 12px calc((var(--baseline)*0.75)); - - .inner_tab_wrap { - display: inline-block; - margin-left: 8px; - - a.tab { - @include font-size(14); - @include linear-gradient(top, 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); - - &.current { - @include linear-gradient(var(--blue), var(--blue)); - - 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 var(--shadow); - background-image: linear-gradient(#009fe6, #009fe6) !important; - } - } - } - } - } - - .is-inactive { - display: none; - } - - .comp-subtitles-entry { - text-align: center; - - .file-upload { - display: none; - } - - .comp-subtitles-import-list { - > li { - display: block; - margin: calc(var(--baseline)/2) 0; - } - - .blue-button { - font-size: 1em; - display: block; - width: 70%; - margin: 0 auto; - text-align: center; - } - } - } -} - -.component-tab { - background: var(--white); - position: relative; - border-top: 1px solid #8891a1; - - &#advanced { - padding: 0; - border: none; - } -} - - diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss deleted file mode 100644 index d411925f2390..000000000000 --- a/xmodule/assets/video/_accessible_menu.scss +++ /dev/null @@ -1,237 +0,0 @@ -@import 'base/mixins'; -@import 'lms/theme/variables-v1'; - -$a11y--gray: rgb(127, 127, 127); -$a11y--blue: rgb(0, 159, 230); -$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; - -webkit-font-smoothing: antialiased; - display: inline-block; - speak: none; -} - -.a11y-menu-container { - position: relative; - - &.open { - .a11y-menu-list { - display: block; - } - } - - .a11y-menu-list { - @extend %ui-depth3; - - top: 100%; - margin: 0; - padding: 0; - display: none; - position: absolute; - list-style: none; - background-color: var(--white); - border: 1px solid #eee; - - li { - @extend %ui-fake-link; - - margin: 0; - padding: 0; - border-bottom: 1px solid #eee; - color: var(--white); - - a { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: $a11y--gray-l2; - font-size: 14px; - line-height: 23px; - - &:hover, - &:focus { - color: $a11y--gray-d1; - } - } - - &.active { - a { - color: $a11y--blue; - } - } - - &:last-child { - box-shadow: none; - border-bottom: 0; - margin-top: 0; - } - } - } -} - - -// Video track button specific styles - -.video-tracks { - .a11y-menu-container { - display: inline-block; - vertical-align: top; - border-left: 1px solid #eee; - - &.open { - > a { - background-color: var(--action-primary-active-bg); - color: var(--very-light-text); - - &::after { - color: var(--very-light-text); - } - } - } - - > a { - @include transition(all var(--tmg-f2) ease-in-out 0s); - @include font-size(12); - - 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: $a11y--gray-l2; - min-width: 1.5em; - line-height: 14px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - - &::after { - @extend %use-font-awesome; - - content: "\f0d7"; - position: absolute; - right: calc((var(--baseline)*0.5)); - top: 33%; - color: var(--lighter-base-font-color); - } - } - - .a11y-menu-list { - right: 0; - - li { - font-size: em(14); - - a { - border: 0; - display: block; - padding: lh(0.5); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } -} - - -.contextmenu, -.submenu { - @extend %ui-depth5; - - 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; - - &.is-opened { - display: block; - } - - .menu-item, - .submenu-item { - border-top: 1px solid var(--gray-l3); - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - outline: none; - - & > span { - color: #333; - } - - &:first-child { - border-top: none; - } - - &:focus { - background: #333; - color: var(--white); - - & > span { - color: var(--white); - } - } - } - - .submenu-item { - position: relative; - padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); - - &::after { - content: '\25B6'; - position: absolute; - right: 5px; - line-height: 25px; - font-size: 10px; - } - - .submenu { - display: none; - } - - &.is-opened { - background: #333; - color: var(--white); - - & > span { - color: var(--white); - } - - & > .submenu { - display: block; - } - } - - .is-selected { - font-weight: bold; - } - } - - .is-disabled { - pointer-events: none; - color: var(--gray-l3); - } -} - -.overlay { - @extend %ui-depth4; - - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: transparent; -} diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss deleted file mode 100644 index 928f4a915443..000000000000 --- a/xmodule/assets/video/_display.scss +++ /dev/null @@ -1,1043 +0,0 @@ -// This is for A Font Garde -// It loads the icon font only when it's available. -// --- -// It is scoped to the video player for now, but we -// will eventually want to move this to the main font -// sheet, globally, so it applies to all use cases. - -// -------- -// Defaults: what displays if the icon font doesn't load. -// -------- -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import 'lms/theme/variables-v1'; - -// the html target is necessary for xblocks and xmodules, but works across the board - -$secondary-dark: rgb(142, 62, 99); // UXPL secondary dark -$secondary-base: rgb(203, 89, 141); // UXPL secondary base -$secondary-light: rgb(219, 139, 175); // UXPL secondary light -$cool-dark: rgb(79, 89, 93); // UXPL cool dark - -& { - margin-bottom: calc((var(--baseline)*1.5)); -} - -.is-hidden { - display: none; -} - -.video { - @include clearfix(); - - background: rgb(245, 245, 245); // UXPL grayscale x-back - display: block; - margin: 0 -12px; - padding: 12px; - border-radius: 5px; - outline: none; - - &:focus, - &:active, - &:hover { - border: 0; - } - - &.is-initialized { - .video-wrapper { - .spinner { - display: none; - } - } - } - - // CASE: video pre-roll state - &.is-pre-roll { - .slider { - visibility: hidden; - } - - .video-player { - position: relative; - - &::before { - display: block; - content: ""; - width: 100%; - padding-top: 55%; - } - } - } - - .tc-wrapper { - @include clearfix(); - - position: relative; - } - - .focus_grabber { - position: relative; - display: inline; - width: 0; - height: 0; - } - - .downloads-heading { - margin: 1em 0 0; - } - - .wrapper-video-bottom-section { - display: flex; - justify-content: space-between; - - .wrapper-download-video, - .wrapper-download-transcripts, - .wrapper-handouts, - .branding, - .wrapper-transcript-feedback { - flex: 1; - margin-top: var(--baseline); - - @include padding-right(var(--baseline)); - - vertical-align: top; - } - } - - .wrapper-downloads { - @include media-breakpoint-up(md) { - display: flex; - } - - .hd { - margin: 0; - } - - .wrapper-download-video { - .video-sources { - margin: 0; - } - } - - .wrapper-download-transcripts { - .list-download-transcripts { - margin: 0; - padding: 0; - list-style: none; - - .transcript-option { - margin: 0; - - a.btn , a.btn-link{ - font-size: 16px !important; - font-weight: unset; - } - } - } - } - - .branding { - @include padding-right(0); - - .host-tag { - position: absolute; - left: -9999em; - display: inline-block; - vertical-align: middle; - color: var(--body-color); - } - - .brand-logo { - display: inline-block; - max-width: 100%; - max-height: calc((var(--baseline)*2)); - padding: calc((var(--baseline)/4)) 0; - vertical-align: middle; - } - } - - } - - .wrapper-transcript-feedback { - display: none; - - .transcript-feedback-buttons { - display: flex; - } - .transcript-feedback-btn-wrapper { - margin-right: 10px; - } - .thumbs-up-btn, - .thumbs-down-btn { - border: none; - box-shadow: none; - background: transparent; - } - } - - .google-disclaimer { - display: none; - margin-top: var(--baseline); - @include padding-right(var(--baseline)); - vertical-align: top; - } - - .video-wrapper { - @include float(left); - @include margin-right(flex-gutter(9)); - - width: flex-grid(6, 9); - background-color: black; - position: relative; - - &:hover { - .btn-play { - color: theme-color("primary"); - } - - .btn-play::after { - background: theme-color("inverse"); - } - } - - .video-player-pre, - .video-player-post { - height: 50px; - background-color: rgb(17, 16, 16) // UXPL grayscale black; - } - - .spinner { - @include 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%; - - &::after { - @include 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; - } - } - - .btn-play { - @include transform(translate(-50%, -50%)); - - position: absolute; - z-index: 1; - top: 46%; - left: 50%; - font-size: 4em; - cursor: pointer; - opacity: 0.1; - - &::after { - background: var(--white); - position: absolute; - width: 50%; - height: 50%; - content: ''; - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - z-index: -1; - } - } - - .closed-captions { - @include left(5%); - - position: absolute; - width: 90%; - box-sizing: border-box; - top: 70%; - text-align: center; - } - - .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); - - &::before { - position: absolute; - display: inline-block; - top: 50%; - - @include left(var(--baseline)); - - margin-top: -0.6em; - font-family: 'FontAwesome'; - content: "\f142"; - color: var(--white); - opacity: 0.5; - } - - &:hover, - &.is-dragging { - background: rgba(0, 0, 0, 1); - cursor: move; - - &::before { - opacity: 1; - } - } - } - - .video-player { - overflow: hidden; - min-height: 158px; - - > div { - height: 100%; - - &.hidden { - display: none; - } - } - - .video-error, - .video-hls-error { - padding: calc((var(--baseline) / 5)); - background: black; - color: white !important; // the pattern library headings shim is more scoped - } - - object, - iframe, - video { - @include left(0); - - display: block; - border: none; - width: 100%; - } - - h4 { - text-align: center; - color: white; - - &.hidden { - display: none; - } - } - } - - .video-controls { - @include clearfix(); - - position: relative; - border: 0; - background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - color: rgb(240, 243, 245); // UXPL grayscale-cool xx-light - - &:hover, - &:focus { - ul, - div { - opacity: 1; - } - } - - %video-control { - @extend %t-strong; - @extend %t-title7; - - display: inline-block; - vertical-align: middle; - margin: 0; - border: 0; - border-radius: 0; - 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; - color: rgb(207, 216, 220); // UXPL grayscale-cool light - - &:hover, - &:focus { - background: darken(rgb(40, 44, 46), 7%); // UXPL secondary - } - - &:active, - &.is-active, - &.active { - color: rgb(14, 166, 236); // UXPL primary accent - } - } - - .control { - @extend %video-control; - - .icon { - width: 1em; - - &.icon-hd { - // except when it's text, like with HD - // otherwise it's shifted to the right because "HD" is wider than 1em - width: auto; - } - } - } - - .slider { - @include clearfix(); - @include transform-origin(bottom left); - @include 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 $cool-dark; - border-radius: 0; - background: $cool-dark; - - .ui-widget-header { - background: $secondary-dark; - border: 1px solid $secondary-dark; - box-shadow: none; - top: -1px; - left: -1px; - } - - .ui-corner-all.slider-range { - opacity: 0.3; - background-color: #1e91d3; - } - - .ui-slider-handle { - @extend %ui-fake-link; - - @include transform-origin(bottom left); - @include 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)); // center-center causes the control to be beyond the end of the sider - border: 1px solid $secondary-base; - border-radius: calc((var(--baseline) / 5)); - padding: 0; - background: $secondary-base; - box-shadow: none; - - &:focus, - &:hover { - background-color: $secondary-light; - border-color: $secondary-light; - } - } - } - - .vcr { - @include float(left); - - list-style: none; - - @include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark - - padding: 0; - - @media (max-width: 1120px) { - @include margin-right(lh(0.5)); - - font-size: em(14); - } - - .video_control { - &:focus { - position: relative; - } - - &.skip { - white-space: nowrap; - } - } - - .vidtime { - @extend %t-strong; - @extend %t-title7; - - @include padding-left(lh(0.75)); - - display: inline-block; - color: rgb(207, 216, 220); // UXPL grayscale-cool light - -webkit-font-smoothing: antialiased; - - @media (max-width: 1120px) { - @include padding-left(lh(0.5)); - } - } - } - - .secondary-controls { - @include float(right); - @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark - - .volume, - .add-fullscreen, - .grouped-controls, - .auto-advance, - .quality-control { - @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark - } - - .speed-button, - .volume > .control, - .add-fullscreen, - .auto-advance, - .quality-control, - .toggle-transcript { - &:focus { - position: relative; - } - } - - .menu-container { - position: relative; - - .menu { - @include transition(none); - - @extend %ui-depth1; - - position: absolute; - display: none; - bottom: calc((var(--baseline) * 2)); - - @include right(0); // right-align menus since this whole collection is on the right - - width: 120px; - margin: 0; - border: none; - padding: 0; - box-shadow: none; - background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - list-style: none; - - li { - @extend %ui-fake-link; - - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - - .speed-option, - .control-lang { - @include text-align(left); - - display: block; - width: 100%; - border: 0; - border-radius: 0; - padding: lh(0.5); - background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - box-shadow: none; - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - overflow: hidden; - text-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover, - &:focus { - background-color: rgb(79, 89, 93); // UXPL grayscale-cool dark - color: rgb(252, 252, 252); // UXPL grayscale white - } - } - - &.is-active { - .speed-option, - .control-lang { - @include border-left(calc(var(--baseline) / 10) solid rgb(14, 166, 236)); - - font-weight: var(--font-bold); - color: rgb(14, 166, 236); // UXPL primary accent - } - } - } - } - - &.is-opened { - .menu { - display: block; - } - } - } - - .speeds, - .lang, - .grouped-controls { - display: inline-block; - } - - .speeds { - &.is-opened { - .control { - .icon { - @include ltr { - @include transform(rotate(-90deg)); - } - - @include rtl { - @include transform(rotate(90deg)); - } - } - } - } - - .speed-button { - .label { - @include padding(0 calc((var(--baseline)/3)) 0 0); - - font-family: var(--font-family-sans-serif); - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - - @media (max-width: 1120px) { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - } - } - - .value { - @include padding(0, lh(0.5), 0, 0); - - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - font-weight: bold; - - @media (max-width: 1120px) { - padding: 0 lh(0.5); - } - } - } - } - - .lang { - .language-menu { - width: var(--baseline); - padding: calc((var(--baseline) / 2)) 0; - } - - .control { - .icon { - @include rtl { - @include transform(rotate(-180deg)); - } - } - } - - &.is-opened { - .control { - .icon { - @include ltr { - @include transform(rotate(90deg)); - } - - @include rtl { - @include transform(rotate(90deg)); - } - } - } - } - } - - .volume { - display: inline-block; - position: relative; - - &.is-opened { - .volume-slider-container { - display: block; - opacity: 1; - } - } - - &:not(:first-child) > a { - @include border-left(none); - } - - .volume-slider-container { - @include transition(none); - - @extend %ui-depth1; - - display: none; - position: absolute; - bottom: calc((var(--baseline) * 2)); - - @include right(0); - - width: 41px; - height: 120px; - background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - - .volume-slider { - height: 100px; - width: calc((var(--baseline) / 4)); - margin: 14px auto; - box-sizing: border-box; - border: 1px solid $cool-dark; - background: $cool-dark; - - .ui-slider-handle { - @extend %ui-fake-link; - - @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: calc((var(--baseline) / 5)); - padding: 0; - background: $secondary-base; - box-shadow: none; - - &:hover, - &:focus { - background: $secondary-light; - border-color: $secondary-light; - } - } - - .ui-slider-range { - background: $secondary-dark; - border: 1px solid $secondary-dark; - left: -1px; - bottom: -1px; - } - } - } - } - - .quality-control { - font-weight: 700; - letter-spacing: -1px; - - &.active { - color: rgb(14, 166, 236); // UXPL primary accent - } - - &.is-hidden { - display: none !important; - } - } - - .toggle-transcript { - &.is-active { - color: rgb(14, 166, 236); // UXPL primary accent - } - } - - .lang { - & > .hide-subtitles { - @include transition(none); - } - } - } - } - - &:hover { - .video-controls { - .slider { - height: calc((var(--baseline) / 1.5)); - - .ui-slider-handle { - height: calc((var(--baseline) / 1.5)); - width: calc((var(--baseline) / 1.5)); - } - } - } - } - } - - &.video-fullscreen { - .closed-captions { - width: 65%; - } - - &.closed .closed-captions { - width: 90%; - } - } - - .subtitles { - @include float(left); - - overflow: auto; - max-height: 460px; - width: flex-grid(3, 9); - padding: 0; - font-size: 14px; - visibility: visible; - - a { - color: #0074b5; - } - - .subtitles-menu { - height: 100%; - margin: 0; - padding: 0 3px; - list-style: none; - - li { - @extend %ui-fake-link; - - margin-bottom: 8px; - border: 0; - padding: 0; - color: #0074b5; // AA compliant - line-height: lh(); - - span { - display: block; - } - - &.current { - color: #333; - font-weight: 700; - } - - &.focused { - outline: #000 dotted thin; - outline-offset: -1px; - } - - &:hover, - &:focus { - text-decoration: underline; - } - - &:empty { - margin-bottom: 0; - } - - &.spacing:last-of-type { - position: relative; - - .transcript-end { - position: absolute; - bottom: 0; - } - } - } - } - } - - &.closed { - .video-wrapper { - width: flex-grid(9, 9); - background-color: inherit; - } - - .video-wrapper .video-controls.html5 { - bottom: 0; - left: 0; - right: 0; - position: absolute; - z-index: 1; - } - - .video-wrapper .video-player-pre, - .video-wrapper .video-player-post { - height: 0; - } - - .video-wrapper .video-player { - h3 { - color: black; - } - } - - .subtitles { - @extend .is-hidden; - } - - .subtitles.html5 { - @extend %ui-depth0; - - 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; - } - } - - &.video-fullscreen { - @extend %ui-depth4; - - background: rgba(#000, 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; - - &.closed { - .tc-wrapper { - .video-wrapper { - width: 100%; - } - } - } - - .video-wrapper .video-player-pre, - .video-wrapper .video-player-post { - height: 0; - } - - .video-wrapper { - position: static; - } - - .video-wrapper .video-player { - h3 { - color: white; - } - } - - .tc-wrapper { - @include clearfix(); - - width: 100%; - height: 100%; - position: static; - - .video-wrapper { - height: 100%; - width: 75%; - - @include margin-right(0); - - vertical-align: middle; - - object, - iframe, - video { - position: absolute; - width: auto; - height: auto; - } - } - - .video-controls { - @extend %ui-depth4; - - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - } - - .subtitles { - height: 100%; - width: 25%; - padding: lh(); - - box-sizing: border-box; - @include transition(none); - - background: var(--black); - visibility: visible; - - li { - color: #aaa; - - &.current { - color: var(--white); - } - } - } - } - - &.is-touch { - .tc-wrapper { - .video-wrapper { - object, - iframe, - video { - width: 100%; - height: 100%; - } - } - } - } - - .video-pre-roll { - @extend %ui-depth3; - - 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); - - &.is-html5 { - background-size: 15%; - } - - .btn-play.btn-pre-roll { - padding: var(--baseline); - border: none; - border-radius: var(--baseline); - background: var(--black-t2); - box-shadow: none; - - &::after { - // the button class, ties to functionality, also uses an icon font - // we're overriding it here so we can use our image instead - display: none; - } - - img { - height: calc((var(--baseline) * 4)); - width: calc((var(--baseline) * 4)); - } - - &:hover, - &:focus { - background: var(--blue); - } - } - } -}