/* * 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-restricted-editing-exception-background: hsla(31, 100%, 65%, .2); --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35); --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4); --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5); --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6); } .ck-editor__editable .restricted-editing-exception { transition: .2s ease-in-out background; background-color: var(--ck-color-restricted-editing-exception-background); border: 1px solid; border-image: linear-gradient( to right, var(--ck-color-restricted-editing-exception-brackets) 0%, var(--ck-color-restricted-editing-exception-brackets) 5px, hsla(0, 0%, 0%, 0) 6px, hsla(0, 0%, 0%, 0) calc(100% - 6px), var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-exception-brackets) 100% ) 1; &.restricted-editing-exception_selected { background-color: var(--ck-color-restricted-editing-selected-exception-background); border-image: linear-gradient( to right, var(--ck-color-restricted-editing-selected-exception-brackets) 0%, var(--ck-color-restricted-editing-selected-exception-brackets) 5px, var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-selected-exception-brackets) 100% ) 1; } &.restricted-editing-exception_collapsed { /* Empty exception should have the same width as exception with at least 1 char */ padding-left: 1ch; } } .ck-restricted-editing_mode_restricted { cursor: default; /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text during the pointer movement. */ & * { cursor: default; } & .restricted-editing-exception { cursor: text; & * { cursor: text; } &:hover { background: var(--ck-color-restricted-editing-exception-hover-background); } } }