1 line
13 KiB
CSS
1 line
13 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 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}.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}.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}.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}.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}.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}.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}.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}.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}.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 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}.mercedes-glass{background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);transition:all .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)}.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%);transition:all .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 .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)}.input-field{transition:all .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)}.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 .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)}.nav-item{position:relative;transition:all .3s ease;border-radius:.75rem}.nav-item::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:linear-gradient(90deg,#3b82f6,#1d4ed8);transition:all .3s ease;transform:translateX(-50%)}.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);backdrop-filter:blur(10px)}.dark .main-container{background:rgba(15,23,42,0.8)}.status-badge{display:inline-flex;align-items:center;padding:.5rem .75rem;font-size:.75rem;font-weight:700;border-radius:9999px;transition:all .2s ease;border:1px solid transparent;text-transform:uppercase;letter-spacing:.025em}.status-badge:hover{transform:scale(1.05)}*{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease}.interactive-hover{transition:all .3s cubic-bezier(0.4,0,0.2,1)}.interactive-hover:hover{transform:translateY(-2px)}.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: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-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:-.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}.mercedes-glass{backdrop-filter:blur(15px)}}.fade-in{animation:fadeIn .5s ease-in-out}.slide-up{animation:slideUp .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{--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)}} |