Invario/Inventarsystem
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Enhance dark mode support and improve mobile layout with theme-aware styles and optimizations

Browse Source
This commit is contained in:
AIIrondev
2026-04-19 21:54:00 +02:00
parent 1d6c722cd3
commit 7a4c3b82c0
4 changed files with 132 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/base.html
+43 -13
View File
@@ -10,10 +10,12 @@
<html lang="de" data-module="{{ CURRENT_MODULE }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2c3e50" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a252f" media="(prefers-color-scheme: dark)">
<meta name="csrf-token" content="{{ csrf_token }}">
<title>{% block title %}Inventarsystem{% endblock %}</title>
{% block head %}
@@ -102,6 +104,9 @@
--module-accent-color: #3498db;
--module-accent-light: rgba(52, 152, 219, 0.1);
--module-brand-icon: "📦";
--page-bg-gradient: linear-gradient(180deg, #f2f5f8, #e7edf4);
--page-bg-overlay1: rgba(86, 145, 200, 0.08);
--page-bg-overlay2: rgba(52, 98, 150, 0.09);
}
html[data-module="library"] {
@@ -112,17 +117,35 @@
--module-brand-icon: "📚";
}
@media (prefers-color-scheme: dark) {
:root {
--module-primary-color: #1a252f;
--module-primary-light: #2c3e50;
--module-accent-color: #2980b9;
--module-brand-icon: "📦";
--page-bg-gradient: linear-gradient(180deg, #0f172a, #1e293b);
--page-bg-overlay1: rgba(56, 189, 248, 0.05);
--page-bg-overlay2: rgba(59, 130, 246, 0.06);
}
html[data-module="library"] {
--module-primary-color: #4a354d;
--module-primary-light: #614666;
--module-accent-color: #8e44ad;
}
}
/* Global styles */
body {
font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
background:
radial-gradient(1200px 500px at 10% -10%, rgba(86, 145, 200, 0.08), transparent 55%),
radial-gradient(900px 420px at 95% 0%, rgba(52, 98, 150, 0.09), transparent 52%),
linear-gradient(180deg, #f2f5f8, #e7edf4);
radial-gradient(1200px 500px at 10% -10%, var(--page-bg-overlay1), transparent 55%),
radial-gradient(900px 420px at 95% 0%, var(--page-bg-overlay2), transparent 52%),
var(--page-bg-gradient);
margin: 0;
padding: 0;
padding-bottom: 30px;
color: #1f2d3d;
padding-bottom: auto; /* Fallback for dynamic calculation */
padding-bottom: env(safe-area-inset-bottom, 30px);
color: var(--ui-text, #1f2d3d);
}
.container {
@@ -135,11 +158,13 @@
background-color: var(--module-primary-color) !important;
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top, 0); /* iOS Safe Area */
z-index: 1900;
}
.navbar .container-fluid {
gap: 10px;
padding-bottom: env(safe-area-inset-bottom, 0); /* Fallback */
}
.navbar-brand {
@@ -351,18 +376,19 @@
/* Dropdown menus - consistent with system design */
.dropdown-menu {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border: 1px solid #dee2e6;
box-shadow: var(--ui-shadow-md);
border: 1px solid var(--ui-border);
border-radius: 8px;
padding: 8px 0;
min-width: 200px;
margin-top: 5px;
background-color: var(--ui-surface);
}
.dropdown-item {
padding: 10px 16px;
font-size: 0.9rem;
color: #495057;
color: var(--ui-text);
transition: all 0.2s ease;
border: none;
background: none;
@@ -370,8 +396,8 @@
.dropdown-item:hover,
.dropdown-item:focus {
background-color: #f8f9fa;
color: #007bff;
background-color: var(--ui-surface-soft);
color: var(--module-accent-color);
transform: translateX(2px);
}
@@ -434,12 +460,16 @@
}
.nav-item.dropdown .dropdown-toggle {
padding: 8px 12px;
padding: 12px 12px;
min-height: 48px;
}
.navbar-toggler {
padding: 0.5rem 0.65rem;
padding: 0.6rem 0.8rem;
border-width: 2px;
min-height: 48px;
min-width: 48px;
margin-top: 4px;
}
.function-search-wrap {