diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index 0045f401866cd..67636e238fafa 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -239,9 +239,14 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { .block-outline:before { content: ''; position: absolute; - top: -12px; - right: -12px; - bottom: -12px; - left: -12px; + top: -10px; + right: -10px; + bottom: -10px; + left: -10px; border: 2px solid #e0e5e9; } + +.insert-toolbar svg { + background: #fff; + border-radius: 12px; +} diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 24afe661330e0..befd01d065889 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -226,28 +226,28 @@ var toolbar = this.getEl(); var block = getSelectedBlock(); - var isRightAligned = editor.$( block ).hasClass( 'alignright' ); + var isFullBleed = editor.$( block ).hasClass( 'alignfull' ); var toolbarRect = toolbar.getBoundingClientRect(); var blockRect = block.getBoundingClientRect(); var contentRect = editor.getBody().getBoundingClientRect(); - if ( isRightAligned ) { - var left = contentRect.right - toolbarRect.width - 50; - } else { - var left = contentRect.left + 50 - } - if ( settings.isEmpty ) { DOM.setStyles( toolbar, { position: 'absolute', - left: left + 'px', + left: contentRect.left + 50 + 'px', top: blockRect.top + 3 + window.pageYOffset + 'px' } ); } else { + if ( isFullBleed ) { + var left = contentRect.left + 50; + } else { + var left = blockRect.left - 6; + } + DOM.setStyles( toolbar, { position: 'absolute', left: left + 'px', - top: blockRect.top + Math.max( blockRect.height, 48 ) - 1 + window.pageYOffset + 'px' + top: blockRect.bottom - 3 + window.pageYOffset + 'px' } ); }