mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-04 10:39:08 +00:00
59fd0cd5dc
All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
75 lines
2 KiB
Plaintext
75 lines
2 KiB
Plaintext
// Tables
|
|
@import 'mediawiki.mixins.less';
|
|
@import '../../../minerva.less/minerva.variables.less';
|
|
@import '../../../minerva.less/minerva.mixins.less';
|
|
|
|
// These are only intended for smaller screens.
|
|
// This avoids having to undo them from another media query,
|
|
// by putting the original in a media query instead.
|
|
// This also avoids having a reset with too-high specificity, which
|
|
// would break unrelated styles from core and extensions.
|
|
@media all and ( max-width: @width-breakpoint-tablet ) {
|
|
.content {
|
|
table {
|
|
display: block;
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
|
|
&.wikitable {
|
|
// Remove the outer table border as the table container may be
|
|
// wider than all the cells (T206762). In most cases the table
|
|
// border is not visible anyway due to border-collapse.
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
caption {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
table {
|
|
margin: 1em 0;
|
|
|
|
/* following 4 rules are needed for scrolling */
|
|
overflow: auto; /* for browsers that don't support overflow-y */
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
|
|
caption {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// For skinning normal data tables
|
|
// Compare with mediawiki.legacy/shared.css
|
|
// Move out of .content selector to avoid increased
|
|
// specificty conflicts e.g. with tablesorter (T205945)
|
|
.wikitable {
|
|
border: @border-width-base @border-style-base #54595d;
|
|
// Note older browsers will fall back to var(--border-color-subtle)
|
|
border-color: fade( #54595d, 30 );
|
|
|
|
// We only style cells that are direct children of the wikitable table since
|
|
// table tags may be used for non-table purposes within the cells.
|
|
> tr > th,
|
|
> tr > td,
|
|
> * > tr > th,
|
|
> * > tr > td {
|
|
border: @border-width-base @border-style-base #54595d;
|
|
// Note older browsers will fall back to var(--border-color-subtle)
|
|
border-color: fade( #54595d, 30 );
|
|
padding: 0.2em;
|
|
}
|
|
|
|
// Make headings distinguishable
|
|
> tr > th,
|
|
> * > tr > th {
|
|
background-color: var( --background-color-interactive );
|
|
text-align: center;
|
|
}
|
|
}
|