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

Template feature for CKEditor 5.

/**
 * @license 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
 */
: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 (max-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);
			overflow-x:hidden;
			overflow-y:auto;
			overscroll-behavior:contain;
		}

.ck-rounded-corners .ck.ck-template-form > .ck-search__results > .ck.ck-list.ck-template-list{
				border-radius:0;
			}

.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{
					width:100%;
					margin:0;
					padding:0;
					border-radius:var(--ck-border-radius);
					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";
				}

.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);
						height:auto;
						grid-area:ck-template-icon;
						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{
						display:flex;
						flex-direction:column;
						justify-content:space-evenly;
						height:100%;
						grid-area:ck-template-content;
						min-width:0;
						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 > .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.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{
							display:-webkit-box;
							font-size:0.85em;
							color:var(--ck-color-text);
							line-height:1.1;
							margin-top:var(--ck-spacing-tiny);

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

.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;
						}