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
|
@ -1,4 +1,4 @@
|
|||
@import '../variables.less';
|
||||
@import '../resources/common/variables.less';
|
||||
@import 'integration.less';
|
||||
@import 'icons.less';
|
||||
@import '../skinStyles/mediawiki.ui.icon.less';
|
||||
|
|
|
@ -1,6 +1,25 @@
|
|||
const path = require( 'path' );
|
||||
|
||||
module.exports = {
|
||||
resolve: {
|
||||
alias: {
|
||||
// FIXME: These imports should be updated in the story files instead of here.
|
||||
'../resources/skins.vector.styles/Footer.less': '../resources/common/components/Footer.less',
|
||||
'../resources/skins.vector.styles/LanguageButton.less': '../resources/skins.vector.styles/components/LanguageButton.less',
|
||||
'../resources/skins.vector.styles/skin-legacy.less': '../resources/skins.vector.styles.legacy/skin-legacy.less',
|
||||
'../resources/skins.vector.styles/Logo.less': '../resources/skins.vector.styles/components/Logo.less',
|
||||
'../resources/skins.vector.styles/Menu.less': '../resources/common/components/Menu.less',
|
||||
'../.storybook/common.less': '../resources/common/common.less',
|
||||
'../resources/skins.vector.styles/MenuDropdown.less': '../resources/common/components/MenuDropdown.less',
|
||||
'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less',
|
||||
'../resources/skins.vector.styles/MenuTabs.less': '../resources/common/components/MenuTabs.less',
|
||||
'../resources/skins.vector.styles/TabWatchstarLink.less': '../resources/common/components/TabWatchstarLink.less',
|
||||
'../resources/skins.vector.styles/SearchBox.less': '../resources/common/components/SearchBox.less',
|
||||
'../resources/skins.vector.styles/Sidebar.less': '../resources/skins.vector.styles/components/Sidebar.less',
|
||||
'../resources/skins.vector.styles/SidebarLogo.less': '../resources/common/components/SidebarLogo.less',
|
||||
'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less'
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [ {
|
||||
test: /\.js$/,
|
||||
|
@ -37,11 +56,17 @@ module.exports = {
|
|||
use: [ {
|
||||
loader: 'style-loader'
|
||||
}, {
|
||||
loader: 'css-loader'
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
// FIXME: Disable resolving of CSS urls until Storybook is upgraded
|
||||
// to use Webpack 5 and array values for aliases
|
||||
// (which would cleanly resolve urls in LESS partial starting with `url(images/...)` )
|
||||
url: false
|
||||
}
|
||||
}, {
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
relativeUrls: false,
|
||||
relativeUrls: true,
|
||||
strictUnits: true,
|
||||
paths: [
|
||||
path.resolve( __dirname, 'resolve-imports' )
|
||||
|
|
29
resources/common/common.less
Normal file
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* Common styles and components shared by both,
|
||||
* Vector legacy and Vector modern.
|
||||
*/
|
||||
|
||||
@import './variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@media screen {
|
||||
// Common styles
|
||||
@import './normalize.less';
|
||||
@import './typography.less';
|
||||
|
||||
// Components
|
||||
@import './components/Indicators.less';
|
||||
@import './components/SiteNotice.less';
|
||||
@import './components/Menu.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/TabWatchstarLink.less';
|
||||
@import './components/MenuDropdown.less';
|
||||
@import './components/MenuPortal.less';
|
||||
@import './components/SearchBox.less';
|
||||
@import './components/SidebarLogo.less';
|
||||
@import './components/Footer.less';
|
||||
}
|
||||
|
||||
@media print {
|
||||
@import './print.less';
|
||||
}
|
|
@ -1,8 +1,7 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
|
||||
/* Footer */
|
||||
.mw-footer {
|
||||
padding: 0.75em;
|
||||
direction: ltr;
|
||||
|
||||
ul {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
|
||||
// FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside?
|
||||
.mw-body {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/* Personal Menu */
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/* Variants and Actions */
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
.vector-menu-portal {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/**
|
|
@ -1,6 +1,6 @@
|
|||
@import 'mediawiki.mixins.less';
|
||||
@import 'mediawiki.ui/variables.less';
|
||||
@import '../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
|
||||
// Search portlet.
|
||||
#p-search h3 {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
|
||||
/* Logo */
|
||||
#p-logo {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
|
||||
/* Site Notice (includes notices from CentralNotice extension) */
|
||||
#siteNotice {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
@import 'mediawiki.mixins.rotation.less';
|
||||
|
Before Width: | Height: | Size: 223 B After Width: | Height: | Size: 223 B |
Before Width: | Height: | Size: 159 B After Width: | Height: | Size: 159 B |
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 387 B |
Before Width: | Height: | Size: 386 B After Width: | Height: | Size: 386 B |
Before Width: | Height: | Size: 139 B After Width: | Height: | Size: 139 B |
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
Before Width: | Height: | Size: 116 B After Width: | Height: | Size: 116 B |
Before Width: | Height: | Size: 124 B After Width: | Height: | Size: 124 B |
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 620 B |
Before Width: | Height: | Size: 602 B After Width: | Height: | Size: 602 B |
Before Width: | Height: | Size: 737 B After Width: | Height: | Size: 737 B |
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 725 B |
Before Width: | Height: | Size: 254 B After Width: | Height: | Size: 254 B |
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
Before Width: | Height: | Size: 225 B After Width: | Height: | Size: 225 B |
Before Width: | Height: | Size: 252 B After Width: | Height: | Size: 252 B |
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@import '../../../variables.less';
|
||||
@import './variables.less';
|
||||
|
||||
html,
|
||||
body {
|
|
@ -5,7 +5,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@import '../../../variables.less';
|
||||
@import './variables.less';
|
||||
|
||||
html {
|
||||
font-size: @font-size-root;
|
|
@ -1,5 +1,4 @@
|
|||
// Extends the dropdown menu but allows it to be opened via hover.
|
||||
@import '../MenuDropdown.less';
|
||||
// Extends the common MenuDropdown, but allows it to be opened via hover.
|
||||
|
||||
.vector-menu-dropdown {
|
||||
&:hover .vector-menu-content {
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
|
||||
/* Panel */
|
||||
#mw-panel {
|
|
@ -1,8 +1,11 @@
|
|||
// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
||||
// The rules here should only define the layout, not color or typography.
|
||||
/**
|
||||
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
||||
* The rules here should only define the layout, not color or typography.
|
||||
* See '../../common/' folder for latter stylesheets.
|
||||
*/
|
||||
|
||||
@import 'mediawiki.mixins.less';
|
||||
@import '../../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
|
||||
body {
|
||||
background-color: @background-color-secondary;
|
||||
|
@ -152,6 +155,7 @@ body {
|
|||
.mw-footer {
|
||||
margin-left: 10em;
|
||||
margin-top: 0;
|
||||
padding: 0.75em;
|
||||
}
|
||||
|
||||
/* Vector screen styles for high definition displays. These rules cross the above components and are
|
13
resources/skins.vector.styles.legacy/skin-legacy.less
Normal file
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Vector legacy stylesheets
|
||||
* See '../common/common.less' for common screen and print Vector stylesheets.
|
||||
*/
|
||||
|
||||
@media screen {
|
||||
// Layouts
|
||||
@import './layouts/screen.less';
|
||||
|
||||
// Legacy specific components
|
||||
@import './components/MenuDropdown.less';
|
||||
@import './components/Sidebar.less';
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
|
||||
@import '../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
// `.mw-body-header` class can be removed when language button is the default.
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
.mw-logo {
|
|
@ -12,7 +12,7 @@
|
|||
*
|
||||
**/
|
||||
|
||||
@import '../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
|
||||
#simpleSearch.search-form__loader:after {
|
||||
// Set the i18n message.
|
|
@ -1,8 +1,8 @@
|
|||
@import '../../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
@import './layout.less';
|
||||
@import 'legacy/Sidebar.less';
|
||||
@import 'checkboxHack.less';
|
||||
@import '../layouts/screen.less';
|
||||
@import '../../skins.vector.styles.legacy/components/Sidebar.less';
|
||||
@import './checkboxHack.less';
|
||||
|
||||
.mw-sidebar-action {
|
||||
// Align with the portal heading/links
|
|
@ -1,5 +1,3 @@
|
|||
@import 'SearchBox.less';
|
||||
|
||||
/**
|
||||
* Minimal styling for initial no-JS server-rendered
|
||||
* search form, which gets replaced by WVUI on focus.
|
|
@ -1,124 +0,0 @@
|
|||
/**
|
||||
* Layout
|
||||
*
|
||||
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
||||
* The rules here should only define the layout, not color or typography.
|
||||
*/
|
||||
|
||||
@import '../../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
// Header
|
||||
|
||||
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
||||
@width-grid-column-one: 11em;
|
||||
@padding-vertical-header: 0.125em;
|
||||
@margin-top-header: 0.625em;
|
||||
@margin-bottom-header: 0.3125em;
|
||||
@height-header:
|
||||
@height-logo-icon +
|
||||
@margin-top-header +
|
||||
@margin-bottom-header +
|
||||
2 * @padding-vertical-header;
|
||||
// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
|
||||
|
||||
// Menu button
|
||||
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
|
||||
|
||||
// Logo
|
||||
|
||||
// Logo sizes per specification in T245190.
|
||||
@height-logo-icon: 3.125em;
|
||||
|
||||
// The logo is variable width but typically consists of:
|
||||
// - a icon (50x50)
|
||||
// - a wordmark (approx 120px)
|
||||
@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
|
||||
|
||||
// Search
|
||||
|
||||
// Canonical version of spec: T270202
|
||||
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
||||
// Assumes various variables defined there.
|
||||
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
|
||||
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
|
||||
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
|
||||
|
||||
// Personal menu
|
||||
|
||||
@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
|
||||
|
||||
// Sidebar
|
||||
|
||||
@margin-top-sidebar: 0.5em;
|
||||
|
||||
// Adjust the left position of the sidebar to align it with the sidebar menu button,
|
||||
// in the header, while ensuring the background gradient still extends to the edge of the screen.
|
||||
// note: the 1px comes from the transparent border of the sidebar button.
|
||||
@padding-left-sidebar:
|
||||
@margin-horizontal-sidebar-button-icon +
|
||||
unit( @border-width-base / @font-size-browser, em );
|
||||
|
||||
// Layout containers
|
||||
|
||||
// Page container
|
||||
|
||||
@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
|
||||
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
|
||||
@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
|
||||
|
||||
// Content containers
|
||||
|
||||
@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
|
||||
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
|
||||
|
||||
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
||||
// see T259331.
|
||||
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
|
||||
// We want ~60px of space between the end of the sidebar and the start of the
|
||||
// content container for aesthetic reasons. The sidebar is already displaced
|
||||
// -30px so we simply add 30px of space to the width of the sidebar.
|
||||
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
|
||||
|
||||
// Tabs
|
||||
|
||||
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
||||
|
||||
// Breakpoints
|
||||
|
||||
// This determines the maximum width breakpoint at which
|
||||
// the content will have a fixed start margin applied to it when the sidebar
|
||||
// is open. The content can shift its position when the sidebar is open/closed
|
||||
// at or below this breakpoint and will maintain its position above this breakpoint.
|
||||
@max-width-margin-start-content:
|
||||
(2 * @margin-start-content ) +
|
||||
( 2 * @padding-horizontal-page-container ) +
|
||||
@max-width-content-container;
|
||||
// 23em + 3.75em + 60em = 86.75em @ 16
|
||||
|
||||
// Defines the minimum viewport width, at which point the layout will not get any
|
||||
// smaller and will start horizontal scrolling instead.
|
||||
@min-width-supported:
|
||||
unit( 500px / @font-size-browser, em ) -
|
||||
( 2 * @padding-horizontal-page-container );
|
||||
// 31.25em - 3.75em = 27.5em @ 16
|
||||
|
||||
// Width used to determine when to break the personal tools onto a separate line
|
||||
// below the search box.
|
||||
@width-comfortable:
|
||||
( 2 * @padding-horizontal-page-container ) +
|
||||
@size-sidebar-button +
|
||||
@margin-horizontal-sidebar-button-icon +
|
||||
@min-width-logo +
|
||||
( 2 * @margin-horizontal-search ) +
|
||||
@max-width-search +
|
||||
@min-width-personal-tools;
|
||||
// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
|
||||
|
||||
@border-color-sidebar: @background-color-secondary--modern;
|
||||
@background-color-secondary--modern: #f8f9fa;
|
||||
@background-color-page-container: @background-color-base;
|
||||
|
||||
// Default layout.
|
||||
@import 'layout-default.less';
|
|
@ -1,6 +1,124 @@
|
|||
//
|
||||
// Default layout for Modern Vector.
|
||||
//
|
||||
/**
|
||||
* Vector modern layout styles for screen
|
||||
*
|
||||
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
||||
* The rules here should only define the layout, not color or typography.
|
||||
*/
|
||||
|
||||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
// Header
|
||||
|
||||
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
||||
@width-grid-column-one: 11em;
|
||||
@padding-vertical-header: 0.125em;
|
||||
@margin-top-header: 0.625em;
|
||||
@margin-bottom-header: 0.3125em;
|
||||
@height-header:
|
||||
@height-logo-icon +
|
||||
@margin-top-header +
|
||||
@margin-bottom-header +
|
||||
2 * @padding-vertical-header;
|
||||
// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
|
||||
|
||||
// Menu button
|
||||
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
|
||||
|
||||
// Logo
|
||||
|
||||
// Logo sizes per specification in T245190.
|
||||
@height-logo-icon: 3.125em;
|
||||
|
||||
// The logo is variable width but typically consists of:
|
||||
// - a icon (50x50)
|
||||
// - a wordmark (approx 120px)
|
||||
@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
|
||||
|
||||
// Search
|
||||
|
||||
// Canonical version of spec: T270202
|
||||
// This assumes the presence of variables inside screen.less. DO NOT import it separately.
|
||||
// Assumes various variables defined there.
|
||||
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
|
||||
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
|
||||
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
|
||||
|
||||
// Personal menu
|
||||
|
||||
@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
|
||||
|
||||
// Sidebar
|
||||
|
||||
@margin-top-sidebar: 0.5em;
|
||||
|
||||
// Adjust the left position of the sidebar to align it with the sidebar menu button,
|
||||
// in the header, while ensuring the background gradient still extends to the edge of the screen.
|
||||
// note: the 1px comes from the transparent border of the sidebar button.
|
||||
@padding-left-sidebar:
|
||||
@margin-horizontal-sidebar-button-icon +
|
||||
unit( @border-width-base / @font-size-browser, em );
|
||||
|
||||
// Layout containers
|
||||
|
||||
// Page container
|
||||
|
||||
@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
|
||||
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
|
||||
@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
|
||||
|
||||
// Content containers
|
||||
|
||||
@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
|
||||
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
|
||||
|
||||
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
||||
// see T259331.
|
||||
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
|
||||
// We want ~60px of space between the end of the sidebar and the start of the
|
||||
// content container for aesthetic reasons. The sidebar is already displaced
|
||||
// -30px so we simply add 30px of space to the width of the sidebar.
|
||||
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
|
||||
|
||||
// Tabs
|
||||
|
||||
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
||||
|
||||
// Breakpoints
|
||||
|
||||
// This determines the maximum width breakpoint at which
|
||||
// the content will have a fixed start margin applied to it when the sidebar
|
||||
// is open. The content can shift its position when the sidebar is open/closed
|
||||
// at or below this breakpoint and will maintain its position above this breakpoint.
|
||||
@max-width-margin-start-content:
|
||||
(2 * @margin-start-content ) +
|
||||
( 2 * @padding-horizontal-page-container ) +
|
||||
@max-width-content-container;
|
||||
// 23em + 3.75em + 60em = 86.75em @ 16
|
||||
|
||||
// Defines the minimum viewport width, at which point the layout will not get any
|
||||
// smaller and will start horizontal scrolling instead.
|
||||
@min-width-supported:
|
||||
unit( 500px / @font-size-browser, em ) -
|
||||
( 2 * @padding-horizontal-page-container );
|
||||
// 31.25em - 3.75em = 27.5em @ 16
|
||||
|
||||
// Width used to determine when to break the personal tools onto a separate line
|
||||
// below the search box.
|
||||
@width-comfortable:
|
||||
( 2 * @padding-horizontal-page-container ) +
|
||||
@size-sidebar-button +
|
||||
@margin-horizontal-sidebar-button-icon +
|
||||
@min-width-logo +
|
||||
( 2 * @margin-horizontal-search ) +
|
||||
@max-width-search +
|
||||
@min-width-personal-tools;
|
||||
// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
|
||||
|
||||
@border-color-sidebar: @background-color-secondary--modern;
|
||||
@background-color-secondary--modern: #f8f9fa;
|
||||
@background-color-page-container: @background-color-base;
|
||||
|
||||
body {
|
||||
background-color: @background-color-secondary--modern;
|
||||
|
@ -162,7 +280,7 @@ body {
|
|||
|
||||
.mw-footer {
|
||||
border-top: @border-base;
|
||||
padding: 32px 0 0 0;
|
||||
padding: 0.75em;
|
||||
}
|
||||
|
||||
// Container logic.
|
|
@ -1,27 +0,0 @@
|
|||
// Legacy Vector stylesheets
|
||||
|
||||
@import '../../variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@media screen {
|
||||
@import 'common/normalize.less';
|
||||
@import 'legacy/layout.less';
|
||||
@import 'common/typography.less';
|
||||
|
||||
// Components
|
||||
@import 'Indicators.less';
|
||||
@import 'SiteNotice.less';
|
||||
@import 'Menu.less';
|
||||
@import 'SearchBox.less';
|
||||
@import 'MenuTabs.less';
|
||||
@import 'TabWatchstarLink.less';
|
||||
@import 'legacy/MenuDropdown.less';
|
||||
@import 'MenuPortal.less';
|
||||
@import 'legacy/Sidebar.less';
|
||||
@import 'SidebarLogo.less';
|
||||
@import 'Footer.less';
|
||||
}
|
||||
|
||||
@media print {
|
||||
@import 'common/print.less';
|
||||
}
|
|
@ -1,35 +1,27 @@
|
|||
// Modern Vector stylesheets
|
||||
/**
|
||||
* Vector modern stylesheets
|
||||
* See '../common/common.less' for common screen and print Vector stylesheets.
|
||||
*/
|
||||
|
||||
@import '../../variables.less';
|
||||
@import '../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@media screen {
|
||||
@import 'common/normalize.less';
|
||||
@import 'layout.less';
|
||||
@import 'common/typography.less';
|
||||
// Layouts
|
||||
@import './layouts/screen.less';
|
||||
|
||||
// Components
|
||||
@import 'Indicators.less';
|
||||
@import 'SiteNotice.less';
|
||||
@import 'Menu.less';
|
||||
@import 'VueEnhancedSearchBox.less';
|
||||
@import 'SearchBoxLoader.less';
|
||||
@import 'MenuTabs.less';
|
||||
@import 'TabWatchstarLink.less';
|
||||
@import 'MenuDropdown.less';
|
||||
@import 'MenuPortal.less';
|
||||
@import 'LanguageButton.less';
|
||||
@import 'Sidebar.less';
|
||||
@import 'SidebarLogo.less';
|
||||
@import 'Footer.less';
|
||||
@import './components/SearchBoxLoader.less';
|
||||
@import './components/VueEnhancedSearchBox.less';
|
||||
@import './components/Sidebar.less';
|
||||
@import './components/LanguageButton.less';
|
||||
}
|
||||
|
||||
@media all {
|
||||
// Component styles that should apply in all modes.
|
||||
@import 'Logo.less';
|
||||
// Component styles that should apply in all media.
|
||||
@import './components/Logo.less';
|
||||
}
|
||||
|
||||
@media print {
|
||||
@import 'common/print.less';
|
||||
@import 'layout-print.less';
|
||||
@import './layouts/print.less';
|
||||
}
|
||||
|
|
10
skin.json
|
@ -111,7 +111,10 @@
|
|||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"styles": [ "resources/skins.vector.styles/skin-legacy.less" ]
|
||||
"styles": [
|
||||
"resources/common/common.less",
|
||||
"resources/skins.vector.styles.legacy/skin-legacy.less"
|
||||
]
|
||||
},
|
||||
"skins.vector.styles": {
|
||||
"class": "ResourceLoaderSkinModule",
|
||||
|
@ -127,7 +130,10 @@
|
|||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"styles": [ "resources/skins.vector.styles/skin.less" ]
|
||||
"styles": [
|
||||
"resources/common/common.less",
|
||||
"resources/skins.vector.styles/skin.less"
|
||||
]
|
||||
},
|
||||
"skins.vector.icons": {
|
||||
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import 'mediawiki.ui/variables.less';
|
||||
@import '../variables.less';
|
||||
@import '../resources/common/variables.less';
|
||||
|
||||
/* mediawiki.notification */
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// Override core's `.mw-ui-icon` which defaults to 24x24.
|
||||
// The Design Style Guide and its icons are now set to 20x20.
|
||||
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
|
||||
@import '../variables.less';
|
||||
@import '../resources/common/variables.less';
|
||||
|
||||
.mw-portlet-lang .mw-ui-icon:before {
|
||||
background-size: unit( @size-icon / @font-size-base, em ) auto;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import '../variables.less';
|
||||
@import '../resources/common/variables.less';
|
||||
|
||||
.oo-ui-defaultOverlay,
|
||||
.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
|
||||
|
|