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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -160,7 +160,7 @@ export default {
.vocab-chapter-hero,
.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-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
@@ -253,7 +253,7 @@ export default {
}
.tbl th {
background: rgba(248, 162, 43, 0.12);
background: var(--color-secondary-soft);
color: var(--color-text-secondary);
font-weight: 700;
}

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

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

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

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

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

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

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

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

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

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

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

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