feat: Premium-Redesign + Fortschritts-UI
- Zentrales Design-Token-System in index.css (Farben/Spacing/Radien/Schatten/Fonts) - Alle Live-Screens auf Tokens: Karten, BottomNav (aktiver Pill), Feed, Auth - Auth: DM Sans entfernt, Akzent vereinheitlicht (Braun), Tokens gescoped - Profil neu: Tagesziel-Ring, Streak-Heatmap, Wochen-Graph, echter Skills-Radar, Eckdaten - Feed-EP-Badge mit Tagesziel-Ring (ProgressRing-Komponente) - Game/Pro als gestaltetes 'Bald verfügbar' (ComingSoon) - Konsumiert neue API: getStats/setDailyGoal, degradiert sauber bei 404 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,13 +6,10 @@
|
||||
.pair-card {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
border-radius: 22px;
|
||||
border-radius: var(--r-lg);
|
||||
overflow: hidden;
|
||||
background: #FDFAF6;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(60, 40, 20, 0.06),
|
||||
0 4px 16px rgba(60, 40, 20, 0.09),
|
||||
0 12px 40px rgba(60, 40, 20, 0.06);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* ── Header (sits below image) ── */
|
||||
@@ -27,14 +24,14 @@
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.09em;
|
||||
color: #6B6556;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pair-points-pill {
|
||||
color: #C4A85A;
|
||||
color: var(--gold);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@@ -54,7 +51,7 @@
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
color: #A89F8C;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -154,7 +151,7 @@
|
||||
}
|
||||
.pair-chip-highlight-target {
|
||||
display: block;
|
||||
font-family: 'Lora', Georgia, serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #3A2515;
|
||||
@@ -163,7 +160,7 @@
|
||||
}
|
||||
.pair-chip-highlight-native {
|
||||
display: block;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
color: #9A7D60;
|
||||
font-weight: 600;
|
||||
@@ -198,7 +195,7 @@
|
||||
background: #F0EDE3;
|
||||
border-radius: 30px;
|
||||
border: 0.5px solid #D8D3C5;
|
||||
font-family: 'Lora', Georgia, serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
color: #7A5C2E;
|
||||
@@ -252,7 +249,7 @@
|
||||
|
||||
/* Sentence text (text-type cards) */
|
||||
.pair-sentence {
|
||||
font-family: 'Lora', Georgia, serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
color: #3A2515;
|
||||
@@ -261,7 +258,7 @@
|
||||
|
||||
/* Question text */
|
||||
.pair-question {
|
||||
font-family: 'Lora', Georgia, serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.65;
|
||||
@@ -271,7 +268,7 @@
|
||||
|
||||
/* Hint — native language translation */
|
||||
.pair-hint {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
color: #A08868;
|
||||
line-height: 1.5;
|
||||
@@ -288,7 +285,7 @@
|
||||
padding: 14px 10px;
|
||||
border-radius: 13px;
|
||||
border: none;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -300,7 +297,7 @@
|
||||
.pair-btn:disabled { opacity: 0.75; cursor: default; }
|
||||
|
||||
.pair-btn-primary {
|
||||
background: #5C3D22;
|
||||
background: var(--accent-strong);
|
||||
color: #F5EDE0;
|
||||
}
|
||||
.pair-btn-locked {
|
||||
@@ -309,15 +306,15 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.pair-btn-yes {
|
||||
background: #3D7055;
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
}
|
||||
.pair-btn-no {
|
||||
background: #A84040;
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.pair-btn-correct { background: #3D7055; color: #fff; }
|
||||
.pair-btn-wrong { background: #A84040; color: #fff; }
|
||||
.pair-btn-correct { background: var(--success); color: #fff; }
|
||||
.pair-btn-wrong { background: var(--danger); color: #fff; }
|
||||
|
||||
/* ── Word option buttons ── */
|
||||
.pair-options {
|
||||
@@ -332,7 +329,7 @@
|
||||
border: 1.5px solid #DDD0BF;
|
||||
background: #FDFAF6;
|
||||
color: #3A2515;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -344,17 +341,17 @@
|
||||
}
|
||||
.pair-option-btn:active:not(:disabled) { transform: scale(0.95); }
|
||||
.pair-option-btn.selected { background: #FFF0DC; border-color: #C4A85A; color: #5C3D22; }
|
||||
.pair-option-btn.correct { background: #3D7055; color: #fff; border-color: #3D7055; }
|
||||
.pair-option-btn.wrong { background: #A84040; color: #fff; border-color: #A84040; }
|
||||
.pair-option-btn.correct { background: var(--success); color: #fff; border-color: var(--success); }
|
||||
.pair-option-btn.wrong { background: var(--danger); color: #fff; border-color: var(--danger); }
|
||||
.pair-option-btn:disabled { cursor: default; }
|
||||
|
||||
/* ── Feedback ── */
|
||||
.pair-feedback {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 12px 0 2px;
|
||||
color: #3A2515;
|
||||
}
|
||||
.pair-feedback.correct { color: #3D7055; }
|
||||
.pair-feedback.wrong { color: #A84040; }
|
||||
.pair-feedback.correct { color: var(--success); }
|
||||
.pair-feedback.wrong { color: var(--danger); }
|
||||
|
||||
Reference in New Issue
Block a user