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

Update color scheme across components to use new primary orange variable

Browse Source 
- Replaced hardcoded orange color values with the new CSS variable for primary orange in multiple components, ensuring consistency in styling.
- Updated styles in DialogWidget, MessageboxWidget, SettingsWidget, SimpleTabs, and various Falukant components to enhance maintainability and readability.
This commit is contained in:
Torsten Schulz (local)
2026-01-23 13:56:19 +01:00
parent 079250fcd7
commit fb821dbf21
11 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/assets/styles.scss
View File

@@ -1,8 +1,8 @@
:root { :root {
/* Moderne Farbpalette für bessere Lesbarkeit */ /* Moderne Farbpalette für bessere Lesbarkeit */
--color-primary-orange: #FF8C5A; /* Helleres, freundliches Orange */ --color-primary-orange: #FFB84D; /* Gelbliches, sanftes Orange */
--color-primary-orange-hover: #FFA366; /* Noch helleres Orange für Hover */ --color-primary-orange-hover: #FFC966; /* Noch helleres gelbliches Orange für Hover */
--color-primary-orange-light: #FFF4F0; /* Sehr helles Orange für Hover-Hintergründe */ --color-primary-orange-light: #FFF8E1; /* Sehr helles gelbliches Orange für Hover-Hintergründe */
--color-primary-green: #4ADE80; /* Helles, freundliches Grün - passt zum Orange */ --color-primary-green: #4ADE80; /* Helles, freundliches Grün - passt zum Orange */
--color-primary-green-hover: #6EE7B7; /* Noch helleres Grün für Hover */ --color-primary-green-hover: #6EE7B7; /* Noch helleres Grün für Hover */
--color-text-primary: #1F2937; /* Dunkles Grau für Haupttext (bessere Lesbarkeit) */ --color-text-primary: #1F2937; /* Dunkles Grau für Haupttext (bessere Lesbarkeit) */

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

@@ -216,7 +216,7 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 5px 5px; padding: 5px 5px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background-color: #FF6B35; background-color: var(--color-primary-orange);
cursor: move; cursor: move;
} }
@@ -258,7 +258,7 @@ dialog-footer {
margin-left: 10px; margin-left: 10px;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: none; border: none;
border-radius: 4px; border-radius: 4px;

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

@@ -133,7 +133,7 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background-color: #FF6B35; background-color: var(--color-primary-orange);
} }
.dialog-icon { .dialog-icon {

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

@@ -253,9 +253,9 @@ export default {
margin-left: 10px; margin-left: 10px;
padding: 5px 12px; padding: 5px 12px;
cursor: pointer; cursor: pointer;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: 1px solid #FF6B35; border: 1px solid var(--color-primary-orange);
border-radius: 4px; border-radius: 4px;
transition: background 0.05s; transition: background 0.05s;
border: 1px solid transparent; border: 1px solid transparent;
@@ -263,8 +263,8 @@ export default {
} }
.contact-button:hover { .contact-button:hover {
background: #FFF4F0; background: var(--color-primary-orange-light);
color: #5D4037; color: var(--color-text-secondary);
border: 1px solid #5D4037; border: 1px solid var(--color-text-secondary);
} }
</style> </style>

2
frontend/src/components/SimpleTabs.vue
View File

@@ -57,7 +57,7 @@ export default {
} }
.simple-tab.active { .simple-tab.active {
background: #FF6B35; background: var(--color-primary-orange);
color: #000; color: #000;
} }
</style> </style>

2
frontend/src/components/falukant/MessagesDialog.vue
View File

@@ -821,7 +821,7 @@ export default {
} }
.messages > li .footer { .messages > li .footer {
color: #FF6B35; color: var(--color-primary-orange);
font-size: 0.8em; font-size: 0.8em;
margin-top: 0.3em; margin-top: 0.3em;
display: flex; display: flex;

2
frontend/src/components/falukant/RevenueSection.vue
View File

@@ -222,7 +222,7 @@
color: #000; color: #000;
} }
.city-price-orange { .city-price-orange {
background-color: #FF6B35; background-color: var(--color-primary-orange);
color: #000; color: #000;
} }
.city-price-red { .city-price-red {

2
frontend/src/components/falukant/SaleSection.vue
View File

@@ -631,7 +631,7 @@
color: #000; color: #000;
} }
.city-price-orange { .city-price-orange {
background-color: #FF6B35; background-color: var(--color-primary-orange);
color: #000; color: #000;
} }
.city-price-red { .city-price-red {

2
frontend/src/views/home/NoLoginView.vue
View File

@@ -185,7 +185,7 @@ export default {
} }
.actions>div>h2 { .actions>div>h2 {
color: #FF6B35; color: var(--color-primary-orange);
} }
.seo-content { .seo-content {

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

@@ -321,9 +321,9 @@ export default {
.btn-current-lesson { .btn-current-lesson {
padding: 12px 24px; padding: 12px 24px;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: 1px solid #FF6B35; border: 1px solid var(--color-primary-orange);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
@@ -491,9 +491,9 @@ export default {
.btn-start { .btn-start {
padding: 8px 16px; padding: 8px 16px;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: 1px solid #FF6B35; border: 1px solid var(--color-primary-orange);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9em; font-size: 0.9em;
@@ -517,9 +517,9 @@ export default {
.btn-edit { .btn-edit {
padding: 6px 12px; padding: 6px 12px;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: 1px solid #FF6B35; border: 1px solid var(--color-primary-orange);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.85em; font-size: 0.85em;

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

@@ -1801,9 +1801,9 @@ export default {
.btn-switch-mode { .btn-switch-mode {
padding: 8px 16px; padding: 8px 16px;
background: #FF6B35; background: var(--color-primary-orange);
color: #000000; color: #000000;
border: 1px solid #FF6B35; border: 1px solid var(--color-primary-orange);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9em; font-size: 0.9em;
@@ -1812,9 +1812,9 @@ export default {
} }
.btn-switch-mode:hover { .btn-switch-mode:hover {
background: #FFF4F0; background: var(--color-primary-orange-light);
color: #5D4037; color: var(--color-text-secondary);
border: 1px solid #5D4037; border: 1px solid var(--color-text-secondary);
} }
.vocab-answer-area.multiple-choice { .vocab-answer-area.multiple-choice {
@@ -2114,7 +2114,7 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background-color: #FF6B35; background-color: var(--color-primary-orange);
} }
.dialog-title { .dialog-title {