AurLemonCN(讨论 | 贡献) 无编辑摘要 |
小无编辑摘要 |
||
| (未显示2个用户的6个中间版本) | |||
| 第1行: | 第1行: | ||
.player-card { | .player-card { | ||
max-width: 220px; | max-width: 220px; | ||
border-radius: | border-radius: 18px; | ||
float: right; | float: right; | ||
width: 100%; | width: 100%; | ||
| 第16行: | 第16行: | ||
width: 90px; | width: 90px; | ||
height: 90px; | height: 90px; | ||
margin-bottom: 30px; | |||
box-shadow: 1px 1px 16px rgba(0, 0, 0, .2); | |||
} | } | ||
.player-card__split { | .player-card__split { | ||
background-color: white; | background-color: white; | ||
height: 4px; | |||
height: | |||
width: 15%; | width: 15%; | ||
margin: 15px 0; | margin: 15px 0; | ||
| 第29行: | 第30行: | ||
margin-top: 10px; | margin-top: 10px; | ||
color: white; | color: white; | ||
font-weight: bold; | |||
font-size: 22px; | font-size: 22px; | ||
} | } | ||
| 第42行: | 第44行: | ||
color: white; | color: white; | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.2; | |||
margin-bottom: 16px; | |||
} | } | ||
| 第50行: | 第54行: | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
} | } | ||
| 第58行: | 第61行: | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center; | object-position: center; | ||
filter: | filter: brightness(0.2) contrast(0.8); | ||
} | } | ||
.player-card__foreground { | .player-card__foreground { | ||
padding: | padding: 24px; | ||
position: relative; | position: relative; | ||
} | } | ||
2025年11月16日 (日) 12:51的最新版本
.player-card {
max-width: 220px;
border-radius: 18px;
float: right;
width: 100%;
box-shadow: var(--box-shadow-dialog);
margin: 0 0 var(--space-lg) var(--space-lg);
position: relative;
overflow: hidden;
clear: right;
}
.player-card__head {
overflow: hidden;
border-radius: 50%;
width: 90px;
height: 90px;
margin-bottom: 30px;
box-shadow: 1px 1px 16px rgba(0, 0, 0, .2);
}
.player-card__split {
background-color: white;
height: 4px;
width: 15%;
margin: 15px 0;
}
.player-card__nick {
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 22px;
}
.player-card__id {
font-size: 14px;
margin-top: 0px;
margin-bottom: 10px;
color: white;
}
.player-card__desc {
color: white;
font-size: 14px;
line-height: 1.2;
margin-bottom: 16px;
}
.player-card__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.player-card__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.2) contrast(0.8);
}
.player-card__foreground {
padding: 24px;
position: relative;
}
@media (max-width: 720px) {
.player-card {
float: unset;
margin: 0 auto;
}
}