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; max-width: 860px; 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 #eaecf0; border-radius: 40px; background-color: white; display: block; }

.headerSort:hover { background-color: #eaecf0; }

.headerSort.headerSortUp, .headerSort.headerSortDown { background-color: #36c; border-color: #36c; color: white; }

.headerSort.headerSortUp:hover, .headerSort.headerSortDown:hover { background-color: #2a4b8d; }

.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: #222; }

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

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

.mw-plusminus-pos { color: #006400; }

.mw-plusminus-neg { color: #8b0000; }

.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: #f8f9fa; }

.plain-table .data-availability { border-right: 1px solid #eaecf0; }

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

@media (prefers-color-scheme: dark) { .headerSort { border-color: #2b2f36; background-color: #24272f; }

.headerSort:hover { background-color: #2b2f36; }

.plain-table tbody tr { border-color: #22262d; }

.plain-table .data-availability, .plain-table .data-status { background-color: #1d2129; border-color: #22262d; color: #a0a1a5; }

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

.plain-table .data-availability.data-availability-timelimited { background-color: #1155cc; }

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