/* * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-resizer: var(--ck-color-focus-border); --ck-resizer-size: 10px; --ck-resizer-border-width: 1px; --ck-resizer-border-radius: 2px; /* Set the resizer with a 50% offset. */ --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px); --ck-resizer-tooltip-offset: 10px; --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%); --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%); } .ck .ck-widget { /* This is neccessary for type around UI to be positioned properly. */ position: relative; } .ck .ck-widget.ck-widget_with-selection-handle { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; & .ck-widget__selection-handle { position: absolute; & .ck-icon { /* Make sure the icon in not a subject to font-size or line-height to avoid unnecessary spacing around it. */ display: block; } } /* Show the selection handle on mouse hover over the widget. */ &:hover { & .ck-widget__selection-handle { visibility: visible; } } /* Show the selection handle when the widget is selected. */ &.ck-widget_selected .ck-widget__selection-handle { visibility: visible; } } .ck .ck-size-view { background: var(--ck-color-resizer-tooltip-background); color: var(--ck-color-resizer-tooltip-text); border: 1px solid var(--ck-color-resizer-tooltip-text); border-radius: var(--ck-resizer-border-radius); font-size: var(--ck-font-size-tiny); display: block; padding: var(--ck-spacing-small); &.ck-orientation-top-left, &.ck-orientation-top-right, &.ck-orientation-bottom-right, &.ck-orientation-bottom-left { position: absolute; } &.ck-orientation-top-left { top: var( --ck-resizer-tooltip-offset ); left: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-top-right { top: var( --ck-resizer-tooltip-offset ); right: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-bottom-right { bottom: var( --ck-resizer-tooltip-offset ); right: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-bottom-left { bottom: var( --ck-resizer-tooltip-offset ); left: var( --ck-resizer-tooltip-offset ); } }