mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-25 06:46:26 +00:00
af8d034ca8
When the ListToolGroup in the toolbar (the "More" section) is scrolled down such that the top tool is partly obscured, and you hover over the bottom half of the "More" button, the top tool displays a hover effect and using the scroll wheel will scroll the list rather than the page. This is because the list has a box-shadow that's 1em tall, and the height of the "More" button is 2em. And in Chrome, pointer events "work" even in the box-shadow area. Roan reported the Chrome bug at https://code.google.com/p/chromium/issues/detail?id=314291 This change works around the bug by making the tools in the list inline-block instead of block; for some reason the bug only affects block elements. Change-Id: I4ea3f41c91d0ff5d5cc150fe8acc3427f0ab5f3a
308 lines
6.6 KiB
CSS
308 lines
6.6 KiB
CSS
/*!
|
|
* ObjectOriented UserInterface ToolGroup styles.
|
|
*
|
|
* @copyright 2011-2013 OOJS Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/* OO.ui.ToolGroup */
|
|
|
|
.oo-ui-toolGroup {
|
|
display: inline-block;
|
|
margin: 0.3em;
|
|
vertical-align: middle;
|
|
border-radius: 0.25em;
|
|
border: solid 1px transparent;
|
|
-webkit-transition: border-color 300ms;
|
|
-moz-transition: border-color 300ms;
|
|
-o-transition: border-color 300ms;
|
|
transition: border-color 300ms;
|
|
}
|
|
|
|
.oo-ui-toolGroup:hover {
|
|
border-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.oo-ui-toolGroup-empty {
|
|
display: none;
|
|
}
|
|
|
|
.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-labeledElement-label {
|
|
color: #000;
|
|
}
|
|
|
|
.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* OO.ui.BarToolGroup */
|
|
|
|
.oo-ui-barToolGroup > .oo-ui-iconedElement-icon,
|
|
.oo-ui-barToolGroup > .oo-ui-iconedElement-label {
|
|
display: none;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: top;
|
|
margin: -1px 0 -1px -1px;
|
|
border: solid 1px transparent;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-link {
|
|
display: block;
|
|
height: 1.5em;
|
|
padding: 0.25em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oo-ui-barToolGroup
|
|
.oo-ui-tool-active:not(.oo-ui-widget-disabled) +
|
|
.oo-ui-tool-active:not(.oo-ui-widget-disabled)
|
|
{
|
|
border-left-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool:first-child {
|
|
border-top-left-radius: 0.25em;
|
|
border-bottom-left-radius: 0.25em;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool:last-child {
|
|
margin-right: -1px;
|
|
border-top-right-radius: 0.25em;
|
|
border-bottom-right-radius: 0.25em;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled) {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
display: block;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-labeledElement-label {
|
|
display: none;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
|
|
cursor: default;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-title,
|
|
.oo-ui-barToolGroup .oo-ui-tool-accel {
|
|
display: none;
|
|
}
|
|
|
|
/* OO.ui.PopupToolGroup */
|
|
|
|
.oo-ui-popupToolGroup {
|
|
position: relative;
|
|
height: 2em;
|
|
min-width: 2em;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-handle {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 2em;
|
|
width: 2em;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
|
|
line-height: 2.6em;
|
|
font-size: 0.8em;
|
|
margin: 0 2.25em 0 1em;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-handle .oo-ui-labeledElement-empty {
|
|
display: none;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
|
|
display: none;
|
|
position: absolute;
|
|
top: 2em;
|
|
left: -1px;
|
|
z-index: 4;
|
|
border: solid 1px #ccc;
|
|
background-color: white;
|
|
box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconedElement-icon {
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) > .oo-ui-toolGroup-tools {
|
|
display: block;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
height: 2em;
|
|
width: 2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-labeledElement-label {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 2em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.oo-ui-popupToolGroup .oo-ui-tool-accel {
|
|
display: none;
|
|
}
|
|
|
|
/* OO.ui.ListToolGroup */
|
|
|
|
.oo-ui-listToolGroup .oo-ui-toolGroup-tools {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool {
|
|
display: inline-block;
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border: solid 1px transparent;
|
|
margin: -1px 0 -1px -1px;
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool-link {
|
|
display: block;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-listToolGroup
|
|
.oo-ui-tool-active:not(.oo-ui-widget-disabled) +
|
|
.oo-ui-tool-active:not(.oo-ui-widget-disabled)
|
|
{
|
|
border-top-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled) {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* OO.ui.MenuToolGroup */
|
|
|
|
.oo-ui-menuToolGroup {
|
|
border-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.oo-ui-menuToolGroup:hover {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
|
|
border-color: rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
|
|
min-width: 8em;
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-tool {
|
|
display: block;
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-tool-link {
|
|
display: block;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
padding: 0.25em 1em 0.25em 0.25em;
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
background-image: none;
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon {
|
|
/* @embed */
|
|
background-image: url(images/icons/check.png);
|
|
}
|
|
|
|
.oo-ui-menuToolGroup .oo-ui-tool:hover {
|
|
background-color: #e1f3ff;
|
|
}
|
|
|
|
/* Common */
|
|
|
|
.oo-ui-barToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled),
|
|
.oo-ui-listToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled),
|
|
.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) {
|
|
/* @embed */
|
|
background-image: url(images/fade-down.png);
|
|
background-position: left top;
|
|
background-repeat: repeat-x;
|
|
box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
|
|
}
|