changes toi the darkmode style to have iot be a better edesign
Release Inventarsystem / release-docker (push) Successful in 2m26s

This commit is contained in:
2026-09-14 10:54:19 +02:00
parent 2c6043399e
commit e71567db11
11 changed files with 868 additions and 56 deletions
+53 -25
View File
@@ -95,10 +95,18 @@
flex: 1;
min-width: 250px;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 6px;
border: 1px solid var(--ui-border);
border-radius: 10px;
font-size: 16px;
background: #fff;
background: var(--ui-surface);
color: var(--ui-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.library-search-input:focus {
outline: none;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
.library-scan-panel {
@@ -138,34 +146,35 @@
/* Filters */
.library-filter-toggle-btn {
padding: 10px 16px;
background: #f0f2f5;
border: 1px solid #ddd;
border-radius: 6px;
font-weight: 500;
background: var(--ui-surface-soft);
border: 1px solid var(--ui-border);
border-radius: 10px;
font-weight: 700;
color: var(--ui-text);
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.library-filter-toggle-btn:hover {
background: #e4e6eb;
border-color: #999;
background: var(--ui-bg-accent);
border-color: #60a5fa;
}
.library-filter-toggle-btn.active {
background: #e0e7ff;
border-color: #4f46e5;
color: #4f46e5;
background: var(--module-primary-color);
border-color: var(--module-primary-color);
color: #ffffff;
box-shadow: 0 0 0 3px var(--module-accent-light);
}
.library-filter-panel {
display: none;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: 12px;
padding: 18px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
box-shadow: var(--ui-shadow-sm);
}
.library-filter-panel.open {
@@ -198,34 +207,53 @@
.filter-item input,
.filter-item select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
border: 1px solid var(--ui-border);
border-radius: 8px;
font-size: 14px;
background: #fff;
background: var(--ui-bg);
color: var(--ui-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-item input:focus,
.filter-item select:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
border-top: 1px solid var(--ui-border);
}
.filter-buttons .button {
flex: 1;
flex: 0 1 auto;
padding: 8px 16px;
font-size: 14px;
}
#clearFilterBtn {
background: var(--ui-surface-soft) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
.filter-buttons > div[style*="flex-grow"] {
flex: 1 1 100%;
min-width: 12px;
}
@media (min-width: 900px) {
.filter-buttons > div[style*="flex-grow"] {
flex: 1 1 auto;
}
}
/* =========================================
4. Tables & Data Display
========================================= */