mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-28 12:46:45 +00:00
1c5c13fd16
The toolbar now uses a CSS transition for its height instead of JavaScript animation through slideDown(). * The animation is on toolbar instead of toolbar-bar so that it contains the padding and borders. Otherwise it slides up until there is the top and left (quite thick) borders stacked on each other which then disappear at once. * Add transform/translateY so that toolbar also transitions when it is in floating state. * Move class addition to attachToolbar() to avoid additional reflow. Bug: T89543 Change-Id: I30a7b69b77b874d220f60ebe7f7e616cd77bcc36
82 lines
2.1 KiB
CSS
82 lines
2.1 KiB
CSS
/*!
|
|
* VisualEditor MediaWiki Initialization ViewPageTarget styles.
|
|
*
|
|
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/*!
|
|
* State | <html> classes
|
|
* Reading | ve-available
|
|
* Activate editor | ve-available ve-activated ve-activating
|
|
* Active | ve-available ve-activated ve-active
|
|
* Deactivate editor | ve-available ve-deactivating
|
|
* Deactivated | ve-available
|
|
*/
|
|
|
|
.ve-activated #toc,
|
|
.ve-activated #siteNotice,
|
|
.ve-activated .mw-indicators,
|
|
/* Most of bodyContent can be hidden as VE has an equivalent of most children
|
|
in ve-init-target (sibling of #bodyContent). However, we can't hide it
|
|
completely as subs should remain visible (for persistence with read mode),
|
|
and ve-ui-mwTocWidget is also part of #bodyContent. */
|
|
.ve-active #bodyContent > :not(#siteSub):not(#contentSub):not(.ve-ui-mwTocWidget),
|
|
.ve-activated #t-print,
|
|
.ve-activated #t-permalink,
|
|
.ve-activated #p-coll-print_export,
|
|
.ve-activated #t-cite {
|
|
display: none;
|
|
}
|
|
|
|
.ve-activating #bodyContent,
|
|
.ve-activated #firstHeading,
|
|
.ve-activated #siteSub,
|
|
.ve-activated #contentSub {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.ve-activated #firstHeading {
|
|
cursor: default;
|
|
}
|
|
|
|
/* Toolbar */
|
|
|
|
.ve-activating .ve-init-mw-viewPageTarget-toolbar,
|
|
.ve-deactivating .ve-init-mw-viewPageTarget-toolbar {
|
|
overflow: hidden;
|
|
transition: height 0.4s ease;
|
|
}
|
|
|
|
.ve-ui-toolbar-floating .oo-ui-toolbar-bar {
|
|
transform: translateY(-100%);
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.ve-active .ve-ui-toolbar-floating .oo-ui-toolbar-bar {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-utilities,
|
|
.ve-init-mw-viewPageTarget-toolbar-actions {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-actions {
|
|
font-size: 0.8em;
|
|
vertical-align: top;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-utilities > .oo-ui-buttonElement-frameless {
|
|
margin-right: 0.2em;
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-actions > .oo-ui-buttonElement-framed {
|
|
margin-left: 0.25em;
|
|
margin-right: 0.25em;
|
|
margin-top: 0.2em;
|
|
}
|