mediawiki-skins-Vector/resources/skins.vector.styles/common.less
Nicholas Ray 9823538683 Isolate Vector Styles to their Respective Component
This will help with the encapsulation/reusability of each component.

* Stylesheets were renamed to reflect their respective component name
(e.g. search.less became SearchBox.less)

* Styles were isolated to each component:

* navigation.less now only contains classes that are relevant to
Navigation.mustache.
  * personalNavigation.less, search.less, and tabs.less
    imports were removed and made first-class styles.
  * several selectors were moved into common.less
  * #p-logo was moved into sidebar

* tabs.less was renamed to VectorTabs.less and styles specific to
VectorMenu.less were put into VectorMenu.less

* Storybook was updated to reflect changes

Bug: T243281
Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
2020-03-03 18:20:19 +00:00

189 lines
3.4 KiB
Plaintext

/*
* Any rules which should not be flipped automatically in right-to-left situations should be
* prepended with @noflip in a comment block.
*
*/
@import '../../variables.less';
@import 'mediawiki.mixins.less';
/* Framework */
html {
font-size: @font-size-root;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: @font-family-sans;
}
body {
background-color: @background-color-secondary;
overflow-y: scroll;
}
/* Content */
.mw-body,
.parsoid-body {
background-color: @background-color-base;
color: @color-base;
padding: @padding-content;
direction: ltr;
}
.mw-body,
#mw-data-after-content {
margin-left: 10em;
}
.mw-body {
/* Border on top, left, and bottom side */
border: @border-width-base @border-style-base @border-color-content;
border-right-width: 0;
/* Merge the border with tabs' one (in their background image) */
margin-top: -@border-width-base;
// h1's can exist outside of mw-body-content so some heading styles
// need to be defined in mw-body as well
& h1,
&-content h1,
&-content h2 {
margin-bottom: 0.25em;
padding: 0;
font-family: @font-family-serif;
line-height: @line-height-heading;
// Fallback heading font for scripts which render poorly in `@font-family-serif`.
// See T73240
&:lang( ja ), /* See T65817 */
&:lang( he ), /* See T65843 and T65844 */
&:lang( ko ) { /* See T65827 */
font-family: @font-family-sans--fallback;
}
/* Burmese (Myanmar) language headlines would be cropped with set `line-height` */
/* See T193270 */
&:lang( my ) {
line-height: normal;
}
}
& h1,
&-content h1 {
font-size: @font-size-heading-1;
}
.firstHeading {
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
overflow: visible;
}
.mw-indicators {
float: right;
font-size: @font-size-base;
line-height: @line-height-base;
/* Ensure that this is displayed on top of .mw-body-content and clickable */
position: relative;
z-index: 1;
}
.mw-indicator {
display: inline-block;
}
}
.mw-body-content {
position: relative;
font-size: @font-size-base;
line-height: @line-height-base;
z-index: 0;
p {
margin: 0.5em 0;
}
h1 {
margin-top: 1em;
}
h2 {
margin-top: 1em;
font-size: @font-size-heading-2;
}
h3,
h4,
h5,
h6 {
margin-top: 0.3em;
margin-bottom: 0;
padding-bottom: 0;
line-height: @line-height-base;
}
h3 {
font-size: @font-size-heading-3;
}
h3,
h4 {
font-weight: bold;
}
h4,
h5,
h6 {
font-size: @font-size-reset; // Reset.
}
.toc h2 {
font-family: @font-family-sans;
font-size: @font-size-reset; // Reset.
}
}
/* Allow edit sections outside of mw-body-content (T160269) */
.mw-editsection,
.mw-editsection-like {
font-family: @font-family-sans;
}
/* Hide empty portlets */
.emptyPortlet {
display: none;
}
ul {
// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
.list-style-image( 'images/bullet-icon.svg' );
}
pre,
.mw-code {
line-height: @line-height-code;
}
/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
font-size: @font-size-site-notice;
}
.mw-jump-link:not( :focus ) {
.mixin-screen-reader-text;
}
/* Head */
#mw-page-base {
background-position: bottom left;
height: 5em;
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
}