@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-find-and-replace/findandreplaceform.css

A bright theme for CKEditor 5.

/*
 * Copyright (c) 2003-2024, 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";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-find-and-replace-form {
	width: 400px;

	/*
	 * The <form> needs tabindex="-1" for proper Esc handling after being clicked
	 * but the side effect is that this creates a nasty focus outline in some browsers.
	 */
	&:focus {
		outline: none;
	}

	/* Generic styles for the form inputs and actions. */
	& .ck-find-and-replace-form__inputs,
	& .ck-find-and-replace-form__actions {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-content: stretch;

		padding: var(--ck-spacing-large);
		margin: 0;

		& > .ck-button {
			flex: 0 0 auto;
		}

		@mixin ck-dir ltr {
			& > * + * {
				margin-left: var(--ck-spacing-standard);
			}
		}

		@mixin ck-dir rtl {
			& > * + * {
				margin-right: var(--ck-spacing-standard);
			}
		}

		& .ck-labeled-field-view {
			flex: 1 1 auto;

			& .ck-input {
				width: 100%;
				min-width: 50px;
			}
		}

	}

	/* Styles specific for inputs area. */
	& .ck-find-and-replace-form__inputs {
		/* To display all controls in line when there's an error under the input */
		align-items: flex-start;

		& > .ck-button-prev > .ck-icon {
			transform: rotate(90deg);
		}

		& > .ck-button-next > .ck-icon {
			transform: rotate(-90deg);
		}

		& .ck-results-counter {
			top: 50%;
			transform: translateY(-50%);

			@mixin ck-dir ltr {
				right: var(--ck-spacing-standard);
			}

			@mixin ck-dir rtl {
				left: var(--ck-spacing-standard);
			}

			color: var(--ck-color-base-border);
		}

		& > .ck-labeled-field-replace {
			flex: 0 0 100%;
			padding-top: var(--ck-spacing-standard);

			@mixin ck-dir ltr {
				margin-left: 0;
			}

			@mixin ck-dir rtl {
				margin-right: 0;
			}
		}
	}

	/* Styles specific for actions area. */
	& .ck-find-and-replace-form__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-top: calc( -1 * var(--ck-spacing-large) );

		& > .ck-button-find {
			font-weight: bold;

			/* Beef the find button up a little. It's the main action button in the form */
			& .ck-button__label {
				padding-left: var(--ck-spacing-large);
				padding-right: var(--ck-spacing-large);
			}
		}
	}

	& .ck-switchbutton {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
}

@mixin ck-media-phone {
	.ck.ck-find-and-replace-form {
		width: 300px;

		/* Don't let the form overflow from the dialog (https://github.com/cksource/ckeditor5-commercial/issues/5913) */
		max-width: 100%;

		/* Styles specific for inputs area. */
		&.ck-find-and-replace-form__input {
			flex-wrap: wrap;

			& .ck-labeled-field-view {
				flex: 1 0 auto;
				width: 100%;
				margin-bottom: var(--ck-spacing-standard);
			}

			& > .ck-button {
				text-align: center;

				&:first-of-type {
					flex: 1 1 auto;

					@mixin ck-dir ltr {
						margin-left: 0;
					}

					@mixin ck-dir rtl {
						margin-right: 0;
					}

					& .ck-button__label {
						width: 100%;
						text-align: center;
					}
				}
			}
		}

		/* Styles specific for actions area. */
		&.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) {
			flex-wrap: wrap;
			flex: 1 1 auto;

			& > .ck-button {
				text-align: center;

				&:first-of-type {
					flex: 1 1 auto;

					@mixin ck-dir ltr {
						margin-left: 0;
					}

					@mixin ck-dir rtl {
						margin-right: 0;
					}
				}

				& .ck-button__label {
					width: 100%;
					text-align: center;
				}
			}
		}
	}
}