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

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;