EditorParity

EditorParity is a stylesheet that changes WikiEditor, CodeEditor (also called AceEditor) and VisualEditor, and brings parity to their style and layout, alongside fixing a few appareance bugs or wrong colors that went unnoticed. If you want to modify the appareance further, there is also a personal use addon for the stylesheet.

If you want to suggest something for this stylesheet, please use the talk page.

Installation

Description

The stylesheet aims to give consistency throughout all editor interfaces, and fixes some bugs as well. It aims visual editor, its source mode, and source editor, alongside the editor used on code pages.

Design changes

A list of what it changes by default is:

Non-editor changes
- Fixes the alert and success colors on dark theme across the entire wiki.
- Fixes lines on <syntaxhighlight> tags, as well as the copy button.

VisualEditor (Visual editor and 2017 source editor)
- Modifies popup menus:
  - Fixes template descriptions in "Template".
  - Fixes the styling of the help icon button in "Template".
  - Fixes symbol borders and colors in "Math formula" and "Chemical formula".
  - Fixes the CodeEditor (AceEditor) textarea in "Math formula" and "Chemical formula".
  - Fixes symbol appareance in dark theme on "Special characters".
  - Fixes bottom borders in "Language" and "Insert link".
  - Fixes border colors in "Image and media" and "Gallery".
- Modifies summary area:
  - "Show changes", "Preview" and "Cancel" now include a background when hovering over them.
  - Makes "Cancel" use the same alert color than WikiEditor.

WikiEditor (2010 source editor)
- Modifies the toolbar appareance:
  - Toolbar padding now is consistent with VisualEditor's toolbar.
  - Toolbar borders now adapt to both CodeMirror's "Syntax highlighting preferences" and "Search and replace" toggles.
  - Integrates the "Drop files here" section inside the toolbar instead of leaving it outside.
  - Fixes toolbar buttons' background color when hovering over them.
- Modifies popup menus:
  - These now have a black translucent background color instead of white, like other popup interfaces, if they have one.
  - Fixes the "Insert link" alert color when writing an unexistent page name.
  - Modernizes the "Insert files" menu, and turns the alternative text help into a toggle button.
  - Fixes the bottom border being of a default gray color.
  - Input elements in the "Insert table" menu now adapt to dark theme.
- Modernizes the dropdown-like buttons:
  - Moves "Special characters" to the left, also hiding its text.
  - Adds arrow icons to the right of "Advanced", "Special characters" and "Help".
  - Changes icons and font of "Advanced", "Special characters", "Help" and "Heading".
  - "Heading" options floating selection menu now matches its VisualEditor counterpart.
  - These buttons now act as proper buttons, with a background color when hovering over them or by pressing them.
- Modifies summary area:
  - Changes summary area appareance to be similar to VisualEditor's.
  - "Show changes", "Show preview" and "Cancel" now include a background when hovering over them.
  - "Show changes" and "Show preview" now match their VisualEditor counterparts.
  - Fixes "Cancel" button colors in dark theme.
- Improves accesibility of CodeMirror's syntax highlighting.
  - Fixes dark theme colors.
  - Fixes colorblind mode, both light and dark themes.

Normal highlighting	Colorblind highlighting
Symbols	Symbols
Tags	Tags
Parser functions	Parser functions
Templates	Templates
Parameters	Parameters
Links	Links
Tables	Tables
HTML comments	HTML comments

CodeEditor (AceEditor) (CSS, Lua, JS, JSON, Infobox, etc. editor)
- Modifies the toolbar appareance:
  - Toolbar borders now adapt to the "Toggle code editor" and ""Toggle search and replace dialog" toggles.
  - Fixes the styling of "Search and replace", now matching the toolbar color.
  - Line number bar is now consistent with WikiEditor's version.
- Fixes appareance of CodeEditor-specific tools:
  - Fixes touch controls (available for tablet-like devices when touching the screen).
  - Fixes the controls (keyblard shortcuts) menu (accessible through F1).
  - Fixes the editor settings menu (accessible through Ctrl + ,).

Light theme settings, accessible through Ctrl + ,.

Dark theme settings, accessible through Ctrl + ,.

Addon

This stylesheet also has an addon that changes even more elements, but this is only for personal use because it adds aditional features that can't be used sitewide. The addon has to be implemented after the base script, not before, due to it only having part of the styles.

Addon changes

Using the addon, you can see the following changes:

WikiEditor and CodeEditor
- Changes the layout of the summary area to be similar to their VisualEditor's counterpart.
- Hides the "Drop files here" section except when "Advanced" is opened.

Supported stylesheets or scripts

There are some scripts or stylesheets that also change layout or add elements on the page editors. This list shows which of them are compatible with this stylesheet:

Name	Type	Notes
DateInserter	Script	It doesn't conflict with EditorParity.
DecodeURI	Script	There is a CSS rule specific for supporting this.
MaximizeAce	Script	It doesn't conflict with EditorParity.
Modern2010Editor	Stylesheet	It works for most scenarios, but at very small screens the summary area may not render properly.
Nord	Stylesheet	It doesn't conflict with EditorParity.
OldSyntaxHighlight	Stylesheet	It doesn't conflict with EditorParity.
PreloadTemplates	Script	There is a CSS rule specific for supporting this.
ResizableCodeMirror	Script	There is a CSS rule specific for supporting this.
Standard Edit Summary	Script	There is a CSS rule specific for supporting this.
StickySummary	Script	It doesn't conflict with EditorParity.
SyntaxHighlight	Script	It doesn't conflict with EditorParity.
TemplateWizard	Script	It doesn't conflict with EditorParity.

Text above can be found here (edit)