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

32 lines
674 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 {
[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/content.less';
@import 'common/typography.less';
// Components
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
@import 'Logo.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 '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';
[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 'SearchBox.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';
}
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
// Support: IE8
// Media query hack required.
@import 'TabWatchstarLink-ie8.less';
// Media: Print
@import 'common/print.less';
Reference in a new issue Copy permalink