mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-11 05:56:11 +00:00
62ec9d92e2
Update: Switched to generic ve.ui.Toolbar and ve.ui.Tool for consistency with VE in general. Changed searchbox to floating and hidden by default. Call for search using shortcut key. Overriden ESC key. Node handler for <syntaxhighlight>'s Rdfa type. Embedded in VisualEditor.php with its own ResourceLoader module. Use $wgVisualEditorEnableExperimentalCode in LocalSettings.php to load the module. Supported languages (for testing): text, javascript Features: (1) Internal mechanisms: (1.1) Tokenizer. Tokenize input code string. (1.2) Highlighter. Highlight based on predefined rules. (1.3) Syntax checker. Validate based on predefined rules. (2) SimpleSurface: (2.1) Auto indenter. Works with (){}[] blocks. (2.2) Reformatter. Reformats spaces and remove trailing whitespaces. (2.3) Language selection dropdown. (2.4) Basic editing. Insert, deletion, selection. (2.5) Clipboard & edit history support. (2.5.1) Undo (Ctrl + Z), redo (Ctrl + Y) (2.5.2) Copy (Ctrl + C), cut (Ctrl + X), paste (Ctrl + V) (2.6) Search & replace. Ctrl + F to quickly move focus to search box. Bug 47742 Change-Id: I4adede9e05fd2236cee50ce03f597e8ff6b1914d
263 lines
4.2 KiB
CSS
263 lines
4.2 KiB
CSS
/*!
|
|
* VisualEditor MediaWiki UserInterface raster icon styles.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/* Highlighter styles */
|
|
|
|
.ve-ce-MWSyntaxHighlightNode pre {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-error {
|
|
border-bottom: 1px dotted red;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-suggestion {
|
|
border-bottom: 1px dotted #3366CC;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-symbol {
|
|
color : #339933;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-keyword {
|
|
color: #000066;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-metaconstant {
|
|
color: #003366;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-metaconstant {
|
|
color: #000066;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-typeconstructor {
|
|
color: #000066;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-reserved {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-escape {
|
|
color: #000099;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-bracket {
|
|
color : #009900;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-string {
|
|
color : #3366CC;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-number {
|
|
color : #CC0000;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-method {
|
|
color : #660066;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-comment-single {
|
|
color: #006600;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
.ve-ce-mwSynHi-comment-multi {
|
|
color: #006600;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Editor interface styles */
|
|
|
|
.ve-ui-simplesurface {
|
|
background: white;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-editbox {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 3.6em;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
cursor: text;
|
|
}
|
|
|
|
.ve-ui-simplesurface-textarea {
|
|
display:inline-block;
|
|
overflow: hidden;
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 0;
|
|
}
|
|
.ve-ui-simplesurface-container-editbox pre {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-toolbar {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
clear: both;
|
|
z-index: 30;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-editbox-lineNumber {
|
|
display: inline-block;
|
|
float: left;
|
|
height: 100%;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-editbox-text {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-left: 3px;
|
|
z-index: 20;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-text-selection {
|
|
position: absolute;
|
|
display: none;
|
|
z-index: 7;
|
|
}
|
|
|
|
.ve-ui-simplesurface .ve-ui-toolbar {
|
|
position: relative;
|
|
line-height: 1em;
|
|
height: 100%;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.ve-ui-simplesurface-toolbar-dropdown {
|
|
margin: 1em;
|
|
height: 2em;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
border: solid 1px #ddd;
|
|
border-radius: 0.25em;
|
|
box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.ve-ui-simplesurface-text {
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 4;
|
|
outline: 0px solid transparent;
|
|
}
|
|
|
|
.ve-ui-simplesurface-lineNumber {
|
|
width: 2.125em;
|
|
border-right: 1px solid rgba(104,171,255,.3);
|
|
background: rgba(104,171,255,.1);
|
|
cursor: pointer;
|
|
padding-right: 0.625em;
|
|
text-align: right;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ve-ui-simplesurface-line {
|
|
font-size: 1.25em;
|
|
font-family: monospace;
|
|
overflow: hidden;
|
|
line-height: 2em;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ve-ui-simplesurface-text-selected {
|
|
position: absolute;
|
|
background: rgba(104,171,255,.3);
|
|
display: block;
|
|
z-index: 7;
|
|
}
|
|
|
|
.ve-ui-simplesurface-cursor-line {
|
|
position: absolute;
|
|
background: rgba(104,171,255,.1);
|
|
z-index: 1;
|
|
}
|
|
|
|
.ve-ui-simplesurface-cursor {
|
|
position: relative;
|
|
border-left: 2px solid black;
|
|
z-index: 2;
|
|
height: 100%;
|
|
}
|
|
|
|
.ve-ui-simplesurface-text-linewrap {
|
|
top: 0;
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 1px;
|
|
background: rgb(200,200,200);
|
|
z-index: 7;
|
|
}
|
|
|
|
.ve-ui-simplesurface-container-search {
|
|
position: absolute;
|
|
top: 0;
|
|
right:0;
|
|
background: white;
|
|
clear: both;
|
|
z-index: 30;
|
|
vertical-align: middle;
|
|
padding-left: 0.5em;
|
|
height: 3em;
|
|
border-left: solid 1px #ccc;
|
|
border-bottom: solid 1px #ccc;
|
|
border-radius: 0.25em;
|
|
display: none;
|
|
}
|
|
|
|
/* Icons */
|
|
|
|
.ve-ui-icon-reformat {
|
|
/* @embed */
|
|
background-image: url(images/reformat.svg);
|
|
}
|
|
|
|
.ve-ui-icon-replace {
|
|
/* @embed */
|
|
background-image: url(images/replace.svg);
|
|
}
|
|
|
|
.ve-ui-icon-syntaxHighlight {
|
|
/* @embed */
|
|
background-image: url(images/syntaxHighlight.svg);
|
|
}
|