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

Refactor UI styles to use CSS variables for consistent theming

Browse Source 
- Updated background colors across various templates to use CSS variables for better theming support.
- Replaced hardcoded colors with variables like `var(--ui-surface)` and `var(--ui-surface-soft)` for backgrounds.
- Adjusted text colors to use `var(--ui-text)` for improved readability and consistency.
- Enhanced the theme toggle functionality in the base template to dynamically change theme colors based on user preference.
- Ensured that all relevant templates reflect the new theming approach for a cohesive user experience.
This commit is contained in:
AIIrondev
2026-04-20 20:20:33 +02:00
parent 2d37ded5be
commit bc61e87ab0
25 changed files with 208 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/static/css/styles.css
+20 -20
View File
@@ -21,26 +21,26 @@
--ui-radius: 12px;
}
@media (prefers-color-scheme: dark) {
:root {
--ui-bg: #0f172a;
--ui-bg-accent: #1e293b;
--ui-surface: #1e293b;
--ui-surface-soft: #25314a;
--ui-border: #334155;
--ui-text: #f1f5f9;
--ui-text-muted: #94a3b8;
--ui-title: #ffffff;
--ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
--ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
}
/* Make inputs visible in dark mode */
input, select, textarea {
background-color: var(--ui-surface-soft) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
:root[data-theme="dark"] {
--ui-bg: #0f172a;
--ui-bg-accent: #1e293b;
--ui-surface: #1e293b;
--ui-surface-soft: #25314a;
--ui-border: #334155;
--ui-text: #f1f5f9;
--ui-text-muted: #94a3b8;
--ui-title: #ffffff;
--ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
--ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
}
/* Make inputs visible in dark mode */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
background-color: var(--ui-surface-soft) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
body {
Web/templates/admin_audit.html
+5 -5
View File
@@ -11,7 +11,7 @@
</div>
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0 20px;">
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
<div style="font-size:0.85rem; color:#64748b;">Chain Status</div>
{% if verify_result.ok %}
<div style="font-size:1.35rem; font-weight:700; color:#166534;">OK</div>
@@ -19,15 +19,15 @@
<div style="font-size:1.35rem; font-weight:700; color:#991b1b;">FEHLER</div>
{% endif %}
</div>
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
<div style="font-size:0.85rem; color:#64748b;">Einträge</div>
<div style="font-size:1.35rem; font-weight:700;">{{ verify_result.count }}</div>
</div>
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
<div style="font-size:0.85rem; color:#64748b;">Letzter Index</div>
<div style="font-size:1.35rem; font-weight:700;">{{ verify_result.last_chain_index }}</div>
</div>
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
<div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
<div style="font-size:0.85rem; color:#64748b;">Mismatch Count</div>
<div style="font-size:1.35rem; font-weight:700;">{{ verify_result.mismatches|length }}</div>
</div>
@@ -61,7 +61,7 @@
</div>
{% endif %}
<div style="border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:12px;">
<div style="border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface); padding:12px;">
<h3 style="margin-top:0;">Letzte Audit-Ereignisse</h3>
<div style="max-height:560px; overflow:auto;">
<table class="table" style="width:100%; border-collapse:collapse;">
Web/templates/admin_borrowings.html
+4 -4
View File
@@ -161,7 +161,7 @@
</div>
<div id="invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
<div style="max-width:760px; margin:40px auto; background:#fff; border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
<div style="max-width:760px; margin:40px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
<div>
<h2 style="margin:0;">Rechnung erstellen</h2>
@@ -174,15 +174,15 @@
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
<div>
<label for="invoice-item" style="display:block; font-weight:700; margin-bottom:6px;">Element</label>
<input id="invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="invoice-borrower" style="display:block; font-weight:700; margin-bottom:6px;">Schüler</label>
<input id="invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="invoice-code" style="display:block; font-weight:700; margin-bottom:6px;">Element-ID / Code</label>
<input id="invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>
Web/templates/admin_damaged_items.html
+3 -3
View File
@@ -17,14 +17,14 @@
</div>
</div>
<div style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px; margin-bottom:12px;">
<div style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:14px; margin-bottom:12px;">
<input id="damage-search" type="text" placeholder="Suche nach Name, Code, Typ, Benutzer oder Schaden..." style="width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;">
</div>
<div style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:0; overflow:hidden;">
<div style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:0; overflow:hidden;">
<table id="damage-table" style="width:100%; border-collapse:collapse;">
<thead>
<tr style="background:#f8fafc;">
<tr style="background: var(--ui-surface-soft);">
<th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Item</th>
<th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Status</th>
<th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Letzte Meldung</th>
Web/templates/base.html
+81 -20
View File
@@ -14,8 +14,20 @@
<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="theme-color" content="#2c3e50" id="meta-theme-color">
<script>
// Init theme early to prevent FOUC (Flash of Unstyled Content)
(function() {
var theme = localStorage.getItem('inventarsystem-theme');
if (theme === 'dark' || (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark');
document.getElementById('meta-theme-color').setAttribute('content', '#1a252f');
} else {
document.documentElement.setAttribute('data-theme', 'light');
document.getElementById('meta-theme-color').setAttribute('content', '#2c3e50');
}
})();
</script>
<meta name="csrf-token" content="{{ csrf_token }}">
<title>{% block title %}Inventarsystem{% endblock %}</title>
{% block head %}
@@ -117,21 +129,20 @@
--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;
}
:root[data-theme="dark"] {
--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-theme="dark"][data-module="library"] {
--module-primary-color: #4a354d;
--module-primary-light: #614666;
--module-accent-color: #8e44ad;
}
/* Global styles */
@@ -495,7 +506,7 @@
/* Account dropdown stays light theme on mobile */
.dropdown-menu-end {
background-color: #ffffff;
background-color: var(--ui-surface);
border: 1px solid #dee2e6;
}
@@ -504,7 +515,7 @@
}
.dropdown-menu-end .dropdown-item:hover {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
color: #007bff;
}
}
@@ -861,6 +872,15 @@
<a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
</li>
{% endif %}
<li class="nav-item">
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
<span class="theme-icon-light" style="display: none;">☀️</span>
<span class="theme-icon-dark" style="display: none;">🌙</span>
</button>
</li>
<li class="nav-item dropdown ms-lg-auto">
<a class="nav-link dropdown-toggle" href="#" id="invMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
Mehr Optionen
@@ -982,6 +1002,15 @@
<a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
</li>
{% endif %}
<li class="nav-item">
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
<span class="theme-icon-light" style="display: none;">☀️</span>
<span class="theme-icon-dark" style="display: none;">🌙</span>
</button>
</li>
<li class="nav-item dropdown ms-lg-auto">
<a class="nav-link dropdown-toggle" href="#" id="libMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
Mehr Optionen
@@ -1098,7 +1127,7 @@
#onboarding-modal {
width: min(680px, 100%);
background: #ffffff;
background: var(--ui-surface);
border-radius: 14px;
border: 1px solid #dbe3ee;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);
@@ -1825,5 +1854,37 @@
<!-- Push Notifications Script -->
<script src="{{ url_for('static', filename='js/push-notifications.js') }}"></script>
<!-- Theme Toggle Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggleBtns = document.querySelectorAll('#themeToggleBtn');
if (toggleBtns.length === 0) return;
function updateIcons(theme) {
const isDark = theme === 'dark';
document.querySelectorAll('.theme-icon-light').forEach(icon => icon.style.display = isDark ? 'inline' : 'none');
document.querySelectorAll('.theme-icon-dark').forEach(icon => icon.style.display = isDark ? 'none' : 'inline');
}
// Get current setup from initial script in head
let currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
updateIcons(currentTheme);
toggleBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', currentTheme);
localStorage.setItem('inventarsystem-theme', currentTheme);
document.getElementById('meta-theme-color').setAttribute('content', currentTheme === 'dark' ? '#1a252f' : '#2c3e50');
updateIcons(currentTheme);
});
});
});
</script>
</body>
</html>
Web/templates/change_password.html
+1 -1
View File
@@ -53,7 +53,7 @@
max-width: 500px;
margin: 50px auto;
padding: 30px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Web/templates/library_borrowings_admin.html
+8 -8
View File
@@ -52,7 +52,7 @@
}
.summary-card {
background: #fff;
background: var(--ui-surface);
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px 16px;
@@ -85,11 +85,11 @@
padding: 11px 14px;
border: 1px solid #d6dde6;
border-radius: 12px;
background: #fff;
background: var(--ui-surface);
}
.panel {
background: #fff;
background: var(--ui-surface);
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 18px;
@@ -120,7 +120,7 @@
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
background: #f8fafc;
background: var(--ui-surface-soft);
}
.library-table tr:hover td {
@@ -408,7 +408,7 @@
</div>
<div id="damage-invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
<div style="max-width:760px; margin:40px auto; background:#fff; border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
<div style="max-width:760px; margin:40px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
<div>
<h2 style="margin:0;">Rechnung erstellen</h2>
@@ -421,15 +421,15 @@
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
<div>
<label for="damage-invoice-item" style="display:block; font-weight:700; margin-bottom:6px;">Element</label>
<input id="damage-invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="damage-invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="damage-invoice-borrower" style="display:block; font-weight:700; margin-bottom:6px;">Schüler</label>
<input id="damage-invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="damage-invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="damage-invoice-code" style="display:block; font-weight:700; margin-bottom:6px;">Element-ID / Code</label>
<input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
<input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
</div>
<div>
<label for="damage-invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>
Web/templates/library_item_invoices.html
+2 -2
View File
@@ -40,7 +40,7 @@
}
.invoice-card {
background: #fff;
background: var(--ui-surface);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 18px;
@@ -65,7 +65,7 @@
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
background: #f8fafc;
background: var(--ui-surface-soft);
}
.invoice-table tr:hover td {
Web/templates/library_table.html
+13 -13
View File
@@ -18,7 +18,7 @@
.library-header h1 {
margin: 0 0 5px 0;
font-size: 2em;
color: #333;
color: var(--ui-text);
}
.library-header p {
@@ -48,7 +48,7 @@
/* Scanner panel */
.library-scan-panel {
background: #ffffff;
background: var(--ui-surface);
border: 1px solid #d9dde4;
border-radius: 8px;
padding: 14px;
@@ -68,7 +68,7 @@
border: 1px solid #d0d7e2;
border-radius: 6px;
font-size: 14px;
background: #fff;
background: var(--ui-surface);
}
.library-scan-status {
@@ -95,7 +95,7 @@
border: 1px solid #d9dde4;
border-radius: 8px;
overflow: hidden;
background: #fff;
background: var(--ui-surface);
max-width: 460px;
}
@@ -111,7 +111,7 @@
border-radius: 6px;
cursor: pointer;
font-weight: 500;
color: #333;
color: var(--ui-text);
transition: all 0.2s ease;
}
@@ -160,7 +160,7 @@
.filter-item label {
font-weight: 600;
font-size: 0.9em;
color: #333;
color: var(--ui-text);
margin-bottom: 6px;
}
@@ -206,7 +206,7 @@
}
.library-items-table thead {
background: #f8f9fa;
background: var(--ui-surface-soft);
border-bottom: 2px solid #ddd;
}
@@ -214,7 +214,7 @@
padding: 14px 16px;
text-align: left;
font-weight: 600;
color: #333;
color: var(--ui-text);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -228,7 +228,7 @@
}
.library-items-table tbody tr:hover {
background: #f8f9fa;
background: var(--ui-surface-soft);
}
.library-items-table tbody tr:last-child td {
@@ -238,7 +238,7 @@
/* Table cells */
.table-title {
font-weight: 600;
color: #333;
color: var(--ui-text);
}
.table-status {
@@ -320,7 +320,7 @@
}
.modal-content {
background-color: #fff;
background-color: var(--ui-surface);
border-radius: 8px;
padding: 20px;
max-width: 900px;
@@ -373,7 +373,7 @@
}
.close:hover {
color: #333;
color: var(--ui-text);
}
/* Mobile responsive */
@@ -494,7 +494,7 @@
</div>
<div class="filter-buttons">
<button id="applyFilterBtn" class="button" style="background: #4f46e5; color: white;">Filter anwenden</button>
<button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: #333;">Zurücksetzen</button>
<button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: var(--ui-text);">Zurücksetzen</button>
</div>
</div>
Web/templates/license.html
+1 -1
View File
@@ -337,7 +337,7 @@
color: #0d6efd;
}
.license-content {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 20px 30px;
border-radius: 0 0 5px 5px;
border: 1px solid #dee2e6;
Web/templates/logs.html
+1 -1
View File
@@ -217,7 +217,7 @@
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
color: var(--ui-text);
}
.filter-controls {
Web/templates/main.html
+9 -9
View File
@@ -20,7 +20,7 @@
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--ui-border);
background: #f8fafc;
background: var(--ui-surface-soft);
}
.calendar-header button {
@@ -36,7 +36,7 @@
}
.calendar-header button:hover {
background: #f1f5f9;
background: var(--ui-bg);
}
.calendar-header span {
@@ -80,7 +80,7 @@
}
.cal-cell:not(.header):not(.empty):hover {
background: #f1f5f9;
background: var(--ui-bg);
}
.cal-cell.empty {
@@ -115,7 +115,7 @@
.calendar-day-details {
border-top: 1px solid #e7edf5;
padding: 12px;
background: #f8fafc;
background: var(--ui-surface-soft);
display: none;
}
@@ -1646,7 +1646,7 @@
<span>🛠️</span>
<span id="toggle-damage-history-text">Historie anzeigen</span>
</button>
<div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background:#f8fafc;">
<div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background: var(--ui-surface-soft);">
<div style="display:grid; gap:10px;">${damageHistoryHtml}</div>
</div>
</div>
@@ -2847,7 +2847,7 @@
}
.filter-toggle, .clear-filter {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border: 1px solid #dee2e6;
border-radius: 3px;
padding: 3px 8px;
@@ -3028,7 +3028,7 @@
margin-right: 8px;
border: 1px solid #dbe3ee;
border-radius: 10px;
background: #f8fafc;
background: var(--ui-surface-soft);
color: var(--ui-text);
justify-content: center;
align-items: center;
@@ -3859,7 +3859,7 @@
max-height: 400px;
overflow: hidden;
border-radius: 8px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
}
/* Borrower and appointment info panels in modal */
@@ -3891,7 +3891,7 @@
.detail-value { color: #212529; flex: 1; word-wrap: break-word; }
.detail-group.full-width .detail-label { margin-bottom: 5px; }
.detail-group.full-width .detail-value {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 10px;
border-radius: 4px;
border: 1px solid #dee2e6;
Web/templates/main_admin.html
+11 -11
View File
@@ -104,7 +104,7 @@
border-radius: 8px;
padding: 9px 12px;
cursor: pointer;
background: #f8fafc;
background: var(--ui-surface-soft);
color: var(--ui-title);
font-weight: 600;
text-align: center;
@@ -152,7 +152,7 @@
}
.filter-toggle, .clear-filter {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border: 1px solid #dee2e6;
border-radius: 3px;
padding: 3px 8px;
@@ -333,7 +333,7 @@
margin-right: 8px;
border: 1px solid #dbe3ee;
border-radius: 10px;
background: #f8fafc;
background: var(--ui-surface-soft);
color: var(--ui-text);
justify-content: center;
align-items: center;
@@ -706,7 +706,7 @@
padding: 15px;
border: 1px solid var(--ui-border);
border-radius: 5px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
}
.filter-inputs h3 {
@@ -1049,7 +1049,7 @@
}
.detail-group.full-width .detail-value {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 10px;
border-radius: 4px;
border: 1px solid #dee2e6;
@@ -1069,7 +1069,7 @@
max-height: 400px;
overflow: hidden;
border-radius: 8px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
}
.modal-image {
@@ -2022,7 +2022,7 @@
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--ui-border);
background: #f8fafc;
background: var(--ui-surface-soft);
}
.calendar-header button {
@@ -2038,7 +2038,7 @@
}
.calendar-header button:hover {
background: #f1f5f9;
background: var(--ui-bg);
}
.calendar-header span {
@@ -2082,7 +2082,7 @@
}
.cal-cell:not(.header):not(.empty):hover {
background: #f1f5f9;
background: var(--ui-bg);
}
.cal-cell.empty {
@@ -2117,7 +2117,7 @@
.calendar-day-details {
border-top: 1px solid #e7edf5;
padding: 12px;
background: #f8fafc;
background: var(--ui-surface-soft);
display: none;
}
@@ -4456,7 +4456,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
<span>🛠️</span>
<span id="toggle-damage-history-text">Historie anzeigen</span>
</button>
<div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background:#f8fafc;">
<div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background: var(--ui-surface-soft);">
<div style="display:grid; gap:10px;">${damageHistoryHtml}</div>
</div>
</div>
Web/templates/manage_locations.html
+3 -3
View File
@@ -78,12 +78,12 @@
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
background-color: #fff;
background-color: var(--ui-surface);
border: 1px solid #e9ecef;
}
.card-header {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 15px 20px;
border-bottom: 1px solid #e9ecef;
}
@@ -170,7 +170,7 @@
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border-radius: 4px;
border-left: 3px solid #6c757d;
}
Web/templates/my_borrowed_items.html
+4 -4
View File
@@ -61,7 +61,7 @@
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
background-color: var(--ui-text);
color: white;
padding: 5px 10px;
border-radius: 4px;
@@ -405,7 +405,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
.borrowed-item {
background-color: #fff;
background-color: var(--ui-surface);
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
@@ -457,7 +457,7 @@ document.addEventListener('DOMContentLoaded', function() {
.exemplar-details {
margin-top: 10px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 10px;
border-radius: 5px;
border-left: 3px solid #6c757d;
@@ -515,7 +515,7 @@ document.addEventListener('DOMContentLoaded', function() {
.no-items-message {
text-align: center;
padding: 30px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border-radius: 5px;
color: #6c757d;
margin-top: 20px;
Web/templates/notifications.html
+2 -2
View File
@@ -17,7 +17,7 @@
<div id="push-notification-settings" style="margin-bottom: 24px;"></div>
<div style="display:grid; grid-template-columns:1fr; gap:14px;">
<section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
<section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
<h2 style="margin:0 0 12px; font-size:1.15rem;">Meine Benachrichtigungen</h2>
{% if user_notifications %}
<div style="display:grid; gap:10px;">
@@ -53,7 +53,7 @@
</section>
{% if is_admin_user %}
<section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
<section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
<h2 style="margin:0 0 12px; font-size:1.15rem;">Admin-Benachrichtigungen</h2>
{% if admin_notifications %}
<div style="display:grid; gap:10px;">
Web/templates/register.html
+4 -4
View File
@@ -121,7 +121,7 @@
--primary-dark: #2980b9;
--success-color: #2ecc71;
--error-color: #e74c3c;
--text-color: #333;
--text-color: var(--ui-text);
--light-bg: #f9f9f9;
--border-radius: 8px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -163,7 +163,7 @@ body {
}
.content {
background-color: #fff;
background-color: var(--ui-surface);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
@@ -345,7 +345,7 @@ input::placeholder {
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f8fafc;
background: var(--ui-surface-soft);
}
.password-rules-title {
@@ -406,7 +406,7 @@ input::placeholder {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 10px;
background: #f8fafc;
background: var(--ui-surface-soft);
}
.permission-panel h4 {
Web/templates/reset_item_functions.html
+1 -1
View File
@@ -129,7 +129,7 @@ function createLoadingIndicator(message) {
}
.reset-loading-message {
color: #333;
color: var(--ui-text);
font-size: 16px;
font-weight: 500;
}
Web/templates/reset_item_modal.html
+8 -8
View File
@@ -207,7 +207,7 @@
}
.reset-item-info {
background: #f8f9fa;
background: var(--ui-surface-soft);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
@@ -216,7 +216,7 @@
.reset-item-info h3 {
margin: 0 0 15px 0;
color: #333;
color: var(--ui-text);
font-size: 1.3rem;
}
@@ -232,7 +232,7 @@
}
.reset-item-details strong {
color: #333;
color: var(--ui-text);
}
.reset-warning-section {
@@ -285,7 +285,7 @@
flex-direction: column;
cursor: pointer;
font-weight: 500;
color: #333;
color: var(--ui-text);
}
.reset-action-desc {
@@ -298,7 +298,7 @@
.active-borrowings {
margin-top: 10px;
padding: 10px;
background: #f8f9fa;
background: var(--ui-surface-soft);
border-radius: 5px;
font-size: 0.9rem;
}
@@ -321,7 +321,7 @@
.reset-options-section h4 {
margin: 0 0 15px 0;
color: #333;
color: var(--ui-text);
}
.reset-option {
@@ -365,7 +365,7 @@
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
color: var(--ui-text);
}
.reset-reason-section textarea {
@@ -391,7 +391,7 @@
display: flex;
justify-content: flex-end;
gap: 15px;
background: #f8f9fa;
background: var(--ui-surface-soft);
border-radius: 0 0 12px 12px;
}
Web/templates/student_card_barcode_print.html
+3 -3
View File
@@ -45,7 +45,7 @@
}
h1 {
color: #333;
color: var(--ui-text);
font-size: 28px;
margin-bottom: 10px;
}
@@ -67,7 +67,7 @@
}
.info-box strong {
color: #333;
color: var(--ui-text);
}
.info-box p {
@@ -106,7 +106,7 @@
.btn-secondary {
background: #e0e0e0;
color: #333;
color: var(--ui-text);
}
.btn-secondary:hover {
Web/templates/student_cards_admin.html
+2 -2
View File
@@ -22,7 +22,7 @@
}
.student-card-form {
background: #f5f5f5;
background: var(--ui-bg);
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
@@ -43,7 +43,7 @@
.form-group label {
font-weight: 600;
margin-bottom: 5px;
color: #333;
color: var(--ui-text);
}
.form-group input,
Web/templates/terminplan.html
+1 -1
View File
@@ -1601,7 +1601,7 @@ document.addEventListener('DOMContentLoaded', function() {
.booking-summary {
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.9em;
Web/templates/tutorial.html
+6 -6
View File
@@ -72,7 +72,7 @@
.tutorial-side {
grid-column: span 12;
background: #ffffff;
background: var(--ui-surface);
border: 1px solid #cfdbe8;
border-radius: 16px;
padding: 16px;
@@ -102,7 +102,7 @@
.workflow-nav button {
border: 1px solid #dbe3ee;
background: #f8fafc;
background: var(--ui-surface-soft);
color: #0f172a;
border-radius: 12px;
padding: 11px 12px;
@@ -133,7 +133,7 @@
.workflow-step {
grid-column: span 12;
background: #ffffff;
background: var(--ui-surface);
border: 1px solid #cfdbe8;
border-radius: 16px;
padding: 18px;
@@ -331,17 +331,17 @@
<h3>Tägliche Aufgaben</h3>
<p>Das ist der gewöhnliche Arbeitsablauf während eines Schultages.</p>
<div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Morgens:</p>
<p style="margin: 0; color: #334155;">Öffnen Sie die Startseite und prüfen Sie offene Reservierungen oder Rückgabefristen.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Mittags:</p>
<p style="margin: 0; color: #334155;">Neue Artikel oder Bücher hinzufügen oder Ausleihungen begründen.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
<p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Nachmittags:</p>
<p style="margin: 0; color: #334155;">Rückgaben buchen und kurz prüfen, ob alles in Ordnung ist.</p>
</div>
Web/templates/upload_admin.html
+12 -12
View File
@@ -78,14 +78,14 @@
.book-info {
padding: 15px;
background-color: #fff;
background-color: var(--ui-surface);
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
.book-info h4 {
color: #333;
color: var(--ui-text);
margin: 0 0 10px 0;
font-size: 1.2em;
font-weight: bold;
@@ -115,7 +115,7 @@
}
.book-description h5 {
color: #333;
color: var(--ui-text);
margin: 0 0 8px 0;
font-size: 1em;
font-weight: bold;
@@ -125,7 +125,7 @@
max-height: 150px;
overflow-y: auto;
padding: 5px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border: 1px solid #e9ecef;
border-radius: 3px;
font-size: 0.9em;
@@ -187,7 +187,7 @@
font-style: italic;
text-align: center;
padding: 20px;
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
border: 1px solid #dee2e6;
border-radius: 4px;
}
@@ -334,7 +334,7 @@
}
.popup-content p {
color: #333;
color: var(--ui-text);
margin: 15px 0;
line-height: 1.5;
font-size: 1em;
@@ -380,7 +380,7 @@
}
.popup-close-x:hover {
color: #333;
color: var(--ui-text);
}
/* Upload form styles */
@@ -388,13 +388,13 @@
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
background-color: var(--ui-surface);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.upload-form h1 {
color: #333;
color: var(--ui-text);
margin-bottom: 30px;
text-align: center;
font-size: 2em;
@@ -408,7 +408,7 @@
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
color: var(--ui-text);
}
.form-group input,
@@ -428,14 +428,14 @@
}
.filter-inputs {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 20px;
border-radius: 5px;
margin: 20px 0;
}
.filter-inputs h3 {
color: #333;
color: var(--ui-text);
margin-bottom: 15px;
font-size: 1.2em;
}
Web/templates/user_del.html
+3 -3
View File
@@ -407,14 +407,14 @@
}
.filter-bar {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 15px;
border-radius: 6px;
border: 1px solid #dee2e6;
}
.password-requirements {
background-color: #f8f9fa;
background-color: var(--ui-surface-soft);
padding: 10px;
border-radius: 4px;
margin-top: 10px;
@@ -439,7 +439,7 @@
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px;
background: #f8fafc;
background: var(--ui-surface-soft);
}
.permissions-group h6 {