You are here

ckeditor-editor.css in Drupal 10

CKEditor appearance overrides.

File

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