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

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

@@ -35,11 +35,11 @@
min-height: 0;
padding: 0;
overflow: hidden;
background: #ffffff;
background: var(--color-bg);
}
.app-content__scroll {
background: #ffffff;
background: var(--color-bg);
height: 100%;
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). */
min-height: 100%;
margin: 0 auto;
padding: 20px 18px 16px;
padding: 24px var(--shell-inset) 20px;
display: flex;
flex-direction: column;
gap: 8px;
@@ -61,13 +61,13 @@
}
.app-content__route--panel {
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(93, 64, 55, 0.08);
background: #ffffff;
padding: 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow:
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) */

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

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

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

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

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

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

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

@@ -174,9 +174,10 @@ export default {
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
padding: 14px 18px;
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 {
@@ -189,9 +190,9 @@ export default {
.app-section-bar__eyebrow {
display: inline-flex;
padding: 4px 10px;
border-radius: var(--radius-pill);
border-radius: var(--radius-sm);
background: var(--color-secondary-soft);
color: var(--color-text-secondary);
color: #28643d;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;

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);
}

53
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;
@@ -344,8 +343,8 @@ export default {
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;
}