mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-16 19:09:29 +00:00
8cea089f3b
See also http://stackoverflow.com/a/13139830/319266: > Some are unstable and cause CSS glitches. [If] you have an > <img> and you use the tiniest transparent GIF possible, it > works fine[. if] you then want your transparent GIF to have a > background-image, then this is impossible. For some reason, > some GIFs such as the following prevent CSS backgrounds (in > some browsers). > > == Shortest (but unstable) == > data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== > > == Stable (but slightly longer) *use this one* == > > data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 > > Also: don't ommit image/gif. This will break in several browsers. For the record, this is not limited to rare browsers. It also affects latest Chrome in some cases as confirmed by Christian (it'd be white instead of transparent in some cases when uses as a css background-image without border). Change-Id: If9ff8a0820c217b6c23e3335944907939a37bef7
195 lines
4 KiB
CSS
195 lines
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;
|
|
}
|
|
|
|
/* 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.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;
|
|
}
|