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

Module:VehicleVariants/styles.css: Difference between revisions

From the Star Citizen Wiki, the fidelity™ encyclopedia
Content deleted Content added
Alistar Bot (talk | contribs)
m top: deprecate old Citizen variables, replaced: --color-base--emphasized → --color-emphasized, --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--subtle → --color-subtle
No edit summary
Line 8: Line 8:
.template-vehicleVariant {
.template-vehicleVariant {
position: relative;
position: relative;
border: 1px solid var( --border-color-base );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
border-radius: var( --border-radius--medium );
overflow: hidden;
overflow: hidden;
}
}


Line 16: Line 16:
order: -1;
order: -1;
background: var( --color-surface-2 );
background: var( --color-surface-2 );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover {
background: var( --background-color-button-quiet--hover );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):active {
background: var( --background-color-button-quiet--active );
}
}


.template-vehicleVariant-fakelink {
.template-vehicleVariant-fakelink {
position: absolute;
position: absolute;
inset: 0;
inset: 0;
opacity: 0;
opacity: 0;
z-index: 2;
z-index: 2;
}
}
Line 35: Line 27:
.template-vehicleVariant-fakelink a {
.template-vehicleVariant-fakelink a {
display: block;
display: block;
height: 100%;
height: 100%;
}

.template-vehicleVariant-fakelink:hover + .template-vehicleVariant-image img {
transform: scale( 1.1 );
}
}


Line 45: Line 33:
position: relative;
position: relative;
z-index: 0;
z-index: 0;
height: 140px;
height: 160px;
}
}


.template-vehicleVariant-image img {
.template-vehicleVariant-image img {
height: 100%;
height: 100%;
width: 100%;
width: 100%;
object-fit: cover;
object-fit: cover;
transition: var( --transition-hover );
transition: var( --transition-hover );
transition-property: transform;
transition-property: transform;
}
}


.template-vehicleVariant-image::before {
.template-vehicleVariant-image::before {
position: absolute;
position: absolute;
content: "";
content: "";
inset: 0px;
inset: 0px;
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%) center top / cover;
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%) center top / cover;
background-position: center top;
background-position: center top;
z-index: 1;
z-index: 1;
transition: var( --transition-hover );
transition-property: opacity;
}
}


Line 70: Line 60:
left: var( --space-md );
left: var( --space-md );
right: var( --space-md );
right: var( --space-md );
line-height: var( --line-height-sm );
line-height: var( --line-height-sm );
overflow-wrap: break-word;
overflow-wrap: break-word;
transition: var( --transition-hover );
transition-property: opacity;
}
}


.template-vehicleVariant-title {
.template-vehicleVariant-title {
color: var( --color-emphasized );
color: var( --color-base--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 81: Line 73:


.template-vehicleVariant-subtitle {
.template-vehicleVariant-subtitle {
color: var( --color-subtle );
color: var( --color-base--subtle );
font-size: var( --font-size-x-small );
font-size: var( --font-size-x-small );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover {
background: var( --background-color-quiet--hover );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):active {
background: var( --background-color-quiet--active );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image img {
transform: scale( 1.1 );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image::before,
.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-text {
opacity: 0;
}
}

Revision as of 21:34, 15 October 2024

.template-vehicleVariants {
	margin-top: var( --space-md );
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 256px,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 {
	order: -1;
	background: var( --color-surface-2 );
}

.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-sm );
	overflow-wrap: break-word;
	transition: var( --transition-hover );
	transition-property: opacity;
}

.template-vehicleVariant-title {
	color: var( --color-base--emphasized );
	font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
}

.template-vehicleVariant-subtitle {
	color: var( --color-base--subtle );
	font-size: var( --font-size-x-small );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover {
	background: var( --background-color-quiet--hover );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):active {
	background: var( --background-color-quiet--active );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image img {
	transform: scale( 1.1 );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image::before,
.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-text {
	opacity: 0;
}