core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Refactor admin CSS using Conventional Commits format (feat)"

Browse Source
This commit is contained in:
Till Tomczak 2025-05-26 09:40:48 +02:00
parent d81e14f86e
commit e4db65c85a
1 changed files with 147 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
backend/app/static/css/admin.css
View File

@ -16,12 +16,17 @@
/* Dark Mode Variables */
.dark {
--bg-color: #1e293b;
--card-bg: #334155;
--border-color: #475569;
--bg-color: #0f172a;
--card-bg: #1e293b;
--border-color: #334155;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--hover-bg: #475569;
--text-secondary: #e2e8f0;
--hover-bg: #334155;
--input-bg: #1e293b;
--shadow-color: rgba(0, 0, 0, 0.3);
--table-header-bg: #1e293b;
--table-row-hover: #334155;
--dark-btn-hover: #475569;
}
/* Light Mode Variables */
@ -32,6 +37,11 @@
--text-primary: #1e293b;
--text-secondary: #64748b;
--hover-bg: #f1f5f9;
--input-bg: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.1);
--table-header-bg: #f8fafc;
--table-row-hover: #f1f5f9;
--dark-btn-hover: #f1f5f9;
}
/* Admin Panel Container */
@ -111,13 +121,13 @@
padding: 1.25rem;
position: relative;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
}
.stat-icon {
@ -235,7 +245,7 @@
padding: 0.625rem;
border: 1px solid var(--border-color);
border-radius: 0.375rem;
background-color: var(--card-bg);
background-color: var(--input-bg);
color: var(--text-primary);
transition: border-color 0.2s ease;
}
@ -538,25 +548,137 @@
.dark .form-input,
.dark .form-select,
.dark .form-textarea {
background-color: var(--card-bg);
color: var(--text-primary);
background-color: var(--input-bg);
border-color: var(--border-color);
color: var(--text-primary);
}
.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}
.dark .modal-dialog {
background-color: var(--card-bg);
border-color: var(--border-color);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
.text-success { color: var(--success-color); }
.text-error { color: var(--error-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.dark .modal-header {
border-bottom-color: var(--border-color);
}
.bg-success { background-color: var(--success-color); }
.bg-error { background-color: var(--error-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }
.dark .modal-footer {
border-top-color: var(--border-color);
}
.dark .scheduler-status {
background-color: var(--card-bg);
border-color: var(--border-color);
}
.dark .pulse {
animation: darkPulse 2s infinite;
}
@keyframes darkPulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
.dark .bg-slate-50 {
background-color: #1e293b;
}
.dark .bg-slate-800 {
background-color: #0f172a;
}
.dark .dark-bg-card {
background-color: var(--card-bg);
}
.dark .log-entry {
border-color: var(--border-color);
background-color: var(--card-bg);
}
.dark .log-entry:hover {
background-color: var(--hover-bg);
}
.dark .badge-success {
background-color: rgba(16, 185, 129, 0.2);
color: #34d399;
}
.dark .badge-error {
background-color: rgba(239, 68, 68, 0.2);
color: #f87171;
}
.dark .badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
.dark .badge-info {
background-color: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.dark .printer-card {
background-color: var(--card-bg);
border-color: var(--border-color);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.dark .printer-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.dark .status-running {
background-color: #10b981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.dark .status-stopped {
background-color: #ef4444;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.dark .alert {
border-color: var(--border-color);
}
.dark .alert-success {
background-color: rgba(16, 185, 129, 0.2);
border-left-color: #10b981;
}
.dark .alert-error {
background-color: rgba(239, 68, 68, 0.2);
border-left-color: #ef4444;
}
.dark .alert-warning {
background-color: rgba(245, 158, 11, 0.2);
border-left-color: #f59e0b;
}
.dark .alert-info {
background-color: rgba(59, 130, 246, 0.2);
border-left-color: #3b82f6;
}
/* Notification Styles */
.notification {
@ -690,3 +812,10 @@
background-color: #1e3a8a;
color: #bfdbfe;
}
/* Additional utilities */
.transition-colors {
transition-property: color, background-color, border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}