2013-08-01 19:14:41 +00:00
|
|
|
/*!
|
2015-07-29 13:41:30 +00:00
|
|
|
* VisualEditor MediaWiki DesktopArticleTarget noscript styles
|
2013-08-01 19:14:41 +00:00
|
|
|
*
|
2023-12-01 16:06:11 +00:00
|
|
|
* @copyright See AUTHORS.txt
|
2013-08-01 19:14:41 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
|
*/
|
2022-03-12 14:45:16 +00:00
|
|
|
/**
|
|
|
|
|
* Hide VE edit tab and section edit things for noscript users.
|
|
|
|
|
* For script users they're always visible unless and until ve-not-available is added.
|
|
|
|
|
*/
|
2013-08-01 19:14:41 +00:00
|
|
|
|
2024-05-16 04:54:42 +00:00
|
|
|
@import 'mediawiki.skin.variables.less';
|
2017-10-26 20:04:07 +00:00
|
|
|
/* stylelint-disable selector-max-id */
|
2016-05-17 17:32:58 +00:00
|
|
|
|
2022-03-12 14:45:16 +00:00
|
|
|
.client-nojs,
|
|
|
|
|
.ve-not-available {
|
|
|
|
|
#ca-ve-edit,
|
|
|
|
|
.mw-editsection-divider,
|
|
|
|
|
.mw-editsection-visualeditor {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2013-08-01 19:14:41 +00:00
|
|
|
}
|
mw.ViewPageTarget: Get rid of FOUC on edit section brackets
We don't have a FOUC on the appearing of the 'edit' link. That
one is handled quite intelligently:
* Via the stylesheet that is also loaded in noscript mode, its
(hidden) appearance is already predetermined. So as soon as
those elements are seen by the browser they style correctly
for users without JavaScript (display: none).
* This same stylesheet also hides it for users with JavaScript
but where VE is not available (e.g. due to browser support).
While ve-not-available is added very early on (before
document ready), it could in theory cause a short FOUC, but
that's okay. We simply don't know that VE isn't supported
until then. We optimise for the common case (JavaScript
enabled, VE available), while still ensuring that it is
always hidden in noscript, and is hidden as soon as possible
when VE turns out not to be available.
For some reason, one small detail (the little bit of whitespace
added inside the brackets), was left out of this and was
implemented by adding the class 'mw-editsection-expanded' to them
from a document ready handler.
* First step, get rid of the script that adds this class and
use ve-available instead. That means they're styled
correctly much earlier (we add the class to <html> before
document ready). This can still cause a brief FOUC, though
in most cases they're correct from the start.
* Step two, make brackets expand by default for script users,
and let ve-not-available reset it. This way, like with edit tabs,
a FOUC will never happen for ve-available. And even for
ve-not-available, a FOUC is rare since we add it before
document ready via <html> look-ahead styling.
There was still a brief reflow jump because of negative margins
between two paint events. One was undoing the other at a later
time. These negative margins are a remnant of when we were doing
animations (follows-up I4b9c47fd65a70). They were added to reduce
reflows and content shift, but were now actually causing them.
Removed "padding-right" from mw-editsection, and negative margin
from the brackets.
Also:
* Don't add inline 'style="direction: ltr;"' on every single
editsection throughout the DOM. This was the only operation we
were doing unconditionally. While I doubt the need of it in
general, we can at least allow MediaWiki to do it right, and
only add the override if needed. This saves quite a few DOM
operations.
Change-Id: I7a729edc2cd4a66ebc0ad6935ffd02cb9b948bff
2014-05-07 00:08:53 +00:00
|
|
|
|
2017-10-26 20:04:07 +00:00
|
|
|
/* stylelint-enable selector-max-id */
|
2016-05-17 17:32:58 +00:00
|
|
|
|
mw.ViewPageTarget: Get rid of FOUC on edit section brackets
We don't have a FOUC on the appearing of the 'edit' link. That
one is handled quite intelligently:
* Via the stylesheet that is also loaded in noscript mode, its
(hidden) appearance is already predetermined. So as soon as
those elements are seen by the browser they style correctly
for users without JavaScript (display: none).
* This same stylesheet also hides it for users with JavaScript
but where VE is not available (e.g. due to browser support).
While ve-not-available is added very early on (before
document ready), it could in theory cause a short FOUC, but
that's okay. We simply don't know that VE isn't supported
until then. We optimise for the common case (JavaScript
enabled, VE available), while still ensuring that it is
always hidden in noscript, and is hidden as soon as possible
when VE turns out not to be available.
For some reason, one small detail (the little bit of whitespace
added inside the brackets), was left out of this and was
implemented by adding the class 'mw-editsection-expanded' to them
from a document ready handler.
* First step, get rid of the script that adds this class and
use ve-available instead. That means they're styled
correctly much earlier (we add the class to <html> before
document ready). This can still cause a brief FOUC, though
in most cases they're correct from the start.
* Step two, make brackets expand by default for script users,
and let ve-not-available reset it. This way, like with edit tabs,
a FOUC will never happen for ve-available. And even for
ve-not-available, a FOUC is rare since we add it before
document ready via <html> look-ahead styling.
There was still a brief reflow jump because of negative margins
between two paint events. One was undoing the other at a later
time. These negative margins are a remnant of when we were doing
animations (follows-up I4b9c47fd65a70). They were added to reduce
reflows and content shift, but were now actually causing them.
Removed "padding-right" from mw-editsection, and negative margin
from the brackets.
Also:
* Don't add inline 'style="direction: ltr;"' on every single
editsection throughout the DOM. This was the only operation we
were doing unconditionally. While I doubt the need of it in
general, we can at least allow MediaWiki to do it right, and
only add the override if needed. This saves quite a few DOM
operations.
Change-Id: I7a729edc2cd4a66ebc0ad6935ffd02cb9b948bff
2014-05-07 00:08:53 +00:00
|
|
|
/* For script users, expand brackets by default, unless and until ve-not-available is added */
|
|
|
|
|
|
2022-03-12 14:45:16 +00:00
|
|
|
.client-js {
|
2024-08-02 07:55:53 +00:00
|
|
|
.mw-editsection-bracket {
|
|
|
|
|
&:first-of-type {
|
|
|
|
|
margin-right: 0.25em;
|
|
|
|
|
margin-inline: 0 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:not( :first-of-type ) {
|
|
|
|
|
margin-left: 0.25em;
|
|
|
|
|
margin-inline: 0.25em 0;
|
|
|
|
|
}
|
2022-03-12 14:45:16 +00:00
|
|
|
}
|
mw.ViewPageTarget: Get rid of FOUC on edit section brackets
We don't have a FOUC on the appearing of the 'edit' link. That
one is handled quite intelligently:
* Via the stylesheet that is also loaded in noscript mode, its
(hidden) appearance is already predetermined. So as soon as
those elements are seen by the browser they style correctly
for users without JavaScript (display: none).
* This same stylesheet also hides it for users with JavaScript
but where VE is not available (e.g. due to browser support).
While ve-not-available is added very early on (before
document ready), it could in theory cause a short FOUC, but
that's okay. We simply don't know that VE isn't supported
until then. We optimise for the common case (JavaScript
enabled, VE available), while still ensuring that it is
always hidden in noscript, and is hidden as soon as possible
when VE turns out not to be available.
For some reason, one small detail (the little bit of whitespace
added inside the brackets), was left out of this and was
implemented by adding the class 'mw-editsection-expanded' to them
from a document ready handler.
* First step, get rid of the script that adds this class and
use ve-available instead. That means they're styled
correctly much earlier (we add the class to <html> before
document ready). This can still cause a brief FOUC, though
in most cases they're correct from the start.
* Step two, make brackets expand by default for script users,
and let ve-not-available reset it. This way, like with edit tabs,
a FOUC will never happen for ve-available. And even for
ve-not-available, a FOUC is rare since we add it before
document ready via <html> look-ahead styling.
There was still a brief reflow jump because of negative margins
between two paint events. One was undoing the other at a later
time. These negative margins are a remnant of when we were doing
animations (follows-up I4b9c47fd65a70). They were added to reduce
reflows and content shift, but were now actually causing them.
Removed "padding-right" from mw-editsection, and negative margin
from the brackets.
Also:
* Don't add inline 'style="direction: ltr;"' on every single
editsection throughout the DOM. This was the only operation we
were doing unconditionally. While I doubt the need of it in
general, we can at least allow MediaWiki to do it right, and
only add the override if needed. This saves quite a few DOM
operations.
Change-Id: I7a729edc2cd4a66ebc0ad6935ffd02cb9b948bff
2014-05-07 00:08:53 +00:00
|
|
|
}
|