@ckeditor/ckeditor5-template/dist/index.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;
}