ui/home/allsoftwarecard.razor.scss
.all-card
{
position: absolute;
width: 260px;
height: 260px;
flex-shrink: 0;
flex-grow: 0;
overflow: visible;
cursor: pointer;
.all-card-ring
{
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 260px;
border-radius: 14px;
z-index: 1;
overflow: visible;
pointer-events: none;
}
.all-card-face
{
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 260px;
border-radius: 14px;
background-color: #d9dde3;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.18 );
z-index: 2;
&.is-missing
{
align-items: center;
justify-content: center;
background-image: linear-gradient( to bottom, #9c9da2 0%, #38393d 100% );
.missing-icon-disc
{
width: 129px;
height: 129px;
}
.missing-icon
{
font-size: 73px;
}
}
}
&.selected .all-card-face
{
box-shadow: 0 7px 14px rgba( 0, 0, 0, 0.24 );
}
.all-card-title
{
position: absolute;
left: -130px;
bottom: -92px;
width: 520px;
max-width: 520px;
height: 64px;
padding: 0;
border-radius: 14px;
align-items: center;
justify-content: center;
background-color: rgba( 255, 255, 255, 0.98 );
box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.14 );
z-index: 3;
overflow: visible;
&.marquee
{
width: 520px;
max-width: 520px;
padding: 0;
}
}
.all-card-title-arrow
{
position: absolute;
left: 50%;
top: -12px;
width: 22px;
height: 12px;
margin-left: -11px;
z-index: 4;
pointer-events: none;
}
.all-card-title-clip
{
position: absolute;
left: 34px;
top: 0;
width: 452px;
height: 64px;
overflow: hidden;
z-index: 1;
align-items: center;
justify-content: center;
}
.all-card-title-text
{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 64px;
align-items: center;
justify-content: center;
font-family: Poppins;
font-size: 30px;
font-weight: 400;
line-height: 38px;
color: #1f76ad;
white-space: nowrap;
text-align: center;
}
.all-card-title-marquee
{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 64px;
}
}