Commit graph

965 commits

Author SHA1 Message Date
Jon Robson 3fbf5b49f0 Drop unused code relating to old limited width toggle.
Follow up to Ie2617e2fa83b6a888a7a2799cc39f048731dc60d

Bug: T367591
Change-Id: I270f1902f40946f31de29777735dee2e10ebfebe
2024-09-11 00:12:59 +00:00
Ed Sanders 317107b3f6 Reset border-radius on links
This was introduced in I16411a7ea47, which only documented the
changes to the colors used. An unintended side effect was inheriting
the standard border-radius, but that should be applied in a
more targetted manner to avoid conflicting with existing
UI components (e.g. OOUI toolbars).

Bug: T373989
Change-Id: I0615ce1594d66cb5207cd119597ae4d0765e94af
2024-09-04 12:06:33 +01:00
Jon Robson 0a4f5c8dc9 Language button dropdown arrow should be progressive color
Currently black.
Flagged by Pixel.
Follow up to 010e7e92d

Bug: T363920
Change-Id: Iaa9ea69c8a1f1b50bb8eedda1acc2c657bef0132
2024-08-29 20:27:57 +00:00
Jon Robson 9695647608 VISUAL CHANGE: Use mask-image for all Vector icons
Visual changes are subtle, but impact 43 scenarios. The color
and positioning is slightly modified to match Codex.

Bug: T363920
Change-Id: Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
2024-08-29 17:17:35 +00:00
Bartosz Dziewoński cb58da455e Fix workaround for position: sticky disabling subpixel rendering
Follow-up to badd229bab. Moving
`position: sticky` to the same element as `contain: paint` defeated
the workaround. Move it to the parent elements again to make it work.

Bug: T373066
Change-Id: Ic942bfd599661a29cf7b2dbb6c6cc2ec521b8c82
2024-08-22 02:31:19 +02:00
Jdlrobson 2d281db7b1 Revert "Prevent dark-mode styles from affecting print media"
This reverts commit b3ca12e628.

Reason for revert: Icons are appearing black on black in dark mode
in origin/wmf/1.43.0-wmf.18.

Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
2024-08-13 07:24:28 +00:00
Jdrewniak b3ca12e628 Prevent dark-mode styles from affecting print media
Prevents dark-mode styles from affecting print media
by adding `@media screen` to dark-mode related styles.

Bug: T371331
Change-Id: I2ed7fbfc078c6d738c13a71c677783f7ccea2582
2024-08-08 16:06:33 -04:00
Jon Robson e00536a6b3 Dark mode: Images should have background
Bug: T370074
Change-Id: Ibd49b2ccfa77d4f0e677e0726738c831ad962c28
2024-08-01 18:55:13 +00:00
bwang 59e2611f94 Force light theme in print styles, remove unnecessary css variables
Bug: T366362
Change-Id: I5e8f7c0c88793e1c3ebebf1d67df4c5c05eb0174
2024-07-02 16:02:55 -05:00
Jon Robson 0ef145af08 Add mw-no-invert and oo-ui-image-invert to OOUI icon exclusion list
This is used on Special:Block and the OOUI search widget for links

Bug: T368483
Change-Id: Iaae45a12029c26e4d2c793f4040c90df65495c02
2024-06-26 20:22:57 +00:00
Amir Sarabadani c413509dcb Footer: Add styles for buttons
What:
Add styles for the footer buttons that reduces the padding from 15px to
8px on each side and adds an explicit background color.

Why:
This makes it follow the design spec outlines in T256190#9770626 and
fixes showing the buttons in the dark mode T256190#9900443

Bug: T256190
Change-Id: Iae144d554b5023fd3589ea29ae2d3c57c17e679f
2024-06-25 16:43:41 +02:00
Jdrewniak add9bfc3fc Remove OOUI overrides
This is in order to enable dark mode in echo and VisualEditor

