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

Refactor styles and improve UI consistency across components

Browse Source 
- Updated color variables in styles.scss for a more cohesive color scheme.
- Adjusted padding, margins, and border-radius in AppContent, AppFooter, AppHeader, AppNavigation, AppSectionBar, LoggedInView, and NoLoginView for better spacing and alignment.
- Changed background gradients to solid colors for a cleaner look.
- Enhanced hover effects and button styles for improved interactivity.
- Standardized text colors and borders to align with the new color palette.
This commit is contained in:
Torsten Schulz (local)
2026-08-21 12:05:59 +02:00
parent 62624502e2
commit 7797d69a20
8 changed files with 238 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/views/home/LoggedInView.vue
View File

@@ -387,9 +387,8 @@ export default {
gap: 20px;
padding: 26px;
margin-bottom: 18px;
background:
radial-gradient(circle at top right, rgba(248, 162, 43, 0.18), transparent 28%),
linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(250, 243, 233, 0.98) 100%);
background: var(--color-surface);
border-left: 3px solid var(--color-secondary);
}
.dashboard-hero__copy {
@@ -400,9 +399,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: 2px;
background: var(--color-secondary-soft);
color: #28643d;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
@@ -512,8 +511,7 @@ export default {
padding: 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background:
linear-gradient(180deg, rgba(255, 252, 247, 0.94) 0%, rgba(248, 241, 231, 0.96) 100%);
background: var(--color-surface);
box-shadow: var(--shadow-soft);
}
@@ -556,7 +554,7 @@ export default {
}
.dashboard-grid-cell.drop-target {
outline: 2px dashed rgba(248, 162, 43, 0.82);
outline: 2px dashed rgba(61, 139, 87, 0.72);
outline-offset: 4px;
border-radius: var(--radius-md);
}

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

@@ -261,10 +261,10 @@ export default {
flex: 0 0 clamp(180px, 22%, 280px);
justify-content: center;
align-items: stretch;
background: linear-gradient(180deg, #fff5e8 0%, #fce7ca 100%);
border: 1px solid rgba(248, 162, 43, 0.16);
background: #eaf0eb;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 10px 24px rgba(93, 64, 55, 0.08);
box-shadow: 0 10px 24px rgba(21, 37, 30, 0.06);
overflow: hidden;
align-self: center;
height: clamp(320px, 68vh, 560px);
@@ -287,9 +287,8 @@ export default {
height: calc(40% - 0.5rem);
max-height: calc(40% - 0.5rem);
min-height: 0;
background:
linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(248, 240, 231, 0.96) 100%);
color: #5D4037;
background: var(--color-surface);
color: var(--color-text-primary);
display: flex;
flex-direction: column;
overflow: auto;
@@ -321,9 +320,9 @@ export default {
display: inline-block;
margin-bottom: 0.7rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: rgba(248, 162, 43, 0.12);
color: #8a5411;
border-radius: 2px;
background: var(--color-secondary-soft);
color: #28643d;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
@@ -340,12 +339,12 @@ export default {
width: 100%;
}
.story-highlight {
.story-highlight {
padding: 1rem 1.1rem;
margin: 0.8rem 0 1rem;
border-radius: var(--radius-lg);
background: rgba(248, 162, 43, 0.08);
border: 1px solid rgba(248, 162, 43, 0.12);
background: var(--color-primary-soft);
border: 1px solid rgba(61, 139, 87, 0.18);
}
/* Collapsed story panel to save vertical space while keeping content in DOM for SEO */
@@ -358,7 +357,7 @@ export default {
margin-top: 0.6rem;
background: transparent;
border: none;
color: #8a5411;
color: var(--color-primary);
font-weight: 700;
cursor: pointer;
padding: 0.2rem 0.4rem;
@@ -423,8 +422,8 @@ export default {
.oauth-section {
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255, 248, 238, 0.95), rgba(255, 243, 229, 0.95));
border: 1px solid rgba(248, 162, 43, 0.14);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
display: grid;
gap: 0.8rem;
}
@@ -448,13 +447,13 @@ export default {
.oauth-provider-button {
padding: 0.72rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(93, 64, 55, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 236, 0.94));
color: #4b342e;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: #ffffff;
color: var(--color-text-primary);
font-weight: 700;
text-align: left;
box-shadow: 0 6px 16px rgba(93, 64, 55, 0.06);
box-shadow: 0 6px 16px rgba(21, 37, 30, 0.04);
}
.oauth-provider-button:hover:not(:disabled) {
@@ -475,7 +474,7 @@ export default {
}
.oauth-provider-button--keycloak {
border-left: 4px solid #d67f2f;
border-left: 4px solid var(--color-primary);
}
.oauth-provider-button--ory {
@@ -541,7 +540,7 @@ export default {
margin: 0;
padding: 0;
flex: 0 0 16px;
accent-color: var(--color-primary-orange);
accent-color: var(--color-primary);
box-shadow: none;
}
@@ -549,9 +548,9 @@ export default {
max-width: 1000px;
margin: 24px auto 0 auto;
padding: 0 16px 40px 16px;
color: #5D4037;
background-color: #FFF4F0;
border: 1px solid rgba(0, 0, 0, 0.06);
color: var(--color-text-primary);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 4px;
}
@@ -563,7 +562,7 @@ export default {
.seo-content h2 {
font-size: 20px;
margin: 18px 0 6px 0;
color: #444;
color: var(--color-text-primary);
}
.seo-content p {
@@ -580,8 +579,8 @@ export default {
max-height: 200px;
overflow: auto;
padding-right: 8px;
background-color: #fdf1db;
border: 1px solid rgba(0, 0, 0, 0.05);
background-color: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: 4px;
margin: 12px 0;
}