Commit graph

50 commits

Author SHA1 Message Date
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
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
2021-07-20 18:52:40 +00:00
Clare Ming c4efbb3d6a Update styles for talk message at lower port widths.
Bug: T284243
Depends-On: Icb349987c5f5939b7f4ffa477ac1ecb35b5425e7
Change-Id: I69bc3a1aea6b5a640b91c67f5beae4c263c8d31a
2021-07-13 15:47:08 -06:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
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
2021-06-30 21:43:35 +00:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
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
2021-04-08 15:47:56 +01:00
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
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
2021-03-30 22:13:50 +00:00
jdlrobson 127422e4c6 Language button skinStyle overrides
* 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
2021-03-08 11:11:07 -08:00
jdlrobson c9c00e71b0 Disable margin in ext.uls.compactlinks module
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
2021-03-04 23:25:55 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* 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
2021-03-01 20:01:45 +00:00
jdlrobson 0e0ec99c81 Language button - design fixes
* 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
2021-02-08 19:03:02 +00:00
jdlrobson f083eb2716 Add language icon to language button
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
2021-02-03 15:38:30 +00:00
Volker E f5d55bcf54 Replace deprecated @colorFieldBorder variable and use others
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
2020-04-28 01:42:09 +00:00
Stephen Niedzielski b80ad85bb1 [dev] [Less] centralize z-indices
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
2020-04-02 15:05:22 -06:00
Volker E f2695a5bf3 hygiene: Make LESS imports non-ambigious
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
2019-10-25 20:54:49 +00:00
Volker E 6cc10e47ac Replace fixed value with mediawiki.ui variable
Change-Id: Ie2f2c0519f543f7131ef62c0d94c8de27481d008
2019-09-26 18:54:56 -07:00
Volker E 9055676640 Unify LESS variable naming scheme for @font-size-* variables
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
2019-09-26 18:53:00 -07:00
Isarra e08fc06fbd Style RelatedArticle cards
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
2019-06-20 18:14:27 +00:00
jenkins-bot 10eaeeb5d3 Merge "Match frame and overlay appearance of ui-dialog to match WMUI" 2019-04-01 19:39:47 +00:00
Ed Sanders e2abfbd0db Match frame and overlay appearance of ui-dialog to match WMUI
Change-Id: I2098d28310e7fad61e7e9961b536bcac2890e1fd
2019-04-01 15:10:12 +01:00
Ed Sanders 10ed1061bf Remove jquery.ui.spinner skin styles
Bug: T219403
Depends-On: Ifed9074cb49d146b4cd7e366bfc028854daf027b
Change-Id: If10a09e2bd2266244c4916ce480a77048de8736d
2019-03-28 19:19:41 +00:00
Volker E 221b0b165a Remove obsolete Special:Preferences styles after its transformation to OOUI
These removed styles match no elements in the
Special:Preferences page since the OOUI transformation.

Bug: T208923
Change-Id: Iccbdcea5d5f769edfd8640c536e31289da9ee954
2018-11-07 12:50:57 -08:00
Volker E 6c3e0b62f2 Use list-style shorthand with x-browser compatible values
Change-Id: I6e47cb2dc406b9cfa3e2ca9b63f8cecce7c59ce1
2018-10-15 19:13:07 -07:00
Volker E 0f7a56e95c Remove IE 6 specific code
Removing further CSS for Internet Explorer 6.
Follow-up to I0f98c61cf9108c0a91769e9b7044023b01f974ed.

Change-Id: I85a7570c97f9b618a7946dc20367b54e72d31b3e
2018-05-24 02:17:30 +02:00
Bartosz Dziewoński 1f9f35e3f8 Use consistent font size for OOUI dialogs
Everything is 14px (0.875em) now. This overrides 0.8em from MW core.

Bug: T97631
Change-Id: I978de29a082768ecebbc1750a8d09481998979a8
2018-03-20 13:02:43 +01:00
Bartosz Dziewoński ce97818dd2 OOUI: Remove confusing 'position' override
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
2018-01-16 19:25:38 +00:00
Bartosz Dziewoński c573554c23 OOjs UI: Fix z-index and font size for default overlay
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
2017-12-27 06:32:51 +01:00
Moriel Schottlender bf698128f2 Move the 'rcfilters overlay' rule to the RCFilters stylesheet
Depends-On: I8357ef2ff0fe4f46b9ee665ef068624de0afd2e5
Change-Id: Ie36eeddc46c8ea3d154a006fed2fe578be1cd05c
2017-12-22 10:04:15 -08:00
petarpetkovic b0f65a08df Fix detached RCFilters menu
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
2017-12-22 14:07:22 +01:00
Bartosz Dziewoński d4eabd9d10 Fix z-index for RCFilters' overlay
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
2017-12-12 23:53:09 +01:00
Ed Sanders e3effd4201 mw.notify: Remove rules duplicated from core
Change-Id: Ibaebea290b2a912fdc9914cfc12d7916a0fe1d18
Depends-On: I157e41631c4a09842b869215b0d6dbb99c1a4d36
2017-11-29 16:01:50 +00:00
Volker E a51f69ca8d Replace colors on Special:Preferences view with WikimediaUI ones
Replacing outdated colors on Vector's Special:Preferences.

