mediawiki-skins-Citizen/skinStyles/extensions/SemanticResultFormats/datatables/ext.srf.datatables.bootstrap.less

/*
 * Citizen - SRF Datatables
 * https://starcitizen.tools
*/

@import '../../../../resources/variables.less';

@media ( prefers-color-scheme: dark ) {
	.srf-datatables .bordered-table {
		border: 1px solid @dark-bg-20;
	}

	.srf-datatables .bordered-table th + th,
	.srf-datatables .bordered-table td + td,
	.srf-datatables .bordered-table th + td {
		border-left: 1px solid @dark-bg-20;
	}

	.srf-datatables table td {
		border-top: 1px solid @dark-bg-20;
	}

	.srf-datatables table tbody th {
		border-top: 1px solid @dark-bg-20;
	}

	.bordered-table th + th,
	.bordered-table td + td,
	.bordered-table th + td {
		border-left: 1px solid @dark-bg-20;
	}

	.srf-datatables .zebra-striped tbody tr:nth-child( odd ) td,
	.srf-datatables .zebra-striped tbody tr:nth-child( odd ) th {
		background-color: @dark-bg-10;
	}

	.srf-datatables .zebra-striped tbody tr:hover td,
	.srf-datatables .zebra-striped tbody tr:hover th {
		background-color: @dark-bg-20;
	}

	table .header:after {
		border-color: @dark-bg-0 transparent;
	}

	.srf-datatables table .headerSortUp,
	.srf-datatables table .headerSortDown {
		background-color: rgba( 141, 192, 219, 0.25 );
		text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.75 );
	}

	.srf-datatables table .headerSortUp:after {
		border-top: 4px solid @dark-bg-0;
	}

	.srf-datatables table .blue {
		color: @accent-50;
		border-bottom-color: @accent-50;
	}

	.srf-datatables table .headerSortUp.blue,
	.srf-datatables table .headerSortDown.blue {
		background-color: @accent-90;
	}

	.srf-datatables table .green {
		color: @green-50;
		border-bottom-color: @green-50;
	}

	.srf-datatables table .headerSortUp.green,
	.srf-datatables table .headerSortDown.green {
		background-color: @green-90;
	}

	.srf-datatables table .red {
		color: @red-30;
		border-bottom-color: @red-30;
	}

	.srf-datatables table .headerSortUp.red,
	.srf-datatables table .headerSortDown.red {
		background-color: @red-90;
	}

	.srf-datatables table .yellow {
		color: @yellow-50;
		border-bottom-color: @yellow-50;
	}

	.srf-datatables table .headerSortUp.yellow,
	.srf-datatables table .headerSortDown.yellow {
		background-color: @yellow-90;
	}

	.srf-datatables table .orange {
		color: @yellow-30;
		border-bottom-color: @yellow-30;
	}

	.srf-datatables table .headerSortUp.orange,
	.srf-datatables table .headerSortDown.orange {
		background-color: @yellow-90;
	}

	.srf-datatables input,
	.srf-datatables textarea,
	.srf-datatables select,
	.srf-datatables .uneditable-input {
		color: @dark-text-70;
		background-color: @dark-bg-20;
		border: 1px solid @dark-bg-30;
	}

	.srf-datatables input[ type='file' ] {
		background-color: @dark-bg-0;
	}

	.srf-datatables select[ multiple ] {
		height: inherit;
		background-color: @dark-bg-0;
	}

	.srf-datatables .uneditable-input {
		background-color: @dark-bg-0;
		border-color: @dark-bg-20;
		-webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
		-moz-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
		box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
	}

	.srf-datatables ::placeholder {
		color: @dark-text-70;
	}

	.srf-datatables input,
	textarea {
		-webkit-box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
		-moz-box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
		box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
	}

	.srf-datatables input:focus,
	textarea:focus {
		border-color: @accent-50;
		box-shadow: none;
	}

	.srf-datatables input[ type='file' ]:focus,
	input[ type='checkbox' ]:focus,
	select:focus {
		outline: 1px dotted @dark-bg-60;
	}

	.srf-datatables input[ disabled ],
	select[ disabled ],
	textarea[ disabled ],
	input[ readonly ],
	select[ readonly ],
	textarea[ readonly ] {
		background-color: @dark-bg-10;
		border-color: @dark-bg-20;
	}

	.srf-datatables .inline-inputs {
		color: @dark-text-70;
	}

	.srf-datatables .input-prepend .add-on,
	.srf-datatables .input-append .add-on {
		background: @dark-bg-10;
		border: 1px solid @dark-bg-20;
		color: @dark-text-70;
		text-shadow: 0 1px 0 @dark-bg-0;
	}

	.srf-datatables .input-prepend .active,
	.srf-datatables .input-append .active {
		background: @green-90;
		border-color: @green-50;
	}

	.srf-datatables .inputs-list label strong {
		color: @dark-text-70;
	}

	.srf-datatables .pagination ul {
		border: 1px solid @dark-bg-20;
		-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
		-moz-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	}

	.srf-datatables .pagination a {
		border-right-color: @dark-bg-20;
		*border-right-color: @dark-bg-20;
	}

	.srf-datatables .pagination a:hover,
	.srf-datatables .pagination .active a {
		background-color: @accent-10;
	}

	.srf-datatables .pagination .disabled a,
	.srf-datatables .pagination .disabled a:hover {
		color: @dark-text-70;
	}

	.srf-datatables .ui-button-primary {
		color: @dark-text-100;
		background-color: @accent-50;
		background-image: none;
		text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.25 );
		border-color: rgba( 0, 0, 0, 0.1 ) rgba( 0, 0, 0, 0.1 ) rgba( 0, 0, 0, 0.25 );
	}

	.srf-datatables .ui-button {
		text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.75 );
		color: @dark-text-90;
		background-color: @dark-bg-10;
		background-image: none !important;// linear-gradient( @dark-bg-20, @dark-bg-20 25%, @dark-bg-0 ) !important;
		border: 1px solid @dark-bg-30 !important;
		border-bottom-color: @dark-bg-50;
		box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.2 ), 0 1px 2px rgba( 0, 0, 0, 0.05 );
	}
}