restrictedediting.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. :root {
  6. --ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
  7. --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
  8. --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
  9. --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
  10. --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
  11. }
  12. .ck-editor__editable .restricted-editing-exception {
  13. transition: .2s ease-in-out background;
  14. background-color: var(--ck-color-restricted-editing-exception-background);
  15. border: 1px solid;
  16. border-image: linear-gradient(
  17. to right,
  18. var(--ck-color-restricted-editing-exception-brackets) 0%,
  19. var(--ck-color-restricted-editing-exception-brackets) 5px,
  20. hsla(0, 0%, 0%, 0) 6px,
  21. hsla(0, 0%, 0%, 0) calc(100% - 6px),
  22. var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px),
  23. var(--ck-color-restricted-editing-exception-brackets) 100%
  24. ) 1;
  25. &.restricted-editing-exception_selected {
  26. background-color: var(--ck-color-restricted-editing-selected-exception-background);
  27. border-image: linear-gradient(
  28. to right,
  29. var(--ck-color-restricted-editing-selected-exception-brackets) 0%,
  30. var(--ck-color-restricted-editing-selected-exception-brackets) 5px,
  31. var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px),
  32. var(--ck-color-restricted-editing-selected-exception-brackets) 100%
  33. ) 1;
  34. }
  35. &.restricted-editing-exception_collapsed {
  36. /* Empty exception should have the same width as exception with at least 1 char */
  37. padding-left: 1ch;
  38. }
  39. }
  40. .ck-restricted-editing_mode_restricted {
  41. cursor: default;
  42. /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text
  43. during the pointer movement. */
  44. & * {
  45. cursor: default;
  46. }
  47. & .restricted-editing-exception {
  48. cursor: text;
  49. & * {
  50. cursor: text;
  51. }
  52. &:hover {
  53. background: var(--ck-color-restricted-editing-exception-hover-background);
  54. }
  55. }
  56. }