Skip to content

E
edx-platform
Commit bdf964a3 by Calen Pennington
Options

Modularize video css

parent 6029c286
Showing with 437 additions and 459 deletions
cms/static/sass/_base.scss
...@@ -11,6 +11,7 @@ $bright-blue: #3c8ebf; ...@@ -11,6 +11,7 @@ $bright-blue: #3c8ebf;
$orange: #f96e5b; $orange: #f96e5b;
$yellow: #fff8af; $yellow: #fff8af;
$cream: #F6EFD4; $cream: #F6EFD4;
$mit-red: #933;
// Base html styles // Base html styles
html { html {
......
lms/static/sass/course/old/courseware/_video.scss → common/lib/xmodule/xmodule/css/video/display.scss
@-moz-document url-prefix() { div.video {
a.add-fullscreen { @include clearfix();
display: none !important; background: #f3f3f3;
} border-bottom: 1px solid #e1e1e1;
} border-top: 1px solid #e1e1e1;
display: block;
section.course-content { margin: 0 (-(lh()));
.dullify { padding: 6px lh();
opacity: .4;
@include transition(); article.video-wrapper {
float: left;
margin-right: flex-gutter(9);
width: flex-grid(6, 9);
section.video-player {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
&:hover { object, iframe {
opacity: 1; border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
} }
}
div.video {
@include clearfix();
background: #f3f3f3;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
display: block;
margin: 0 (-(lh()));
padding: 6px lh();
article.video-wrapper { section.video-controls {
float: left; @extend .clearfix;
margin-right: flex-gutter(9); background: #333;
width: flex-grid(6, 9); border: 1px solid #000;
border-top: 0;
color: #ccc;
position: relative;
section.video-player { &:hover {
height: 0; ul, div {
overflow: hidden; opacity: 1;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
object, iframe {
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
} }
} }
section.video-controls { div.slider {
@extend .clearfix; @extend .clearfix;
background: #333; background: #c2c2c2;
border: 1px solid #000; border: none;
border-top: 0; border-bottom: 1px solid #000;
color: #ccc; @include border-radius(0);
position: relative; border-top: 1px solid #000;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
&:hover { height: 7px;
ul, div { @include transition(height 2.0s ease-in-out);
opacity: 1;
} div.ui-widget-header {
background: #777;
@include box-shadow(inset 0 1px 0 #999);
} }
div.slider { .ui-tooltip.qtip .ui-tooltip-content {
@extend .clearfix; background: $mit-red;
background: #c2c2c2; border: 1px solid darken($mit-red, 20%);
border: none; @include border-radius(2px);
border-bottom: 1px solid #000; @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@include border-radius(0); color: #fff;
border-top: 1px solid #000; font: bold 12px $body-font-family;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); margin-bottom: 6px;
height: 7px; margin-right: 0;
@include transition(height 2.0s ease-in-out); overflow: visible;
padding: 4px;
div.ui-widget-header { text-align: center;
background: #777; text-shadow: 0 -1px 0 darken($mit-red, 10%);
@include box-shadow(inset 0 1px 0 #999); -webkit-font-smoothing: antialiased;
}
&::after {
.ui-tooltip.qtip .ui-tooltip-content {
background: $mit-red; background: $mit-red;
border: 1px solid darken($mit-red, 20%); border-bottom: 1px solid darken($mit-red, 20%);
@include border-radius(2px); border-right: 1px solid darken($mit-red, 20%);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); bottom: -5px;
color: #fff; content: " ";
font: bold 12px $body-font-family; display: block;
margin-bottom: 6px; height: 7px;
margin-right: 0; left: 50%;
overflow: visible; margin-left: -3px;
padding: 4px; position: absolute;
text-align: center; @include transform(rotate(45deg));
text-shadow: 0 -1px 0 darken($mit-red, 10%); width: 7px;
-webkit-font-smoothing: antialiased;
&::after {
background: $mit-red;
border-bottom: 1px solid darken($mit-red, 20%);
border-right: 1px solid darken($mit-red, 20%);
bottom: -5px;
content: " ";
display: block;
height: 7px;
left: 50%;
margin-left: -3px;
position: absolute;
@include transform(rotate(45deg));
width: 7px;
}
} }
}
a.ui-slider-handle { a.ui-slider-handle {
background: $mit-red url(../images/slider-handle.png) center center no-repeat; background: $mit-red url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%); @include background-size(50%);
border: 1px solid darken($mit-red, 20%); border: 1px solid darken($mit-red, 20%);
@include border-radius(15px); @include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;
margin-left: -7px; margin-left: -7px;
top: -4px; top: -4px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out); @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
width: 15px; width: 15px;
&:focus, &:hover { &:focus, &:hover {
background-color: lighten($mit-red, 10%); background-color: lighten($mit-red, 10%);
outline: none; outline: none;
}
} }
} }
}
ul.vcr { ul.vcr {
@extend .dullify; @extend .dullify;
float: left;
list-style: none;
margin-right: lh();
padding: 0;
li {
float: left; float: left;
list-style: none; margin-bottom: 0;
margin-right: lh();
padding: 0;
li {
float: left;
margin-bottom: 0;
a {
border-bottom: none;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555);
cursor: pointer;
display: block;
line-height: 46px;
padding: 0 lh(.75);
text-indent: -9999px;
@include transition(background-color, opacity);
width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat;
a { &:empty {
border-bottom: none; height: 46px;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555);
cursor: pointer;
display: block;
line-height: 46px;
padding: 0 lh(.75);
text-indent: -9999px;
@include transition(background-color, opacity);
width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat; background: url('../images/vcr.png') 15px 15px no-repeat;
}
&:empty { &.play {
height: 46px; background-position: 17px -114px;
background: url('../images/vcr.png') 15px 15px no-repeat;
}
&.play {
background-position: 17px -114px;
&:hover { &:hover {
background-color: #444; background-color: #444;
}
} }
}
&.pause { &.pause {
background-position: 16px -50px; background-position: 16px -50px;
&:hover { &:hover {
background-color: #444; background-color: #444;
}
} }
} }
}
div.vidtime { div.vidtime {
padding-left: lh(.75); padding-left: lh(.75);
font-weight: bold; font-weight: bold;
line-height: 46px; //height of play pause buttons line-height: 46px; //height of play pause buttons
padding-left: lh(.75); padding-left: lh(.75);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
}
} }
} }
}
div.secondary-controls { div.secondary-controls {
@extend .dullify; @extend .dullify;
float: right; float: right;
div.speeds { div.speeds {
float: left; float: left;
position: relative; position: relative;
&.open {
&>a {
background: url('../images/open-arrow.png') 10px center no-repeat;
}
ol.video_speeds { &.open {
display: block; &>a {
opacity: 1; background: url('../images/open-arrow.png') 10px center no-repeat;
}
} }
&>a { ol.video_speeds {
background: url('../images/closed-arrow.png') 10px center no-repeat;
border-left: 1px solid #000;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
@include clearfix();
color: #fff;
cursor: pointer;
display: block; display: block;
line-height: 46px; //height of play pause buttons opacity: 1;
margin-right: 0; }
padding-left: 15px; }
position: relative;
@include transition();
-webkit-font-smoothing: antialiased;
width: 110px;
h3 {
color: #999;
float: left;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
padding: 0 lh(.25) 0 lh(.5);
text-transform: uppercase;
}
p.active { &>a {
float: left; background: url('../images/closed-arrow.png') 10px center no-repeat;
font-weight: bold; border-left: 1px solid #000;
margin-bottom: 0; border-right: 1px solid #000;
padding: 0 lh(.5) 0 0; @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
} @include clearfix();
color: #fff;
cursor: pointer;
display: block;
line-height: 46px; //height of play pause buttons
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
-webkit-font-smoothing: antialiased;
width: 110px;
h3 {
color: #999;
float: left;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
padding: 0 lh(.25) 0 lh(.5);
text-transform: uppercase;
}
&:hover, &:active, &:focus { p.active {
opacity: 1; float: left;
background-color: #444; font-weight: bold;
} margin-bottom: 0;
padding: 0 lh(.5) 0 0;
} }
// fix for now &:hover, &:active, &:focus {
ol.video_speeds { opacity: 1;
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
@include transition();
background-color: #444; background-color: #444;
border: 1px solid #000;
bottom: 46px;
display: none;
opacity: 0;
position: absolute;
width: 125px;
z-index: 10;
li {
@include box-shadow( 0 1px 0 #555);
border-bottom: 1px solid #000;
color: #fff;
cursor: pointer;
a {
border: 0;
color: #fff;
display: block;
padding: lh(.5);
&:hover {
background-color: #666;
color: #aaa;
}
}
&.active {
font-weight: bold;
}
&:last-child {
@include box-shadow(none);
border-bottom: 0;
margin-top: 0;
}
}
} }
} }
div.volume { // fix for now
float: left; ol.video_speeds {
position: relative; @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
@include transition();
background-color: #444;
border: 1px solid #000;
bottom: 46px;
display: none;
opacity: 0;
position: absolute;
width: 125px;
z-index: 10;
li {
@include box-shadow( 0 1px 0 #555);
border-bottom: 1px solid #000;
color: #fff;
cursor: pointer;
&.open { a {
.volume-slider-container { border: 0;
color: #fff;
display: block; display: block;
opacity: 1; padding: lh(.5);
&:hover {
background-color: #666;
color: #aaa;
}
} }
}
&.muted { &.active {
&>a { font-weight: bold;
background: url('../images/mute.png') 10px center no-repeat;
} }
}
> a { &:last-child {
background: url('../images/volume.png') 10px center no-repeat; @include box-shadow(none);
border-right: 1px solid #000; border-bottom: 0;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); margin-top: 0;
@include clearfix();
color: #fff;
cursor: pointer;
display: block;
height: 46px;
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
-webkit-font-smoothing: antialiased;
width: 30px;
&:hover, &:active, &:focus {
background-color: #444;
} }
} }
}
}
div.volume {
float: left;
position: relative;
&.open {
.volume-slider-container { .volume-slider-container {
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444); display: block;
@include transition(); opacity: 1;
background-color: #444; }
border: 1px solid #000; }
bottom: 46px;
display: none;
opacity: 0;
position: absolute;
width: 45px;
height: 125px;
margin-left: -1px;
z-index: 10;
.volume-slider {
height: 100px;
border: 0;
width: 5px;
margin: 14px auto;
background: #666;
border: 1px solid #000;
@include box-shadow(0 1px 0 #333);
a.ui-slider-handle {
background: $mit-red url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%);
border: 1px solid darken($mit-red, 20%);
@include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
cursor: pointer;
height: 15px;
left: -6px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
width: 15px;
}
.ui-slider-range { &.muted {
background: #ddd; &>a {
} background: url('../images/mute.png') 10px center no-repeat;
}
} }
} }
a.add-fullscreen { > a {
background: url(../images/fullscreen.png) center no-repeat; background: url('../images/volume.png') 10px center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
color: #797979; @include clearfix();
color: #fff;
cursor: pointer;
display: block; display: block;
float: left; height: 46px;
line-height: 46px; //height of play pause buttons margin-right: 0;
margin-left: 0; padding-left: 15px;
padding: 0 lh(.5); position: relative;
text-indent: -9999px;
@include transition(); @include transition();
-webkit-font-smoothing: antialiased;
width: 30px; width: 30px;
&:hover { &:hover, &:active, &:focus {
background-color: #444; background-color: #444;
color: #fff;
text-decoration: none;
} }
} }
a.hide-subtitles { .volume-slider-container {
background: url('../images/cc.png') center no-repeat; @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
color: #797979;
display: block;
float: left;
font-weight: 800;
line-height: 46px; //height of play pause buttons
margin-left: 0;
opacity: 1;
padding: 0 lh(.5);
position: relative;
text-indent: -9999px;
@include transition(); @include transition();
-webkit-font-smoothing: antialiased; background-color: #444;
width: 30px; border: 1px solid #000;
bottom: 46px;
&:hover { display: none;
background-color: #444; opacity: 0;
color: #fff; position: absolute;
text-decoration: none; width: 45px;
} height: 125px;
margin-left: -1px;
z-index: 10;
.volume-slider {
height: 100px;
border: 0;
width: 5px;
margin: 14px auto;
background: #666;
border: 1px solid #000;
@include box-shadow(0 1px 0 #333);
a.ui-slider-handle {
background: $mit-red url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%);
border: 1px solid darken($mit-red, 20%);
@include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
cursor: pointer;
height: 15px;
left: -6px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
width: 15px;
}
&.off { .ui-slider-range {
opacity: .7; background: #ddd;
}
} }
} }
} }
}
&:hover section.video-controls { a.add-fullscreen {
ul, div { background: url(../images/fullscreen.png) center no-repeat;
opacity: 1; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
color: #797979;
display: block;
float: left;
line-height: 46px; //height of play pause buttons
margin-left: 0;
padding: 0 lh(.5);
text-indent: -9999px;
@include transition();
width: 30px;
&:hover {
background-color: #444;
color: #fff;
text-decoration: none;
}
} }
div.slider { a.hide-subtitles {
height: 14px; background: url('../images/cc.png') center no-repeat;
margin-top: -7px; color: #797979;
display: block;
float: left;
font-weight: 800;
line-height: 46px; //height of play pause buttons
margin-left: 0;
opacity: 1;
padding: 0 lh(.5);
position: relative;
text-indent: -9999px;
@include transition();
-webkit-font-smoothing: antialiased;
width: 30px;
&:hover {
background-color: #444;
color: #fff;
text-decoration: none;
}
a.ui-slider-handle { &.off {
@include border-radius(20px); opacity: .7;
height: 20px;
margin-left: -10px;
top: -4px;
width: 20px;
} }
} }
} }
} }
ol.subtitles { &:hover section.video-controls {
float: left; ul, div {
max-height: 460px; opacity: 1;
overflow: auto; }
width: flex-grid(3, 9);
li {
border: 0;
color: #666;
cursor: pointer;
margin-bottom: 8px;
padding: 0;
&.current {
color: #333;
font-weight: 700;
}
&:hover { div.slider {
color: $mit-red; height: 14px;
} margin-top: -7px;
&:empty { a.ui-slider-handle {
margin-bottom: 0px; @include border-radius(20px);
height: 20px;
margin-left: -10px;
top: -4px;
width: 20px;
} }
} }
} }
}
&.closed { ol.subtitles {
@extend .trans; float: left;
max-height: 460px;
overflow: auto;
width: flex-grid(3, 9);
article.video-wrapper { li {
width: flex-grid(9,9); border: 0;
color: #666;
cursor: pointer;
margin-bottom: 8px;
padding: 0;
&.current {
color: #333;
font-weight: 700;
} }
ol.subtitles { &:hover {
width: 0px; color: $mit-red;
}
&:empty {
margin-bottom: 0px;
} }
} }
}
&.fullscreen { &.closed {
background: rgba(#000, .95); @extend .trans;
border: 0;
bottom: 0;
height: 100%;
left: 0;
margin: 0;
max-height: 100%;
overflow: hidden;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
&.closed { article.video-wrapper {
ol.subtitles { width: flex-grid(9,9);
right: -(flex-grid(4)); }
width: auto;
}
}
a.exit { ol.subtitles {
color: #aaa; width: 0px;
display: none; }
font-style: 12px; }
left: 20px;
letter-spacing: 1px;
position: absolute;
text-transform: uppercase;
top: 20px;
&::after { &.fullscreen {
content: "✖"; background: rgba(#000, .95);
@include inline-block(); border: 0;
padding-left: 6px; bottom: 0;
} height: 100%;
left: 0;
margin: 0;
max-height: 100%;
overflow: hidden;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
&:hover { &.closed {
color: $mit-red; ol.subtitles {
} right: -(flex-grid(4));
width: auto;
} }
}
div.tc-wrapper { a.exit {
article.video-wrapper { color: #aaa;
width: 100%; display: none;
} font-style: 12px;
left: 20px;
letter-spacing: 1px;
position: absolute;
text-transform: uppercase;
top: 20px;
&::after {
content: "✖";
@include inline-block();
padding-left: 6px;
}
object, iframe { &:hover {
bottom: 0; color: $mit-red;
height: 100%; }
left: 0; }
overflow: hidden;
position: fixed;
top: 0;
}
section.video-controls { div.tc-wrapper {
bottom: 0; article.video-wrapper {
left: 0; width: 100%;
position: absolute;
width: 100%;
z-index: 9999;
}
} }
ol.subtitles { object, iframe {
background: rgba(#000, .8);
bottom: 0; bottom: 0;
height: 100%; height: 100%;
max-height: 100%; left: 0;
max-width: flex-grid(3); overflow: hidden;
padding: lh();
position: fixed; position: fixed;
right: 0;
top: 0; top: 0;
@include transition(); }
li { section.video-controls {
color: #aaa; bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9999;
}
}
&.current { ol.subtitles {
color: #fff; background: rgba(#000, .8);
} bottom: 0;
height: 100%;
max-height: 100%;
max-width: flex-grid(3);
padding: lh();
position: fixed;
right: 0;
top: 0;
@include transition();
li {
color: #aaa;
&.current {
color: #fff;
} }
} }
} }
} }
} }
div.course-wrapper.closed section.course-content div.video {
ol.subtitles {
max-height: 577px;
}
}
common/lib/xmodule/xmodule/video_module.py
...@@ -20,6 +20,7 @@ class VideoModule(XModule): ...@@ -20,6 +20,7 @@ class VideoModule(XModule):
[resource_string(__name__, 'js/src/video/display/' + filename) [resource_string(__name__, 'js/src/video/display/' + filename)
for filename for filename
in sorted(resource_listdir(__name__, 'js/src/video/display'))]} in sorted(resource_listdir(__name__, 'js/src/video/display'))]}
css = {'scss': [resource_string(__name__, 'css/video/display.scss')]}
js_module_name = "Video" js_module_name = "Video"
def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs): def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs):
......
lms/static/sass/course.scss
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
@import 'course/old/base/functions'; @import 'course/old/base/functions';
@import 'course/old/courseware/courseware'; @import 'course/old/courseware/courseware';
@import 'course/old/courseware/sidebar'; @import 'course/old/courseware/sidebar';
@import 'course/old/courseware/video';
@import 'course/old/courseware/amplifier'; @import 'course/old/courseware/amplifier';
@import 'module/module-styles.scss'; @import 'module/module-styles.scss';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment