調整設定隊伍流程並支援勝利分數設定

2026-04-16 08:53:05 +08:00
parent e903d3ae52
commit a1e0e0f16e
4 changed files with 399 additions and 129 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -347,8 +347,10 @@
  gap: 14px;
  padding: 12px;
  border-radius: 22px;
-  background: #060606;
-  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.26);
+  background:
+    radial-gradient(circle at top right, rgba(255, 205, 96, 0.22), transparent 26%),
+    linear-gradient(145deg, rgba(8, 47, 73, 0.97), rgba(10, 96, 84, 0.93));
+  box-shadow: 0 30px 60px rgba(8, 47, 73, 0.24);
 }

 .scoreboard-team-section {
@@ -370,7 +372,8 @@
  min-height: 64px;
  padding: 8px;
  border-radius: 4px;
-  background: #d8cfd2;
+  background: rgba(255, 248, 232, 0.92);
+  box-shadow: inset 0 0 0 1px rgba(195, 154, 88, 0.2);
 }

 .scoreboard-name-chip {
@@ -380,8 +383,8 @@
  min-height: 46px;
  padding: 4px 8px;
  border-radius: 4px;
-  color: #111;
-  background: rgba(255, 255, 255, 0.42);
+  color: #16342f;
+  background: rgba(255, 255, 255, 0.7);
 }

 .scoreboard-name-chip strong {
@@ -391,8 +394,8 @@
 }

 .scoreboard-name-chip-serving {
-  background: #c8f400;
-  box-shadow: inset 0 0 0 2px rgba(34, 48, 0, 0.18);
+  background: linear-gradient(180deg, #ebf8a4, #d6e164);
+  box-shadow: inset 0 0 0 2px rgba(111, 128, 27, 0.24);
 }

 .team-number {
@@ -405,7 +408,7 @@
  font-family: var(--mono);
  font-size: 1.15rem;
  color: #fff;
-  background: #06253e;
+  background: linear-gradient(180deg, rgba(8, 47, 73, 0.96), rgba(10, 96, 84, 0.92));
  border-radius: 4px;
 }

@@ -421,8 +424,27 @@
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
-  color: #111;
-  background: #d0d0d0;
+  color: #5b2f13;
+  background: linear-gradient(180deg, #fff8e8, #f2d9a3);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.35),
+    0 6px 14px rgba(8, 47, 73, 0.14);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.team-icon-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.45),
+    0 10px 18px rgba(8, 47, 73, 0.18);
+}
+
+.team-icon-button:active:not(:disabled) {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .team-icon-button:disabled {
@@ -442,28 +464,41 @@
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
-  color: #fff;
-  background: #2f2f2f;
+  color: #f8f4ea;
+  background: rgba(255, 248, 232, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(255, 236, 202, 0.12);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    background 0.16s ease;
 }

 .serve-lane:disabled {
  cursor: default;
 }

+.serve-lane:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: rgba(255, 248, 232, 0.18);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 236, 202, 0.22),
+    0 10px 18px rgba(8, 47, 73, 0.12);
+}
+
 .serve-lane small {
  justify-self: end;
-  color: rgba(255, 255, 255, 0.72);
+  color: rgba(248, 244, 234, 0.72);
 }

 .serve-lane-locked {
-  box-shadow: inset 0 0 0 1px rgba(200, 244, 0, 0.28);
+  box-shadow: inset 0 0 0 1px rgba(214, 225, 100, 0.42);
 }

 .serve-lane-box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
