Enhance backend configuration and error handling: Update CORS settings to allow dynamic origins, improve RabbitMQ connection handling in chat services, and adjust API server host configuration. Refactor environment variables for better flexibility and add fallback mechanisms for WebSocket and chat services. Update frontend environment files for consistent API and WebSocket URLs.
This commit is contained in:
Torsten Schulz (local)
@@ -1,50 +1,282 @@
|
||||
:root {
|
||||
/* Moderne Farbpalette für bessere Lesbarkeit */
|
||||
--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) */
|
||||
--color-text-secondary: #5D4037; /* Dunkles Braun für sekundären Text/Hover */
|
||||
--color-text-on-orange: #000000; /* Schwarz auf Orange */
|
||||
--color-text-on-green: #000000; /* Schwarz auf Grün */
|
||||
color-scheme: light;
|
||||
|
||||
--font-display: "Trebuchet MS", "Segoe UI", 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-text-primary: #211910;
|
||||
--color-text-secondary: #5f4b39;
|
||||
--color-text-muted: #7a6857;
|
||||
--color-text-on-accent: #fffaf4;
|
||||
|
||||
--color-primary: #f8a22b;
|
||||
--color-primary-hover: #ea961f;
|
||||
--color-primary-soft: rgba(248, 162, 43, 0.14);
|
||||
--color-secondary: #78c38a;
|
||||
--color-secondary-soft: rgba(120, 195, 138, 0.18);
|
||||
--color-highlight: #ffcf74;
|
||||
|
||||
--color-success: #287d5a;
|
||||
--color-warning: #c9821f;
|
||||
--color-danger: #b13b35;
|
||||
|
||||
--shell-max-width: 1440px;
|
||||
--content-max-width: 1200px;
|
||||
--header-height: 62px;
|
||||
--nav-height: 52px;
|
||||
--footer-height: 46px;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 24px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--shadow-soft: 0 12px 30px rgba(47, 29, 14, 0.08);
|
||||
--shadow-medium: 0 20px 50px rgba(47, 29, 14, 0.12);
|
||||
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
|
||||
--transition-fast: 140ms ease;
|
||||
--transition-base: 220ms ease;
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 30%),
|
||||
linear-gradient(180deg, #f8f2e8 0%, #f3ebdd 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-text-primary);
|
||||
background: transparent;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
background: var(--color-primary-orange);
|
||||
color: var(--color-text-on-orange);
|
||||
border: 1px solid var(--color-primary-orange);
|
||||
border-radius: 4px;
|
||||
transition: background 0.05s;
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
span.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 42px;
|
||||
padding: 0 18px;
|
||||
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);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--color-primary-orange-light);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-text-secondary);
|
||||
button:hover,
|
||||
.button:hover,
|
||||
span.button:hover {
|
||||
transform: translateY(-1px);
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: 0 10px 18px rgba(248, 162, 43, 0.24);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
span.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid rgba(120, 195, 138, 0.32);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: var(--shadow-inset);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
padding: 14px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):hover,
|
||||
select:hover,
|
||||
textarea:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(120, 195, 138, 0.65);
|
||||
box-shadow: 0 0 0 4px rgba(120, 195, 138, 0.16);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
inline-size: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
inline-size: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 var(--space-3);
|
||||
font-family: var(--font-display);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 3.4vw, 3.6rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 2vw, 2.4rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.15rem, 1.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
main,
|
||||
.contenthidden {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contentscroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.rc-system {
|
||||
@@ -52,25 +284,13 @@ button:hover {
|
||||
}
|
||||
|
||||
.rc-self {
|
||||
color: #ff0000;
|
||||
font-weight: bold;
|
||||
color: #c0412c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rc-partner {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-primary-orange);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
display: block;
|
||||
color: #2357b5;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight,
|
||||
@@ -80,61 +300,42 @@ h3 {
|
||||
.multiselect__option--highlight[data-selected],
|
||||
.multiselect__option--highlight[data-deselect] {
|
||||
background: none;
|
||||
background-color: var(--color-primary-orange);
|
||||
color: var(--color-text-on-orange);
|
||||
}
|
||||
|
||||
span.button {
|
||||
padding: 2px 2px;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
background: var(--color-primary-orange);
|
||||
color: var(--color-text-on-orange);
|
||||
border: 1px solid var(--color-primary-orange);
|
||||
border-radius: 4px;
|
||||
transition: background 0.05s;
|
||||
border: 1px solid transparent;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
span.button:hover {
|
||||
background: var(--color-primary-orange-light);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-text-secondary);
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.font-color-gender-male {
|
||||
color: #1E90FF;
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
.font-color-gender-female {
|
||||
color: #FF69B4;
|
||||
color: #d14682;
|
||||
}
|
||||
|
||||
.font-color-gender-transmale {
|
||||
color: #00CED1;
|
||||
color: #1f8b9b;
|
||||
}
|
||||
|
||||
.font-color-gender-transfemale {
|
||||
color: #FFB6C1;
|
||||
color: #d78398;
|
||||
}
|
||||
|
||||
.font-color-gender-nonbinary {
|
||||
color: #DAA520;
|
||||
color: #ba7c1f;
|
||||
}
|
||||
|
||||
main,
|
||||
.contenthidden {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@media (max-width: 960px) {
|
||||
:root {
|
||||
--header-height: 56px;
|
||||
--nav-height: auto;
|
||||
--footer-height: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 8vw, 2.8rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.35rem, 5vw, 2rem);
|
||||
}
|
||||
}
|
||||
.contentscroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user