diff --git a/modules/overlay/ext.echo.overlay.init.js b/modules/overlay/ext.echo.overlay.init.js index 49737c82c..562e11ef3 100644 --- a/modules/overlay/ext.echo.overlay.init.js +++ b/modules/overlay/ext.echo.overlay.init.js @@ -30,9 +30,6 @@ .hide() .appendTo( $( '#pt-notifications' ) ); - // Create the pokey (aka chevron) - $overlay.before( $( '
' ).addClass( 'mw-echo-overlay-pokey' ) ); - mw.hook( 'ext.echo.overlay.beforeShowingOverlay' ).fire( $overlay ); // Show the notifications overlay @@ -55,7 +52,7 @@ } ); $( 'body' ).click( function ( e ) { - if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, .mw-echo-overlay-pokey, #pt-notifications a' ) ) { + if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, #pt-notifications a' ) ) { mw.echo.overlay.removeOverlay(); } } ); diff --git a/modules/overlay/ext.echo.overlay.js b/modules/overlay/ext.echo.overlay.js index 628f29f31..a93ed6e04 100644 --- a/modules/overlay/ext.echo.overlay.js +++ b/modules/overlay/ext.echo.overlay.js @@ -402,7 +402,7 @@ } ); }, removeOverlay: function () { - $( '.mw-echo-overlay, .mw-echo-overlay-pokey' ).fadeOut( 'fast', + $( '.mw-echo-overlay' ).fadeOut( 'fast', function () { $( this ).remove(); } diff --git a/modules/overlay/ext.echo.overlay.less b/modules/overlay/ext.echo.overlay.less index ef96d1c44..f5a9ecd08 100644 --- a/modules/overlay/ext.echo.overlay.less +++ b/modules/overlay/ext.echo.overlay.less @@ -1,7 +1,8 @@ +@offset: 200px; .mw-echo-overlay { position: absolute; top: 30px; - left: -200px; + left: -@offset; border: 1px solid silver; background-color: #fff; width: 450px; @@ -10,17 +11,21 @@ color: #6D6D6D; z-index: 100; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.35); -} -.mw-echo-overlay-pokey { - /* @embed */ - background-image: url('PokeyNorth.png'); - background-repeat: no-repeat; - width: 21px; - height: 11px; - position: absolute; - z-index: 101; - top: 20px; - left: -5px; + + // IE8 + &:before, + &::before { + content: ''; + background-image: url('PokeyNorth.png'); + background-repeat: no-repeat; + width: 21px; + height: 11px; + position: absolute; + z-index: 101; + top: -11px; + // subtract half the width from the offset and then add the left box shadow + left: @offset - 10px + 3px; + } } diff --git a/modules/overlay/ext.echo.overlay.modern.css b/modules/overlay/ext.echo.overlay.modern.css index f86bd29af..005e6d9e9 100644 --- a/modules/overlay/ext.echo.overlay.modern.css +++ b/modules/overlay/ext.echo.overlay.modern.css @@ -9,9 +9,6 @@ body #p-personal { left: -20px; top: 31px; } -#p-personal .mw-echo-overlay-pokey { - left: -6px; -} #p-personal #pt-notifications ul, #p-personal #pt-notifications li { text-transform: none;