Template:Vehicle specifications/styles.css

.template-components__section {
	position: relative;
	padding-top: var( --space-md );
	padding-bottom: var( --space-md );
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}

/* TemplateStyles style tag can get in-between */
.template-components__section + .template-components__section,
.template-components__section + style + .template-components__section {
	border-top: 1px solid var( --border-color-base );
}

.template-components__label {
	align-self: flex-start;
	display: flex;
	align-items: center;
	color: var( --color-base--subtle );
	font-size: 0.875rem;
	letter-spacing: 0.75px;
	gap: var(--space-sm );
	line-height: 1.25;
}

.template-components__label > img {
	height: 2rem;
	width: auto;
	position: absolute;
	top: 1rem;
	right: 0;
	opacity: .2;
}

.template-components__group {
	display: flex;
	gap: var( --space-sm );
	flex-wrap: wrap;
	flex-grow: 1;
}

.template-components__subgroup {
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
	flex-grow: 1;
}

.template-components__subgroup .template-component__connectorY {
	top: -0.5rem; /* calc( var( --space-sm ) * -1 ) */
}

.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
	bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */
}

/* 
 * Old styles
 * Remove when all sub-templates are updated
 */
table.vehicle-spec-table {
    margin-top: 0;
}

.vehicle-spec-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-right: 0.8rem;
    line-height: 1.2;
}

.vehicle-spec-label img {
    margin: 8px 0.6rem 8px 0;
    width: 18px;
}

.vehicle-spec-table .plainlist ul li {
    display: flex;
    margin-top: 0.4rem;
    flex-direction: column;
}

.vehicle-spec-table .plainlist .componentcard:before {
    content: "↳";
    display: block;
    margin: 0.4rem 0.6rem 0 0;
}

.vehicle-spec-table .plainlist .componentcard {
    margin-top: 0.4rem;
}

table.vehicle-spec-table tr:hover {
    background: none;
}

.vehicle-spec-table td:hover {
    background-color: var( --background-color-quiet--hover );
}

html.skin-citizen-dark .vehicle-spec-label img {
    filter: invert(1);
}