KSS is no longer in use anywhere. The only official style guide is
at https://design.wikimedia.org/style-guide.
Depends-On: I688a78e9a71a082c499af55bd01e8fd615130486
Change-Id: I21663c7b48465b0f23f1b40520e8cee9be71c4bc
* Drop non-existent pointer-overlay selector
* Drop redundant icon class for arrow
* Drop unnecessary !important
* Drop transparent-shield class
* Reword an existing FIXME about a contensious decision and
add a new FIXME for moving some code to a more appropriate place.
* Move an image into a ResourceLoaderImage module (test with
`mw.notify('error', { type: 'error'} )`)
Change-Id: I6e38f07772afae6f13c4851ca17a67d52ca7d331
* .mw-notification-tag-toast appears to not longer exist anywhere in
mediawiki
* Removed bottom 'counter translate' style. I'm not sure this is needed
now? The comment makes it seem like it was needed for older browsers
that didn't support fixed positioning but I think mobile browser support
for fixed is good now [1]
* The previous animated class was only in effect during the exit of
toasts. I refactored this logic to be easier to read with hopefully the
same animation effect.
[1] https://caniuse.com/#feat=css-fixed
Bug: T234570
Change-Id: I757122758cb0758f9ede5ccb81d9cc82bb92e79b
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.
However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.
MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.
Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable
Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
There should be no caching implications for this change, as the main menu
has been server side rendered on all wikis since 10th October.
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.
The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support.
ev.preventDefault in onSkinClick is dropped since the link to the '#'
(the default behaviour) is wanted
Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
- the click handler is thus simplified
removing a check for the class of the button
Bug: T234650
Change-Id: If101eebbdbda1519af922745917237648722820e
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.
Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
This reverts commit 111757970e.
Although I cannot replicate the performance issue, the menu doesn't seem to be rendering at all on cached HTML so this is a deal breaker. Back to the drawing board..
Bug: T234599
Change-Id: Idadc5a079340f44ec66d20a38259b6b337d2dcee
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.
The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support
Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
- the click handler is thus simplified
removing a check for the class of the button
Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
Rely on css top/transform to center it instead of calculations.
I84fc4224d5107188265d8ec0a26c0388664949a5 should be merged shortly after
this one.
Bug: T233156
Change-Id: I6e00f851ecb4e1ba8c1ef5d90bcc4310d66a820e
* Refactor less variables to make icon touch-area sizes flexible
* Search input is bumped up 1px to an even number
Bug: T233156
Change-Id: I156d09bfca8db9506c0e9cee21e4d6e0a2e91689
The incorrect padding-top was causing overlays with no headers to
always be scrollable. The issue was noticeable e.g. on the search
overlay or the editor loading overlay in MobileFrontend.
Change-Id: I28ece81402041eea10124c2076cff5a1cba049cf
Not necessary or compatible with new icons.
A padding left is needed so that the cancel icon
matches up with the content body.
See "The "X" has too much padding, which is causing two issues:"
in attached issue
Bug: T229440#5490743
Change-Id: If76602436e797f2896004181eb776f049cf52fd5
Includes icon fixes and removal of some CSS overrides.
This causes the following temporary defects to the skin:
* Last modified bar will temporarily be squashed
* clear search icon will be misaligned vertically
Depends-On: Ie811d25595d041c35e6c214190101821f3a5d466
Bug: T229440
Change-Id: I0a3a73421791ad353bbcebaeb8241ad062f67ae4
Before c0f08790ea, this was defined as
`( @iconSize / 2 ) + @headerVerticalPadding`, which computed to 0.9em.
Restore the old value since it looks wrong now: T215426#5486117.
Change-Id: Ib14a148da305d98f2d1ce9b1c71cb8910d665e44
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.
In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.
Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)
Bug: T229440
Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
Split @headerHeight variable into @siteHeaderHeight and @overlayHeaderHeight.
@overlayHeaderHeight is now set to 3em (48px).
Use @siteHeaderHeight for the base skin interface, and @overlayHeaderHeight
for overlays.
skinStyles/mobile.notifications.overlay/minerva.less:
* Update footer height to remain the same as header height.
skinStyles/mobile.startup/search/SearchOverlay.less:
* Use @siteHeaderHeight even though it is an overlay, because it's
supposed to exactly match the base skin interface.
Bug: T215426
Change-Id: Iaa36f581a12a8eea2b755ae583b8a2c6324ebe29
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.
Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
Color progressive/destructive (blue and red) do not make
sense on a black background, so we use white and underlined
for both of these. Note these don't seem to be used currently
so this is not a breaking change.
Bug: T150189
Change-Id: I78a92b5b6c76638633b99fe32670911d355ce6f3
We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons
This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.
Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269
Define the color etc. in the base styles, so that other drawers will
not have to redefine them to display the shield.
Bug: T214049
Change-Id: Ife957374cb0d21446db2067171e68fb726ad8347
Removing deprecated LESS `.background-size()` mixin calls.
Also
- simplifying code, where second (height) value is automatically set
to `auto` when only one value is set and
- removing stylelint rule.
Bug: T219956
Change-Id: I643c66b3067ba77726d76cbebf7550781e18aa5d
This mimics the structure we follow in MobileFrontend's mobile.startup
folder where we have a mobile.startup.js that imports all the
mobile.startup files.
Bug: T215657
Change-Id: Id7faa45adce7c5aa870d0f7c92f70d39995adac0
In I629245100f4ca430a88e450939b90d075e7021f1, languageOverlay styles and
LanguageSearcher styles were split into two different files. This commit
mimics that change in skinStyles. All languageOverlay specific styles
were moved to languageOverlay.less, while all LanguageSearcher styles
were moved to LanguageSearcher.less.
Other chagnes:
* Changed a reference in init.js
Bug: T215657
Change-Id: I395a61cd6051ad5c6b6601205f112b55f5ab8273
The prev/next buttons on the ImageOverlay were pushed down by the
value of `@headerHeight`, however the header is not visible in the
ImageOverlay, so this positioning is unnecessary.
Bug: T213336
Depends-On: Iff5994c23e631d13d168f0c936e330c74dc7497f
Change-Id: I53fb585ab580b777a829a4c0f64088430b527335
MinervaNeue depends on mobile.search. mobile.search's LESS has been
collapsed into mobile.startup. This patch updates Minerva's references
and revises the SearchOverlay's CSS selector to increase specificity to
account for the new order of CSS files. Previously:
- ...
- MobileFrontend Overlay.less
- MobileFrontend SearchOverlay.less
- ...
- Minerva Overlay.less
- Minerva SearchOverlay.less
- ...
Now:
- ...
- MobileFrontend Overlay.less
- Minerva Overlay.less
- ...
- MobileFrontend SearchOverlay.less
- Minerva SearchOverlay.less
- ...
Since SearchOverlay's selector are intended to override Overlay's, it
seems appropriate to specify that a SearchOverlay is also an Overlay and
increase specificity.
Bug: T210207
Related: Ib0316020ed10eb0c921a3300501df7634a889977
Change-Id: I5c06b13f22f530fb52f37f373e081ed55f332a07
mobile.toggle was folded into mobile.startup in
mobileFrontend, so moving references to that instead.
- Changing require statements
- moving skinStyles/mobile.toggle/minerva.less to
skinStyles/mobile.startup/toggle.less
- Replacing references to mobile.toggle in skin.json
Depends-On: Iecc1870f08532e8c7893861afdd54f069da54be2
Bug: T210208
Change-Id: Ie67cd50a2d042fbbaaef348b9b62d64193900d78
Currently we load textarea styles across all pages. However, in practice
textareas only show up in the edit page and inside our JavaScript overlays
To avoid loading these styles as rendering blocking CSS
Additional changes:
* Drop css reset for textarea so that textareas where unstyled
have sensible defaults. Note given the usage of OOUI and MediaWiki UI
this should be minimal/no disruption.
* For consistency intentionally change the padding of the non-js editor
to be consistent with other textareas
* The padding-left/padding-right rules currently override the default rule
so consolidate them into one single rule
Note:
* This will not break non-JavaScript editor mode as the module
mediawiki.action.edit.styles is loaded on that page as a render blocking
style.
Bug: T199000
Depends-On: I1ab170fc4089b0c8129a3e62ee78efad1c6709fa
Change-Id: I91743fdf1942a1b1b750422e973bf98fc4d106db
* truncated-text is only used in MainMenu, last modified bar,
a few special pages
Making this a mixin and limiting it to mobile.startup skinStyles
and mobile.special.styles thus makes sense
* cloaked-element is only ever added by Skin.js in mobile.startup
* position-fixed is only ever added by Skin.js
Change-Id: Iaf7061e9dda87eb25c963f8a281175af08f358e5
.header > form matches no element on the page
all other selectors are linked to the mobile Overlay so should
be shipped along with those styles.
Remove .header-action rule, given that header-action's only appear
inside Overlays (Editor, Category and Talk)
A more generic rule already exists (.overlay .header-action > *)
for overlays that sets the min-height
Change-Id: I114fe80e50bb833e9e6bb0fb6b13c2e929244ddf
