Template:Inflection-table-top/style.css

< Template:Inflection-table-top
Revision as of 13:52, 19 October 2025 by wikt>Theknightwho (More flexible colour controls to allow rows to be adjusted using the <tr> element, and make the use of the darker scheme less laborious.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
/**
 * This CSS page provides styling for the {{inflection-table-top}} family of templates.
 *
 * The style rules are complex and have various dependencies on one another.
 * They have been comprehensively tested on desktop and mobile. 
 * Take care before making any changes. If you're not confident with CSS,
 * consider requesting help from an interface administrator.
 */

.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);
    position: relative; /* needed for NavToggle styles */
	/* SHOULD BE width: fit-content, BUT THE CSS SANITIZER DOESN'T LIKE IT.. */
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
}

.inflection-table-wrapper.inflection-table-collapsed {
	overflow: hidden;
}

.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.wide > table > tbody > tr {
	font-size: 90%;
}

.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) {
	min-width: 5em;
}

/* very-narrow class for use on tables of unusually short words (e.g. pronouns) */
/* note, this rule needs to have higher specificity than the previous rule, so even
   though the :not selectors are unnecessary styling-wise, we need to keep them */
.inflection-table-wrapper.very-narrow > table > tbody > tr > td:not(.secondary):not(.separator) {
	min-width: auto;
}

.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;
}

.inflection-table-wrapper > table > tbody > tr > th.secondary > sup,
.inflection-table-wrapper > table > tbody > tr > th.outer > sup {
	font-style: normal;
}

/* 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 */
}

/* blank cell at end of row: see [[Template:sco-conj-be]] */
.inflection-table-wrapper .blank-end-row {
	background: var(--wikt-palette-paleblue); /* BGC */
	border-right: 1px solid var(--wikt-palette-paleblue); /* BGC */
	border-top: 1px solid var(--wikt-palette-paleblue); /* BGC */
	border-bottom: 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;
}

.inflection-table-wrapper.wide > .inflection-table-notes {
	font-size: 90%;
}

/* Collapsibility */

html.client-js .inflection-table-collapsed > table,
html.client-js .inflection-table-collapsed > table > tbody > tr > td,
html.client-js .inflection-table-collapsed > table > tbody > tr > th {
	border-color: transparent;
}

html.client-js .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) */
}

html.client-js .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 */
}

html.client-js .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 */
html.client-js .inflection-table-collapsible.no-vc.inflection-table-collapsed {
	max-height: calc(1.5em + 8px); /* almost 1lh (= 1.6em) + padding and border on .inflection-table-wrapper */
	overflow: hidden;
}
html.client-js .inflection-table-collapsible.no-vc.inflection-table-collapsed > table > tbody {
	visibility: hidden;
}
html.client-js .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;
}
	
/* 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;
}

/* Single border display style - EXPERIMENTAL! */

.inflection-table-wrapper.single-border {
	padding: 0;
	border: 0;
}

.inflection-table-wrapper.single-border > table > caption {
	border: 1px solid var(--wikt-palette-grey);
	border-bottom: 0;
}

html.client-js .inflection-table-collapsed.single-border > table > caption {
	border-bottom: 1px solid var(--wikt-palette-grey);
}

.inflection-table-wrapper.inflection-table-collapsible.single-border .inflection-table-notes {
	border: 1px solid var(--wikt-palette-grey);
	border-top: 0;
}

/* Mobile styling */

