MediaWiki:Vector-darkmode.less/visualeditor.less

From Old School RuneScape Wiki
Jump to navigation Jump to search
// <pre>
/* ==========================
          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;
	}

	// undo invert from /ooui.less 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.ve-ce-annotation-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;
		border-color: @ooui-normal--hover; // border is the same as background in light mode
	}

	// 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;
		border-left-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;
	}
	
	.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
		background-color: #384766;
	}
	
	.ve-ui-toolbar .oo-ui-toolbar-popups .oo-ui-toolGroup-tools {
		background-color: @ooui-normal;
		border: none;
		.oo-ui-widget-disabled {
			opacity:0.34;
		}
		.oo-ui-tool-active .oo-ui-tool-link {
			background-color: @ooui-normal;
		}
	}
	.ve-ui-specialCharacterPage-character {
		border-color: @ooui-interface-border;
		color: @ooui-text;
	}
	.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above, 
	.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
		border-color: @ooui-interface-border;
	}

	// disabled save button (no changes to page)
	.oo-ui-widget-disabled > .ve-ui-toolbar-saveButton {
		background-color: @ooui-disabled;
	}
	
	.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link span.oo-ui-tool-title {
		color: rgba(203,217,244,0.5);
	}

	// 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,
.ve-ui-mwParameterPage-description-required,
.ve-ui-mwParameterPage-description-deprecated {
	color: @ooui-text;
}

// 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;
}

.ve-ui-mwReferenceContextItem-muted {
	color: @ooui-text;
}

[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;
}

.ve-ui-mwLatexPage-symbol {
	filter: invert(1);
}

.ve-ce-mwBlockImageNode {
	figcaption {
		background-color: @ooui-interface;
		border-color: @ooui-interface-border;
	}

	.image,
	.ve-ce-mwBlockImageNode-thumbimage {
		background-color: @ooui-interface;
	}
}

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

// borders inside edit notices
.ve-ui-mwNoticesPopupTool-items > div:not(:first-child),
.ve-ui-mwHelpPopupTool-item:not(:first-child) {
	border-color: @ooui-interface-border;
}