-  background: #f7f7f7;
+  background: linear-gradient(180deg, #fff8e8, #f0dfbd);
 }

 .score-panel-surface {
@@ -479,9 +514,10 @@
    transform 0.16s ease,
    box-shadow 0.16s ease;
  background:
-    linear-gradient(transparent 0 40%, rgba(0, 0, 0, 0.24) 40% 60%, transparent 60% 100%),
-    linear-gradient(90deg, transparent 0 40%, rgba(0, 0, 0, 0.24) 40% 60%, transparent 60% 100%),
-    #2f2f2f;
+    linear-gradient(transparent 0 40%, rgba(11, 39, 34, 0.18) 40% 60%, transparent 60% 100%),
+    linear-gradient(90deg, transparent 0 40%, rgba(11, 39, 34, 0.18) 40% 60%, transparent 60% 100%),
+    linear-gradient(180deg, rgba(255, 248, 232, 0.2), rgba(255, 248, 232, 0.08)),
+    rgba(245, 237, 221, 0.96);
 }

 .score-panel-surface-live {
@@ -490,14 +526,17 @@

 .score-panel-surface-live:hover {
  transform: translateY(-1px);
-  box-shadow: inset 0 0 0 2px rgba(213, 234, 2, 0.2);
+  box-shadow:
+    inset 0 0 0 2px rgba(236, 193, 112, 0.44),
+    0 10px 20px rgba(8, 47, 73, 0.12);
 }

 .score-panel-value {
  font-family: var(--mono);
  font-size: clamp(4.4rem, 11vw, 7.2rem);
  line-height: 1;
-  color: #d5ea02;
+  color: #0d544a;
+  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.42);
 }

 .scoreboard-center-banner {
@@ -509,13 +548,13 @@

 .scoreboard-center-banner p {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
-  color: #fff;
+  color: #fff7e9;
  text-align: center;
 }

 .scoreboard-center-banner small {
  font-size: 0.92rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 247, 233, 0.76);
 }

 .scoreboard-rail {
@@ -536,8 +575,27 @@
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
-  color: #111;
-  background: #d0d0d0;
+  color: #5b2f13;
+  background: linear-gradient(180deg, #fff8e8, #f2d9a3);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.35),
+    0 8px 18px rgba(8, 47, 73, 0.14);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.rail-square-button:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.45),
+    0 12px 20px rgba(8, 47, 73, 0.18);
+}
+
+.rail-square-button:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .rail-clock {
@@ -547,8 +605,10 @@
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 1.7rem;
-  color: #fff;
-  background: #060606;
+  color: #fff7e9;
+  background:
+    radial-gradient(circle at top right, rgba(255, 205, 96, 0.16), transparent 28%),
+    linear-gradient(145deg, rgba(8, 47, 73, 0.97), rgba(10, 96, 84, 0.93));
 }

 .rail-pill {
@@ -560,11 +620,30 @@
  font-size: 1rem;
  color: #4a2e1d;
  background: linear-gradient(180deg, #fff0c7, #f8c870);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.28),
+    0 10px 18px rgba(8, 47, 73, 0.14);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.rail-pill:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.34),
+    0 14px 22px rgba(8, 47, 73, 0.18);
+}
+
+.rail-pill:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .rail-pill-danger {
  color: #fff;
-  background: linear-gradient(180deg, #d41d1d, #a91212);
+  background: linear-gradient(180deg, #d95a44, #b53a28);
 }

 .rail-pill-muted {
@@ -602,6 +681,25 @@
  font-size: 2.4rem;
  color: #b34e3a;
  background: linear-gradient(180deg, #ffe5bf, #f0bd7c);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.34),
+    0 14px 26px rgba(8, 47, 73, 0.2);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.team-picker-close:hover {
+  transform: translateY(-1px) scale(1.01);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.42),
+    0 18px 30px rgba(8, 47, 73, 0.24);
+}
+
+.team-picker-close:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .team-picker-ribbon {
@@ -658,6 +756,27 @@
  margin-top: 4px;
 }

+.team-picker-config {
+  display: grid;
+  gap: 8px;
+  color: #4a2e1d;
+}
+
+.team-picker-config span {
+  font-weight: 700;
+}
+
+.team-picker-score-input {
+  width: 100%;
+  max-width: 140px;
+  padding: 12px 14px;
+  border: 1px solid rgba(124, 98, 61, 0.22);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #2e231b;
+  font: inherit;
+}
+
 .team-picker-list {
  display: grid;
  gap: 14px;
@@ -678,6 +797,17 @@
  text-align: left;
  color: #2e231b;
  background: rgba(255, 249, 238, 0.92);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    border-color 0.16s ease,
+    background 0.16s ease;
+}
+
+.team-picker-option:hover {
+  transform: translateY(-1px);
+  border-color: rgba(199, 155, 83, 0.34);
+  box-shadow: 0 12px 22px rgba(8, 47, 73, 0.08);
 }

 .team-picker-option-active {
@@ -730,6 +860,29 @@
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.24),
+    0 10px 18px rgba(8, 47, 73, 0.12);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.team-picker-ghost:hover,
+.team-picker-confirm:hover:not(:disabled),
+.team-picker-clear:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 155, 83, 0.34),
+    0 14px 22px rgba(8, 47, 73, 0.16);
+}
+
+.team-picker-ghost:active,
+.team-picker-confirm:active:not(:disabled),
+.team-picker-clear:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .team-picker-ghost {
@@ -829,6 +982,25 @@
  font-size: 1.8rem;
  color: #b34e3a;
  background: linear-gradient(180deg, #ffe5bf, #f0bd7c);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.34),
+    0 10px 18px rgba(8, 47, 73, 0.16);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.finish-dialog-close:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.42),
+    0 14px 22px rgba(8, 47, 73, 0.2);
+}
+
+.finish-dialog-close:active:not(:disabled) {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }

 .finish-score {