sbox-public/game/addons/base/code/UI/Components/PackageCard.razor.scss

$outline: #fff;
$highlight: #5c5;

.card-package
{
	border: 1px solid transparent;
	margin: 2px;
	flex-direction: column;
	flex-grow: 1;
	padding-bottom: 25px;
	position: relative;

	.card-image
	{
		border-radius: 5px;
		cursor: pointer;
		background-position: center;
		background-size: cover;
		flex-grow: 1;
		overflow: hidden;
		transition: all 0.3s ease;
		border: 1px solid #ffffff05;

		&:hover
		{
			border: 1px solid #08f4;
			transition: all 0.1s ease;
		}

		&:active
		{
			top: 5px;
			left: 2px;
		}
	}

	.package-card-body
	{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 25px;
		font-size: 15px;
		flex-direction: row;
		gap: 5px;
		white-space: nowrap;
		padding: 2px;
		padding-bottom: 0;
		overflow: hidden;

		.orgname
		{
			flex-direction: row;
			flex-shrink: 1;
			color: #5A738B;
			opacity: 0.5;
		}

		.title
		{
			font-weight: bold;
			cursor: pointer;
			flex-grow: 1;
			flex-shrink: 0;
			text-overflow: ellipsis;

			&:hover
			{
				text-decoration: underline;
			}
		}

		.orgname
		{
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;

			&:hover
			{
				text-decoration: underline;
				color: white;
			}
		}
	}

	&.is-favourite .body-meta .favourite
	{
		color: #fac;
	}

	&:intro
	{
		opacity: 0.0;
		transform: scale( 0.8 );
	}

	opacity: 1;
	transition: all 0.3s ease-out;
}

.card-decorator-hidden
{
	position: absolute;
	background-color: #0009;
	bottom: 0;
	left: 0;
	right: 0;
	color: white;
	padding: 10px;
	text-transform: uppercase;
	font-size: 12px;
	z-index: 5;
}

.card-decorator-users
{
	background-color: darken( rgba( $highlight, 0.7 ), 0.66 );
	color: lighten( $highlight, 0.5 );
	position: absolute;
	right: 5px;
	top: 5px;
	padding: 3px 8px;
	border-radius: 200px;
	aspect-ratio: 1;
	box-shadow: 2px 2px 16px #0002;
	font-size: 12px;
	font-weight: bold;
	gap: 3px;
	align-items: center;

	i
	{
		font-size: 16px;
	}
}