diff --git a/static/css/application.css b/static/css/application.css index 869571bdf2..0c088fe6a4 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -2945,6 +2945,42 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr -webkit-box-shadow: inset 0 1px 0 #999999; -moz-box-shadow: inset 0 1px 0 #999999; box-shadow: inset 0 1px 0 #999999; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider .ui-tooltip.qtip .ui-tooltip-content { + background: #993333; + border: 1px solid #4d1919; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 0 #bf4040; + -moz-box-shadow: inset 0 1px 0 #bf4040; + box-shadow: inset 0 1px 0 #bf4040; + color: #fff; + font: bold 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + margin-bottom: 6px; + padding: 4px; + text-align: center; + -webkit-font-smoothing: antialiased; + text-shadow: 0 -1px 0 #732626; + overflow: visible; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider .ui-tooltip.qtip .ui-tooltip-content::after { + content: " "; + width: 7px; + height: 7px; + display: block; + position: absolute; + bottom: -5px; + left: 50%; + margin-left: -3px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + background: #993333; + border-right: 1px solid #4d1919; + border-bottom: 1px solid #4d1919; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle { -webkit-border-radius: 15px; -moz-border-radius: 15px; diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss index 46e6fd8889..cec9ec1cad 100644 --- a/templates/sass/courseware/_video.scss +++ b/templates/sass/courseware/_video.scss @@ -81,6 +81,36 @@ section.course-content { @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; + 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%));