@ckeditor/ckeditor5-template/theme/template.css

Template feature for CKEditor 5.

/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";

:root {
	--ck-template-dropdown-view-width: 345px;
	--ck-template-dropdown-view-height: 300px;
	--ck-template-icon-size: 45px;
}

/* Override default rules for icons to allow any fill color. */
.ck-button.ck-template-button {
	& .ck.ck-icon {
		color: unset;

		& * {
			color: unset;

			&:not([fill]) {
				fill: unset;
			}
		}
	}
}

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

	@mixin ck-media-phone {
		--ck-template-dropdown-view-width: 260px;
	}

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

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

		& > .ck.ck-list.ck-template-list {
			max-height: var(--ck-template-dropdown-view-height);
			padding: var(--ck-spacing-large);
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;

			/*
			* This is a dirty way to increase the selector specificity and override the default rounded corners
			* of a list inside a dropdown panel
			*/
			.ck-rounded-corners & {
				border-radius: 0;
			}

			& > .ck.ck-list__item {
				/* This is an easy way to address the problem of spacings between hidden and visible list items */
				&:not(.ck-hidden) ~ .ck.ck-list__item {
					margin-top: var(--ck-spacing-large);
				}

				& > .ck.ck-button {
					width: 100%;
					margin: 0;
					padding: 0;
					border-radius: var(--ck-border-radius);

					/* Crop the icon when the border-radius is large */
					overflow: hidden;

					display: grid;
					grid-template-columns: var(--ck-template-icon-size) 1fr;
					grid-template-rows: var(--ck-template-icon-size);
					grid-auto-columns: 1fr;

					gap: var(--ck-spacing-large) var(--ck-spacing-large);
					grid-auto-flow: column dense;
					align-items: center;
					grid-template-areas: "ck-template-icon ck-template-content";

					&:not(:focus) {
						border-color: var(--ck-color-dropdown-panel-background);
					}

					& > .ck.ck-icon {
						width: var(--ck-template-icon-size);
						height: auto;
						grid-area: ck-template-icon;
						margin: 0;
					}

					& > .ck-template-form__text-part {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						height: 100%;
						grid-area: ck-template-content;
						min-width: 0;
						margin: 0;

						& > .ck.ck-button__label {
							display: block;
							font-weight: bold;
							font-size: var(--ck-font-size-base);
							color: var(--ck-color-text);
							line-height: 1.1;

							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						& .ck-template-form__description {
							display: -webkit-box;
							font-size: 0.85em;
							color: var(--ck-color-text);
							line-height: 1.1;

							/* Leave some tiny spacing between title and description. */
							margin-top: var(--ck-spacing-tiny);

							white-space: normal;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						& mark {
							background: var(--ck-color-highlight-background);
							vertical-align: initial;
							font-weight: inherit;
							line-height: inherit;
							font-size: inherit;
						}
					}
				}
			}
		}
	}
}