@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tablecellproperties-experimental.css

A bright theme for CKEditor 5.

/*
 * 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
 */

.ck.ck-table-cell-properties-form {
	width: 320px;

	&.ck-table-cell-properties-form_experimental {
		--ck-table-form-default-input-width: 80px;

		& .ck-form__row {
			&.ck-table-cell-properties-form__padding-row {
				align-self: flex-end;
				padding: 0;
				width: 25%;
			}

			&.ck-table-cell-properties-form__alignment-row {
				& .ck.ck-toolbar {
					background: none;

					/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
					margin-top: var(--ck-spacing-standard);
				}
			}

			&.ck-table-form__border-row {
				& .ck-labeled-field-view {
					& > .ck-label {
						font-size: var(--ck-font-size-tiny);
						text-align: center;
					}
				}

				& .ck-table-form__border-style,
				& .ck-table-form__border-width {
					width: 80px;
					min-width: 80px;
					max-width: 80px;
				}
			}

			&.ck-table-form__dimensions-row {
				padding: 0;

				& .ck-table-form__dimensions-row__width,
				& .ck-table-form__dimensions-row__height {
					margin: 0
				}

				& .ck-table-form__dimension-operator {
					align-self: flex-end;
					display: inline-block;
					height: var(--ck-ui-component-min-height);
					line-height: var(--ck-ui-component-min-height);
					margin: 0 var(--ck-spacing-small);
				}
			}

			&.ck-form__row.ck-table-form__action-row {
				& > .ck.ck-button {
					flex-grow: initial;

					& .ck-button__label {
						color: currentColor;
					}
				}
			}
		}

		&.ck-table-cell-properties-form_experimental-no-cell-type {
			& .ck-form__row {
				&.ck-table-form__dimensions-row {
					--ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));

					width: var(--ck-table-form-dimensions-input-width);
					max-width: var(--ck-table-form-dimensions-input-width);
					min-width: var(--ck-table-form-dimensions-input-width);
					padding: 0;

					& .ck-table-form__dimensions-row__width,
					& .ck-table-form__dimensions-row__height {
						width: var(--ck-table-form-default-input-width);
						min-width: var(--ck-table-form-default-input-width);
						max-width: var(--ck-table-form-default-input-width);
						margin: 0
					}

					& .ck-table-form__dimension-operator {
						position: relative;
						left: -0.5ch;
						width: 0;
						overflow: visible;
						align-self: flex-end;
						display: inline-block;
						height: var(--ck-ui-component-min-height);
						line-height: var(--ck-ui-component-min-height);
						margin: 0 var(--ck-spacing-small);
					}
				}

				&.ck-table-form__cell-type-row {
					--ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));

					width: var(--ck-table-form-dimensions-input-width);
					max-width: var(--ck-table-form-dimensions-input-width);
					min-width: var(--ck-table-form-dimensions-input-width);
					padding: 0;
				}

				&.ck-table-cell-properties-form__alignment-row {
					& .ck.ck-toolbar {
						&.ck-table-cell-properties-form__horizontal-alignment-toolbar {
							--ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));

							width: var(--ck-table-form-dimensions-input-width);
							max-width: var(--ck-table-form-dimensions-input-width);
							min-width: var(--ck-table-form-dimensions-input-width);
							padding: 0;
						}

						&.ck-table-cell-properties-form__vertical-alignment-toolbar {
							flex-grow: 1;
						}
					}
				}
			}
		}
	}
}