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; margin: 0 auto; white-space: nowrap; overflow: auto; }

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

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

.headerSort { margin-right: 6px; padding: 5px 21px 5px 12px; border: 1px solid; border-color: var( --border-color-base ); border-radius: 40px; background-color: var( --background-color-dp-01 ); display: block; }

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

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

.headerSort.headerSortUp, .headerSort.headerSortDown { background-color: var( --color-primary ); border-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 { margin-bottom: 0.2rem; padding-top: 10px; font-size: 1.25rem; font-weight: 600; color: var( --color-base--emphasized ); }

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

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

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

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

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

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

.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: #1155cc; color: white; }

.plain-table .data-availability.data-availability-quantitylimited, .plain-table .data-status.data-status-inconcept { background-color: #d33; color: white; }

@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 { padding: 0 20px; width: calc(100% - 40px); } }

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: #1155cc; }

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