feat: 优化延迟设置界面,调整样式和布局

This commit is contained in:
QLHazyCoder
2026-04-14 13:09:16 +08:00
parent 2f0495fb6e
commit 4af0c4269d
2 changed files with 27 additions and 6 deletions
+21 -3
View File
@@ -915,12 +915,26 @@ header {
.fallback-inline { .fallback-inline {
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.fallback-thread-interval { .fallback-thread-interval {
margin-left: auto;
}
.timing-field {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
min-width: 0;
}
.timing-field-labeled {
min-width: 196px;
justify-content: flex-end;
}
.timing-field-right {
margin-left: auto; margin-left: auto;
} }
@@ -983,6 +997,7 @@ header {
.auto-delay-inline { .auto-delay-inline {
justify-content: space-between; justify-content: space-between;
align-items: center;
gap: 12px; gap: 12px;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -991,13 +1006,12 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex: 0 1 auto; flex: 0 0 auto;
min-width: 0; min-width: 0;
} }
.auto-delay-side-right { .auto-delay-side-right {
margin-left: auto; flex: 0 0 auto;
justify-content: flex-end;
} }
.auto-delay-check { .auto-delay-check {
@@ -1015,6 +1029,8 @@ header {
color: var(--text-muted); color: var(--text-muted);
flex: 0 0 auto; flex: 0 0 auto;
white-space: nowrap; white-space: nowrap;
min-width: 56px;
text-align: right;
} }
.auto-delay-controls { .auto-delay-controls {
@@ -1035,6 +1051,8 @@ header {
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
flex-shrink: 0; flex-shrink: 0;
min-width: 24px;
text-align: left;
} }
/* Status Bar */ /* Status Bar */
+6 -3
View File
@@ -207,7 +207,7 @@
<span class="toggle-switch-thumb"></span> <span class="toggle-switch-thumb"></span>
</span> </span>
</label> </label>
<div class="fallback-thread-interval"> <div class="timing-field timing-field-labeled timing-field-right fallback-thread-interval">
<span class="auto-delay-caption">线程间隔</span> <span class="auto-delay-caption">线程间隔</span>
<div class="auto-delay-controls"> <div class="auto-delay-controls">
<input type="number" id="input-auto-skip-failures-thread-interval-minutes" class="data-input auto-delay-input" value="0" <input type="number" id="input-auto-skip-failures-thread-interval-minutes" class="data-input auto-delay-input" value="0"
@@ -221,8 +221,11 @@
<span class="data-label">延迟</span> <span class="data-label">延迟</span>
<div class="data-inline auto-delay-inline"> <div class="data-inline auto-delay-inline">
<div class="auto-delay-side auto-delay-side-left"> <div class="auto-delay-side auto-delay-side-left">
<label class="data-check auto-delay-check" for="input-auto-delay-enabled"> <label class="toggle-switch" for="input-auto-delay-enabled">
<input type="checkbox" id="input-auto-delay-enabled" /> <input type="checkbox" id="input-auto-delay-enabled" />
<span class="toggle-switch-track" aria-hidden="true">
<span class="toggle-switch-thumb"></span>
</span>
</label> </label>
<div class="auto-delay-controls"> <div class="auto-delay-controls">
<input type="number" id="input-auto-delay-minutes" class="data-input auto-delay-input" value="30" min="1" <input type="number" id="input-auto-delay-minutes" class="data-input auto-delay-input" value="30" min="1"
@@ -230,7 +233,7 @@
<span class="data-unit">分钟</span> <span class="data-unit">分钟</span>
</div> </div>
</div> </div>
<div class="auto-delay-side auto-delay-side-right"> <div class="timing-field timing-field-labeled timing-field-right auto-delay-side auto-delay-side-right">
<span class="auto-delay-caption">步间间隔</span> <span class="auto-delay-caption">步间间隔</span>
<div class="auto-delay-controls"> <div class="auto-delay-controls">
<input type="number" id="input-auto-step-delay-seconds" class="data-input auto-delay-input" value="" <input type="number" id="input-auto-step-delay-seconds" class="data-input auto-delay-input" value=""