This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:
.vector-feature-zebra-design-disabled {
@import './layouts/preZebra.less';
}
This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands
The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.
No visual differences are expected with this change.
Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.
Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.
Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
[EXPECTED VISUAL CHANGE]
Following Codex typography definitions. This minor change results in a
2px higher heading.
Bug: T332171
Change-Id: I5ac39492d8efc5c24e4340983e2b6973b7252c8f
[Visual change]
Height of the article toolbar is reduced, this is done by reducing the
padding on the top of the tabs and reducing the margin on the
top of the Watchstar and Wikilove icons.
Bug: T316950
Change-Id: Ic2a3146eab901c834712d23f80277e313c42d907
Increasing scroll-padding-top on HTML element
to account for TOC button placement on mobile
resolutions.
Bug: T314419
Change-Id: I5c3efa0f20f052ec74e91a6287f561c9e0105f90
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.
This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.
This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.
Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.
* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools
* Consolidates some styles in TableOfContentsPinned.less
VISUAL CHANGE: table of contents moves down page.
Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
* Adds sticky behavior to pinned page tools
* Moves scroll indicator styles into a mixin shared by TOC and page tools
* Replaces the 10px magic number in the TOC used to calculate the bottom padding with the
@padding-vertical-dropdown-menu variable.
* Increases the pinned TOC max-height per T319315
* Corrects spacing between bottom of sticky header and top of TOC after discussion with designer
* Causes 43 visual changes in Pixel that include intentional changes and subpixel
rendering changes associated with the `contain: paint` rule.
Bug: T318169
Bug: T319315
Change-Id: Ica0c4e0de1825d37d8136b589a9bf5decc96855e
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.
[1] https://phabricator.wikimedia.org/F36201423
Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb
- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width
Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term
Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools
Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.
- New vector-menu-heading mixin shared between main menu headings
and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
child Menu template already contain <ul><li> elements.
Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border
Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
Restricted to the feature flag (?vectorvisualenhancementnext=1)
for now to allow us to not worry about caching.
mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.
We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.
Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin
Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports
Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.
No expected visual changes.
Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md
Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles
Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated
Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing
Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
This reverts commit b63244f367.
Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.
Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
Re-applying: Unify on using standard OOUI 'linkExternal' icon, which is
directly replacing Vector's image without relying on ResourceLoader.
This time we have lo- and hi-dpi optimized icon.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.
Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.
Replacing images and image names to make quicker lookup with icon
collection possible future-facing.
Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.
Bug: T261391
Change-Id: I1c3cfb4cd83fe4d5d08c06b84cdc192cb90c0dfe
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open
Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.
Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)
Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
Unify on using standard OOUI 'linkExternal' icon, which is directly
replacing Vector's image without relying on ResourceLoader.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.
Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.
Replacing images and image names to make quicker lookup with icon
collection possible future-facing.
Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.
Bug: T261391
Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473
