diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index fa9e153849..2870ba990f 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -25,17 +25,27 @@ cursor: pointer; @each $highlight in ( - (red rgba(178,19,16,0.3)), (orange rgba(255,165,0,0.3)), - (yellow rgba(255,255,10,0.3)), (green rgba(25,255,132,0.3)), - (blue rgba(35,163,255,0.3)), (purple rgba(115,9,178,0.3))) { + (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)), + (orange rgba(255,165,0,0.3) rgba(255,165,0,0.9)), + (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)), + (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)), + (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)), + (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) { $marker: nth($highlight,1); $color: nth($highlight,2); + $selected_color: nth($highlight,3); - @if $marker == yellow { - &.highlight { background-color: $color; } + @if $marker == yellow { + &.highlight { + background-color: $color; + &.selected { background-color: $selected_color; } + } + } + &.highlight-#{$marker} { + background-color: $color; + &.selected { background-color: $selected_color; } } - &.highlight-#{$marker} { background-color: $color; } } &.hide { diff --git a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee index 717ef35446..43d0536d32 100644 --- a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee @@ -149,7 +149,8 @@ class @Annotatable problem_el.effect 'highlight', {}, 500 afterScrollToSpan: (span_el) -> - span_el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000 + span_el.addClass 'selected', 400, 'swing', -> + span_el.removeClass 'selected', 400, 'swing' makeTipContent: (el) -> (api) =>