Content deleted Content added
Alistair3149 (talk | contribs) No edit summary |
Alistar Bot (talk | contribs) m →top: clean up, replaced: --background-color-quiet--hover → --background-color-button-quiet--hover, --background-color-quiet--active → --background-color-button-quiet--active, --border-radius--medium → --border-radius-medium, --color-base--emphasized → --color-emphasized, --color-base--subtle → --color-subtle, --line-height-sm → --line-height-xx-small |
||
Line 9: | Line 9: | ||
position: relative; |
position: relative; |
||
border: 1px solid var( --border-color-base ); |
border: 1px solid var( --border-color-base ); |
||
border-radius: var( --border-radius |
border-radius: var( --border-radius-medium ); |
||
overflow: hidden; |
overflow: hidden; |
||
} |
} |
||
Line 59: | Line 59: | ||
left: var( --space-md ); |
left: var( --space-md ); |
||
right: var( --space-md ); |
right: var( --space-md ); |
||
line-height: var( --line-height- |
line-height: var( --line-height-xx-small ); |
||
overflow-wrap: break-word; |
overflow-wrap: break-word; |
||
transition: var( --transition-hover ); |
transition: var( --transition-hover ); |
||
Line 66: | Line 66: | ||
.template-vehicleVariant-title { |
.template-vehicleVariant-title { |
||
color: var( --color |
color: var( --color-emphasized ); |
||
font-size: var( --font-size-small ); |
font-size: var( --font-size-small ); |
||
font-weight: var( --font-weight-medium ); |
font-weight: var( --font-weight-medium ); |
||
Line 72: | Line 72: | ||
.template-vehicleVariant-subtitle { |
.template-vehicleVariant-subtitle { |
||
color: var( --color |
color: var( --color-subtle ); |
||
font-size: var( --font-size-x-small ); |
font-size: var( --font-size-x-small ); |
||
} |
} |
||
.template-vehicleVariant:hover { |
.template-vehicleVariant:hover { |
||
background: var( --background-color-quiet--hover ); |
background: var( --background-color-button-quiet--hover ); |
||
} |
} |
||
.template-vehicleVariant:active { |
.template-vehicleVariant:active { |
||
background: var( --background-color-quiet--active ); |
background: var( --background-color-button-quiet--active ); |
||
} |
} |
||
Revision as of 01:13, 6 January 2025
.template-vehicleVariants {
margin-top: var( --space-md );
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 320px,1fr ) );
gap: var( --space-xs );
}
.template-vehicleVariant {
position: relative;
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
overflow: hidden;
}
.template-vehicleVariant.template-vehicleVariant--selected {
display: none;
}
.template-vehicleVariant-fakelink {
position: absolute;
inset: 0;
opacity: 0;
z-index: 2;
}
.template-vehicleVariant-fakelink a {
display: block;
height: 100%;
}
.template-vehicleVariant-image {
position: relative;
z-index: 0;
height: 160px;
}
.template-vehicleVariant-image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: var( --transition-hover );
transition-property: transform;
}
.template-vehicleVariant-image::before {
position: absolute;
content: "";
inset: 0px;
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%) center top / cover;
background-position: center top;
z-index: 1;
transition: var( --transition-hover );
transition-property: opacity;
}
.template-vehicleVariant-text {
position: absolute;
bottom: var( --space-sm );
left: var( --space-md );
right: var( --space-md );
line-height: var( --line-height-xx-small );
overflow-wrap: break-word;
transition: var( --transition-hover );
transition-property: opacity;
}
.template-vehicleVariant-title {
color: var( --color-emphasized );
font-size: var( --font-size-small );
font-weight: var( --font-weight-medium );
}
.template-vehicleVariant-subtitle {
color: var( --color-subtle );
font-size: var( --font-size-x-small );
}
.template-vehicleVariant:hover {
background: var( --background-color-button-quiet--hover );
}
.template-vehicleVariant:active {
background: var( --background-color-button-quiet--active );
}
.template-vehicleVariant:hover .template-vehicleVariant-image img {
transform: scale( 1.1 );
}
.template-vehicleVariant:hover .template-vehicleVariant-image::before,
.template-vehicleVariant:hover .template-vehicleVariant-text {
opacity: 0;
}