Template: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 { padding: 10px; background-color: var( --background-color-framed ); font-size: 0.825rem; letter-spacing: 0.75px; text-align: center; vertical-align: middle; }

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

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

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

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