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

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

@@ -1,29 +1,29 @@
:root { :root {
color-scheme: light; color-scheme: light;
--font-display: "Trebuchet MS", "Segoe UI", sans-serif; --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--color-bg: #f4f1ea; --color-bg: #f7f7f1;
--color-bg-elevated: #faf7f1; --color-bg-elevated: #fffefa;
--color-bg-muted: #f5eee2; --color-bg-muted: #edf2e9;
--color-surface: rgba(255, 251, 246, 0.94); --color-surface: rgba(255, 255, 251, 0.97);
--color-surface-strong: #fffdfa; --color-surface-strong: #ffffff;
--color-surface-accent: #fff4e5; --color-surface-accent: #eef7ed;
--color-border: rgba(93, 64, 55, 0.12); --color-border: rgba(57, 81, 65, 0.15);
--color-border-strong: rgba(93, 64, 55, 0.24); --color-border-strong: rgba(57, 81, 65, 0.3);
--color-text-primary: #211910; --color-text-primary: #26372e;
--color-text-secondary: #5f4b39; --color-text-secondary: #526258;
--color-text-muted: #7a6857; --color-text-muted: #758277;
--color-text-on-accent: #fffaf4; --color-text-on-accent: #ffffff;
--color-primary: #f8a22b; --color-primary: #3d8b57;
--color-primary-hover: #ea961f; --color-primary-hover: #2f7045;
--color-primary-soft: rgba(248, 162, 43, 0.14); --color-primary-soft: rgba(61, 139, 87, 0.13);
--color-secondary: #78c38a; --color-secondary: #78c38a;
--color-secondary-soft: rgba(120, 195, 138, 0.18); --color-secondary-soft: rgba(120, 195, 138, 0.2);
--color-highlight: #ffcf74; --color-highlight: #b9dfc2;
--color-success: #287d5a; --color-success: #287d5a;
--color-warning: #c9821f; --color-warning: #c9821f;
@@ -31,6 +31,7 @@
--shell-max-width: 1440px; --shell-max-width: 1440px;
--content-max-width: 1200px; --content-max-width: 1200px;
--shell-inset: clamp(12px, 2vw, 22px);
--header-height: 62px; --header-height: 62px;
--nav-height: 52px; --nav-height: 52px;
--footer-height: 46px; --footer-height: 46px;
@@ -45,13 +46,13 @@
--space-10: 40px; --space-10: 40px;
--space-12: 48px; --space-12: 48px;
--radius-sm: 3px; --radius-sm: 2px;
--radius-md: 5px; --radius-md: 4px;
--radius-lg: 8px; --radius-lg: 7px;
--radius-pill: 8px; --radius-pill: 5px;
--shadow-soft: 0 12px 30px rgba(47, 29, 14, 0.08); --shadow-soft: 0 10px 25px rgba(21, 37, 30, 0.06);
--shadow-medium: 0 20px 50px rgba(47, 29, 14, 0.12); --shadow-medium: 0 18px 42px rgba(21, 37, 30, 0.1);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
--transition-fast: 140ms ease; --transition-fast: 140ms ease;
@@ -59,9 +60,9 @@
--color-primary-orange: var(--color-primary); --color-primary-orange: var(--color-primary);
--color-primary-orange-hover: var(--color-primary-hover); --color-primary-orange-hover: var(--color-primary-hover);
--color-primary-orange-light: #f9ece1; --color-primary-orange-light: #edf6ef;
--color-primary-green: #84c6a3; --color-primary-green: #3d8b57;
--color-primary-green-hover: #95d1b0; --color-primary-green-hover: #2f7045;
} }
*, *,
@@ -77,9 +78,7 @@ body,
} }
html { html {
background: background: #f3f5f2;
radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 30%),
linear-gradient(180deg, #f8f2e8 0%, #f3ebdd 100%);
} }
body { body {
@@ -123,8 +122,8 @@ span.button {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--color-primary); background: var(--color-primary);
color: #2b1f14; color: var(--color-text-on-accent);
box-shadow: 0 6px 14px rgba(248, 162, 43, 0.2); box-shadow: 0 5px 12px rgba(38, 91, 56, 0.18);
cursor: pointer; cursor: pointer;
transition: transition:
transform var(--transition-fast), transform var(--transition-fast),
@@ -138,7 +137,7 @@ button:hover,
span.button:hover { span.button:hover {
transform: translateY(-1px); transform: translateY(-1px);
background: var(--color-primary-hover); background: var(--color-primary-hover);
box-shadow: 0 10px 18px rgba(248, 162, 43, 0.24); box-shadow: 0 8px 16px rgba(38, 91, 56, 0.22);
} }
button:active, button:active,

16
frontend/src/components/AppContent.vue
View File

@@ -35,11 +35,11 @@
min-height: 0; min-height: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: #ffffff; background: var(--color-bg);
} }
.app-content__scroll { .app-content__scroll {
background: #ffffff; background: var(--color-bg);
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
@@ -50,7 +50,7 @@
height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */ height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
min-height: 100%; min-height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 20px 18px 16px; padding: 24px var(--shell-inset) 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
@@ -61,13 +61,13 @@
} }
.app-content__route--panel { .app-content__route--panel {
padding: 14px; padding: 18px;
border-radius: 16px; border-radius: var(--radius-lg);
border: 1px solid rgba(93, 64, 55, 0.08); border: 1px solid var(--color-border);
background: #ffffff; background: var(--color-surface);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 10px 22px rgba(93, 64, 55, 0.05); 0 10px 22px rgba(26, 44, 35, 0.045);
} }
/* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */ /* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */

