mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/tables.less
Jon Robson d1c4eec649 Set color on tables
Bug: T357998
Change-Id: I602dd9616c5452f5151fdcea729ff7ccac4711aa
2024-03-11 15:59:34 -07:00

80 lines
2.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 {
font-weight: bold;
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)
// FIXME: Replace this with content-tables.
.wikitable {
background-color: var( --background-color-base ); // T358449
color: var( --color-base ); // T357998
border: @border-width-base @border-style-base #54595d;
// Note older browsers will fall back to var(--border-color-subtle)
border-color: fade( #54595d, 30 );
border-collapse: collapse;
// 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;
}
}