mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-11-27 15:40:00 +00:00
27b6aaebcc
For years, users have complained that the CodeMirror toggle button is confusing and concealed. The icon looked too similar to the edit icon, when it was supposed to be a highlighter. The new icon is similar but has a highlighted line to help clarify what it is. We also now have the text 'Syntax' accompanying the icon. Translators are instructed to try to be brief to conserve space in the toolbar. "Syntax highlighting" is the full correct term, and remains the text for the button's tooltip. The new icon is ~0.3KB uncompressed, just meeting performance guidelines for using @embed <https://w.wiki/AsPW>. This is also only temporary until the icon is upstreamed in Codex/OOUI. New icon courtesy of Thiemo Kreuz (WMDE) A corresponding change for the 2017 editor will follow I15453b33e7. Bug: T174145 Change-Id: Ib6dbfc261214ed6672c1a54738e3401fa2f5d262
87 lines
1.7 KiB
Plaintext
87 lines
1.7 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
|
|
.cm-editor {
|
|
border: 1px solid #c8ccd1;
|
|
}
|
|
|
|
.cm-matchingBracket,
|
|
.cm-focused .cm-matchingBracket {
|
|
background-color: #eee;
|
|
box-shadow: inset 0 0 1px 1px #999;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-special-char-nbsp {
|
|
color: #888;
|
|
}
|
|
|
|
.cm-tooltip-fold {
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
.cm-bidi-isolate {
|
|
/* @noflip */
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.ext-codemirror-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
// Overrides for WikiEditor.
|
|
|
|
.wikiEditor-ui-text .cm-editor {
|
|
border: inherit;
|
|
}
|
|
|
|
.cm-mw-toggle-wikieditor {
|
|
.oo-ui-icon-syntax-highlight {
|
|
background-color: @color-base;
|
|
// The SVG is just barely over 300 bytes, and is also only temporary
|
|
// until an official icon has been established in Codex/OOUI (T174145).
|
|
/* @embed */
|
|
@url: url( codemirror.icon.svg );
|
|
-webkit-mask-image: @url;
|
|
mask-image: @url;
|
|
-webkit-mask-size: @size-icon-medium;
|
|
mask-size: @size-icon-medium;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @background-color-interactive;
|
|
}
|
|
|
|
&.oo-ui-toggleWidget-on {
|
|
.oo-ui-labelElement-label {
|
|
color: @color-progressive;
|
|
}
|
|
|
|
.oo-ui-icon-syntax-highlight {
|
|
background-color: @color-progressive;
|
|
}
|
|
}
|
|
|
|
&.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// Hide all buttons except CodeMirror on read only pages (T301615)
|
|
// This is the same hack that CodeEditor uses to customize the toolbar.
|
|
// WikiEditor should be updated to better handle read only pages (T188817).
|
|
.ext-codemirror-readonly {
|
|
.wikiEditor-section-secondary,
|
|
.group:not( .group-codemirror ),
|
|
.tabs,
|
|
.sections {
|
|
display: none;
|
|
}
|
|
}
|