95
frontend/src/components/AppFooter.vue
View File

@@ -87,6 +87,7 @@ export default {
.app-footer { .app-footer {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0; padding: 0;
background: #f0f6ee;
} }
.app-footer__inner { .app-footer__inner {
@@ -94,14 +95,13 @@ export default {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 14px;
min-height: 44px; min-height: 42px;
padding: 6px 12px; padding: 5px var(--shell-inset);
border-radius: 0; border-radius: 0;
background: background: #f0f6ee;
linear-gradient(180deg, rgba(242, 248, 243, 0.96) 0%, rgba(224, 238, 227, 0.98) 100%); border-top: 1px solid rgba(86, 120, 94, 0.2);
border-top: 1px solid rgba(120, 195, 138, 0.28); box-shadow: 0 -4px 12px rgba(42, 68, 48, 0.035);
box-shadow: 0 -6px 18px rgba(93, 64, 55, 0.06);
} }
.footer-system { .footer-system {
@@ -113,9 +113,9 @@ export default {
.footer-brand { .footer-brand {
min-height: 32px; min-height: 32px;
padding: 0 10px 0 8px; padding: 0 10px 0 8px;
background: rgba(120, 195, 138, 0.12); background: rgba(120, 195, 138, 0.16);
border: 1px solid rgba(120, 195, 138, 0.22); border: 1px solid rgba(61, 139, 87, 0.24);
color: #24523a; color: #28643d;
box-shadow: none; box-shadow: none;
} }
@@ -148,9 +148,9 @@ export default {
overflow: auto; overflow: auto;
min-width: 0; min-width: 0;
padding: 4px 8px; padding: 4px 8px;
border-radius: 999px; border-radius: 3px;
background: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(120, 195, 138, 0.16); border: 1px solid rgba(86, 120, 94, 0.16);
} }
.window-bar--empty { .window-bar--empty {
@@ -169,15 +169,15 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 12px; padding: 0 12px;
border-radius: 999px; border-radius: 2px;
background: rgba(255, 255, 255, 0.7); background: #ffffff;
color: var(--color-text-primary); color: var(--color-text-primary);
border: 1px solid rgba(120, 195, 138, 0.18); border: 1px solid rgba(86, 120, 94, 0.2);
box-shadow: none; box-shadow: none;
} }
.dialog-button:hover { .dialog-button:hover {
background: rgba(255, 255, 255, 0.92); background: var(--color-secondary-soft);
} }
.dialog-button>img { .dialog-button>img {
@@ -194,48 +194,54 @@ export default {
gap: 18px; gap: 18px;
white-space: nowrap; white-space: nowrap;
padding-left: 8px; padding-left: 8px;
border-left: 1px solid rgba(120, 195, 138, 0.22); border-left: 1px solid rgba(86, 120, 94, 0.18);
} }
.static-block>a { .static-block>a {
color: #42634e; color: #3f654c;
font-weight: 600; font-weight: 600;
} }
.static-block > a:hover { .static-block > a:hover {
color: #24523a; color: var(--color-primary);
} }
@media (max-width: 960px) { @media (max-width: 960px) {
.app-footer__inner { .app-footer__inner {
flex-wrap: wrap; flex-wrap: nowrap;
min-height: 40px;
gap: 8px;
} }
.footer-system, .footer-brand {
.window-bar, width: 32px;
.static-block { min-width: 32px;
width: 100%; padding: 0;
} }
.footer-system { .footer-brand span,
justify-content: space-between; .footer-caption {
display: none;
} }
.static-block { .static-block {
justify-content: space-between; gap: 10px;
gap: 12px; padding-left: 6px;
padding-left: 0; font-size: 0.8rem;
border-left: 0; }
border-top: 1px solid rgba(120, 195, 138, 0.2);
padding-top: 6px; .static-block > a {
display: inline-flex;
align-items: center;
min-height: 30px;
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.app-footer__inner { .app-footer__inner {
gap: 6px; gap: 7px;
min-height: 0; min-height: 38px;
padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
} }
.footer-system { .footer-system {
@@ -243,28 +249,21 @@ export default {
} }
.window-bar { .window-bar {
display: none;
}
.window-bar:not(.window-bar--empty) {
display: flex; display: flex;
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 4px 6px; padding: 4px 6px;
} }
.window-bar--empty {
justify-content: center;
}
.dialog-button { .dialog-button {
min-height: 30px; min-height: 30px;
} }
.static-block { .static-block {
flex-wrap: nowrap; display: none;
justify-content: space-between;
width: 100%;
gap: 8px;
padding-top: 0;
border-top: 0;
font-size: 0.78rem;
overflow-x: auto;
} }
} }
</style> </style>

93
frontend/src/components/AppHeader.vue
View File

@@ -265,12 +265,11 @@ export default {
.app-header { .app-header {
position: relative; position: relative;
flex: 0 0 auto; flex: 0 0 auto;
padding: 6px 14px; padding: 8px var(--shell-inset);
background: background: #fffefa;
linear-gradient(180deg, rgba(255, 249, 240, 0.96) 0%, rgba(246, 236, 220, 0.98) 100%); color: var(--color-text-primary);
color: #2b1f14; border-bottom: 1px solid rgba(86, 120, 94, 0.18);
border-bottom: 1px solid rgba(93, 64, 55, 0.12); box-shadow: 0 3px 12px rgba(42, 68, 48, 0.045);
box-shadow: 0 5px 14px rgba(93, 64, 55, 0.06);
} }
.app-header__inner { .app-header__inner {
@@ -293,11 +292,10 @@ export default {
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 5px; padding: 5px;
border-radius: 12px; border-radius: 4px;
background: background: var(--color-secondary-soft);
linear-gradient(180deg, rgba(248, 162, 43, 0.18) 0%, rgba(255, 255, 255, 0.76) 100%); border: 1px solid rgba(61, 139, 87, 0.22);
border: 1px solid rgba(248, 162, 43, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
} }
.logo > img { .logo > img {
@@ -314,14 +312,15 @@ export default {
} }
.brand-copy strong { .brand-copy strong {
font-size: 1rem; font-size: 1.02rem;
line-height: 1.1; line-height: 1.1;
color: #3a2a1b; color: #294535;
letter-spacing: 0.015em;
} }
.brand-copy span { .brand-copy span {
font-size: 0.74rem; font-size: 0.74rem;
color: rgba(95, 75, 57, 0.78); color: var(--color-text-muted);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -369,7 +368,7 @@ export default {
gap: 6px; gap: 6px;
margin: 0; margin: 0;
font-size: 0.72rem; font-size: 0.72rem;
color: rgba(95, 75, 57, 0.85); color: var(--color-text-secondary);
} }
.header-lang__label { .header-lang__label {
@@ -381,17 +380,17 @@ export default {
min-width: 7.5rem; min-width: 7.5rem;
max-width: 11rem; max-width: 11rem;
padding: 4px 8px; padding: 4px 8px;
border-radius: 8px; border-radius: 3px;
border: 1px solid rgba(93, 64, 55, 0.18); border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.85); background: #ffffff;
color: #3a2a1b; color: var(--color-text-primary);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.header-lang__select:focus { .header-lang__select:focus {
outline: 2px solid rgba(248, 162, 43, 0.45); outline: 2px solid rgba(120, 195, 138, 0.8);
outline-offset: 1px; outline-offset: 1px;
} }
@@ -407,11 +406,11 @@ export default {
gap: 8px; gap: 8px;
min-height: 28px; min-height: 28px;
padding: 0 10px; padding: 0 10px;
border-radius: 999px; border-radius: 3px;
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
border: 1px solid rgba(93, 64, 55, 0.1); border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.62); background: rgba(238, 247, 237, 0.7);
} }
.status-dot { .status-dot {
@@ -438,23 +437,20 @@ export default {
} }
.status-connected { .status-connected {
background-color: rgba(76, 175, 80, 0.12); background-color: rgba(120, 195, 138, 0.22);
color: #245b2c; color: #28643d;
} }
.status-connecting { .status-connecting {
background-color: rgba(255, 152, 0, 0.12); color: #7d5c21;
color: #8b5e0d;
} }
.status-disconnected { .status-disconnected {
background-color: rgba(244, 67, 54, 0.12); color: #8f3d35;
color: #8f2c27;
} }
.status-error { .status-error {
background-color: rgba(244, 67, 54, 0.12); color: #8f3d35;
color: #8f2c27;
} }
@keyframes pulse { @keyframes pulse {
@@ -465,12 +461,12 @@ export default {
@media (max-width: 960px) { @media (max-width: 960px) {
.app-header { .app-header {
padding: 6px 10px; padding: 6px var(--shell-inset);
} }
.app-header__inner { .app-header__inner {
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: nowrap;
} }
.header-ad { .header-ad {
@@ -499,13 +495,14 @@ export default {
} }
.header-meta { .header-meta {
width: 100%; width: auto;
justify-content: space-between; margin-left: auto;
flex-wrap: wrap; justify-content: flex-end;
flex-wrap: nowrap;
} }
.header-meta__context { .header-meta__context {
flex-wrap: wrap; flex-wrap: nowrap;
} }
.brand-copy span { .brand-copy span {
@@ -544,31 +541,27 @@ export default {
} }
.header-meta { .header-meta {
width: 100%; width: auto;
margin-left: 0;
gap: 8px; gap: 8px;
} }
.header-lang { .header-lang {
width: 100%; width: auto;
justify-content: space-between; justify-content: flex-end;
} }
.header-lang__select { .header-lang__select {
min-width: 8.5rem; min-width: 6.4rem;
max-width: 7.2rem;
} }
.connection-status { .connection-status {
width: 100%; display: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
} }
.status-indicator { .header-lang__label {
min-height: 30px; display: none;
justify-content: center;
padding: 0 8px;
font-size: 0.68rem;
} }
} }
</style> </style>

125
frontend/src/components/AppNavigation.vue
View File

@@ -734,17 +734,14 @@ export default {
max-width: none; max-width: none;
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
padding: 6px 12px; padding: 7px var(--shell-inset);
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0; border-radius: 0;
background: background: #f2f8f0;
linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%); border-top: 1px solid rgba(86, 120, 94, 0.08);
border-top: 1px solid rgba(93, 64, 55, 0.06); border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid rgba(93, 64, 55, 0.18); box-shadow: 0 5px 14px rgba(42, 68, 48, 0.035);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 18px rgba(71, 52, 35, 0.1);
color: var(--color-text-primary); color: var(--color-text-primary);
z-index: 999; z-index: 999;
} }
@@ -783,7 +780,7 @@ ul {
padding: 0 12px; padding: 0 12px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
border-radius: var(--radius-md); border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
transition: background-color 0.25s, color 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s; transition: background-color 0.25s, color 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s;
} }
@@ -799,9 +796,9 @@ ul {
} }
.mainmenuitem:hover { .mainmenuitem:hover {
background-color: rgba(248, 162, 43, 0.16); background-color: var(--color-primary-soft);
border-color: rgba(248, 162, 43, 0.2); border-color: rgba(61, 139, 87, 0.22);
transform: translateY(-1px); transform: none;
} }
.mainmenuitem:hover > span { .mainmenuitem:hover > span {
@@ -809,8 +806,8 @@ ul {
} }
.mainmenuitem--expanded { .mainmenuitem--expanded {
background-color: rgba(248, 162, 43, 0.16); background-color: var(--color-primary-soft);
border-color: rgba(248, 162, 43, 0.2); border-color: rgba(61, 139, 87, 0.22);
} }
.mainmenuitem--disabled, .mainmenuitem--disabled,
@@ -821,14 +818,25 @@ ul {
.mainmenuitem--disabled:hover { .mainmenuitem--disabled:hover {
transform: none; transform: none;
background-color: rgba(248, 162, 43, 0.1); background-color: rgba(61, 139, 87, 0.07);
border-color: rgba(248, 162, 43, 0.15); border-color: rgba(61, 139, 87, 0.14);
} }
.mainmenuitem--active { .mainmenuitem--active {
background: rgba(255, 250, 242, 0.92); background: rgba(61, 139, 87, 0.06);
border-color: rgba(248, 162, 43, 0.34); border-color: transparent;
box-shadow: 0 8px 16px rgba(93, 64, 55, 0.09); box-shadow: none;
color: #225f38;
}
.mainmenuitem--active::after {
position: absolute;
right: 12px;
bottom: -8px;
left: 12px;
height: 2px;
background: var(--color-primary);
content: '';
} }
.mainmenuitem__label { .mainmenuitem__label {
@@ -838,7 +846,7 @@ ul {
.mainmenuitem__caret { .mainmenuitem__caret {
margin-left: 6px; margin-left: 6px;
font-size: 0.7rem; font-size: 0.7rem;
color: rgba(95, 75, 57, 0.7); color: var(--color-text-muted);
} }
.menu-lock-badge { .menu-lock-badge {
@@ -864,11 +872,10 @@ a {
padding-left: 10px; padding-left: 10px;
margin-left: auto; margin-left: auto;
flex: 0 0 auto; flex: 0 0 auto;
border-left: 1px solid rgba(93, 64, 55, 0.12); border-left: 1px solid var(--color-border);
position: relative; position: relative;
z-index: 3; z-index: 3;
background: background: #f2f8f0;
linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%);
} }
.account-menu { .account-menu {
@@ -880,8 +887,8 @@ a {
padding: 0 8px; padding: 0 8px;
gap: 5px; gap: 5px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid rgba(93, 64, 55, 0.15); border: 1px solid var(--color-border);
background: rgba(255, 252, 247, 0.82); background: #ffffff;
color: var(--color-text-secondary); color: var(--color-text-secondary);
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;
@@ -889,8 +896,8 @@ a {
.account-menu__trigger:hover { .account-menu__trigger:hover {
transform: none; transform: none;
border-color: rgba(248, 162, 43, 0.32); border-color: rgba(61, 139, 87, 0.34);
background: rgba(255, 250, 242, 0.92); background: var(--color-primary-soft);
box-shadow: none; box-shadow: none;
} }
@@ -905,7 +912,7 @@ a {
.account-menu__caret { .account-menu__caret {
font-size: 0.64rem; font-size: 0.64rem;
color: rgba(95, 75, 57, 0.72); color: var(--color-text-muted);
} }
.account-menu__content { .account-menu__content {
@@ -915,9 +922,9 @@ a {
min-width: 150px; min-width: 150px;
padding: 6px; padding: 6px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid rgba(93, 64, 55, 0.16); border: 1px solid var(--color-border);
background: rgba(255, 252, 247, 0.99); background: #ffffff;
box-shadow: 0 12px 24px rgba(93, 64, 55, 0.16); box-shadow: 0 12px 24px rgba(21, 37, 30, 0.12);
z-index: 1200; z-index: 1200;
} }
@@ -937,7 +944,7 @@ a {
.account-menu__item:hover { .account-menu__item:hover {
transform: none; transform: none;
background: rgba(248, 162, 43, 0.14); background: var(--color-primary-soft);
color: var(--color-text-primary); color: var(--color-text-primary);
box-shadow: none; box-shadow: none;
} }
@@ -951,7 +958,7 @@ a {
height: 38px; height: 38px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: rgba(120, 195, 138, 0.12); background-color: rgba(120, 195, 138, 0.12);
border: 1px solid rgba(93, 64, 55, 0.1); border: 1px solid var(--color-border);
box-shadow: none; box-shadow: none;
min-height: 0; min-height: 0;
padding: 0; padding: 0;
@@ -962,14 +969,14 @@ a {
.submenu1 { .submenu1 {
position: absolute; position: absolute;
display: block; display: block;
border: 1px solid rgba(93, 64, 55, 0.12); border: 1px solid var(--color-border);
background: rgba(255, 252, 247, 0.99); background: #ffffff;
left: 0; left: 0;
top: calc(100% + 10px); top: calc(100% + 10px);
min-width: 240px; min-width: 240px;
padding: 10px; padding: 10px;
border-radius: var(--radius-lg); border-radius: 4px;
box-shadow: 0 18px 30px rgba(93, 64, 55, 0.14); box-shadow: 0 18px 30px rgba(21, 37, 30, 0.12);
max-height: 0; max-height: 0;
overflow: visible; overflow: visible;
opacity: 0; opacity: 0;
@@ -1003,7 +1010,7 @@ a {
line-height: 1.1em; line-height: 1.1em;
color: var(--color-text-secondary); color: var(--color-text-secondary);
position: relative; position: relative;
border-radius: 14px; border-radius: 3px;
} }
.submenu-label-row { .submenu-label-row {
@@ -1031,7 +1038,7 @@ a {
.submenu1 > li:hover { .submenu1 > li:hover {
color: var(--color-text-primary); color: var(--color-text-primary);
background-color: rgba(248, 162, 43, 0.12); background-color: var(--color-primary-soft);
} }
.menu-icon, .menu-icon,
@@ -1057,14 +1064,14 @@ a {
.submenu2 { .submenu2 {
position: absolute; position: absolute;
display: block; display: block;
background: rgba(255, 252, 247, 0.98); background: #ffffff;
left: calc(100% + 8px); left: calc(100% + 8px);
top: 0; top: 0;
min-width: 230px; min-width: 230px;
padding: 8px; padding: 8px;
border-radius: var(--radius-lg); border-radius: 4px;
border: 1px solid rgba(71, 52, 35, 0.12); border: 1px solid var(--color-border);
box-shadow: 0 14px 24px rgba(93, 64, 55, 0.12); box-shadow: 0 14px 24px rgba(21, 37, 30, 0.12);
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
@@ -1101,14 +1108,14 @@ a {
.submenu1__item--expanded { .submenu1__item--expanded {
color: var(--color-text-primary); color: var(--color-text-primary);
background-color: rgba(248, 162, 43, 0.08); background-color: rgba(61, 139, 87, 0.08);
} }
.submenu2 > li { .submenu2 > li {
padding: 0.75em 0.9em; padding: 0.75em 0.9em;
line-height: 1em; line-height: 1em;
color: var(--color-text-secondary); color: var(--color-text-secondary);
border-radius: 14px; border-radius: 3px;
} }
.submenu2 > li:hover { .submenu2 > li:hover {
@@ -1119,7 +1126,7 @@ a {
.submenu1 > li:focus-visible, .submenu1 > li:focus-visible,
.submenu2 > li:focus-visible { .submenu2 > li:focus-visible {
color: var(--color-text-primary); color: var(--color-text-primary);
background-color: rgba(248, 162, 43, 0.12); background-color: var(--color-primary-soft);
} }
.subsubmenu { .subsubmenu {
@@ -1138,7 +1145,7 @@ a {
padding: 0; padding: 0;
align-items: stretch; align-items: stretch;
gap: 0; gap: 0;
box-shadow: 0 8px 18px rgba(71, 52, 35, 0.12); box-shadow: 0 8px 18px rgba(21, 37, 30, 0.1);
} }
.mobile-nav-bar { .mobile-nav-bar {
@@ -1153,9 +1160,9 @@ a {
.mobile-nav-toggle { .mobile-nav-toggle {
min-height: 38px; min-height: 38px;
padding: 0 12px; padding: 0 12px;
border-radius: 999px; border-radius: 3px;
background: rgba(255, 250, 242, 0.94); background: #ffffff;
border: 1px solid rgba(248, 162, 43, 0.32); border: 1px solid rgba(61, 139, 87, 0.32);
color: var(--color-text-primary); color: var(--color-text-primary);
box-shadow: none; box-shadow: none;
font-size: 0.84rem; font-size: 0.84rem;
@@ -1232,7 +1239,7 @@ a {
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
padding: 6px 10px 10px; padding: 6px 10px 10px;
border-top: 1px solid rgba(93, 64, 55, 0.1); border-top: 1px solid var(--color-border);
} }
.nav-primary > ul { .nav-primary > ul {
@@ -1247,8 +1254,8 @@ a {
padding: 8px 10px 10px; padding: 8px 10px 10px;
margin-left: 0; margin-left: 0;
border-left: 0; border-left: 0;
border-top: 1px solid rgba(93, 64, 55, 0.1); border-top: 1px solid var(--color-border);
background: rgba(246, 236, 220, 0.99); background: #f2f8f0;
} }
.mainmenuitem { .mainmenuitem {
@@ -1256,11 +1263,17 @@ a {
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
padding: 0 14px; padding: 0 14px;
background: rgba(255, 252, 247, 0.68); background: rgba(255, 255, 255, 0.72);
} }
.mainmenuitem--active { .mainmenuitem--active {
background: rgba(255, 250, 242, 0.98); background: #ffffff;
}
.mainmenuitem--active::after {
right: 14px;
bottom: 3px;
left: 14px;
} }
.submenu1, .submenu1,

9
frontend/src/components/AppSectionBar.vue
View File

@@ -174,9 +174,10 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
padding: 16px 18px; padding: 14px 18px;
margin-bottom: 16px; margin-bottom: 16px;
background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 240, 231, 0.94)); background: var(--color-surface);
border-left: 3px solid var(--color-secondary);
} }
.app-section-bar__copy { .app-section-bar__copy {
@@ -189,9 +190,9 @@ export default {
.app-section-bar__eyebrow { .app-section-bar__eyebrow {
display: inline-flex; display: inline-flex;
padding: 4px 10px; padding: 4px 10px;
border-radius: var(--radius-pill); border-radius: var(--radius-sm);
background: var(--color-secondary-soft); background: var(--color-secondary-soft);
color: var(--color-text-secondary); color: #28643d;
font-size: 0.76rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;

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

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