2019-08-08 20:01:03 +00:00
|
|
|
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
@import '../../minerva.less/minerva.mixins.less';
|
|
|
|
@import 'mediawiki.mixins.less';
|
2023-07-27 21:35:56 +00:00
|
|
|
@import 'icons.less';
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
/* stylelint-disable no-descending-specificity */
|
|
|
|
html,
|
|
|
|
body {
|
|
|
|
// Ensure overlays take up full screen
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2019-03-05 03:34:55 +00:00
|
|
|
html {
|
2019-12-06 05:46:50 +00:00
|
|
|
font-size: @font-size-root;
|
2019-03-05 03:34:55 +00:00
|
|
|
// Support Safari: Prevent font scaling in landscape
|
|
|
|
-webkit-text-size-adjust: none;
|
|
|
|
}
|
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
body {
|
2024-06-10 20:52:01 +00:00
|
|
|
background-color: @background-color-base;
|
|
|
|
color: @color-base;
|
2019-03-05 03:34:55 +00:00
|
|
|
// Support All Browsers: Remove `margin` (normalized)
|
|
|
|
margin: 0;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
2024-02-15 01:00:50 +00:00
|
|
|
/* needed for navigation elements and content */
|
|
|
|
ul {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2019-03-05 03:49:32 +00:00
|
|
|
main {
|
|
|
|
// Support IE 9-11: Apply correct `display` (normalized), see T207618.
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2019-11-26 05:34:22 +00:00
|
|
|
.mw-body {
|
2017-07-12 15:12:40 +00:00
|
|
|
// avoid margin collapsing (see T147956)
|
2024-06-10 20:52:01 +00:00
|
|
|
border-top: @border-width-base @border-style-base @border-color-transparent;
|
2017-07-12 15:12:40 +00:00
|
|
|
padding-bottom: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.overlay-enabled,
|
2019-11-26 05:34:22 +00:00
|
|
|
.mw-body {
|
2024-06-10 20:52:01 +00:00
|
|
|
background-color: @background-color-base;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
2020-04-27 19:14:47 +00:00
|
|
|
// If footer has last modified list item (Desktop MinervaNeue ?useformat=desktop&useskin=minerva),
|
|
|
|
// hide it (T173545).
|
2019-11-26 05:02:40 +00:00
|
|
|
// stylelint-disable-next-line selector-max-id
|
2019-10-04 15:05:37 +00:00
|
|
|
.navigation-drawer--loading,
|
2017-08-25 15:35:23 +00:00
|
|
|
#footer-info-lastmod {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2022-04-01 15:23:00 +00:00
|
|
|
// Override rule in MobileFrontend (
|
|
|
|
// (ul.footer-info li in resources/mobile.init.styles.less)
|
|
|
|
// to show copyright.
|
2021-10-26 23:05:37 +00:00
|
|
|
// stylelint-disable-next-line selector-max-id
|
|
|
|
#footer-info-copyright {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2021-10-28 21:48:05 +00:00
|
|
|
// JavaScript overlay and server side rendered header
|
2021-09-29 14:16:36 +00:00
|
|
|
.overlay-header,
|
2021-07-16 20:10:00 +00:00
|
|
|
.minerva-header {
|
2021-10-28 21:48:05 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2017-07-12 15:12:40 +00:00
|
|
|
width: 100%;
|
|
|
|
border-spacing: 0;
|
|
|
|
border-collapse: collapse;
|
2024-01-31 15:06:56 +00:00
|
|
|
height: @height-site-header;
|
2017-07-12 15:12:40 +00:00
|
|
|
white-space: nowrap;
|
|
|
|
// When banners are present we want to easily distinguish between them and the header so add border
|
2023-04-09 13:49:29 +00:00
|
|
|
border-top: @border-subtle;
|
|
|
|
// Hide the header border top when a banner is not present.
|
|
|
|
margin-top: -@border-width-base;
|
2017-07-31 17:12:59 +00:00
|
|
|
}
|
|
|
|
|
2022-02-22 16:38:16 +00:00
|
|
|
//
|
|
|
|
// Search
|
|
|
|
//
|
|
|
|
.minerva-search-form {
|
|
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
flex-grow: 1;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
> button {
|
|
|
|
margin-left: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-28 21:48:05 +00:00
|
|
|
// Search input
|
|
|
|
// Used in minerva header and search overlay header
|
2018-12-12 23:20:10 +00:00
|
|
|
.search-box .search {
|
2021-02-23 22:59:38 +00:00
|
|
|
@size-icon-search: unit( 18 / @font-size-browser, em );
|
|
|
|
@size-icon-search-gutter: unit( 8 / @font-size-browser, em );
|
|
|
|
@size-modifier-border: unit( 1 / @font-size-browser, em );
|
2019-03-12 21:55:40 +00:00
|
|
|
@padding-vertical-search: 8px - @border-width-base;
|
2021-02-23 22:59:38 +00:00
|
|
|
@padding-start-search-icon: @size-icon-search + ( 2 * @size-icon-search-gutter ) - @size-modifier-border;
|
2024-06-10 20:52:01 +00:00
|
|
|
background-color: @background-color-base; // Support Fennec, Opera Mini: Remove default background, see T38490.
|
2021-02-23 22:59:38 +00:00
|
|
|
background-position: left @size-icon-search-gutter center;
|
2018-12-12 23:20:10 +00:00
|
|
|
background-repeat: no-repeat;
|
2021-02-23 22:59:38 +00:00
|
|
|
background-size: @size-icon-search;
|
2019-03-12 21:00:00 +00:00
|
|
|
// Support Safari: Get rid of rounded corners.
|
|
|
|
-webkit-appearance: none;
|
|
|
|
width: 100%;
|
2024-02-09 20:24:41 +00:00
|
|
|
margin: 0;
|
2019-09-24 17:23:01 +00:00
|
|
|
height: 2.25em;
|
2024-06-10 20:52:01 +00:00
|
|
|
border: @border-width-base @border-style-base @border-color-inverted;
|
2020-06-12 04:30:50 +00:00
|
|
|
border-radius: @border-radius-base;
|
2019-03-12 21:55:40 +00:00
|
|
|
padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon;
|
2024-06-11 20:46:30 +00:00
|
|
|
box-shadow: @box-shadow-drop-small;
|
2021-10-28 21:48:05 +00:00
|
|
|
// Keyboard focus is taken care of below at `.search:focus`.
|
2019-03-12 21:00:00 +00:00
|
|
|
outline: 0;
|
2023-04-09 13:49:29 +00:00
|
|
|
transition-property: border-color, box-shadow;
|
|
|
|
transition-duration: @transition-duration-medium;
|
2024-02-09 00:00:34 +00:00
|
|
|
font: inherit;
|
2019-03-12 21:55:40 +00:00
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
|
|
|
|
&::-webkit-search-decoration,
|
|
|
|
&::-webkit-search-cancel-button,
|
|
|
|
&::-webkit-search-results-button,
|
|
|
|
&::-webkit-search-results-decoration {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-28 21:48:05 +00:00
|
|
|
// Provide focus styles only in non-JS and overlay to prevent double transition.
|
|
|
|
.client-nojs .search-box .search:focus,
|
|
|
|
.search-overlay .search-box .search:focus {
|
2024-06-10 20:52:01 +00:00
|
|
|
border-color: @border-color-progressive--focus;
|
|
|
|
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, 0 1px 1px rgba( 0, 0, 0, 0.05 );
|
2021-10-28 21:48:05 +00:00
|
|
|
}
|
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
.content {
|
2022-11-16 14:04:22 +00:00
|
|
|
.mw-heading2,
|
2017-07-12 15:12:40 +00:00
|
|
|
h2 {
|
|
|
|
// Clear table of contents and any other floated elements in desktop Minerva.
|
2018-04-24 11:51:48 +00:00
|
|
|
clear: left;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
2023-11-17 18:01:40 +00:00
|
|
|
// Only reveal section edit links in expanded section headings.
|
|
|
|
// The .section-heading class is only present on mobile.
|
|
|
|
.section-heading {
|
|
|
|
.mw-editsection {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
2017-07-12 15:12:40 +00:00
|
|
|
|
2023-11-17 18:01:40 +00:00
|
|
|
&.open-block .mw-editsection,
|
|
|
|
.client-nojs & .mw-editsection {
|
2017-07-12 15:12:40 +00:00
|
|
|
visibility: visible;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-08-29 22:47:48 +00:00
|
|
|
/* For legacy parser */
|
2022-11-16 14:04:22 +00:00
|
|
|
.mw-parser-output > .mw-heading2,
|
2017-11-01 18:28:06 +00:00
|
|
|
.mw-parser-output > h2,
|
2024-09-26 21:28:13 +00:00
|
|
|
.mw-parser-output[ data-mw-parsoid-version ] > section > .mw-heading2,
|
2017-07-12 15:12:40 +00:00
|
|
|
.section-heading {
|
2024-06-10 20:52:01 +00:00
|
|
|
border-bottom: @border-width-base @border-style-base @border-color-muted;
|
2024-01-31 15:06:56 +00:00
|
|
|
margin-bottom: @margin-heading;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
2021-05-27 21:10:06 +00:00
|
|
|
.mw-parser-output {
|
Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.
However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.
Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-13 23:24:55 +00:00
|
|
|
// We want to apply display: flex to the heading wrapper elements to style them right (T305971),
|
|
|
|
// but not to the heading text elements, because it results in bad text layout (T367468).
|
|
|
|
// This turns out to be difficult, because mobile/desktop, legacy/modern/unwrapped headings,
|
|
|
|
// and DiscussionTools/normal page generate a lot of different combinations of HTML markup.
|
|
|
|
|
|
|
|
// Support modern headings, DiscussionTools, and mobile mode
|
2022-11-16 14:04:22 +00:00
|
|
|
.mw-heading,
|
Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.
However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.
Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-13 23:24:55 +00:00
|
|
|
.section-heading {
|
|
|
|
display: flex;
|
2024-06-21 00:06:27 +00:00
|
|
|
// T356513: display after floated elements
|
|
|
|
min-width: fit-content;
|
Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.
However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.
Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-13 23:24:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Support desktop Minerva legacy headings (this can only be done with a :has() selector,
|
|
|
|
// there's no other way to distinguish them from unwrapped headings, even though it lacks
|
|
|
|
// support for some browsers). Will be no longer needed when legacy headings are gone.
|
|
|
|
// FIXME: Remove this block when $wgParserEnableLegacyHeadingDOM is removed.
|
|
|
|
:is( h1, h2, h3, h4, h5, h6 ):has( .mw-headline ) {
|
2022-04-12 16:45:02 +00:00
|
|
|
display: flex;
|
2023-11-17 18:08:20 +00:00
|
|
|
}
|
2021-05-27 21:10:06 +00:00
|
|
|
|
Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.
However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.
Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-13 23:24:55 +00:00
|
|
|
// FIXME: Remove `.mw-headline` when $wgParserEnableLegacyHeadingDOM is removed.
|
2024-07-27 05:52:33 +00:00
|
|
|
h1,
|
|
|
|
h2,
|
|
|
|
h3,
|
|
|
|
h4,
|
|
|
|
h5,
|
|
|
|
h6,
|
2023-11-17 18:08:20 +00:00
|
|
|
.mw-headline {
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-basis: 0;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
2023-08-09 21:49:19 +00:00
|
|
|
|
2023-11-17 18:08:20 +00:00
|
|
|
.mw-editsection {
|
|
|
|
align-self: center;
|
|
|
|
// Negative margins to prevent the edit icon from affecting the height of the heading
|
|
|
|
margin-top: -1em;
|
|
|
|
margin-bottom: -1em;
|
|
|
|
.cdx-mixin-button-layout-flush( 'end', true, 'large' );
|
|
|
|
|
|
|
|
.cdx-button {
|
2024-01-24 22:02:12 +00:00
|
|
|
font-size: 1rem;
|
2021-05-27 21:10:06 +00:00
|
|
|
}
|
2020-01-30 05:35:34 +00:00
|
|
|
}
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-11-26 05:02:40 +00:00
|
|
|
// stylelint-disable selector-max-id
|
2017-07-12 15:12:40 +00:00
|
|
|
#page-secondary-actions {
|
|
|
|
a {
|
|
|
|
margin: 10px 2px 2px 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// It may be better to express these in a single class
|
|
|
|
// or think about using extend or a mixin to stay with semantic selectors
|
|
|
|
// https://css-tricks.com/the-extend-concept/
|
|
|
|
#bodyContent .panel .content,
|
|
|
|
.overlay .content-header,
|
|
|
|
.overlay .panel,
|
2024-01-27 22:37:26 +00:00
|
|
|
.mw-mf-page-list.side-list .list-thumb,
|
|
|
|
.mw-mf-page-list li,
|
2017-07-12 15:12:40 +00:00
|
|
|
.topic-title-list li,
|
|
|
|
.site-link-list li,
|
|
|
|
.drawer,
|
2021-10-04 22:51:47 +00:00
|
|
|
/*Specificity needed to override content styles in core. */
|
|
|
|
.content h2.list-header,
|
2019-09-13 20:24:30 +00:00
|
|
|
.list-header,
|
2017-07-12 15:12:40 +00:00
|
|
|
.mw-revision {
|
2024-01-31 15:06:56 +00:00
|
|
|
padding-left: @padding-content;
|
|
|
|
padding-right: @padding-content;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.image-list,
|
2021-10-25 20:40:47 +00:00
|
|
|
.minerva-anon-talk-message,
|
2017-07-12 15:12:40 +00:00
|
|
|
.pre-content,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* Form only pages e.g Special:MobileOptions */
|
2018-04-02 21:26:06 +00:00
|
|
|
#mw-content-text > form > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* Save button on Special:MobileOptions */
|
2017-12-01 18:52:02 +00:00
|
|
|
#mw-content-text > form > .oo-ui-widget,
|
2017-07-12 15:12:40 +00:00
|
|
|
.content,
|
|
|
|
.post-content {
|
2024-01-31 15:06:56 +00:00
|
|
|
margin: 0 @margin-content;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
|
2019-07-30 16:56:58 +00:00
|
|
|
// T217197
|
2023-11-17 17:49:21 +00:00
|
|
|
#mw-content-subtitle {
|
2019-07-30 16:56:58 +00:00
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
2019-08-01 16:47:13 +00:00
|
|
|
|
|
|
|
&:empty {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2019-07-30 16:56:58 +00:00
|
|
|
}
|
2022-12-09 22:34:19 +00:00
|
|
|
// stylelint-enable selector-max-id
|
2019-07-30 16:56:58 +00:00
|
|
|
|
2023-11-07 09:03:29 +00:00
|
|
|
@media all and ( min-width: @min-width-breakpoint-tablet ) {
|
2018-12-12 23:20:10 +00:00
|
|
|
/* FIXME: this should be one generic class name */
|
|
|
|
/* SpecialMobileEditWatchlist */
|
2017-07-12 15:12:40 +00:00
|
|
|
.page-summary-list,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* Talk overlay */
|
2017-07-12 15:12:40 +00:00
|
|
|
.topic-title-list,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* structured languages, mobile pagelists */
|
2017-07-12 15:12:40 +00:00
|
|
|
.site-link-list,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* overlays */
|
2017-07-12 15:12:40 +00:00
|
|
|
.overlay .panel,
|
2018-12-12 23:20:10 +00:00
|
|
|
/* language overlay / MobileSpecialPageFeed */
|
2017-07-12 15:12:40 +00:00
|
|
|
.list-header {
|
2024-01-31 15:06:56 +00:00
|
|
|
padding-left: @padding-content-tablet;
|
|
|
|
padding-right: @padding-content-tablet;
|
2017-07-12 15:12:40 +00:00
|
|
|
}
|
|
|
|
}
|
2020-02-28 20:28:59 +00:00
|
|
|
/* stylelint-enable no-descending-specificity */
|