NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: NCWF-4 Token Issues (#8)

Browse Source 
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #8
This commit was merged in pull request #8.
This commit is contained in:
Shahd Lala
2026-06-02 21:55:55 +02:00
parent 873bfe3bae
commit 95eff42dfe
37 changed files with 2522 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/game/game.component.css
+128 -28
View File
@@ -28,30 +28,30 @@
}
/* ============================================================
LIGHT MODE TOKEN OVERRIDES
LIGHT MODE TOKEN OVERRIDES (sunset-gradient palette)
============================================================ */
:host-context(html:not([data-theme='dark'])) {
--nc-neon: #c026d3;
--nc-neon-soft: rgba(192, 38, 211, 0.45);
--nc-neon-clock-bg: rgba(192, 38, 211, 0.07);
--nc-bg: #f5f0fc;
--nc-surface: rgba(255, 255, 255, 0.88);
--nc-surface-solid: rgba(255, 255, 255, 0.98);
--nc-text: #0f0022;
--nc-text-muted: rgba(15, 0, 34, 0.65);
--nc-text-dim: rgba(15, 0, 34, 0.40);
--nc-border: rgba(15, 0, 34, 0.10);
--nc-border-strong: rgba(15, 0, 34, 0.20);
--nc-warning: #d97706;
--nc-warning-soft: rgba(217, 119, 6, 0.35);
--nc-danger: #dc2626;
--nc-danger-soft: rgba(220, 38, 38, 0.25);
--nc-danger-bg: rgba(220, 38, 38, 0.06);
--nc-success: #059669;
--nc-clock-bg: rgba(0, 0, 0, 0.04);
--nc-btn-bg: rgba(0, 0, 0, 0.03);
--nc-btn-hover-bg: rgba(0, 0, 0, 0.06);
--nc-seg-bg: rgba(0, 0, 0, 0.06);
--nc-neon: #ff3dbb;
--nc-neon-soft: rgba(255, 61, 187, 0.55);
--nc-neon-clock-bg: rgba(255, 61, 187, 0.08);
--nc-bg: transparent;
--nc-surface: rgba(26, 24, 56, 0.72);
--nc-surface-solid: rgba(26, 24, 56, 0.97);
--nc-text: #fff;
--nc-text-muted: rgba(255, 255, 255, 0.72);
--nc-text-dim: rgba(255, 255, 255, 0.45);
--nc-border: rgba(255, 255, 255, 0.10);
--nc-border-strong: rgba(255, 255, 255, 0.18);
--nc-warning: #ffb13a;
--nc-warning-soft: rgba(255, 177, 58, 0.40);
--nc-danger: #ff7a7a;
--nc-danger-soft: rgba(255, 122, 122, 0.30);
--nc-danger-bg: rgba(255, 122, 122, 0.08);
--nc-success: #5ee5a1;
--nc-clock-bg: rgba(0, 0, 0, 0.30);
--nc-btn-bg: rgba(255, 255, 255, 0.05);
--nc-btn-hover-bg: rgba(255, 255, 255, 0.10);
--nc-seg-bg: rgba(0, 0, 0, 0.28);
}
/* ============================================================
@@ -78,8 +78,8 @@
:host-context(html:not([data-theme='dark'])) .game-shell::before {
background:
radial-gradient(ellipse 80% 50% at 20% 100%, rgba(192, 38, 211, 0.06), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 0%, rgba(120, 40, 180, 0.08), transparent 60%);
radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 77, 74, 0.10), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 0%, rgba(74, 41, 98, 0.22), transparent 60%);
}
/* ============================================================
@@ -290,12 +290,53 @@
animation: slideIn 0.35s ease-out;
}
.completion-banner--timeout {
background: rgba(255, 177, 58, 0.06);
border-color: var(--nc-warning-soft);
}
.completion-banner--timeout .completion-title {
color: var(--nc-warning);
}
.completion-left {
display: flex;
align-items: center;
gap: 14px;
}
.completion-icon {
font-size: 22px;
opacity: 0.7;
}
.completion-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.completion-new {
font-size: 11px !important;
padding: 8px 14px !important;
text-decoration: none;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.completion-title { font-size: 16px; font-weight: 600; color: var(--nc-neon); }
.completion-title { font-size: 15px; font-weight: 700; color: var(--nc-neon); }
.completion-sub {
font-family: var(--nc-mono);
font-size: 10px;
color: var(--nc-text-dim);
letter-spacing: 0.08em;
margin-top: 2px;
}
.completion-link {
font-family: var(--nc-mono);
@@ -345,8 +386,8 @@
}
:host-context(html:not([data-theme='dark'])) .status-strip {
background: rgba(192, 38, 211, 0.04);
border-color: rgba(192, 38, 211, 0.18);
background: rgba(255, 61, 187, 0.06);
border-color: rgba(255, 61, 187, 0.20);
}
.status-left { display: inline-flex; align-items: center; gap: 10px; }
@@ -388,7 +429,12 @@
}
:host-context(html:not([data-theme='dark'])) .board-wrap {
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 61, 187, 0.08);
}
.board-wrap.reviewing {
border-color: var(--nc-warning-soft);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 177, 58, 0.18);
}
/* ============================================================
@@ -490,6 +536,60 @@
.seg-btn.active { background: var(--nc-neon); color: #fff; font-weight: 700; }
/* ============================================================
RESIGN CONFIRM OVERLAY
============================================================ */
.confirm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 600;
}
.confirm-box {
background: var(--nc-surface-solid);
border: 1px solid var(--nc-danger-soft);
padding: 28px 32px;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.confirm-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--nc-text);
}
.confirm-sub {
margin: 0 0 12px;
font-size: 13px;
color: var(--nc-text-muted);
}
.confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.btn-danger-solid {
background: var(--nc-danger) !important;
color: #fff !important;
border-color: var(--nc-danger) !important;
font-weight: 700;
}
.btn-danger-solid:hover { opacity: 0.88; }
/* ============================================================
TOAST
============================================================ */