Depends-On: Ibdfeb69c7c6f9dbf0e237c04c7f0f38a8306629a
Bug: T366322
Bug: T366737
Change-Id: I01cdde979b2ddf64d54013466a3fe51a493860cc
2024-06-20 10:33:04 -08:00
bwang c8074d2355 Fix codex link styles overriding other link styles
Bug: T367844
Change-Id: I4a5514278f045118ebdd9ee72432087a1f84d83c
2024-06-18 10:57:44 -05:00
bwang 75fce0d5bc Remove external link variables, and replace content-links modules with Codex
Change-Id: I55d062de1624b77bc5214942368a3fbd545635df
2024-06-17 14:35:33 -05:00
Jon Robson cd44419c95 Use codex link styles in Vector, remove old link color variables
Visual changes: blue and red link colors have been updated to match codex, including hover/focus/active state colors

Bug: T366515
Change-Id: I16411a7ea47ae26c7e67a71f83e0521962c8ce61
2024-06-17 14:23:50 -05:00
jenkins-bot bbc7078df5 Merge "[Optimization] Remove bottom dock styles from critical path" 2024-06-17 16:13:27 +00:00
Jon Robson 426ff06241 [Optimization] Remove bottom dock styles from critical path
These require JavaScript to work, so hide it by default and then
style it once JavaScript has loaded.

Change-Id: I34ded9f279600945ab18dd7ecfd69d22e141a324
2024-06-14 22:56:52 +00:00
Jan Drewniak d8705f98bf Followup to 71c532e Separate out indicator and icon selectors
@OOUIIndicatorSelectors was accidentally added to
the selector that prevents double inversion.

Bug: T365764
Change-Id: Idc3e2ac9ef50270512b9786db4f525a9ba4754a3
2024-06-14 21:21:29 +00:00
Jon Robson 71c532e542 Separate out indicator and icon selectors
Follow up to I584491c280d93f18a48d8c90c4d8a6628f1a672f

Since these selectors are nested, this was generating unexpected
selectors, meaning the invert wasn't applying correctly to indicators.

This is evident on Special:Search

Bug: T365764
Change-Id: I40f8a8ad6598d145a6284c831e0cef944c5d7e75
2024-06-13 23:10:10 +00:00
jenkins-bot 74d5cd5cfc Merge "build: Updating stylelint-config-wikimedia to 0.17.1" 2024-06-13 12:22:06 +00:00
Volker E 7e6e3bcedb styles: Apply inversion on certain OOUI icons and indicators
In order for most OOUI black icons and indicators to be inverted
correctly, we need to apply the inversion to a limited number of
elements by a general class.
Applying here to keep OOUI library MediaWiki agnostic.

Bug: T365764
Depends-On: I792e89a8253a426b8c723486b96cb87bf9e1d85d
Change-Id: I584491c280d93f18a48d8c90c4d8a6628f1a672f
2024-06-12 15:31:01 +00:00
Steph Toyofuku 799c2be819 Remove not selector and target OOUI icons for inversion only
A number of icons using the vector-icon class that have been converted
to codex are being double inverted by this rule.  Instead, switch it to
enumerate the full list of OOUI icons and invert them, so that
subsequent codex migrations can be easier as well

Also bumps the bundle size to account for the increase in bytes

Visual change for the table of contents arrows being fixed, ideally not
for anything else

Bug: T365951
Bug: T365580
Change-Id: Ia389e73c72432eb5f7a2df4ff9b48593751bc184
2024-06-11 16:51:14 -07:00
VolkerE 695e355f95 Reapply "styles: Replace deprecated breakpoints"
This reverts the revert commit 4da9b57dcf
and adds updated hardcoded values.
Note that we're also planning a better maintainable solution
with JS constants as Codex library output in T366622

Reason for revert: Working CSS changes now including hardcoded values

Given the issue described in T367103 with max width breakpoints,
these are left hardcoded at their new values with a FIXME to update
these later.

VISUAL CHANGES: there are 3 visual changes with Pixel with this change
- all 3 apply to legacy Vector and look like false positives.

