mediawiki-skins-Citizen/skinStyles/extensions/WikiEditor/ext.wikiEditor.less

/*
 * Citizen
 *
 * SkinStyles for Extension:WikiEditor
 * Module: ext.wikiEditor
 * Version: REL1_35 e18315e
 *
 * Date: 2021-08-11
*/

/* jquery.wikiEditor.less */
.wikiEditor-ui {
	.wikiEditor-ui-view {
		border-color: var( --border-color-base );
	}

	.wikiEditor-ui-top {
		border-color: var( --border-color-base );
	}

	.wikiEditor-ui-right {
		background: var( --color-surface-2 );
	}
}

.wikiEditor-ui-controls {
	background-color: var( --color-surface-1 );
}

.wikiEditor-ui-tabs {
	border-top-color: var( --border-color-base );
	border-left-color: var( --border-color-base );
	background-color: var( --color-surface-1 );

	div {
		border-right-color: var( --border-color-base );
		border-bottom-color: var( --border-color-base );
		background-color: var( --color-surface-2 );

		a {
			color: var( --color-link );
		}

		&.current {
			border-bottom-color: var( --color-surface-1 );
			background-color: var( --color-surface-1 );

			a {
				color: var( --color-base );
			}
		}
	}
}

.wikiEditor-ui-buttons {
	border-top-color: var( --color-surface-1 );
	background-color: var( --color-surface-1 );
}

.wikiEditor-ui-loading {
	border-color: var( --border-color-base );
	background: var( --color-surface-2 );
}

/* jquery.wikiEditor.toolbar.less */
.wikiEditor-ui-toolbar {
	.sections {
		.section {
			border-top-color: var( --border-color-base );
		}
	}

	.tabs {
		span.tab {
			a {
				color: var( --color-link );
			}

			a:visited {
				color: var( --color-link );
			}

			a.current,
			a.current:visited {
				color: var( --color-base );
			}
		}
	}

	.group {
		border-right-color: var( --border-color-base );

		.label {
			color: var( --color-base--subtle );
		}

		.tool-select {
			border-color: var( --border-color-base );
			background-color: var( --color-surface-1 );

			.label {
				color: var( --color-base );
			}

			.options {
				border-color: var( --border-color-base );
				background-color: var( --color-surface-1 );

				.option {
					color: var( --color-base--emphasized );

					&:hover {
						background-color: var( --background-color-primary--hover );
					}
				}
			}
		}
	}

	.group-search {
		border-left-color: var( --border-color-base );
	}

	.booklet {
		> .index {
			.wikiEditor-character-highlighted {
				background-color: var( --background-color-primary--active );
				color: var( --color-base--emphasized );
			}
		}
	}

	.page-table {
		th {
			color: var( --color-base--subtle );
		}

		td {
			border-top-color: var( --border-color-base );
			color: var( --color-base--emphasized );
		}
	}

	.page-characters {
		div {
			span {
				border-color: var( --border-color-base );
				color: var( --color-base );

				&:hover {
					border-color: var( --border-color-base );
					background-color: var( --background-color-quiet--hover );
				}

				&:active {
					background-color: var( --background-color-quiet--active );
				}
			}

			.wikiEditor-character-highlighted {
				background-color: var( --background-color-primary--hover );
				color: var( --color-base--emphasized );
			}
		}
	}
}

.ui-widget {
	table {
		td.wikieditor-toolbar-table-preview-wrapper {
			background: var( --color-surface-2 );
		}

		.wikieditor-toolbar-table-preview-frame {
			background: var( --color-surface-0 );
		}
	}
}

/* jquery.wikiEditor.dialogs.config.less */
.wikiEditor-template-dialog-fields {
	.wikiEditor-template-dialog-field-wrapper {
		border-bottom-color: var( --border-color-base );
	}
}

/* jquery.wikiEditor.toolbar-wikimedia.less */
/* stylelint-disable no-duplicate-selectors */
.wikiEditor-ui-toolbar {
	background-color: var( --color-surface-2 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); // boxshadow 1

	/* Groups */
	.group {
		border-color: var( --border-color-base );

		.tool-select {
			.menu .options {
				box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); // boxshadow 1

				.option {
					&:hover {
						background-color: var( --background-color-quiet--hover );
					}

					&:active {
						background-color: var( --background-color-quiet--active );
					}
				}
			}
		}
	}

	.booklet {
		> .index {
			> :hover {
				background-color: var( --background-color-quiet--hover );
			}

			> :active {
				background-color: var( --background-color-quiet--active );
			}

			> .current {
				background-color: var( --background-color-primary--hover );
				color: var( --color-primary );
			}
		}
	}
}

.tool-button,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
	&:hover {
		background-color: var( --background-color-quiet--hover );

		> .oo-ui-iconElement-icon {
			opacity: var( --opacity-icon-base--hover );
		}
	}

	&.tool-active {
		background-color: var( --background-color-primary--hover );
	}
}

.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
	opacity: var( --opacity-icon-base );
}
/* stylelint-enable no-duplicate-selectors */

// Dark mode icons
.skin-citizen-dark {
	.wikiEditor-ui-toolbar .tabs span.tab a:before {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}