addressing review feedback on video buttons - switched to use themeable color variables

cms/static/sass/_variables.scss

@@ -199,3 +199,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;
+
+
+

common/lib/xmodule/xmodule/css/video/display.scss

@@ -27,26 +27,31 @@ div.video {
     height: 0px;
   }
 
-  .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: $white;
-      padding: ($baseline*.75);
-      color: $lighter-base-font-color;
+  .wrapper-downloads {
+    margin: 0;
+    padding: 0;
 
-      &:hover {
-        background-color: $blue;
-        color: $white;
+    .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 {

lms/templates/video.html

@@ -76,7 +76,7 @@
     </div>
 
     <div class="focus_grabber last"></div>
-<ul class="downloads-wrapper">
+<ul class="wrapper-downloads">
 % if sources.get('main'):
     <li class="video-sources">
         ${('<a href="%s">' + _('Download video') + '</a>') % sources.get('main')}