Refine telemetry-driven HUD and fitness feedback
This commit is contained in:
@@ -6,6 +6,22 @@
|
||||
color: #163020;
|
||||
}
|
||||
|
||||
.app-edge-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 0;
|
||||
pointer-events: none;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.app-edge-glow--orange {
|
||||
animation: app-edge-breathe-orange 1.55s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-edge-glow--red {
|
||||
animation: app-edge-breathe-red 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.map-stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -534,18 +550,115 @@
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
.race-panel {
|
||||
.race-panel-swiper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 216rpx;
|
||||
background: linear-gradient(180deg, #1d97ec 0%, #168ce4 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(10, 75, 125, 0.2);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.race-panel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #1d8fd2 0%, #197dba 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(18, 101, 150, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.race-panel--tone-blue {
|
||||
background: linear-gradient(180deg, #1d8fd2 0%, #197dba 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(18, 101, 150, 0.22);
|
||||
}
|
||||
|
||||
.race-panel--tone-purple {
|
||||
background: linear-gradient(180deg, #5317d4 0%, #4310b7 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(58, 16, 145, 0.24);
|
||||
}
|
||||
|
||||
.race-panel--tone-green {
|
||||
background: linear-gradient(180deg, #08c805 0%, #05ab03 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(6, 112, 9, 0.24);
|
||||
}
|
||||
|
||||
.race-panel--tone-yellow {
|
||||
background: linear-gradient(180deg, #ffbf1f 0%, #ffad0f 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(163, 105, 0, 0.24);
|
||||
}
|
||||
|
||||
.race-panel--tone-yellow .race-panel__cell,
|
||||
.race-panel--tone-yellow .race-panel__tag,
|
||||
.race-panel--tone-orange .race-panel__tag,
|
||||
.race-panel--tone-red .race-panel__tag {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.race-panel--tone-orange {
|
||||
background: linear-gradient(180deg, #ff7b12 0%, #ff6500 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(156, 68, 0, 0.26);
|
||||
}
|
||||
|
||||
.race-panel--tone-red {
|
||||
background: linear-gradient(180deg, #e1122c 0%, #c90e27 100%);
|
||||
box-shadow: 0 -10rpx 24rpx rgba(141, 16, 38, 0.28);
|
||||
}
|
||||
|
||||
@keyframes app-edge-breathe-orange {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
inset 0 0 22rpx 6rpx rgba(255, 123, 18, 0.12),
|
||||
inset 0 0 54rpx 14rpx rgba(255, 148, 46, 0.06);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow:
|
||||
inset 0 0 34rpx 12rpx rgba(255, 133, 36, 0.24),
|
||||
inset 0 0 78rpx 24rpx rgba(255, 160, 78, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-edge-breathe-red {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
inset 0 0 24rpx 7rpx rgba(225, 18, 44, 0.14),
|
||||
inset 0 0 58rpx 16rpx rgba(233, 44, 67, 0.07);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow:
|
||||
inset 0 0 38rpx 14rpx rgba(233, 44, 67, 0.28),
|
||||
inset 0 0 86rpx 26rpx rgba(241, 82, 104, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
.race-panel-pager {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18rpx;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
z-index: 16;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.race-panel-pager__dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.race-panel-pager__dot--active {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 0 0 4rpx rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.race-panel__grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -678,6 +791,16 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.race-panel__metric-value--telemetry {
|
||||
font-size: 46rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.race-panel__metric-value--telemetry-secondary {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.race-panel__metric-unit {
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
@@ -694,6 +817,11 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.race-panel__metric-unit--telemetry {
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.race-panel__progress {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
@@ -703,6 +831,31 @@
|
||||
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.race-panel__zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
max-width: calc(100% - 12rpx);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.race-panel__zone-name {
|
||||
font-size: 32rpx;
|
||||
line-height: 1.08;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.race-panel__zone-range {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.race-panel__tag {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
@@ -890,40 +1043,95 @@
|
||||
.debug-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx 28rpx 20rpx;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
padding: 22rpx 28rpx 18rpx;
|
||||
border-bottom: 1rpx solid rgba(22, 48, 32, 0.08);
|
||||
}
|
||||
|
||||
.debug-modal__eyebrow {
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 4rpx;
|
||||
color: #5f7a65;
|
||||
.debug-modal__header-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.debug-modal__title {
|
||||
margin-top: 8rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #163020;
|
||||
.debug-modal__header-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.debug-modal__eyebrow {
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 4rpx;
|
||||
color: #5f7a65;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.debug-modal__build {
|
||||
margin-top: 10rpx;
|
||||
display: inline-flex;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(22, 48, 32, 0.08);
|
||||
color: #45624b;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
letter-spacing: 1rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.debug-modal__close {
|
||||
flex-shrink: 0;
|
||||
min-width: 108rpx;
|
||||
padding: 14rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #163020;
|
||||
color: #f7fbf2;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.debug-modal__content {
|
||||
max-height: calc(72vh - 108rpx);
|
||||
padding: 12rpx 28rpx 30rpx;
|
||||
padding: 12rpx 24rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.debug-section {
|
||||
margin-top: 16rpx;
|
||||
padding: 18rpx 20rpx 22rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(242, 247, 239, 0.98);
|
||||
box-shadow: inset 0 0 0 1rpx rgba(22, 48, 32, 0.05);
|
||||
}
|
||||
|
||||
.debug-section:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.debug-section__header {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.debug-section__title {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2rpx;
|
||||
color: #163020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.debug-section__desc {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
color: #6a826f;
|
||||
}
|
||||
|
||||
.info-panel__row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -972,6 +1180,10 @@
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.debug-section .control-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.control-row--triple .control-chip {
|
||||
font-size: 23rpx;
|
||||
}
|
||||
@@ -1041,6 +1253,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.race-panel__metric-group--panel {
|
||||
max-width: calc(100% - 8rpx);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user