Notifications have a deliberately high z-index in core (10,000) by
design. They are supposed to appear on top of every popup, including
modal windows (e.g. OOUI modals z-index of 101).
Notifications are ephemeral and dismissable with a single click
so the fact that they temporarily block a small part of the UI
is not usually an issue, although their placement tries to
reduce the likelyhood of this.
Bug: T312783
Bug: T312778
Change-Id: I2f426ec71995bf810355b071cb966a4dd922dc64
The feature flag seems to incorrectly be applying inside legacy
Vector causing an unexpected visual regression.
Bug: T322673
Change-Id: I3c66ddeb4de8c5a31a63025141e04b47e2bcb83c
`.mw-parser-output` needs to be can be present for both the normal
preview and the realtime preview. It appears only the normal preview
adds the "limited-width" classes.
Moving `.mw-parser-output` out of that selector seems to work.
Bug: T322337
Change-Id: I575cd50615b6bf0d1cfa73c827169f8bf17fa2d3
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.
Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
Preview width is set at 60em, but the container as a different
font-size to .vector-body and so the preview was displaying at
the wrong width.
This change removes the font-size from the grantparent and
re-sets it on the contents of #wikiPreview, ensuring that the
final size matches the actual non-editing width of the body
content.
In addition, the 'submit' action is added to the list of those
excluded from constrained width, so that the editing textarea
remains at full width even when previewing.
Bug: T312963
Change-Id: I1a1df32b00d5faecb73f8c53256342d356a9352c
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag
Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
Currently clicking on icons will result in the icon changing
style. This is fixed in the follow up patch
I4a0637fc19cf07d545b75fa55e15010b74fc474f
Bug: T257143
Change-Id: Ief51ac0bcab20fc87edf747b5347a5ef9dfdf36f
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:
[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)
[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)
Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.
Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled
Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.
Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
As we continue to live with software like 2010 wikitext editor for
a chunk of our users in foreseeable future, let's at least remove some
obsolete code sent down the wire.
Note that I haven't touched this code as part of If51f20137a00, but
when thinking about this again while doing a final code search
it seems appropriate to remove this the highly customized code
here in contrast to normal 'library' styles.
Bug: T258766
Change-Id: Id4993dcb5b5be6a399800d9c07e26ebe145a8372
Fixes upstream in ULS (Ie9e30af5468aea9803d77c9a36e480ba2b2e86a0)
mean these are no longer necessary
Bug: T289630
Change-Id: I1edee874a42b070bc319648496ae80a01b6365fb
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed
Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
This reverts commit c595cc5106.
Reason for revert: Doesn't work. Must be done inside Wikibase extension.
See Ic576d8de9377813f7fe2d48841c1b6f303579728
Bug: T287206
Change-Id: I9904a72e4965a4124e4784501a3b4e77167a2971
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.
This commit:
* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.
* The padding-top previously in UserLinks is no longer needed as a
result of the above point.
* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).
Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
* Revises UserLinks.less according to the T285786 spec.
* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.
* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.
* Places an end margin on the search box to add space between the user
links and the search box.
Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.
This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.
Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile
Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
Separating most LESS files into 2 ResourceLoader modules and a common
folder:
- skins.vector.styles
- skins.vector.styles.legacy
- common
This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.
Inside each directory are separate folders for `layouts` and
`components`.
The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.
Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.
This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.
Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.
Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
* ULS makes the language button text font weight normal on bold,
reset this.
* Because our icon is non-standard our left margin is also non-standard.
Adjust.
* Remove opacity on language button (it applies to more menu because of
the label text color)
Bug: T268241
Change-Id: Ie9b275a857e8bcb7b767446f0523954134751659
On beta cluster, ULS is adding a margin to the language button
meaning it is not vertically aligned.
Follow up to ac62386909
Change-Id: I4b85c391543078da7ef813cf4ddaf30d92be3b8d
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton
Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule
Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)
Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.
Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
Replacing deprecated `@colorFieldBorder` with WikimediaUI Base equivalent
`@border-base` shorthand.
Also replace `@borderRadius` with new base and static `background-color`
values.
Depends-On: I2e2277957b79b81909b80a6c0b7b2220be6ba903
Change-Id: I90bb0eb0c2206483f71f0553dfb590d9df2c5781
Move all the LESS `z-index` settings to variables.less so it's easy to
conceptualize how UI will be layered. jQuery CSS rules are untouched but
documented.
Also, remove the seemingly redundant re-setting of the `mw-searchButton`
`z-index`:
#mw-searchButton
z-index: 1;
}
This rule was added in 0c77e4f.
The sidebar work will require `z-index` properties and this refactor
eases the comprehension of those changes, as well as prevents the
accrual of more `z-index` technical debt.
Bug: T246419
Change-Id: Ic112a0ee3f701f87432838797be45c6069fdb522
Some LESS parsers will get confused with the lack of file extension.
It's better to be explicit and in alignment with recent change in core
I379334d7729e587a2a00.
It was already weirdly mixed in this repo with some imports featuring
extension and some not.
Change-Id: If5065cf9e30289de9b4fd33315bd65b75959ecb7
Unifying variable naming to property-identifier-modifier scheme, while
also collecting all non-print values variables in corresponding file.
We will amend the `em` based values to calculations that will enable
rendered full pixel values and also fix some connected
usability issues in the future.
Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
If RelatedArtcles uses the SkinAfterContent hook (depends-on patch)
and we move the hook out of the main content block (parent patch),
it needs some styles to remain consistent.
Bug: T181242
Change-Id: I2c5d4034890a5164896c1ef0570b31465a275890
Depeds-on: Iebd759c0d1a536768d18953f372664df762d9e04
These removed styles match no elements in the
Special:Preferences page since the OOUI transformation.
Bug: T208923
Change-Id: Iccbdcea5d5f769edfd8640c536e31289da9ee954
Removing further CSS for Internet Explorer 6.
Follow-up to I0f98c61cf9108c0a91769e9b7044023b01f974ed.
Change-Id: I85a7570c97f9b618a7946dc20367b54e72d31b3e
Vector is the only skin that does this, setting 'position: relative'
for .oo-ui-windowManager-modal (normally 'position: static') and for
.ve-ui-overlay-global (normally 'position: absolute').
The override for .oo-ui-windowManager-modal caused it to create a new
stacking context, which is the only reason the 'z-index' override
worked. Use the right selector to override 'z-index' instead.
The override for .ve-ui-overlay-global was completely pointless and
it's surprising that it never broke anything.
Change-Id: Icd1dec43e2da9ef2090b18145099838de3a7890a
Override default font size for .oo-ui-defaultOverlay (0.8em) to the
same as content in Vector (0.875em).
Make it appear on top of the personal menu too.
Bug: T183069
Depends-On: I53888581f9e1da3b036166613c46cbc1085aa55e
Change-Id: I459aad271c0c15248e54e312b8bdc44ed244733b
In attempts to fix RCFilters menu overlap with other UI elements when
opening upwards, I1fe6b8b2c9 adds `z-index` rule to overlay element.
But as part of the same rule, `position: relative` is added which
cascades the absolute positioned overlay, causing it to appear in
natural flow of document, which causes menu positioning parameters
to render the menu detached from RCFilters.
Bug: T183442
Change-Id: I3f7db005730d045b2278753cfd655169a96c60a9
Currently the personal bar displays on top of it. This wasn't
visible until some popups started opening upwards rather than
downwards. We should fix this better some time...
Bug: T182711
Change-Id: I1fe6b8b2c9c1e4d12a9a4d2d1edd1ead269780cf
The feature was reverted in 5205405385397782b5288b429f49c9d8c97ac6c6 almost a
year ago, so it's pretty safe to say this styling is unnecessary.
This essentially reverts 2466e550e5.
Change-Id: I88b6465d5554d334cc34893bb0acf548a5fc440b
Zopfli is the most efficient DEFLATE compression algorithm, trading run-time
performance for file sizes that are typically 3-8% smaller than those produced
by zlib with the maximum compression setting. Its output is Deflate-compatible,
so no specialized decoder is needed.
This change was created by running zopflipng against all the PNG files in this
repository. The exact invocation was:
git ls-files --exclude-per-directory=.gitignore -- '*.png' \|
parallel zopflipng -m -y --iterations=1000 --filters=01234mepb {} {} \;
Files which zopflipng was not able to compress more efficiently were left unmodified.
Change-Id: Iffb64007f312cc3afcd335a636847d42648b10f5
Task: T127608
VE keeps the global windowmanager inside a global overlay div,
which has a default z-index of 1. Ensure this is overriden in
Vector. Requires extra specificity due to stylesheet load order.
Bug: T126135
Change-Id: I5ebb4e59e3714dfaa3d755ecf6285009efe7b62a
No stable versions of IE have an '-ms-linear-gradient'. Any lines using
the same have been removed.
Bug: T100285
Change-Id: Idb835809e297513c46cab26ee4f1caa5f9fa6a60
In Ib81a60c7, /* @noflip */ was meant to apply to an entire block, which
doesn't happen in LESS. This commit fixes that by using @noflip for
every line that it needs to apply to.
Also change spaces to tabs.
Change-Id: I3b3e82397f8bc1b7466805d4ed9ce315df04d057
The anchors introduced in I562e437e use a small width to account for
skins with narrow gutters. Since Vector has a wider gutter, the anchors
should use the available width.
Change-Id: Ib81a60c789c1225c93bf8d694a02e67a5d131eac
This patch fixes the problem by removing the following
from jquery.ui.theme.css:
.ui-widget-content a { color: #362b36; }
.ui-widget-header a { color: #222222; }
Bug: T85857
Change-Id: I0fbca3aca8e0d40c794dd1e20d4d8c4fdfd79aa1
Follows-up 3cb2ccd87863abb8a99ed7d970730ae9e4138fcc.
Various structural changes were made in jQuery UI 1.9, and the Vector
theme was not updated to accommodate for those changes.
There have also been lots of small improvements to the base theme (which
is substituted inside the Vector theme) that were made over the past few
releases that weren't backported (such as Ib099282484b for bug 67243).
And there were two new modules in jQuery UI 1.9 (menu and spinner) that
were lacking Vector theme stylesheets.
Source files generated with http://jqueryui.com/themeroller by
downloading the theme for v1.9.2 (except for jquery.ui.button.css). See
the permalink in jquery.ui.theme.css.
For jquery.ui.button.css, use latest master of jQuery UI 1.11.2-alpha:
* https://github.com/jquery/jquery-ui/blob/8825d93dc8/themes/base/button.css
This is from a newer version of jQuery UI but user MarkTraceur suggested
the file for jquery.ui.button had fixes that were not backported to 1.9
and does not cause problems with Wikimedia Commons.
Documented our patches in a PATCHES file.
Change-Id: I2a31e4a3d969a966935a50392deafd756e2b9fca
Applying fix from change Ib3e0fc57 to Vector's jQuery UI styling as
it should have been fixed in both places. The on-wiki fix was removed
prematurely, as the bug was only fixed for non-Vector skins.
This fixes bad formatting of audio player on Wikipedia (see bug).
Bug: 71601
Change-Id: I80bef309dca9ea551134341037f6d96ad0f5c7e7
