Bản mẫu: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.. */
}

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