wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-15 03:34:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/skin.less

35 lines
737 B
Plaintext
Raw Normal View History

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
// Modern Vector stylesheets
[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
@import '../../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 {
[less] Extract cross-browser normalization rules into new 'normalize.less' Change-Id: I23da024b47020212173380315acd37210b924327
2020-06-12 00:24:17 +00:00
@import 'common/normalize.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 'layout.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
@import 'common/typography.less';
// Components
@import 'Indicators.less';
@import 'SiteNotice.less';
Refactor: Generalise personal menu the PersonalMenu should be generalised. In future we will use it as the template for all menus Bug: T249372 Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
2020-05-05 23:26:35 +00:00
@import 'Menu.less';
Integrate WVUI search into Vector Creates a new skins.vector.search module that replaces the searchSuggest module from MediaWiki core. This module creates a new Vue app using the WVUI search widget for the new search experience. The legacy search input form is still retains on pageload, and the new search kicks on search input focus. In order to manage that transition, the legacy search input is styled to resemble the new WVUI input, and the new input is manually focused after the component mounts. Vue is also added as a dev-dependency to help with type-checking. Other changes: * the entry in skin.json is reordered alphabetically after skins.vector.js Bug: T264355 Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
2020-11-19 17:12:53 +00:00
@import 'VueEnhancedSearchBox.less';
Adds loading indicator for new search module Provides a loading indicator to show while the new Vue.js based search widget loads. Given that the new widget will pull down the entire Vue.js runtime, it's likely that there will be a delay before the search suggestions appear. This loader is meant to improve the perceived loading experience of the new widget. Adds: - New searchLoader.js file containing loading behaviour. - This overrides the code searchSuggest loading behaviour. - New SearchBoxLoader.less file containing the loader styles. - i18n message: 'vector-search-loader'. - The Event type to jsdoc.json Bug: T254695 Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
2020-08-04 12:02:50 +00:00
@import 'SearchBoxLoader.less';
Refactor: Merge VectorTabs into Menu Bug: T249372 Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 17:15:50 +00:00
@import 'MenuTabs.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
@import 'TabWatchstarLink.less';
Refactor: VectorMenu merged in to Menu Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
2020-05-06 00:00:56 +00:00
@import 'MenuDropdown.less';
Refactor: Portal is also a Menu To complete the refactor, the Portal is also refactored as a Menu using the getMenu function. An old code path supporting portals outputted by hooks with strings is marked as deprecated to simplify this code in future. array-portals-first -> data-portals-first (the value is not an array) Changes: * $this->getLanguages and $this->getToolbox() always returns an array (see BaseTemplate) but we previously supported portals made using raw HTML. Let's move away from that behaviour and deprecate it. * Hooks are moved into buildSidebarProps and marked as deprecated where possible (SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead. Bug: T249372 Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
2020-04-07 23:21:20 +00:00
@import 'MenuPortal.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
@import 'Sidebar.less';
[legacy] Split sidebar code and mark layout as legacy in preparation for new layout Going into the new version of Vector, we'll want to rewrite the layout rules entirely and decouple the sidebar from the logo. To prepare for this we will move the layout file into a legacy folder. We also separate Sidebar styles needed for the legacy mode from the old mode. This will allow us to make changes to the header in new Vector without having to touch or test the legacy codebase via a new file layout.less and using the existing sidebar code. Bug: T246170 Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb
2020-04-14 22:44:33 +00:00
@import 'SidebarLogo.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
@import 'Footer.less';
}
Print: Logo styles should apply in printed media Bug: T253842 Change-Id: I7875795f12bb3e5e01e18aeb1e54ccfe7e44a020
2020-07-29 18:15:08 +00:00
@media all {
// Component styles that should apply in all modes.
@import 'Logo.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
@media print {
@import 'common/print.less';
Print: Add layout print styles on Ctrl+p and ElectronPdf Bug: T253842 Change-Id: Ia7104a30a37a13cbeb6cfa4bdf1ee50ee677a87a
2020-07-07 20:21:48 +00:00
@import 'layout-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
}
Reference in a new issue Copy permalink