502 lines
12 KiB
SCSS
502 lines
12 KiB
SCSS
@-moz-document url-prefix() {
|
|
a.add-fullscreen {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
section.course-content {
|
|
.dullify {
|
|
opacity: .4;
|
|
@include transition();
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
div.video {
|
|
}
|
|
|
|
div.video-subtitles {
|
|
@include clearfix();
|
|
padding: 6px lh();
|
|
margin: 0 (-(lh()));
|
|
border-top: 1px solid #e1e1e1;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
background: #f3f3f3;
|
|
display: block;
|
|
|
|
div.video-wrapper {
|
|
float: left;
|
|
width: flex-grid(6, 9);
|
|
margin-right: flex-gutter(9);
|
|
|
|
div.video-player {
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
padding-top: 30px;
|
|
height: 0;
|
|
overflow: hidden;
|
|
|
|
object {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
iframe#html5_player {
|
|
border: none;
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
section.video-controls {
|
|
@extend .clearfix;
|
|
background: #333;
|
|
position: relative;
|
|
border: 1px solid #000;
|
|
border-top: 0;
|
|
color: #ccc;
|
|
|
|
&:hover {
|
|
ul, div {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
div#slider {
|
|
@extend .clearfix;
|
|
@include border-radius(0);
|
|
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
|
|
background: #c2c2c2;
|
|
border: none;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
height: 7px;
|
|
@include transition(height 2.0s ease-in-out);
|
|
|
|
div.ui-widget-header {
|
|
background: #777;
|
|
@include box-shadow(inset 0 1px 0 #999);
|
|
}
|
|
|
|
.ui-tooltip.qtip .ui-tooltip-content {
|
|
background: $mit-red;
|
|
border: 1px solid darken($mit-red, 20%);
|
|
@include border-radius(2px);
|
|
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
|
|
color: #fff;
|
|
font: bold 12px $body-font-family;
|
|
margin-bottom: 6px;
|
|
margin-right: 0;
|
|
padding: 4px;
|
|
text-align: center;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-shadow: 0 -1px 0 darken($mit-red, 10%);
|
|
overflow: visible;
|
|
|
|
&::after {
|
|
content: " ";
|
|
width: 7px;
|
|
height: 7px;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
@include transform(rotate(45deg));
|
|
background: $mit-red;
|
|
border-right: 1px solid darken($mit-red, 20%);
|
|
border-bottom: 1px solid darken($mit-red, 20%);
|
|
}
|
|
}
|
|
|
|
a.ui-slider-handle {
|
|
@include border-radius(15px);
|
|
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
|
|
background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
|
|
border: 1px solid darken($mit-red, 20%);
|
|
cursor: pointer;
|
|
height: 15px;
|
|
margin-left: -7px;
|
|
top: -4px;
|
|
width: 15px;
|
|
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
|
|
@include background-size(50%);
|
|
|
|
&:focus, &:hover {
|
|
background-color: lighten($mit-red, 10%);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
ul.vcr {
|
|
float: left;
|
|
margin-right: lh();
|
|
@extend .dullify;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
float: left;
|
|
margin-bottom: 0;
|
|
|
|
a {
|
|
@include box-shadow(1px 0 0 #555);
|
|
border-bottom: none;
|
|
border-right: 1px solid #000;
|
|
display: block;
|
|
cursor: pointer;
|
|
// height: 14px;
|
|
line-height: 46px;
|
|
padding: 0 lh(.75);
|
|
text-indent: -9999px;
|
|
width: 14px;
|
|
@include transition();
|
|
|
|
&.play {
|
|
background: url('/static/images/play-icon.png') center center no-repeat;
|
|
|
|
&:hover {
|
|
background-color: #444;
|
|
}
|
|
}
|
|
|
|
&.pause {
|
|
background: url('/static/images/pause-icon.png') center center no-repeat;
|
|
|
|
&:hover {
|
|
background-color: #444;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
div#vidtime {
|
|
padding-left: lh(.75);
|
|
font-weight: bold;
|
|
line-height: 46px; //height of play pause buttons
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.secondary-controls {
|
|
float: right;
|
|
@extend .dullify;
|
|
|
|
div.speeds {
|
|
float: left;
|
|
|
|
a {
|
|
background: url('/static/images/closed-arrow.png') 10px center no-repeat;
|
|
border-left: 1px solid #000;
|
|
border-right: 1px solid #000;
|
|
display: block;
|
|
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
|
|
@include clearfix();
|
|
cursor: pointer;
|
|
line-height: 46px; //height of play pause buttons
|
|
margin-right: 0;
|
|
padding-left: 15px;
|
|
position: relative;
|
|
@include transition();
|
|
-webkit-font-smoothing: antialiased;
|
|
width: 110px;
|
|
color: #fff;
|
|
|
|
&.open {
|
|
background: url('/static/images/open-arrow.png') 10px center no-repeat;
|
|
|
|
ol#video_speeds {
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
color: #999;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
float: left;
|
|
letter-spacing: 1px;
|
|
padding: 0 lh(.25) 0 lh(.5);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p.active {
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-bottom: 0;
|
|
padding: 0 lh(.5) 0 0;
|
|
}
|
|
|
|
// fix for now
|
|
ol#video_speeds {
|
|
background-color: #444;
|
|
border: 1px solid #000;
|
|
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
|
|
left: -1px;
|
|
display: none;
|
|
position: absolute;
|
|
top:0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
@include transition();
|
|
opacity: 0;
|
|
|
|
li {
|
|
border-bottom: 1px solid #000;
|
|
@include box-shadow( 0 1px 0 #555);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 0 lh(.5);
|
|
|
|
&.active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
margin-top: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
&:hover {
|
|
color: #aaa;
|
|
background-color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
background-color: #444;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.add-fullscreen {
|
|
background: url(/static/images/fullscreen.png) center no-repeat;
|
|
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 {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background-color: #444;
|
|
}
|
|
}
|
|
|
|
a.hide-subtitles {
|
|
float: left;
|
|
display: block;
|
|
padding: 0 lh(.5);
|
|
margin-left: 0;
|
|
color: #797979;
|
|
line-height: 46px; //height of play pause buttons
|
|
width: 30px;
|
|
text-indent: -9999px;
|
|
font-weight: 800;
|
|
background: url('/static/images/cc.png') center no-repeat;
|
|
-webkit-font-smoothing: antialiased;
|
|
@include transition();
|
|
opacity: 1;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background-color: #444;
|
|
}
|
|
|
|
&.off {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover section.video-controls {
|
|
ul, div {
|
|
opacity: 1;
|
|
}
|
|
|
|
div#slider {
|
|
height: 14px;
|
|
margin-top: -7px;
|
|
|
|
a.ui-slider-handle {
|
|
@include border-radius(20px);
|
|
height: 20px;
|
|
margin-left: -10px;
|
|
top: -4px;
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ol.subtitles {
|
|
float: left;
|
|
width: flex-grid(3, 9);
|
|
padding-top: 10px;
|
|
max-height: 460px;
|
|
overflow: hidden;
|
|
|
|
li {
|
|
border: 0;
|
|
color: #666;
|
|
cursor: pointer;
|
|
margin-bottom: 0px;
|
|
padding: 0;
|
|
@include transition(all, .5s, ease-in);
|
|
|
|
&.current {
|
|
color: #333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&:hover {
|
|
color: $mit-red;
|
|
}
|
|
|
|
div {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
div:empty {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.closed {
|
|
@extend .trans;
|
|
|
|
div.video-wrapper {
|
|
width: flex-grid(9,9);
|
|
}
|
|
|
|
ol.subtitles {
|
|
width: 0px;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
&.fullscreen {
|
|
background: rgba(#000, .95);
|
|
border: 0;
|
|
margin: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
max-height: 100%;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
|
|
&.closed {
|
|
ol.subtitles {
|
|
width: auto;
|
|
height: auto;
|
|
right: -(flex-grid(4));
|
|
}
|
|
}
|
|
|
|
a.exit {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
color: #aaa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-style: 12px;
|
|
display: none;
|
|
|
|
&::after {
|
|
content: "✖";
|
|
@include inline-block();
|
|
padding-left: 6px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $mit-red;
|
|
}
|
|
}
|
|
|
|
div.tc-wrapper {
|
|
div.video-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
object#myytplayer, iframe {
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
section.video-controls {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
|
|
ol.subtitles {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
background: rgba(#000, .8);
|
|
padding: lh();
|
|
max-width: flex-grid(3);
|
|
max-height: 100%;
|
|
@include transition();
|
|
|
|
li {
|
|
color: #aaa;
|
|
|
|
&.current {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.course-wrapper.closed section.course-content div.video-subtitles {
|
|
ol.subtitles {
|
|
max-height: 577px;
|
|
}
|
|
}
|