wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-21 04:02:53 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/skin.less

40 lines
1 KiB
Plaintext
Raw Normal View History

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-02-02 10:04:37 +00:00
/**
* Vector modern stylesheets
* See '../common/common.less' for common screen and print Vector stylesheets.
*/
Organize CSS by common, layout, typography and components Moving styles from the existing styles to common/layout or components stylesheets they should be associated with. Components are identified using PascalCase. Lowercase names are used for things that are not components. This distinction should help us reason with the code better and make it clearer where CSS belongs, saving us lots of wasted effort discussing conventions. Patch isn't making actual CSS changes themselves - for testing purposes this should be a NOOP. In preparation for the gradient removal, 'background-gradient.less' is marked as legacy. Merged 'externalLinks.less' into content.less, they belong to content. Bug: T249073 Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
2020-04-09 19:16:36 +00:00
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-02-02 10:04:37 +00:00
@import '../common/variables.less';
[modern] Add Header element and styles - Removed `#mw-head-base`. - `#mw-page-base` -> `.mw-header-placeholder`. - `#mw-head` moved down to `@height-header` to make space for new header. - Content moved down to `@height-header + @height-tabs`. Added Less variables: - @height-header: 69px; - @height-logo-icon: 50px; - @height-header--inner: 54px; - @height-tabs: 2.5em; Style splits: - Added Header.less - @height-header: 2.5em; Bug: T246170 Change-Id: I07280c4c7a2054439153e76359f712281049df0b
2020-04-28 01:44:16 +00:00
@import 'mediawiki.mixins.less';
[dev] Consolidate ResourceLoader LESS style files Move styles.less to index.less and import print.less from it. This keeps the reasoning about styles constrained to LESS instead of spread out over LESS _and_ ResourceLoader. The former is preferable since LESS is more standardized than ResourceLoader. The approach of moving styles.less to index.less and then referencing print.less was chosen with the intent that it'd be easier to assume styles are screen styles unless a media query says otherwise. This patch also makes the variables import common among print and screen styles. Bug: T246419 Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
2020-03-10 21:01:09 +00:00
[dev] Favor LESS media queries to ResourceLoader Prior to this patch, Vector used a mixture of LESS media queries and ResourceLoader (RL) media queries[0]. So far as I can tell[1], the latter only instructs RL to wrap the contents of a LESS file within a query (there are no conditionals placed on style loading). Further, according to a coauthor of RL (Roan), RL media query support was most likely a replacement for `@media foo { @import foo.css }` to inline print styles from a separate style sheet which Vector itself does not use. The LESS solution is much more intuitive since it's not MediaWiki- specific and only the LESS code needs to be considered instead of LESS _and_ the RL configuration in skin.json. This patch moves both screen media queries to screen.less for the aforementioned consistency and to avoid nesting queries. It is hoped that these changes will help make future work easier, such as those to margin likely to take place in making the sidebar collapsible. [0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries [1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector Bug: T246419 Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
2020-03-10 19:13:42 +00:00
@media screen {
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-02-02 10:04:37 +00:00
// Layouts
@import './layouts/screen.less';
Organize CSS by common, layout, typography and components Moving styles from the existing styles to common/layout or components stylesheets they should be associated with. Components are identified using PascalCase. Lowercase names are used for things that are not components. This distinction should help us reason with the code better and make it clearer where CSS belongs, saving us lots of wasted effort discussing conventions. Patch isn't making actual CSS changes themselves - for testing purposes this should be a NOOP. In preparation for the gradient removal, 'background-gradient.less' is marked as legacy. Merged 'externalLinks.less' into content.less, they belong to content. Bug: T249073 Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
2020-04-09 19:16:36 +00:00
// Components
Remove dancing tabs with CSS only solution Remove JavaScript that collapses tabs and replace with an easier to maintain breakpoint based solution. Tabs will now collapse below the tablet breakpoint Note: In the case of mw.util.addPortletLink, to add items to the `views` menu, these will not be collapsed into the more menu and must now be explicitly added to both menus, ie. if the window is resized these will hide and not appear in the more menu. However, when mw.util.addPortletLink attempts to add to `views` menu when there is not available space, we will redirect those links to the more (`cactions`) dropdown menu. Bug: T306229 Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
2022-04-27 19:32:19 +00:00
@import './components/ArticleToolbar.less';
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-02-02 10:04:37 +00:00
@import './components/SearchBoxLoader.less';
@import './components/VueEnhancedSearchBox.less';
@import './components/Sidebar.less';
@import './components/LanguageButton.less';
Refactor: Create UserLinks component Have a single template for the UserLinks component, with a single element wrapping all its subcomponents as discussed. Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
2021-05-24 22:02:26 +00:00
@import './components/UserLinks.less';
Scope styles that should only apply to the main header to Header.less We have many styles related to the layout and visibility of search that are only useful in the context of the main header. Since many of these elements have classes that will also be in the sticky header, we should scope these rules to the main header so that we avoid an uphill battle of styles trying to override eachother. Additional changes: * We previously had a mix of #p-search and .vector-search-box selectors for the same element in the CSS. Header.less now only uses .vector-searchbox to avoid specificity wars. * Removed nearly all of the #p-search rules previously found on L147 - L167 in screen.less after observing nothing relatively bad happening when they were removed. Bug: T289724 Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
2021-09-09 21:03:15 +00:00
@import './components/Header.less';
[Refactor] Split MenuDropdown.less for modern and legacy Splits MenuDropdown styles into modern and legacy styles. Leaves a common MenuDropdownCheckbox.less file (for lack of a better name) for common styles related to the checkbox behaviour and dropdown menu resets. Adds a new file in common/mixins.less for a shared dropdown mixin. Bug: T312157 Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
2022-07-22 16:11:36 +00:00
@import './components/MenuDropdown.less';
Restyle Vector tabs in modern Vector Removes gradients from tabs (i.e. article toolbar) in new Vector, moving the existing MenuTabs.less component into the skins.vector.styles.legacy module and creating a new MenuTabs.less component for modern Vector. Bug: T309398 Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
2022-06-06 21:39:57 +00:00
@import './components/MenuTabs.less';
Remove gradient from modern Vector, align SidebarAction with portlet styles and classes Bug: T307771 Change-Id: I92fd11b89d4afbf99dd7ab51990835b9754767a1
2022-08-12 16:11:41 +00:00
@import './components/MenuPortal.less';
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
@import './components/StickyHeader.less';
Refactor chevron across components + separate watchstar Consolidates the CSS responsible for styling chevrons into one implementation. This removes the need for custom padding and background positioning for the following components: - "more" menu - user menu - watchstar - language button - languge button in sticky header Instead of absolutely positioning the chevron on these components, the parent label element is set to `display: inline-flex` so that the chevron is vertically aligned and given enough space by default. The watchstar, although not a chevron, is also given the `display: inline-flex` treatment so that it can be aligned with other elements in the toolbar. This new implementation requires splitting the watchstar component into legacy and modern due to a quirk in Firefox that causes a bug with the watchstar in legacy Vector. NOTE: This change causes visual changes due to the difference in centering the chevrons via flexbox vs percentage positions. Bug: T308344, T310838 Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-15 18:27:57 +00:00
@import './components/TabWatchstarLink.less';
Use 'toc' skin option and render with new TableOfContents mustache template Bug: T297611 Change-Id: I8332f7b9c9574d8dece4f7111b299b95533cf386
2022-01-11 19:52:26 +00:00
@import './components/TableOfContents.less';
Collapse ToC into page title at narrow view ports with CSS/template changes only Bug: T307900 Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-08 15:03:38 +00:00
@import './components/TableOfContentsCollapsed.less';
[dev] Favor LESS media queries to ResourceLoader Prior to this patch, Vector used a mixture of LESS media queries and ResourceLoader (RL) media queries[0]. So far as I can tell[1], the latter only instructs RL to wrap the contents of a LESS file within a query (there are no conditionals placed on style loading). Further, according to a coauthor of RL (Roan), RL media query support was most likely a replacement for `@media foo { @import foo.css }` to inline print styles from a separate style sheet which Vector itself does not use. The LESS solution is much more intuitive since it's not MediaWiki- specific and only the LESS code needs to be considered instead of LESS _and_ the RL configuration in skin.json. This patch moves both screen media queries to screen.less for the aforementioned consistency and to avoid nesting queries. It is hoped that these changes will help make future work easier, such as those to margin likely to take place in making the sidebar collapsible. [0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries [1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector Bug: T246419 Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
2020-03-10 19:13:42 +00:00
}
Print: Logo styles should apply in printed media Bug: T253842 Change-Id: I7875795f12bb3e5e01e18aeb1e54ccfe7e44a020
2020-07-29 18:15:08 +00:00
@media all {
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-02-02 10:04:37 +00:00
// Component styles that should apply in all media.
@import './components/Logo.less';
Print: Logo styles should apply in printed media Bug: T253842 Change-Id: I7875795f12bb3e5e01e18aeb1e54ccfe7e44a020
2020-07-29 18:15:08 +00:00
}
Collapse media print query Per discussions, its proposed that the target of all media queries is defined in the entry points skin and skin-legacy Please verify with `git diff HEAD^ -w` that no changes to print styles have occurred Bug: T253842 Change-Id: Id7d1c806d77ee50335a1c9985acc7e4406e64ccf
2020-07-23 17:43:10 +00:00
@media print {
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-02-02 10:04:37 +00:00
@import './layouts/print.less';
Collapse media print query Per discussions, its proposed that the target of all media queries is defined in the entry points skin and skin-legacy Please verify with `git diff HEAD^ -w` that no changes to print styles have occurred Bug: T253842 Change-Id: Id7d1c806d77ee50335a1c9985acc7e4406e64ccf
2020-07-23 17:43:10 +00:00
}
[Grid] Vector 2022 layout uses CSS grid It gracefully degrades to a single column layout on grade C browsers, IE11, and Safari 9. Bug: T303484 Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-02 22:09:28 +00:00
@import './layouts/gradeC.less';
Reference in a new issue Copy permalink