core/manage-your-printer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIN INIT

Browse Source
This commit is contained in:
Till Tomczak
2025-06-04 10:03:22 +02:00
commit 785a2b6134
14182 changed files with 1764617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
static/css/animations-optimized.css Normal file
View File

@@ -0,0 +1,84 @@
/**
* Optimized Animations for Raspberry Pi
* All animations removed for performance
*/
/* Keine Animationen - alle entfernt */
/* Placeholder für Animation-Klassen ohne Effekte */
.fade-in,
.fade-out,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.scale-in,
.scale-out,
.rotate-in,
.rotate-out,
.bounce,
.pulse,
.ping,
.spin,
.wiggle,
.swing,
.rubberBand,
.flash,
.shake,
.flip,
.zoom-in,
.zoom-out {
/* Keine Animation */
}
/* Keine Keyframes definiert */
/* Utility Classes ohne Effekte */
.animate-none { animation: none !important; }
.animate-spin { /* Keine Animation */ }
.animate-ping { /* Keine Animation */ }
.animate-pulse { /* Keine Animation */ }
.animate-bounce { /* Keine Animation */ }
/* Duration Classes - ignoriert */
.duration-75,
.duration-100,
.duration-150,
.duration-200,
.duration-300,
.duration-500,
.duration-700,
.duration-1000 {
/* Keine Duration */
}
/* Delay Classes - ignoriert */
.delay-75,
.delay-100,
.delay-150,
.delay-200,
.delay-300,
.delay-500,
.delay-700,
.delay-1000 {
/* Kein Delay */
}
/* Easing Classes - ignoriert */
.ease-linear,
.ease-in,
.ease-out,
.ease-in-out {
/* Kein Easing */
}
/* Motion-safe - ignoriert */
@media (prefers-reduced-motion: no-preference) {
/* Keine Animationen auch bei no-preference */
}
/* Alle Animationen global deaktiviert */
* {
animation: none !important;
transition: none !important;
}

BIN
static/css/animations-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/animations-optimized.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.fade-in,.fade-out,.slide-up,.slide-down,.slide-left,.slide-right,.scale-in,.scale-out,.rotate-in,.rotate-out,.bounce,.pulse,.ping,.spin,.wiggle,.swing,.rubberBand,.flash,.shake,.flip,.zoom-in,.zoom-out{}.animate-none{animation:none !important;}.animate-spin{}.animate-ping{}.animate-pulse{}.animate-bounce{}.duration-75,.duration-100,.duration-150,.duration-200,.duration-300,.duration-500,.duration-700,.duration-1000{}.delay-75,.delay-100,.delay-150,.delay-200,.delay-300,.delay-500,.delay-700,.delay-1000{}.ease-linear,.ease-in,.ease-out,.ease-in-out{}@media (prefers-reduced-motion:no-preference){}*{animation:none !important;transition:none !important;}

BIN
static/css/animations-optimized.min.css.gz Normal file
View File

Binary file not shown.

BIN
static/css/app-bundle.min.css.gz Normal file
View File

Binary file not shown.

31
static/css/build/critical.css Normal file
View File

