ckeditor5.css

Same filename in this branch
  1. main core/themes/claro/css/components/ckeditor5.css
  2. main core/themes/admin/css/components/ckeditor5.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/ckeditor5.css
  2. 11.x core/themes/claro/css/components/ckeditor5.css
  3. 11.x core/themes/admin/migration/css/components/ckeditor5.css
  4. 11.x core/themes/admin/css/components/ckeditor5.css
/* cspell:ignore fullscreeneditor */
.ck {
  --ck-color-text: var(--gin-color-text);
  --ck-content-font-color: var(--gin-color-text);
  --ck-color-toolbar-background: var(--gin-bg-layer3);
  --ck-color-toolbar-border: var(--gin-border-color-form-element);
  --ck-color-base-foreground: var(--gin-bg-layer3);
  --ck-color-base-background: var(--gin-bg-input);
  --ck-color-base-border: var(--ck-color-toolbar-border);
  --ck-color-list-button-on-text: var(--gin-color-button-text);
  --ck-color-list-button-on-background: var(--gin-color-primary);
  --ck-color-list-button-on-background-focus: var(--gin-color-primary-hover);
  --ck-color-list-button-hover-background: var(--gin-color-primary-light-hover);
  --ck-color-panel-background: var(--gin-bg-layer3);
  --ck-color-panel-border: transparent;
  --ck-color-dialog-background: var(--gin-bg-layer3);
  --ck-color-dialog-form-header-border: var(--gin-border-color-form-element);
  --ck-accessibility-help-dialog-code-background-color: var(--gin-bg-layer4);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--gin-color-primary-light);
  --ck-color-button-default-active-background: var(--gin-color-primary-light-active);
  --ck-color-button-default-disabled-background: transparent;
  --ck-color-button-on-color: var(--gin-color-primary);
  --ck-color-button-on-background: var(--gin-color-primary-light);
  --ck-color-button-on-hover-background: var(--gin-color-primary-light-hover);
  --ck-color-button-on-active-background: var(--gin-color-primary-active);
  --ck-color-split-button-hover-background: var(--gin-bg-layer2);
  --ck-color-split-button-hover-border: var(--gin-border-color-layer);
  --ck-color-button-save: var(--gin-color-green);
  --ck-color-button-cancel: var(--gin-color-danger);
  --ck-color-link-default: var(--gin-color-primary);
  --ck-color-link-selected-background: var(--gin-bg-item-hover);
  --ck-color-input-background: var(--gin-bg-input);
  --ck-color-input-border: var(--gin-border-color-form-element);
  --ck-color-labeled-field-label-background: var(--gin-bg-layer3);
  --ck-color-list-background: var(--gin-bg-layer3);
  --ck-focus-ring: 1px solid var(--gin-color-focus);
  --ck-focus-outer-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
  --ck-inner-shadow: var(--ck-focus-outer-shadow);
  --ck-drop-shadow: var(--gin-shadow-l2);
  --ck-color-focus-border: var(--gin-color-primary);
  --ck-color-widget-type-around-button-active: var(--gin-color-primary);
  --ck-color-widget-blurred-border: var(--gin-color-primary-hover);
  --ck-color-widget-hover-border: var(--gin-color-text);
  --ck-color-widget-type-around-button-hover: var(--gin-color-text);
  --ck-color-image-caption-text: var(--gin-color-text-light);
  --ck-color-image-caption-background: transparent;
  --ck-border-radius: var(--gin-border-m);
  --ck-style-panel-button-label-background: var(--gin-bg-layer4);
  --ck-style-panel-button-hover-label-background: var(--gin-bg-layer4);
  --ck-style-panel-button-hover-border-color: var(--gin-color-primary);

  .ck-style-grid__button__preview {
    border-top-left-radius: var(--ck-border-radius);
    border-top-right-radius: var(--ck-border-radius);
  }

  .ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
    border-bottom-right-radius: var(--ck-border-radius);
    border-bottom-left-radius: var(--ck-border-radius);
  }

  .ck-dropdown__panel {
    --ck-color-dropdown-panel-background: var(--gin-bg-input);
  }
}

.ck .ck-content blockquote,
.ck .ck.ck-dropdown__panel {
  border: none;
}

.ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
  z-index: 2;
  inset-block-start: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;
}

.ck[data-fullscreen="fullscreeneditor"] .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
  inset-block-start: 0 !important;
}

.ck .ck-toolbar__separator {
  opacity: 0.3;
}

.ck .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.ck .ck-toolbar_grouping:focus,
.ck .ck-toolbar__items:focus {
  box-shadow: none;
}

.ck .ck.ck-editor__editable_inline {
  padding: 0 var(--gin-spacing-s);
}

.ck .ck.ck-content {
  padding-bottom: var(--gin-spacing-l);
}

.ck .ck-button[aria-pressed="true"] {
  color: var(--gin-color-primary-active);
  border: 2px solid var(--gin-color-primary);
}

.ck .ck-button.ck-source-editing-button {
  padding-inline-start: var(--gin-spacing-m);
}

.ck.ck-button:not(.ck-disabled):hover {
  color: var(--gin-color-primary-active);
}

.ck .ck-source-editing-area {
  overflow: inherit;
}

.ck textarea {
  color: var(--ck-color-text);
  background: var(--ck-color-base-background);
}

.ck textarea:focus {
  outline: none;
  box-shadow: var(--ck-focus-outer-shadow);
}

.ck .ck.ck-media-alternative-text-form .ck-button {
  border: none;
}

.ck .ck-content .drupal-media > figcaption {
  color: var(--ck-color-image-caption-text);
  background: var(--ck-color-image-caption-background);
}

