mediawiki-skins-Citizen/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less

/*
 * Citizen - Visual Editor Styles
 * https://starcitizen.tools
*/

@import '../../../resources/variables.less';

.ve-activated {
	.mw-header {
		background-color: @header-background-color-light;
	}

	#mw-header-background {
		box-shadow: none;
	}

	.mw-sidebar-sitename {
		margin-top: 42px;
	}

	.mw-body {
		z-index: 9; // Higher than footer
	}

	#page-tools {
		z-index: 1; // Fix collision
		pointer-events: auto;
		opacity: 1;
	}

	#mw-bottombar {
		display: none;
	}
}

.ve-ui {
	&-overlay {
		font-family: @fonts;

		&-global {
			z-index: 12; // Higher than header
		}

		&-surface {
			&-placeholder,
			.ve-ce-documentNode {
				padding: 0;
			}
		}
	}
}

// Fix weird compressed text bug
.ve-init-mw-tempWikitextEditorWidget {
	width: 100% !important;
}

// Make toolbar more mobile friendly
// Well at least I did by best
.ve-init-mw-desktopArticleTarget {
	&-toolbar {
		margin: -20px -20px 20px -20px !important; // Bypass @media screen styles

		&-open {
			.oo-ui-toolbar-bar {
				transition: @transition-transform !important;
			}
		}

		> .oo-ui-toolbar-bar {
			> .oo-ui-toolbar-tools {
				white-space: nowrap;
				overflow: auto;
				display: block;
			}
		}
	}

	.CodeMirror {
		padding: 0;
		line-height: @content-line-height; // Lining up syntax highlighter

		&-code * {
			line-height: @content-line-height; // Lining up syntax highlighter
		}
	}

	.ve-ui-mwWikitextSurface .ve-ce-paragraphNode {
		line-height: @content-line-height; // Lining up syntax highlighter
	}
}

@media ( prefers-color-scheme: dark ) {
	.ve-activated {
		.mw-header {
			background-color: @header-background-color-dark;
		}
	}

	.ve-init-mw-desktopArticleTarget .CodeMirror {
		color: @dark-text-90;
	}
}