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