mediawiki-skins-Citizen/skinStyles/extensions/Cargo/ext.cargo.main.less

/*
 * Citizen
 *
 * SkinStyles for Extension:Cargo
 * Module: ext.cargo.main
 * Version: REL1_39 b4c6314
 *
 * Date: 2023-01-03
*/

span.cargoFieldName {
	color: var( --color-subtle );
}

table.cargoTable.noMerge tr:nth-child( odd ) {
	background: var( --color-surface-0 );
}

table.cargoTable.noMerge tr:nth-child( even ) {
	background: var( --color-surface-2 );
}

table.cargoTable.mergeSimilarCells td.odd {
	background: var( --color-surface-0 );
}

table.cargoTable.mergeSimilarCells td.even {
	background: var( --color-surface-2 );
}

table.cargoTable thead tr {
	border-bottom: var( --border-width-base ) solid var( --border-color-base );
}

table.cargoTable tr + tr {
	border-top: var( --border-width-base ) solid var( --border-color-base );
}

table.cargoTable th,
table.cargoTable td {
	/* Sync with wikitable */
	padding: var( --space-xs ) var( --space-sm );
}

table.cargoTable th {
	/* Sync with wikitable */
	text-align: start;
}

table.cargoTable td {
	/* Border handled by tr */
	border: 0;
}

span.searchmatch {
	font-weight: var( --font-weight-semibold );
	color: var( --color-emphasized );
}

div.cargoReplacementTableInfo {
	background: var( --color-surface-3 );
	border-color: var( --border-color-base );
}

.addButton,
.deleteButton {
	/* BG color does not like filter */
	background-color: transparent;
	border-color: var( --border-color-base );
}

.cargoQueryTooltipIcon,
.addButton,
.deleteButton {
	filter: var( --filter-invert );
}

div.specialCargoQuery-extraPane {
	background: linear-gradient( transparent, var( --color-surface-2 ) 0.5em );
	border-color: var( --border-color-base );
}

.ui-state-focus {
	background: var( --color-progressive--active ) !important;
}

.ui-menu .ui-menu-item a {
	font-family: var( --font-family-base );
	color: var( --color-emphasized );
}

// Sync with wikitable styles
// Separate Citizen opinionated styles so it is easy to track and debug
.skin-citizen {
	table.cargoTable {
		font-size: var( --font-size-small );
		border-radius: var( --border-radius-medium );
		box-shadow: var( --box-shadow-border );

		tr {
			&:first-of-type {
				th,
				td {
					&:first-child {
						border-top-left-radius: var( --border-radius-medium );
					}

					&:last-child {
						border-top-right-radius: var( --border-radius-medium );
					}
				}
			}

			&:last-of-type {
				th,
				td {
					&:first-child {
						border-bottom-left-radius: var( --border-radius-medium );
					}

					&:last-child {
						border-bottom-right-radius: var( --border-radius-medium );
					}
				}
			}
		}

		/* Reset border radius between thead tbody, tbody tfoot, etc. */
		> :where( thead, tbody, tfoot ):has( + :where( thead, tbody, tfoot ):not( :empty ) ) {
			tr:last-of-type {
				th,
				td {
					&:first-child {
						border-bottom-left-radius: var( --border-radius-sharp );
					}

					&:last-child {
						border-bottom-right-radius: var( --border-radius-sharp );
					}
				}
			}
		}

		> :where( thead, tbody, tfoot ) + :where( thead, tbody, tfoot ):not( :empty ) {
			tr:first-of-type {
				th,
				td {
					&:first-child {
						border-top-left-radius: var( --border-radius-sharp );
					}

					&:last-child {
						border-top-right-radius: var( --border-radius-sharp );
					}
				}
			}
		}
	}

	// Temporary responsiveness fix until Cargo patches it (#924)
	.cargoDynamicTable.dataTable {
		display: block;
		max-width: max-content; // Needed for the border
		overflow-x: auto;
		border-radius: var( --border-radius-medium );
		box-shadow: var( --box-shadow-border );
	}
}