More actions
Content deleted Content added
Alistair3149 (talk | contribs) 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- |
padding-top: var( --space-sm ); |
||
padding-bottom: var( --space- |
padding-bottom: var( --space-sm ); |
||
display: flex; |
display: flex; |
||
flex-direction: column; |
flex-direction: column; |
||
gap: var( --space- |
gap: var( --space-xs ); |
||
} |
} |
||
Line 18: | Line 18: | ||
display: flex; |
display: flex; |
||
align-items: center; |
align-items: center; |
||
color: var( --color |
color: var( --color-subtle ); |
||
font-size: 0.875rem; |
font-size: 0.875rem; |
||
letter-spacing: 0.75px; |
letter-spacing: 0.75px; |
||
gap: var(--space- |
gap: var(--space-xs ); |
||
line-height: 1.25; |
line-height: 1.25; |
||
} |
} |
||
.template-components__label |
.template-components__label img { |
||
height: |
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- |
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- |
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 ) */
}