Refactor styles across multiple components to use new color variables
- 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)
@@ -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] {
|
||||
|
||||
Reference in New Issue
Block a user