mediawiki-extensions-Visual.../modules/ve/ce/styles/ve.ce.Node.css
Ed Sanders 64a9449513 Match text selection background colour to node highlight
This was probably correct by default on OSX but Ubuntu's
default theme uses an orange highlight, and Windows uses
dark blue.

Change-Id: I601c2d27f6d928b38799f3a6502de5be1dccc199
2013-10-11 14:35:52 +01:00

211 lines
4.4 KiB
CSS

/*!
* VisualEditor ContentEditable Node styles.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/* ve.ce.DocumentNode */
.ve-ce-documentNode {
cursor: text;
overflow: hidden;
}
/*
* Don't bother with -moz-selection becase Firefox 24 only
* supports overriding text selection colour, not images
* (i.e. any focusable nodes)
*/
.ve-ce-documentNode::selection,
.ve-ce-documentNode *::selection {
background: rgba(109, 169, 247, 0.5); /* #6da9f7 */
}
/* Prevent focus outline on editor */
.ve-ce-documentNode[contenteditable="true"]:focus {
outline: none;
}
/* ve.ce.ProtectedNode */
.ve-ce-protectedNode,
.ve-ce-protectedNode * {
position: relative !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ve-ce-protectedNode::-moz-selection,
.ve-ce-protectedNode *::-moz-selection {
background: transparent;
}
.ve-ce-protectedNode-shield {
position: absolute !important;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent !important;
-webkit-user-select: auto;
-moz-user-select: element;
-ms-user-select: element;
user-select: element;
}
.ve-ce-protectedNode-phantom {
position: absolute;
background-color: rgba(104,171,255,0.1);
box-shadow: inset 0 0 0 1px #68abff;
cursor: default;
}
/* ve.ce.FocusableNode */
.ve-ce-focusableNode-highlight {
background: #6da9f7;
position: absolute;
}
/* ve.ce.ResizableNode */
.ve-ce-resizableNode-handles {
position: absolute;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ve-ce-resizableNode-handles div {
position: absolute;
width: 0.66em;
height: 0.66em;
border: solid 0.125em #fff;
background-color: #333;
box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.75);
border-radius: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ve-ce-resizableNode-nwHandle {
cursor: nw-resize;
left: -0.33em;
top: -0.33em;
}
.ve-ce-resizableNode-neHandle {
cursor: ne-resize;
right: -0.33em;
top: -0.33em;
}
.ve-ce-resizableNode-swHandle {
cursor: sw-resize;
bottom: -0.33em;
left: -0.33em;
}
.ve-ce-resizableNode-seHandle {
cursor: se-resize;
bottom: -0.33em;
right: -0.33em;
}
/* ve.ce.RelocatableNode */
.ve-ce-relocatableNode-marker {
cursor: move;
position: absolute;
}
.ve-ce-relocatableNode-marker.relocating {
background: rgba(0,0,0,1);
}
/* ve.ce.GeneratedContentNode */
.ve-ce-generatedContentNode-generating {
opacity: 0.5;
}
/* ve.ce.ImageNode */
.ve-ce-imageNode {
cursor: default;
}
/* ve.ce.AlienNode */
/* Fix weird Chrome native selection involving floated elements */
.ve-ce-alienBlockNode:before,
.ve-ce-alienBlockNode:after {
content: '';
}
.ve-ce-alienBlockNode {
display: block;
}
.ve-ce-alienInlineNode {
display: inline;
}
.ve-ce-alienNode-phantom {
background-color: #C3E59A;
background-image: -ms-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-image: -webkit-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-image: -moz-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px);
background-image: repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-size: 14px 14px;
box-shadow: none;
cursor: not-allowed;
}
/* ve.ce.BranchNode */
.ve-ce-branchNode-blockSlug {
display: block;
}
/* ve.ce.PreformattedNode */
pre.ve-ce-branchNode {
white-space: pre-wrap;
}
/* Hack for empty headings and paragraphs; can't use min-height because of IE */
.ve-ce-branchNode h1:empty:before,
.ve-ce-branchNode h2:empty:before,
.ve-ce-branchNode h3:empty:before,
.ve-ce-branchNode h4:empty:before,
.ve-ce-branchNode h5:empty:before,
.ve-ce-branchNode h6:empty:before,
.ve-ce-branchNode p:empty:before {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
/* Emulate the first paragraph in each list item being unwrapped */
/* TODO use CSS class for wrapper paragraph */
li.ve-ce-branchNode p.ve-ce-branchNode:first-child {
margin: 0;
padding: 0;
}
/* Language Annotation */
.ve-ce-LanguageAnnotation {
border-bottom: dashed #ccc 1px;
background-color: #ebf3f5;
}