mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 20:26:46 +00:00
dda2c932bd
Created jQuery plugin MultiSuggest which builds a categorized dropdown under specified input box. Revised inspector to no longer be an iframe but to contain an Iframe. This reduces xbrowser issues with positioning and toggling inspector container. Added Inspector overlay element for positioning arbitrary elements over the iFrame. This prevents growing the iframe to arbitrary lenghts. Change-Id: I8efbbd091b0b24a19a4b73aa122d21a329cf97e4
169 lines
3.3 KiB
CSS
169 lines
3.3 KiB
CSS
/**
|
|
* VisualEditor user interface Inspector styles.
|
|
*
|
|
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
.es-inspector {
|
|
font-family: sans-serif;
|
|
position: absolute;
|
|
border: solid 1px #ccc;
|
|
-webkit-border-radius: 0.25em;
|
|
-moz-border-radius: 0.25em;
|
|
-o-border-radius: 0.25em;
|
|
border-radius: 0.25em;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
-webkit-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
padding: 0.75em;
|
|
padding-top: 2.5em;
|
|
min-width: 15em;
|
|
z-index: 3;
|
|
}
|
|
|
|
.es-inspector-button {
|
|
position: absolute;
|
|
top: 0.25em;
|
|
width: 2em;
|
|
height: 2em;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
filter: alpha(opacity=75);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.es-inspector-button:hover {
|
|
filter: alpha(opacity=100);
|
|
opacity: 1;
|
|
}
|
|
|
|
.es-inspector-button.es-inspector-button-disabled,
|
|
.es-inspector-button.es-inspector-button-disabled:hover {
|
|
filter: alpha(opacity=25);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.es-inspector-closeButton {
|
|
right: 0.25em;
|
|
/* @embed */
|
|
background-image: url(images/close.png);
|
|
}
|
|
|
|
.es-inspector-acceptButton {
|
|
right: 2.25em;
|
|
/* @embed */
|
|
background-image: url(images/accept.png);
|
|
}
|
|
|
|
.es-inspector-clearButton {
|
|
right: 4.25em;
|
|
/* @embed */
|
|
background-image: url(images/clear.png);
|
|
}
|
|
|
|
.es-inspector form {
|
|
margin: 0;
|
|
padding: 0.75em 0 0 0;
|
|
border-top: solid 1px #ddd;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.es-inspector form input {
|
|
display: inline-block;
|
|
width: 20em;
|
|
font-size: 1em;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.es-inspector form label {
|
|
display: inline-block;
|
|
width: 6em;
|
|
}
|
|
|
|
.es-inspector-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0.75em;
|
|
height: 2.5em;
|
|
line-height: 2.5em;
|
|
font-weight: bold;
|
|
color: #666;
|
|
}
|
|
|
|
.ve-iframe-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ve-ui-suggest-select {
|
|
position: absolute;
|
|
background: #FFFFFF;
|
|
/* @embed */
|
|
background-image: url(images/gray.png);
|
|
background-position: 8em top;
|
|
background-repeat: repeat-y;
|
|
padding: 0.5em 0;
|
|
width: 20em;
|
|
font-size: 1em;
|
|
z-index: 101;
|
|
-webkit-border-bottom-left-radius: 0.25em;
|
|
-webkit-border-bottom-right-radius: 0.25em;
|
|
-moz-border-bottom-left-radius: 0.25em;
|
|
-moz-border-bottom-right-radius: 0.25em;
|
|
-o-border-bottom-left-radius: 0.25em;
|
|
-o-border-bottom-right-radius: 0.25em;
|
|
border-bottom-left-radius: 0.25em;
|
|
border-bottom-right-radius: 0.25em;
|
|
background-color: rgba(255,255,255,0.95);
|
|
-webkit-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.ve-ui-suggest-label {
|
|
float: left;
|
|
width: 6.5em;
|
|
padding: 0.33em 0.75em;
|
|
text-align: right;
|
|
color: rgb(78, 78, 78);
|
|
}
|
|
|
|
.ve-ui-suggest-wrap {
|
|
float:left;
|
|
}
|
|
|
|
.ve-ui-suggest-dummy-item {
|
|
padding: 0.33em 0.75em;
|
|
width: 10.5em;
|
|
}
|
|
|
|
.ve-ui-suggest-item {
|
|
padding: 0.33em 0.75em;
|
|
width: 10.5em;
|
|
|
|
/* CSS Elipsis */
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-o-text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ve-ui-suggest-item.new {
|
|
color: #BA0000;
|
|
}
|
|
.ve-ui-suggest-item.existing {
|
|
color: rgb(68, 125, 214);
|
|
}
|
|
|
|
.ve-ui-suggest-item.selected {
|
|
background-color: rgb(68, 125, 214);
|
|
color: #FFFFFF;
|
|
}
|
|
.ve-ui-suggest-item > a {
|
|
text-decoration: none;
|
|
}
|
|
|