MediaWiki:Common.less/wikitables.less: Difference between revisions
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
Line 1: | Line 1: | ||
:root { |
|||
:root { --wikitable-header-bg: @BODY_DARK; --wikitable-border: @BODY_BORDER; --wikitable-bg: @BODY_LIGHT; --wikitable-bg-lighter: #e9e3d6; // lighten(@wikitable-bg, 10%); Used on hover effect --wikitable-color: @TEXT_COLOR; --table-na-background: fade(@white, 30); --table-na-color: var(--subtle-color); --table-yes-background: @caper; --table-yes-color: @san-felix; --table-no-background: @apricot-peach; --table-no-color: @mocaccino; --table-maybe-background: @golden; --table-maybe-color: @cinnamon; --droptable-text-color: @black; --droptable-always-background: #afeeee; --droptable-common-background: #56e156; --droptable-uncommon-background: #ffed4c; --droptable-rare-background: #ff863c; --droptable-veryrare-background: #ff6262; --droptable-random-background: #ffa3ff;}// Brown-ify defaults.wikitable { background: var(--wikitable-bg); color: var(--wikitable-color); border-color: var(--wikitable-border); box-shadow: @box-shadow; // All cells borders > tr > th, > tr > td, > * > tr > th, > * > tr > td { border-color: var(--wikitable-border); // Template:NoBorder &.table-noborder { border-left-style: hidden; border-right-style: hidden; padding-left: 0; padding-right: 0; } } // All header cells bg > tr > th, > * > tr > th { background-color: var(--wikitable-header-bg); } // Already in a box .tabber & { box-shadow: none; }}// For DropsLine, ItemDropsLine.table-bg-always, .table-bg-blue { background: var(--droptable-always-background); color: var(--droptable-text-color);}.table-bg-common, .table-bg-green { background: var(--droptable-common-background); color: var(--droptable-text-color);}.table-bg-uncommon, .table-bg-yellow { background: var(--droptable-uncommon-background); color: var(--droptable-text-color);}.table-bg-rare, .table-bg-orange { background: var(--droptable-rare-background); color: var(--droptable-text-color);}.table-bg-veryrare, .table-bg-red { background: var(--droptable-veryrare-background); color: var(--droptable-text-color);}.table-bg-random, .table-bg-pink { background: var(--droptable-random-background); color: var(--droptable-text-color);}// For skill calculator.table-bg-fade { opacity: 0.6; background: rgba(0, 0, 0, 10%);}// Metadata tables, allmessages, etc.mw_metadata { td, th { border-color: var(--wikitable-border); } th { background-color: var(--wikitable-header-bg); } td { background-color: var(--wikitable-bg); }}// Special:AllPages, BlockList, etc.mw-datatable { border-color: var(--wikitable-border); td, th { border-color: var(--wikitable-border); } // cells th { background-color: var(--wikitable-header-bg); } // headers td { background-color: var(--wikitable-bg); } // on hover on both cells tr:hover td { background-color: var(--wikitable-bg); }}// alternating colours (similar to spreadsheets)table.alternating-rows tr:nth-child(odd),table.alternating-cols td:nth-child(odd) { background: var(--wikitable-alternating-bg);}// Template:NA.table-na { background: var(--table-na-background); color: var(--table-na-color); vertical-align: middle; text-align: center;}// Template:Yes.table-yes { background: var(--table-yes-background); color: var(--table-yes-color);}.table-positive { background: var(--table-yes-background);}// Template:No.table-no { background: var(--table-no-background); color: var(--table-no-color);}.table-negative { background: var(--table-no-background);}// Template:Maybe.table-maybe { background: var(--table-maybe-background); color: var(--table-maybe-color);}// Special:AllMessages#mw-allmessagestable { .am_actual, .am_default { background-color: var(--wikitable-bg); } .am_default:hover, .am_actual:hover, tbody:hover td { background-color: var(--wikitable-bg-lighter); }}// For tables within tables, to make them take up the full space of a celltable.wikitable td.no-cell-spacing { padding: 0; height: 0; // actual height is overridden by content height, but this allows height:100% to stretch to full td height table { margin: -1px; // collapse borders with parent td width: calc(100% + 2px); height: calc(100% + 2px); }}// used on mmg table and similar// to hide bullet points.plainlist { ol, ul { margin: 0; } li { margin-bottom: 0; // might make lists slightly clamped tho list-style: none; }}/* table alignment help *//* nth td from the left is right-aligned - ths are ignored */table.align-right-1 td:nth-of-type(1),table.align-right-2 td:nth-of-type(2),table.align-right-3 td:nth-of-type(3),table.align-right-4 td:nth-of-type(4),table.align-right-5 td:nth-of-type(5),table.align-right-6 td:nth-of-type(6),table.align-right-7 td:nth-of-type(7),table.align-right-8 td:nth-of-type(8),table.align-right-9 td:nth-of-type(9),table.align-right-10 td:nth-of-type(10),table.align-right-11 td:nth-of-type(11),table.align-right-12 td:nth-of-type(12),table.align-right-13 td:nth-of-type(13),table.align-right-14 td:nth-of-type(14),table.align-right-15 td:nth-of-type(15),table.align-right-16 td:nth-of-type(16),table.align-right-17 td:nth-of-type(17),table.align-right-18 td:nth-of-type(18),table.align-right-19 td:nth-of-type(19),table.align-right-20 td:nth-of-type(20) { text-align: right;}/* center */table.align-center-1 td:nth-of-type(1),table.align-center-2 td:nth-of-type(2),table.align-center-3 td:nth-of-type(3),table.align-center-4 td:nth-of-type(4),table.align-center-5 td:nth-of-type(5),table.align-center-6 td:nth-of-type(6),table.align-center-7 td:nth-of-type(7),table.align-center-8 td:nth-of-type(8),table.align-center-9 td:nth-of-type(9),table.align-center-10 td:nth-of-type(10),table.align-center-11 td:nth-of-type(11),table.align-center-12 td:nth-of-type(12),table.align-center-13 td:nth-of-type(13),table.align-center-14 td:nth-of-type(14),table.align-center-15 td:nth-of-type(15),table.align-center-16 td:nth-of-type(16),table.align-center-17 td:nth-of-type(17),table.align-center-18 td:nth-of-type(18),table.align-center-19 td:nth-of-type(19),table.align-center-20 td:nth-of-type(20) { text-align: center;}/* left */table.align-left-1 td:nth-of-type(1),table.align-left-2 td:nth-of-type(2),table.align-left-3 td:nth-of-type(3),table.align-left-4 td:nth-of-type(4),table.align-left-5 td:nth-of-type(5),table.align-left-6 td:nth-of-type(6),table.align-left-7 td:nth-of-type(7),table.align-left-8 td:nth-of-type(8),table.align-left-9 td:nth-of-type(9),table.align-left-10 td:nth-of-type(10),table.align-left-11 td:nth-of-type(11),table.align-left-12 td:nth-of-type(12),table.align-left-13 td:nth-of-type(13),table.align-left-14 td:nth-of-type(14),table.align-left-15 td:nth-of-type(15),table.align-left-16 td:nth-of-type(16),table.align-left-17 td:nth-of-type(17),table.align-left-18 td:nth-of-type(18),table.align-left-19 td:nth-of-type(19),table.align-left-20 td:nth-of-type(20) { text-align: left;} |
|||
--wikitable-header-bg: @BODY_DARK; |
|||
--wikitable-border: @BODY_BORDER; |
|||
--wikitable-bg: @BODY_LIGHT; |
|||
--wikitable-bg-lighter: #e9e3d6; // lighten(@wikitable-bg, 10%); Used on hover effect |
|||
--wikitable-color: @TEXT_COLOR; |
|||
--table-na-background: fade(@white, 30); |
|||
--table-na-color: var(--subtle-color); |
|||
--table-yes-background: @caper; |
|||
--table-yes-color: @san-felix; |
|||
--table-no-background: @apricot-peach; |
|||
--table-no-color: @mocaccino; |
|||
--table-maybe-background: @golden; |
|||
--table-maybe-color: @cinnamon; |
|||
--droptable-text-color: @black; |
|||
--droptable-always-background: #afeeee; |
|||
--droptable-common-background: #56e156; |
|||
--droptable-uncommon-background: #ffed4c; |
|||
--droptable-rare-background: #ff863c; |
|||
--droptable-veryrare-background: #ff6262; |
|||
--droptable-random-background: #ffa3ff; |
|||
} |
|||
// Brown-ify defaults |
|||
.wikitable { |
|||
background: var(--wikitable-bg); |
|||
color: var(--wikitable-color); |
|||
border-color: var(--wikitable-border); |
|||
box-shadow: @box-shadow; |
|||
// All cells borders |
|||
> tr > th, |
|||
> tr > td, |
|||
> * > tr > th, |
|||
> * > tr > td { |
|||
border-color: var(--wikitable-border); |
|||
// Template:NoBorder |
|||
&.table-noborder { |
|||
border-left-style: hidden; |
|||
border-right-style: hidden; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
// All header cells bg |
|||
> tr > th, |
|||
> * > tr > th { |
|||
background-color: var(--wikitable-header-bg); |
|||
} |
|||
// Already in a box |
|||
.tabber & { |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
// For DropsLine, ItemDropsLine |
|||
.table-bg-always, .table-bg-blue { |
|||
background: var(--droptable-always-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
.table-bg-common, .table-bg-green { |
|||
background: var(--droptable-common-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
.table-bg-uncommon, .table-bg-yellow { |
|||
background: var(--droptable-uncommon-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
.table-bg-rare, .table-bg-orange { |
|||
background: var(--droptable-rare-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
.table-bg-veryrare, .table-bg-red { |
|||
background: var(--droptable-veryrare-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
.table-bg-random, .table-bg-pink { |
|||
background: var(--droptable-random-background); |
|||
color: var(--droptable-text-color); |
|||
} |
|||
// For skill calculator |
|||
.table-bg-fade { |
|||
opacity: 0.6; |
|||
background: rgba(0, 0, 0, 10%); |
|||
} |
|||
// Metadata tables, allmessages, etc |
|||
.mw_metadata { |
|||
td, |
|||
th { |
|||
border-color: var(--wikitable-border); |
|||
} |
|||
th { |
|||
background-color: var(--wikitable-header-bg); |
|||
} |
|||
td { |
|||
background-color: var(--wikitable-bg); |
|||
} |
|||
} |
|||
// Special:AllPages, BlockList, etc |
|||
.mw-datatable { |
|||
border-color: var(--wikitable-border); |
|||
td, |
|||
th { |
|||
border-color: var(--wikitable-border); |
|||
} |
|||
// cells |
|||
th { |
|||
background-color: var(--wikitable-header-bg); |
|||
} |
|||
// headers |
|||
td { |
|||
background-color: var(--wikitable-bg); |
|||
} |
|||
// on hover on both cells |
|||
tr:hover td { |
|||
background-color: var(--wikitable-bg); |
|||
} |
|||
} |
|||
// alternating colours (similar to spreadsheets) |
|||
table.alternating-rows tr:nth-child(odd), |
|||
table.alternating-cols td:nth-child(odd) { |
|||
background: var(--wikitable-alternating-bg); |
|||
} |
|||
// Template:NA |
|||
.table-na { |
|||
background: var(--table-na-background); |
|||
color: var(--table-na-color); |
|||
vertical-align: middle; |
|||
text-align: center; |
|||
} |
|||
// Template:Yes |
|||
.table-yes { |
|||
background: var(--table-yes-background); |
|||
color: var(--table-yes-color); |
|||
} |
|||
.table-positive { |
|||
background: var(--table-yes-background); |
|||
} |
|||
// Template:No |
|||
.table-no { |
|||
background: var(--table-no-background); |
|||
color: var(--table-no-color); |
|||
} |
|||
.table-negative { |
|||
background: var(--table-no-background); |
|||
} |
|||
// Template:Maybe |
|||
.table-maybe { |
|||
background: var(--table-maybe-background); |
|||
color: var(--table-maybe-color); |
|||
} |
|||
// Special:AllMessages |
|||
#mw-allmessagestable { |
|||
.am_actual, |
|||
.am_default { |
|||
background-color: var(--wikitable-bg); |
|||
} |
|||
.am_default:hover, |
|||
.am_actual:hover, |
|||
tbody:hover td { |
|||
background-color: var(--wikitable-bg-lighter); |
|||
} |
|||
} |
|||
// For tables within tables, to make them take up the full space of a cell |
|||
table.wikitable td.no-cell-spacing { |
|||
padding: 0; |
|||
height: 0; // actual height is overridden by content height, but this allows height:100% to stretch to full td height |
|||
table { |
|||
margin: -1px; // collapse borders with parent td |
|||
width: calc(100% + 2px); |
|||
height: calc(100% + 2px); |
|||
} |
|||
} |
|||
// used on mmg table and similar |
|||
// to hide bullet points |
|||
.plainlist { |
|||
ol, |
|||
ul { |
|||
margin: 0; |
|||
} |
|||
li { |
|||
margin-bottom: 0; // might make lists slightly clamped tho |
|||
list-style: none; |
|||
} |
|||
} |
|||
/* table alignment help */ |
|||
/* nth td from the left is right-aligned - ths are ignored */ |
|||
table.align-right-1 td:nth-of-type(1), |
|||
table.align-right-2 td:nth-of-type(2), |
|||
table.align-right-3 td:nth-of-type(3), |
|||
table.align-right-4 td:nth-of-type(4), |
|||
table.align-right-5 td:nth-of-type(5), |
|||
table.align-right-6 td:nth-of-type(6), |
|||
table.align-right-7 td:nth-of-type(7), |
|||
table.align-right-8 td:nth-of-type(8), |
|||
table.align-right-9 td:nth-of-type(9), |
|||
table.align-right-10 td:nth-of-type(10), |
|||
table.align-right-11 td:nth-of-type(11), |
|||
table.align-right-12 td:nth-of-type(12), |
|||
table.align-right-13 td:nth-of-type(13), |
|||
table.align-right-14 td:nth-of-type(14), |
|||
table.align-right-15 td:nth-of-type(15), |
|||
table.align-right-16 td:nth-of-type(16), |
|||
table.align-right-17 td:nth-of-type(17), |
|||
table.align-right-18 td:nth-of-type(18), |
|||
table.align-right-19 td:nth-of-type(19), |
|||
table.align-right-20 td:nth-of-type(20) { |
|||
text-align: right; |
|||
} |
|||
/* center */ |
|||
table.align-center-1 td:nth-of-type(1), |
|||
table.align-center-2 td:nth-of-type(2), |
|||
table.align-center-3 td:nth-of-type(3), |
|||
table.align-center-4 td:nth-of-type(4), |
|||
table.align-center-5 td:nth-of-type(5), |
|||
table.align-center-6 td:nth-of-type(6), |
|||
table.align-center-7 td:nth-of-type(7), |
|||
table.align-center-8 td:nth-of-type(8), |
|||
table.align-center-9 td:nth-of-type(9), |
|||
table.align-center-10 td:nth-of-type(10), |
|||
table.align-center-11 td:nth-of-type(11), |
|||
table.align-center-12 td:nth-of-type(12), |
|||
table.align-center-13 td:nth-of-type(13), |
|||
table.align-center-14 td:nth-of-type(14), |
|||
table.align-center-15 td:nth-of-type(15), |
|||
table.align-center-16 td:nth-of-type(16), |
|||
table.align-center-17 td:nth-of-type(17), |
|||
table.align-center-18 td:nth-of-type(18), |
|||
table.align-center-19 td:nth-of-type(19), |
|||
table.align-center-20 td:nth-of-type(20) { |
|||
text-align: center; |
|||
} |
|||
/* left */ |
|||
table.align-left-1 td:nth-of-type(1), |
|||
table.align-left-2 td:nth-of-type(2), |
|||
table.align-left-3 td:nth-of-type(3), |
|||
table.align-left-4 td:nth-of-type(4), |
|||
table.align-left-5 td:nth-of-type(5), |
|||
table.align-left-6 td:nth-of-type(6), |
|||
table.align-left-7 td:nth-of-type(7), |
|||
table.align-left-8 td:nth-of-type(8), |
|||
table.align-left-9 td:nth-of-type(9), |
|||
table.align-left-10 td:nth-of-type(10), |
|||
table.align-left-11 td:nth-of-type(11), |
|||
table.align-left-12 td:nth-of-type(12), |
|||
table.align-left-13 td:nth-of-type(13), |
|||
table.align-left-14 td:nth-of-type(14), |
|||
table.align-left-15 td:nth-of-type(15), |
|||
table.align-left-16 td:nth-of-type(16), |
|||
table.align-left-17 td:nth-of-type(17), |
|||
table.align-left-18 td:nth-of-type(18), |
|||
table.align-left-19 td:nth-of-type(19), |
|||
table.align-left-20 td:nth-of-type(20) { |
|||
text-align: left; |
|||
} |
Latest revision as of 17:14, 17 October 2024
- root {
--wikitable-header-bg: @BODY_DARK; --wikitable-border: @BODY_BORDER; --wikitable-bg: @BODY_LIGHT; --wikitable-bg-lighter: #e9e3d6; // lighten(@wikitable-bg, 10%); Used on hover effect --wikitable-color: @TEXT_COLOR;
--table-na-background: fade(@white, 30); --table-na-color: var(--subtle-color); --table-yes-background: @caper; --table-yes-color: @san-felix; --table-no-background: @apricot-peach; --table-no-color: @mocaccino; --table-maybe-background: @golden; --table-maybe-color: @cinnamon;
--droptable-text-color: @black; --droptable-always-background: #afeeee; --droptable-common-background: #56e156; --droptable-uncommon-background: #ffed4c; --droptable-rare-background: #ff863c; --droptable-veryrare-background: #ff6262; --droptable-random-background: #ffa3ff; }
// Brown-ify defaults .wikitable { background: var(--wikitable-bg); color: var(--wikitable-color); border-color: var(--wikitable-border); box-shadow: @box-shadow;
// All cells borders > tr > th, > tr > td, > * > tr > th, > * > tr > td { border-color: var(--wikitable-border);
// Template:NoBorder &.table-noborder { border-left-style: hidden; border-right-style: hidden; padding-left: 0; padding-right: 0; } }
// All header cells bg > tr > th, > * > tr > th { background-color: var(--wikitable-header-bg); }
// Already in a box .tabber & { box-shadow: none; } }
// For DropsLine, ItemDropsLine .table-bg-always, .table-bg-blue { background: var(--droptable-always-background); color: var(--droptable-text-color); }
.table-bg-common, .table-bg-green { background: var(--droptable-common-background); color: var(--droptable-text-color); }
.table-bg-uncommon, .table-bg-yellow { background: var(--droptable-uncommon-background); color: var(--droptable-text-color); }
.table-bg-rare, .table-bg-orange { background: var(--droptable-rare-background); color: var(--droptable-text-color); }
.table-bg-veryrare, .table-bg-red { background: var(--droptable-veryrare-background); color: var(--droptable-text-color); }
.table-bg-random, .table-bg-pink { background: var(--droptable-random-background); color: var(--droptable-text-color); }
// For skill calculator .table-bg-fade { opacity: 0.6; background: rgba(0, 0, 0, 10%); }
// Metadata tables, allmessages, etc .mw_metadata { td, th { border-color: var(--wikitable-border); }
th { background-color: var(--wikitable-header-bg); }
td { background-color: var(--wikitable-bg); } }
// Special:AllPages, BlockList, etc .mw-datatable { border-color: var(--wikitable-border);
td, th { border-color: var(--wikitable-border); }
// cells th { background-color: var(--wikitable-header-bg); }
// headers td { background-color: var(--wikitable-bg); }
// on hover on both cells tr:hover td { background-color: var(--wikitable-bg); } }
// alternating colours (similar to spreadsheets) table.alternating-rows tr:nth-child(odd), table.alternating-cols td:nth-child(odd) { background: var(--wikitable-alternating-bg); }
// Template:NA .table-na { background: var(--table-na-background); color: var(--table-na-color); vertical-align: middle; text-align: center; }
// Template:Yes .table-yes { background: var(--table-yes-background); color: var(--table-yes-color); }
.table-positive { background: var(--table-yes-background); }
// Template:No .table-no { background: var(--table-no-background); color: var(--table-no-color); }
.table-negative { background: var(--table-no-background); }
// Template:Maybe .table-maybe { background: var(--table-maybe-background); color: var(--table-maybe-color); }
// Special:AllMessages
- mw-allmessagestable {
.am_actual, .am_default { background-color: var(--wikitable-bg); }
.am_default:hover, .am_actual:hover, tbody:hover td { background-color: var(--wikitable-bg-lighter); } }
// For tables within tables, to make them take up the full space of a cell table.wikitable td.no-cell-spacing { padding: 0; height: 0; // actual height is overridden by content height, but this allows height:100% to stretch to full td height
table { margin: -1px; // collapse borders with parent td width: calc(100% + 2px); height: calc(100% + 2px); } }
// used on mmg table and similar // to hide bullet points .plainlist { ol, ul { margin: 0; }
li { margin-bottom: 0; // might make lists slightly clamped tho list-style: none; } }
/* table alignment help */ /* nth td from the left is right-aligned - ths are ignored */ table.align-right-1 td:nth-of-type(1), table.align-right-2 td:nth-of-type(2), table.align-right-3 td:nth-of-type(3), table.align-right-4 td:nth-of-type(4), table.align-right-5 td:nth-of-type(5), table.align-right-6 td:nth-of-type(6), table.align-right-7 td:nth-of-type(7), table.align-right-8 td:nth-of-type(8), table.align-right-9 td:nth-of-type(9), table.align-right-10 td:nth-of-type(10), table.align-right-11 td:nth-of-type(11), table.align-right-12 td:nth-of-type(12), table.align-right-13 td:nth-of-type(13), table.align-right-14 td:nth-of-type(14), table.align-right-15 td:nth-of-type(15), table.align-right-16 td:nth-of-type(16), table.align-right-17 td:nth-of-type(17), table.align-right-18 td:nth-of-type(18), table.align-right-19 td:nth-of-type(19), table.align-right-20 td:nth-of-type(20) {
text-align: right;
}
/* center */ table.align-center-1 td:nth-of-type(1), table.align-center-2 td:nth-of-type(2), table.align-center-3 td:nth-of-type(3), table.align-center-4 td:nth-of-type(4), table.align-center-5 td:nth-of-type(5), table.align-center-6 td:nth-of-type(6), table.align-center-7 td:nth-of-type(7), table.align-center-8 td:nth-of-type(8), table.align-center-9 td:nth-of-type(9), table.align-center-10 td:nth-of-type(10), table.align-center-11 td:nth-of-type(11), table.align-center-12 td:nth-of-type(12), table.align-center-13 td:nth-of-type(13), table.align-center-14 td:nth-of-type(14), table.align-center-15 td:nth-of-type(15), table.align-center-16 td:nth-of-type(16), table.align-center-17 td:nth-of-type(17), table.align-center-18 td:nth-of-type(18), table.align-center-19 td:nth-of-type(19), table.align-center-20 td:nth-of-type(20) {
text-align: center;
}
/* left */ table.align-left-1 td:nth-of-type(1), table.align-left-2 td:nth-of-type(2), table.align-left-3 td:nth-of-type(3), table.align-left-4 td:nth-of-type(4), table.align-left-5 td:nth-of-type(5), table.align-left-6 td:nth-of-type(6), table.align-left-7 td:nth-of-type(7), table.align-left-8 td:nth-of-type(8), table.align-left-9 td:nth-of-type(9), table.align-left-10 td:nth-of-type(10), table.align-left-11 td:nth-of-type(11), table.align-left-12 td:nth-of-type(12), table.align-left-13 td:nth-of-type(13), table.align-left-14 td:nth-of-type(14), table.align-left-15 td:nth-of-type(15), table.align-left-16 td:nth-of-type(16), table.align-left-17 td:nth-of-type(17), table.align-left-18 td:nth-of-type(18), table.align-left-19 td:nth-of-type(19), table.align-left-20 td:nth-of-type(20) {
text-align: left;
}