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

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