176 lines
3.6 KiB
SCSS
176 lines
3.6 KiB
SCSS
@mixin commonCardStyle {
|
|
width: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 20px;
|
|
border: 0.5px solid rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
background:
|
|
linear-gradient(180deg, #bfffef 0%, #f2fffc 100%),
|
|
var(--Backgrounds-Primary, #fff);
|
|
|
|
.lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20px;
|
|
z-index: 1;
|
|
background-position-y: 85%;
|
|
pointer-events: none;
|
|
}
|
|
// .gradient {
|
|
// inset: 0;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// z-index: -2;
|
|
// border-radius: 20px;
|
|
// background:
|
|
// linear-gradient(180deg, #bfffef 0%, #f2fffc 100%),
|
|
// var(--Backgrounds-Primary, #fff);
|
|
// pointer-events: none;
|
|
// }
|
|
}
|
|
|
|
.higher {
|
|
height: 100px;
|
|
@include commonCardStyle();
|
|
}
|
|
|
|
.lower {
|
|
height: 80px;
|
|
@include commonCardStyle();
|
|
}
|
|
|
|
.desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 7px;
|
|
|
|
.title {
|
|
color: #2a4d44;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 24px;
|
|
|
|
.colorTip {
|
|
color: #00e5ad;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.strongTip {
|
|
color: #00e5ad;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 24px;
|
|
text-decoration-line: underline;
|
|
text-decoration-style: solid;
|
|
text-decoration-skip-ink: auto;
|
|
text-decoration-thickness: auto;
|
|
text-underline-offset: auto;
|
|
text-underline-position: from-font;
|
|
}
|
|
}
|
|
}
|
|
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 4px;
|
|
color: #5ca693;
|
|
font-feature-settings:
|
|
"liga" off,
|
|
"clig" off;
|
|
font-family: "PingFang SC";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
|
|
.entryIcon {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
@mixin commonAvatarStyle($multiple: 1) {
|
|
.avatar {
|
|
flex: 0 0 auto;
|
|
width: calc(100px * $multiple);
|
|
height: calc(100px * $multiple);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
border: 1px solid #efefef;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 0 1px 0 rgba(0, 0, 0, 0.2),
|
|
0 8px 20px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
.avatarUrl {
|
|
width: calc(90px * $multiple);
|
|
height: calc(90px * $multiple);
|
|
border-radius: 50%;
|
|
border: 1px solid #efefef;
|
|
}
|
|
}
|
|
|
|
.addonImage {
|
|
flex: 0 0 auto;
|
|
width: calc(88px * $multiple);
|
|
height: calc(88px * $multiple);
|
|
transform: rotate(8deg);
|
|
flex-shrink: 0;
|
|
aspect-ratio: 1/1;
|
|
border-radius: calc(20px * $multiple);
|
|
border: 4px solid #fff;
|
|
background:
|
|
linear-gradient(
|
|
0deg,
|
|
rgba(89, 255, 214, 0.2) 0%,
|
|
rgba(89, 255, 214, 0.2) 100%
|
|
),
|
|
#fff;
|
|
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
margin-left: calc(-1 * 20px * $multiple);
|
|
|
|
.docImage {
|
|
width: calc(48px * $multiple);
|
|
height: calc(48px * $multiple);
|
|
transform: rotate(-7deg);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatarWrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
@include commonAvatarStyle(0.5);
|
|
}
|