diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index a3b6a90b5c..3bd13f3e5b 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -180,6 +180,7 @@ $ui-update-color: $blue-l4; // inherited $baseFontColor: $gray-d2; +$lighter-base-font-color: rgb(100,100,100); $offBlack: #3c3c3c; $green: #108614; $lightGrey: #edf1f5; @@ -199,3 +200,10 @@ $error-red: rgb(253, 87, 87); // type $sans-serif: $f-sans-serif; $body-line-height: golden-ratio(.875em, 1); + +// carried over from LMS for xmodules +$action-primary-active-bg: #1AA1DE; // $m-blue +$very-light-text: #fff; + + + diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index f21ed73444..1411ac5707 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -27,6 +27,33 @@ div.video { height: 0px; } + .wrapper-downloads { + margin: 0; + padding: 0; + + .video-sources, + .video-tracks { + display: inline-block; + margin: ($baseline*.75) ($baseline/2) 0 0; + + a { + @include transition(all 0.25s ease-in-out 0s); + @include font-size(14); + display: inline-block; + border-radius: 3px 3px 3px 3px; + background-color: $very-light-text; + padding: ($baseline*.75); + color: $lighter-base-font-color; + + &:hover { + background-color: $action-primary-active-bg; + color: $very-light-text; + } + } + + } + } + article.video-wrapper { float: left; margin-right: flex-gutter(9); diff --git a/lms/templates/video.html b/lms/templates/video.html index d0e61a5f74..677433898b 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -89,16 +89,19 @@
- - + + + +