Content deleted Content added
Alistair3149 (talk | contribs) No edit summary |
Alistair3149 (talk | contribs) No edit summary |
||
(8 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
.template-vehicleVariants { |
.template-vehicleVariants { |
||
margin-top: var( |
margin-top: var(--space-md); |
||
display: grid; |
display: grid; |
||
grid-template-columns: repeat( |
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
||
gap: var( |
gap: var(--space-xs); |
||
} |
} |
||
.template-vehicleVariant { |
.template-vehicleVariant { |
||
position: relative; |
position: relative; |
||
border: 1px solid var(--border-color-base); |
|||
border-radius: var(--border-radius-medium); |
|||
overflow: hidden; |
|||
} |
} |
||
.template-vehicleVariant.template-vehicleVariant--selected { |
.template-vehicleVariant.template-vehicleVariant--selected { |
||
display: none; |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
background: var( --background-color-quiet--active ); |
|||
} |
} |
||
.template-vehicleVariant-fakelink { |
.template-vehicleVariant-fakelink { |
||
position: absolute; |
position: absolute; |
||
inset: 0; |
|||
opacity: 0; |
|||
z-index: 2; |
z-index: 2; |
||
} |
} |
||
Line 35: | Line 26: | ||
.template-vehicleVariant-fakelink a { |
.template-vehicleVariant-fakelink a { |
||
display: block; |
display: block; |
||
height: 100%; |
|||
⚫ | |||
⚫ | |||
⚫ | |||
} |
} |
||
Line 45: | Line 32: | ||
position: relative; |
position: relative; |
||
z-index: 0; |
z-index: 0; |
||
height: 160px; |
|||
} |
} |
||
.template-vehicleVariant-image img { |
.template-vehicleVariant-image img { |
||
height: 100%; |
height: 100%; |
||
width: 100%; |
|||
object-fit: cover; |
|||
transition: var( |
transition: var(--transition-hover); |
||
transition-property: transform; |
|||
} |
} |
||
.template-vehicleVariant-image::before { |
.template-vehicleVariant-image::before { |
||
position: absolute; |
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; |
z-index: 1; |
||
transition: var(--transition-hover); |
|||
transition-property: opacity; |
|||
} |
} |
||
.template-vehicleVariant-text { |
.template-vehicleVariant-text { |
||
position: absolute; |
position: absolute; |
||
bottom: var( |
bottom: var(--space-sm); |
||
left: var( |
left: var(--space-md); |
||
right: var( |
right: var(--space-md); |
||
line-height: var(--line-height-xx-small); |
|||
overflow-wrap: break-word; |
overflow-wrap: break-word; |
||
transition: var(--transition-hover); |
|||
transition-property: opacity; |
|||
} |
} |
||
.template-vehicleVariant-title { |
.template-vehicleVariant-title { |
||
color: |
color: #fff; |
||
font-size: var( |
font-size: var(--font-size-small); |
||
font-weight: var(--font-weight-medium); |
|||
} |
} |
||
.template-vehicleVariant-subtitle { |
.template-vehicleVariant-subtitle { |
||
color: |
color: #ddd; |
||
font-size: var( |
font-size: var(--font-size-x-small); |
||
⚫ | |||
.template-vehicleVariant:hover { |
|||
⚫ | |||
⚫ | |||
.template-vehicleVariant:active { |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
⚫ | |||
opacity: 0; |
|||
} |
} |
Latest revision as of 22:50, 4 February 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: #fff;
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
.template-vehicleVariant-subtitle {
color: #ddd;
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;
}