8
0

restrictedediting.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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 .restricted-editing-exception {
  41. cursor: text;
  42. & * {
  43. cursor: text;
  44. }
  45. &:hover {
  46. background: var(--ck-color-restricted-editing-exception-hover-background);
  47. }
  48. }
  49. .ck-restricted-editing_mode_restricted {
  50. cursor: default;
  51. /* For some reason, we also need to override user agent styles for links inside the editor. */
  52. & *:not(.restricted-editing-exception) {
  53. cursor: default;
  54. }
  55. }