| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- /*
- * 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 );
- }
- }
|