chore: remove video block scss files
This commit is contained in:
farhan
@@ -1,4 +0,0 @@
|
||||
.xmodule_display.xmodule_VideoBlock {
|
||||
@import "video/display.scss";
|
||||
@import "video/accessible_menu.scss";
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.xmodule_edit.xmodule_VideoBlock {
|
||||
@import "tabs/tabs.scss";
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user