ckeditor-editor.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/theme/ckeditor-editor.pcss.css

CKEditor appearance overrides.

File

core/themes/claro/css/theme/ckeditor-editor.pcss.css

View source
  1. /**
  2. * @file
  3. * CKEditor appearance overrides.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. --ckeditor-chrome-border-size: var(--input-border-size); /* 1px */
  8. --ckeditor-chrome-border-radius: var(--base-border-radius);
  9. /* Inner border size must be based on chrome border size. */
  10. --ckeditor-inner-border-size: calc(var(--input--error-border-size) - var(--ckeditor-chrome-border-size)); /* 1px */
  11. /* Inner border radius must be based on chrome border radius and size. */
  12. --ckeditor-inner-border-radius: calc(var(--ckeditor-chrome-border-radius) - var(--ckeditor-chrome-border-size));
  13. }
  14. .cke.cke_chrome {
  15. border-width: var(--ckeditor-chrome-border-size);
  16. border-radius: var(--ckeditor-chrome-border-radius);
  17. }
  18. .cke .cke_inner {
  19. border-radius: var(--ckeditor-inner-border-radius);
  20. }
  21. .cke_path_empty:only-child::after {
  22. position: absolute;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. left: 0;
  27. content: "";
  28. background: var(--input-bg-color);
  29. }
  30. .cke .cke_top {
  31. border: var(--ckeditor-inner-border-size) solid transparent;
  32. border-bottom: 0;
  33. border-radius: var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size) 0 0;
  34. }
  35. .cke .cke_contents {
  36. border: var(--ckeditor-inner-border-size) solid transparent;
  37. border-top: 0;
  38. border-bottom: 0;
  39. }
  40. .cke .cke_bottom {
  41. border: var(--ckeditor-inner-border-size) solid transparent;
  42. border-top: 0;
  43. border-radius: 0 0 var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size);
  44. }
  45. /* Default */
  46. .cke.cke_chrome {
  47. border-color: var(--input-border-color);
  48. }
  49. /* Hover. */
  50. .cke.cke_chrome:hover,
  51. .cke:hover .cke_contents,
  52. .cke:hover .cke_top,
  53. .cke:hover .cke_bottom {
  54. border-color: var(--input--hover-border-color);
  55. }
  56. /* Focus. */
  57. .cke.cke_chrome.cke_focus {
  58. outline: var(--focus-outline);
  59. box-shadow: var(--focus-box-shadow);
  60. }
  61. /* Error. */
  62. .error + .cke.cke_chrome,
  63. .error + .cke .cke_contents,
  64. .error + .cke .cke_top,
  65. .error + .cke .cke_bottom {
  66. border-color: var(--input--error-border-color);
  67. }
  68. /* Disabled. */
  69. [disabled] + .cke.cke_chrome {
  70. border-color: var(--input--disabled-border-color);
  71. }
  72. [disabled] + .cke .cke_contents,
  73. [disabled] + .cke .cke_top,
  74. [disabled] + .cke .cke_bottom {
  75. border-color: transparent;
  76. }
  77. [disabled] + .cke .cke_contents {
  78. border-color: var(--input--disabled-bg-color);
  79. background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
  80. }
  81. [disabled] + .cke iframe,
  82. [disabled] + .cke .cke_source {
  83. opacity: 0.505;
  84. }
  85. [disabled] + .cke .cke_bottom {
  86. background: var(--input--disabled-bg-color);
  87. }
  88. [disabled] + .cke .cke_bottom > * {
  89. /* Don't show element path dor disabled editor. */
  90. opacity: 0;
  91. }
  92. [disabled] + .cke .cke_path_empty::after {
  93. content: none;
  94. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.