Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Please sign up or log in to edit the wiki.

Template:Vehicle specifications/styles.css: Difference between revisions

Template page
Content deleted Content added
Removed top align for the arrow
Alistar Bot (talk | contribs)
m top: deprecate old Citizen variables, replaced: --color-base--subtle → --color-subtle
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
.template-components__section {
table.vehicle-spec-table {
position: relative;
margin-top: 0;
padding-top: var( --space-sm );
padding-bottom: var( --space-sm );
display: flex;
flex-direction: column;
gap: var( --space-xs );
}
}


/* TemplateStyles style tag can get in-between */
.vehicle-spec-label {
.template-components__section + .template-components__section,
display: flex;
.template-components__section + style + .template-components__section {
align-items: center;
border-top: 1px solid var( --border-color-base );
font-weight: bold;
margin-right: 0.8rem;
line-height: 1.2;
}
}


.template-components__label {
.vehicle-spec-label img {
align-self: flex-start;
margin: 8px 0.6rem 8px 0;
display: flex;
align-items: center;
color: var( --color-subtle );
font-size: 0.875rem;
letter-spacing: 0.75px;
gap: var(--space-xs );
line-height: 1.25;
}
}


.template-components__label img {
.vehicle-spec-table .plainlist ul li {
height: 1rem;
display: flex;
width: auto;
margin-top: 0.4rem;
}
}


.template-components__group {
.vehicle-spec-table .plainlist ul li:before {
display: flex;
content: "↳";
gap: var( --space-xs );
display: block;
flex-wrap: wrap;
margin: 0.4rem 0.6rem 0 0;
flex-grow: 1;
}
}


.template-components__subgroup {
.vehicle-spec-table .plainlist .componentcard {
display: flex;
margin-top: 0.4rem;
flex-direction: column;
gap: var( --space-xs );
flex-grow: 1;
}
}


.template-components__subgroup .template-component__connectorY {
table.vehicle-spec-table tr:hover {
top: -0.5rem; /* calc( var( --space-sm ) * -1 ) */
background: none;
}
}


.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
.vehicle-spec-table td:hover {
bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */
background-color: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
.vehicle-spec-label img {
filter: invert(1);
}
.vehicle-spec-table td:hover {
background-color: #1d2129;
}
}
}

Latest revision as of 18:18, 15 October 2024

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

/* 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-subtle );
	font-size: 0.875rem;
	letter-spacing: 0.75px;
	gap: var(--space-xs );
	line-height: 1.25;
}

.template-components__label img {
	height: 1rem;
	width: auto;
}

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

.template-components__subgroup {
	display: flex;
	flex-direction: column;
	gap: var( --space-xs );
	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 ) */
}