Bug: T349793
Change-Id: I7d151c4ba608cabebe9375b960c0c18b3992954f
2024-06-10 23:09:26 +00:00
libraryupgrader 5763df6bf4 build: Updating stylelint-config-wikimedia to 0.17.1
Change-Id: I7c1411a3aac14cf6fb4fdbb762b0de22b348b73f
2024-06-10 14:00:06 -04:00
jenkins-bot 7a2a013dfe Merge "Revert "styles: Replace deprecated breakpoints"" 2024-06-07 22:24:50 +00:00
Jdrewniak 4da9b57dcf Revert "styles: Replace deprecated breakpoints"
This reverts commit dd5b98515d.

Reason for revert: There are some hard-coded values in JS that reference these breakpoint, and need to be updated along with this change.

Change-Id: I4a16959d98c12ea1ca8b5b848f9cea0b9cea66f5
2024-06-07 21:05:50 +00:00
jenkins-bot 2d2a1acdee Merge "styles: Replace deprecated breakpoints" 2024-06-06 19:46:07 +00:00
jenkins-bot abbee9416c Merge "Follow-up to Id04e39 "Adds invert exception for dropdown"" 2024-06-06 18:51:23 +00:00
jenkins-bot 60c61e681e Merge "Add skin-invert-image class" 2024-06-06 16:38:45 +00:00
bwang b24cb0518c Add skin-invert-image class
Bug: T365102
Change-Id: I5961d945b1aaeae1bff1d86c50118fc02dfb77b2
2024-06-06 10:58:57 -05:00
Jan Drewniak 8fb8731c04 Follow-up to Id04e39 "Adds invert exception for dropdown"
Adds hue-rotate( 180deg ) to the
.mixin-vector-arrowed-dropdown-toggle() mixin so that
the language icon doesn't appear with an orange
chevron in dark-mode.

Bug: T366337
Change-Id: If8f07e5924a31d761ac0af7efe0d982886bf6984
2024-06-06 15:17:13 +00:00
jenkins-bot a7dcf88b06 Merge "VisualEditor toolbar should use notheme" 2024-06-05 22:44:08 +00:00
jenkins-bot e1a73d9956 Merge "Make paragraph spacing 0.5em top and 1em bottom by default, handle adjacent inline elements manually" 2024-06-05 19:42:38 +00:00
bwang 716aad56af Add width exclusion notice
Bug: T366216
Change-Id: If50e9adcec6f2fa139e793b3a8108f3b4dd689ca
2024-06-05 19:15:11 +00:00
Jon Robson 8bb2e7d0ae VisualEditor toolbar should use notheme
For now, let's exclude VisualEditor's toolbar from the night theme.
This should result in no visual change, but will make sure it and
its associated icons are not impacted by the roll out of OOUI.

Bug: T365764
Change-Id: Id626a75dbdeddc8809e4ea75eba3c0fd6d2b08fe
2024-06-05 18:13:21 +00:00
bwang 225a02ff20 Make paragraph spacing 0.5em top and 1em bottom by default, handle adjacent inline elements manually
Bug: T366389
Change-Id: If83c7af5ccd4147bcf9b45436c905efac865b98a
2024-06-05 16:02:13 +00:00
Volker E 783d67e077 Replace border-color-portal-heading with Codex border-color-subtle
Replacing Vector specific variable with standard token that is meant
for exactly the applied use cases.
Note, I've left `border-color-subtle-transparent` because of that
extra engineering leg. I assume it was meant for animating the property,
which is not there. It seems better to me to replace this variable too
with `border-color-transparent`.

Change-Id: If264e04e576f044b98ec0d61b085f65af0110b6d
2024-05-28 14:29:20 -05:00
Jon Robson 48b0eeac2f Icons should not repeat at larger font sizes
Bug: T365731
Change-Id: I539f906e06bb2dc133885092dbacb851fd774c23
2024-05-24 20:32:46 +00:00
ksarabia 17a71f3c82 Adds invert exception for dropdown
* Adds a filter invert rule for toggle

