Replacing colors with ones from the overhauled WCAG 2.0 level AA
compliant color palette https://phabricator.wikimedia.org/M82
Applying Less variables where possible for better flexibility
in future design maintenance.
Also introducing some variables from WikimediaUI Base.
Bug: T147365
Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699
Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
Introducing stylelint with configuration rules compliant to
Wikimedia CSS Coding Standards 'stylelint-config-wikimedia', nullifying
some for now and making majority pass.
Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce
Unfortunately there's no generic support for using colors for icons in
OOUI yet, so we have to copy what OutlineOptionWidget does and
override setPressed()/setSelected() to add/clear the progressive flag.
Also reintroducing colors for text which are aligned with icons on
the different states and use transitions.
Change-Id: I07cf4011d28c1db4eefb451367e29c271b5efaeb
After Id1312fee5bb of OOjs UI got merged, we have to reintroduce
`highlighted` and `selected` states background color manually as
it caused issues on simple OptionWidgets.
Change-Id: I3fe7a4d2577bd1bc0fd258bc977b3539e268a84e
Replacing standard `box-sizing` with MediaWiki's Less mixin, which also
features prefixed properties for older browsers like Firefox 28 and below.
Change-Id: Iafb88b192045fb7df6bbe6954a166a198d04c5cf
Due to pixel rounding errors when relying on `em` as base size unit,
the circle isn't always perfectly round and as a result /not/ a circle.
Adding `min-width` and `min-height` ensures the intended layout similar
to Ie61e7303e446 in OOjs UI's ToggleSwitchWidget.
Also aligning `:hover` unread color to OOjs UI progressive button's
`:hover`.
Bug: T141504
Change-Id: Idf130947e8e61a68819e3ac9ba3cb1e105e65370
In order for the special page to be responsive, the descriptions can't
be truncated in the JS. If they are, they take a bigger portion
of the screen, sometimes going out of its confines.
The popup should still truncate descriptions.
Change-Id: I533f29c00482f6cfbb7b1c9c7417715e3c5809bf
We already took away the truncation of header text, the body should
follow for narrow screens and wrap, instead of using the ellipses
truncation.
Change-Id: I3504599044e1c94ccec55c420d455b9370dae474
Have the page hide the sidebar at 982px, when there is
not enough room for both (and when vector switches down to SD).
Make inbox responsive when resizing.
Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
Mainly used for mobile actions, and should be appended to the
overlay - this widget assumes it should appear and then fade out
with some confirmation message.
Also moved 'doubleCheck' icon to the ooui definitions, including
an inverted icon that is necessary for this widget.
Bug: T141404
Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224
Add word-break: break-word; so we make sure even long names or titles
without spaces are broken/wrapped where they need to.
Bug: T142662
Change-Id: I166e834495972ec49eb98e301ab9be85f40f5a5e
p-personal links have a white background on hover, and links
inside the notifications popup were inheriting that CSS rule.
Bug: T144063
Change-Id: I3868e418ab8cce8e5ff6f7cc10e042907cb1e8df
Allow extensions to add dynamic actions that perform some
API request and display a confirmation message.
Bug: T132975
Change-Id: Ib16d57c3f1a11a9749564c6e2112bf1ca32c55e8
Work around new styles introduced in oojs-ui in I77cd5212c.
Bonus: remove useless styles targeting the dotdotdot popup
in NotificationItemWidget.less: it's not even a popupWidget
any more and it's located in an overlay anyway, so these
styles didn't do anything.
Change-Id: Ifb16b7bb0b01c1eb2551ba4c173042cc759e9b02
Just like we do in the mobile popup, the menu should be accessible
in mobile clicks/taps by being "stuck" at the bottom of the screen.
Bug: T142013
Change-Id: I730216e717c2a02ad98bbcc28f66b13c1cbe29ed
In the unseen notifications case, Monobook used badges with
black text on a light red/blue, even though the text
is white on grey in the non-unseen case. Change the unseen style
to white on dark red/blue like Vector, and also make the colors
exactly the same as Vector.
Change-Id: I9d2d1a2614ac1130e027fb952c9288588d25d495
We have to override a CSS rule that tries to make all <a>s blue,
but not override it so powerfully that the real link in the footer
notice isn't blue.
Change-Id: I5a91419aab7cf6d6fe10c8e707168b52c2451cd8
The color: transparent; hack was being overridden by a color rule
that's only in effect after the popup is opened.
Change-Id: I2f415619603ccadb625ed2482c25fde78765fee4