Template:Inflection-table-top/style.css

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

/* mobile styling */
@media all and (max-width: 639px) { /* matches calc(640px - 1px) in Minerva CSS */
    .inflection-table-wrapper.inflection-table-narrow {
        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 */
    }
}

.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 a.new {
    color: inherit;
}

.inflection-table-wrapper 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 td, .inflection-table-wrapper th {
	padding: 0.15em 0.6em;
	border: solid var(--wikt-palette-grey-6);
	border-width: 0 1px 1px 0;
}

.inflection-table-wrapper td:not(.secondary):not(.separator), .inflection-table-wrapper th:not(.secondary):not(.separator) {
	min-width: 5em;
}

.inflection-table-wrapper td.secondary {
	background: var(--wikt-palette-lightergrey);
}

.inflection-table-wrapper th.secondary, .inflection-table-wrapper th.outer {
	/* font-style: italic; */
}

/* separator cells: see {{la-adecl}} */
.inflection-table-wrapper .separator {
	height: 0.5em;
	width: 0.5em;
	min-width: 0.5em;
	padding: 0;
	background: var(--wikt-palette-paleblue); /* BGC */
	border-top: 1px solid var(--wikt-palette-paleblue); /* BGC */
	border-bottom: 1px solid var(--wikt-palette-paleblue); /* BGC */
}

.inflection-table-wrapper table + p { /* first note at foot of table */
	padding-top: 0.2em;
}

.inflection-table-wrapper > p { /* notes at foot of table */
	margin: 0.2em 0.5em 0.2em;
}

/* 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} th {
	  background-color: var(--wikt-palette-${color}-2);
	}
	.inflection-table-${color} th.outer {
	  background-color: var(--wikt-palette-${color}-4);
	}`

*/

.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 th {
  background-color: var(--wikt-palette-scarlet-2);
}
.inflection-table-scarlet th.outer {
  background-color: var(--wikt-palette-scarlet-4);
}
.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 th {
  background-color: var(--wikt-palette-amber-2);
}
.inflection-table-amber th.outer {
  background-color: var(--wikt-palette-amber-4);
}
.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 th {
  background-color: var(--wikt-palette-lime-2);
}
.inflection-table-lime th.outer {
  background-color: var(--wikt-palette-lime-4);
}
.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 th {
  background-color: var(--wikt-palette-teal-2);
}
.inflection-table-teal th.outer {
  background-color: var(--wikt-palette-teal-4);
}
.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 th {
  background-color: var(--wikt-palette-blue-2);
}
.inflection-table-blue th.outer {
  background-color: var(--wikt-palette-blue-4);
}
.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 th {
  background-color: var(--wikt-palette-purple-2);
}
.inflection-table-purple th.outer {
  background-color: var(--wikt-palette-purple-4);
}
.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 th {
  background-color: var(--wikt-palette-rose-2);
}
.inflection-table-rose th.outer {
  background-color: var(--wikt-palette-rose-4);
}
.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 th {
  background-color: var(--wikt-palette-brown-2);
}
.inflection-table-brown th.outer {
  background-color: var(--wikt-palette-brown-4);
}