模板:Pledge vehicle list/styles.css

.plain-table-header {
	margin-top: 1.6rem;
	font-weight: bold;
}

.plain-table-list {
	font-size: 0.875rem;
}

.plain-table {
	font-size: 0.875rem;
}

.plain-table thead {
	display: block;
	overflow: auto;
	margin: 0 auto;
	white-space: nowrap;
}

.plain-table thead tr {
	display: flex;
	margin-bottom: 10px;
}

.plain-table thead tr:hover {
	background-color: transparent;
}

.headerSort {
	display: block;
	padding: 5px 21px 5px 12px;
	margin-right: 6px;
	background-color: var( --color-surface-2 );
	border-radius: 40px;
}

.headerSort:hover {
	background-color: var( --color-surface-2--hover );
}

.headerSort:active {
	background-color: var( --color-surface-2--active );
}

.headerSort.headerSortUp,
.headerSort.headerSortDown {
	background-color: var( --color-primary );
	color: white;
}

.headerSort.headerSortUp:hover,
.headerSort.headerSortDown:hover {
	background-color: var( --color-primary--hover );
}

.headerSort.headerSortUp:active,
.headerSort.headerSortDown:active {
	background-color: var( --color-primary--active );
}

.plain-table .data-name,
.plain-table .data-manufacturer {
	display: flex;
	padding: 0;
	border-bottom: 0;
	line-height: 1.2;
}

.plain-table .data-name {
	padding-top: 10px;
	margin-bottom: 0.2rem;
	color: var( --color-base--emphasized );
	font-size: 1.25rem;
	font-weight: 600;
}

.plain-table .data-manufacturer {
	padding-bottom: 10px;
	font-size: 0.825rem;
}

.plain-table tbody {
	display: block;
	overflow: auto;
	width: 100%;
}

.plain-table tbody tr {
	border-color: var( --border-color-base );
	border-bottom: 1px solid;
}

.plain-table .data-standalonecost,
.plain-table .data-warbondcost {
	line-height: 1.2;
}

.plain-table .data-standalonecost-value,
.plain-table .data-warbondcost-value {
	margin-bottom: 0.2rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.plain-table .data-standalonecost-diff,
.plain-table .data-warbondcost-diff {
	font-size: 0.825rem;
}

.plain-table .data-role {
	/* Since avaliability does not have padding */
	padding-left: 20px;
}

/* Froe Template:Moreless */
.mw-plusminus-pos {
	color: var( --color-success );
}

.mw-plusminus-neg {
	color: var( --color-destructive );
}

.mw-plusminus-null {
	color: #a2a9b1;
}

.plain-table .data-availability,
.plain-table .data-status {
	white-space: nowrap;
	background-color: var( --background-color-framed );
	font-size: 0.825rem;
	letter-spacing: 0.75px;
	text-align: center;
	vertical-align: middle;
}

.plain-table .data-availability {
	padding: 10px 30px 10px 30px;
	border-right: 1px solid;
    border-color: var( --border-color-base );
}

.plain-table .data-status {
	padding: 10px 15px 10px 15px;
}

.plain-table .data-status.data-status-flightready,
.plain-table .data-availability.data-availability-alwaysavailable {
	background-color: #00af89;
	color: white;
}

.plain-table .data-availability.data-availability-timelimited {
	background-color: #15c;
	color: white;
}

.plain-table .data-status.data-status-inproduction {
	background-color: #ffcc33;
	color: rgba(0,0,0,0.8);
}	
	
.plain-table .data-availability.data-availability-quantitylimited,
.plain-table .data-status.data-status-inconcept {
	background-color: #d33;
	color: white;
}

.plain-table .data-loanervehicle {
    padding-left: 10px;
}


@media only screen and ( max-width: 1290px ) {
	.plain-table.floatnone {
		padding: 0 !important;
	}
}

/* This does not belong here but needed before the skin is updated */
@media only screen and ( max-width: 720px ) {
	.floatnone {
		margin: 0.6rem -20px !important;
	}

	.plain-table thead,
	.plain-table tbody {
		width: calc( 100% - 40px );
		padding: 0 20px;
	}
}

html.skin-citizen-dark .plain-table .data-availability.data-availability-alwaysavailable,
html.skin-citizen-dark .plain-table .data-status.data-status-flightready {
	background-color: #14866d;
}

html.skin-citizen-dark .plain-table .data-availability.data-availability-timelimited {
	background-color: #15c;
}

html.skin-citizen-dark .plain-table .data-availability.data-availability-quantitylimited,
html.skin-citizen-dark .plain-table .data-status.data-status-inconcept {
	background-color: #b32424;
}