MediaWiki:Common.less/visualeditor.less

/* ==========================
          VisualEditor
   ========================== */
@ooui-text: var(--ooui-text);
@ooui-interface: var(--ooui-interface);
@ooui-interface-border: var(--body-border);
@ve-toolbar-border: var(--body-mid);

// may look into https://www.mediawiki.org/wiki/VisualEditor/Gadgets#Gadget_-_Registering_VE_plugin
// so ve-specific stuff will be all lazy loaded

.ve-activated {
	.ve-init-mw-desktopArticleTarget-originalContent #catlinks:hover {
		background: var(--ooui-normal--hover);
	}
}

// limit to vector to not load on mobile
.ve-ui-overlay {
	font-family: inherit;
}

// border atop special character menu
.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
	border-top-color: @ve-toolbar-border;
}

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

//  special characters menu
// header
.ve-ui-specialCharacterPage h3 {
	color: var(--byline-color);
}

// buttons - same as source editor
.ve-ui-specialCharacterPage-character {
	border-color: var(--body-mid);

	&:hover {
		border-color: var(--body-dark);
	}
}

// when a link is selected
.ve-ce-linkAnnotation.ve-ce-annotation-active {
	box-shadow: 0 0 0 1px var(--body-mid);
	background: none;
}

// inside link annotation box
.ve-ui-desktopContext .ve-ui-linkContextItem .ve-ui-linkContextItem-label {
	border-color: @ooui-interface-border;
}

// ve version number
.ve-ui-mwHelpPopupTool-version-label,
.ve-ui-mwHelpPopupTool-version-link,
.ve-ui-mwHelpPopupTool-version-date {
	color: var(--byline-color);
}

// unstyled tables
.ve-ce-tableCellableNode {
	border-color: @ve-toolbar-border;
}

// "There are no references on this page to include in this list."
// even though there is, just because it doesnt recognise cites templates
// with <ref> tags embeded inside them
.ve-ce-mwReferencesListNode-muted {
	color: var(--byline-color);
}

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

// template editor modal
.ve-ui-mwTemplatePage-description,
.ve-ui-mwParameterPage-label,
.ve-ui-mwParameterPage-description-required,
.ve-ui-mwParameterPage-description-deprecated {
	color: var(--byline-color);
}

// template description
.mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
	color: var(--byline-color);
}

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

.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
	background-color: var(--body-main);
}

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

// box below edit summary box
.ve-ui-mwSaveDialog-options {
	background-color: @ooui-interface;
	border-color: @ooui-interface-border;
}

.ve-ui-mwSaveDialog-summary {
	background-color: var(--ooui-input);
}

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

.ve-ui-mwSaveDialog-license {
	color: var(--byline-color);
}

.ve-ui-mwReferenceContextItem-muted {
	color: var(--byline-color);
}

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

//  Templates config window

.ve-ui-mwTransclusionOutlineControlsWidget {
	background-color: @ooui-interface;
	border-top-color: @ooui-interface-border;
}

.ve-ui-mwTransclusionOutlineTemplateWidget {
	&-sticky {
		background-color: @ooui-interface;
	}

	.ve-ui-mwTransclusionOutlineParameterWidget.oo-ui-optionWidget-highlighted {
		color: var(--ooui-text);
	}

	&-no-template-parameters {
		color: var(--subtle-color);
	}
}

.ve-ui-mwParameterPage-undocumentedLabel {
	color: var(--subtle-color);
}

.ve-ui-mwTwoPaneTransclusionDialogLayout > .oo-ui-menuLayout-menu {
	border-right: @ooui-interface-border;
}

.ve-ui-mwParameterPage-doc-required, .ve-ui-mwParameterPage-doc-deprecated,
.ve-ui-mwParameterPage-inlineDescription .ve-ui-mwParameterPage-doc-example {
	color: var(--byline-color);
}

// param "More" details button
.ve-ui-expandableContent-toggle {
	background-color: @ooui-interface;
}

// fade beside it
.ve-ui-expandableContent-fade {
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0, @ooui-interface 90% )
}

// keyboard shortcuts modal
.ve-ui-commandHelpDialog-shortcut > kbd,
.ve-ui-commandHelpDialog-sequence > kbd {
	background-color: var(--keypress-background);
	color: var(--keypress-color);
	border-color: var(--keypress-border);
	box-shadow: none;
	text-shadow: none;
}

/* ------------------
      initialisation
   ------------------ */

.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-floating .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
	background: @ooui-interface; // based on `.oo-ui-toolbar-bar`
}

.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
	border-bottom-color: @ve-toolbar-border; // `.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar`
}

/* ------------------
        Parsoid
   ------------------ */
// technically these should not be here

figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
figure[typeof~='mw:Image/Thumb'],
figure[typeof~='mw:Video/Thumb'],
//figure[typeof~='mw:Audio/Thumb'],
figure[typeof~='mw:Image/Frame'],
figure[typeof~='mw:Video/Frame'] /*,
figure[typeof~='mw:Audio/Frame']*/ {
	border: none;
	background-color: var(--thumb-bg);

	> a:first-child > *:first-child:not( .mw-broken-media ) {
		border: none;
		background: var(--thumb-bg);
	}

	> figcaption {
		// same as .thumbcaption
		border: none;
		background-color: var(--thumb-caption-bg);
		padding: 4px 6px;
	}
}