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

37 lines
779 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';
Implement Page, Workspace, Content, and Article Toolbar Containers This patch closely follows the desired guidelines/desired styles Alex Hollender has put forth in his prototype, but uses multiple containers to achieve this look since our DOM order/structure is different than the DOM structure in the prototype. The following containers are used, but unlike his prototype, they are sometimes used more than once: * Page Container: Contains every other container and limits the overall max-width of the white part of the page. * Workspace Container: Contains the sidebar and content container. The sidebar is displaced ~30 pixels to the start (left) of the workspace container at all times. * Content Container: Contains the content. The max-width of this changes depending on whether you are on a special page/history page vs. other pages. * Article Toolbar Container: Contains the article toolbar. The max-width of this is always the same as the max-width of the article content as we don't want the toolbar to move when going from the article page to the history/special page. Changes to be aware: * To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is temporarily feature flagged and defaults to being "off". * Note that layout-max-width.less is a temporary file made to meet the feature flag requirement of T246420 (intended to derisk the deployment). After the deploy, we should merge most if not all of the rules into layout.less where the max-width design will become the default. * Per Jon's code review comment, I have relaxed the indenting of skin.mustache to make the diff easier to reason about. If desired, the correct indenting can be achieved in a (much less risky) follow-up commit. Bug: T246420 Bug: T153043 Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-06-23 18:02:32 +00:00
@import 'layout-max-width.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';
[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';
}
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';
}
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