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

feat: update styles for dark mode and enhance filter handling in admin template

Browse Source
This commit is contained in:
AIIrondev
2026-05-18 17:35:02 +02:00
parent 299d11c1d0
commit 2c3fb779ce
4 changed files with 127 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/static/css/planned_appointments.css
+8 -8
View File
@@ -10,13 +10,13 @@
.planned-appointments-panel {
margin: 15px 0;
padding: 15px;
background-color: #e1f5fe;
background-color: var(--ui-surface-soft, #e1f5fe);
border-left: 4px solid #03a9f4;
border-radius: 4px;
}
.planned-appointments-panel h4 {
color: #0277bd;
color: var(--ui-title, #0277bd);
margin-top: 0;
margin-bottom: 10px;
font-size: 1.1em;
@@ -30,9 +30,9 @@
.appointment-item {
padding: 10px;
background-color: #f9fdff;
background-color: var(--ui-surface, #f9fdff);
border-radius: 4px;
border: 1px solid #b3e5fc;
border: 1px solid var(--ui-border, #b3e5fc);
}
.appointment-header {
@@ -44,7 +44,7 @@
.appointment-date {
font-weight: bold;
color: #0288d1;
color: var(--ui-title, #0288d1);
}
.appointment-period {
@@ -86,14 +86,14 @@
.appointment-user {
margin-left: auto;
font-style: italic;
color: #546e7a;
color: var(--ui-text-muted, #546e7a);
}
.appointment-notes {
font-size: 0.9em;
color: #455a64;
color: var(--ui-text, #455a64);
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #e1f5fe;
border-top: 1px solid var(--ui-border, #e1f5fe);
font-style: italic;
}
Web/static/css/styles.css
+91 -12
View File
@@ -22,16 +22,16 @@
}
: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-bg: #09090b;
--ui-bg-accent: #121214;
--ui-surface: #121214;
--ui-surface-soft: #1e1e22;
--ui-border: #27272a;
--ui-text: #fafafa;
--ui-text-muted: #a1a1aa;
--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);
--ui-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
--ui-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Safe Area Support for iPad notches, Dynamic Island, and rounded corners */
@@ -57,9 +57,16 @@ body {
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
background-color: var(--ui-surface-soft) !important;
background-color: var(--ui-bg) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
border-color: #52a8ff !important;
box-shadow: 0 0 0 2px rgba(82, 168, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.3) !important;
}
body {
@@ -295,7 +302,7 @@ select:focus {
/* Modal dialog styling */
.modal-dialog-white {
background: white;
background: var(--ui-surface);
padding: 20px;
border-radius: 5px;
text-align: center;
@@ -896,3 +903,75 @@ html, body {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ========================================================= */
/* UNIVERSAL DARK MODE OVERRIDES FOR HARDCODED HTML STYLES */
/* ========================================================= */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background-color: #ffffff"],
:root[data-theme="dark"] [style*="background-color: #f8f9fa"],
:root[data-theme="dark"] [style*="background-color: #f5f5f5"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="background: #f8f9fa"],
:root[data-theme="dark"] [style*="background: #f5f5f5"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background-color: white"],
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .dropdown-menu {
background-color: var(--ui-surface) !important;
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
}
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] [style*="color: #000"],
:root[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
:root[data-theme="dark"] [style*="color: black"],
:root[data-theme="dark"] [style*="color: #333"] {
color: var(--ui-text) !important;
}
:root[data-theme="dark"] .text-muted {
color: var(--ui-text-muted) !important;
}
/* Fix table backgrounds that might have hardcoded light colors */
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] table.table,
:root[data-theme="dark"] table [style*="background: #fff"] {
background-color: var(--ui-bg) !important;
color: var(--ui-text) !important;
}
/* Fix list items */
:root[data-theme="dark"] .list-group-item {
background-color: var(--ui-surface) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
/* Additional inline style coverage */
:root[data-theme="dark"] [style*="background: #eef4ff"],
:root[data-theme="dark"] [style*="background-color: #eef4ff"],
:root[data-theme="dark"] [style*="background: #e9ecef"],
:root[data-theme="dark"] [style*="background-color: #e9ecef"],
:root[data-theme="dark"] [style*="background: #e2e8f0"],
:root[data-theme="dark"] [style*="background-color: #e2e8f0"],
:root[data-theme="dark"] [style*="background-color: #fefefe"],
:root[data-theme="dark"] [style*="background: #fffdfd"] {
background-color: var(--ui-surface) !important;
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
}
:root[data-theme="dark"] .badge-light,
:root[data-theme="dark"] .bg-light {
background-color: var(--ui-surface-soft) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border);
}