This commit is contained in:
2026-10-24 00:38:55 -04:00
parent cd831940ea
commit cf18b5a99e
10 changed files with 534 additions and 853 deletions

View File

@@ -517,16 +517,199 @@
font-size: 0.82rem;
font-weight: 600;
color: var(--accent-danger);
padding: 6px 12px;
padding: 6px 14px;
border-radius: var(--radius-md);
background: rgba(239, 68, 68, 0.1);
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-reveal-all:hover {
background: rgba(239, 68, 68, 0.18);
}
.badge-revealed {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(245, 158, 11, 0.15);
color: var(--accent-quartile);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
}
.drawer-view-mode-bar {
display: flex;
padding: 6px 16px;
gap: 8px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-subtle);
}
.view-mode-btn {
flex: 1;
padding: 6px 10px;
font-size: 0.8rem;
font-weight: 600;
border-radius: var(--radius-md);
color: var(--text-secondary);
background: transparent;
transition: all var(--transition-fast);
text-align: center;
cursor: pointer;
}
.view-mode-btn.active {
background: var(--bg-primary);
color: var(--text-primary);
font-weight: 700;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.word-card.revealed-card {
opacity: 0.9;
border-style: solid;
border-color: rgba(99, 102, 241, 0.25);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), transparent);
}
.status-chip {
font-size: 0.68rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 6px;
}
.status-chip.found {
background: rgba(16, 185, 129, 0.15);
color: var(--accent-submit);
}
.status-chip.revealed {
background: rgba(245, 158, 11, 0.18);
color: var(--accent-quartile);
}
.quartile-clue {
font-size: 0.75rem;
color: var(--text-secondary);
font-style: italic;
margin-top: 2px;
}
.reveal-confirm-box {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 24px 20px;
text-align: center;
margin: 16px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.reveal-confirm-icon {
font-size: 2.4rem;
}
.reveal-confirm-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.reveal-confirm-desc {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.45;
margin: 0;
max-width: 320px;
}
.reveal-confirm-actions {
display: flex;
gap: 10px;
width: 100%;
max-width: 320px;
margin-top: 6px;
}
.btn-confirm-reveal-yes {
flex: 1;
padding: 10px 14px;
background: var(--accent-danger);
color: #ffffff;
font-weight: 700;
font-size: 0.88rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-confirm-reveal-yes:hover {
opacity: 0.92;
transform: translateY(-1px);
}
.btn-confirm-reveal-cancel {
flex: 1;
padding: 10px 14px;
background: var(--bg-tertiary);
color: var(--text-primary);
font-weight: 600;
font-size: 0.88rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-confirm-reveal-cancel:hover {
background: var(--border-color);
}
.btn-strip-reveal {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: var(--radius-full);
font-size: 0.78rem;
font-weight: 700;
color: var(--accent-quartile);
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-strip-reveal:hover {
background: rgba(245, 158, 11, 0.22);
transform: translateY(-1px);
}
.strip-revealed-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-quartile);
}
/* ==========================================================================
TOAST NOTIFICATIONS
========================================================================== */