mediawiki-extensions-CodeMirror/resources/codemirror.less

@import 'mediawiki.skin.variables.less';

.cm-editor {
	border: @border-width-base @border-style-base @border-color-subtle;

	.cm-selectionBackground {
		background: #d9d9d9;

		@media screen {
			html.skin-theme-clientpref-night & {
				background: #222;
			}
		}

		@media screen and ( prefers-color-scheme: dark ) {
			html.skin-theme-clientpref-os & {
				background: #222;
			}
		}
	}

	&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
		background: #d7d4f0;

		@media screen {
			html.skin-theme-clientpref-night & {
				background: #233;
			}
		}

		@media screen and ( prefers-color-scheme: dark ) {
			html.skin-theme-clientpref-os & {
				background: #233;
			}
		}
	}
}

.cm-matchingBracket,
.cm-focused .cm-matchingBracket {
	background-color: #eee;
	box-shadow: inset 0 0 1px 1px #999;
	font-weight: bold;
}

.cm-editor .cm-specialChar {
	color: @color-destructive--hover;
}

.cm-special-char-nbsp {
	color: @color-placeholder;
}

.cm-tooltip-fold {
	cursor: @cursor-base--hover;
	line-height: 1.2;
	padding: 0 1px;
}

.cm-editor .cm-foldPlaceholder {
	background-color: @background-color-interactive;
	border-color: @border-color-subtle;
	color: @color-base;
}

.cm-bidi-isolate {
	/* @noflip */
	direction: ltr;
	unicode-bidi: isolate;
}

.ext-codemirror-wrapper {
	height: 100%;
}

// The various .cm-editor prefixed styles are required to have higher
// specificity than CodeMirror's default styles, which are set by JS.
.cm-editor .cm-gutters {
	background-color: @background-color-interactive-subtle;
	border-right-color: @border-color-subtle;
	color: @color-subtle;
}

.cm-editor .cm-cursor {
	border-left-color: @color-emphasized;
}

.cm-editor .cm-tooltip {
	background-color: @background-color-neutral-subtle;
	border-color: @border-color-base;
}

.cm-editor .cm-panels {
	background-color: @background-color-neutral-subtle;
	border-bottom: 0;
	color: @color-base;
	z-index: @z-index-above-content;

	.cdx-button-group {
		.cdx-button,
		.cdx-toggle-button {
			min-width: @min-width-toggle-switch;
		}
	}

	.cm-mw-panel {
		border-bottom: @border-style-base @border-width-base @border-color-subtle;
		padding: @spacing-50;
	}

	.cm-mw-panel--text-input {
		flex-basis: 0;
		flex-grow: 1;
	}

	.cm-mw-panel--row {
		align-items: center;
		column-gap: @spacing-50;
		display: flex;

		&:not( :last-child ) {
			margin-bottom: @spacing-50;
		}
	}

	.cm-mw-panel--button {
		margin-bottom: 0;
	}

	.cm-mw-panel--toggle-button.cdx-toggle-button--toggled-on {
		&:enabled:active {
			background-color: @color-progressive--active;
		}

		.cdx-icon {
			background-color: @color-inverted;
		}
	}
}

.cm-mw-find-results {
	color: @color-placeholder;
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY( -50% );
}

.cm-mw-icon--match-case {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-search-case-sensitive, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--regexp {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-search-regular-expression, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--quotes {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-quotes, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--previous {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-previous, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--next {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-next, @color-base, @size-icon-medium, true );
}