mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-28 12:46:45 +00:00
d0ff691f9e
* New! Button and InputLabel widgets * Using new buttons in the demo * Moved styles around to generalize input styles Change-Id: Ic42e133f8fe0fffcb61374c09dd5668db82a4799 TODO: Use these buttons other places! (like ve.init)
238 lines
5.9 KiB
CSS
238 lines
5.9 KiB
CSS
/*!
|
|
* VisualEditor user interface Widget styles.
|
|
*
|
|
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/* ve.ui.ButtonWidget */
|
|
|
|
.ve-ui-buttonWidget {
|
|
display: inline-block;
|
|
height: 1.8em;
|
|
margin: 0.1em 0.25em;
|
|
padding: 0.25em 0.75em;
|
|
border-radius: 0.3em;
|
|
vertical-align: top;
|
|
color: #555;
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
|
|
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 */
|
|
transition: border-color 100ms;
|
|
-moz-transition: border-color 100ms;
|
|
-webkit-transition: border-color 100ms;
|
|
-o-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);
|
|
}
|
|
|
|
.ve-ui-buttonWidget-disabled {
|
|
filter: alpha(opacity=50);
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.ve-ui-buttonWidget-disabled:hover {
|
|
border-color: #ccc;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ve-ui-buttonWidget-label {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1.9em;
|
|
}
|
|
|
|
.ve-ui-buttonWidget-destructive {
|
|
/* Red text */
|
|
color: #d45353;
|
|
}
|
|
|
|
.ve-ui-buttonWidget-constructive {
|
|
/* 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-buttonWidget-primary {
|
|
/* 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.MenuWidget */
|
|
|
|
.ve-ui-menuWidget {
|
|
display: none;
|
|
position: absolute;
|
|
border: solid 1px #ccc;
|
|
border-radius: 0.25em;
|
|
background-color: #fff;
|
|
box-shadow: 0 0.25em 1em 0 rgba(0, 0, 0, 0.25);
|
|
z-index: 3;
|
|
}
|
|
|
|
.ve-ui-menuWidget-item {
|
|
padding: 0.6em 0.8em;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ve-ui-menuWidget-item:hover {
|
|
background-color: #b3d6f6;
|
|
}
|
|
|
|
.ve-ui-menuWidget-break {
|
|
margin: 0.33em 0;
|
|
border-top: solid 1px #ddd;
|
|
}
|
|
|
|
/* ve.ui.TextInputWidget */
|
|
|
|
.ve-ui-textInputWidget input {
|
|
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;
|
|
|
|
/* Animation */
|
|
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
-o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
}
|
|
|
|
.ve-ui-textInputWidget input:focus {
|
|
outline: none;
|
|
border-color: #a7dcff;
|
|
box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* ve.ui.TextInputMenuWidget */
|
|
|
|
.ve-ui-textInputMenuWidget {
|
|
position: absolute;
|
|
background: #FFFFFF;
|
|
width: 20em;
|
|
margin-top: -1px;
|
|
font-size: 0.8em;
|
|
z-index: 101;
|
|
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-textInputMenuWidget-groups {
|
|
margin: 0.5em 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-group {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-group-label {
|
|
padding: 0.33em 0.75em;
|
|
color: #888;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-items {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-item {
|
|
padding: 0.33em 1.25em;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
color: #0645AD;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-item-label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-item:hover {
|
|
background: #E5F3FF;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-item-selected,
|
|
.ve-ui-textInputMenuWidget-item-selected:hover {
|
|
background-color: #b3d6f6;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-group[rel=newPage] .ve-ui-textInputMenuWidget-item-label {
|
|
color: #BA0000;
|
|
}
|
|
|
|
.ve-ui-textInputMenuWidget-group[rel=existingPage] .ve-ui-textInputMenuWidget-item-label,
|
|
.ve-ui-textInputMenuWidget-group[rel=matchingPage] .ve-ui-textInputMenuWidget-item-label,
|
|
.ve-ui-textInputMenuWidget-group[rel=externalLink] .ve-ui-textInputMenuWidget-item-label {
|
|
color: #0645AD;
|
|
}
|
|
|
|
.ve-ui-mwLinkTargetInputWidget-pending input {
|
|
background-image: url(images/pending.gif);
|
|
}
|