5 lines
4.6 KiB
Plaintext
5 lines
4.6 KiB
Plaintext
page { background:#0c0e12; color:#f6f6fc; }
|
|
.page { min-height:100vh; background: radial-gradient(circle at top, rgba(193,156,255,0.15), transparent 30%), #0c0e12; box-sizing:border-box; }
|
|
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:24rpx 32rpx; background:rgba(255,255,255,.8); backdrop-filter:blur(24px); border-bottom:1rpx solid rgba(255,255,255,.2); box-shadow:0 1rpx 20rpx rgba(0,0,0,.08); }
|
|
.brand,.streak-left{display:flex;align-items:center;gap:20rpx}.avatar-wrap{width:80rpx;height:80rpx;border-radius:9999rpx;overflow:hidden;border:1rpx solid rgba(255,255,255,.1);flex-shrink:0}.avatar{width:100%;height:100%}.brand-text{font-size:40rpx;font-weight:900;background:linear-gradient(90deg,#6366f1,#22d3ee);-webkit-background-clip:text;color:transparent}.icon-btn{color:#6366f1;width:72rpx;height:72rpx;border-radius:9999rpx;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.4)}.content{height:calc(100vh - 120rpx);padding:40rpx 32rpx 160rpx;box-sizing:border-box}.greeting{display:flex;flex-direction:column;gap:8rpx;margin-bottom:32rpx}.title{display:block;font-size:56rpx;font-weight:800;color:#fff}.subtitle{display:block;font-size:30rpx;color:#aaabb0}.grid-layout{display:grid;grid-template-columns:1fr;gap:24rpx}.hero-card{position:relative;overflow:hidden;min-height:280rpx;padding:32rpx;border-radius:24rpx;background:rgba(29,32,37,.6);backdrop-filter:blur(24rpx);border:1rpx solid rgba(255,255,255,.1);box-shadow:0 20rpx 40rpx rgba(0,0,0,.4)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(193,156,255,.05),rgba(0,227,253,.05));z-index:0}.hero-row,.hero-grid{position:relative;z-index:1}.hero-row{display:flex;justify-content:space-between;align-items:flex-start}.hero-number{display:block;font-size:72rpx;font-weight:800;color:#fff;line-height:1}.hero-icon{width:96rpx;height:96rpx;border-radius:9999rpx;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:44rpx;border:1rpx solid rgba(255,255,255,.05)}.label{display:block;margin-top:8rpx;font-size:24rpx;color:#aaabb0}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:18rpx;margin-top:44rpx}.metric-card{padding:24rpx;border-radius:20rpx;background:rgba(0,0,0,.15);border:1rpx solid rgba(255,255,255,.05)}.metric-value{display:block;font-size:44rpx;font-weight:800;color:#fff}.metric-value.accent{color:#00e3fd}.small{font-size:20rpx}.stack{display:flex;flex-direction:column;gap:24rpx}.streak-card{padding:28rpx;border-radius:24rpx;background:#111318;border:1rpx solid rgba(255,255,255,.1);box-shadow:0 20rpx 40rpx rgba(0,0,0,.4)}.streak-head{display:flex;justify-content:space-between;align-items:center}.fire{width:80rpx;height:80rpx;border-radius:9999rpx;background:#171a1f;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.05)}.streak-title{font-size:30rpx;font-weight:700;color:#fff}.streak-goal{font-size:24rpx;color:#00e3fd;font-weight:500}.progress-bar{height:12rpx;background:#23262c;border-radius:9999rpx;overflow:hidden;margin-top:18rpx}.progress-fill{width:71%;height:100%;background:linear-gradient(90deg,#c19cff,#00e3fd);position:relative}.progress-fill::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.2)}.week-row{display:flex;justify-content:space-between;margin-top:10rpx;font-size:22rpx;color:#aaabb0}.day.active{color:#00e3fd;font-weight:700}.actions{display:flex;flex-direction:column;gap:18rpx;margin-top:4rpx}.primary-btn,.secondary-btn{width:100%;padding:26rpx 0;border-radius:9999rpx;font-size:32rpx;font-weight:800}.primary-btn{background:linear-gradient(90deg,#c19cff,#9146ff);color:#fff;box-shadow:0 0 20rpx rgba(193,156,255,.3)}.secondary-btn{background:#23262c;color:#fff;border:1rpx solid rgba(255,255,255,.08)}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;align-items:center;padding:20rpx 24rpx 40rpx;background:rgba(12,14,18,.7);backdrop-filter:blur(32rpx);border-top-left-radius:32rpx;border-top-right-radius:32rpx;box-shadow:0 -10rpx 40rpx rgba(0,0,0,.4);border-top:1rpx solid rgba(255,255,255,.08)}.nav-item{display:flex;flex-direction:column;align-items:center;color:#6b7280;opacity:.8}.nav-item.active{color:#66dff3;transform:translateY(-6rpx);filter:drop-shadow(0 0 10rpx rgba(34,211,238,.8))}.nav-icon{width:56rpx;height:56rpx;border-radius:9999rpx;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:26rpx}.nav-label{font-size:20rpx;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
|