torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor styles across multiple components to use new color variables

Browse Source 
- Updated background and border colors in DashboardWidget, DialogWidget, MessageboxWidget, and TermineWidget to use new CSS variables for consistency.
- Changed button colors in various widgets and dialogs to utilize the new primary color variable.
- Adjusted text colors in VocabCourseView, VocabDictionaryView, and VocabTrainerView to align with the new color scheme.
- Replaced hardcoded colors with CSS variables in multiple components for improved maintainability and theming.
This commit is contained in:
Torsten Schulz (local)
2026-08-21 12:45:03 +02:00
parent 016ecfa888
commit a4acc80a84
19 changed files with 171 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/DashboardWidget.vue
View File

@@ -230,8 +230,8 @@ export default {
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--dashboard-widget-bg, #fff); background: var(--dashboard-widget-bg, var(--color-surface));
border: 1px solid var(--dashboard-widget-border, #dee2e6); border: 1px solid var(--dashboard-widget-border, var(--color-border));
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.06);
overflow: hidden; overflow: hidden;
@@ -242,7 +242,7 @@ export default {
opacity: 0.4; opacity: 0.4;
box-shadow: 0 4px 12px rgba(0,0,0,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
cursor: grabbing; cursor: grabbing;
border: 2px dashed #0d6efd; border: 2px dashed var(--color-primary);
} }
.dashboard-widget__titlebar { .dashboard-widget__titlebar {
@@ -250,8 +250,8 @@ export default {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 10px 12px; padding: 10px 12px;
background: var(--color-primary-orange-light, #fff8e1); background: var(--color-surface-accent);
border-bottom: 1px solid var(--color-text-secondary, #dee2e6); border-bottom: 1px solid var(--color-border);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
color: var(--color-text-primary); color: var(--color-text-primary);

16
frontend/src/components/DialogWidget.vue
View File

@@ -201,13 +201,12 @@ export default {
} }
.dialog { .dialog {
background: background: var(--color-surface-strong);
linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 242, 232, 0.98) 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid rgba(93, 64, 55, 0.12); border: 1px solid var(--color-border);
pointer-events: all; pointer-events: all;
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@@ -225,9 +224,8 @@ export default {
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid rgba(93, 64, 55, 0.1); border-bottom: 1px solid var(--color-border);
background: background: var(--color-surface-accent);
linear-gradient(180deg, rgba(248, 162, 43, 0.16) 0%, rgba(255, 255, 255, 0.56) 100%);
cursor: move; cursor: move;
} }
@@ -285,8 +283,8 @@ export default {
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
padding: 14px 20px 18px; padding: 14px 20px 18px;
border-top: 1px solid rgba(93, 64, 55, 0.08); border-top: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.46); background: var(--color-bg-elevated);
} }
.dialog-button { .dialog-button {
@@ -295,7 +293,7 @@ export default {
} }
.dialog-button:hover { .dialog-button:hover {
color: #2b1f14; color: var(--color-primary-hover);
} }
.is-active { .is-active {

14
frontend/src/components/MessageboxWidget.vue
View File

@@ -115,12 +115,12 @@ export default {
} }
.dialog { .dialog {
background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 242, 232, 0.98) 100%); background: var(--color-surface-strong);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid rgba(93, 64, 55, 0.12); border: 1px solid var(--color-border);
pointer-events: all; pointer-events: all;
overflow: hidden; overflow: hidden;
} }
@@ -135,8 +135,8 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid rgba(93, 64, 55, 0.1); border-bottom: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(248, 162, 43, 0.16) 0%, rgba(255, 255, 255, 0.56) 100%); background: var(--color-surface-accent);
} }
.dialog-icon { .dialog-icon {
@@ -175,8 +175,8 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding: 14px 20px 18px; padding: 14px 20px 18px;
border-top: 1px solid rgba(93, 64, 55, 0.08); border-top: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.46); background: var(--color-bg-elevated);
} }
.dialog-button { .dialog-button {
@@ -185,6 +185,6 @@ export default {
} }
.dialog-button:hover { .dialog-button:hover {
color: #2b1f14; color: var(--color-primary-hover);
} }
</style> </style>

19
frontend/src/components/TermineWidget.vue
View File

@@ -81,8 +81,8 @@ export default {
<style scoped> <style scoped>
.termine-widget { .termine-widget {
background: #f8f9fa; background: var(--color-surface);
border: 1px solid #dee2e6; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin: 20px 0; margin: 20px 0;
@@ -90,7 +90,7 @@ export default {
.termine-widget h2 { .termine-widget h2 {
margin: 0 0 15px 0; margin: 0 0 15px 0;
color: #333; color: var(--color-text-primary);
font-size: 1.5em; font-size: 1.5em;
} }
@@ -99,7 +99,7 @@ export default {
.no-termine { .no-termine {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
color: #666; color: var(--color-text-secondary);
} }
.error { .error {
@@ -115,8 +115,8 @@ export default {
.termin-item { .termin-item {
display: flex; display: flex;
gap: 15px; gap: 15px;
background: white; background: var(--color-surface-strong);
border-left: 4px solid #007bff; border-left: 4px solid var(--color-primary);
padding: 15px; padding: 15px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -126,7 +126,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
background: #007bff; background: var(--color-primary);
color: white; color: white;
border-radius: 4px; border-radius: 4px;
min-width: 120px; min-width: 120px;
@@ -140,13 +140,13 @@ export default {
.termin-details h3 { .termin-details h3 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: #333; color: var(--color-text-primary);
font-size: 1.1em; font-size: 1.1em;
} }
.termin-details p { .termin-details p {
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: #666; color: var(--color-text-secondary);
line-height: 1.5; line-height: 1.5;
} }
@@ -157,4 +157,3 @@ export default {
margin-top: 5px; margin-top: 5px;
} }
</style> </style>

6
frontend/src/components/widgets/BirthdayWidget.vue
View File

@@ -80,8 +80,8 @@ export default {
} }
.birthday-item.birthday-today { .birthday-item.birthday-today {
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%); background: var(--color-surface-accent);
border: 1px solid #ffd54f; border: 1px solid rgba(61, 139, 87, 0.24);
} }
.birthday-icon { .birthday-icon {
@@ -107,7 +107,7 @@ export default {
} }
.birthday-highlight { .birthday-highlight {
color: #f57c00; color: var(--color-primary);
font-weight: 600; font-weight: 600;
} }

6
frontend/src/components/widgets/MiniCalendarWidget.vue
View File

@@ -147,8 +147,8 @@ export default {
} }
.mini-calendar-day.today { .mini-calendar-day.today {
background: var(--color-primary-orange, #FFB84D); background: var(--color-secondary);
color: #000; color: var(--color-text-primary);
font-weight: 600; font-weight: 600;
border-radius: 50%; border-radius: 50%;
} }
@@ -194,7 +194,7 @@ export default {
margin-top: 12px; margin-top: 12px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
color: var(--color-primary-orange, #FFB84D); color: var(--color-primary);
text-decoration: none; text-decoration: none;
font-size: 0.85em; font-size: 0.85em;
} }

4
frontend/src/components/widgets/VocabCoursesWidget.vue
View File

@@ -91,7 +91,7 @@ export default {
display: inline-block; display: inline-block;
margin-top: 0.35rem; margin-top: 0.35rem;
font-weight: 600; font-weight: 600;
color: var(--color-primary-orange-dark, #c2410c); color: var(--color-primary);
} }
.vocab-courses-widget__list { .vocab-courses-widget__list {
@@ -156,7 +156,7 @@ export default {
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
background: var(--color-primary-orange, #f97316); background: var(--color-primary);
color: #fff; color: #fff;
} }

2
frontend/src/dialogues/chat/MultiChatDialog.vue
View File

@@ -2439,7 +2439,7 @@ export default {
.send-btn { .send-btn {
padding: 0.3em 1.1em; padding: 0.3em 1.1em;
border-radius: 3px; border-radius: 3px;
background: #1976d2; background: var(--color-primary);
color: #fff; color: #fff;
border: none; border: none;
cursor: pointer; cursor: pointer;

4
frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
View File

@@ -577,7 +577,7 @@ export default {
.image-list li { .image-list li {
display: inline-block; display: inline-block;
padding: 2px; padding: 2px;
border: 1px solid #F9A22C; border: 1px solid var(--color-secondary);
margin: 0 4px 4px 0; margin: 0 4px 4px 0;
} }
@@ -666,7 +666,7 @@ export default {
} }
.activities { .activities {
background-color: #F9A22C; background-color: var(--color-secondary);
margin: -20px -20px 0 -20px; margin: -20px -20px 0 -20px;
height: 26px !important; height: 26px !important;
display: flex !important; display: flex !important;

2
frontend/src/dialogues/standard/ContactDialog.vue
View File

@@ -72,7 +72,7 @@ p {
} }
a { a {
color: #007bff; color: var(--color-primary);
text-decoration: none; text-decoration: none;
} }

2
frontend/src/dialogues/standard/DataPrivacyDialog.vue
View File

@@ -60,7 +60,7 @@ p {
} }
a { a {
color: #007bff; color: var(--color-primary);
text-decoration: none; text-decoration: none;
} }

2
frontend/src/dialogues/standard/ImprintDialog.vue
View File

@@ -60,7 +60,7 @@ p {
} }
a { a {
color: #007bff; color: var(--color-primary);
text-decoration: none; text-decoration: none;
} }

4
frontend/src/views/social/VocabChapterView.vue
View File

@@ -160,7 +160,7 @@ export default {
.vocab-chapter-hero, .vocab-chapter-hero,
.box { .box {
background: linear-gradient(180deg, rgba(255, 252, 247, 0.97), rgba(250, 244, 235, 0.95)); background: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
@@ -253,7 +253,7 @@ export default {
} }
.tbl th { .tbl th {
background: rgba(248, 162, 43, 0.12); background: var(--color-secondary-soft);
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-weight: 700; font-weight: 700;
} }

10
frontend/src/views/social/VocabCourseListView.vue
View File

@@ -497,8 +497,8 @@ export default {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18); box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
cursor: pointer; cursor: pointer;
font-size: 0.9em; font-size: 0.9em;
white-space: nowrap; white-space: nowrap;
@@ -507,18 +507,18 @@ export default {
.course-actions button:hover { .course-actions button:hover {
background: var(--color-primary-hover); background: var(--color-primary-hover);
box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22); box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
} }
.btn-enroll { .btn-enroll {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: #2b1f14 !important; color: var(--color-text-on-accent) !important;
border-color: transparent !important; border-color: transparent !important;
} }
.btn-continue { .btn-continue {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: #2b1f14 !important; color: var(--color-text-on-accent) !important;
border-color: transparent !important; border-color: transparent !important;
} }

72
frontend/src/views/social/VocabCourseView.vue
View File

@@ -1080,9 +1080,9 @@ export default {
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: var(--radius-sm);
background: rgba(248, 162, 43, 0.14); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@@ -1228,9 +1228,10 @@ export default {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: var(--radius-sm);
background: rgba(93, 64, 55, 0.08); background: rgba(238, 247, 237, 0.82);
color: #6d5446; border: 1px solid rgba(61, 139, 87, 0.14);
color: #365845;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
} }
@@ -1248,9 +1249,9 @@ export default {
gap: 16px; gap: 16px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 16px 18px; padding: 16px 18px;
border-radius: 14px; border-radius: var(--radius-lg);
border: 1px solid rgba(102, 153, 126, 0.38); border: 1px solid rgba(61, 139, 87, 0.24);
background: linear-gradient(135deg, rgba(232, 247, 238, 0.95), rgba(255, 251, 240, 0.8)); background: #eef8ee;
} }
.course-srs-plan__eyebrow { .course-srs-plan__eyebrow {
@@ -1260,7 +1261,7 @@ export default {
font-weight: 800; font-weight: 800;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
color: #4f7b60; color: #357148;
} }
.course-srs-plan h4, .course-srs-plan h4,
@@ -1316,8 +1317,8 @@ export default {
} }
.course-flow-card__badge--block { .course-flow-card__badge--block {
background: rgba(248, 162, 43, 0.18); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
} }
.course-flow-card__badge--intensive { .course-flow-card__badge--intensive {
@@ -1419,19 +1420,19 @@ export default {
.btn-current-lesson { .btn-current-lesson {
padding: 12px 24px; padding: 12px 24px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
font-weight: 600; font-weight: 600;
transition: background 0.2s, box-shadow 0.2s; transition: background 0.2s, box-shadow 0.2s;
box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18); box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
} }
.btn-current-lesson:hover { .btn-current-lesson:hover {
background: var(--color-primary-hover); background: var(--color-primary-hover);
box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22); box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
} }
.lesson-cards { .lesson-cards {
@@ -1441,7 +1442,7 @@ export default {
.lesson-number { .lesson-number {
font-weight: 600; font-weight: 600;
color: #666; color: var(--color-text-secondary);
font-size: 0.95em; font-size: 0.95em;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -1449,7 +1450,7 @@ export default {
min-width: 48px; min-width: 48px;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.12); background: var(--color-secondary-soft);
} }
.lesson-card { .lesson-card {
@@ -1484,13 +1485,13 @@ export default {
} }
.lesson-chip--mode { .lesson-chip--mode {
background: rgba(248, 162, 43, 0.16); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
} }
.lesson-chip--block { .lesson-chip--block {
background: rgba(93, 64, 55, 0.09); background: var(--color-bg-muted);
color: #6d5446; color: var(--color-text-secondary);
} }
.lesson-chip--intensive { .lesson-chip--intensive {
@@ -1704,19 +1705,21 @@ export default {
.course-today-plan { .course-today-plan {
margin-bottom: 20px; margin-bottom: 20px;
padding: 16px 18px; padding: 16px 18px;
border-radius: 12px; border-radius: var(--radius-lg);
background: rgba(255, 248, 235, 0.75); background: rgba(255, 255, 251, 0.92);
border: 1px solid rgba(212, 184, 150, 0.45); border: 1px solid var(--color-border);
} }
.course-today-plan--soft { .course-today-plan--soft {
background: rgba(238, 247, 237, 0.64);
border-color: rgba(61, 139, 87, 0.26);
border-style: dashed; border-style: dashed;
opacity: 0.95; opacity: 0.95;
} }
.course-today-plan--empty { .course-today-plan--empty {
background: rgba(250, 250, 250, 0.85); background: rgba(248, 250, 247, 0.88);
border-color: var(--color-border, #e0dcd6); border-color: var(--color-border);
} }
.course-today-plan__title { .course-today-plan__title {
@@ -1763,26 +1766,27 @@ export default {
font-weight: 700; font-weight: 700;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: #8a6d3b; color: #3c754d;
} }
.course-today-plan__lesson-title { .course-today-plan__lesson-title {
font-weight: 600; font-weight: 600;
color: #333; color: var(--color-text-primary);
font-size: 0.95rem; font-size: 0.95rem;
} }
.course-today-plan__lesson-meta { .course-today-plan__lesson-meta {
font-size: 0.8rem; font-size: 0.8rem;
color: #888; color: var(--color-text-muted);
} }
.course-today-plan__action { .course-today-plan__action {
flex-shrink: 0; flex-shrink: 0;
padding: 6px 12px; padding: 6px 12px;
border-radius: 8px; border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong, #c9c2b8); border: 1px solid var(--color-border-strong);
background: rgba(255, 255, 255, 0.95); background: #ffffff;
color: var(--color-text-primary);
font-size: 0.82rem; font-size: 0.82rem;
cursor: pointer; cursor: pointer;
} }
@@ -1792,8 +1796,8 @@ export default {
} }
.course-today-plan__action:hover { .course-today-plan__action:hover {
border-color: #b8a896; border-color: var(--color-primary);
background: #fff; background: var(--color-primary-soft);
} }
.review-badge[title] { .review-badge[title] {

4
frontend/src/views/social/VocabDictionaryView.vue
View File

@@ -250,8 +250,8 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.14); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;

4
frontend/src/views/social/VocabLanguageView.vue
View File

@@ -164,8 +164,8 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.14); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;

152
frontend/src/views/social/VocabLessonView.vue
View File

@@ -4621,8 +4621,8 @@ export default {
} }
.language-assistant-card--focused { .language-assistant-card--focused {
border-color: var(--color-primary-orange); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(248, 162, 43, 0.18); box-shadow: 0 0 0 3px rgba(61, 139, 87, 0.18);
} }
.language-assistant-card__header { .language-assistant-card__header {
@@ -4680,8 +4680,8 @@ export default {
} }
.assistant-mode-button.active { .assistant-mode-button.active {
border-color: var(--color-primary-orange); border-color: var(--color-primary);
background: rgba(248, 162, 43, 0.16); background: var(--color-secondary-soft);
} }
.language-assistant-chat { .language-assistant-chat {
@@ -4712,7 +4712,7 @@ export default {
} }
.assistant-message--assistant { .assistant-message--assistant {
background: rgba(248, 162, 43, 0.08); background: var(--color-surface-accent);
} }
.assistant-message--user { .assistant-message--user {
@@ -4724,17 +4724,17 @@ export default {
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
padding: 12px 14px; padding: 12px 14px;
border: 1px solid rgba(248, 162, 43, 0.35); border: 1px solid rgba(61, 139, 87, 0.35);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: rgba(248, 162, 43, 0.1); background: var(--color-secondary-soft);
} }
.language-assistant-waiting__spinner { .language-assistant-waiting__spinner {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-top: 2px; margin-top: 2px;
border: 3px solid rgba(248, 162, 43, 0.28); border: 3px solid rgba(61, 139, 87, 0.28);
border-top-color: var(--color-primary-orange); border-top-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
animation: assistant-spin 0.9s linear infinite; animation: assistant-spin 0.9s linear infinite;
flex: 0 0 auto; flex: 0 0 auto;
@@ -4785,10 +4785,10 @@ export default {
.btn-reset-lesson { .btn-reset-lesson {
flex-shrink: 0; flex-shrink: 0;
padding: 8px 14px; padding: 8px 14px;
border: 1px solid rgba(140, 90, 60, 0.35); border: 1px solid var(--color-border-strong);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 248, 240, 0.95); background: var(--color-bg-elevated);
color: #6b4420; color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@@ -4805,14 +4805,14 @@ export default {
gap: 16px; gap: 16px;
padding: 18px 18px 16px; padding: 18px 18px 16px;
margin-bottom: 16px; margin-bottom: 16px;
background: linear-gradient(135deg, #fff8eb 0%, #f7efe2 100%); background: var(--color-surface-accent);
border: 1px solid rgba(160, 120, 40, 0.18); border: 1px solid rgba(61, 139, 87, 0.18);
border-radius: 12px; border-radius: 12px;
} }
.lesson-overview-text { .lesson-overview-text {
margin: 8px 0 0; margin: 8px 0 0;
color: #5b4b2f; color: var(--color-text-secondary);
} }
.lesson-meta-grid { .lesson-meta-grid {
@@ -4886,7 +4886,7 @@ export default {
display: block; display: block;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 0.82rem; font-size: 0.82rem;
color: #7a6848; color: var(--color-text-muted);
} }
.lesson-intensity-banner { .lesson-intensity-banner {
@@ -4933,7 +4933,7 @@ export default {
} }
.lesson-overview-more { .lesson-overview-more {
border-top: 1px solid rgba(160, 120, 40, 0.18); border-top: 1px solid var(--color-border);
padding-top: 14px; padding-top: 14px;
} }
@@ -4941,7 +4941,7 @@ export default {
.lesson-deepen-section__summary { .lesson-deepen-section__summary {
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
color: #5f4313; color: var(--color-primary);
} }
.lesson-overview-more__grid { .lesson-overview-more__grid {
@@ -4960,9 +4960,9 @@ export default {
.didactic-card, .didactic-card,
.cultural-notes { .cultural-notes {
padding: 18px; padding: 18px;
background: #f8f9fa; background: var(--color-bg-elevated);
border-radius: 12px; border-radius: 12px;
border: 1px solid #e7e7e7; border: 1px solid var(--color-border);
} }
.lesson-intro-combined { .lesson-intro-combined {
@@ -4996,8 +4996,8 @@ export default {
.pattern-item { .pattern-item {
padding: 12px 14px; padding: 12px 14px;
border-left: 4px solid #d2831f; border-left: 4px solid var(--color-secondary);
background: #fff; background: var(--color-surface-strong);
border-radius: 8px; border-radius: 8px;
} }
@@ -5020,22 +5020,22 @@ export default {
.vocab-prep-pass { .vocab-prep-pass {
margin-bottom: 14px; margin-bottom: 14px;
background: linear-gradient(180deg, #fffefd 0%, #fff7ec 100%); background: var(--color-surface-accent);
border: 1px solid rgba(210, 131, 31, 0.18); border: 1px solid rgba(61, 139, 87, 0.18);
} }
.vocab-prep-pass__step { .vocab-prep-pass__step {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 0.9rem; font-size: 0.9rem;
color: #7a6848; color: var(--color-text-secondary);
font-weight: 600; font-weight: 600;
} }
.vocab-prep-card { .vocab-prep-card {
margin-top: 12px; margin-top: 12px;
padding: 16px 18px; padding: 16px 18px;
background: #fff; background: var(--color-surface-strong);
border: 1px solid #e5dccf; border: 1px solid var(--color-border);
border-radius: 10px; border-radius: 10px;
} }
@@ -5056,18 +5056,18 @@ export default {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #8a7658; color: var(--color-text-muted);
} }
.vocab-prep-card__target { .vocab-prep-card__target {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
color: #1f1a16; color: var(--color-text-primary);
} }
.vocab-prep-card__gloss { .vocab-prep-card__gloss {
font-size: 1rem; font-size: 1rem;
color: #6a5a44; color: var(--color-text-secondary);
} }
.vocab-prep-pass .btn-prep-pass { .vocab-prep-pass .btn-prep-pass {
@@ -5083,9 +5083,9 @@ export default {
.lesson-primary-flow { .lesson-primary-flow {
margin-top: 18px; margin-top: 18px;
padding: 18px; padding: 18px;
border: 1px solid rgba(210, 131, 31, 0.2); border: 1px solid rgba(61, 139, 87, 0.2);
background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(255, 246, 233, 0.94)); background: var(--color-surface-accent);
box-shadow: 0 14px 30px rgba(194, 141, 61, 0.08); box-shadow: 0 14px 30px rgba(42, 90, 56, 0.06);
} }
.lesson-primary-flow__header { .lesson-primary-flow__header {
@@ -5096,8 +5096,8 @@ export default {
display: inline-flex; display: inline-flex;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.16); background: var(--color-secondary-soft);
color: #7a4b00; color: #28643d;
font-size: 0.76rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@@ -5106,19 +5106,19 @@ export default {
.lesson-primary-flow__title { .lesson-primary-flow__title {
margin: 10px 0 6px; margin: 10px 0 6px;
color: #2d2114; color: var(--color-text-primary);
} }
.lesson-primary-flow__intro { .lesson-primary-flow__intro {
margin: 0; margin: 0;
color: #6b5535; color: var(--color-text-secondary);
} }
.lesson-grammar-impulse { .lesson-grammar-impulse {
margin-top: 16px; margin-top: 16px;
padding: 16px 18px; padding: 16px 18px;
border: 1px solid rgba(121, 100, 56, 0.18); border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.72); background: var(--color-surface);
} }
.lesson-grammar-impulse__header { .lesson-grammar-impulse__header {
@@ -5130,12 +5130,12 @@ export default {
.lesson-grammar-impulse__header h4 { .lesson-grammar-impulse__header h4 {
margin: 0; margin: 0;
color: #3f2d14; color: var(--color-text-primary);
} }
.lesson-grammar-impulse__intro { .lesson-grammar-impulse__intro {
margin: 0 0 12px; margin: 0 0 12px;
color: #6b5535; color: var(--color-text-secondary);
} }
.lesson-grammar-impulse__list { .lesson-grammar-impulse__list {
@@ -5146,8 +5146,8 @@ export default {
.lesson-grammar-impulse__item { .lesson-grammar-impulse__item {
padding: 12px 14px; padding: 12px 14px;
border-radius: 10px; border-radius: 10px;
background: rgba(255, 249, 240, 0.88); background: var(--color-surface-accent);
border: 1px solid rgba(121, 100, 56, 0.12); border: 1px solid rgba(61, 139, 87, 0.14);
} }
.lesson-grammar-impulse__item p { .lesson-grammar-impulse__item p {
@@ -5176,7 +5176,7 @@ export default {
.speaking-cue, .speaking-cue,
.pattern-drill-hint { .pattern-drill-hint {
margin-top: 8px; margin-top: 8px;
color: #66553a; color: var(--color-text-secondary);
font-style: italic; font-style: italic;
} }
@@ -5385,8 +5385,8 @@ export default {
.exercise-grammar-card { .exercise-grammar-card {
margin-bottom: 16px; margin-bottom: 16px;
padding: 16px 18px; padding: 16px 18px;
border: 1px solid rgba(113, 94, 54, 0.18); border: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(255, 250, 241, 0.98), rgba(255, 246, 229, 0.94)); background: var(--color-surface-accent);
} }
.exercise-grammar-card__header { .exercise-grammar-card__header {
@@ -5404,8 +5404,8 @@ export default {
.exercise-grammar-card__item { .exercise-grammar-card__item {
padding: 12px 14px; padding: 12px 14px;
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.72); background: var(--color-surface-strong);
border: 1px solid rgba(113, 94, 54, 0.12); border: 1px solid var(--color-border);
} }
.exercise-grammar-card__item p { .exercise-grammar-card__item p {
@@ -5513,7 +5513,7 @@ export default {
} }
.option-label:hover { .option-label:hover {
background-color: #f5f5f5; background-color: var(--color-primary-soft);
} }
.option-label input[type="radio"] { .option-label input[type="radio"] {
@@ -5545,19 +5545,19 @@ export default {
.exercise-item button { .exercise-item button {
padding: 10px 20px; padding: 10px 20px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
margin-top: 10px; margin-top: 10px;
transition: background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, box-shadow 0.2s;
box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18); box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
} }
.exercise-item button:hover:not(:disabled) { .exercise-item button:hover:not(:disabled) {
background: var(--color-primary-hover); background: var(--color-primary-hover);
box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22); box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
} }
.exercise-item button:disabled { .exercise-item button:disabled {
@@ -5629,7 +5629,7 @@ export default {
} }
.tab-button.active { .tab-button.active {
color: #2b1f14; color: var(--color-text-on-accent);
background: var(--color-primary); background: var(--color-primary);
border-bottom-color: var(--color-primary); border-bottom-color: var(--color-primary);
font-weight: bold; font-weight: bold;
@@ -5673,7 +5673,7 @@ export default {
.vocab-list__summary { .vocab-list__summary {
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
color: #5f4313; color: var(--color-primary);
margin-bottom: 12px; margin-bottom: 12px;
} }
@@ -5683,8 +5683,8 @@ export default {
.vocab-list--overview { .vocab-list--overview {
padding: 14px 16px; padding: 14px 16px;
background: rgba(255, 255, 255, 0.86); background: var(--color-surface);
border: 1px solid #eadfcf; border: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
} }
@@ -5726,21 +5726,21 @@ export default {
gap: 12px 16px; gap: 12px 16px;
margin-top: 14px; margin-top: 14px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid #eadfcf; border-top: 1px solid var(--color-border);
} }
.vocab-items-pager__btn { .vocab-items-pager__btn {
padding: 6px 14px; padding: 6px 14px;
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid #c9b896; border: 1px solid var(--color-border-strong);
border-radius: 8px; border-radius: 8px;
background: #faf8f3; background: var(--color-surface-strong);
color: #333; color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
} }
.vocab-items-pager__btn:hover:not(:disabled) { .vocab-items-pager__btn:hover:not(:disabled) {
background: #f0ebe0; background: var(--color-primary-soft);
} }
.vocab-items-pager__btn:disabled { .vocab-items-pager__btn:disabled {
@@ -5784,10 +5784,10 @@ export default {
.vocab-trainer-section { .vocab-trainer-section {
margin: 20px 0; margin: 20px 0;
padding: 18px; padding: 18px;
background: #fff; background: var(--color-surface);
border: 1px solid rgba(210, 131, 31, 0.2); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 20px rgba(210, 131, 31, 0.08); box-shadow: 0 10px 20px rgba(42, 90, 56, 0.06);
} }
.vocab-trainer-section h4 { .vocab-trainer-section h4 {
@@ -5822,7 +5822,7 @@ export default {
.trainer-progress-row { .trainer-progress-row {
font-size: 0.92em; font-size: 0.92em;
color: #5b4636; color: var(--color-text-secondary);
} }
.vocab-trainer-start { .vocab-trainer-start {
@@ -5832,13 +5832,13 @@ export default {
.btn-start-trainer { .btn-start-trainer {
padding: 10px 20px; padding: 10px 20px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
margin-top: 10px; margin-top: 10px;
box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18); box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
} }
.btn-start-trainer:hover { .btn-start-trainer:hover {
@@ -5887,7 +5887,7 @@ export default {
.mode-badge.mode-active { .mode-badge.mode-active {
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
font-weight: bold; font-weight: bold;
} }
@@ -5996,13 +5996,13 @@ export default {
.choice-button:hover { .choice-button:hover {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(248, 162, 43, 0.08); background: var(--color-primary-soft);
} }
.choice-button.selected { .choice-button.selected {
border-color: var(--color-primary); border-color: var(--color-primary);
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
} }
.vocab-input { .vocab-input {
@@ -6016,7 +6016,7 @@ export default {
.btn-check { .btn-check {
padding: 10px 20px; padding: 10px 20px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@@ -6091,7 +6091,7 @@ export default {
.vocab-next button { .vocab-next button {
padding: 10px 20px; padding: 10px 20px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@@ -6124,7 +6124,7 @@ export default {
.btn-continue { .btn-continue {
padding: 12px 24px; padding: 12px 24px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
font-size: 1.1em; font-size: 1.1em;
@@ -6169,7 +6169,7 @@ export default {
.btn-record { .btn-record {
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
} }
.btn-record:hover:not(:disabled) { .btn-record:hover:not(:disabled) {
@@ -6193,7 +6193,7 @@ export default {
.btn-check { .btn-check {
padding: 10px 20px; padding: 10px 20px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@@ -6338,7 +6338,7 @@ export default {
.dialog-button { .dialog-button {
padding: 8px 16px; padding: 8px 16px;
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;

8
frontend/src/views/social/VocabTrainerView.vue
View File

@@ -169,8 +169,8 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.14); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@@ -282,8 +282,8 @@ export default {
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(248, 162, 43, 0.12); background: var(--color-secondary-soft);
color: #8a5411; color: #28643d;
font-weight: 700; font-weight: 700;
} }