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, or report any issue, 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
- Sets a dark color scheme on dark theme across the entire wiki on the <html> and <body> elements.
- This should fix some <input> checkboxes and some <button> on dark theme.
- Fixes the alert and success colors on dark theme across the entire wiki.
- Fixes lines on <syntaxhighlight> tags, as well as the copy button.
- Modernizes <select>, <outgroup> and <option> element design.
- Most of these changes only work for the most recent browser versions due to the
appareanceproperty, for the most part, so in older browsers the basic <select> styles will apply instead. - The background and color text changes for <outgroup> and <option> should work fine, however.
- Most of these changes only work for the most recent browser versions due to the
- Sets a dark color scheme on dark theme across the entire wiki on the <html> and <body> elements.
- 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.
- Modifies popup menus:
- 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 syntax highlighting colorblind mode on both light and dark themes. The table below shows some CodeMirror colors, including the ones that change with the colorblind preference set:
- Modifies the toolbar appareance:
| Normal highlighting | Colorblind highlighting |
|---|---|
| Symbols | Symbols |
| Tags | Tags |
| Parser functions | Parser functions |
| Templates | Templates |
| Parameters | Parameters |
| Links | Links |
| Tables | Tables |
| HTML comments | HTML comments |
.png "EditorParity (colorblind).png (71 KB)")
.png "EditorParity (dark).png (66 KB)")
.png "EditorParity (dark colorblind).png (65 KB)")
- CodeEditor (AceEditor) (CSS, Lua, JS, JSON, Infobox, etc. editor)
- Modifies the general appareance:
- Toolbar borders now adapt to the "Toggle code editor" and ""Toggle search and replace dialog" toggles.
- "Search and replace" now matches the toolbar and the appareance of its wikitext editor counterpart.
- "Search and replace" search field now has red text and a red border color when there are no matching words.
- "Search and replace" no longer has a red outline wrapping the top buttons when there are no matching words.
- Line number bar is now consistent with WikiEditor's version.
- Fixes touch controls, available for tablet-like devices when touching the screen.
- The bar now uses the secondary page background color.
- The buttons now use the style of Search and replace.
- Fixes the controls menu (which also shows some keyblard shortcuts), accessible through
F1.- The input field and option lines now use the regular wiki font and font color.
- Selected or hovered option lines now have a background and border color based on the wiki accent color.
- Fixes text with color so it can be read on dark theme.
- Fixes the settings menu, accessible through
Ctrl+,.- The menu now uses the secondary background color, as well as the wiki text color.
- The buttons, input fields and selection fields now use the style of Search and replace.
- The checkbox input elements now use the style of the editor summary area.
- Modifies the general appareance:
Light theme.
.png "EditorParity AceEditor (settings).png (102 KB)")
Light theme settings, accessible through
Ctrl + ,..png "EditorParity AceEditor (dark).png (88 KB)")
Dark theme.
.png "EditorParity AceEditor (dark settings).png (99 KB)")
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)