Bug: T365035
Change-Id: Id04e3937ff1ef3982563003346fda07348ae26ea
2024-05-24 11:55:20 -05:00
Jdrewniak 607e6b39c5 Revert "Add exclusion behaviour for "width" option in Appearance menu"
This reverts commit ff5a61e9c6.

Reason for revert: The behaviour introduced in this patch needs some more consideration.

Bug: T364015
Change-Id: Ieab4ca4084df4f1b5c942fe81c7fb99b058e0623
2024-05-23 23:51:46 +00:00
Moh'd Khier Abualruz 4d97e0a4fb fix(vector): Set popup notification color to inverted
Updates `CSSCustomProperties.less` to include `.oo-ui-popupWidget-popup` in
`@OOUIOverrideSelectors` for inverted color inheritance.

Bug: T364798
Change-Id: I6c3ac79d24f6af71a9171153e346494fb97acd3f
2024-05-22 16:53:26 +02:00
Jon Robson 70fbd6f0c2 Small font size is not applying to excluded pages
Bug: T364887
Change-Id: Ib24beb3a383599dcc3ad64e01992ead908e3bef3
2024-05-21 23:41:35 +00:00
Jon Robson f4befc068d [Visual change] Limits two row header to mobile devices
I accidentally enabled this on tablet breakpoint.

Follow up to e3d2ab5031
The Pixel UI report should only surface changes on mobile - all
of these are improvements as it means the whole UI is visible in
the viewport.

Bug: T361573
Change-Id: I8aa5699a8fe959c1595d74c03f19c14856f6470f
2024-05-21 11:52:10 -07:00
jenkins-bot 0f9ad1ba67 Merge "Support Vector 2022 at > 320px" 2024-05-21 14:23:09 +00:00
Volker E dd5b98515d styles: Replace deprecated breakpoints
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I56b93d5241d6a029dcb6814de02d18ac9f38ee5d
2024-05-18 02:28:18 +00:00
Jon Robson e3d2ab5031 Support Vector 2022 at > 320px
In preparation for enabling responsive Vector on Wikifunctions,
we lower the support threshold to 320px for Vector.

Minor adjustments are made to the header to make it use two
lines at lower resolutions.

Fixes to tables to make them responsive will be made shortly as
part of T330527 which will complete the responsive behaviour.

Bug: T361573
Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
2024-05-17 23:31:37 +00:00
jenkins-bot b33513e20b Merge "Override default sublist styles" 2024-05-17 21:08:51 +00:00
jenkins-bot c570ec099d Merge "Optimize styles" 2024-05-17 18:30:33 +00:00
Jan Drewniak ff5a61e9c6 Add exclusion behaviour for "width" option in Appearance menu
- Adds the notice "This page is always wide" and disables
  the inputs for the "width" options in the Appearance menu
  when pages are excluded via configuration ( `$wgVectorMaxWidthOptions`).
- Changes layout behaviour so that pages in the
  $wgVectorMaxWidthOptions['exlcude'] configuration
  stretch the entire viewport width.
- Stops the width settings in the Appearance menu from
  being hidden on smaller resolutions.

Bug: T364015
Change-Id: Idee294adf3b309e03834276ea75e4ae43b0cffcb
2024-05-17 17:58:19 +00:00
Jon Robson 1d17b4624f Optimize styles
1) Icon optimizations
* Load styles for expand icon in
JavaScript since it relates to table of contents and that is only
enabled with JavaScript
* Drop vector-icon--x-small class since it only applies to this icon
* Remove some FIXMEs to an issue that has already been fixed
upstream

2) Move styles that do not need to be render blocking to skins.vector.js
* Move sticky header to skins.vector.js since it doesn't work without
JavaScript
* Move popupNotification to skins.vector.js since this is never server
side rendered.

Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-17 16:26:16 +00:00