Entwicklung/xxx-sphere-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Light- und Darkmode hinzugefügt
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Mario Störmer
2026-04-28 14:07:32 +02:00
parent 34e5fcd777
commit 843acea652
75 changed files with 830 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bin/main/static/css/community.css
View File

@@ -20,8 +20,6 @@
.compose-action-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:none}
.compose-action-btn.active{border-color:var(--color-primary);color:var(--color-primary)}
label.compose-action-btn{display:inline-flex;align-items:center}
.multi-toggle{font-size:0.85rem;display:flex;align-items:center;gap:0.4rem}
.privacy-toggle{font-size:0.85rem;display:flex;align-items:center;gap:0.4rem}
/* ── Umfrage-Compose ── */
.umfrage-options{margin-top:0.5rem}

71
bin/main/static/css/style.css
View File

@@ -35,7 +35,7 @@ p {
padding: 2.5rem;
width: 100%;
max-width: 380px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
gap: 0;
}
@@ -93,7 +93,7 @@ button, .btn {
}
button:hover:not(:disabled), .btn:hover {
background: #c73652;
background: var(--btn-primary-hover);
}
button:disabled {
@@ -117,7 +117,7 @@ button.secondary {
}
button.secondary:hover {
background: #1a4a8a;
background: var(--btn-secondary-hover);
}
/* ── Messages ── */
@@ -131,19 +131,19 @@ button.secondary:hover {
}
.message.error {
background: #3d0f1a;
background: var(--msg-error-bg);
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.message.warning {
background: #3a2c0a;
border: 2px solid #f5c518;
color: #f5c518;
background: var(--msg-warning-bg);
border: 2px solid var(--msg-warning-text);
color: var(--msg-warning-text);
}
.message.success {
background: #0f3d1a;
background: var(--msg-success-bg);
border: 1px solid var(--color-success);
color: var(--color-success);
}
@@ -180,7 +180,7 @@ body.app {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
@@ -205,7 +205,7 @@ body.app {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -338,7 +338,7 @@ body.app {
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
background: var(--overlay-bg);
z-index: 90;
}
@@ -375,7 +375,7 @@ body.app {
overflow-y: auto;
}
.sidebar-wrapper.open { transform: translateX(0); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5); }
.sidebar-wrapper.open { transform: translateX(0); box-shadow: -4px 0 20px var(--overlay-bg); }
.sidebar {
flex: none;
@@ -414,7 +414,7 @@ body.app {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
align-self: flex-start;
@@ -508,7 +508,7 @@ body.app {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
padding: 0.5rem 0;
}
.sidebar-footer ul {
@@ -572,7 +572,7 @@ body.app {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 0.75rem;
@@ -648,7 +648,7 @@ body.app {
border: 1px solid var(--color-secondary);
border-top: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow);
z-index: 600;
max-height: 360px;
overflow-y: auto;
@@ -810,7 +810,7 @@ body.app {
border: 1px solid var(--color-secondary);
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
box-shadow: var(--shadow);
z-index: 550;
width: 360px;
max-height: 500px;
@@ -1022,6 +1022,43 @@ body.app {
.topbar-profile-link:hover { background: var(--color-secondary); }
.topbar-profile-link--danger { color: var(--color-primary); }
.topbar-theme-row { cursor: pointer; justify-content: space-between; }
/* ── Toggle Switch ─────────────────────────────────────────────────────────── */
.toggle-switch {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.toggle-switch input[type="checkbox"] { display: none; }
.toggle-switch .toggle-track {
width: 2.4rem;
height: 1.35rem;
background: var(--color-secondary);
border-radius: 999px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.toggle-switch input:checked ~ .toggle-track { background: var(--color-primary); }
.toggle-switch .toggle-track::after {
content: '';
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1.05rem;
height: 1.05rem;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch input:checked ~ .toggle-track::after { transform: translateX(1.05rem); }
.toggle-switch input:disabled ~ .toggle-track { opacity: 0.45; }
.toggle-switch:has(input:disabled) { cursor: default; }
/* ── Mobile: Topbar ausblenden, Content-Rahmen entfernen ── */
@media (max-width: 768px) {
.topbar { display: none; }

157
bin/main/static/css/variables.css Normal file
View File

@@ -0,0 +1,157 @@
/* ──────────────────────────────────────────────────────────────────────────
xXx Sphere – Design Tokens
Dark ist der Default.
Reihenfolge der Auflösung:
1. :root → dark (Fallback, Spez. 0,1,0)
2. @media prefers-light → light via OS (Spez. 0,1,0, überschreibt via Position)
3. :root[data-theme=dark] → dark manuell (Spez. 0,2,0 – schlägt immer :root)
4. :root[data-theme=light]→ light manuell (Spez. 0,2,0 – schlägt immer :root)
JS setzt data-theme auf <html> und gewinnt damit immer.
────────────────────────────────────────────────────────────────────────── */
/* ── 1. Dark mode – Default ───────────────────────────────────────────────── */
:root {
color-scheme: dark;
/* Surfaces */
--color-bg: #0e0c15;
--color-card: #19162a;
--color-secondary: #272338;
--color-surface: #201d2f;
/* Text */
--color-text: #eae8f0;
--color-muted: #8a879a;
/* Brand */
--color-primary: #e94560;
--color-primary-rgb: 233, 69, 96;
/* Semantic */
--color-success: #27ae60;
--color-danger: #e74c3c;
/* Aliases */
--color-border: #272338;
--color-hover: #272338;
/* Shadows */
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
/* Overlay */
--overlay-bg: rgba(0, 0, 0, 0.55);
/* Message boxes */
--msg-error-bg: #3d0f1a;
--msg-warning-bg: #3a2c0a;
--msg-warning-text: #f5c518;
--msg-success-bg: #0f3d1a;
/* Buttons */
--btn-primary-hover: #c73652;
--btn-secondary-hover: #1a3a6a;
/* Misc */
--placeholder: rgba(234, 232, 240, 0.35);
--unread: #e94560;
--accept: #27ae60;
--decline: #c0392b;
--breakpoint-mobile: 768px;
}
/* ── 2. Light mode via OS (CSS-Fallback, wenn JS nicht verfügbar) ─────────── */
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--color-bg: #f2f0f9;
--color-card: #ffffff;
--color-secondary: #e9e6f5;
--color-surface: #f7f5fc;
--color-text: #1a1628;
--color-muted: #6a677e;
--color-primary: #c9324d;
--color-primary-rgb: 201, 50, 77;
--color-success: #1a8c4e;
--color-danger: #c0392b;
--color-border: #d8d4ed;
--color-hover: #e9e6f5;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--overlay-bg: rgba(0, 0, 0, 0.35);
--msg-error-bg: #fde8ec;
--msg-warning-bg: #fdf5e0;
--msg-warning-text: #b38800;
--msg-success-bg: #e0f5e8;
--btn-primary-hover: #a82942;
--btn-secondary-hover: #d8d4ed;
--placeholder: rgba(26, 22, 40, 0.30);
--unread: #c9324d;
--accept: #1a8c4e;
--decline: #c0392b;
}
}
/* ── 3+4. JS-Override via data-theme auf <html> ───────────────────────────── */
/* :root[data-theme] hat Spezifität (0,2,0) und schlägt :root (0,1,0) immer. */
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0e0c15;
--color-card: #19162a;
--color-secondary: #272338;
--color-surface: #201d2f;
--color-text: #eae8f0;
--color-muted: #8a879a;
--color-primary: #e94560;
--color-primary-rgb: 233, 69, 96;
--color-success: #27ae60;
--color-danger: #e74c3c;
--color-border: #272338;
--color-hover: #272338;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
--overlay-bg: rgba(0, 0, 0, 0.55);
--msg-error-bg: #3d0f1a;
--msg-warning-bg: #3a2c0a;
--msg-warning-text: #f5c518;
--msg-success-bg: #0f3d1a;
--btn-primary-hover: #c73652;
--btn-secondary-hover: #1a3a6a;
--placeholder: rgba(234, 232, 240, 0.35);
--unread: #e94560;
--accept: #27ae60;
--decline: #c0392b;
}
:root[data-theme="light"] {
color-scheme: light;
--color-bg: #f2f0f9;
--color-card: #ffffff;
--color-secondary: #e9e6f5;
--color-surface: #f7f5fc;
--color-text: #1a1628;
--color-muted: #6a677e;
--color-primary: #c9324d;
--color-primary-rgb: 201, 50, 77;
--color-success: #1a8c4e;
--color-danger: #c0392b;
--color-border: #d8d4ed;
--color-hover: #e9e6f5;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--overlay-bg: rgba(0, 0, 0, 0.35);
--msg-error-bg: #fde8ec;
--msg-warning-bg: #fdf5e0;
--msg-warning-text: #b38800;
--msg-success-bg: #e0f5e8;
--btn-primary-hover: #a82942;
--btn-secondary-hover: #d8d4ed;
--placeholder: rgba(26, 22, 40, 0.30);
--unread: #c9324d;
--accept: #1a8c4e;
--decline: #c0392b;
}