Invario/Inventarsystem
3
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 27 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/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>