fix: NCWF-2 bugs and desing fixes (#7)

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #7
2026-05-15 02:16:43 +02:00
parent 70a4debb40
commit c02414ea40
45 changed files with 3167 additions and 1277 deletions
@@ -0,0 +1,90 @@
+.player {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.player.is-turn {
+  border-color: var(--nc-neon-soft);
+  box-shadow: 0 0 0 1px rgba(255, 69, 200, 0.2), 0 0 20px rgba(255, 69, 200, 0.1);
+}
+
+.player-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.avatar-black {
+  background: linear-gradient(135deg, #2a2a40 0%, #0a0a14 100%);
+  border: 1px solid var(--nc-border-strong);
+}
+
+.avatar-white {
+  background: linear-gradient(135deg, var(--nc-neon) 0%, #7a2fd6 100%);
+}
+
+.player-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.player-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--nc-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.captured {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  line-height: 1;
+}
+
+.clock {
+  font-family: var(--nc-mono);
+  font-size: 22px;
+  font-weight: 600;
+  padding: 8px 14px;
+  min-width: 92px;
+  text-align: center;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  letter-spacing: 0.02em;
+  transition: color 0.2s, border-color 0.2s, background 0.2s, text-shadow 0.2s;
+}
+
+.clock.clock-active {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+  background: var(--nc-neon-clock-bg, rgba(255, 69, 200, 0.08));
+  text-shadow: 0 0 8px rgba(255, 69, 200, 0.4);
+}
+
+.clock.clock-low {
+  color: var(--nc-warning);
+  border-color: var(--nc-warning-soft, rgba(255, 177, 58, 0.4));
+}