@ckeditor/ckeditor5-template/dist/index-editor.css

Template feature for CKEditor 5.

/**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
:root{
  --ck-template-dropdown-view-width:345px;
  --ck-template-dropdown-view-height:300px;
  --ck-template-icon-size:45px;
}

.ck-button.ck-template-button .ck.ck-icon{
  color:unset;
}

.ck-button.ck-template-button .ck.ck-icon *{
  color:unset;
}

.ck-button.ck-template-button .ck.ck-icon *:not([fill]){
  fill:unset;
}

.ck.ck-template-form{
  width:var(--ck-template-dropdown-view-width);
}

@media screen and (width <= 600px){
  .ck.ck-template-form{
    --ck-template-dropdown-view-width:260px;
  }
}

.ck.ck-template-form > .ck-labeled-field-view{
  padding:var(--ck-spacing-large);
}

.ck.ck-template-form > .ck-search__results{
  border-top:1px solid var(--ck-color-base-border);
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list{
  max-height:var(--ck-template-dropdown-view-height);
  padding:var(--ck-spacing-large);
  overscroll-behavior:contain;
  border-radius:0;
  overflow:hidden auto;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item:not(.ck-hidden) ~ .ck.ck-list__item{
  margin-top:var(--ck-spacing-large);
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button{
  border-radius:var(--ck-border-radius);
  grid-template-columns:var(--ck-template-icon-size) 1fr;
  grid-template-rows:var(--ck-template-icon-size);
  gap:var(--ck-spacing-large) var(--ck-spacing-large);
  grid-template-areas:"ck-template-icon ck-template-content";
  grid-auto-columns:1fr;
  grid-auto-flow:column dense;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
  display:grid;
  overflow:hidden;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button:not(:focus){
  border-color:var(--ck-color-dropdown-panel-background);
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button > .ck.ck-icon{
  width:var(--ck-template-icon-size);
  grid-area:ck-template-icon;
  height:auto;
  margin:0;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button > .ck-template-form__text-part{
  flex-direction:column;
  grid-area:ck-template-content;
  justify-content:space-evenly;
  min-width:0;
  height:100%;
  margin:0;
  display:flex;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button > .ck-template-form__text-part > .ck.ck-button__label{
  font-weight:bold;
  font-size:var(--ck-font-size-base);
  color:var(--ck-color-text);
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.1;
  display:block;
  overflow:hidden;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button > .ck-template-form__text-part .ck-template-form__description{
  color:var(--ck-color-text);
  margin-top:var(--ck-spacing-tiny);
  white-space:normal;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:.85em;
  line-height:1.1;
  display:-webkit-box;
  overflow:hidden;
}

.ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list > .ck.ck-list__item > .ck.ck-button > .ck-template-form__text-part mark{
  background:var(--ck-color-highlight-background);
  vertical-align:initial;
  font-weight:inherit;
  line-height:inherit;
  font-size:inherit;
}