|
|
| Line 1: |
Line 1: |
| @import 'mediawiki.skin.variables.less';
| |
| @import 'mixins.less';
| |
|
| |
| /* Reset user agent styles. We don't reset small or blockquote here deliberately */ | | /* Reset user agent styles. We don't reset small or blockquote here deliberately */ |
| cite, | | cite, |
| Line 119: |
Line 116: |
| width: 100%; | | width: 100%; |
| } | | } |
| }
| |
|
| |
| /**
| |
| * Ambox classes are nested in a top-level class
| |
| * This class is appended to the DOM via JS
| |
| * THESE RULES ONLY APPLY TO MINERVA skin.
| |
| **/
| |
| @ambox-padding: 8px;
| |
| @ambox-icon-padding: @ambox-padding * 4;
| |
| @line-height-content: 1.65;
| |
|
| |
| body.skin-minerva .mw-parser-output .ambox,
| |
| /* Be more specific than .content table styles in Minerva */
| |
| body.skin-minerva .mw-parser-output table.ambox {
| |
| display: block;
| |
| margin: 0;
| |
| }
| |
|
| |
| .client-js body.skin-minerva .mw-parser-output .ambox {
| |
| cursor: pointer;
| |
| width: auto;
| |
| // !important needed to override core ambox styles
| |
| background: @background-color-interactive-subtle !important;
| |
| color: @color-subtle;
| |
| margin-bottom: 1px;
| |
|
| |
| tbody {
| |
| display: table;
| |
| width: 100%;
| |
| }
| |
|
| |
| // Assuming that most ambox templates wrap content in this element.
| |
| // See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
| |
| // https://phabricator.wikimedia.org/T206887 suggests .mbox-text-div is also needed.
| |
| .mbox-text-div,
| |
| .mbox-text-span {
| |
| display: block;
| |
| max-height: @line-height-content * 2em;
| |
| // All will have this height (approx 2 lines) even if a single line e.g. {{dictdef}} when on mobile.
| |
| // Overriden later in tablet styles.
| |
| height: @line-height-content * 2em;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| // Wrestle with inline styles that editors may place on elements inside the ambox
| |
| div {
| |
| // e.g. on mw-collapsible inside Multiple issues template
| |
| margin: 0 !important;
| |
| // e.g. on Template:Expand Russian
| |
| padding: 0 !important;
| |
| }
| |
|
| |
| td,
| |
| div.mbox-text {
| |
| position: relative;
| |
| // Override !important above if this is a div
| |
| padding: @ambox-padding @ambox-padding @ambox-padding @ambox-icon-padding !important;
| |
|
| |
| > div,
| |
| > span {
| |
| font-size: unit( ( 13 / 16 ), rem );
| |
| }
| |
| }
| |
|
| |
| // All text should be treated the same
| |
| b {
| |
| font-weight: inherit;
| |
| }
| |
|
| |
| // Hide links in new treatment
| |
| a {
| |
| color: inherit !important;
| |
| -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ) !important;
| |
|
| |
| &:hover,
| |
| &:focus {
| |
| text-decoration: none;
| |
| outline: inherit;
| |
| }
| |
| }
| |
|
| |
| small,
| |
| .hide-when-compact,
| |
| /* Template:Expand Russian */
| |
| .mw-collapsible-content,
| |
| /* Remove empty leftmost column when present (.mbox-empty-cell)
| |
| * and .verbose and any hr tags that might be present in the ambox
| |
| * See https://en.wikipedia.org/w/index.php?
| |
| * title=Special:WhatLinksHere/Template:Proposed_deletion_notify
| |
| * (https://phabricator.wikimedia.org/T197265) */
| |
| .mbox-empty-cell,
| |
| hr,
| |
| .verbose,
| |
| /* Nested amboxes (multiple issues) */
| |
| table,
| |
| .mbox-image {
| |
| display: none;
| |
| }
| |
|
| |
| .minerva-ambox-icon {
| |
| position: absolute;
| |
| left: @ambox-padding;
| |
| top: 11px;
| |
| }
| |
|
| |
| .ambox-learn-more {
| |
| color: @color-progressive;
| |
| position: absolute;
| |
| right: @ambox-padding;
| |
| bottom: @ambox-padding;
| |
| z-index: @z-index-base;
| |
| line-height: @line-height-content; // sets height for fade & aligns "learn more" to ambox text.
| |
|
| |
| /* creates a fade under the "learn more" button to avoid overlapping text. */
| |
| &::before {
| |
| content: '';
| |
| position: absolute;
| |
| z-index: @z-index-bottom;
| |
| bottom: 0;
| |
| right: 0;
| |
| width: 100%; // width & height defined by length of "learn more".
| |
| height: 100%;
| |
| box-sizing: content-box; // explicitly setting box-sizing so padding extends beyond 100%.
| |
| padding-left: 4em;
| |
| background: linear-gradient( to right, transparent 0, @background-color-interactive-subtle 3em );
| |
| }
| |
| }
| |
|
| |
| @media screen and ( min-width: @min-width-breakpoint-tablet ) {
| |
| .mbox-text-div,
| |
| .mbox-text-span {
| |
| height: auto;
| |
| margin-bottom: @ambox-padding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
| |
| }
| |
|
| |
| .ambox-learn-more {
| |
| left: @ambox-icon-padding;
| |
| right: 0;
| |
| background: none;
| |
|
| |
| // Move blur to far right last line
| |
| // https://phabricator.wikimedia.org/T197931#4475197
| |
| &::before {
| |
| top: unit( -@line-height-content, em );
| |
| width: 10px;
| |
| }
| |
| }
| |
| }
| |
| }
| |
|
| |
| // FIXME: [T367519] This is temporarily restricted to .skin-minerva to provide a short term fix for T367462.
| |
| // The expectation is that this CSS will be revised to exclude the .skin-minerva class in future,
| |
| // or limited to the Minerva skin via a skinStyle.
| |
| body.skin--responsive.skin-minerva .mw-parser-output {
| |
| .hatnote,
| |
| .dablink,
| |
| .rellink {
| |
| padding: 5px 7px;
| |
| color: @color-subtle;
| |
| font-size: unit( ( 13 / 16 ), rem );
| |
| background-color: @background-color-interactive-subtle;
| |
| margin-bottom: 1px;
| |
| overflow: hidden;
| |
|
| |
| a {
| |
| color: @color-progressive;
| |
| }
| |
| }
| |
| }
| |
|
| |
| // FIXME [T367519] This is temporarily restricted to .skin-minerva to provide a short term fix for T367462
| |
| // The expectation is that this CSS will be revised to exclude the .skin-minerva class in future,
| |
| // and/or appropriate bits limited to the Minerva skin via a skinStyle.
| |
| body.skin--responsive.skin-minerva .mw-parser-output {
| |
| .infobox {
| |
| // Unfloat tables and infoboxes:;
| |
| // A lot of templates introduce floating and horizontal margins inline styles
| |
| float: none !important;
| |
| margin-left: 0 !important;
| |
| margin-right: 0 !important;
| |
| font-size: 90%;
| |
| position: relative;
| |
| border: @border-width-base @border-style-base @border-color-muted;
| |
| margin-bottom: 2em;
| |
| color: @color-base;
| |
| background-color: @background-color-interactive-subtle;
| |
| display: flex;
| |
| flex: 1 1 100%;
| |
| flex-flow: column nowrap;
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| text-align: start;
| |
|
| |
| caption {
| |
| padding: 10px 10px 0;
| |
| text-align: center;
| |
| }
| |
|
| |
| th,
| |
| td {
| |
| vertical-align: top;
| |
| border: 0;
| |
| border-bottom: @border-width-base @border-style-base @border-color-muted;
| |
| padding: 7px 10px;
| |
| }
| |
|
| |
| tbody > tr > td,
| |
| tbody > tr > th {
| |
| flex: 1 0;
| |
| }
| |
|
| |
| td:only-child,
| |
| th:only-child {
| |
| width: 100%;
| |
| }
| |
|
| |
| tr:last-child th,
| |
| tr:last-child td {
| |
| border: 0;
| |
| }
| |
|
| |
| & > tbody,
| |
| & > caption {
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| }
| |
|
| |
| & > tbody > tr {
| |
| min-width: 100%;
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| }
| |
| }
| |
| }
| |
|
| |
| /* Tablet specific styling */
| |
| @media all and ( min-width: @min-width-breakpoint-tablet ) {
| |
| body.skin-minerva.skin--responsive .mw-parser-output {
| |
| // Float infoboxes to the right of the page
| |
| .infobox {
| |
| margin: 0.5em 0 1em 35px !important;
| |
| // Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left
| |
| // FIXME [Templates]: Inline styles force us to use !important
| |
| max-width: 320px !important;
| |
| width: auto !important;
| |
| float: right !important;
| |
| clear: right !important;
| |
| }
| |
| }
| |
| }
| |
|
| |
| /** This mixin should only be used where it's safe to do so. It should not be applied
| |
| to content which may have important information. */
| |
| .night-mode-strip-all-colors-when-safe() {
| |
| background: inherit !important;
| |
| color: inherit !important;
| |
| /* If a border is defined retain it but make it black. If no border this won't do anything. */
| |
| border-color: @border-color-subtle !important;
| |
| }
| |
|
| |
| @media screen {
| |
| .skin-theme-clientpref-night .page-Main_Page {
| |
| .mw-parser-output :not( .notheme ):not( a ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
| }
| |
|
| |
| @media screen and ( prefers-color-scheme: dark ) {
| |
| .skin-theme-clientpref-os .page-Main_Page {
| |
| .mw-parser-output :not( .notheme ):not( a ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
| }
| |
|
| |
| @media screen {
| |
| .skin-theme-clientpref-night .ns-100 {
| |
| .mw-parser-output :not( .notheme ):not( a ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
| }
| |
|
| |
| @media screen and ( prefers-color-scheme: dark ) {
| |
| .skin-theme-clientpref-os .ns-100 {
| |
| .mw-parser-output :not( .notheme ):not( a ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
| }
| |
|
| |
| /* TODO: Check matches https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L188 onwards
| |
| before merging. */
| |
|
| |
| /* T358385 */
| |
| [ bgcolor ] {
| |
| // Important: this should correspond with the light mode theme version of color-base
| |
| color: #333;
| |
| }
| |
|
| |
| @selector-inline-style-color: ~'[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] )';
| |
|
| |
| .mixin-links-in-styled-tables-readable() {
| |
| /* Limited to article namespace. This should not be added to namespaces which reset colors e.g. Portal (100) */
| |
| body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .navbox-inner ):not( .navbox ) {
| |
| [bgcolor],
| |
| &[style*="background"]:not([style*="transparent"]):not([style*="inherit"]),
| |
| th@{selector-inline-style-color},
| |
| td@{selector-inline-style-color},
| |
| tr@{selector-inline-style-color} td {
| |
| a:not( .mw-selflink ) {
| |
| color: var( --color-base-fixed, #202122 );
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| // For red links use a wavy underline, to distinguish them from standard links.
| |
| a.new {
| |
| text-decoration-style: wavy;
| |
| }
| |
| }
| |
| }
| |
| }
| |
|
| |
| @media screen {
| |
| html.skin-theme-clientpref-night {
| |
| // These colors become !important in night mode to avoid color contrast issues.
| |
| .hatnote:not( .notheme ),
| |
| .dablink:not( .notheme ),
| |
| .rellink:not( .notheme ),
| |
| .infobox:not( .notheme ) {
| |
| color: @color-base !important;
| |
| background-color: @background-color-interactive-subtle !important;
| |
| }
| |
|
| |
| /* T357453 - attempt to strip colors from the majority of infoboxes in night mode (unless notheme specified) */
| |
| // please forgive me for bypassing the linter there is no easy way to keep all of the infobox classes grouped without
| |
| .infobox td,
| |
| .infobox th,
| |
| .infobox-above,
| |
| /* T359644 */
| |
| .infobox p,
| |
| .infobox > div,
| |
| .infobox caption,
| |
| /* frwiki T359644 */
| |
| .infobox--frwiki td,
| |
| .infobox--frwiki th,
| |
| .infobox--frwiki p,
| |
| .infobox--frwiki > div,
| |
| .infobox--frwiki caption,
| |
| /* itwiki */
| |
| .sinottico th,
| |
| .infobox-header,
| |
| /* T358164 General case that templates/extensions can opt into */
| |
| .skin-nightmode-reset-color,
| |
| .navigation-box,
| |
| .metadata,
| |
| /* T357735 */
| |
| .quotebox,
| |
| /* T357726 */
| |
| .side-box,
| |
| .side-box div,
| |
| /* T358012 */
| |
| .navbox,
| |
| .navbox-subgroup,
| |
| .navbox-group,
| |
| .navbox-even,
| |
| .navbox-abovebelow,
| |
| .navbox-title {
| |
| &:not( .notheme ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
|
| |
| // T358797 - if a background color is specified, assume they wanted the day mode font color
| |
| .mw-parser-output [ style*='background' ] {
| |
| /* @color-base */
| |
| color: #202122; // not !important so that if a color is also specified it will take priority
| |
| }
| |
|
| |
| .mixin-links-in-styled-tables-readable();
| |
| }
| |
| }
| |
|
| |
| @media screen and ( prefers-color-scheme: dark ) {
| |
| html.skin-theme-clientpref-os {
| |
| /* T357453 */
| |
| .infobox td,
| |
| .infobox th,
| |
| .infobox-above,
| |
| /* T359644 */
| |
| .infobox p,
| |
| .infobox > div,
| |
| .infobox caption,
| |
| /* frwiki T359644 */
| |
| .infobox--frwiki td,
| |
| .infobox--frwiki th,
| |
| .infobox--frwiki p,
| |
| .infobox--frwiki > div,
| |
| .infobox--frwiki caption,
| |
| /* itwiki */
| |
| .sinottico th,
| |
| .infobox-header,
| |
| /* T358164 General case that templates/extensions can opt into */
| |
| .skin-nightmode-reset-color,
| |
| .navigation-box,
| |
| .metadata,
| |
| /* T357735 */
| |
| .quotebox,
| |
| /* T357726 */
| |
| .side-box,
| |
| .side-box div,
| |
| /* T358012 */
| |
| .navbox,
| |
| .navbox-subgroup,
| |
| .navbox-group,
| |
| .navbox-even,
| |
| .navbox-abovebelow,
| |
| .navbox-title {
| |
| &:not( .notheme ) {
| |
| .night-mode-strip-all-colors-when-safe();
| |
| }
| |
| }
| |
|
| |
| // These colors become !important in night mode to avoid color contrast issues.
| |
| .hatnote:not( .notheme ),
| |
| .dablink:not( .notheme ),
| |
| .rellink:not( .notheme ),
| |
| .infobox:not( .notheme ) {
| |
| color: @color-base !important;
| |
| background-color: @background-color-interactive-subtle !important;
| |
| }
| |
|
| |
| // T358797 - if a background color is specified, assume they wanted the day mode font color
| |
| .mw-parser-output [ style*='background' ] {
| |
| /* @color-base */
| |
| color: #202122; // not !important so that if a color is also specified it will take priority
| |
| }
| |
|
| |
| .mixin-links-in-styled-tables-readable();
| |
| }
| |
| } | | } |
/* Reset user agent styles. We don't reset small or blockquote here deliberately */
cite,
dfn {
font-style: inherit;
}
q {
quotes: '"' '"' "'" "'";
}
/* Hide stuff meant for accounts with special permissions. Made visible again in
[[MediaWiki:Group-sysop.css]] and so on for other groups. */
.checkuser-show,
.sysop-show,
.user-show,
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-show,
.autoconfirmed-show {
display: none;
}
/* Prevent flags in tables from collapsing
Fix for [[phab:T116318]]
*/
.flagicon img {
min-width: 23px;
}
/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
margin-bottom: 0 !important;
}
/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
*/
.mw-parser-output .infobox-header,
.mw-parser-output .infobox-subheader,
.mw-parser-output .infobox-above,
.mw-parser-output .infobox-title,
.mw-parser-output .infobox-image,
.mw-parser-output .infobox-full-data,
.mw-parser-output .infobox-below {
text-align: center;
}
/* Prevent line breaks in silly places:
1) Where desired
2) Links when we don't want them to
*/
.mw-parser-output .nowrap,
.nowraplinks a {
white-space: nowrap;
}
.mw-parser-output .infobox .nowrap {
white-space: normal !important;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}
/* Generic class texhtml class for inline math */
span.texhtml {
font-family: serif;
white-space: nowrap;
}
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/********* General fixes for night mode - please sync any changes here with [[MediaWiki:Vector.css]] *********/
@media screen {
html.skin-theme-clientpref-night .navbox a:not(.new):not(.mw-selflink):link,
html.skin-theme-clientpref-night .infobox a:not(.new):not(.mw-selflink):link {
color: var( --color-progressive ) !important;
}
/* T370074 */
html.skin-theme-clientpref-night .mw-parser-output section > figure img,
html.skin-theme-clientpref-night .mw-parser-output section > div > figure img,
html.skin-theme-clientpref-night .mw-parser-output > figure img {
background: var( --background-color-disabled-fixed, #C8CCD1 );
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .navbox a:not(.new):not(.mw-selflink):link,
html.skin-theme-clientpref-os .infobox a:not(.new):not(.mw-selflink):link {
color: var( --color-progressive ) !important;
}
/* T370074 */
html.skin-theme-clientpref-os .mw-parser-output section > figure img,
html.skin-theme-clientpref-os .mw-parser-output section > div > figure img,
html.skin-theme-clientpref-os .mw-parser-output > figure img {
background: var( --background-color-disabled-fixed, #C8CCD1 );
}
}
/* [[phab:T201233]] */
@media ( max-width: 719px /* @max-width-breakpoint-tablet */) {
span.mwe-math-element-block,
dd .mwe-math-element-inline {
overflow-x: scroll;
display: inline-block;
vertical-align: middle;
width: 100%;
}
}