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
+121
View File
@@ -205,6 +205,122 @@
color: #6b7280;
}
:root[data-theme="dark"] .library-admin-hero {
background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
border-color: var(--ui-border);
box-shadow: var(--ui-shadow-md);
}
:root[data-theme="dark"] .library-admin-hero p,
:root[data-theme="dark"] .summary-card .label,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .empty-state {
color: var(--ui-text-muted) !important;
}
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .panel {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
box-shadow: var(--ui-shadow-sm);
}
:root[data-theme="dark"] .summary-card .value,
:root[data-theme="dark"] .panel h2 {
color: var(--ui-title) !important;
}
:root[data-theme="dark"] .filter-bar input,
:root[data-theme="dark"] .filter-bar select {
background: var(--ui-bg) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
:root[data-theme="dark"] .filter-bar input:focus,
:root[data-theme="dark"] .filter-bar select:focus {
outline: none;
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
:root[data-theme="dark"] .library-table,
:root[data-theme="dark"] .library-table td {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
:root[data-theme="dark"] .library-table th {
background: var(--ui-surface-soft) !important;
color: var(--ui-text-muted) !important;
border-color: var(--ui-border) !important;
}
:root[data-theme="dark"] .library-table tr:hover td {
background: var(--ui-bg-accent) !important;
}
:root[data-theme="dark"] .badge-active {
background: #172554;
color: #bfdbfe;
}
:root[data-theme="dark"] .badge-planned {
background: #422006;
color: #fde68a;
}
:root[data-theme="dark"] .badge-completed,
:root[data-theme="dark"] .badge-paid {
background: #123524;
color: #b7f7ce;
}
:root[data-theme="dark"] .badge-open,
:root[data-theme="dark"] .badge-damaged {
background: #451a1a;
color: #fecaca;
}
:root[data-theme="dark"] .badge-class {
background: var(--ui-surface-soft);
color: var(--ui-text);
border-color: var(--ui-border);
}
:root[data-theme="dark"] .row-actions .btn-outline-danger {
background: #451a1a;
color: #fca5a5;
border-color: #f87171;
}
:root[data-theme="dark"] .row-actions .btn-outline-danger:hover {
background: #dc2626;
color: #ffffff;
}
:root[data-theme="dark"] #damage-invoice-modal > div,
:root[data-theme="dark"] #repair-action-modal > div {
background: var(--ui-overlay-surface) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-overlay-border);
}
:root[data-theme="dark"] #damage-invoice-modal input,
:root[data-theme="dark"] #damage-invoice-modal textarea,
:root[data-theme="dark"] #repair-action-modal input {
background: var(--ui-bg) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border) !important;
}
:root[data-theme="dark"] #damage-invoice-modal p,
:root[data-theme="dark"] #repair-action-modal p {
color: var(--ui-text-muted) !important;
}
@media (max-width: 900px) {
.library-admin-hero {
flex-direction: column;
@@ -219,6 +335,11 @@
overflow-x: auto;
white-space: nowrap;
}
.library-admin-shell {
padding-left: 10px;
padding-right: 10px;
}
}
</style>