14 lines
1.4 KiB
Plaintext
14 lines
1.4 KiB
Plaintext
.story-page { width: 100vw; height: 100vh; background: #121214; position: relative; overflow: hidden; }
|
|
.progress-row { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 16rpx); left: 16rpx; right: 16rpx; display: flex; gap: 6rpx; z-index: 10; }
|
|
.progress-bar { flex: 1; height: 4rpx; background: rgba(255,255,255,0.35); border-radius: 2rpx; overflow: hidden; }
|
|
.progress-fill { height: 100%; background: #fff; border-radius: 2rpx; transition: width 0.1s linear; }
|
|
.story-nav { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 28rpx); left: 20rpx; right: 20rpx; display: flex; align-items: center; gap: 14rpx; z-index: 10; }
|
|
.story-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); border: 3rpx solid rgba(255,255,255,0.72); }
|
|
.story-author { display: block; font-size: 28rpx; font-weight: 700; color: #fff; }
|
|
.story-time { display: block; font-size: 22rpx; color: rgba(255,255,255,0.72); }
|
|
.close-btn { margin-left: auto; font-size: 40rpx; color: rgba(255,255,255,0.80); padding: 10rpx; }
|
|
.story-content { width: 100%; height: 100%; }
|
|
.story-img { width: 100%; height: 100%; }
|
|
.story-text-wrap { position: absolute; bottom: 100rpx; left: 28rpx; right: 28rpx; background: rgba(0,0,0,0.42); border-radius: 20rpx; padding: 20rpx 24rpx; }
|
|
.story-text { font-size: 32rpx; color: #fff; font-weight: 700; line-height: 1.6; }
|