mediawiki-extensions-Visual.../modules/ve-mw/preinit/styles/ve.init.mw.DesktopArticleTarget.init.less
Ebrahim Byagowi 84557b6d13 Move edit section colorings to core
Bug: T372436
Depends-On: I691dbef2313e006de4b7d096232c531d81bdd380
Change-Id: If6c606cd6d3816b9286aee0ffd4d96be704521d4
2024-08-14 22:24:00 +03:30

157 lines
3.9 KiB
Plaintext

/*!
* VisualEditor MediaWiki DesktopArticleTarget init styles.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
@import 'mediawiki.skin.variables.less';
/* 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
*/
.ve-active {
// Hide banners only on skins where they would be shown in the editable area (T324055)
.ve-init-mw-desktopArticleTarget-targetContainer #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;
}
}
/*!
* Styles to make the original read view look disabled
* Don't "disable":
* - while loading: the placeholder toolbar
* - while loading: the target, as this momentarily appears at the end of the loading sequence
* and contains the real toolbar
* Do "disable":
* - while loading: anything marked "original content" as on the second load this is where the read mode content will be
* - after activation: anything marked as "uneditable content"
*/
.ve-loading .ve-init-mw-desktopArticleTarget-targetContainer > :not( .ve-init-mw-desktopArticleTarget-toolbarPlaceholder ):not( .ve-init-mw-desktopArticleTarget ),
.ve-loading .ve-init-mw-desktopArticleTarget-originalContent,
.ve-activated:not( .ve-loading ) .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 {
.ve-init-mw-desktopArticleTarget-targetContainer #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;
}
}
.ve-init-mw-desktopArticleTarget-originalContent #catlinks {
cursor: pointer;
&:hover {
/* focusableNode highlight equivalent styling */
background: #e9f2fd;
}
a {
opacity: 1;
}
}
}
/* 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: @background-color-base;
}
}
}
/* OOUI may not have loaded yet */
.oo-ui-element-hidden {
display: none !important; /* stylelint-disable-line declaration-no-important */
}
/* Section edit links */
.mw-editsection {
&::before {
content: '\200B';
}
a {
white-space: nowrap;
}
}