Blizzard
180 lines
3.5 KiB
Plaintext
180 lines
3.5 KiB
Plaintext
page {
|
|
background: #F4F6F0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.level-detail-page {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-card {
|
|
background: linear-gradient(135deg, #2c3e50, #4ca1af);
|
|
padding: 60rpx 40rpx;
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 0 0 40rpx 40rpx;
|
|
box-shadow: 0 10rpx 30rpx rgba(44, 62, 80, 0.2);
|
|
margin-bottom: 40rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 28rpx;
|
|
opacity: 0.8;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.header-value {
|
|
font-size: 64rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.timeline-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.timeline {
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
position: relative;
|
|
min-height: 140rpx;
|
|
}
|
|
|
|
.timeline-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.dot-line-top, .dot-line-bottom {
|
|
width: 4rpx;
|
|
background: #E0E0E0;
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline-item:first-child .dot-line-top {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.timeline-item:last-child .dot-line-bottom {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background: #E0E0E0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 8rpx 0;
|
|
z-index: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timeline-item.active .status-dot {
|
|
background: #4CAF50;
|
|
box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.2);
|
|
}
|
|
|
|
/* Logic for lines:
|
|
The top line of THIS item should be green if THIS item is active.
|
|
Wait, if item 2 is active, item 1 is also active.
|
|
Line connecting 1 and 2 is bottom of 1 and top of 2.
|
|
If 2 is active, top of 2 is green.
|
|
If 1 is active, bottom of 1 is green?
|
|
Easier: make lines background #E0E0E0.
|
|
Use a pseudo element or simply rely on active class.
|
|
*/
|
|
|
|
.timeline-item.active .dot-line-top {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
/* If next item is active, make this item's bottom line green */
|
|
/* CSS cannot select based on next sibling easily without :has */
|
|
/* So just color top line of active item green. Bottom line stays gray? No. */
|
|
/* Just color all lines of active items green, EXCEPT the line connecting active to inactive. */
|
|
/* For simplicity, let's keep lines gray or improve logic. */
|
|
/* If I color .timeline-item.active .dot-line-bottom green, then if next is NOT active, it looks weird. */
|
|
/* Correct way: .timeline-item.active .dot-line-top is Green. */
|
|
|
|
.timeline-content {
|
|
flex: 1;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.level-card {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
border: 2rpx solid transparent;
|
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.level-card.current {
|
|
border-color: #4CAF50;
|
|
background: #F1F8E9;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.card-lv {
|
|
background: #eceff1;
|
|
color: #546e7a;
|
|
font-size: 20rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
font-weight: 700;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.timeline-item.active .card-lv {
|
|
background: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
.flex-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.card-sun {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-perks {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
padding-top: 16rpx;
|
|
border-top: 2rpx dashed #eee;
|
|
}
|
|
|
|
.level-card.current .card-perks {
|
|
border-top-color: rgba(76, 175, 80, 0.2);
|
|
color: #388E3C;
|
|
}
|