mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-16 10:59:56 +00:00
c4c9923c91
This fix adds a directionality property to the frame objects so directions can be inherited and manipulated inside the frame <body> tags. There are also several corrections to flipping positioning of panels in the GridLayout and of the icons in fieldsets and labeled elements so they appear properly (right instead of left). I've added a 've-rtl' / 've-ltr' class to frame content divs to serve as selectors for rtl fixes and general language fixes. Most CSS corrections would likely be fixed when CSSJanus works in iframes, but the selectors would still be useful. This sets the stage for directionality inheritance inside iframes, and fixes most of the problem with the Page Settings window in RTL wikis. It also fixes all the labels with icons across VE interface. Bug: 49613 Change-Id: I418e669b0999552167683352acb365a4249ab9cc
745 lines
17 KiB
CSS
745 lines
17 KiB
CSS
/*!
|
|
* VisualEditor UserInterface Widget styles.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/* ve.ui.IconButtonWidget */
|
|
|
|
.ve-ui-iconButtonWidget {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
-webkit-transition: opacity 200ms;
|
|
-moz-transition: opacity 200ms;
|
|
-ms-transition: opacity 200ms;
|
|
-o-transition: opacity 200ms;
|
|
transition: opacity 200ms;
|
|
}
|
|
|
|
.ve-ui-iconButtonWidget:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ve-ui-iconButtonWidget.ve-ui-widget-disabled {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/* ve.ui.ButtonWidget */
|
|
|
|
.ve-ui-buttonWidget {
|
|
display: inline-block;
|
|
height: 1.8em;
|
|
margin: 0.1em 0;
|
|
padding: 0.25em 0.75em;
|
|
border-radius: 0.3em;
|
|
vertical-align: top;
|
|
color: #333;
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
/* Animation */
|
|
-webkit-transition: border-color 100ms;
|
|
-moz-transition: border-color 100ms;
|
|
-ms-transition: border-color 100ms;
|
|
-o-transition: border-color 100ms;
|
|
transition: border-color 100ms;
|
|
|
|
/* Gray */
|
|
border: 1px #c9c9c9 solid;
|
|
background-color: #ffffff;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
|
GradientType=0,startColorstr=#ffffff, endColorstr=#f0f0f0
|
|
);
|
|
background-image: -webkit-gradient(
|
|
linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)
|
|
);
|
|
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
}
|
|
|
|
.ve-ui-buttonWidget:hover {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.ve-ui-buttonWidget:active {
|
|
border-color: #ddd;
|
|
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
|
|
color: black;
|
|
}
|
|
|
|
.ve-ui-widget-disabled.ve-ui-buttonWidget,
|
|
.ve-ui-widget-disabled.ve-ui-buttonWidget:active {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
box-shadow: none;
|
|
color: #333;
|
|
}
|
|
|
|
.ve-ui-widget-disabled.ve-ui-buttonWidget:hover {
|
|
border-color: #ccc;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ve-ui-buttonWidget .ve-ui-labeledElement-label {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1.9em;
|
|
}
|
|
|
|
.ve-ui-flaggableElement-destructive.ve-ui-buttonWidget {
|
|
/* Red text */
|
|
color: #d45353;
|
|
}
|
|
|
|
.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget {
|
|
/* Green */
|
|
border: solid 1px #c3e59a;
|
|
background-color: #f0fbe1;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
|
GradientType=0,startColorstr=#f0fbe1, endColorstr=#c3e59a
|
|
);
|
|
background-image: -webkit-gradient(
|
|
linear, right top, right bottom, color-stop(0%,#f0fbe1), color-stop(100%,#c3e59a)
|
|
);
|
|
background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
|
|
background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
|
|
background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
|
|
background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
|
|
background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
|
|
}
|
|
|
|
.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget:hover {
|
|
border-color: #a6cf74;
|
|
}
|
|
|
|
.ve-ui-flaggableElement-primary.ve-ui-buttonWidget {
|
|
/* Blue */
|
|
border: solid 1px #b0d9ee;
|
|
background-color: #eaf4fa;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
|
GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
|
|
);
|
|
background-image: -webkit-gradient(
|
|
linear, right top, right bottom, color-stop(0%,#eaf4fa), color-stop(100%,#b0d9ee)
|
|
);
|
|
background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
|
|
background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
|
|
background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
|
|
background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
|
|
background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
|
|
}
|
|
|
|
.ve-ui-flaggableElement-primary.ve-ui-buttonWidget:hover {
|
|
border-color: #84b9d4;
|
|
}
|
|
|
|
/* ve.ui.SelectWidget */
|
|
|
|
.ve-ui-selectWidget {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ve.ui.OptionWidget */
|
|
|
|
.ve-ui-optionWidget {
|
|
display: block;
|
|
border: none;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0.5em 2em 0.5em 3em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ve-ui-optionWidget .ve-ui-labeledElement-label {
|
|
white-space: nowrap;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.ve-ui-optionWidget-highlighted,
|
|
.ve-ui-optionWidget-selected {
|
|
background-color: #b3d6f6;
|
|
}
|
|
|
|
.ve-ui-optionWidget.ve-ui-widget-disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
/* ve.ui.OutlineItemWidget */
|
|
|
|
.ve-ui-outlineItemWidget {
|
|
padding: 1.25em 1.25em 1.25em 3.5em;
|
|
background-position: 1em center;
|
|
background-repeat: no-repeat;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* @noflip */
|
|
.ve-rtl ul li.ve-ui-outlineItemWidget {
|
|
padding: 1.25em 3.5em 1.25em 3.5em;
|
|
background-position: 1em right center;
|
|
margin-right: 1.25em;
|
|
}
|
|
|
|
.ve-ui-outlineItemWidget-level-1 {
|
|
padding-left: 5.5em;
|
|
background-position: 3em center;
|
|
}
|
|
|
|
.ve-ui-outlineItemWidget-level-2 {
|
|
padding-left: 7.5em;
|
|
background-position: 5em center;
|
|
}
|
|
|
|
.ve-ui-outlineItemWidget.ve-ui-optionWidget-selected {
|
|
background-color: #a7dcff;
|
|
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
/* ve.ui.OutlineControlsWidget */
|
|
|
|
.ve-ui-outlineControlsWidget {
|
|
height: 3em;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-adders,
|
|
.ve-ui-outlineControlsWidget-movers {
|
|
float: left;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
height: 3em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-adders {
|
|
float: left;
|
|
}
|
|
.ve-ui-outlineControlsWidget-movers {
|
|
float: right;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-adders .ve-ui-iconButtonWidget {
|
|
float: left;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-movers .ve-ui-iconButtonWidget {
|
|
float: right;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-adders:not(:hover) .ve-ui-iconButtonWidget:not(:first-child) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.ve-ui-outlineControlsWidget-adders:hover .ve-ui-iconButtonWidget:first-child {
|
|
opacity: 0.25;
|
|
cursor: default;
|
|
}
|
|
|
|
/* ve.ui.InputLabelWidget */
|
|
|
|
.ve-ui-inputLabelWidget {
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
/* ve.ui.TextInputWidget */
|
|
|
|
.ve-ui-textInputWidget {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 20em;
|
|
position: relative;
|
|
}
|
|
|
|
.ve-ui-textInputWidget input,
|
|
.ve-ui-textInputWidget input:focus[readonly],
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget input:focus,
|
|
.ve-ui-textInputWidget textarea,
|
|
.ve-ui-textInputWidget textarea:focus[readonly],
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea:focus {
|
|
display: inline-block;
|
|
font-size: 1em;
|
|
font-family: sans-serif;
|
|
background-color: #f7f7f7;
|
|
border: solid 1px #ccc;
|
|
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
|
|
padding: 0.5em;
|
|
border-radius: 0.25em;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
resize: none;
|
|
|
|
/* Animation */
|
|
-webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-ms-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
}
|
|
|
|
.ve-ui-textInputWidget-pending input,
|
|
.ve-ui-textInputWidget-pending textarea {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.ve-ui-textInputWidget input:focus,
|
|
.ve-ui-textInputWidget textarea:focus {
|
|
outline: none;
|
|
border-color: #a7dcff;
|
|
box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.ve-ui-textInputWidget input[readonly],
|
|
.ve-ui-textInputWidget textarea[readonly] {
|
|
color: #777;
|
|
text-shadow: 0 1px 1px #fff;
|
|
}
|
|
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget input,
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget input:focus,
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea,
|
|
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea:focus {
|
|
color: #ccc;
|
|
text-shadow: 0 1px 1px #fff;
|
|
}
|
|
|
|
.ve-ui-textInputWidget-decorated input,
|
|
.ve-ui-textInputWidget-decorated textarea {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.ve-ui-textInputWidget-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 2em;
|
|
height: 100%;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* ve.ui.MenuWidget */
|
|
|
|
.ve-ui-menuWidget {
|
|
position: absolute;
|
|
background: #fff;
|
|
margin-top: -1px;
|
|
border: solid 1px #ccc;
|
|
border-radius: 0 0 0.25em 0.25em;
|
|
box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.ve-ui-menuWidget input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ve.ui.MenuItemWidget */
|
|
|
|
.ve-ui-menuItemWidget {
|
|
background-position: 1em center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* ve.ui.MenuSectionItemWidget */
|
|
|
|
.ve-ui-menuSectionItemWidget {
|
|
padding: 0.33em 0.75em;
|
|
color: #888;
|
|
cursor: default;
|
|
}
|
|
|
|
/* ve.ui.MWLinkTargetInputWidget */
|
|
|
|
.ve-ui-mwLinkTargetInputWidget-menu {
|
|
width: 20em;
|
|
margin-top: -7px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuWidget-item {
|
|
padding: 0.33em 1.25em;
|
|
color: #0645AD;
|
|
}
|
|
|
|
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuItemWidget[rel=newPage] {
|
|
color: #BA0000;
|
|
}
|
|
|
|
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuItemWidget[rel=existingPage],
|
|
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuItemWidget[rel=matchingPage],
|
|
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuItemWidget[rel=externalLink] {
|
|
color: #0645AD;
|
|
}
|
|
|
|
/* ve.ui.PopupWidget */
|
|
|
|
.ve-ui-popupWidget-callout {
|
|
position: absolute;
|
|
/* @embed */
|
|
background-image: url(images/callout.svg);
|
|
background-repeat: no-repeat;
|
|
width: 15px;
|
|
height: 8px;
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.ve-ui-popupWidget-body {
|
|
margin-top: 7px;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
border: solid 1px #ccc;
|
|
border-radius: 0.25em;
|
|
background-color: #fff;
|
|
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.ve-ui-popupWidget-transitioning .ve-ui-popupWidget-body {
|
|
-webkit-transition: width 100ms, height 100ms, left 100ms;
|
|
-moz-transition: width 100ms, height 100ms, left 100ms;
|
|
-ms-transition: width 100ms, height 100ms, left 100ms;
|
|
-o-transition: width 100ms, height 100ms, left 100ms;
|
|
transition: width 100ms, height 100ms, left 100ms;
|
|
-webkit-transition-timing-function: ease-in-out;
|
|
-moz-transition-timing-function: ease-in-out;
|
|
-ms-transition-timing-function: ease-in-out;
|
|
-o-transition-timing-function: ease-in-out;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
.ve-ui-popupWidget-body:focus {
|
|
/* No outline. The body has a tabindex and is focused on show */
|
|
outline: none;
|
|
}
|
|
|
|
/* ve.ui.MWCategoryWidget */
|
|
|
|
.ve-ui-mwCategoryListWidget {
|
|
padding: 0;
|
|
}
|
|
|
|
.ve-ui-mwCategoryListWidget-items {
|
|
/* MDN claims we need to use word-wrap: break-word; and that it's been renamed to
|
|
* overflow-wrap: break-word; , but the only thing that actually works in practice is
|
|
* word-break: break-word; (which is not documented in any standard at all). So we just use
|
|
* all three.
|
|
*/
|
|
/*csslint known-properties:false */
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.ve-ui-mwCategoryInputWidget {
|
|
float: left;
|
|
}
|
|
|
|
/* ve.ui.MWCategoryListItemWidget */
|
|
|
|
.ve-ui-mwCategoryListItemWidget {
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
.ve-ui-mwCategoryListItemButton {
|
|
position: relative;
|
|
padding: 0.5em 0.75em 0.5em 1.125em;
|
|
margin: 0.75em 0.75em 0 0;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
opacity: 0.8;
|
|
/* Animation */
|
|
-webkit-transition: border-color 100ms;
|
|
-moz-transition: border-color 100ms;
|
|
-ms-transition: border-color 100ms;
|
|
-o-transition: border-color 100ms;
|
|
transition: border-color 100ms;
|
|
|
|
/* Gray */
|
|
border-radius: 1.25em;
|
|
border: 1px #c9c9c9 solid;
|
|
background-color: #ffffff;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
|
GradientType=0,startColorstr=#ffffff, endColorstr=#f0f0f0
|
|
);
|
|
background-image: -webkit-gradient(
|
|
linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)
|
|
);
|
|
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
background-image: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
|
|
}
|
|
|
|
.ve-ui-mwCategoryListItemButton:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ve-ui-mwCategoryListItemButton span {
|
|
display: block;
|
|
padding-right: 1.5em;
|
|
color: #333;
|
|
}
|
|
|
|
.ve-ui-mwCategoryListItemButton:active {
|
|
border-color: #ddd;
|
|
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
|
|
color: black;
|
|
}
|
|
|
|
.ve-ui-mwCategoryListItemControl {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 2.25em;
|
|
height: 2.25em;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupMenu .ve-ui-popupWidget-body {
|
|
padding: 0.75em 0.5em;
|
|
}
|
|
/* ve.ui.CategoryInputWidget */
|
|
|
|
.ve-ui-mwCategoryInputWidget {
|
|
float: left;
|
|
width: 15em;
|
|
margin-top: 0.75em;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.ve-ui-mwCategoryInputWidget input {
|
|
border-radius: 2em;
|
|
font-size: 1.05em;
|
|
margin-top: 0;
|
|
padding-left: 0.75em;
|
|
padding-right: 0.75em;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupMenu {
|
|
position: absolute;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupMenu .ve-ui-iconButtonWidget {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupMenu label {
|
|
opacity: .8;
|
|
display: block;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupTitle {
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
padding: 0.5em 0.5em 0.5em 2.25em;
|
|
margin: -0.4em 0 1em 0.125em;
|
|
}
|
|
|
|
.ve-ui-mwCategoryPopupMenu .ve-ui-removeButtonLabel:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ve-ui-mwCategoryRemoveButton {
|
|
position: absolute;
|
|
margin-right: 2px;
|
|
padding: 0.5em;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ve-ui-mwCategorySortkeyForm {
|
|
padding: 0.5em;
|
|
display: block;
|
|
}
|
|
|
|
.ve-ui-mwCategorySortkeyForm .ve-ui-inputLabelWidget {
|
|
padding: 0 0.125em 0.5em 0.125em;
|
|
}
|
|
|
|
/* ve.ui.SearchWidget */
|
|
|
|
.ve-ui-searchWidget-query {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4em;
|
|
padding: 0 1em;
|
|
box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.ve-ui-searchWidget-query .ve-ui-textInputWidget {
|
|
width: 100%;
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
.ve-ui-searchWidget-results {
|
|
position: absolute;
|
|
top: 4em;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1em;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
line-height: 0;
|
|
}
|
|
|
|
/* ve.ui.mwMediaResultWidget */
|
|
|
|
.ve-ui-mwMediaResultWidget {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-error {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-thumbnail {
|
|
position: absolute;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 400ms;
|
|
-moz-transition: opacity 400ms;
|
|
-ms-transition: opacity 400ms;
|
|
-o-transition: opacity 400ms;
|
|
transition: opacity 400ms;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-done .ve-ui-mwMediaResultWidget-thumbnail,
|
|
.ve-ui-mwMediaResultWidget-error .ve-ui-mwMediaResultWidget-thumbnail {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-crop {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.ve-ui-optionWidget-selected .ve-ui-mwMediaResultWidget-overlay {
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget-error .ve-ui-mwMediaResultWidget-thumbnail {
|
|
/* @embed */
|
|
background-image: url(images/broken-image.png);
|
|
background-size: auto;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.ve-ui-mwMediaResultWidget .ve-ui-labeledElement-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
padding: 0.5em;
|
|
color: #fff;
|
|
text-shadow: 1px 1px #000;
|
|
font-size: 0.8em;
|
|
line-height: 1.125em;
|
|
background-color: rgba(0,0,0,0.5);
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ve.ui.MWReferenceSearchWidget */
|
|
|
|
.ve-ui-mwReferenceSearchWidget-citation {
|
|
float: left;
|
|
margin-right: 0.75em;
|
|
}
|
|
|
|
.ve-ui-mwReferenceSearchWidget-name {
|
|
float: right;
|
|
margin-left: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
color: #777;
|
|
}
|
|
|
|
/* ve.ui.MWReferenceResultWidget */
|
|
|
|
.ve-ui-mwReferenceResultWidget {
|
|
position: relative;
|
|
padding: 1em;
|
|
border-bottom: solid 1px #eee;
|
|
}
|
|
|
|
.ve-ui-mwReferenceResultWidget .ve-ui-labeledElement-label {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ve-ui-mwReferenceResultWidget-shield {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.ve-ui-mwReferenceResultWidget-divider {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* RTL Definitions */
|
|
|
|
/* @noflip */
|
|
.ve-ui-rtl {
|
|
direction: rtl;
|
|
}
|
|
/* @noflip */
|
|
.ve-ui-ltr {
|
|
direction: ltr;
|
|
}
|