MediaWiki:Vector-darkmode.less/visualeditor.less

//

/* ==========================
          VisualEditor
   ========================== */

/* ------------------
      article area
   ------------------ */

.ve-active #content {

	// most of the text colors (body, templates, toolbar)
	.oo-ui-widget,
	// hidden comments
	.ve-ui-commentContextItem .ve-ui-linearContextItem-body {
		color: @ooui-text;
	}

	// toolbar
	.oo-ui-toolbar-bar {
		background-color: @ooui-interface;
	}

	// toolbar icons
	.oo-ui-iconElement-icon,
	// toolbar dropdown arrow
	.oo-ui-indicatorElement-indicator,
	// (!) icon next to hidden comments
	.oo-ui-icon-notice,
	.mw-ui-icon-notice:before {
		filter: invert(100%);
	}

    // undo invert on certain icons
    .oo-ui-iconElement-icon.oo-ui-icon-cancel,
    // image preview when link is clicked
    .ve-ui-mwInternalLinkContextItem-withImage .oo-ui-iconElement-icon {
        filter: invert(0%);
    }

	// when a link is selected	
	.ve-ce-linkAnnotation-active {
		background: @cloud-burst;
        box-shadow: 0 0 0 1px @pickled-bluewood;
	}

	// toolbar cite icon when link is selected
	.oo-ui-tool:not(.oo-ui-toolGroupTool).oo-ui-tool-active {
		background: @ooui-normal;
	}

	// hovering over toolbar buttons
	.oo-ui-popupToolGroup-handle:hover,
	.oo-ui-tool:not(.oo-ui-toolGroupTool).oo-ui-widget-enabled:hover {
		background: @ooui-normal--hover;
	}

	// toolbar button when dropdown is open
	.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
		background: @ooui-normal;
	}

	// selected option in dropdown
	.oo-ui-menuToolGroup .oo-ui-tool.oo-ui-tool-active,
	.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
		background: @ooui-normal--hover;
	}

	// dropdown
	.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
		background: @ooui-interface;
		border-color: @ooui-interface-border;
	}

	// dropdown option text
	.oo-ui-tool-title {
		color: @ooui-text;
	}

	// dropdown shortcut info on right
	.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
		color: fade( @ooui-text, 50% );
	}

	// toolbar borders
	.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
		border-bottom-color: @ooui-interface-border;
	}

	// left-hand tool group
	.oo-ui-toolGroup {
		border-right-color: @ooui-interface-border;
	}

	// right-hand tool group
	.oo-ui-toolbar-actions .oo-ui-toolGroup {
		border-left-color: @ooui-interface-border;
	}

	// border between right-hand tool group and save button
	.oo-ui-toolbar-actions > .oo-ui-toolbar:not(:last-child) {
		border-right-color: @ooui-interface-border;
	}

	// disabled save button (no changes to page)
	.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
		background-color: @waikawa-grey;

		.oo-ui-labelElement-label {
			color: fade( @ooui-text, 50% );
		}

	}

	// editnotices, etc in /!\ button popup
	.oo-ui-popupWidget-popup {
		background-color: @ooui-interface;
		border-color: @ooui-interface-border;
	}

	// triangle
	.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
		border-bottom-color: @ooui-interface;
	}

	.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
		border-bottom-color: @ooui-interface-border;
	}

	// "Insert paragraph" button, maybe other things
	.ve-ce-branchNode-blockSlug,
	.ve-ce-branchNode-newSlug {
		outline-color: @ooui-interface-border;
		background-color: @ooui-interface;
	}

}

/* ------------------
         modals
   ------------------ */

// template editor modal
.ve-ui-mwTemplatePage-description,
.ve-ui-mwParameterPage-label {
	color: @ooui-text;
    line-height: 1.6em;
}

// gallery modal
.ve-ui-mwGalleryDialog-menuLayout > .oo-ui-menuLayout-menu,
.ve-ui-mwGalleryDialog-innerMenuLayout > .oo-ui-menuLayout-menu,
.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container,
.ve-ui-targetWidget {
    border-color: @ooui-interface-border;
}

// large thumbnail preview
.ve-ui-mwGalleryDialog-highlighted-image {
    background-color: @ooui-interface;
}

// "Save your changes" modal
.ve-ui-mwSaveDialog {
	color: @ooui-text;
}

.ve-ui-mwSaveDialog-options {
	background-color: @ooui-interface;
	border-color: @ooui-interface-border;
}

.ve-ui-mwSaveDialog-editSummary-count {
	border-color: @ooui-interface-border;
}

.ve-ui-mwSaveDialog-license {
	color: @ooui-text;
}

// reviewing diffs in "Save your changes" modal
.mw-summary-preview {
	border-bottom-color: @big-stone;
}

[data-diff-action='remove'],
table[data-diff-action='remove'] > caption,
figure[data-diff-action='remove'] > figcaption {
	color: @white;
	background: @old-brick !important;
	box-shadow: 0 0 0 1px @old-brick;
}

[data-diff-action='insert'],
table[data-diff-action='insert'] > caption,
figure[data-diff-action='insert'] > figcaption {
	color: @white;
	background: @la-palma !important;
	box-shadow: 0 0 0 1px @la-palma;
}