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 {
/* Moderne Farbpalette für bessere Lesbarkeit */
--color-primary-orange: #FF8C5A; /* Helleres, freundliches Orange */
--color-primary-orange-hover: #FFA366; /* Noch helleres Orange für Hover */
--color-primary-orange-light: #FFF4F0; /* Sehr helles Orange für Hover-Hintergründe */
--color-primary-orange: #FFB84D; /* Gelbliches, sanftes Orange */
--color-primary-orange-hover: #FFC966; /* Noch helleres gelbliches Orange für Hover */
--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-hover: #6EE7B7; /* Noch helleres Grün für Hover */
--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;
padding: 5px 5px;
border-bottom: 1px solid #ddd;
background-color: #FF6B35;
background-color: var(--color-primary-orange);
cursor: move;
}
@@ -258,7 +258,7 @@ dialog-footer {
margin-left: 10px;
padding: 5px 10px;
cursor: pointer;
background: #FF6B35;
background: var(--color-primary-orange);
color: #000000;
border: none;
border-radius: 4px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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