.ck .ck.ck.ck-balloon-panel.ck-powered-by-balloon {
  z-index: 2;
  transform: translateY(-13px);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/ckeditor5.css

View source 
  1. /* cspell:ignore fullscreeneditor */

  2. .ck {

  3.   --ck-color-text: var(--gin-color-text);

  4.   --ck-content-font-color: var(--gin-color-text);

  5.   --ck-color-toolbar-background: var(--gin-bg-layer3);

  6.   --ck-color-toolbar-border: var(--gin-border-color-form-element);

  7.   --ck-color-base-foreground: var(--gin-bg-layer3);

  8.   --ck-color-base-background: var(--gin-bg-input);

  9.   --ck-color-base-border: var(--ck-color-toolbar-border);

  10.   --ck-color-list-button-on-text: var(--gin-color-button-text);

  11.   --ck-color-list-button-on-background: var(--gin-color-primary);

  12.   --ck-color-list-button-on-background-focus: var(--gin-color-primary-hover);

  13.   --ck-color-list-button-hover-background: var(--gin-color-primary-light-hover);

  14.   --ck-color-panel-background: var(--gin-bg-layer3);

  15.   --ck-color-panel-border: transparent;

  16.   --ck-color-dialog-background: var(--gin-bg-layer3);

  17.   --ck-color-dialog-form-header-border: var(--gin-border-color-form-element);

  18.   --ck-accessibility-help-dialog-code-background-color: var(--gin-bg-layer4);

  19.   --ck-color-button-default-background: transparent;

  20.   --ck-color-button-default-hover-background: var(--gin-color-primary-light);

  21.   --ck-color-button-default-active-background: var(--gin-color-primary-light-active);

  22.   --ck-color-button-default-disabled-background: transparent;

  23.   --ck-color-button-on-color: var(--gin-color-primary);

  24.   --ck-color-button-on-background: var(--gin-color-primary-light);

  25.   --ck-color-button-on-hover-background: var(--gin-color-primary-light-hover);

  26.   --ck-color-button-on-active-background: var(--gin-color-primary-active);

  27.   --ck-color-split-button-hover-background: var(--gin-bg-layer2);

  28.   --ck-color-split-button-hover-border: var(--gin-border-color-layer);

  29.   --ck-color-button-save: var(--gin-color-green);

  30.   --ck-color-button-cancel: var(--gin-color-danger);

  31.   --ck-color-link-default: var(--gin-color-primary);

  32.   --ck-color-link-selected-background: var(--gin-bg-item-hover);

  33.   --ck-color-input-background: var(--gin-bg-input);

  34.   --ck-color-input-border: var(--gin-border-color-form-element);

  35.   --ck-color-labeled-field-label-background: var(--gin-bg-layer3);

  36.   --ck-color-list-background: var(--gin-bg-layer3);

  37.   --ck-focus-ring: 1px solid var(--gin-color-focus);

  38.   --ck-focus-outer-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);

  39.   --ck-inner-shadow: var(--ck-focus-outer-shadow);

  40.   --ck-drop-shadow: var(--gin-shadow-l2);

  41.   --ck-color-focus-border: var(--gin-color-primary);

  42.   --ck-color-widget-type-around-button-active: var(--gin-color-primary);

  43.   --ck-color-widget-blurred-border: var(--gin-color-primary-hover);

  44.   --ck-color-widget-hover-border: var(--gin-color-text);

  45.   --ck-color-widget-type-around-button-hover: var(--gin-color-text);

  46.   --ck-color-image-caption-text: var(--gin-color-text-light);

  47.   --ck-color-image-caption-background: transparent;

  48.   --ck-border-radius: var(--gin-border-m);

  49.   --ck-style-panel-button-label-background: var(--gin-bg-layer4);

  50.   --ck-style-panel-button-hover-label-background: var(--gin-bg-layer4);

  51.   --ck-style-panel-button-hover-border-color: var(--gin-color-primary);

  52. 

  53.   .ck-style-grid__button__preview {

  54.     border-top-left-radius: var(--ck-border-radius);

  55.     border-top-right-radius: var(--ck-border-radius);

  56.   }

  57. 

  58.   .ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {

  59.     border-bottom-right-radius: var(--ck-border-radius);

  60.     border-bottom-left-radius: var(--ck-border-radius);

  61.   }

  62. 

  63.   .ck-dropdown__panel {

  64.     --ck-color-dropdown-panel-background: var(--gin-bg-input);

  65.   }

  66. }

  67. 

  68. .ck .ck-content blockquote,

  69. .ck .ck.ck-dropdown__panel {

  70.   border: none;

  71. }

  72. 

  73. .ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {

  74.   z-index: 2;

  75.   inset-block-start: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;

  76. }

  77. 

  78. .ck[data-fullscreen="fullscreeneditor"] .ck-sticky-panel__content.ck-sticky-panel__content_sticky {

  79.   inset-block-start: 0 !important;

  80. }

  81. 

  82. .ck .ck-toolbar__separator {

  83.   opacity: 0.3;

  84. }

  85. 

  86. .ck .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar {

  87.   border-end-start-radius: 0;

  88.   border-end-end-radius: 0;

  89. }

  90. 

  91. .ck .ck-toolbar_grouping:focus,

  92. .ck .ck-toolbar__items:focus {

  93.   box-shadow: none;

  94. }

  95. 

  96. .ck .ck.ck-editor__editable_inline {

  97.   padding: 0 var(--gin-spacing-s);

  98. }

  99. 

  100. .ck .ck.ck-content {

  101.   padding-bottom: var(--gin-spacing-l);

  102. }

  103. 

  104. .ck .ck-button[aria-pressed="true"] {

  105.   color: var(--gin-color-primary-active);

  106.   border: 2px solid var(--gin-color-primary);

  107. }

  108. 

  109. .ck .ck-button.ck-source-editing-button {

  110.   padding-inline-start: var(--gin-spacing-m);

  111. }

  112. 

  113. .ck.ck-button:not(.ck-disabled):hover {

  114.   color: var(--gin-color-primary-active);

  115. }

  116. 

  117. .ck .ck-source-editing-area {

  118.   overflow: inherit;

  119. }

  120. 

  121. .ck textarea {

  122.   color: var(--ck-color-text);

  123.   background: var(--ck-color-base-background);

  124. }

  125. 

  126. .ck textarea:focus {

  127.   outline: none;

  128.   box-shadow: var(--ck-focus-outer-shadow);

  129. }

  130. 

  131. .ck .ck.ck-media-alternative-text-form .ck-button {

  132.   border: none;

  133. }

  134. 

  135. .ck .ck-content .drupal-media > figcaption {

  136.   color: var(--ck-color-image-caption-text);

  137.   background: var(--ck-color-image-caption-background);

  138. }

  139. 

  140. .ck .ck.ck.ck-balloon-panel.ck-powered-by-balloon {

  141.   z-index: 2;

  142.   transform: translateY(-13px);

  143. }

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