mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-12 14:35:28 +00:00
8101b6511e
* Append the toolbar before starting the scroll * If the toolbar is floating set the anchor to full height immediately. This shouldn't cause the content to jump down due to scroll anchoring: (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring) But add our own logic for it for browsers which don't support that. * Now the browser only has to deal with the scroll animation, and not the height animation of the toolbar anchor at the same time, making it smoother and less buggy. Bug: T301773 Change-Id: I61d533d40758d559b03c858e0006ef2e4f0fcd16
161 lines
3.5 KiB
Plaintext
161 lines
3.5 KiB
Plaintext
/*!
|
|
* VisualEditor MediaWiki DesktopArticleTarget init styles.
|
|
*
|
|
* @copyright 2011-2020 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/* stylelint-disable selector-max-id */
|
|
|
|
/*!
|
|
* State | <html> classes
|
|
* - mw.DesktopArticleTarget.init.css is loaded
|
|
* Reading | ve-available
|
|
* Loading editor | ve-available ve-activated ve-loading
|
|
* - mw.DesktopArticleTarget.css is loaded
|
|
* Activate editor | ve-available ve-activated ve-loading ve-activating
|
|
* Active | ve-available ve-activated ve-active
|
|
* Deactivate editor | ve-available ve-deactivating
|
|
* Deactivated | ve-available
|
|
*/
|
|
|
|
/* Only hide the #toc inside the original article, not generated ones in VE (T187636) */
|
|
.ve-active {
|
|
.ve-init-mw-desktopArticleTarget-editableContent #toc,
|
|
#siteNotice,
|
|
.mw-indicators,
|
|
#t-print,
|
|
#t-permalink,
|
|
#p-coll-print_export,
|
|
#t-cite,
|
|
.ve-init-mw-desktopArticleTarget-editableContent,
|
|
.ve-init-mw-tempWikitextEditorWidget {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ve-deactivating .ve-ui-surface {
|
|
display: none;
|
|
}
|
|
|
|
.ve-activating {
|
|
/* The surface needs to be measurable but not visible while
|
|
being setup as some nodes render based on their dimensions,
|
|
e.g. ve.ce.FocusableNode#updateInvisibleIcon */
|
|
.ve-ui-surface {
|
|
height: 0;
|
|
padding: 0 !important; /* stylelint-disable-line declaration-no-important */
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* While loading, everything except the placeholder toolbar */
|
|
.ve-loading #content > :not( .ve-init-mw-desktopArticleTarget-toolbarPlaceholder ),
|
|
/* Once activated, all uneditable content except catlinks */
|
|
.ve-activated .ve-init-mw-desktopArticleTarget-uneditableContent {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ve-activated {
|
|
#firstHeading {
|
|
/* Override the styles above to allow the heading to be selected, for copy-pasting */
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
pointer-events: auto;
|
|
cursor: text;
|
|
|
|
a {
|
|
/* Re-disable any gadget-added links inside the heading, e.g. section 0 edit links */
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
#catlinks {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
/* focusableNode highlight equivalent styling */
|
|
background: #e9f2fd;
|
|
}
|
|
|
|
a {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
position: relative;
|
|
}
|
|
}
|
|
/* stylelint-enable selector-max-id */
|
|
|
|
.ve-init-mw-desktopArticleTarget-loading-overlay {
|
|
z-index: 2;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 1em;
|
|
}
|
|
|
|
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder {
|
|
overflow: hidden;
|
|
transition: height 250ms ease;
|
|
height: 0;
|
|
padding-bottom: 2px;
|
|
|
|
/* Shadow is styled in theme files */
|
|
|
|
&-bar {
|
|
transform: translateY( -100% );
|
|
transition: transform 250ms ease;
|
|
}
|
|
|
|
&-open .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
|
|
transform: translateY( 0 );
|
|
}
|
|
|
|
&-floating {
|
|
// No height transition required when toolbar starts off floating
|
|
transition: none;
|
|
|
|
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* OOUI may not have loaded yet */
|
|
.oo-ui-element-hidden {
|
|
display: none !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
|
|
/* Section edit links */
|
|
|
|
.mw-editsection {
|
|
/* bidi isolation: */
|
|
unicode-bidi: -moz-isolate;
|
|
unicode-bidi: -webkit-isolate;
|
|
unicode-bidi: isolate;
|
|
|
|
&:before {
|
|
content: '\200B';
|
|
}
|
|
|
|
a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.mw-editsection-divider {
|
|
color: #54595d;
|
|
}
|