@@ -0,0 +1,31 @@
/* CRITICAL INLINE CSS - Sollte im HTML <head> stehen */
/* Nur die absolut notwendigen Styles für First Paint */
:root{--primary:#0073ce;--bg:#fafbfc;--surface:#fff;--text:#111827;--border:#e5e7eb;--shadow:0 2px 4px rgba(0,0,0,.05)}
*{box-sizing:border-box;margin:0;padding:0;contain:layout style}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased}
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem;position:sticky;top:0;z-index:1000}
.nav{display:flex;gap:1rem}
.nav-item{padding:.5rem 1rem;border-radius:6px;text-decoration:none;color:#6b7280;transition:background .1s}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{background:var(--primary);color:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.btn{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-weight:600;cursor:pointer;transition:background .1s}
.btn:hover{background:#005a9f}
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;box-shadow:var(--shadow)}
.flex{display:flex}
.grid{display:grid;gap:1rem}
.hidden{display:none}
.w-full{width:100%}
.text-center{text-align:center}
.p-4{padding:1rem}
.mb-4{margin-bottom:1rem}
.status{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase}
.status-online{background:#d1fae5;color:#065f46}
.status-offline{background:#fee2e2;color:#991b1b}
.status-printing{background:#dbeafe;color:#1e40af}
.input{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.75rem;width:100%}
.input:focus{outline:none;border-color:var(--primary)}
@media (prefers-color-scheme:dark){:root{--bg:#1e293b;--surface:#334155;--text:#f8fafc;--border:#475569;--shadow:0 2px 4px rgba(0,0,0,.3)}}
@media (max-width:768px){.nav{flex-direction:column;gap:.5rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

498
static/css/build/kiosk-1656af86.css Normal file
View File

@@ -0,0 +1,498 @@
/* MYP Platform - Kiosk Optimierte CSS Bundle */
/* Generiert am: 2025-06-01 23:40:46 */
/**
* MYP Platform - Kiosk-Optimierte CSS
* Maximale Performance für Offline-Kiosk-Umgebung
* Keine Touch-Events, minimale Animationen, optimierte Rendering-Performance
*/
/* ===== CRITICAL INLINE STYLES (sollten im HTML-Head stehen) ===== */
:root {
/* Reduzierte Farbvariablen für bessere Performance */
--primary: #0073ce;
--primary-dark: #005a9f;
--bg: #fafbfc;
--surface: #ffffff;
--text: #111827;
--text-muted: #6b7280;
--border: #e5e7eb;
--shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* CSS Containment für bessere Performance */
* {
contain: layout style;
}
/* Basis-Reset ohne aufwendige Normalisierung */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
contain: layout style paint;
/* Optimiert für Kiosk-Rendering */
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
/* ===== LAYOUT OPTIMIERUNGEN ===== */
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem;
contain: layout style;
}
.nav {
display: flex;
gap: 1rem;
contain: layout;
}
.nav-item {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
color: var(--text-muted);
transition: background-color 0.1s ease; /* Minimale Transition */
}
.nav-item:hover {
background: var(--bg);
color: var(--text);
}
.nav-item.active {
background: var(--primary);
color: white;
}
/* ===== OPTIMIERTE KARTEN ===== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
box-shadow: var(--shadow);
contain: layout style paint;
}
.card:hover {
transform: translateY(-1px); /* Minimaler Hover-Effekt */
}
/* ===== BUTTONS OHNE KOMPLEXE ANIMATIONEN ===== */
.btn {
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.1s ease;
contain: layout style;
}
.btn:hover {
background: var(--primary-dark);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg);
}
/* ===== INPUTS OPTIMIERT ===== */
.input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
width: 100%;
transition: border-color 0.1s ease;
contain: layout style;
}
.input:focus {
outline: none;
border-color: var(--primary);
}
/* ===== TABELLEN OHNE KOMPLEXE EFFEKTE ===== */
.table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 8px;
overflow: hidden;
contain: layout;
}
.table th {
background: var(--bg);
padding: 1rem;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.table tr:hover {
background: var(--bg);
}
/* ===== STATUS BADGES VEREINFACHT ===== */
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-printing { background: #dbeafe; color: #1e40af; }
/* ===== GRID LAYOUTS OPTIMIERT ===== */
.grid {
display: grid;
gap: 1rem;
contain: layout;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ===== UTILITIES MINIMAL ===== */
.flex { display: flex; contain: layout; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.bg-white { background: var(--surface); }
.bg-gray-50 { background: var(--bg); }
.text-gray-600 { color: var(--text-muted); }
.text-blue-600 { color: var(--primary); }
/* ===== DARK MODE MINIMAL ===== */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e293b;
--surface: #334155;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #475569;
--shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
/* ===== RESPONSIVE FÜR KIOSK-DISPLAYS ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid-4,
.grid-3,
.grid-2 { grid-template-columns: 1fr; }
.nav {
flex-direction: column;
gap: 0.5rem;
}
}
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
/* Deaktivierung nicht benötigter Features für Kiosk */
* {
/* Keine Touch-Events */
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Nur notwendige Elemente selektierbar */
input,
textarea {
-webkit-user-select: text;
user-select: text;
touch-action: manipulation;
}
/* Optimierte Scrolling-Performance */
* {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* GPU-Acceleration nur wo nötig */
.card:hover,
.btn:hover {
will-change: transform;
}
/* Minimale Animationen für bessere Performance */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* Print-Optimierung (falls Kiosk drucken kann) */
@media print {
.nav,
.btn {
display: none;
}
.card {
box-shadow: none;
border: 1px solid #000;
}
}
/* ===== LAYOUT SHIFT PREVENTION ===== */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Container für stabile Layouts */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
contain: layout;
}
/* ===== KIOSK-SPEZIFISCHE OPTIMIERUNGEN ===== */
/* Vollbildmodus-Unterstützung */
html,
body {
height: 100%;
overflow-x: hidden;
}
/* Fokus-Management für Keyboard-Navigation */
:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Kein Selection-Highlighting */
::selection {
background: transparent;
}
/* Optimierte Font-Loading */
@font-face {
font-family: 'system-ui';
font-display: swap;
}
/**
* Minimales Icon-Set für Kiosk-Modus
* SVG-basierte Icons als CSS-Pseudo-Elemente für beste Performance
* Ersetzt FontAwesome für deutlich kleinere Bundle-Größe
*/
/* Icon-Basis-Klasse */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
/* ===== DRUCKER ICONS ===== */
.icon-printer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
.icon-print {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
/* ===== STATUS ICONS ===== */
.icon-check {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-warning {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.icon-error {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.icon-offline {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
/* ===== NAVIGATION ICONS ===== */
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}
.icon-users {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A3.012 3.012 0 0 0 16.43 6c-.68 0-1.3.27-1.77.72L12 8.5l-2.66-1.78C8.87 6.27 8.25 6 7.57 6c-1.31 0-2.42.83-2.83 2L2.5 16H5v6h2v-6h2v6h2zm-6.5-10.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S12 9.17 12 10s.67 1.5 1.5 1.5z'/%3E%3C/svg%3E");
}
.icon-dashboard {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}
/* ===== ACTION ICONS ===== */
.icon-plus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.icon-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.icon-delete {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.icon-refresh {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
/* ===== POWER/CONNECTION ICONS ===== */
.icon-power {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}
.icon-wifi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E");
}
/* ===== DOKUMENT ICONS ===== */
.icon-file {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}
.icon-queue {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E");
}
/* ===== INFO ICONS ===== */
.icon-info {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M13,17H11V11H13M13,9H11V7H13'/%3E%3C/svg%3E");
}
.icon-time {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.7L16.2,16.2Z'/%3E%3C/svg%3E");
}
/* ===== ARROW ICONS ===== */
.icon-arrow-right {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-arrow-down {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}
/* ===== HOVER-STATES ===== */
.btn:hover .icon,
.nav-item:hover .icon {
opacity: 0.8;
}
/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
.icon-printer,
.icon-print,
.icon-home,
.icon-settings,
.icon-users,
.icon-dashboard,
.icon-plus,
.icon-edit,
.icon-refresh,
.icon-file,
.icon-queue,
.icon-time,
.icon-arrow-right,
.icon-arrow-down {
filter: brightness(2);
}
}
/* ===== RESPONSIVE ICON-SIZES ===== */
@media (max-width: 768px) {
.icon { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; }
}

498
static/css/build/kiosk-7db6c4e3.css Normal file
View File

@@ -0,0 +1,498 @@
/* MYP Platform - Kiosk Optimierte CSS Bundle */
/* Generiert am: 2025-06-01 23:40:48 */
/**
* MYP Platform - Kiosk-Optimierte CSS
* Maximale Performance für Offline-Kiosk-Umgebung
* Keine Touch-Events, minimale Animationen, optimierte Rendering-Performance
*/
/* ===== CRITICAL INLINE STYLES (sollten im HTML-Head stehen) ===== */
:root {
/* Reduzierte Farbvariablen für bessere Performance */
--primary: #0073ce;
--primary-dark: #005a9f;
--bg: #fafbfc;
--surface: #ffffff;
--text: #111827;
--text-muted: #6b7280;
--border: #e5e7eb;
--shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* CSS Containment für bessere Performance */
* {
contain: layout style;
}
/* Basis-Reset ohne aufwendige Normalisierung */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
contain: layout style paint;
/* Optimiert für Kiosk-Rendering */
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
/* ===== LAYOUT OPTIMIERUNGEN ===== */
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem;
contain: layout style;
}
.nav {
display: flex;
gap: 1rem;
contain: layout;
}
.nav-item {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
color: var(--text-muted);
transition: background-color 0.1s ease; /* Minimale Transition */
}
.nav-item:hover {
background: var(--bg);
color: var(--text);
}
.nav-item.active {
background: var(--primary);
color: white;
}
/* ===== OPTIMIERTE KARTEN ===== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
box-shadow: var(--shadow);
contain: layout style paint;
}
.card:hover {
transform: translateY(-1px); /* Minimaler Hover-Effekt */
}
/* ===== BUTTONS OHNE KOMPLEXE ANIMATIONEN ===== */
.btn {
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.1s ease;
contain: layout style;
}
.btn:hover {
background: var(--primary-dark);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg);
}
/* ===== INPUTS OPTIMIERT ===== */
.input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
width: 100%;
transition: border-color 0.1s ease;
contain: layout style;
}
.input:focus {
outline: none;
border-color: var(--primary);
}
/* ===== TABELLEN OHNE KOMPLEXE EFFEKTE ===== */
.table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 8px;
overflow: hidden;
contain: layout;
}
.table th {
background: var(--bg);
padding: 1rem;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.table tr:hover {
background: var(--bg);
}
/* ===== STATUS BADGES VEREINFACHT ===== */
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-printing { background: #dbeafe; color: #1e40af; }
/* ===== GRID LAYOUTS OPTIMIERT ===== */
.grid {
display: grid;
gap: 1rem;
contain: layout;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ===== UTILITIES MINIMAL ===== */
.flex { display: flex; contain: layout; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.bg-white { background: var(--surface); }
.bg-gray-50 { background: var(--bg); }
.text-gray-600 { color: var(--text-muted); }
.text-blue-600 { color: var(--primary); }
/* ===== DARK MODE MINIMAL ===== */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e293b;
--surface: #334155;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #475569;
--shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
/* ===== RESPONSIVE FÜR KIOSK-DISPLAYS ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid-4,
.grid-3,
.grid-2 { grid-template-columns: 1fr; }
.nav {
flex-direction: column;
gap: 0.5rem;
}
}
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
/* Deaktivierung nicht benötigter Features für Kiosk */
* {
/* Keine Touch-Events */
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Nur notwendige Elemente selektierbar */
input,
textarea {
-webkit-user-select: text;
user-select: text;
touch-action: manipulation;
}
/* Optimierte Scrolling-Performance */
* {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* GPU-Acceleration nur wo nötig */
.card:hover,
.btn:hover {
will-change: transform;
}
/* Minimale Animationen für bessere Performance */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* Print-Optimierung (falls Kiosk drucken kann) */
@media print {
.nav,
.btn {
display: none;
}
.card {
box-shadow: none;
border: 1px solid #000;
}
}
/* ===== LAYOUT SHIFT PREVENTION ===== */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Container für stabile Layouts */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
contain: layout;
}
/* ===== KIOSK-SPEZIFISCHE OPTIMIERUNGEN ===== */
/* Vollbildmodus-Unterstützung */
html,
body {
height: 100%;
overflow-x: hidden;
}
/* Fokus-Management für Keyboard-Navigation */
:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Kein Selection-Highlighting */
::selection {
background: transparent;
}
/* Optimierte Font-Loading */
@font-face {
font-family: 'system-ui';
font-display: swap;
}
/**
* Minimales Icon-Set für Kiosk-Modus
* SVG-basierte Icons als CSS-Pseudo-Elemente für beste Performance
* Ersetzt FontAwesome für deutlich kleinere Bundle-Größe
*/
/* Icon-Basis-Klasse */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
/* ===== DRUCKER ICONS ===== */
.icon-printer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
.icon-print {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
/* ===== STATUS ICONS ===== */
.icon-check {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-warning {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.icon-error {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.icon-offline {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
/* ===== NAVIGATION ICONS ===== */
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}
.icon-users {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A3.012 3.012 0 0 0 16.43 6c-.68 0-1.3.27-1.77.72L12 8.5l-2.66-1.78C8.87 6.27 8.25 6 7.57 6c-1.31 0-2.42.83-2.83 2L2.5 16H5v6h2v-6h2v6h2zm-6.5-10.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S12 9.17 12 10s.67 1.5 1.5 1.5z'/%3E%3C/svg%3E");
}
.icon-dashboard {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}
/* ===== ACTION ICONS ===== */
.icon-plus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.icon-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.icon-delete {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.icon-refresh {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
/* ===== POWER/CONNECTION ICONS ===== */
.icon-power {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}
.icon-wifi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E");
}
/* ===== DOKUMENT ICONS ===== */
.icon-file {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}
.icon-queue {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E");
}
/* ===== INFO ICONS ===== */
.icon-info {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M13,17H11V11H13M13,9H11V7H13'/%3E%3C/svg%3E");
}
.icon-time {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.7L16.2,16.2Z'/%3E%3C/svg%3E");
}
/* ===== ARROW ICONS ===== */
.icon-arrow-right {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-arrow-down {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}
/* ===== HOVER-STATES ===== */
.btn:hover .icon,
.nav-item:hover .icon {
opacity: 0.8;
}
/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
.icon-printer,
.icon-print,
.icon-home,
.icon-settings,
.icon-users,
.icon-dashboard,
.icon-plus,
.icon-edit,
.icon-refresh,
.icon-file,
.icon-queue,
.icon-time,
.icon-arrow-right,
.icon-arrow-down {
filter: brightness(2);
}
}
/* ===== RESPONSIVE ICON-SIZES ===== */
@media (max-width: 768px) {
.icon { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; }
}

497
static/css/build/kiosk-no-fa.css Normal file
View File

@@ -0,0 +1,497 @@
/* MYP Platform - Kiosk Optimierte CSS Bundle */
/* Generiert am: 2025-06-01 23:40:48 */
/**
* MYP Platform - Kiosk-Optimierte CSS
* Maximale Performance für Offline-Kiosk-Umgebung
* Keine Touch-Events, minimale Animationen, optimierte Rendering-Performance
*/
/* ===== CRITICAL INLINE STYLES (sollten im HTML-Head stehen) ===== */
:root {
/* Reduzierte Farbvariablen für bessere Performance */
--primary: #0073ce;
--primary-dark: #005a9f;
--bg: #fafbfc;
--surface: #ffffff;
--text: #111827;
--text-muted: #6b7280;
--border: #e5e7eb;
--shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* CSS Containment für bessere Performance */
* {
contain: layout style;
}
/* Basis-Reset ohne aufwendige Normalisierung */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
contain: layout style paint;
/* Optimiert für Kiosk-Rendering */
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
/* ===== LAYOUT OPTIMIERUNGEN ===== */
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem;
contain: layout style;
}
.nav {
display: flex;
gap: 1rem;
contain: layout;
}
.nav-item {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
color: var(--text-muted);
transition: background-color 0.1s ease; /* Minimale Transition */
}
.nav-item:hover {
background: var(--bg);
color: var(--text);
}
.nav-item.active {
background: var(--primary);
color: white;
}
/* ===== OPTIMIERTE KARTEN ===== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
box-shadow: var(--shadow);
contain: layout style paint;
}
.card:hover {
transform: translateY(-1px); /* Minimaler Hover-Effekt */
}
/* ===== BUTTONS OHNE KOMPLEXE ANIMATIONEN ===== */
.btn {
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.1s ease;
contain: layout style;
}
.btn:hover {
background: var(--primary-dark);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg);
}
/* ===== INPUTS OPTIMIERT ===== */
.input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
width: 100%;
transition: border-color 0.1s ease;
contain: layout style;
}
.input:focus {
outline: none;
border-color: var(--primary);
}
/* ===== TABELLEN OHNE KOMPLEXE EFFEKTE ===== */
.table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 8px;
overflow: hidden;
contain: layout;
}
.table th {
background: var(--bg);
padding: 1rem;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.table tr:hover {
background: var(--bg);
}
/* ===== STATUS BADGES VEREINFACHT ===== */
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-printing { background: #dbeafe; color: #1e40af; }
/* ===== GRID LAYOUTS OPTIMIERT ===== */
.grid {
display: grid;
gap: 1rem;
contain: layout;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ===== UTILITIES MINIMAL ===== */
.flex { display: flex; contain: layout; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.bg-white { background: var(--surface); }
.bg-gray-50 { background: var(--bg); }
.text-gray-600 { color: var(--text-muted); }
.text-blue-600 { color: var(--primary); }
/* ===== DARK MODE MINIMAL ===== */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e293b;
--surface: #334155;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #475569;
--shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
/* ===== RESPONSIVE FÜR KIOSK-DISPLAYS ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid-4,
.grid-3,
.grid-2 { grid-template-columns: 1fr; }
.nav {
flex-direction: column;
gap: 0.5rem;
}
}
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
/* Deaktivierung nicht benötigter Features für Kiosk */
* {
/* Keine Touch-Events */
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Nur notwendige Elemente selektierbar */
input,
textarea {
-webkit-user-select: text;
user-select: text;
touch-action: manipulation;
}
/* Optimierte Scrolling-Performance */
* {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* GPU-Acceleration nur wo nötig */
.card:hover,
.btn:hover {
will-change: transform;
}
/* Minimale Animationen für bessere Performance */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* Print-Optimierung (falls Kiosk drucken kann) */
@media print {
.nav,
.btn {
display: none;
}
.card {
box-shadow: none;
border: 1px solid #000;
}
}
/* ===== LAYOUT SHIFT PREVENTION ===== */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Container für stabile Layouts */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
contain: layout;
}
/* ===== KIOSK-SPEZIFISCHE OPTIMIERUNGEN ===== */
/* Vollbildmodus-Unterstützung */
html,
body {
height: 100%;
overflow-x: hidden;
}
/* Fokus-Management für Keyboard-Navigation */
:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Kein Selection-Highlighting */
::selection {
background: transparent;
}
/* Optimierte Font-Loading */
@font-face {
font-family: 'system-ui';
font-display: swap;
}
/**
* Minimales Icon-Set für Kiosk-Modus
* SVG-basierte Icons als CSS-Pseudo-Elemente für beste Performance
*/
/* Icon-Basis-Klasse */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
/* ===== DRUCKER ICONS ===== */
.icon-printer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
.icon-print {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
/* ===== STATUS ICONS ===== */
.icon-check {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-warning {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.icon-error {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.icon-offline {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
/* ===== NAVIGATION ICONS ===== */
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}
.icon-users {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A3.012 3.012 0 0 0 16.43 6c-.68 0-1.3.27-1.77.72L12 8.5l-2.66-1.78C8.87 6.27 8.25 6 7.57 6c-1.31 0-2.42.83-2.83 2L2.5 16H5v6h2v-6h2v6h2zm-6.5-10.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S12 9.17 12 10s.67 1.5 1.5 1.5z'/%3E%3C/svg%3E");
}
.icon-dashboard {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}
/* ===== ACTION ICONS ===== */
.icon-plus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.icon-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.icon-delete {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.icon-refresh {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
/* ===== POWER/CONNECTION ICONS ===== */
.icon-power {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}
.icon-wifi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E");
}
/* ===== DOKUMENT ICONS ===== */
.icon-file {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}
.icon-queue {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E");
}
/* ===== INFO ICONS ===== */
.icon-info {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M13,17H11V11H13M13,9H11V7H13'/%3E%3C/svg%3E");
}
.icon-time {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.7L16.2,16.2Z'/%3E%3C/svg%3E");
}
/* ===== ARROW ICONS ===== */
.icon-arrow-right {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-arrow-down {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}
/* ===== HOVER-STATES ===== */
.btn:hover .icon,
.nav-item:hover .icon {
opacity: 0.8;
}
/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
.icon-printer,
.icon-print,
.icon-home,
.icon-settings,
.icon-users,
.icon-dashboard,
.icon-plus,
.icon-edit,
.icon-refresh,
.icon-file,
.icon-queue,
.icon-time,
.icon-arrow-right,
.icon-arrow-down {
filter: brightness(2);
}
}
/* ===== RESPONSIVE ICON-SIZES ===== */
@media (max-width: 768px) {
.icon { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; }
}

498
static/css/build/kiosk-production.css Normal file
View File

@@ -0,0 +1,498 @@
/* MYP Platform - Kiosk Optimierte CSS Bundle */
/* Generiert am: 2025-06-01 23:40:48 */
/**
* MYP Platform - Kiosk-Optimierte CSS
* Maximale Performance für Offline-Kiosk-Umgebung
* Keine Touch-Events, minimale Animationen, optimierte Rendering-Performance
*/
/* ===== CRITICAL INLINE STYLES (sollten im HTML-Head stehen) ===== */
:root {
/* Reduzierte Farbvariablen für bessere Performance */
--primary: #0073ce;
--primary-dark: #005a9f;
--bg: #fafbfc;
--surface: #ffffff;
--text: #111827;
--text-muted: #6b7280;
--border: #e5e7eb;
--shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* CSS Containment für bessere Performance */
* {
contain: layout style;
}
/* Basis-Reset ohne aufwendige Normalisierung */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
contain: layout style paint;
/* Optimiert für Kiosk-Rendering */
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
/* ===== LAYOUT OPTIMIERUNGEN ===== */
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem;
contain: layout style;
}
.nav {
display: flex;
gap: 1rem;
contain: layout;
}
.nav-item {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
color: var(--text-muted);
transition: background-color 0.1s ease; /* Minimale Transition */
}
.nav-item:hover {
background: var(--bg);
color: var(--text);
}
.nav-item.active {
background: var(--primary);
color: white;
}
/* ===== OPTIMIERTE KARTEN ===== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
box-shadow: var(--shadow);
contain: layout style paint;
}
.card:hover {
transform: translateY(-1px); /* Minimaler Hover-Effekt */
}
/* ===== BUTTONS OHNE KOMPLEXE ANIMATIONEN ===== */
.btn {
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.1s ease;
contain: layout style;
}
.btn:hover {
background: var(--primary-dark);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg);
}
/* ===== INPUTS OPTIMIERT ===== */
.input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
width: 100%;
transition: border-color 0.1s ease;
contain: layout style;
}
.input:focus {
outline: none;
border-color: var(--primary);
}
/* ===== TABELLEN OHNE KOMPLEXE EFFEKTE ===== */
.table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 8px;
overflow: hidden;
contain: layout;
}
.table th {
background: var(--bg);
padding: 1rem;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.table tr:hover {
background: var(--bg);
}
/* ===== STATUS BADGES VEREINFACHT ===== */
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-printing { background: #dbeafe; color: #1e40af; }
/* ===== GRID LAYOUTS OPTIMIERT ===== */
.grid {
display: grid;
gap: 1rem;
contain: layout;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ===== UTILITIES MINIMAL ===== */
.flex { display: flex; contain: layout; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.bg-white { background: var(--surface); }
.bg-gray-50 { background: var(--bg); }
.text-gray-600 { color: var(--text-muted); }
.text-blue-600 { color: var(--primary); }
/* ===== DARK MODE MINIMAL ===== */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e293b;
--surface: #334155;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #475569;
--shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
/* ===== RESPONSIVE FÜR KIOSK-DISPLAYS ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid-4,
.grid-3,
.grid-2 { grid-template-columns: 1fr; }
.nav {
flex-direction: column;
gap: 0.5rem;
}
}
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
/* Deaktivierung nicht benötigter Features für Kiosk */
* {
/* Keine Touch-Events */
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Nur notwendige Elemente selektierbar */
input,
textarea {
-webkit-user-select: text;
user-select: text;
touch-action: manipulation;
}
/* Optimierte Scrolling-Performance */
* {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* GPU-Acceleration nur wo nötig */
.card:hover,
.btn:hover {
will-change: transform;
}
/* Minimale Animationen für bessere Performance */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* Print-Optimierung (falls Kiosk drucken kann) */
@media print {
.nav,
.btn {
display: none;
}
.card {
box-shadow: none;
border: 1px solid #000;
}
}
/* ===== LAYOUT SHIFT PREVENTION ===== */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Container für stabile Layouts */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
contain: layout;
}
/* ===== KIOSK-SPEZIFISCHE OPTIMIERUNGEN ===== */
/* Vollbildmodus-Unterstützung */
html,
body {
height: 100%;
overflow-x: hidden;
}
/* Fokus-Management für Keyboard-Navigation */
:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Kein Selection-Highlighting */
::selection {
background: transparent;
}
/* Optimierte Font-Loading */
@font-face {
font-family: 'system-ui';
font-display: swap;
}
/**
* Minimales Icon-Set für Kiosk-Modus
* SVG-basierte Icons als CSS-Pseudo-Elemente für beste Performance
* Ersetzt FontAwesome für deutlich kleinere Bundle-Größe
*/
/* Icon-Basis-Klasse */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
/* ===== DRUCKER ICONS ===== */
.icon-printer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
.icon-print {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
/* ===== STATUS ICONS ===== */
.icon-check {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-warning {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.icon-error {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.icon-offline {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
/* ===== NAVIGATION ICONS ===== */
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}
.icon-users {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A3.012 3.012 0 0 0 16.43 6c-.68 0-1.3.27-1.77.72L12 8.5l-2.66-1.78C8.87 6.27 8.25 6 7.57 6c-1.31 0-2.42.83-2.83 2L2.5 16H5v6h2v-6h2v6h2zm-6.5-10.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S12 9.17 12 10s.67 1.5 1.5 1.5z'/%3E%3C/svg%3E");
}
.icon-dashboard {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}
/* ===== ACTION ICONS ===== */
.icon-plus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.icon-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.icon-delete {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.icon-refresh {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
/* ===== POWER/CONNECTION ICONS ===== */
.icon-power {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}
.icon-wifi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E");
}
/* ===== DOKUMENT ICONS ===== */
.icon-file {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}
.icon-queue {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E");
}
/* ===== INFO ICONS ===== */
.icon-info {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M13,17H11V11H13M13,9H11V7H13'/%3E%3C/svg%3E");
}
.icon-time {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.7L16.2,16.2Z'/%3E%3C/svg%3E");
}
/* ===== ARROW ICONS ===== */
.icon-arrow-right {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}
.icon-arrow-down {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}
/* ===== HOVER-STATES ===== */
.btn:hover .icon,
.nav-item:hover .icon {
opacity: 0.8;
}
/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
.icon-printer,
.icon-print,
.icon-home,
.icon-settings,
.icon-users,
.icon-dashboard,
.icon-plus,
.icon-edit,
.icon-refresh,
.icon-file,
.icon-queue,
.icon-time,
.icon-arrow-right,
.icon-arrow-down {
filter: brightness(2);
}
}
/* ===== RESPONSIVE ICON-SIZES ===== */
@media (max-width: 768px) {
.icon { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; }
}

287
static/css/caching-optimizations.css Normal file
View File

@@ -0,0 +1,287 @@
/**
* MYP Platform - CSS Caching-Optimierungen für Raspberry Pi
* Performance-optimierte Styles ohne GPU-intensive Effekte
*/
/* ===== KRITISCHE ABOVE-THE-FOLD STYLES - RASPBERRY PI OPTIMIERT ===== */
/* Diese Styles sollten inline im HTML-Head geladen werden */
.critical-header {
background: rgba(255, 255, 255, 0.98);
position: sticky;
top: 0;
z-index: 1000;
/* Entfernt: backdrop-filter, box-shadow */
}
.critical-nav {
display: flex;
align-items: center;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.critical-logo {
font-weight: 700;
font-size: 1.25rem;
color: #0073ce;
}
.critical-main {
min-height: 100vh;
background: #fafbfc;
/* Entfernt: gradient für bessere Performance */
}
/* ===== LAZY LOADING PLACEHOLDER - VEREINFACHT ===== */
.lazy-placeholder {
background: #f0f0f0;
border-radius: 4px;
/* Entfernt: gradient und animation */
}
.dark .lazy-placeholder {
background: #374151;
/* Entfernt: gradient und animation */
}
/* ===== PRELOAD HINTS ===== */
.preload-image {
content-visibility: auto;
contain-intrinsic-size: 300px 200px;
}
.preload-component {
content-visibility: auto;
contain-intrinsic-size: 100px;
}
/* ===== CACHE-OPTIMIERTE KOMPONENTEN - RASPBERRY PI OPTIMIERT ===== */
.cache-card {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(229, 231, 235, 0.5);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
contain: layout style;
/* Entfernt: transition, hover-transform, paint containment */
}
.cache-button {
background: #0073ce;
color: white;
border: none;
border-radius: 6px;
padding: 0.5rem 1rem;
font-weight: 600;
contain: layout style;
/* Entfernt: transition */
}
.cache-button:hover {
background: #005a9f;
}
.cache-input {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(229, 231, 235, 0.8);
border-radius: 4px;
padding: 0.5rem;
contain: layout style;
/* Entfernt: transition, box-shadow */
}
.cache-input:focus {
outline: none;
border-color: #0073ce;
/* Entfernt: box-shadow */
}
/* ===== LAYOUT SHIFT PREVENTION ===== */
.prevent-cls {
min-height: 200px;
contain: layout;
}
.image-container {
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 8px;
background: #f3f4f6;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
/* Entfernt: transition */
}
.image-container img[loading="lazy"] {
opacity: 0;
}
.image-container img[loading="lazy"].loaded {
opacity: 1;
}
/* ===== OPTIMIERTE TYPOGRAPHY ===== */
.text-heading {
font-weight: 700;
line-height: 1.2;
color: #111827;
contain: layout style;
}
.text-body {
line-height: 1.6;
color: #374151;
contain: layout style;
}
.text-muted {
color: #6b7280;
contain: layout style;
}
/* ===== DARK MODE CACHE OPTIMIZATIONS - VEREINFACHT ===== */
.dark .cache-card {
background: rgba(30, 41, 59, 0.98);
border-color: rgba(100, 116, 139, 0.3);
}
.dark .cache-input {
background: rgba(30, 41, 59, 0.98);
border-color: rgba(100, 116, 139, 0.5);
color: #e2e8f0;
}
.dark .text-heading {
color: #f8fafc;
}
.dark .text-body {
color: #e2e8f0;
}
.dark .text-muted {
color: #94a3b8;
}
.dark .image-container {
background: #374151;
}
/* ===== RESPONSIVE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
.critical-nav {
padding: 0.75rem;
}
.cache-card {
padding: 0.75rem;
margin-bottom: 0.75rem;
}
.cache-button {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
}
}
/* ===== PRINT OPTIMIZATIONS ===== */
@media print {
.critical-header,
.cache-button {
display: none;
}
.cache-card {
border: 1px solid #000;
break-inside: avoid;
}
}
/* ===== ALLE GPU ACCELERATION ENTFERNT ===== */
/* GPU-Beschleunigung ist auf Raspberry Pi problematisch */
/* ===== NUR FADE-IN OHNE TRANSFORM ===== */
.fade-in-optimized {
opacity: 0;
/* Entfernt: transform und alle transform-Animationen */
}
.fade-in-optimized.visible {
opacity: 1;
/* Nur opacity change */
}
/* ===== CONTAINER QUERIES SUPPORT ===== */
@container (min-width: 300px) {
.cache-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: center;
}
}
/* ===== CONTENT VISIBILITY OPTIMIZATIONS ===== */
.auto-height {
content-visibility: auto;
contain-intrinsic-size: 0 200px;
}
.hidden-content {
content-visibility: hidden;
}
/* ===== REDUCED MOTION PREFERENCES - ERWEITERT ===== */
@media (prefers-reduced-motion: reduce) {
.fade-in-optimized,
.cache-card,
.cache-button,
.cache-input {
transition: none !important;
transform: none !important;
animation: none !important;
}
.lazy-placeholder {
animation: none !important;
background: #f0f0f0 !important;
}
}
/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
.cache-card {
border-width: 2px;
border-color: #000;
}
.cache-button {
border: 2px solid #000;
}
.cache-input {
border-width: 2px;
border-color: #000;
}
}
/* ===== RASPBERRY PI SPECIFIC OPTIMIERUNGEN ===== */
.raspberry-pi-optimized {
/* Minimale CSS Properties */
/* Keine will-change */
/* Keine Transforms */
/* Keine Shadows */
/* Nur opacity und color Transitions */
transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.performance-critical {
/* Für kritische Bereiche */
contain: layout style;
/* Keine paint containment */
}

BIN
static/css/caching-optimizations.css.gz Normal file
View File

Binary file not shown.

1
static/css/caching-optimizations.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.critical-header{background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.06)}.critical-nav{display:flex;align-items:center;padding:1rem;max-width:1200px;margin:0 auto}.critical-logo{font-weight:700;font-size:1.25rem;color:#0073ce}.critical-main{min-height:100vh;background:linear-gradient(135deg,#fafbfc 0,#f5f7f9 100%)}.lazy-placeholder{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite ease-in-out;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.dark .lazy-placeholder{background:linear-gradient(90deg,#374151 25%,#4b5563 50%,#374151 75%);background-size:200% 100%}.preload-image{content-visibility:auto;contain-intrinsic-size:300px 200px}.preload-component{content-visibility:auto;contain-intrinsic-size:100px}.cache-card{background:rgba(255,255,255,0.9);border:1px solid rgba(229,231,235,0.5);border-radius:8px;padding:1rem;margin-bottom:1rem;transition:transform .2s ease;contain:layout style paint}.cache-card:hover{transform:translateY(-1px)}.cache-button{background:#0073ce;color:white;border:0;border-radius:6px;padding:.5rem 1rem;font-weight:600;transition:background-color .2s ease;contain:layout style}.cache-button:hover{background:#005a9f}.cache-input{background:rgba(255,255,255,0.9);border:1px solid rgba(229,231,235,0.8);border-radius:4px;padding:.5rem;transition:border-color .2s ease;contain:layout style}.cache-input:focus{outline:0;border-color:#0073ce;box-shadow:0 0 0 2px rgba(0,115,206,0.1)}.prevent-cls{min-height:200px;contain:layout}.image-container{aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#f3f4f6}.image-container img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.image-container img[loading="lazy"]{opacity:0}.image-container img[loading="lazy"].loaded{opacity:1}.text-heading{font-weight:700;line-height:1.2;color:#111827;contain:layout style}.text-body{line-height:1.6;color:#374151;contain:layout style}.text-muted{color:#6b7280;contain:layout style}.dark .cache-card{background:rgba(30,41,59,0.9);border-color:rgba(100,116,139,0.3)}.dark .cache-input{background:rgba(30,41,59,0.9);border-color:rgba(100,116,139,0.5);color:#e2e8f0}.dark .text-heading{color:#f8fafc}.dark .text-body{color:#e2e8f0}.dark .text-muted{color:#94a3b8}.dark .image-container{background:#374151}@media(max-width:768px){.critical-nav{padding:.75rem}.cache-card{padding:.75rem;margin-bottom:.75rem}.cache-button{padding:.75rem 1.25rem;font-size:.875rem}}@media print{.critical-header,.cache-button{display:none}.cache-card{box-shadow:none;border:1px solid #000;break-inside:avoid}}.gpu-accelerated{transform:translateZ(0);will-change:transform}.fade-in-optimized{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.fade-in-optimized.visible{opacity:1;transform:translateY(0)}@container(min-width:300px){.cache-card{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}}.auto-height{content-visibility:auto;contain-intrinsic-size:0 200px}.hidden-content{content-visibility:hidden}@media(prefers-reduced-motion:reduce){.fade-in-optimized,.cache-card,.cache-button,.cache-input{transition:none !important}.lazy-placeholder{animation:none !important;background:#f0f0f0 !important}}@media(prefers-contrast:high){.cache-card{border-width:2px;border-color:#000}.cache-button{border:2px solid #000}.cache-input{border-width:2px;border-color:#000}}

BIN
static/css/caching-optimizations.min.css.gz Normal file
View File

Binary file not shown.

520
static/css/components-optimized.css Normal file
View File

@@ -0,0 +1,520 @@
/**
* Optimized MYP Platform Components for Raspberry Pi
* All transitions and animations removed for performance
*/
@layer components {
/* Karten und Container - Keine Transitions */
.card {
@apply bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 m-4;
}
.card-hover {
@apply hover:shadow-xl hover:shadow-slate-300/50 dark:hover:shadow-slate-900/50 hover:bg-slate-50 dark:hover:bg-slate-800;
}
.container-panel {
@apply bg-slate-50 dark:bg-slate-800 rounded-xl p-6 m-4 border border-slate-200 dark:border-slate-700 shadow-sm;
}
/* Formulare - Keine Transitions */
.form-input {
@apply w-full rounded-xl border-2 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-3 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 dark:focus:ring-blue-400/20;
}
.form-label {
@apply block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2;
}
.form-group {
@apply mb-6;
}
.form-help {
@apply mt-1 text-xs text-slate-500 dark:text-slate-400;
}
.form-error {
@apply mt-1 text-xs text-red-600 dark:text-red-400 font-medium;
}
/* Buttons - Keine Transitions */
.btn-icon {
@apply inline-flex items-center justify-center rounded-xl p-3 shadow-md hover:shadow-lg;
}
.btn-text {
@apply inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold shadow-md hover:shadow-lg;
}
.btn-rounded {
@apply rounded-full;
}
.btn-sm {
@apply px-4 py-2 text-xs;
}
.btn-lg {
@apply px-8 py-4 text-base;
}
/* Badges und Tags - Keine Transitions */
.badge {
@apply inline-flex items-center rounded-full px-3 py-1.5 text-xs font-semibold shadow-sm;
}
.badge-blue {
@apply bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700;
}
.badge-green {
@apply bg-green-100 text-green-800 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700;
}
.badge-red {
@apply bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700;
}
.badge-yellow {
@apply bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-700;
}
.badge-purple {
@apply bg-purple-100 text-purple-800 border border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700;
}
/* Status Anzeigen - Keine Animation */
.status-dot {
@apply relative flex h-3 w-3 rounded-full shadow-sm;
}
.status-dot::after {
@apply absolute top-0 left-0 h-full w-full rounded-full content-[''] opacity-75;
}
.status-online {
@apply bg-green-500 dark:bg-green-400;
}
.status-online::after {
@apply bg-green-500 dark:bg-green-400;
}
.status-offline {
@apply bg-red-500 dark:bg-red-400;
}
.status-warning {
@apply bg-yellow-500 dark:bg-yellow-400;
}
.status-warning::after {
@apply bg-yellow-500 dark:bg-yellow-400;
}
/* Tabellen - Keine Transitions */
.table-container {
@apply w-full overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700 shadow-lg bg-white dark:bg-slate-900;
}
.table-styled {
@apply w-full whitespace-nowrap text-left text-sm text-slate-700 dark:text-slate-300;
}
.table-styled thead {
@apply bg-slate-100 dark:bg-slate-800;
}
.table-styled th {
@apply px-6 py-4 font-semibold text-slate-900 dark:text-white;
}
.table-styled tbody tr {
@apply border-t border-slate-200 dark:border-slate-700;
}
.table-styled tbody tr:hover {
@apply bg-slate-50 dark:bg-slate-800/50;
}
.table-styled td {
@apply px-6 py-4;
}
/* Alerts - Keine Transitions */
.alert {
@apply rounded-xl border-2 p-6 mb-4 shadow-lg;
}
.alert-info {
@apply bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-600 text-blue-900 dark:text-blue-200;
}
.alert-success {
@apply bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-600 text-green-900 dark:text-green-200;
}
.alert-warning {
@apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-300 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200;
}
.alert-error {
@apply bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-600 text-red-900 dark:text-red-200;
}
/* Navigation - Keine Transitions */
.nav-tab {
@apply inline-flex items-center gap-2 px-6 py-3 border-b-2 text-sm font-semibold;
}
.nav-tab-active {
@apply border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 rounded-t-lg;
}
.nav-tab-inactive {
@apply border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-t-lg;
}
/* Navigation Links - Keine Transitions */
.nav-link {
@apply flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white font-medium;
}
.nav-link.active {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold shadow-sm;
}
/* Printer Status - Statisch */
.printer-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.printer-ready {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.printer-busy {
@apply bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-200 dark:border-orange-700;
}
.printer-error {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.printer-offline {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.printer-maintenance {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Job Status - Statisch */
.job-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.job-queued {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.job-printing {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-700;
}
.job-completed {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.job-failed {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.job-cancelled {
@apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700;
}
.job-paused {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Buttons - Keine Transitions */
.btn {
@apply px-6 py-3 rounded-xl focus:outline-none focus:ring-4 shadow-lg hover:shadow-xl font-semibold;
}
.btn-primary {
@apply btn bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500/50 shadow-blue-500/25;
}
.btn-secondary {
@apply btn bg-slate-200 hover:bg-slate-300 text-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white focus:ring-slate-500/50;
}
.btn-danger {
@apply btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500/50 shadow-red-500/25;
}
.btn-success {
@apply btn bg-green-600 hover:bg-green-700 text-white focus:ring-green-500/50 shadow-green-500/25;
}
/* Mercedes Design-Komponenten - Vereinfacht */
.mercedes-glass {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.dark .mercedes-glass {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Gradients - Statisch */
.professional-gradient {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%);
}
.dark .professional-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
}
/* Mercedes-Pattern */
.mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 60px 60px;
}
.dark .mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 2px, transparent 2px);
background-size: 60px 60px;
}
/* Schatten - Statisch */
.professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dark .professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 8px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Button Styles - Vereinfacht */
.professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.dark .professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}
.professional-button:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}
.dark .professional-button:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.3);
}
/* Input Fields - Vereinfacht */
.input-field {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(203, 213, 225, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.dark .input-field {
background: rgba(51, 65, 85, 0.95);
border: 2px solid rgba(71, 85, 105, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.input-field:focus {
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
border-color: #3b82f6;
background: rgba(255, 255, 255, 1);
}
.dark .input-field:focus {
background: rgba(51, 65, 85, 1);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}
/* Cards - Vereinfacht */
.professional-card {
border-radius: 1.5rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(203, 213, 225, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.dark .professional-card {
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(71, 85, 105, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.professional-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.dark .professional-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
/* Navigation - Vereinfacht */
.nav-item {
position: relative;
border-radius: 0.75rem;
}
.nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.nav-item:hover::after,
.nav-item.active::after {
width: 100%;
}
/* Header-Stile */
.hero-header {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 1px solid rgba(203, 213, 225, 0.5);
}
.dark .hero-header {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(71, 85, 105, 0.5);
}
/* Container */
.main-container {
background: rgba(248, 250, 252, 0.8);
}
.dark .main-container {
background: rgba(15, 23, 42, 0.8);
}
/* Status Badges - Vereinfacht */
.status-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.025em;
}
/* Keine globalen Transitions */
* {
transition: none !important;
animation: none !important;
}
/* Interactive Hover - Vereinfacht */
.interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.dark .interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Loading States - Keine Animation */
.loading-shimmer {
background: #f1f5f9;
}
.dark .loading-shimmer {
background: #334155;
}
/* Focus Indicators */
.focus-ring:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
.dark .focus-ring:focus {
outline: 3px solid #60a5fa;
}
/* Typography */
.professional-title {
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.025em;
}
.dark .professional-title {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Responsive Design */
@media (max-width: 768px) {
.professional-shadow {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.professional-card {
border-radius: 1rem;
}
}
/* Keine Animationen */
.fade-in,
.slide-up {
/* Keine Animation */
}
/* Root Variablen */
:root {
--mercedes-primary: #3b82f6;
--mercedes-secondary: #64748b;
--mercedes-accent: #1d4ed8;
--shadow-light: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.3);
}
.dark {
--shadow-light: rgba(0, 0, 0, 0.2);
--shadow-dark: rgba(0, 0, 0, 0.5);
}
}

BIN
static/css/components-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/components-optimized.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/components-optimized.min.css.gz Normal file
View File

Binary file not shown.

604
static/css/components.css Normal file
View File

@@ -0,0 +1,604 @@
/**
* MYP Platform Komponenten-Bibliothek
* Erweiterte UI-Komponenten basierend auf Tailwind CSS
*/
@layer components {
/* Professionelle Mercedes-Benz Karten und Container */
.card {
@apply bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 m-4 transition-all duration-300;
}
.card-hover {
@apply hover:shadow-xl hover:shadow-slate-300/50 dark:hover:shadow-slate-900/50 hover:bg-slate-50 dark:hover:bg-slate-800 transform hover:-translate-y-1 transition-all duration-300;
}
.container-panel {
@apply bg-slate-50 dark:bg-slate-800 rounded-xl p-6 m-4 border border-slate-200 dark:border-slate-700 shadow-sm;
}
/* Professionelle Formulare */
.form-input {
@apply w-full rounded-xl border-2 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-3 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-all duration-300;
}
.form-label {
@apply block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2 transition-colors duration-300;
}
.form-group {
@apply mb-6;
}
.form-help {
@apply mt-1 text-xs text-slate-500 dark:text-slate-400 transition-colors duration-300;
}
.form-error {
@apply mt-1 text-xs text-red-600 dark:text-red-400 font-medium transition-colors duration-300;
}
/* Professionelle Buttons */
.btn-icon {
@apply inline-flex items-center justify-center rounded-xl p-3 transition-all duration-300 shadow-md hover:shadow-lg;
}
.btn-text {
@apply inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition-all duration-300 shadow-md hover:shadow-lg;
}
.btn-rounded {
@apply rounded-full;
}
.btn-sm {
@apply px-4 py-2 text-xs;
}
.btn-lg {
@apply px-8 py-4 text-base;
}
/* Professionelle Badges und Tags */
.badge {
@apply inline-flex items-center rounded-full px-3 py-1.5 text-xs font-semibold transition-all duration-300 shadow-sm;
}
.badge-blue {
@apply bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700;
}
.badge-green {
@apply bg-green-100 text-green-800 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700;
}
.badge-red {
@apply bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700;
}
.badge-yellow {
@apply bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-700;
}
.badge-purple {
@apply bg-purple-100 text-purple-800 border border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700;
}
/* Erweiterte Status Anzeigen */
.status-dot {
@apply relative flex h-3 w-3 rounded-full shadow-sm;
}
.status-dot::after {
@apply absolute top-0 left-0 h-full w-full rounded-full content-[''] animate-ping opacity-75;
}
.status-online {
@apply bg-green-500 dark:bg-green-400;
}
.status-online::after {
@apply bg-green-500 dark:bg-green-400;
}
.status-offline {
@apply bg-red-500 dark:bg-red-400;
}
.status-warning {
@apply bg-yellow-500 dark:bg-yellow-400;
}
.status-warning::after {
@apply bg-yellow-500 dark:bg-yellow-400;
}
/* Professionelle Tabellen */
.table-container {
@apply w-full overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700 shadow-lg bg-white dark:bg-slate-900;
}
.table-styled {
@apply w-full whitespace-nowrap text-left text-sm text-slate-700 dark:text-slate-300;
}
.table-styled thead {
@apply bg-slate-100 dark:bg-slate-800 transition-colors duration-300;
}
.table-styled th {
@apply px-6 py-4 font-semibold text-slate-900 dark:text-white transition-colors duration-300;
}
.table-styled tbody tr {
@apply border-t border-slate-200 dark:border-slate-700 transition-colors duration-300;
}
.table-styled tbody tr:hover {
@apply bg-slate-50 dark:bg-slate-800/50 transition-colors duration-300;
}
.table-styled td {
@apply px-6 py-4 transition-colors duration-300;
}
/* Professionelle Alert und Toast */
.alert {
@apply rounded-xl border-2 p-6 mb-4 transition-all duration-300 shadow-lg;
}
.alert-info {
@apply bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-600 text-blue-900 dark:text-blue-200;
}
.alert-success {
@apply bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-600 text-green-900 dark:text-green-200;
}
.alert-warning {
@apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-300 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200;
}
.alert-error {
@apply bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-600 text-red-900 dark:text-red-200;
}
/* Professionelle Navigation */
.nav-tab {
@apply inline-flex items-center gap-2 px-6 py-3 border-b-2 text-sm font-semibold transition-all duration-300;
}
.nav-tab-active {
@apply border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 rounded-t-lg;
}
.nav-tab-inactive {
@apply border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-t-lg;
}
/* Professionelle Navigation Links */
.nav-link {
@apply flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white transition-all duration-300 font-medium;
}
.nav-link.active {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold shadow-sm;
}
/* Erweiterte Printer Status */
.printer-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.printer-ready {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.printer-busy {
@apply bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-200 dark:border-orange-700;
}
.printer-error {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.printer-offline {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.printer-maintenance {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Erweiterte Job Status */
.job-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.job-queued {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.job-printing {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-700;
}
.job-completed {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.job-failed {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.job-cancelled {
@apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700;
}
.job-paused {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Professionelle Buttons für beide Modi */
.btn {
@apply px-6 py-3 rounded-xl transition-all duration-300 focus:outline-none focus:ring-4 shadow-lg hover:shadow-xl font-semibold;
}
.btn-primary {
@apply btn bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500/50 shadow-blue-500/25;
}
.btn-secondary {
@apply btn bg-slate-200 hover:bg-slate-300 text-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white focus:ring-slate-500/50;
}
.btn-danger {
@apply btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500/50 shadow-red-500/25;
}
.btn-success {
@apply btn bg-green-600 hover:bg-green-700 text-white focus:ring-green-500/50 shadow-green-500/25;
}
/* Professionelle Mercedes-Benz Design-Komponenten */
/* Glassmorphism - Verbessert für beide Modi */
.mercedes-glass {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.dark .mercedes-glass {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Professionelle Gradients - Strikt getrennt */
.professional-gradient {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%);
}
.dark .professional-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
}
/* Mercedes-Pattern - Verbessert */
.mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 60px 60px;
}
.dark .mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 2px, transparent 2px);
background-size: 60px 60px;
}
/* Professionelle Schatten - Kontextabhängig */
.professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dark .professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 8px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Professionelle Button Styles - Erweitert */
.professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.dark .professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}
.professional-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.professional-button:hover::before {
left: 100%;
}
.professional-button:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}
.dark .professional-button:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.3);
}
/* Professionelle Input Fields - Erweitert */
.input-field {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 2px solid rgba(203, 213, 225, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.dark .input-field {
background: rgba(51, 65, 85, 0.95);
border: 2px solid rgba(71, 85, 105, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.input-field:focus {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
border-color: #3b82f6;
background: rgba(255, 255, 255, 1);
}
.dark .input-field:focus {
background: rgba(51, 65, 85, 1);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}
/* Professionelle Cards - Erweitert */
.professional-card {
border-radius: 1.5rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(203, 213, 225, 0.5);
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.dark .professional-card {
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(71, 85, 105, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.professional-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.dark .professional-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
/* Professionelle Navigation Verbesserungen */
.nav-item {
position: relative;
transition: all 0.3s ease;
border-radius: 0.75rem;
}
.nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-item:hover::after,
.nav-item.active::after {
width: 100%;
}
/* Verbesserte Header-Stile */
.hero-header {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 1px solid rgba(203, 213, 225, 0.5);
}
.dark .hero-header {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(71, 85, 105, 0.5);
}
/* Verbesserte Container */
.main-container {
background: rgba(248, 250, 252, 0.8);
backdrop-filter: blur(10px);
}
.dark .main-container {
background: rgba(15, 23, 42, 0.8);
}
/* Professionelle Status Badges - Erweitert */
.status-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
transition: all 0.2s ease;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.status-badge:hover {
transform: scale(1.05);
}
/* Smooth Transitions für alle Elemente */
* {
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
/* Interactive Hover Effects */
.interactive-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.interactive-hover:hover {
transform: translateY(-2px);
}
/* Light Mode spezifische Hover-Effekte */
.interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.dark .interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Professional Loading States */
.loading-shimmer {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.dark .loading-shimmer {
background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
background-size: 200% 100%;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Focus Indicators für Accessibility */
.focus-ring:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
.dark .focus-ring:focus {
outline: 3px solid #60a5fa;
}
/* Professionelle Typography */
.professional-title {
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.025em;
}
.dark .professional-title {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Responsives Design für kleine Bildschirme */
@media (max-width: 768px) {
.professional-shadow {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.professional-card {
border-radius: 1rem;
}
.mercedes-glass {
backdrop-filter: blur(15px);
}
}
/* Animationen für bessere UX */
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.slide-up {
animation: slideUp 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Root Variablen für konsistente Farben */
:root {
--mercedes-primary: #3b82f6;
--mercedes-secondary: #64748b;
--mercedes-accent: #1d4ed8;
--shadow-light: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.3);
}
.dark {
--shadow-light: rgba(0, 0, 0, 0.2);
--shadow-dark: rgba(0, 0, 0, 0.5);
}
}

BIN
static/css/components.css.gz Normal file
View File

Binary file not shown.

1
static/css/components.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/components.min.css.gz Normal file
View File

Binary file not shown.

102
static/css/core-utilities.css Normal file
View File

@@ -0,0 +1,102 @@
/* Core Utilities CSS - Notification System Styles */
/* ===== NOTIFICATION CONTAINER ===== */
#myp-notifications {
pointer-events: none;
max-width: 400px;
}
#myp-notifications > * {
pointer-events: auto;
}
/* ===== BASE NOTIFICATION STYLES ===== */
.notification {
min-width: 300px;
max-width: 100%;
word-wrap: break-word;
font-size: 0.875rem;
line-height: 1.25rem;
}
/* Glassmorphism effect for notifications */
.notification.glass-navbar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .notification.glass-navbar {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ===== NOTIFICATION TYPES ===== */
.notification-success {
border-left: 4px solid #10b981;
}
.notification-error {
border-left: 4px solid #ef4444;
}
.notification-warning {
border-left: 4px solid #f59e0b;
}
.notification-info {
border-left: 4px solid #3b82f6;
}
/* ===== NOTIFICATION ANIMATIONS ===== */
.notification {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.notification.translate-x-full {
transform: translateX(100%);
opacity: 0;
}
/* ===== CLOSE BUTTON ===== */
.notification button {
font-size: 1.5rem;
line-height: 1;
background: none;
border: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.notification button:hover {
opacity: 1;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
#myp-notifications {
left: 1rem;
right: 1rem;
max-width: none;
}
.notification {
min-width: auto;
}
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
.notification {
transition: none;
}
}
/* ===== PRINT STYLES ===== */
@media print {
#myp-notifications {
display: none;
}
}

BIN
static/css/core-utilities.css.gz Normal file
View File

Binary file not shown.

1
static/css/core-utilities.min.css vendored Normal file
View File

@@ -0,0 +1 @@
#myp-notifications{pointer-events:none;max-width:400px;}#myp-notifications > *{pointer-events:auto;}.notification{min-width:300px;max-width:100%;word-wrap:break-word;font-size:0.875rem;line-height:1.25rem;}.notification.glass-navbar{background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);}.dark .notification.glass-navbar{background:rgba(15,23,42,0.85);border:1px solid rgba(255,255,255,0.1);}.notification-success{border-left:4px solid #10b981;}.notification-error{border-left:4px solid #ef4444;}.notification-warning{border-left:4px solid #f59e0b;}.notification-info{border-left:4px solid #3b82f6;}.notification{transition:transform 0.3s ease-out,opacity 0.3s ease-out;}.notification.translate-x-full{transform:translateX(100%);opacity:0;}.notification button{font-size:1.5rem;line-height:1;background:none;border:none;cursor:pointer;opacity:0.7;transition:opacity 0.2s;}.notification button:hover{opacity:1;}@media (max-width:640px){#myp-notifications{left:1rem;right:1rem;max-width:none;}.notification{min-width:auto;}}@media (prefers-reduced-motion:reduce){.notification{transition:none;}}@media print{#myp-notifications{display:none;}}

BIN
static/css/core-utilities.min.css.gz Normal file
View File

Binary file not shown.

BIN
static/css/critical-inline.css.gz Normal file
View File

Binary file not shown.

1
static/css/critical-inline.min.css vendored Normal file
View File

@@ -0,0 +1 @@
*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.6;color:#111827;background:#fafbfc}.critical-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}.critical-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem;max-width:1200px;margin:0 auto}.critical-logo{font-weight:700;font-size:1.25rem;color:#0073ce;text-decoration:none}.critical-main{min-height:100vh;padding:2rem 1rem}.critical-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto}.critical-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.btn-primary{background:#0073ce;color:#fff;border:0;border-radius:6px;padding:.75rem 1.5rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}.loading{opacity:.6;pointer-events:none}.hidden{display:none}@media(max-width:768px){.critical-nav{padding:.75rem}.critical-main{padding:1rem}.critical-grid{grid-template-columns:1fr}.critical-card{padding:1rem}}@media(prefers-color-scheme:dark){body{background:#0f172a;color:#f8fafc}.critical-header{background:rgba(15,23,42,0.95);border-bottom-color:#334155}.critical-card{background:#1e293b;border-color:#334155;color:#f8fafc}}

BIN
static/css/critical-inline.min.css.gz Normal file
View File

Binary file not shown.

996
static/css/dist/combined-optimized.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
static/css/dist/output-optimized.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

74
static/css/glassmorphism-optimized.css Normal file
View File

@@ -0,0 +1,74 @@
/**
* Optimized Glassmorphism Effects for Raspberry Pi
* Performance-optimized version with effects only on navbar
*/
/* Glassmorphism nur für Navbar */
.navbar::before,
.glass-nav {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .navbar::before,
.dark .glass-nav {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/* Alle anderen Glass-Effekte entfernt für Performance */
.glass-base,
.glass-card,
.glass-btn,
.glass-input,
.glass-dropdown,
.glass-modal,
.glass-sidebar,
.glass-header,
.glass-footer,
.glass-table,
.glass-badge,
.glass-alert,
.glass-tooltip,
.glass-progress,
.glass-tab {
/* Keine Effekte - nur einfache Hintergründe */
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.dark .glass-base,
.dark .glass-card,
.dark .glass-btn,
.dark .glass-input,
.dark .glass-dropdown,
.dark .glass-modal,
.dark .glass-sidebar,
.dark .glass-header,
.dark .glass-footer,
.dark .glass-table,
.dark .glass-badge,
.dark .glass-alert,
.dark .glass-tooltip,
.dark .glass-progress,
.dark .glass-tab {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Utility Classes - Keine Effekte */
.glass-light { background: rgba(255, 255, 255, 0.9); }
.glass-dark { background: rgba(0, 0, 0, 0.9); }
.glass-blur-none { /* Kein Blur */ }
.glass-blur-sm { /* Kein Blur */ }
.glass-blur-md { /* Kein Blur */ }
.glass-blur-lg { /* Kein Blur */ }
.glass-blur-xl { /* Kein Blur */ }
/* Border Utilities */
.glass-border-light { border-color: rgba(255, 255, 255, 0.2); }
.glass-border-dark { border-color: rgba(0, 0, 0, 0.2); }
/* Keine Hover-Effekte für Performance */

BIN
static/css/glassmorphism-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/glassmorphism-optimized.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.navbar::before,.glass-nav{background:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 6px rgba(0,0,0,0.1);}.dark .navbar::before,.dark .glass-nav{background:rgba(15,23,42,0.85);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 6px rgba(0,0,0,0.2);}.glass-base,.glass-card,.glass-btn,.glass-input,.glass-dropdown,.glass-modal,.glass-sidebar,.glass-header,.glass-footer,.glass-table,.glass-badge,.glass-alert,.glass-tooltip,.glass-progress,.glass-tab{background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.1);}.dark .glass-base,.dark .glass-card,.dark .glass-btn,.dark .glass-input,.dark .glass-dropdown,.dark .glass-modal,.dark .glass-sidebar,.dark .glass-header,.dark .glass-footer,.dark .glass-table,.dark .glass-badge,.dark .glass-alert,.dark .glass-tooltip,.dark .glass-progress,.dark .glass-tab{background:rgba(15,23,42,0.95);border:1px solid rgba(255,255,255,0.1);}.glass-light{background:rgba(255,255,255,0.9);}.glass-dark{background:rgba(0,0,0,0.9);}.glass-blur-none{}.glass-blur-sm{}.glass-blur-md{}.glass-blur-lg{}.glass-blur-xl{}.glass-border-light{border-color:rgba(255,255,255,0.2);}.glass-border-dark{border-color:rgba(0,0,0,0.2);}

BIN
static/css/glassmorphism-optimized.min.css.gz Normal file
View File

Binary file not shown.

211
static/css/glassmorphism.css Normal file
View File

@@ -0,0 +1,211 @@
/* Vereinfachte Glassmorphism-Effekte für MYP Application - Raspberry Pi Optimiert */
/* ===== BASIS GLASS EFFEKTE - STARK VEREINFACHT ===== */
.glass-base {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
/* Entfernt: backdrop-filter, box-shadow, transition */
}
.glass-strong {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.4);
/* Entfernt: backdrop-filter, box-shadow */
}
.glass-subtle {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
/* Entfernt: backdrop-filter, box-shadow */
}
/* ===== DARK MODE GLASS - VEREINFACHT ===== */
.dark .glass-base {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Entfernt: box-shadow */
}
.dark .glass-strong {
background: rgba(30, 41, 59, 0.98);
border: 1px solid rgba(255, 255, 255, 0.15);
/* Entfernt: box-shadow */
}
.dark .glass-subtle {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
/* Entfernt: box-shadow */
}
/* ===== GLASS KARTEN - STARK VEREINFACHT ===== */
.glass-card {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(229, 231, 235, 0.5);
border-radius: 12px;
padding: 1.5rem;
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
}
.dark .glass-card {
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(100, 116, 139, 0.3);
/* Entfernt: box-shadow */
}
/* ===== GLASS NAVIGATION - VEREINFACHT ===== */
.glass-nav {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(226, 232, 240, 0.4);
border-bottom: 1px solid rgba(203, 213, 225, 0.5);
/* Entfernt: backdrop-filter, box-shadow */
}
.dark .glass-nav {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(51, 65, 85, 0.5);
/* Entfernt: box-shadow */
}
/* ===== GLASS BUTTONS - STARK VEREINFACHT ===== */
.glass-btn {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(226, 232, 240, 0.5);
border-radius: 8px;
padding: 0.75rem 1.5rem;
color: #0f172a;
font-weight: 600;
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
}
.glass-btn:hover {
background: rgba(255, 255, 255, 0.99);
/* Nur Background-Color Change - keine Transform */
}
.glass-btn-primary {
background: rgba(0, 115, 206, 0.95);
color: white;
/* Entfernt: box-shadow */
}
.glass-btn-primary:hover {
background: rgba(0, 115, 206, 0.99);
/* Nur Background-Color Change */
}
.dark .glass-btn {
background: rgba(30, 41, 59, 0.95);
color: #e2e8f0;
border: 1px solid rgba(100, 116, 139, 0.5);
/* Entfernt: box-shadow */
}
.dark .glass-btn:hover {
background: rgba(30, 41, 59, 0.99);
/* Nur Background-Color Change */
}
/* ===== GLASS MODALS - VEREINFACHT ===== */
.glass-modal {
background: rgba(255, 255, 255, 0.99);
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 16px;
/* Entfernt: backdrop-filter, box-shadow */
}
.dark .glass-modal {
background: rgba(15, 23, 42, 0.99);
border: 1px solid rgba(51, 65, 85, 0.6);
/* Entfernt: box-shadow */
}
/* ===== GLASS FORM ELEMENTE - VEREINFACHT ===== */
.glass-input {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(226, 232, 240, 0.5);
border-radius: 6px;
padding: 0.75rem 1rem;
color: #0f172a;
/* Entfernt: backdrop-filter, box-shadow, transition */
}
.glass-input:focus {
outline: none;
border-color: rgba(0, 115, 206, 0.5);
/* Nur Border-Color Change */
}
.dark .glass-input {
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(100, 116, 139, 0.5);
color: #e2e8f0;
/* Entfernt: box-shadow */
}
.dark .glass-input:focus {
border-color: rgba(59, 130, 246, 0.5);
/* Nur Border-Color Change */
}
/* ===== GLASS DROPDOWN - VEREINFACHT ===== */
.glass-dropdown {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
/* Entfernt: backdrop-filter, box-shadow */
}
.dark .glass-dropdown {
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Entfernt: box-shadow */
}
/* ===== UTILITY CLASSES - STARK VEREINFACHT ===== */
.glass-overlay {
background: rgba(255, 255, 255, 0.3);
/* Entfernt: backdrop-filter */
}
.dark .glass-overlay {
background: rgba(0, 0, 0, 0.4);
/* Entfernt: backdrop-filter */
}
/* ===== RESPONSIVE ANPASSUNGEN - VEREINFACHT ===== */
@media (max-width: 768px) {
.glass-card {
padding: 1rem;
border-radius: 8px;
}
.glass-modal {
border-radius: 12px;
}
/* Entfernt: backdrop-filter Reduzierung */
}
/* ===== REDUZIERTE BEWEGUNG - ERWEITERT ===== */
@media (prefers-reduced-motion: reduce) {
.glass-card,
.glass-btn,
.glass-input {
transition: none !important;
transform: none !important;
}
}
/* ===== HOHER KONTRAST MODUS - VEREINFACHT ===== */
@media (prefers-contrast: high) {
.glass-base,
.glass-strong,
.glass-card {
border-width: 2px;
/* Entfernt: backdrop-filter */
}
}
/* ===== PERFORMANCE OPTIMIERUNGEN ENTFERNT ===== */
/* Entfernt: will-change Properties für bessere Performance auf schwacher Hardware */

BIN
static/css/glassmorphism.css.gz Normal file
View File

Binary file not shown.

1
static/css/glassmorphism.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.glass-base{background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 8px 20px rgba(0,0,0,0.1);transition:all .2s ease}.glass-strong{background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.4);box-shadow:0 12px 24px rgba(0,0,0,0.12)}.glass-subtle{background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 12px rgba(0,0,0,0.08)}.dark .glass-base{background:rgba(15,23,42,0.8);border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 20px rgba(0,0,0,0.3)}.dark .glass-strong{background:rgba(30,41,59,0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 12px 24px rgba(0,0,0,0.4)}.dark .glass-subtle{background:rgba(15,23,42,0.7);border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.glass-card{background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(229,231,235,0.5);border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,0.08);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.glass-card:hover{transform:translateY(-1px);box-shadow:0 12px 20px rgba(0,0,0,0.12)}.dark .glass-card{background:rgba(30,41,59,0.85);border:1px solid rgba(100,116,139,0.3);box-shadow:0 8px 16px rgba(0,0,0,0.25)}.dark .glass-card:hover{box-shadow:0 12px 20px rgba(0,0,0,0.35)}.glass-nav{background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,0.4);border-bottom:1px solid rgba(203,213,225,0.5);box-shadow:0 4px 12px rgba(0,0,0,0.06)}.dark .glass-nav{background:rgba(15,23,42,0.85);border:1px solid rgba(51,65,85,0.5);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.glass-btn{background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(226,232,240,0.5);border-radius:8px;padding:.75rem 1.5rem;color:#0f172a;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform .2s ease,background .2s ease}.glass-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.9);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.glass-btn-primary{background:rgba(0,115,206,0.9);color:white;box-shadow:0 2px 8px rgba(0,115,206,0.2)}.glass-btn-primary:hover{background:rgba(0,115,206,0.95);box-shadow:0 4px 12px rgba(0,115,206,0.3)}.dark .glass-btn{background:rgba(30,41,59,0.8);color:#e2e8f0;border:1px solid rgba(100,116,139,0.5);box-shadow:0 2px 8px rgba(0,0,0,0.15)}.dark .glass-btn:hover{background:rgba(30,41,59,0.9);box-shadow:0 4px 12px rgba(0,0,0,0.25)}.glass-modal{background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(226,232,240,0.6);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,0.12)}.dark .glass-modal{background:rgba(15,23,42,0.95);border:1px solid rgba(51,65,85,0.6);box-shadow:0 20px 40px rgba(0,0,0,0.4)}.glass-input{background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(226,232,240,0.5);border-radius:6px;padding:.75rem 1rem;color:#0f172a;box-shadow:0 2px 4px rgba(0,0,0,0.04);transition:border-color .2s ease,box-shadow .2s ease}.glass-input:focus{outline:0;border-color:rgba(0,115,206,0.5);box-shadow:0 2px 8px rgba(0,115,206,0.1)}.dark .glass-input{background:rgba(30,41,59,0.8);border:1px solid rgba(100,116,139,0.5);color:#e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,0.15)}.dark .glass-input:focus{border-color:rgba(59,130,246,0.5);box-shadow:0 2px 8px rgba(59,130,246,0.15)}.glass-dropdown{background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.3);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.15)}.dark .glass-dropdown{background:rgba(15,23,42,0.9);border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 20px rgba(0,0,0,0.3)}.glass-overlay{background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.dark .glass-overlay{background:rgba(0,0,0,0.2)}@media(max-width:768px){.glass-card{padding:1rem;border-radius:8px}.glass-modal{border-radius:12px}.glass-base,.glass-strong,.glass-subtle{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}@media(prefers-reduced-motion:reduce){.glass-card,.glass-btn,.glass-input{transition:none !important}}@media(prefers-contrast:high){.glass-base,.glass-strong,.glass-card{border-width:2px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}}.glass-base,.glass-strong,.glass-subtle,.glass-card,.glass-btn,.glass-modal{will-change:transform}

BIN
static/css/glassmorphism.min.css.gz Normal file
View File

Binary file not shown.

3385
static/css/input-original-backup.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
static/css/input-original-backup.css.gz Normal file
View File

Binary file not shown.

1
static/css/input-original-backup.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/input-original-backup.min.css.gz Normal file
View File

Binary file not shown.

606
static/css/input-raspberry-balanced.css Normal file
View File

@@ -0,0 +1,606 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom Styles für Light und Dark Mode - Raspberry Pi Optimiert */
@layer base {
:root {
/* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
--color-bg-primary: #ffffff;
--color-bg-secondary: #fafbfc;
--color-bg-tertiary: #f3f5f7;
--color-bg-accent: #fbfcfd;
--color-text-primary: #111827;
--color-text-secondary: #374151;
--color-text-muted: #6b7280;
--color-text-accent: #0073ce;
--color-border-primary: #e5e7eb;
--color-border-secondary: #d1d5db;
--color-accent: #0073ce;
--color-accent-hover: #005a9f;
--color-accent-light: #eff6ff;
--color-accent-text: #ffffff;
--color-shadow: rgba(0, 0, 0, 0.06);
--color-shadow-strong: rgba(0, 0, 0, 0.1);
--color-shadow-accent: rgba(0, 115, 206, 0.12);
--card-radius: 1rem;
/* Light Mode Gradients - VEREINFACHT für Performance */
--gradient-primary: #fafbfc;
--gradient-card: #ffffff;
--gradient-hero: #f3f5f7;
--gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
--gradient-surface: #fbfcfd;
/* Optimierte Light Mode Glassmorphism-Variablen */
--glass-bg: rgba(255, 255, 255, 0.92);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
--glass-blur: blur(10px);
}
.dark {
/* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */
--color-bg-primary: #000000;
--color-bg-secondary: #0a0a0a;
--color-bg-tertiary: #1a1a1a;
--color-text-primary: #ffffff;
--color-text-secondary: #e2e8f0;
--color-text-muted: #94a3b8;
--color-border-primary: #1a1a1a;
--color-border-secondary: #2a2a2a;
--color-accent: #ffffff;
--color-accent-hover: #f0f0f0;
--color-accent-light: #1e3a8a;
--color-accent-text: #000000;
--color-shadow: rgba(0, 0, 0, 0.8);
--color-shadow-strong: rgba(0, 0, 0, 0.9);
--mb-black: #000000;
}
body {
@apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
position: relative;
min-height: 100vh;
background: var(--gradient-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
line-height: 1.65;
font-size: 15px;
}
.dark body {
background: #000000;
}
/* Vereinfachte Body Background - PERFORMANCE OPTIMIERT */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.dark body::before {
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
}
/* Navbar Styles - Premium Glassmorphism - UNVERÄNDERT WIE GEWÜNSCHT */
nav {
@apply backdrop-blur-xl border-b transition-all duration-300;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(250, 251, 252, 0.92) 30%,
rgba(248, 250, 252, 0.9) 70%,
rgba(255, 255, 255, 0.95) 100%);
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
backdrop-filter: blur(28px) saturate(200%) brightness(110%);
-webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 115, 206, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dark nav {
background: rgba(0, 0, 0, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Vereinfachte Card Styles - PERFORMANCE OPTIMIERT */
.card-enhanced {
background: var(--gradient-card);
border: 1px solid var(--color-border-primary);
border-radius: var(--card-radius);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
.card-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dark .card-enhanced {
background: rgba(10, 10, 10, 0.8);
border-color: var(--color-border-primary);
box-shadow: 0 4px 20px var(--color-shadow);
}
/* Vereinfachte Button Styles - PERFORMANCE OPTIMIERT */
.btn-enhanced {
background: var(--gradient-accent);
color: var(--color-accent-text);
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.75rem;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
.btn-enhanced:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
}
.btn-enhanced:active {
transform: translateY(0);
}
.btn-secondary {
background: var(--gradient-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
background: var(--color-bg-secondary);
border-color: var(--color-accent);
color: var(--color-accent);
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.08);
}
/* Vereinfachte Form Elements - PERFORMANCE OPTIMIERT */
.input-enhanced {
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border-primary);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
color: var(--color-text-primary);
font-size: 0.9rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-enhanced:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.05);
background: rgba(255, 255, 255, 0.98);
}
.input-enhanced::placeholder {
color: var(--color-text-muted);
opacity: 0.8;
}
.dark .input-enhanced {
background: rgba(10, 10, 10, 0.8);
border-color: var(--color-border-primary);
color: var(--color-text-primary);
box-shadow: 0 2px 8px var(--color-shadow);
}
.dark .input-enhanced:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
/* Vereinfachte Alert Styles */
.alert-enhanced {
border-radius: 1rem;
padding: 1.25rem;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.alert-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
}
.alert-info-enhanced {
background: rgba(239, 246, 255, 0.95);
border-color: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.alert-info-enhanced::before {
background: var(--gradient-accent);
}
.alert-success-enhanced {
background: rgba(236, 253, 245, 0.95);
border-color: rgba(16, 185, 129, 0.2);
color: #065f46;
}
.alert-success-enhanced::before {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.alert-warning-enhanced {
background: rgba(255, 251, 235, 0.95);
border-color: rgba(251, 191, 36, 0.2);
color: #92400e;
}
.alert-warning-enhanced::before {
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}
.alert-error-enhanced {
background: rgba(254, 242, 242, 0.95);
border-color: rgba(239, 68, 68, 0.2);
color: #991b1b;
}
.alert-error-enhanced::before {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
/* Vereinfachte Flash Messages */
.flash-message-light {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.6);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
color: var(--color-text-primary);
}
.flash-message-light.success {
border-left: 4px solid #10b981;
background: rgba(236, 253, 245, 0.95);
}
.flash-message-light.error {
border-left: 4px solid #ef4444;
background: rgba(254, 242, 242, 0.95);
}
.flash-message-light.warning {
border-left: 4px solid #fbbf24;
background: rgba(255, 251, 235, 0.95);
}
.flash-message-light.info {
border-left: 4px solid #3b82f6;
background: rgba(239, 246, 255, 0.95);
}
/* Vereinfachte Table Styles */
.table-enhanced {
background: var(--gradient-card);
border: 1px solid var(--color-border-primary);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: 0 2px 8px var(--color-shadow);
}
.table-enhanced th {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
font-weight: 600;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-primary);
}
.table-enhanced td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
transition: background-color 0.2s ease;
}
.table-enhanced tbody tr:hover {
background: var(--color-bg-secondary);
}
.dark .table-enhanced {
background: rgba(10, 10, 10, 0.8);
border-color: var(--color-border-primary);
}
.dark .table-enhanced th {
background: rgba(26, 26, 26, 0.8);
color: var(--color-text-primary);
}
.dark .table-enhanced tbody tr:hover {
background: rgba(26, 26, 26, 0.6);
}
/* Vereinfachte Modal Styles */
.modal-enhanced {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 1.5rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.dark .modal-enhanced {
background: rgba(0, 0, 0, 0.95);
border-color: rgba(42, 42, 42, 0.7);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
/* Vereinfachte Status Badges */
.status-badge-enhanced {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
transition: transform 0.2s ease;
}
.status-online-enhanced {
background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
color: #065f46;
border-color: rgba(16, 185, 129, 0.3);
}
.status-offline-enhanced {
background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
color: #991b1b;
border-color: rgba(239, 68, 68, 0.3);
}
.status-printing-enhanced {
background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
color: #1e40af;
border-color: rgba(59, 130, 246, 0.3);
}
/* Dark Mode Toggle - Vereinfacht aber funktional */
.dark-mode-toggle-new {
position: relative;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 0.625rem;
transition: transform 0.2s ease;
background: rgba(248, 250, 252, 0.9);
border: 1px solid rgba(226, 232, 240, 0.7);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: var(--color-text-secondary);
z-index: 100;
}
.dark-mode-toggle-new:hover {
transform: translateY(-2px) scale(1.05);
background: rgba(248, 250, 252, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark-mode-toggle-new:active {
transform: translateY(-1px) scale(0.98);
}
.dark .dark-mode-toggle-new {
background: rgba(10, 10, 10, 0.8);
border: 1px solid rgba(42, 42, 42, 0.6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
color: var(--color-text-secondary);
}
.dark .dark-mode-toggle-new:hover {
background: rgba(10, 10, 10, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Icon-Animation für Dark Mode Toggle */
.dark-mode-toggle-new .sun-icon,
.dark-mode-toggle-new .moon-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dark .sun-icon { display: none; }
.dark .moon-icon { display: block; }
.sun-icon { display: block; }
.moon-icon { display: none; }
/* User Menu Button - Vereinfacht */
.user-menu-button-new {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.75rem;
padding: 0.5rem;
transition: transform 0.2s ease;
background: rgba(248, 250, 252, 0.8);
border: 1px solid rgba(226, 232, 240, 0.6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.user-menu-button-new:hover {
transform: translateY(-1px);
background: rgba(248, 250, 252, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dark .user-menu-button-new {
background: rgba(10, 10, 10, 0.7);
border-color: rgba(42, 42, 42, 0.6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark .user-menu-button-new:hover {
background: rgba(10, 10, 10, 0.8);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Vereinfachte Hover Effects */
.hover-lift-enhanced {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift-enhanced:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px var(--color-shadow-strong);
}
.dark .hover-lift-enhanced:hover {
box-shadow: 0 8px 20px var(--color-shadow);
}
/* Smooth Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: 4px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-accent);
}
.dark ::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
.dark ::-webkit-scrollbar-thumb {
background: var(--color-border-primary);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #60a5fa;
}
/* Vereinfachte Loading States */
.loading-enhanced {
position: relative;
overflow: hidden;
}
.loading-enhanced::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(0, 115, 206, 0.1),
transparent);
animation: loading-shimmer 2s infinite;
}
@keyframes loading-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Focus States for Accessibility */
.focus-enhanced:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 115, 206, 0.15);
}
.dark .focus-enhanced:focus {
outline-color: #60a5fa;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}
/* Responsive Design Enhancements */
@media (max-width: 768px) {
.card-enhanced {
padding: 1rem;
border-radius: 0.75rem;
}
.btn-enhanced {
padding: 0.75rem 1.5rem;
font-size: 0.8rem;
}
.modal-enhanced {
border-radius: 1rem;
margin: 1rem;
}
.dark-mode-toggle-new {
padding: 0.5rem;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
:root {
--color-shadow: rgba(0, 0, 0, 0.2);
--color-shadow-strong: rgba(0, 0, 0, 0.3);
--color-border-primary: #000000;
}
.dark {
--color-border-primary: #ffffff;
}
}
}

BIN
static/css/input-raspberry-balanced.css.gz Normal file
View File

Binary file not shown.

1
static/css/input-raspberry-balanced.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/input-raspberry-balanced.min.css.gz Normal file
View File

Binary file not shown.

661
static/css/input-raspberry-optimized.css Normal file
View File

@@ -0,0 +1,661 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/**
* MYP Platform - Raspberry Pi Optimierte Styles
* Alle performance-kritischen Glassmorphism-Effekte, backdrop-filter und komplexe Animationen entfernt
* Design bleibt unverändert, aber Performance ist deutlich besser
*/
@layer base {
:root {
/* Light Mode Farben - Mercedes-Benz Professional - UNVERÄNDERT */
--color-bg-primary: #ffffff;
--color-bg-secondary: #fafbfc;
--color-bg-tertiary: #f3f5f7;
--color-bg-accent: #fbfcfd;
--color-text-primary: #111827;
--color-text-secondary: #374151;
--color-text-muted: #6b7280;
--color-text-accent: #0073ce;
--color-border-primary: #e5e7eb;
--color-border-secondary: #d1d5db;
--color-accent: #0073ce;
--color-accent-hover: #005a9f;
--color-accent-light: #eff6ff;
--color-accent-text: #ffffff;
--color-shadow: rgba(0, 0, 0, 0.04);
--color-shadow-strong: rgba(0, 0, 0, 0.08);
--color-shadow-accent: rgba(0, 115, 206, 0.08);
--card-radius: 1rem;
/* Vereinfachte Gradients - Raspberry Pi optimiert */
--gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
--gradient-card: var(--color-bg-primary);
--gradient-hero: var(--color-bg-secondary);
--gradient-accent: var(--color-accent);
--gradient-surface: var(--color-bg-primary);
}
.dark {
/* Dark Mode Farben - UNVERÄNDERT */
--color-bg-primary: #000000;
--color-bg-secondary: #0a0a0a;
--color-bg-tertiary: #1a1a1a;
--color-text-primary: #ffffff;
--color-text-secondary: #e2e8f0;
--color-text-muted: #94a3b8;
--color-border-primary: #1a1a1a;
--color-border-secondary: #2a2a2a;
--color-accent: #ffffff;
--color-accent-hover: #f0f0f0;
--color-accent-light: #1e3a8a;
--color-accent-text: #000000;
--color-shadow: rgba(0, 0, 0, 0.6);
--color-shadow-strong: rgba(0, 0, 0, 0.8);
--mb-black: #000000;
}
body {
@apply bg-white dark:bg-black text-slate-900 dark:text-white;
background: var(--gradient-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.65;
font-size: 15px;
transition: background-color 0.2s ease, color 0.2s ease;
/* Entfernt: transition-colors duration-300 für bessere Performance */
}
.dark body {
background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
}
/* Body Background - STARK VEREINFACHT */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
.dark body::before {
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}
/* Navbar - RASPBERRY PI OPTIMIERT */
nav {
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--color-border-primary);
transition: background-color 0.2s ease;
/* ENTFERNT: backdrop-filter, komplexe box-shadows, cubic-bezier */
}
.dark nav {
background: rgba(0, 0, 0, 0.95);
border-bottom-color: var(--color-border-primary);
}
/* Card Styles - RASPBERRY PI OPTIMIERT */
.card-enhanced {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--card-radius);
transition: background-color 0.2s ease, border-color 0.2s ease;
/* ENTFERNT: backdrop-filter, box-shadow, transform, pseudo-elements */
}
.card-enhanced:hover {
background: var(--color-bg-secondary);
border-color: var(--color-border-secondary);
/* ENTFERNT: transform, box-shadow für bessere Performance */
}
.dark .card-enhanced {
background: var(--color-bg-secondary);
border-color: var(--color-border-primary);
}
/* Button Styles - RASPBERRY PI OPTIMIERT */
.btn-enhanced {
background: var(--color-accent);
color: var(--color-accent-text);
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.75rem;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background-color 0.2s ease;
/* ENTFERNT: gradient, box-shadow, pseudo-elements, transform */
}
.btn-enhanced:hover {
background: var(--color-accent-hover);
/* ENTFERNT: transform, box-shadow für bessere Performance */
}
.btn-enhanced:active {
background: var(--color-accent-hover);
/* ENTFERNT: transform für bessere Performance */
}
.btn-secondary {
background: var(--color-bg-primary);
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.btn-secondary:hover {
background: var(--color-bg-secondary);
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Form Elements - RASPBERRY PI OPTIMIERT */
.input-enhanced {
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--color-border-primary);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
color: var(--color-text-primary);
font-size: 0.9rem;
transition: border-color 0.2s ease, background-color 0.2s ease;
/* ENTFERNT: backdrop-filter, box-shadow für bessere Performance */
}
.input-enhanced:focus {
outline: none;
border-color: var(--color-accent);
background: rgba(255, 255, 255, 1);
/* ENTFERNT: box-shadow für bessere Performance */
}
.input-enhanced::placeholder {
color: var(--color-text-muted);
opacity: 0.8;
}
.dark .input-enhanced {
background: rgba(26, 26, 26, 0.9);
border-color: var(--color-border-primary);
color: var(--color-text-primary);
}
.dark .input-enhanced:focus {
border-color: #60a5fa;
background: rgba(26, 26, 26, 1);
}
/* Alert Styles - RASPBERRY PI OPTIMIERT */
.alert-enhanced {
border-radius: 1rem;
padding: 1.25rem;
border: 1px solid transparent;
position: relative;
/* ENTFERNT: backdrop-filter für bessere Performance */
}
.alert-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
}
.alert-info-enhanced {
background: rgba(239, 246, 255, 0.95);
border-color: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.alert-info-enhanced::before {
background: var(--color-accent);
}
.alert-success-enhanced {
background: rgba(236, 253, 245, 0.95);
border-color: rgba(16, 185, 129, 0.2);
color: #065f46;
}
.alert-success-enhanced::before {
background: #10b981;
}
.alert-warning-enhanced {
background: rgba(255, 251, 235, 0.95);
border-color: rgba(251, 191, 36, 0.2);
color: #92400e;
}
.alert-warning-enhanced::before {
background: #fbbf24;
}
.alert-error-enhanced {
background: rgba(254, 242, 242, 0.95);
border-color: rgba(239, 68, 68, 0.2);
color: #991b1b;
}
.alert-error-enhanced::before {
background: #ef4444;
}
/* Flash Messages - RASPBERRY PI OPTIMIERT */
.flash-message-light {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(226, 232, 240, 0.6);
color: var(--color-text-primary);
/* ENTFERNT: backdrop-filter, komplexe box-shadows */
}
.flash-message-light.success {
border-left: 4px solid #10b981;
background: rgba(236, 253, 245, 0.95);
}
.flash-message-light.error {
border-left: 4px solid #ef4444;
background: rgba(254, 242, 242, 0.95);
}
.flash-message-light.warning {
border-left: 4px solid #fbbf24;
background: rgba(255, 251, 235, 0.95);
}
.flash-message-light.info {
border-left: 4px solid #3b82f6;
background: rgba(239, 246, 255, 0.95);
}
/* Table Styles - RASPBERRY PI OPTIMIERT */
.table-enhanced {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--card-radius);
overflow: hidden;
/* ENTFERNT: box-shadow für bessere Performance */
}
.table-enhanced th {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
font-weight: 600;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-primary);
}
.table-enhanced td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
transition: background-color 0.2s ease;
}
.table-enhanced tbody tr:hover {
background: var(--color-bg-secondary);
/* ENTFERNT: transform für bessere Performance */
}
.dark .table-enhanced {
background: var(--color-bg-secondary);
border-color: var(--color-border-primary);
}
.dark .table-enhanced th {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.dark .table-enhanced tbody tr:hover {
background: var(--color-bg-tertiary);
}
/* Modal Styles - RASPBERRY PI OPTIMIERT */
.modal-enhanced {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 1.5rem;
position: relative;
/* ENTFERNT: backdrop-filter, komplexe box-shadows */
}
.dark .modal-enhanced {
background: rgba(10, 10, 10, 0.98);
border-color: rgba(42, 42, 42, 0.7);
}
/* Status Badges - RASPBERRY PI OPTIMIERT */
.status-badge-enhanced {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
transition: background-color 0.2s ease;
}
.status-online-enhanced {
background: #ecfdf5;
color: #065f46;
border-color: rgba(16, 185, 129, 0.2);
}
.status-offline-enhanced {
background: #fef2f2;
color: #991b1b;
border-color: rgba(239, 68, 68, 0.2);
}
.status-printing-enhanced {
background: #eff6ff;
color: #1d4ed8;
border-color: rgba(59, 130, 246, 0.2);
}
/* Dark Mode Toggle - RASPBERRY PI OPTIMIERT */
.dark-mode-toggle-new {
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border-primary);
border-radius: 0.75rem;
padding: 0.5rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
/* ENTFERNT: box-shadow, transform für bessere Performance */
}
.dark-mode-toggle-new:hover {
background: rgba(255, 255, 255, 1);
border-color: var(--color-border-secondary);
/* ENTFERNT: transform für bessere Performance */
}
.dark .dark-mode-toggle-new {
background: rgba(26, 26, 26, 0.95);
border-color: var(--color-border-primary);
}
.dark .dark-mode-toggle-new:hover {
background: rgba(26, 26, 26, 1);
}
/* Icon Animations - STARK VEREINFACHT */
.dark-mode-toggle-new .sun-icon,
.dark-mode-toggle-new .moon-icon {
transition: opacity 0.2s ease;
/* ENTFERNT: komplexe transform animations */
}
.dark .sun-icon { display: none; }
.dark .moon-icon { display: block; }
.sun-icon { display: block; }
.moon-icon { display: none; }
/* User Menu Button - RASPBERRY PI OPTIMIERT */
.user-menu-button-new {
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border-primary);
border-radius: 0.75rem;
padding: 0.5rem;
transition: background-color 0.2s ease;
/* ENTFERNT: box-shadow, transform für bessere Performance */
}
.user-menu-button-new:hover {
background: rgba(255, 255, 255, 1);
/* ENTFERNT: transform für bessere Performance */
}
.dark .user-menu-button-new {
background: rgba(26, 26, 26, 0.95);
border-color: var(--color-border-primary);
}
.dark .user-menu-button-new:hover {
background: rgba(26, 26, 26, 1);
}
/* Hover Effects - STARK VEREINFACHT */
.hover-lift-enhanced {
transition: background-color 0.2s ease;
/* ENTFERNT: cubic-bezier transition für bessere Performance */
}
.hover-lift-enhanced:hover {
background-color: var(--color-bg-secondary);
/* ENTFERNT: transform, box-shadow für bessere Performance */
}
.dark .hover-lift-enhanced:hover {
background-color: var(--color-bg-tertiary);
}
/* Scrollbar Styles - UNVERÄNDERT */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
.dark ::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
}
.dark ::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
/* Loading Animation - VEREINFACHT */
.loading-enhanced {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
overflow: hidden;
}
.loading-enhanced::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: loading-shimmer 1.5s infinite;
}
@keyframes loading-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Focus Styles - VEREINFACHT */
.focus-enhanced:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
/* ENTFERNT: box-shadow für bessere Performance */
}
.dark .focus-enhanced:focus {
outline-color: #60a5fa;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.card-enhanced {
border-radius: 0.75rem;
padding: 1rem;
}
.btn-enhanced {
padding: 0.625rem 1.25rem;
font-size: 0.8rem;
}
.modal-enhanced {
border-radius: 1rem;
margin: 1rem;
}
.dark-mode-toggle-new {
padding: 0.4rem;
}
}
/* Reduced Motion Support - ERWEITERT */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transform: none !important;
}
}
/* High Contrast Support */
@media (prefers-contrast: high) {
:root {
--color-border-primary: #000000;
--color-border-secondary: #000000;
--color-shadow: rgba(0, 0, 0, 0.2);
}
.dark {
--color-border-primary: #ffffff;
--color-border-secondary: #ffffff;
}
}
/* Weitere optimierte Komponenten folgen... */
/* Notification Styles - RASPBERRY PI OPTIMIERT */
.notification {
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--color-border-primary);
border-radius: 0.75rem;
padding: 1rem;
/* ENTFERNT: backdrop-filter, komplexe box-shadows */
}
.dark .notification {
background: rgba(26, 26, 26, 0.95);
border-color: var(--color-border-primary);
}
.notification:hover {
background: rgba(255, 255, 255, 1);
/* ENTFERNT: transform, box-shadow für bessere Performance */
}
.dark .notification:hover {
background: rgba(26, 26, 26, 1);
}
/* Status Dot - VEREINFACHT */
.status-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
display: inline-block;
}
.status-dot.online {
background: #10b981;
}
.status-dot.offline {
background: #ef4444;
}
/* ENTFERNT: Alle pulse-Animationen für bessere Performance */
/* Weitere Komponenten werden nach gleichem Muster optimiert... */
}
/* Flash Messages - RASPBERRY PI OPTIMIERT */
.flash-message {
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--color-border-primary);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
/* ENTFERNT: backdrop-filter, box-shadow */
}
.dark .flash-message {
background: rgba(26, 26, 26, 0.95);
border-color: var(--color-border-primary);
}
.flash-message:hover {
background: rgba(255, 255, 255, 1);
/* ENTFERNT: transform für bessere Performance */
}
.dark .flash-message:hover {
background: rgba(26, 26, 26, 1);
}
.flash-message.info {
border-left: 4px solid #3b82f6;
background: rgba(239, 246, 255, 0.95);
}
.flash-message.success {
border-left: 4px solid #10b981;
background: rgba(236, 253, 245, 0.95);
}
.flash-message.warning {
border-left: 4px solid #fbbf24;
background: rgba(255, 251, 235, 0.95);
}
.flash-message.error {
border-left: 4px solid #ef4444;
background: rgba(254, 242, 242, 0.95);
}
/* Einfache Animationen - NUR OPACITY */
@keyframes flash-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Alle weiteren Komponenten folgen dem gleichen Optimierungsmuster:
- Entfernung von backdrop-filter
- Entfernung von komplexen box-shadows
- Entfernung von transform-Animationen
- Vereinfachung von transitions zu opacity/background-color only
- Beibehaltung des visuellen Designs
*/

BIN
static/css/input-raspberry-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/input-raspberry-optimized.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/input-raspberry-optimized.min.css.gz Normal file
View File

Binary file not shown.

3385
static/css/input.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
static/css/input.css.gz Normal file
View File

Binary file not shown.

1
static/css/input.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/input.min.css.gz Normal file
View File

Binary file not shown.

102
static/css/optimization-animations.css Normal file
View File

@@ -0,0 +1,102 @@
/**
* MYP Platform - Minimale Animationen für Raspberry Pi
* Nur essentielle Fade-In Animationen für optimale Performance
*/
/* ===== NUR FADE-IN ANIMATION - MINIMAL ===== */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fade-in {
animation: fade-in 0.2s ease-out;
}
/* ===== ALLE TRANSFORM-ANIMATIONEN ENTFERNT ===== */
/* Entfernt: slide-up, scale-in und alle transform-basierten Animationen */
/* ===== EINFACHER HOVER-EFFEKT - NUR OPACITY ===== */
.animate-hover-lift {
transition: opacity 0.2s ease;
}
.animate-hover-lift:hover {
opacity: 0.8;
/* Entfernt: transform - nur opacity change */
}
/* ===== EINFACHE SUCCESS INDICATION - NUR OPACITY ===== */
@keyframes simple-success {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-success {
animation: simple-success 0.2s ease-out;
}
/* ===== EINFACHER PULSE FÜR LOADING - REDUZIERT ===== */
@keyframes simple-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.animate-pulse-simple {
animation: simple-pulse 2s infinite ease-in-out;
}
/* ===== EINFACHER PROGRESS BAR - NUR WIDTH ===== */
.progress-fill {
transition: width 0.5s ease-out;
/* Reduzierte Dauer für bessere Performance */
}
/* ===== UTILITY CLASSES - MINIMAL ===== */
.animate-smooth {
transition: opacity 0.2s ease;
/* Nur opacity transition */
}
.animate-smooth-fast {
transition: opacity 0.1s ease;
/* Nur opacity transition */
}
/* ===== RESPONSIVE ANPASSUNGEN - MINIMAL ===== */
@media (max-width: 768px) {
.animate-fade-in {
animation-duration: 0.1s;
/* Noch schneller auf mobilen Geräten */
}
}
/* ===== REDUZIERTE BEWEGUNG UNTERSTÜTZUNG - ERWEITERT ===== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transform: none !important;
}
.animate-hover-lift:hover {
opacity: 1 !important;
/* Keine Hover-Effekte bei reduzierter Bewegung */
}
}
/* ===== ALLE WILL-CHANGE PROPERTIES ENTFERNT ===== */
/* will-change Properties können auf schwacher Hardware mehr schaden als nutzen */

BIN
static/css/optimization-animations.css.gz Normal file
View File

Binary file not shown.

1
static/css/optimization-animations.min.css vendored Normal file
View File

@@ -0,0 +1 @@
@keyframes fade-in{from{opacity:0}to{opacity:1}}.animate-fade-in{animation:fade-in .2s ease-out}@keyframes slide-up{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slide-up .3s ease-out}.animate-slide-up-delay{animation:slide-up .3s ease-out;animation-delay:.1s;animation-fill-mode:both}.animate-slide-up-delay-2{animation:slide-up .3s ease-out;animation-delay:.2s;animation-fill-mode:both}.animate-hover-lift{transition:transform .2s ease}.animate-hover-lift:hover{transform:translateY(-2px)}@keyframes simple-success{0%{opacity:0;transform:scale(0.9)}100%{opacity:1;transform:scale(1)}}.animate-success{animation:simple-success .3s ease-out}@keyframes simple-pulse{0%,100%{opacity:1}50%{opacity:.6}}.animate-pulse-simple{animation:simple-pulse 2s infinite ease-in-out}.progress-fill{transition:width 1s ease-out}.animate-fade-in,.animate-slide-up,.animate-slide-up-delay,.animate-slide-up-delay-2{will-change:transform,opacity}.animate-hover-lift{will-change:transform}.animate-smooth{transition:all .2s ease}.animate-smooth-fast{transition:all .1s ease}@media(max-width:768px){.animate-fade-in,.animate-slide-up,.animate-slide-up-delay,.animate-slide-up-delay-2{animation-duration:.2s}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.animate-hover-lift:hover{transform:none}}

BIN
static/css/optimization-animations.min.css.gz Normal file
View File

Binary file not shown.

9972
static/css/output.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
static/css/output.css.gz Normal file
View File

Binary file not shown.

1
static/css/output.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/output.min.css.gz Normal file
View File

Binary file not shown.

230
static/css/performance-optimized.css Normal file
View File

@@ -0,0 +1,230 @@
/* Performance-optimized CSS for MYP Application - Fast Rendering Focus */
/* ===== OPTIMIZED GLASSMORPHISM FOR NAVBAR - FASTER LOADING ===== */
.glass-navbar {
background: rgba(255, 255, 255, 0.92);
/* Removed backdrop-filter for better performance */
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dark .glass-navbar {
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Optional: Add backdrop-filter only for high-performance devices */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
@supports (backdrop-filter: blur(10px)) {
.glass-navbar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dark .glass-navbar {
background: rgba(15, 23, 42, 0.85);
}
}
}
/* ===== SIMPLIFIED GLASS EFFECTS - NO ANIMATIONS ===== */
.glass-base {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-strong {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.glass-subtle {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Dark mode variants */
.dark .glass-base {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .glass-strong {
background: rgba(30, 41, 59, 0.98);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.dark .glass-subtle {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ===== SIMPLIFIED CARDS - NO SHADOWS OR TRANSITIONS ===== */
.glass-card {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(229, 231, 235, 0.5);
border-radius: 12px;
padding: 1.5rem;
}
.dark .glass-card {
background: rgba(30, 41, 59, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ===== BUTTONS - INSTANT FEEDBACK ===== */
.btn-primary {
background-color: #1a1a1a;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
}
.btn-primary:hover {
background-color: #333333;
}
.btn-secondary {
background-color: #e5e7eb;
color: #374151;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
}
.btn-secondary:hover {
background-color: #d1d5db;
}
/* ===== FORMS - SIMPLIFIED FOCUS STATES ===== */
input:focus,
textarea:focus,
select:focus {
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
/* ===== MODAL OVERLAYS - INSTANT APPEARANCE ===== */
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
inset: 0;
}
.modal-content {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .modal-content {
background: #1f2937;
}
/* ===== TOOLTIPS - SIMPLIFIED ===== */
.tooltip {
background: #1f2937;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
/* ===== LOADING STATES - STATIC ===== */
.spinner {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #f3f4f6;
border-top-color: #3b82f6;
border-radius: 50%;
}
/* Loading dots instead of spinner for better performance */
.loading-dots {
display: inline-flex;
gap: 0.25rem;
}
.loading-dots span {
width: 0.5rem;
height: 0.5rem;
background: #3b82f6;
border-radius: 50%;
opacity: 0.3;
}
.loading-dots span:nth-child(2) { opacity: 0.6; }
.loading-dots span:nth-child(3) { opacity: 1; }
/* ===== PERFORMANCE UTILITIES ===== */
.will-change-auto { will-change: auto; }
.no-transitions * { transition: none !important; }
.no-animations * { animation: none !important; }
.no-transforms * { transform: none !important; }
/* Disable all motion effects */
.reduce-motion * {
animation: none !important;
transition: none !important;
transform: none !important;
}
/* ===== REDUCED MOTION PREFERENCE ===== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== OPTIMIZED GRID LAYOUTS ===== */
.grid-optimized {
display: grid;
contain: layout;
}
/* ===== SIMPLIFIED BADGES ===== */
.badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
}
.badge-success {
background-color: #10b981;
color: white;
}
.badge-warning {
background-color: #f59e0b;
color: white;
}
.badge-error {
background-color: #ef4444;
color: white;
}
/* ===== OPTIMIZE PAINT AREAS ===== */
.contain-paint { contain: paint; }
.contain-layout { contain: layout; }
.contain-strict { contain: strict; }
/* ===== CRITICAL RENDERING PATH OPTIMIZATION ===== */
.above-fold {
content-visibility: visible;
}
.below-fold {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}

BIN
static/css/performance-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/performance-optimized.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.glass-navbar{background:rgba(255,255,255,0.92);border:1px solid rgba(255,255,255,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.05);}.dark .glass-navbar{background:rgba(15,23,42,0.92);border:1px solid rgba(255,255,255,0.1);}@media (min-width:1024px) and (prefers-reduced-motion:no-preference){@supports (backdrop-filter:blur(10px)){.glass-navbar{background:rgba(255,255,255,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}.dark .glass-navbar{background:rgba(15,23,42,0.85);}}}.glass-base{background:rgba(255,255,255,0.95);border:1px solid rgba(255,255,255,0.3);}.glass-strong{background:rgba(255,255,255,0.98);border:1px solid rgba(255,255,255,0.4);}.glass-subtle{background:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.2);}.dark .glass-base{background:rgba(15,23,42,0.95);border:1px solid rgba(255,255,255,0.1);}.dark .glass-strong{background:rgba(30,41,59,0.98);border:1px solid rgba(255,255,255,0.15);}.dark .glass-subtle{background:rgba(15,23,42,0.9);border:1px solid rgba(255,255,255,0.08);}.glass-card{background:rgba(255,255,255,0.98);border:1px solid rgba(229,231,235,0.5);border-radius:12px;padding:1.5rem;}.dark .glass-card{background:rgba(30,41,59,0.98);border:1px solid rgba(255,255,255,0.1);}.btn-primary{background-color:#1a1a1a;color:white;padding:0.5rem 1rem;border-radius:0.375rem;font-weight:500;}.btn-primary:hover{background-color:#333333;}.btn-secondary{background-color:#e5e7eb;color:#374151;padding:0.5rem 1rem;border-radius:0.375rem;font-weight:500;}.btn-secondary:hover{background-color:#d1d5db;}input:focus,textarea:focus,select:focus{outline:2px solid #3b82f6;outline-offset:-2px;}.modal-backdrop{background-color:rgba(0,0,0,0.5);position:fixed;inset:0;}.modal-content{background:white;border-radius:0.5rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);}.dark .modal-content{background:#1f2937;}.tooltip{background:#1f2937;color:white;padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.875rem;}.spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2px solid #f3f4f6;border-top-color:#3b82f6;border-radius:50%;}.loading-dots{display:inline-flex;gap:0.25rem;}.loading-dots span{width:0.5rem;height:0.5rem;background:#3b82f6;border-radius:50%;opacity:0.3;}.loading-dots span:nth-child(2){opacity:0.6;}.loading-dots span:nth-child(3){opacity:1;}.will-change-auto{will-change:auto;}.no-transitions *{transition:none !important;}.no-animations *{animation:none !important;}.no-transforms *{transform:none !important;}.reduce-motion *{animation:none !important;transition:none !important;transform:none !important;}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}.grid-optimized{display:grid;contain:layout;}.badge{display:inline-flex;align-items:center;padding:0.125rem 0.625rem;font-size:0.75rem;font-weight:500;border-radius:9999px;}.badge-success{background-color:#10b981;color:white;}.badge-warning{background-color:#f59e0b;color:white;}.badge-error{background-color:#ef4444;color:white;}.contain-paint{contain:paint;}.contain-layout{contain:layout;}.contain-strict{contain:strict;}.above-fold{content-visibility:visible;}.below-fold{content-visibility:auto;contain-intrinsic-size:0 500px;}

BIN
static/css/performance-optimized.min.css.gz Normal file
View File

Binary file not shown.

177
static/css/printers.css Normal file
View File

@@ -0,0 +1,177 @@
/* Erweiterte Drucker-Styles für MYP Platform */
/* Filter-Button-Styles */
.filter-btn {
transition: all 0.2s ease-in-out;
}
.filter-btn.active {
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
color: #374151;
}
.dark .filter-btn.active {
background-color: #475569;
color: #f1f5f9;
}
/* Online-Drucker-Hervorhebung */
.printer-card-online {
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
border-color: #bbf7d0;
box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.1), 0 1px 2px 0 rgba(34, 197, 94, 0.06);
}
.dark .printer-card-online {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, #1e293b 100%);
border-color: #166534;
box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.2), 0 1px 2px 0 rgba(34, 197, 94, 0.1);
}
.printer-card-online:hover {
box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2), 0 2px 4px -1px rgba(34, 197, 94, 0.1);
}
.dark .printer-card-online:hover {
box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3), 0 2px 4px -1px rgba(34, 197, 94, 0.2);
}
/* Online-Indikator-Animation */
.online-indicator {
animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-green {
0%, 100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
50% {
opacity: .8;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
}
}
/* Status-Übersicht-Animationen */
.status-count-change {
animation: count-change 0.5s ease-in-out;
}
@keyframes count-change {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Auto-Refresh-Button-Animationen */
.auto-refresh-active {
background: linear-gradient(45deg, #10b981, #059669);
animation: gradient-shift 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Drucker-Karten-Übergangseffekte */
.printer-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.printer-card:hover {
transform: translateY(-2px);
}
/* Loading-Spinner für Live-Updates */
.live-update-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive Verbesserungen */
@media (max-width: 640px) {
.filter-btn {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
.status-overview {
flex-direction: column;
gap: 0.5rem;
}
.printer-card {
padding: 1rem;
}
}
/* Dark Mode Verbesserungen */
.dark .printer-card {
background-color: #1e293b;
border-color: #334155;
}
.dark .printer-card:hover {
background-color: #334155;
}
/* Accessibility Verbesserungen */
.filter-btn:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.printer-card:focus-within {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Print-Styles */
@media print {
.filter-btn,
.auto-refresh-btn,
.printer-detail-btn,
.delete-printer-btn {
display: none;
}
.printer-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #000;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.printer-card-online {
border: 2px solid #059669;
}
.online-indicator {
border: 1px solid #000;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.online-indicator,
.auto-refresh-active,
.live-update-spinner {
animation: none;
}
.printer-card {
transition: none;
}
.printer-card:hover {
transform: none;
}
}

BIN
static/css/printers.css.gz Normal file
View File

Binary file not shown.

1
static/css/printers.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.filter-btn{transition:all .2s ease-in-out}.filter-btn.active{background-color:white;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);color:#374151}.dark .filter-btn.active{background-color:#475569;color:#f1f5f9}.printer-card-online{background:linear-gradient(135deg,#f0fdf4 0,#fff 100%);border-color:#bbf7d0;box-shadow:0 1px 3px 0 rgba(34,197,94,0.1),0 1px 2px 0 rgba(34,197,94,0.06)}.dark .printer-card-online{background:linear-gradient(135deg,rgba(34,197,94,0.1) 0,#1e293b 100%);border-color:#166534;box-shadow:0 1px 3px 0 rgba(34,197,94,0.2),0 1px 2px 0 rgba(34,197,94,0.1)}.printer-card-online:hover{box-shadow:0 4px 6px -1px rgba(34,197,94,0.2),0 2px 4px -1px rgba(34,197,94,0.1)}.dark .printer-card-online:hover{box-shadow:0 4px 6px -1px rgba(34,197,94,0.3),0 2px 4px -1px rgba(34,197,94,0.2)}.online-indicator{animation:pulse-green 2s cubic-bezier(0.4,0,0.6,1) infinite}@keyframes pulse-green{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.7)}50%{opacity:.8;box-shadow:0 0 0 4px rgba(34,197,94,0)}}.status-count-change{animation:count-change .5s ease-in-out}@keyframes count-change{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.auto-refresh-active{background:linear-gradient(45deg,#10b981,#059669);animation:gradient-shift 3s ease-in-out infinite}@keyframes gradient-shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.printer-card{transition:all .3s cubic-bezier(0.4,0,0.2,1)}.printer-card:hover{transform:translateY(-2px)}.live-update-spinner{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:640px){.filter-btn{padding:.375rem .75rem;font-size:.75rem}.status-overview{flex-direction:column;gap:.5rem}.printer-card{padding:1rem}}.dark .printer-card{background-color:#1e293b;border-color:#334155}.dark .printer-card:hover{background-color:#334155}.filter-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.printer-card:focus-within{outline:2px solid #3b82f6;outline-offset:2px}@media print{.filter-btn,.auto-refresh-btn,.printer-detail-btn,.delete-printer-btn{display:none}.printer-card{break-inside:avoid;box-shadow:none;border:1px solid #000}}@media(prefers-contrast:high){.printer-card-online{border:2px solid #059669}.online-indicator{border:1px solid #000}}@media(prefers-reduced-motion:reduce){.online-indicator,.auto-refresh-active,.live-update-spinner{animation:none}.printer-card{transition:none}.printer-card:hover{transform:none}}

BIN
static/css/printers.min.css.gz Normal file
View File

Binary file not shown.

310
static/css/professional-theme-optimized.css Normal file
View File

@@ -0,0 +1,310 @@
/**
* Optimized Professional Theme for Raspberry Pi
* All transitions and hover effects removed for performance
*/
:root {
/* Mercedes-Benz Farben */
--mercedes-black: #000000;
--mercedes-silver: #C0C0C0;
--mercedes-dark-gray: #1a1a1a;
--mercedes-light-gray: #f5f5f5;
/* Theme Farben */
--primary-color: #3b82f6;
--secondary-color: #64748b;
--accent-color: #1d4ed8;
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;
/* Light Mode */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--text-primary: #1a202c;
--text-secondary: #4a5568;
--border-color: #e2e8f0;
}
.dark {
/* Dark Mode */
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--border-color: #334155;
}
/* Base Styles - Keine Transitions */
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Typography - Keine Hover-Effekte */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
font-weight: 700;
letter-spacing: -0.025em;
}
/* Links - Keine Hover-Animation */
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Buttons - Keine Transitions oder Hover-Effekte */
.btn {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
border: none;
outline: none;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-secondary {
background-color: var(--secondary-color);
color: white;
}
/* Cards - Keine Schatten-Animationen */
.card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.5rem;
}
/* Forms - Keine Focus-Animationen */
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-color);
border-radius: 0.5rem;
background-color: var(--bg-primary);
color: var(--text-primary);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--primary-color);
outline: none;
}
/* Tables - Keine Hover-Effekte */
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.table th {
font-weight: 600;
text-align: left;
}
/* Navigation - Keine Hover-Animationen */
.nav-link {
padding: 0.5rem 1rem;
color: var(--text-secondary);
display: inline-block;
}
.nav-link:hover {
color: var(--text-primary);
background-color: var(--bg-secondary);
}
.nav-link.active {
color: var(--primary-color);
font-weight: 600;
}
/* Badges - Statisch */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 600;
border-radius: 9999px;
}
.badge-success {
background-color: #d1fae5;
color: #065f46;
}
.badge-warning {
background-color: #fef3c7;
color: #92400e;
}
.badge-error {
background-color: #fee2e2;
color: #991b1b;
}
/* Dark Mode Badges */
.dark .badge-success {
background-color: #064e3b;
color: #6ee7b7;
}
.dark .badge-warning {
background-color: #78350f;
color: #fcd34d;
}
.dark .badge-error {
background-color: #7f1d1d;
color: #fca5a5;
}
/* Alerts - Statisch */
.alert {
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.alert-info {
background-color: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
}
.alert-success {
background-color: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
}
.alert-warning {
background-color: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.alert-error {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
/* Dark Mode Alerts */
.dark .alert-info {
background-color: #1e3a8a;
color: #93c5fd;
border-color: #3b82f6;
}
.dark .alert-success {
background-color: #064e3b;
color: #6ee7b7;
border-color: #10b981;
}
.dark .alert-warning {
background-color: #78350f;
color: #fcd34d;
border-color: #f59e0b;
}
.dark .alert-error {
background-color: #7f1d1d;
color: #fca5a5;
border-color: #ef4444;
}
/* Utility Classes - Keine Animationen */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); }
/* Keine Transitions */
* {
transition: none !important;
animation: none !important;
}
/* Keine Transform-Effekte */
.transform,
.translate-x-0,
.translate-y-0,
.rotate-0,
.scale-100 {
transform: none !important;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
/* Print Styles */
@media print {
body {
background: white;
color: black;
}
.no-print {
display: none !important;
}
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Focus Visible - Einfacher Stil */
:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}

BIN
static/css/professional-theme-optimized.css.gz Normal file
View File

Binary file not shown.

1
static/css/professional-theme-optimized.min.css vendored Normal file
View File

@@ -0,0 +1 @@
:root{--mercedes-black:#000000;--mercedes-silver:#C0C0C0;--mercedes-dark-gray:#1a1a1a;--mercedes-light-gray:#f5f5f5;--primary-color:#3b82f6;--secondary-color:#64748b;--accent-color:#1d4ed8;--success-color:#10b981;--warning-color:#f59e0b;--error-color:#ef4444;--bg-primary:#ffffff;--bg-secondary:#f8fafc;--text-primary:#1a202c;--text-secondary:#4a5568;--border-color:#e2e8f0;}.dark{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--border-color:#334155;}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:700;letter-spacing:-0.025em;}a{color:var(--primary-color);text-decoration:none;}a:hover{text-decoration:underline;}.btn{padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;cursor:pointer;border:none;outline:none;}.btn-primary{background-color:var(--primary-color);color:white;}.btn-secondary{background-color:var(--secondary-color);color:white;}.card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:0.75rem;padding:1.5rem;}.form-input,.form-select,.form-textarea{width:100%;padding:0.75rem;border:2px solid var(--border-color);border-radius:0.5rem;background-color:var(--bg-primary);color:var(--text-primary);}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-color);outline:none;}.table{width:100%;border-collapse:collapse;}.table th,.table td{padding:0.75rem;border-bottom:1px solid var(--border-color);}.table th{font-weight:600;text-align:left;}.nav-link{padding:0.5rem 1rem;color:var(--text-secondary);display:inline-block;}.nav-link:hover{color:var(--text-primary);background-color:var(--bg-secondary);}.nav-link.active{color:var(--primary-color);font-weight:600;}.badge{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;font-size:0.875rem;font-weight:600;border-radius:9999px;}.badge-success{background-color:#d1fae5;color:#065f46;}.badge-warning{background-color:#fef3c7;color:#92400e;}.badge-error{background-color:#fee2e2;color:#991b1b;}.dark .badge-success{background-color:#064e3b;color:#6ee7b7;}.dark .badge-warning{background-color:#78350f;color:#fcd34d;}.dark .badge-error{background-color:#7f1d1d;color:#fca5a5;}.alert{padding:1rem;border-radius:0.5rem;margin-bottom:1rem;}.alert-info{background-color:#dbeafe;color:#1e40af;border:1px solid #93c5fd;}.alert-success{background-color:#d1fae5;color:#065f46;border:1px solid #6ee7b7;}.alert-warning{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d;}.alert-error{background-color:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}.dark .alert-info{background-color:#1e3a8a;color:#93c5fd;border-color:#3b82f6;}.dark .alert-success{background-color:#064e3b;color:#6ee7b7;border-color:#10b981;}.dark .alert-warning{background-color:#78350f;color:#fcd34d;border-color:#f59e0b;}.dark .alert-error{background-color:#7f1d1d;color:#fca5a5;border-color:#ef4444;}.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05);}.shadow{box-shadow:0 1px 3px rgba(0,0,0,0.1);}.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.1);}.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,0.1);}.shadow-xl{box-shadow:0 20px 25px rgba(0,0,0,0.1);}*{transition:none !important;animation:none !important;}.transform,.translate-x-0,.translate-y-0,.rotate-0,.scale-100{transform:none !important;}::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-track{background:var(--bg-secondary);}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary);}@media print{body{background:white;color:black;}.no-print{display:none !important;}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;}

BIN
static/css/professional-theme-optimized.min.css.gz Normal file
View File

Binary file not shown.

898
static/css/professional-theme.css Normal file
View File

@@ -0,0 +1,898 @@
/**
* Mercedes-Benz MYP Platform - Optimierte Professional Theme
* Vereinfachte Light/Dark Mode Implementierung für bessere Performance
*/
/* Globale CSS-Variablen für konsistente Theming */
:root {
/* Mercedes-Benz Markenfarben */
--mb-primary: #0073ce;
--mb-primary-dark: #005a9f;
--mb-secondary: #64748b;
--mb-accent: #0ea5e9;
--mb-black: #000000;
--mb-silver: #c0c0c0;
/* Light Mode Farbpalette */
--light-bg-primary: #ffffff;
--light-bg-secondary: #fafbfc;
--light-bg-tertiary: #f3f5f7;
--light-surface: #ffffff;
--light-surface-hover: #fafbfc;
--light-text-primary: #111827;
--light-text-secondary: #374151;
--light-text-muted: #6b7280;
--light-text-accent: #0073ce;
--light-border: #e5e7eb;
--light-border-strong: #d1d5db;
--light-shadow: rgba(0, 0, 0, 0.04);
--light-shadow-strong: rgba(0, 0, 0, 0.08);
/* Dark Mode Farbpalette */
--dark-bg-primary: #0f172a;
--dark-bg-secondary: #1e293b;
--dark-bg-tertiary: #334155;
--dark-surface: #1e293b;
--dark-surface-hover: #334155;
--dark-text-primary: #f8fafc;
--dark-text-secondary: #e2e8f0;
--dark-text-muted: #94a3b8;
--dark-border: #334155;
--dark-border-strong: #475569;
--dark-shadow: rgba(0, 0, 0, 0.3);
--dark-shadow-strong: rgba(0, 0, 0, 0.5);
}
/* Vereinfachte Hero-Header - Raspberry Pi Optimiert */
.professional-hero {
position: relative;
overflow: hidden;
border-radius: 1rem;
margin: 1.5rem;
margin-bottom: 2rem;
background: var(--light-bg-secondary);
border: 1px solid var(--light-border);
/* Entfernt: box-shadow, transition, hover-transform */
}
.dark .professional-hero {
background: var(--dark-bg-secondary);
border: 1px solid var(--dark-border);
/* Entfernt: box-shadow */
}
/* Vereinfachte Container - Raspberry Pi Optimiert */
.professional-container {
background: var(--light-surface);
border: 1px solid var(--light-border);
border-radius: 0.75rem;
/* Entfernt: box-shadow, transition, hover-transform */
}
.dark .professional-container {
background: var(--dark-surface);
border: 1px solid var(--dark-border);
/* Entfernt: box-shadow, hover-effects */
}
/* Vereinfachte Glassmorphism-Effekte - Raspberry Pi Optimiert */
.mb-glass {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(229, 231, 235, 0.4);
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
}
.dark .mb-glass {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Entfernt: box-shadow, hover-effects */
}
/* Vereinfachte Buttons - Raspberry Pi Optimiert */
.btn-professional {
background: var(--mb-primary);
color: white;
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.025em;
/* Entfernt: gradient, transition, box-shadow, hover-transform */
}
.btn-professional:hover {
background: var(--mb-primary-dark);
/* Nur Background-Color Change */
}
/* Secondary Button - Raspberry Pi Optimiert */
.btn-secondary-professional {
background: var(--light-surface);
color: var(--light-text-primary);
border: 1px solid var(--light-border-strong);
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 0.875rem;
/* Entfernt: transition, box-shadow, hover-transform */
}
.dark .btn-secondary-professional {
background: var(--dark-surface);
color: var(--dark-text-primary);
border-color: var(--dark-border-strong);
/* Entfernt: box-shadow */
}
.btn-secondary-professional:hover {
background: var(--light-surface-hover);
border-color: var(--mb-primary);
/* Nur Background und Border-Color Change */
}
.dark .btn-secondary-professional:hover {
background: var(--dark-surface-hover);
}
/* Vereinfachte Input Fields - Raspberry Pi Optimiert */
.input-professional {
background: var(--light-surface);
border: 1px solid var(--light-border);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
color: var(--light-text-primary);
font-size: 0.875rem;
/* Entfernt: transition, box-shadow, focus-transform */
}
.dark .input-professional {
background: var(--dark-surface);
border-color: var(--dark-border);
color: var(--dark-text-primary);
/* Entfernt: box-shadow */
}
.input-professional:focus {
border-color: var(--mb-primary);
/* Nur Border-Color Change */
}
.input-professional::placeholder {
color: var(--light-text-muted);
}
.dark .input-professional::placeholder {
color: var(--dark-text-muted);
}
/* Vereinfachte Cards - Raspberry Pi Optimiert */
.card-professional {
background: var(--light-surface);
border: 1px solid var(--light-border);
border-radius: 0.75rem;
padding: 1.5rem;
/* Entfernt: box-shadow, transition, hover-transform */
}
.dark .card-professional {
background: var(--dark-surface);
border-color: var(--dark-border);
/* Entfernt: box-shadow, hover-effects */
}
/* Vereinfachte Statistics Cards - Raspberry Pi Optimiert */
.stat-card {
background: var(--light-surface);
border: 1px solid var(--light-border);
border-radius: 0.75rem;
padding: 1.5rem;
text-align: center;
/* Entfernt: transition, box-shadow, hover-transform */
}
.dark .stat-card {
background: var(--dark-surface);
border-color: var(--dark-border);
/* Entfernt: box-shadow, hover-effects */
}
.stat-number {
font-size: 2.25rem;
font-weight: 700;
color: var(--light-text-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.dark .stat-number {
color: var(--dark-text-primary);
}
.stat-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--light-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dark .stat-label {
color: var(--dark-text-muted);
}
/* Vereinfachte Status Badges - Raspberry Pi Optimiert */
.status-professional {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
/* Entfernt: transition, hover-scale */
}
/* Status Indicators */
.status-online {
background: #ecfdf5;
color: #065f46;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.dark .status-online {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border-color: rgba(16, 185, 129, 0.3);
}
.status-offline {
background: #fef2f2;
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.dark .status-offline {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.status-printing {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.dark .status-printing {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.3);
}
/* Vereinfachte Typography */
.title-professional {
color: var(--light-text-primary);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
}
.dark .title-professional {
color: var(--dark-text-primary);
}
.subtitle-professional {
color: var(--light-text-muted);
font-size: 1.125rem;
line-height: 1.6;
font-weight: 400;
opacity: 0.9;
}
.dark .subtitle-professional {
color: var(--dark-text-muted);
}
/* Professional Navigation - Raspberry Pi Optimiert */
.nav-professional {
background: var(--light-bg-secondary);
border: 1px solid var(--light-border);
border-radius: 0.75rem;
padding: 0.5rem;
/* Entfernt: box-shadow */
}
.dark .nav-professional {
background: var(--dark-bg-secondary);
border-color: var(--dark-border);
/* Entfernt: box-shadow */
}
.nav-item-professional {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
color: var(--light-text-secondary);
text-decoration: none;
font-weight: 500;
position: relative;
background: transparent;
/* Entfernt: transition, hover-transform, box-shadow */
}
.dark .nav-item-professional {
color: var(--dark-text-secondary);
}
.nav-item-professional:hover {
background: var(--light-surface-hover);
color: var(--light-text-primary);
/* Nur Background und Color Change */
}
.dark .nav-item-professional:hover {
background: var(--dark-surface-hover);
color: var(--dark-text-primary);
}
.nav-item-professional.active {
background: rgba(0, 115, 206, 0.1);
color: var(--mb-primary);
font-weight: 600;
border: 1px solid var(--light-border-strong);
/* Entfernt: gradient, box-shadow */
}
.dark .nav-item-professional.active {
background: rgba(59, 130, 246, 0.2);
}
/* Professional Tables - Raspberry Pi Optimiert */
.table-professional {
width: 100%;
border-collapse: collapse;
background: var(--light-bg-secondary);
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid var(--light-border);
/* Entfernt: box-shadow */
}
.dark .table-professional {
background: var(--dark-bg-secondary);
/* Entfernt: box-shadow */
}
.table-professional th {
background: var(--light-bg-tertiary);
color: var(--light-text-primary);
font-weight: 600;
text-align: left;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--light-border);
/* Entfernt: gradient, ::after pseudo-element */
}
.dark .table-professional th {
background: var(--dark-bg-tertiary);
color: var(--dark-text-primary);
border-bottom-color: var(--dark-border);
}
.table-professional td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--light-border);
color: var(--light-text-secondary);
/* Entfernt: transition */
}
.dark .table-professional td {
border-bottom-color: var(--dark-border);
color: var(--dark-text-secondary);
}
.table-professional tbody tr:hover {
background: var(--light-surface-hover);
/* Entfernt: transform, box-shadow */
}
.dark .table-professional tbody tr:hover {
background: var(--dark-surface-hover);
}
/* Professional Alerts - Raspberry Pi Optimiert */
.alert-professional {
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid transparent;
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
position: relative;
/* Entfernt: box-shadow, overflow */
}
.alert-professional::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
}
.alert-info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
border-color: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.alert-info::before {
background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}
.dark .alert-info {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.alert-success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
border-color: rgba(16, 185, 129, 0.2);
color: #065f46;
}
.alert-success::before {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.dark .alert-success {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.alert-warning {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(251, 191, 36, 0.03) 100%);
border-color: rgba(251, 191, 36, 0.2);
color: #92400e;
}
.alert-warning::before {
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}
.dark .alert-warning {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
.alert-error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
border-color: rgba(239, 68, 68, 0.2);
color: #991b1b;
}
.alert-error::before {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
.dark .alert-error {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
/* Background Gradients für verschiedene Seiten */
.bg-professional {
background: var(--light-bg-secondary);
min-height: 100vh;
position: relative;
}
.bg-professional::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 115, 206, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 115, 206, 0.02) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(0, 115, 206, 0.01) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.dark .bg-professional {
background: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-tertiary) 100%);
}
/* Utilities */
.text-professional-primary {
color: var(--light-text-primary);
font-weight: 600;
}
.dark .text-professional-primary {
color: var(--dark-text-primary);
}
.text-professional-secondary {
color: var(--light-text-secondary);
font-weight: 500;
}
.dark .text-professional-secondary {
color: var(--dark-text-secondary);
}
.text-professional-muted {
color: var(--light-text-muted);
font-weight: 400;
}
.dark .text-professional-muted {
color: var(--dark-text-muted);
}
.text-professional-accent {
color: var(--light-text-accent);
font-weight: 600;
}
.dark .text-professional-accent {
color: #60a5fa;
}
/* Censored Text for Privacy Protection */
.censored-text {
font-family: monospace;
background: linear-gradient(45deg, var(--light-text-secondary), var(--light-text-muted));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
position: relative;
}
.censored-text::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: currentColor;
opacity: 0.3;
}
/* Smooth transitions für alle professionellen Komponenten - OPTIMIERT */
.professional-hero,
.professional-container,
.mb-glass,
.btn-professional,
.btn-secondary-professional,
.input-professional,
.card-professional,
.stat-card,
.status-professional,
.nav-professional,
.nav-item-professional,
.table-professional,
.alert-professional {
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
/* Entfernt: cubic-bezier und 'all' transitions für bessere Performance */
}
/* Responsive Design */
@media (max-width: 768px) {
.professional-hero {
margin: 1rem;
border-radius: 1.5rem;
}
.card-professional {
padding: 1rem;
}
.nav-professional {
padding: 0.25rem;
}
.nav-item-professional {
padding: 0.5rem 0.75rem;
}
.stat-number {
font-size: 2rem;
}
.btn-professional,
.btn-secondary-professional {
padding: 0.625rem 1.5rem;
font-size: 0.8rem;
}
}
/* Animation-Klassen - RASPBERRY PI OPTIMIERT */
.animate-fade-in {
animation: fadeInProfessional 0.3s ease-out;
/* Reduzierte Dauer von 0.6s auf 0.3s */
}
.animate-slide-up {
animation: fadeInProfessional 0.3s ease-out;
/* Ersetzt slideUpProfessional durch einfaches fade-in */
}
.animate-scale-in {
animation: fadeInProfessional 0.3s ease-out;
/* Ersetzt scaleInProfessional durch einfaches fade-in */
}
@keyframes fadeInProfessional {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Professional Mini Button Styles */
.btn-professional-mini {
background: rgba(59, 130, 246, 0.1);
color: var(--mb-primary);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 0.75rem;
padding: 0.5rem 1rem;
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.025em;
transition: background-color 0.2s ease, border-color 0.2s ease;
/* Entfernt: 'all 0.3s ease' für bessere Performance */
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dark .btn-professional-mini {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.3);
}
.btn-professional-mini:hover {
background: rgba(59, 130, 246, 0.2);
border-color: var(--mb-primary);
/* Entfernt: transform: translateY(-1px) für bessere Performance */
}
.dark .btn-professional-mini:hover {
background: rgba(59, 130, 246, 0.3);
}
/* Danger Mini Button */
.btn-danger-professional-mini {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 0.5rem;
padding: 0.5rem;
font-weight: 500;
font-size: 0.75rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
/* Entfernt: 'all 0.3s ease' für bessere Performance */
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dark .btn-danger-professional-mini {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger-professional-mini:hover {
background: rgba(239, 68, 68, 0.2);
border-color: #dc2626;
/* Entfernt: transform: translateY(-1px) scale(1.05) für bessere Performance */
}
.dark .btn-danger-professional-mini:hover {
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
}
/* Success Button - RASPBERRY PI OPTIMIERT */
.btn-success-professional {
background: #10b981;
color: white;
border: none;
border-radius: 1rem;
padding: 0.75rem 2rem;
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.025em;
text-transform: uppercase;
transition: background-color 0.2s ease;
/* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.btn-success-professional:hover {
background: #059669;
/* Entfernt: gradient, transform, box-shadow für bessere Performance */
}
.btn-success-professional:active {
background: #047857;
/* Entfernt: transform für bessere Performance */
}
/* Danger Button - RASPBERRY PI OPTIMIERT */
.btn-danger-professional {
background: #ef4444;
color: white;
border: none;
border-radius: 1rem;
padding: 0.75rem 2rem;
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.025em;
text-transform: uppercase;
transition: background-color 0.2s ease;
/* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.btn-danger-professional:hover {
background: #dc2626;
/* Entfernt: gradient, transform, box-shadow für bessere Performance */
}
.btn-danger-professional:active {
background: #b91c1c;
/* Entfernt: transform für bessere Performance */
}
/* Filter Button Mercedes */
.filter-btn-mercedes {
background: transparent;
color: var(--light-text-muted);
border: none;
border-radius: 0.75rem;
padding: 0.5rem 1rem;
font-weight: 500;
font-size: 0.875rem;
transition: color 0.2s ease, background-color 0.2s ease;
/* Entfernt: 'all 0.3s ease' für bessere Performance */
cursor: pointer;
position: relative;
}
.dark .filter-btn-mercedes {
color: var(--dark-text-muted);
}
.filter-btn-mercedes:hover {
color: var(--light-text-primary);
background: rgba(255, 255, 255, 0.1);
}
.dark .filter-btn-mercedes:hover {
color: var(--dark-text-primary);
background: rgba(255, 255, 255, 0.05);
}
.filter-btn-mercedes.active {
background: var(--mb-primary);
color: white;
/* Entfernt: box-shadow für bessere Performance */
}
/* Status Dots - RASPBERRY PI OPTIMIERT */
.status-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
display: inline-block;
position: relative;
}
.status-dot.status-online {
background: #10b981;
/* Entfernt: box-shadow für bessere Performance */
}
.status-dot.status-offline {
background: #ef4444;
/* Entfernt: box-shadow für bessere Performance */
}
/* Professional Accent Colors */
.bg-professional-accent {
background-color: var(--mb-accent);
}
/* Animate Spin Slow - RASPBERRY PI OPTIMIERT */
.animate-spin-slow {
animation: spin 4s linear infinite;
/* Verlangsamte Animation von 3s auf 4s für weniger CPU-Last */
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* GLASSMORPHISM KOMPLETT ENTFERNT FÜR RASPBERRY PI PERFORMANCE */
.glass-professional {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 1rem;
/* ENTFERNT: backdrop-filter, -webkit-backdrop-filter, box-shadow für Performance */
}
.dark .glass-professional {
background: rgba(30, 41, 59, 0.95);
border-color: rgba(255, 255, 255, 0.1);
/* ENTFERNT: box-shadow für Performance */
}
/* Enhanced Hover States - RASPBERRY PI OPTIMIERT */
.hover-lift {
transition: background-color 0.2s ease;
/* Entfernt: cubic-bezier transition für bessere Performance */
}
.hover-lift:hover {
background-color: var(--light-surface-hover);
/* Entfernt: transform, box-shadow für bessere Performance */
}
.dark .hover-lift:hover {
background-color: var(--dark-surface-hover);
/* Entfernt: box-shadow für bessere Performance */
}
/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* Focus States */
.focus-professional:focus {
outline: 2px solid var(--light-text-accent);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 115, 206, 0.15);
}
.dark .focus-professional:focus {
outline-color: #60a5fa;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

BIN
static/css/professional-theme.css.gz Normal file
View File

Binary file not shown.

1
static/css/professional-theme.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/professional-theme.min.css.gz Normal file
View File

Binary file not shown.

1
static/css/tailwind.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
static/css/tailwind.min.css.gz Normal file
View File

Binary file not shown.

300
static/css/ui-refinements.css Normal file
View File

@@ -0,0 +1,300 @@
/* UI Refinements - Subtle animations and improved components */
/* ===== DARK MODE TOGGLE - REFINED ===== */
.dark-mode-toggle {
position: relative;
width: 44px;
height: 24px;
padding: 0;
background: #e2e8f0;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
overflow: hidden;
flex-shrink: 0;
z-index: 10;
}
.dark .dark-mode-toggle {
background: #1e293b;
}
.dark-mode-toggle:hover {
background: #cbd5e1;
}
.dark .dark-mode-toggle:hover {
background: #334155;
}
.dark-mode-toggle-slider {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.dark .dark-mode-toggle-slider {
transform: translateX(20px);
background: #475569;
}
.dark-mode-toggle-icon {
font-size: 12px;
color: #f59e0b;
transition: opacity 0.2s ease;
}
.dark .dark-mode-toggle-icon.sun {
opacity: 0;
}
.dark .dark-mode-toggle-icon.moon {
opacity: 1;
color: #60a5fa;
}
/* ===== SIMPLE NOTIFICATIONS ===== */
.notification-simple {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dark .notification-simple {
background: #1f2937;
border-color: #374151;
}
.notification-simple.notification-enter {
opacity: 0;
transform: translateX(100%);
}
.notification-simple.notification-enter-active {
opacity: 1;
transform: translateX(0);
}
.notification-simple.notification-exit {
opacity: 0;
transform: translateX(100%);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.notification-icon {
font-size: 18px;
width: 20px;
text-align: center;
}
.notification-icon.success { color: #10b981; }
.notification-icon.error { color: #ef4444; }
.notification-icon.warning { color: #f59e0b; }
.notification-icon.info { color: #3b82f6; }
.notification-message {
font-size: 14px;
color: #374151;
}
.dark .notification-message {
color: #e5e7eb;
}
.notification-close {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.notification-close:hover {
background-color: #f3f4f6;
color: #6b7280;
}
.dark .notification-close:hover {
background-color: #374151;
color: #d1d5db;
}
/* ===== SIMPLE LOADING SPINNER ===== */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: simple-spin 0.8s linear infinite;
}
@keyframes simple-spin {
to { transform: rotate(360deg); }
}
/* ===== SKELETON LOADER ===== */
.skeleton {
background: #f3f4f6;
background-image: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
.dark .skeleton {
background: #374151;
background-image: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-text {
height: 16px;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-title {
height: 24px;
width: 60%;
margin-bottom: 12px;
border-radius: 4px;
}
.skeleton-button {
height: 40px;
width: 120px;
border-radius: 6px;
}
/* ===== SUBTLE HOVER ANIMATIONS ===== */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
/* ===== FADE IN ANIMATION ===== */
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== BUTTON PRESS EFFECT ===== */
.btn-press {
transition: transform 0.1s ease;
}
.btn-press:active {
transform: scale(0.98);
}
/* ===== SUBTLE PULSE FOR ACTIVE STATUS ===== */
.status-pulse {
position: relative;
}
.status-pulse::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
transform: translate(-50%, -50%);
animation: subtle-pulse 2s ease-in-out infinite;
}
@keyframes subtle-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
/* ===== SIMPLE PROGRESS BAR ===== */
.progress-bar {
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: #3b82f6;
transition: width 0.3s ease;
}
/* ===== NAVBAR ICON ADJUSTMENTS ===== */
.nav-item i {
font-size: 18px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Mobile Menu Icons */
.mobile-nav-item i {
font-size: 18px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}

BIN
static/css/ui-refinements.css.gz Normal file
View File

Binary file not shown.

300
static/css/ui-refinements.min.css vendored Normal file
View File

@@ -0,0 +1,300 @@
/* UI Refinements - Subtle animations and improved components */
/* ===== DARK MODE TOGGLE - REFINED ===== */
.dark-mode-toggle {
position: relative;
width: 44px;
height: 24px;
padding: 0;
background: #e2e8f0;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
overflow: hidden;
flex-shrink: 0;
z-index: 10;
}
.dark .dark-mode-toggle {
background: #1e293b;
}
.dark-mode-toggle:hover {
background: #cbd5e1;
}
.dark .dark-mode-toggle:hover {
background: #334155;
}
.dark-mode-toggle-slider {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.dark .dark-mode-toggle-slider {
transform: translateX(20px);
background: #475569;
}
.dark-mode-toggle-icon {
font-size: 12px;
color: #f59e0b;
transition: opacity 0.2s ease;
}
.dark .dark-mode-toggle-icon.sun {
opacity: 0;
}
.dark .dark-mode-toggle-icon.moon {
opacity: 1;
color: #60a5fa;
}
/* ===== SIMPLE NOTIFICATIONS ===== */
.notification-simple {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dark .notification-simple {
background: #1f2937;
border-color: #374151;
}
.notification-simple.notification-enter {
opacity: 0;
transform: translateX(100%);
}
.notification-simple.notification-enter-active {
opacity: 1;
transform: translateX(0);
}
.notification-simple.notification-exit {
opacity: 0;
transform: translateX(100%);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.notification-icon {
font-size: 18px;
width: 20px;
text-align: center;
}
.notification-icon.success { color: #10b981; }
.notification-icon.error { color: #ef4444; }
.notification-icon.warning { color: #f59e0b; }
.notification-icon.info { color: #3b82f6; }
.notification-message {
font-size: 14px;
color: #374151;
}
.dark .notification-message {
color: #e5e7eb;
}
.notification-close {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.notification-close:hover {
background-color: #f3f4f6;
color: #6b7280;
}
.dark .notification-close:hover {
background-color: #374151;
color: #d1d5db;
}
/* ===== SIMPLE LOADING SPINNER ===== */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: simple-spin 0.8s linear infinite;
}
@keyframes simple-spin {
to { transform: rotate(360deg); }
}
/* ===== SKELETON LOADER ===== */
.skeleton {
background: #f3f4f6;
background-image: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
.dark .skeleton {
background: #374151;
background-image: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-text {
height: 16px;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-title {
height: 24px;
width: 60%;
margin-bottom: 12px;
border-radius: 4px;
}
.skeleton-button {
height: 40px;
width: 120px;
border-radius: 6px;
}
/* ===== SUBTLE HOVER ANIMATIONS ===== */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
/* ===== FADE IN ANIMATION ===== */
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== BUTTON PRESS EFFECT ===== */
.btn-press {
transition: transform 0.1s ease;
}
.btn-press:active {
transform: scale(0.98);
}
/* ===== SUBTLE PULSE FOR ACTIVE STATUS ===== */
.status-pulse {
position: relative;
}
.status-pulse::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
transform: translate(-50%, -50%);
animation: subtle-pulse 2s ease-in-out infinite;
}
@keyframes subtle-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
/* ===== SIMPLE PROGRESS BAR ===== */
.progress-bar {
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: #3b82f6;
transition: width 0.3s ease;
}
/* ===== NAVBAR ICON ADJUSTMENTS ===== */
.nav-item i {
font-size: 18px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Mobile Menu Icons */
.mobile-nav-item i {
font-size: 18px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}

BIN
static/css/ui-refinements.min.css.gz Normal file
View File

Binary file not shown.