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
mNo edit summary
Alistar Bot (talk | contribs)
m top: deprecate old Citizen variables, replaced: --color-base--subtle → --color-subtle
 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
.template-components__section {
.template-components__section {
position: relative;
position: relative;
padding-top: var( --space-md );
padding-top: var( --space-sm );
padding-bottom: var( --space-md );
padding-bottom: var( --space-sm );
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: var( --space-sm );
gap: var( --space-xs );
}
}


Line 18: Line 18:
display: flex;
display: flex;
align-items: center;
align-items: center;
color: var( --color-base--subtle );
color: var( --color-subtle );
font-size: 0.875rem;
font-size: 0.875rem;
letter-spacing: 0.75px;
letter-spacing: 0.75px;
gap: var(--space-sm );
gap: var(--space-xs );
line-height: 1.25;
line-height: 1.25;
}
}


.template-components__label > img {
.template-components__label img {
height: 2.5rem;
height: 1rem;
width: auto;
width: auto;
position: absolute;
top: 0.5rem;
opacity: .1;
}

.template-components__label > span {
padding-left: 3rem;
}
}


.template-components__group {
.template-components__group {
display: flex;
display: flex;
gap: var( --space-sm );
gap: var( --space-xs );
flex-wrap: wrap;
flex-wrap: wrap;
flex-grow: 1;
flex-grow: 1;
Line 47: Line 40:
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: var( --space-sm );
gap: var( --space-xs );
flex-grow: 1;
flex-grow: 1;
}
}
Line 57: Line 50:
.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */
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);
}
}

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 ) */
}