Bug: T173607
Change-Id: I4d23fb4bfcd3789e3f18fa7ed8247921a3557727
2017-08-18 15:42:33 -07:00
Jack Phoenix d575e3878a Optimization: move styles specific to redirect pages out of common.less
HT MatmaRex

Change-Id: I6169692547378379dbc935976ad83cf4f366eeeb
2017-06-15 16:13:42 +03:00
Ed Sanders e5eaa3e99d Match mediawiki.notification styles to OOUI dialogs
Reduces border radius and uses grey border.

Bug: T58313
Change-Id: Ia284f1ac99f06c8ec4f7032cd2366687ecb70e19
2017-04-10 18:25:13 +00:00
Ed Sanders a1fbc27f60 Remove specificity hack for mw.notification
It isn't required.

Change-Id: I17e2c3bcb63f44fccaff01d51a77f7e728252807
2017-04-10 17:01:31 +01:00
James D. Forrester 0019f6d5a5 build: Introduce stylelint and make pass
Change-Id: I48d542580d767df2d17ce4c6668e9e233a0f7904
2016-11-29 08:40:03 -08:00
Matt Russell f71e92733a Remove mediawiki.sectionAnchor
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
2016-02-23 18:49:01 +11:00
Ori Livneh cbad669fa5 Compress PNGs with zopflipng
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
2016-02-20 20:35:56 +00:00
Ed Sanders 1cce1de1be Apply global overlay z-index to ve-ui-overlay-global
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
2016-02-06 21:40:40 +00:00
Derk-Jan Hartman 33d736d0f2 Rework Vector style of Preferences to prevent FOUC
Depends on: I24d9b16

Bug: T115692
Change-Id: I59f0f4538132e60a457c5c93139c04fff24fd2b2
2015-11-08 19:43:21 +00:00
Ed Sanders 15a990b888 Apply personal bar z-index hack to modal OOUI window managers
Bug: T105300
Change-Id: I1b618b76f0ed917aad74394881115399d9636030
2015-08-08 14:15:06 -07:00
jenkins-bot 82d7a370f2 Merge "Style for notification types" 2015-08-04 22:55:58 +00:00
Fomafix 7632b8f779 Use body instead of .mediawiki to increase CSS selector specificity
Change-Id: Ie583ef2f98e3c0e58e06c8ac289dc04ccee07329
2015-08-04 17:19:56 +00:00
Fomafix d6188be309 Style for notification types
Vector styles for I2d7305d9b62ebddc70e7f787e76e752b8b78d570.

Bug: T61099
Change-Id: I48fbbdc85b138813146a3f8e6aa4caf301ca6c96
2015-08-04 16:12:39 +00:00
Smriti.Singh b7a1d83ec5 jquery.ui.button.css: Remove '-ms-linear-gradient'
No stable versions of IE have an '-ms-linear-gradient'. Any lines using
the same have been removed.

Bug: T100285
Change-Id: Idb835809e297513c46cab26ee4f1caa5f9fa6a60
2015-05-27 13:59:53 +03:00
Vivek Ghaisas fad72e2c35 Fix @noflip use in mediawiki.sectionAnchor.less
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
2015-02-26 22:07:31 +00:00
Vivek Ghaisas 2466e550e5 Change styling of clickable link for section headers
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
2015-02-23 01:29:21 +05:30
paladox a16d29f8a8 jquery-ui: Remove dark color from links inside dialogs
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
2015-01-07 01:10:01 +00:00
Timo Tijhof d60c8d61aa Update jquery.ui Vector theme to 1.9.2
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
2014-12-16 21:17:56 +00:00
kaldari 5cd72b88b1 Synchronizing Vector jQuery UI styling with core to fix regression
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
2014-11-30 16:05:06 -08:00
Bartosz Dziewoński d28f09df31 Move Vector skin from core
This is the final step of the process described at
<https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>.

Corresponding core change: Idfc38503.

Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 13:38:34 +02:00