1 line
11 KiB
CSS
1 line
11 KiB
CSS
@layer components{.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;}.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;}.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;}.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-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;}.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;}.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;}.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;}.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{@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{@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;}.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-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);}.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{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;}.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);}.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-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);}.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);}.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%;}.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);}.main-container{background:rgba(248,250,252,0.8);}.dark .main-container{background:rgba(15,23,42,0.8);}.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;}*{transition:none !important;animation:none !important;}.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-shimmer{background:#f1f5f9;}.dark .loading-shimmer{background:#334155;}.focus-ring:focus{outline:3px solid #3b82f6;outline-offset:2px;}.dark .focus-ring:focus{outline:3px solid #60a5fa;}.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;}@media (max-width:768px){.professional-shadow{box-shadow:0 10px 25px rgba(0,0,0,0.1);}.professional-card{border-radius:1rem;}}.fade-in,.slide-up{}: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);}} |