114 lines
2.3 KiB
SCSS
114 lines
2.3 KiB
SCSS
.element-card {
|
|
cursor: default;
|
|
text-align: center;
|
|
user-select: none;
|
|
|
|
.card-id {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-name {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 0px;
|
|
right: 0;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-avatar-name {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0px;
|
|
right: 0;
|
|
line-height: 2 !important;
|
|
}
|
|
|
|
.card-detail {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 15px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-avatar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
width: 140px !important;
|
|
height: 120px !important;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.lucky-element-card {
|
|
cursor: default;
|
|
user-select: none;
|
|
|
|
&::before {
|
|
background-color: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
|
|
border: 1px solid linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
|
|
}
|
|
|
|
.card-id {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-name {
|
|
text-align: center;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 0px;
|
|
right: 0;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
// -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
// animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
// animation-delay: 0.6s;
|
|
}
|
|
|
|
.card-avatar-name {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0px;
|
|
right: 0;
|
|
line-height: 2 !important;
|
|
}
|
|
|
|
.card-detail {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
z-index: 2;
|
|
bottom: 15px;
|
|
}
|
|
|
|
.card-avatar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
width: 280px !important;
|
|
height: 240px !important;
|
|
object-fit: cover;
|
|
}
|
|
} |