@media all and (max-width: 639px) { /* matches calc(640px - 1px) in Minerva CSS */
    .inflection-table-wrapper {
        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:not(.tr-alongside) table > tbody td 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:not(.tr-alongside) table > tbody td span.tr:before {
	content: "\a"; /* newline */
	white-space: pre;
}
.inflection-table-wrapper:not(.tr-alongside) table > tbody td 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 */
}

.inflection-box.flow-vertical .inflection-table-wrapper + .inflection-table-wrapper {
	margin-top: 0.5em; /* mimic a .separator row between adjacent tables */
}

/* 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} tr.secondary > th,
	.inflection-table-${color} th.secondary,
	.inflection-table tr.inflection-table-${color}.secondary > th,
	.inflection-table tr.inflection-table-${color} > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-${color},
	.inflection-table th.inflection-table-${color}.secondary {
	  background-color: var(--wikt-palette-${color}-1);
	}
	.inflection-table-${color} th,
	.inflection-table tr.inflection-table-${color} > th,
	.inflection-table th.inflection-table-${color} {
	  background-color: var(--wikt-palette-${color}-2);
	}
	.inflection-table-${color} tr.outer > th,
	.inflection-table-${color} th.outer,
	.inflection-table tr.inflection-table-${color}.outer > th,
	.inflection-table tr.inflection-table-${color} > th.outer,
	.inflection-table tr.outer > th.inflection-table-${color},
	.inflection-table th.inflection-table-${color}.outer {
	  background-color: var(--wikt-palette-${color}-4);
	}
	.inflection-table-${color} tr.darker > td,
	.inflection-table-${color} td.darker,
	.inflection-table tr.inflection-table-${color}.darker > td,
	.inflection-table tr.inflection-table-${color} > td.darker,
	.inflection-table tr.darker > td.inflection-table-${color},
	.inflection-table td.inflection-table-${color}.darker {
	  background-color: var(--wikt-palette-grey-${color}-1) !important;
	}`

*/




	.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 tr.secondary > th,
	.inflection-table-red th.secondary,
	.inflection-table tr.inflection-table-red.secondary > th,
	.inflection-table tr.inflection-table-red > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-red,
	.inflection-table th.inflection-table-red.secondary {
	  background-color: var(--wikt-palette-red-1);
	}
	.inflection-table-red th,
	.inflection-table tr.inflection-table-red > th,
	.inflection-table th.inflection-table-red {
	  background-color: var(--wikt-palette-red-2);
	}
	.inflection-table-red tr.outer > th,
	.inflection-table-red th.outer,
	.inflection-table tr.inflection-table-red.outer > th,
	.inflection-table tr.inflection-table-red > th.outer,
	.inflection-table tr.outer > th.inflection-table-red,
	.inflection-table th.inflection-table-red.outer {
	  background-color: var(--wikt-palette-red-4);
	}
	.inflection-table-red tr.darker > td,
	.inflection-table-red td.darker,
	.inflection-table tr.inflection-table-red.darker > td,
	.inflection-table tr.inflection-table-red > td.darker,
	.inflection-table tr.darker > td.inflection-table-red,
	.inflection-table td.inflection-table-red.darker {
	  background-color: var(--wikt-palette-grey-red-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-scarlet th.secondary,
	.inflection-table tr.inflection-table-scarlet.secondary > th,
	.inflection-table tr.inflection-table-scarlet > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-scarlet,
	.inflection-table th.inflection-table-scarlet.secondary {
	  background-color: var(--wikt-palette-scarlet-1);
	}
	.inflection-table-scarlet th,
	.inflection-table tr.inflection-table-scarlet > th,
	.inflection-table th.inflection-table-scarlet {
	  background-color: var(--wikt-palette-scarlet-2);
	}
	.inflection-table-scarlet tr.outer > th,
	.inflection-table-scarlet th.outer,
	.inflection-table tr.inflection-table-scarlet.outer > th,
	.inflection-table tr.inflection-table-scarlet > th.outer,
	.inflection-table tr.outer > th.inflection-table-scarlet,
	.inflection-table th.inflection-table-scarlet.outer {
	  background-color: var(--wikt-palette-scarlet-4);
	}
	.inflection-table-scarlet tr.darker > td,
	.inflection-table-scarlet td.darker,
	.inflection-table tr.inflection-table-scarlet.darker > td,
	.inflection-table tr.inflection-table-scarlet > td.darker,
	.inflection-table tr.darker > td.inflection-table-scarlet,
	.inflection-table td.inflection-table-scarlet.darker {
	  background-color: var(--wikt-palette-grey-scarlet-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-orange th.secondary,
	.inflection-table tr.inflection-table-orange.secondary > th,
	.inflection-table tr.inflection-table-orange > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-orange,
	.inflection-table th.inflection-table-orange.secondary {
	  background-color: var(--wikt-palette-orange-1);
	}
	.inflection-table-orange th,
	.inflection-table tr.inflection-table-orange > th,
	.inflection-table th.inflection-table-orange {
	  background-color: var(--wikt-palette-orange-2);
	}
	.inflection-table-orange tr.outer > th,
	.inflection-table-orange th.outer,
	.inflection-table tr.inflection-table-orange.outer > th,
	.inflection-table tr.inflection-table-orange > th.outer,
	.inflection-table tr.outer > th.inflection-table-orange,
	.inflection-table th.inflection-table-orange.outer {
	  background-color: var(--wikt-palette-orange-4);
	}
	.inflection-table-orange tr.darker > td,
	.inflection-table-orange td.darker,
	.inflection-table tr.inflection-table-orange.darker > td,
	.inflection-table tr.inflection-table-orange > td.darker,
	.inflection-table tr.darker > td.inflection-table-orange,
	.inflection-table td.inflection-table-orange.darker {
	  background-color: var(--wikt-palette-grey-orange-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-amber th.secondary,
	.inflection-table tr.inflection-table-amber.secondary > th,
	.inflection-table tr.inflection-table-amber > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-amber,
	.inflection-table th.inflection-table-amber.secondary {
	  background-color: var(--wikt-palette-amber-1);
	}
	.inflection-table-amber th,
	.inflection-table tr.inflection-table-amber > th,
	.inflection-table th.inflection-table-amber {
	  background-color: var(--wikt-palette-amber-2);
	}
	.inflection-table-amber tr.outer > th,
	.inflection-table-amber th.outer,
	.inflection-table tr.inflection-table-amber.outer > th,
	.inflection-table tr.inflection-table-amber > th.outer,
	.inflection-table tr.outer > th.inflection-table-amber,
	.inflection-table th.inflection-table-amber.outer {
	  background-color: var(--wikt-palette-amber-4);
	}
	.inflection-table-amber tr.darker > td,
	.inflection-table-amber td.darker,
	.inflection-table tr.inflection-table-amber.darker > td,
	.inflection-table tr.inflection-table-amber > td.darker,
	.inflection-table tr.darker > td.inflection-table-amber,
	.inflection-table td.inflection-table-amber.darker {
	  background-color: var(--wikt-palette-grey-amber-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-yellow th.secondary,
	.inflection-table tr.inflection-table-yellow.secondary > th,
	.inflection-table tr.inflection-table-yellow > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-yellow,
	.inflection-table th.inflection-table-yellow.secondary {
	  background-color: var(--wikt-palette-yellow-1);
	}
	.inflection-table-yellow th,
	.inflection-table tr.inflection-table-yellow > th,
	.inflection-table th.inflection-table-yellow {
	  background-color: var(--wikt-palette-yellow-2);
	}
	.inflection-table-yellow tr.outer > th,
	.inflection-table-yellow th.outer,
	.inflection-table tr.inflection-table-yellow.outer > th,
	.inflection-table tr.inflection-table-yellow > th.outer,
	.inflection-table tr.outer > th.inflection-table-yellow,
	.inflection-table th.inflection-table-yellow.outer {
	  background-color: var(--wikt-palette-yellow-4);
	}
	.inflection-table-yellow tr.darker > td,
	.inflection-table-yellow td.darker,
	.inflection-table tr.inflection-table-yellow.darker > td,
	.inflection-table tr.inflection-table-yellow > td.darker,
	.inflection-table tr.darker > td.inflection-table-yellow,
	.inflection-table td.inflection-table-yellow.darker {
	  background-color: var(--wikt-palette-grey-yellow-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-lime th.secondary,
	.inflection-table tr.inflection-table-lime.secondary > th,
	.inflection-table tr.inflection-table-lime > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-lime,
	.inflection-table th.inflection-table-lime.secondary {
	  background-color: var(--wikt-palette-lime-1);
	}
	.inflection-table-lime th,
	.inflection-table tr.inflection-table-lime > th,
	.inflection-table th.inflection-table-lime {
	  background-color: var(--wikt-palette-lime-2);
	}
	.inflection-table-lime tr.outer > th,
	.inflection-table-lime th.outer,
	.inflection-table tr.inflection-table-lime.outer > th,
	.inflection-table tr.inflection-table-lime > th.outer,
	.inflection-table tr.outer > th.inflection-table-lime,
	.inflection-table th.inflection-table-lime.outer {
	  background-color: var(--wikt-palette-lime-4);
	}
	.inflection-table-lime tr.darker > td,
	.inflection-table-lime td.darker,
	.inflection-table tr.inflection-table-lime.darker > td,
	.inflection-table tr.inflection-table-lime > td.darker,
	.inflection-table tr.darker > td.inflection-table-lime,
	.inflection-table td.inflection-table-lime.darker {
	  background-color: var(--wikt-palette-grey-lime-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-green th.secondary,
	.inflection-table tr.inflection-table-green.secondary > th,
	.inflection-table tr.inflection-table-green > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-green,
	.inflection-table th.inflection-table-green.secondary {
	  background-color: var(--wikt-palette-green-1);
	}
	.inflection-table-green th,
	.inflection-table tr.inflection-table-green > th,
	.inflection-table th.inflection-table-green {
	  background-color: var(--wikt-palette-green-2);
	}
	.inflection-table-green tr.outer > th,
	.inflection-table-green th.outer,
	.inflection-table tr.inflection-table-green.outer > th,
	.inflection-table tr.inflection-table-green > th.outer,
	.inflection-table tr.outer > th.inflection-table-green,
	.inflection-table th.inflection-table-green.outer {
	  background-color: var(--wikt-palette-green-4);
	}
	.inflection-table-green tr.darker > td,
	.inflection-table-green td.darker,
	.inflection-table tr.inflection-table-green.darker > td,
	.inflection-table tr.inflection-table-green > td.darker,
	.inflection-table tr.darker > td.inflection-table-green,
	.inflection-table td.inflection-table-green.darker {
	  background-color: var(--wikt-palette-grey-green-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-teal th.secondary,
	.inflection-table tr.inflection-table-teal.secondary > th,
	.inflection-table tr.inflection-table-teal > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-teal,
	.inflection-table th.inflection-table-teal.secondary {
	  background-color: var(--wikt-palette-teal-1);
	}
	.inflection-table-teal th,
	.inflection-table tr.inflection-table-teal > th,
	.inflection-table th.inflection-table-teal {
	  background-color: var(--wikt-palette-teal-2);
	}
	.inflection-table-teal tr.outer > th,
	.inflection-table-teal th.outer,
	.inflection-table tr.inflection-table-teal.outer > th,
	.inflection-table tr.inflection-table-teal > th.outer,
	.inflection-table tr.outer > th.inflection-table-teal,
	.inflection-table th.inflection-table-teal.outer {
	  background-color: var(--wikt-palette-teal-4);
	}
	.inflection-table-teal tr.darker > td,
	.inflection-table-teal td.darker,
	.inflection-table tr.inflection-table-teal.darker > td,
	.inflection-table tr.inflection-table-teal > td.darker,
	.inflection-table tr.darker > td.inflection-table-teal,
	.inflection-table td.inflection-table-teal.darker {
	  background-color: var(--wikt-palette-grey-teal-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-cyan th.secondary,
	.inflection-table tr.inflection-table-cyan.secondary > th,
	.inflection-table tr.inflection-table-cyan > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-cyan,
	.inflection-table th.inflection-table-cyan.secondary {
	  background-color: var(--wikt-palette-cyan-1);
	}
	.inflection-table-cyan th,
	.inflection-table tr.inflection-table-cyan > th,
	.inflection-table th.inflection-table-cyan {
	  background-color: var(--wikt-palette-cyan-2);
	}
	.inflection-table-cyan tr.outer > th,
	.inflection-table-cyan th.outer,
	.inflection-table tr.inflection-table-cyan.outer > th,
	.inflection-table tr.inflection-table-cyan > th.outer,
	.inflection-table tr.outer > th.inflection-table-cyan,
	.inflection-table th.inflection-table-cyan.outer {
	  background-color: var(--wikt-palette-cyan-4);
	}
	.inflection-table-cyan tr.darker > td,
	.inflection-table-cyan td.darker,
	.inflection-table tr.inflection-table-cyan.darker > td,
	.inflection-table tr.inflection-table-cyan > td.darker,
	.inflection-table tr.darker > td.inflection-table-cyan,
	.inflection-table td.inflection-table-cyan.darker {
	  background-color: var(--wikt-palette-grey-cyan-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-blue th.secondary,
	.inflection-table tr.inflection-table-blue.secondary > th,
	.inflection-table tr.inflection-table-blue > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-blue,
	.inflection-table th.inflection-table-blue.secondary {
	  background-color: var(--wikt-palette-blue-1);
	}
	.inflection-table-blue th,
	.inflection-table tr.inflection-table-blue > th,
	.inflection-table th.inflection-table-blue {
	  background-color: var(--wikt-palette-blue-2);
	}
	.inflection-table-blue tr.outer > th,
	.inflection-table-blue th.outer,
	.inflection-table tr.inflection-table-blue.outer > th,
	.inflection-table tr.inflection-table-blue > th.outer,
	.inflection-table tr.outer > th.inflection-table-blue,
	.inflection-table th.inflection-table-blue.outer {
	  background-color: var(--wikt-palette-blue-4);
	}
	.inflection-table-blue tr.darker > td,
	.inflection-table-blue td.darker,
	.inflection-table tr.inflection-table-blue.darker > td,
	.inflection-table tr.inflection-table-blue > td.darker,
	.inflection-table tr.darker > td.inflection-table-blue,
	.inflection-table td.inflection-table-blue.darker {
	  background-color: var(--wikt-palette-grey-blue-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-indigo th.secondary,
	.inflection-table tr.inflection-table-indigo.secondary > th,
	.inflection-table tr.inflection-table-indigo > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-indigo,
	.inflection-table th.inflection-table-indigo.secondary {
	  background-color: var(--wikt-palette-indigo-1);
	}
	.inflection-table-indigo th,
	.inflection-table tr.inflection-table-indigo > th,
	.inflection-table th.inflection-table-indigo {
	  background-color: var(--wikt-palette-indigo-2);
	}
	.inflection-table-indigo tr.outer > th,
	.inflection-table-indigo th.outer,
	.inflection-table tr.inflection-table-indigo.outer > th,
	.inflection-table tr.inflection-table-indigo > th.outer,
	.inflection-table tr.outer > th.inflection-table-indigo,
	.inflection-table th.inflection-table-indigo.outer {
	  background-color: var(--wikt-palette-indigo-4);
	}
	.inflection-table-indigo tr.darker > td,
	.inflection-table-indigo td.darker,
	.inflection-table tr.inflection-table-indigo.darker > td,
	.inflection-table tr.inflection-table-indigo > td.darker,
	.inflection-table tr.darker > td.inflection-table-indigo,
	.inflection-table td.inflection-table-indigo.darker {
	  background-color: var(--wikt-palette-grey-indigo-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-purple th.secondary,
	.inflection-table tr.inflection-table-purple.secondary > th,
	.inflection-table tr.inflection-table-purple > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-purple,
	.inflection-table th.inflection-table-purple.secondary {
	  background-color: var(--wikt-palette-purple-1);
	}
	.inflection-table-purple th,
	.inflection-table tr.inflection-table-purple > th,
	.inflection-table th.inflection-table-purple {
	  background-color: var(--wikt-palette-purple-2);
	}
	.inflection-table-purple tr.outer > th,
	.inflection-table-purple th.outer,
	.inflection-table tr.inflection-table-purple.outer > th,
	.inflection-table tr.inflection-table-purple > th.outer,
	.inflection-table tr.outer > th.inflection-table-purple,
	.inflection-table th.inflection-table-purple.outer {
	  background-color: var(--wikt-palette-purple-4);
	}
	.inflection-table-purple tr.darker > td,
	.inflection-table-purple td.darker,
	.inflection-table tr.inflection-table-purple.darker > td,
	.inflection-table tr.inflection-table-purple > td.darker,
	.inflection-table tr.darker > td.inflection-table-purple,
	.inflection-table td.inflection-table-purple.darker {
	  background-color: var(--wikt-palette-grey-purple-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-magenta th.secondary,
	.inflection-table tr.inflection-table-magenta.secondary > th,
	.inflection-table tr.inflection-table-magenta > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-magenta,
	.inflection-table th.inflection-table-magenta.secondary {
	  background-color: var(--wikt-palette-magenta-1);
	}
	.inflection-table-magenta th,
	.inflection-table tr.inflection-table-magenta > th,
	.inflection-table th.inflection-table-magenta {
	  background-color: var(--wikt-palette-magenta-2);
	}
	.inflection-table-magenta tr.outer > th,
	.inflection-table-magenta th.outer,
	.inflection-table tr.inflection-table-magenta.outer > th,
	.inflection-table tr.inflection-table-magenta > th.outer,
	.inflection-table tr.outer > th.inflection-table-magenta,
	.inflection-table th.inflection-table-magenta.outer {
	  background-color: var(--wikt-palette-magenta-4);
	}
	.inflection-table-magenta tr.darker > td,
	.inflection-table-magenta td.darker,
	.inflection-table tr.inflection-table-magenta.darker > td,
	.inflection-table tr.inflection-table-magenta > td.darker,
	.inflection-table tr.darker > td.inflection-table-magenta,
	.inflection-table td.inflection-table-magenta.darker {
	  background-color: var(--wikt-palette-grey-magenta-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-rose th.secondary,
	.inflection-table tr.inflection-table-rose.secondary > th,
	.inflection-table tr.inflection-table-rose > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-rose,
	.inflection-table th.inflection-table-rose.secondary {
	  background-color: var(--wikt-palette-rose-1);
	}
	.inflection-table-rose th,
	.inflection-table tr.inflection-table-rose > th,
	.inflection-table th.inflection-table-rose {
	  background-color: var(--wikt-palette-rose-2);
	}
	.inflection-table-rose tr.outer > th,
	.inflection-table-rose th.outer,
	.inflection-table tr.inflection-table-rose.outer > th,
	.inflection-table tr.inflection-table-rose > th.outer,
	.inflection-table tr.outer > th.inflection-table-rose,
	.inflection-table th.inflection-table-rose.outer {
	  background-color: var(--wikt-palette-rose-4);
	}
	.inflection-table-rose tr.darker > td,
	.inflection-table-rose td.darker,
	.inflection-table tr.inflection-table-rose.darker > td,
	.inflection-table tr.inflection-table-rose > td.darker,
	.inflection-table tr.darker > td.inflection-table-rose,
	.inflection-table td.inflection-table-rose.darker {
	  background-color: var(--wikt-palette-grey-rose-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-grey th.secondary,
	.inflection-table tr.inflection-table-grey.secondary > th,
	.inflection-table tr.inflection-table-grey > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-grey,
	.inflection-table th.inflection-table-grey.secondary {
	  background-color: var(--wikt-palette-grey-1);
	}
	.inflection-table-grey th,
	.inflection-table tr.inflection-table-grey > th,
	.inflection-table th.inflection-table-grey {
	  background-color: var(--wikt-palette-grey-2);
	}
	.inflection-table-grey tr.outer > th,
	.inflection-table-grey th.outer,
	.inflection-table tr.inflection-table-grey.outer > th,
	.inflection-table tr.inflection-table-grey > th.outer,
	.inflection-table tr.outer > th.inflection-table-grey,
	.inflection-table th.inflection-table-grey.outer {
	  background-color: var(--wikt-palette-grey-4);
	}
	.inflection-table-grey tr.darker > td,
	.inflection-table-grey td.darker,
	.inflection-table tr.inflection-table-grey.darker > td,
	.inflection-table tr.inflection-table-grey > td.darker,
	.inflection-table tr.darker > td.inflection-table-grey,
	.inflection-table td.inflection-table-grey.darker {
	  background-color: var(--wikt-palette-grey-grey-1) !important;
	}
	.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 tr.secondary > th,
	.inflection-table-brown th.secondary,
	.inflection-table tr.inflection-table-brown.secondary > th,
	.inflection-table tr.inflection-table-brown > th.secondary,
	.inflection-table tr.secondary > th.inflection-table-brown,
	.inflection-table th.inflection-table-brown.secondary {
	  background-color: var(--wikt-palette-brown-1);
	}
	.inflection-table-brown th,
	.inflection-table tr.inflection-table-brown > th,
	.inflection-table th.inflection-table-brown {
	  background-color: var(--wikt-palette-brown-2);
	}
	.inflection-table-brown tr.outer > th,
	.inflection-table-brown th.outer,
	.inflection-table tr.inflection-table-brown.outer > th,
	.inflection-table tr.inflection-table-brown > th.outer,
	.inflection-table tr.outer > th.inflection-table-brown,
	.inflection-table th.inflection-table-brown.outer {
	  background-color: var(--wikt-palette-brown-4);
	}
	.inflection-table-brown tr.darker > td,
	.inflection-table-brown td.darker,
	.inflection-table tr.inflection-table-brown.darker > td,
	.inflection-table tr.inflection-table-brown > td.darker,
	.inflection-table tr.darker > td.inflection-table-brown,
	.inflection-table td.inflection-table-brown.darker {
	  background-color: var(--wikt-palette-grey-brown-1) !important;
	}