Bản mẫu:inflection-table-top/style.css
Giao diện
.inflection-table-wrapper {
padding: 3px;
margin: 0.5em 0; /* matches styling for <p> elements in Vector classic */
background: var(--wikt-palette-paleblue); /* standard MediaWiki table background colour. Note this color also appears a few other times in this file - search for BGC */
border: 1px solid var(--wikt-palette-grey);
}
.inflection-table-wrapper.inflection-table-narrow {
/* SHOULD BE width: fit-content, BUT THE CSS SANITIZER DOESN'T LIKE IT.. */
}
.inflection-table-wrapper.inflection-table-no-title {
border: 0;
padding: 0;
}
.inflection-table-wrapper > table {
display: table; /* override Minerva styles */
width: 100%; /* of containing div - needed when the notes are wider than the table itself */
margin: 0; /* override Minerva styles */
text-align: center;
border-collapse: collapse;
border: 1px solid var(--wikt-palette-grey-6);
background: var(--wikt-palette-white);
}
.inflection-table-wrapper > table > caption {
display: table-caption; /* override Minerva styles */
background: var(--wikt-palette-paleblue); /* BGC - Minerva resets this, so we have to set it back again */
text-align: left;
font-size: 95%;
padding: 0.1em 0.5em;
font-weight: bold;
}
.inflection-table-wrapper > table > tbody > tr > td,
.inflection-table-wrapper > table > tbody > tr > th {
padding: 0.15em 0.6em;
border: solid var(--wikt-palette-grey-6);
border-width: 0 1px 1px 0;
}
.inflection-table-wrapper > table > tbody > tr > td:not(.secondary):not(.separator),
.inflection-table-wrapper > table > tbody > tr > th:not(.secondary):not(.separator) {
min-width: 5em;
}
.inflection-table-wrapper > table > tbody > tr > td.secondary {
background: var(--wikt-palette-lightergrey);
}
.inflection-table-wrapper > table > tbody > tr > th.secondary,
.inflection-table-wrapper > table > tbody > tr > th.outer {
font-style: italic;
}
/* separator cells, or blank cells: see Template:la-adecl and Template:ga-decl-noun */
.inflection-table-wrapper .separator {
height: 0.5em;
width: 0.5em;
min-height: 0.5em;
min-width: 0.5em;
padding: 0;
background: var(--wikt-palette-paleblue); /* BGC */
}
.inflection-table-wrapper .separator[rowspan] { /* vertical separator */
border-top: 1px solid var(--wikt-palette-paleblue); /* BGC */
border-bottom: 1px solid var(--wikt-palette-paleblue); /* BGC */
}
.inflection-table-wrapper .separator[colspan] { /* horizontal separator */
border-left: 1px solid var(--wikt-palette-paleblue); /* BGC */
border-right: 1px solid var(--wikt-palette-paleblue); /* BGC */
}
/* Notes at foot of table */
.inflection-table-notes {
text-align: left; /* undo centering in inflection boxes */
margin: 0.2em 0.5em 0.2em;
}
.inflection-table-notes p {
margin: 0.5em 0 0.2em;
}
/* Collapsibility */
.inflection-table-collapsed > table,
.inflection-table-collapsed > table > tbody > tr > td,
.inflection-table-collapsed > table > tbody > tr > th {
border-color: transparent;
}
.inflection-table-collapsed > table > tbody {
visibility: collapse; /* the perfect solution for this use case, but is not implemented in some browsers (Safari - the new IE) */
}
.inflection-table-collapsed > table > caption {
margin-bottom: -0.15em; /* reduce excessive height of collapsed box - not entirely sure where this height originates from, so this is a hack */
}
.inflection-table-collapsed .inflection-table-notes {
display: none; /* collapse notes */
}
/* workaround for browsers that do not support visibility: collapse. The .no-vc class is removed by JS code when not needed */
.inflection-table-collapsible.no-vc.inflection-table-collapsed {
max-height: 1.5em;
overflow: hidden;
}
.inflection-table-collapsible.no-vc.inflection-table-collapsed > table > tbody {
visibility: hidden;
}
.inflection-table-collapsible.no-vc > table > caption {
white-space: nowrap; /* if there was ever more than one line of text, it would get occluded by the <div>'s max-height */
}
.no-vc-spacer {
display: inline-block;
width: 4em;
}
/* Mobile styling */
@media all and (max-width: 639px) { /* matches calc(640px - 1px) in Minerva CSS */
.inflection-table-wrapper.inflection-table-narrow {
position: relative; /* needed for NavToggle styles below */
overflow: auto;
max-width: 100%;
width: auto !important; /* override inline style that is being used to avoid a CSS sanitiser bug/lacuna - has to have !important to allow this */
}
/* fix for collapsed tables */
.inflection-table-collapsed tbody {
display: none;
}
/* make sure [hide] link doesn't scroll away when table is uncollapsed */
.inflection-table-wrapper .NavToggle {
position: sticky;
right: 0.5em; /* matches padding on <caption> */
background: inherit;
}
/* when there is a single column of header cells down the left, "stick" this column in place */
.inflection-table-wrapper.sticky-left-column > table > tbody > tr > th:first-child {
position: sticky;
left: -4px; /* counteract 3px padding on .inflection-table-wrapper + 1px border on table */
max-width: 35vw; /* limit these cells to 35% of screen width */
}
.inflection-table-wrapper.inflection-table-no-title.sticky-left-column > table > tbody > tr > th:first-child {
left: -1px; /* counteract 1px border on table */
}
}
/* Place transliterations in a paler colour on their own line */
.inflection-table-wrapper table span.tr {
color: var(--wikt-palette-darkgrey); /* TODO this is just slightly below AAA contrast when used on a -0 coloured background */
}
.inflection-table-wrapper table span.tr:before {
content: "\a"; /* newline */
white-space: pre;
}
.inflection-table-wrapper table span.mention-gloss-paren {
display: none; /* hide parens surrounding translit */
}
/* Inflection boxes - multiple tables inside one box */
.inflection-box > table {
background: none;
border: 0;
}
.inflection-box > table > tbody > tr > td {
padding: 0 0.2em;
border: 0;
vertical-align: top;
}
.inflection-box .inflection-table-wrapper {
display: inline-block;
vertical-align: top;
margin: 0.2em 0.1em;
}
/* overqualified on purpose to increase specificity */
.inflection-box .inflection-table-wrapper > table.inflection-table {
background: var(--wikt-palette-white); /* override no-title palette rules below */
}
.inflection-box.flow-vertical .inflection-table-wrapper {
display: block;
width: auto !important; /* override inline style that is being used to avoid a CSS sanitiser bug/lacuna - has to have !important to allow this */
}
/* Individual palettes: dark-on-light */
/* Generate this in your browser's JavaScript console by running the following code
and right-clicking on the output to "copy string contents"
colors = ['red', 'scarlet', 'orange', 'amber', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'indigo', 'purple', 'magenta', 'rose', 'grey', 'brown']
css = ''
for (let color of colors) css += `
.inflection-table-${color}.inflection-table-no-title table {
background-color: var(--wikt-palette-${color}-0); /* when no title, provide a colour that gently contrasts with the page background *\/
}
.inflection-table-${color} th.secondary {
background-color: var(--wikt-palette-${color}-1);
}
.inflection-table-${color} th {
background-color: var(--wikt-palette-${color}-2);
}
.inflection-table-${color} th.outer {
background-color: var(--wikt-palette-${color}-4);
}`
*/
.inflection-table-red.inflection-table-no-title table {
background-color: var(--wikt-palette-red-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-red th.secondary {
background-color: var(--wikt-palette-red-1);
}
.inflection-table-red th {
background-color: var(--wikt-palette-red-2);
}
.inflection-table-red th.outer {
background-color: var(--wikt-palette-red-4);
}
.inflection-table-scarlet.inflection-table-no-title table {
background-color: var(--wikt-palette-scarlet-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-scarlet th.secondary {
background-color: var(--wikt-palette-scarlet-1);
}
.inflection-table-scarlet th {
background-color: var(--wikt-palette-scarlet-2);
}
.inflection-table-scarlet th.outer {
background-color: var(--wikt-palette-scarlet-4);
}
.inflection-table-orange.inflection-table-no-title table {
background-color: var(--wikt-palette-orange-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-orange th.secondary {
background-color: var(--wikt-palette-orange-1);
}
.inflection-table-orange th {
background-color: var(--wikt-palette-orange-2);
}
.inflection-table-orange th.outer {
background-color: var(--wikt-palette-orange-4);
}
.inflection-table-amber.inflection-table-no-title table {
background-color: var(--wikt-palette-amber-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-amber th.secondary {
background-color: var(--wikt-palette-amber-1);
}
.inflection-table-amber th {
background-color: var(--wikt-palette-amber-2);
}
.inflection-table-amber th.outer {
background-color: var(--wikt-palette-amber-4);
}
.inflection-table-yellow.inflection-table-no-title table {
background-color: var(--wikt-palette-yellow-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-yellow th.secondary {
background-color: var(--wikt-palette-yellow-1);
}
.inflection-table-yellow th {
background-color: var(--wikt-palette-yellow-2);
}
.inflection-table-yellow th.outer {
background-color: var(--wikt-palette-yellow-4);
}
.inflection-table-lime.inflection-table-no-title table {
background-color: var(--wikt-palette-lime-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-lime th.secondary {
background-color: var(--wikt-palette-lime-1);
}
.inflection-table-lime th {
background-color: var(--wikt-palette-lime-2);
}
.inflection-table-lime th.outer {
background-color: var(--wikt-palette-lime-4);
}
.inflection-table-green.inflection-table-no-title table {
background-color: var(--wikt-palette-green-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-green th.secondary {
background-color: var(--wikt-palette-green-1);
}
.inflection-table-green th {
background-color: var(--wikt-palette-green-2);
}
.inflection-table-green th.outer {
background-color: var(--wikt-palette-green-4);
}
.inflection-table-teal.inflection-table-no-title table {
background-color: var(--wikt-palette-teal-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-teal th.secondary {
background-color: var(--wikt-palette-teal-1);
}
.inflection-table-teal th {
background-color: var(--wikt-palette-teal-2);
}
.inflection-table-teal th.outer {
background-color: var(--wikt-palette-teal-4);
}
.inflection-table-cyan.inflection-table-no-title table {
background-color: var(--wikt-palette-cyan-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-cyan th.secondary {
background-color: var(--wikt-palette-cyan-1);
}
.inflection-table-cyan th {
background-color: var(--wikt-palette-cyan-2);
}
.inflection-table-cyan th.outer {
background-color: var(--wikt-palette-cyan-4);
}
.inflection-table-blue.inflection-table-no-title table {
background-color: var(--wikt-palette-blue-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-blue th.secondary {
background-color: var(--wikt-palette-blue-1);
}
.inflection-table-blue th {
background-color: var(--wikt-palette-blue-2);
}
.inflection-table-blue th.outer {
background-color: var(--wikt-palette-blue-4);
}
.inflection-table-indigo.inflection-table-no-title table {
background-color: var(--wikt-palette-indigo-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-indigo th.secondary {
background-color: var(--wikt-palette-indigo-1);
}
.inflection-table-indigo th {
background-color: var(--wikt-palette-indigo-2);
}
.inflection-table-indigo th.outer {
background-color: var(--wikt-palette-indigo-4);
}
.inflection-table-purple.inflection-table-no-title table {
background-color: var(--wikt-palette-purple-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-purple th.secondary {
background-color: var(--wikt-palette-purple-1);
}
.inflection-table-purple th {
background-color: var(--wikt-palette-purple-2);
}
.inflection-table-purple th.outer {
background-color: var(--wikt-palette-purple-4);
}
.inflection-table-magenta.inflection-table-no-title table {
background-color: var(--wikt-palette-magenta-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-magenta th.secondary {
background-color: var(--wikt-palette-magenta-1);
}
.inflection-table-magenta th {
background-color: var(--wikt-palette-magenta-2);
}
.inflection-table-magenta th.outer {
background-color: var(--wikt-palette-magenta-4);
}
.inflection-table-rose.inflection-table-no-title table {
background-color: var(--wikt-palette-rose-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-rose th.secondary {
background-color: var(--wikt-palette-rose-1);
}
.inflection-table-rose th {
background-color: var(--wikt-palette-rose-2);
}
.inflection-table-rose th.outer {
background-color: var(--wikt-palette-rose-4);
}
.inflection-table-grey.inflection-table-no-title table {
background-color: var(--wikt-palette-grey-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-grey th.secondary {
background-color: var(--wikt-palette-grey-1);
}
.inflection-table-grey th {
background-color: var(--wikt-palette-grey-2);
}
.inflection-table-grey th.outer {
background-color: var(--wikt-palette-grey-4);
}
.inflection-table-brown.inflection-table-no-title table {
background-color: var(--wikt-palette-brown-0); /* when no title, provide a colour that gently contrasts with the page background */
}
.inflection-table-brown th.secondary {
background-color: var(--wikt-palette-brown-1);
}
.inflection-table-brown th {
background-color: var(--wikt-palette-brown-2);
}
.inflection-table-brown th.outer {
background-color: var(--wikt-palette-brown-4);
}