Projektarbeit-MYP/backend/app/static/css/components.css

/**
 * MYP Platform Komponenten-Bibliothek
 * Erweiterte UI-Komponenten basierend auf Tailwind CSS
 */

@layer components {
  /* Karten und Container */
  .card {
    @apply bg-white dark:bg-dark-card rounded-xl shadow-sm border border-light-border dark:border-dark-border p-6 m-4 transition-colors duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-md hover:bg-light-card-hover dark:hover:bg-dark-card-hover transition-all duration-300;
  }
  
  .container-panel {
    @apply bg-light-bg-secondary dark:bg-dark-bg-secondary rounded-lg p-6 m-4 border border-light-border dark:border-dark-border;
  }
  
  /* Formulare */
  .form-input {
    @apply w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-3 text-slate-900 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-30 transition-colors duration-300;
  }
  
  .form-label {
    @apply block text-sm font-medium text-light-text dark:text-slate-300 mb-2 transition-colors duration-300;
  }
  
  .form-group {
    @apply mb-6;
  }
  
  .form-help {
    @apply mt-1 text-xs text-light-text-muted 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;
  }
  
  /* Buttons */
  .btn-icon {
    @apply inline-flex items-center justify-center rounded-lg p-2 transition-colors duration-300;
  }
  
  .btn-text {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-300;
  }
  
  .btn-rounded {
    @apply rounded-full;
  }
  
  .btn-sm {
    @apply px-3 py-1 text-xs;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  /* Badges und Tags */
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors duration-300;
  }
  
  .badge-blue {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
  }
  
  .badge-green {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
  }
  
  .badge-red {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
  }
  
  .badge-yellow {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
  }
  
  .badge-purple {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300;
  }
  
  /* Status Anzeigen */
  .status-dot {
    @apply relative flex h-2 w-2 rounded-full;
  }
  
  .status-dot::after {
    @apply absolute top-0 left-0 h-full w-full rounded-full content-[''] animate-ping opacity-75;
  }
  
  .status-online {
    @apply bg-status-online;
  }
  
  .status-online::after {
    @apply bg-status-online;
  }
  
  .status-offline {
    @apply bg-status-offline;
  }
  
  .status-warning {
    @apply bg-status-warning;
  }
  
  .status-warning::after {
    @apply bg-status-warning;
  }
  
  /* Tabellen */
  .table-container {
    @apply w-full overflow-x-auto rounded-lg border border-light-border dark:border-dark-border shadow-sm;
  }
  
  .table-styled {
    @apply w-full whitespace-nowrap text-left text-sm text-light-text dark:text-slate-200;
  }
  
  .table-styled thead {
    @apply bg-slate-50 dark:bg-slate-700 transition-colors duration-300;
  }
  
  .table-styled th {
    @apply px-4 py-3 font-medium transition-colors duration-300;
  }
  
  .table-styled tbody tr {
    @apply border-t border-light-border dark:border-dark-border transition-colors duration-300;
  }
  
  .table-styled tbody tr:hover {
    @apply bg-light-hover dark:bg-slate-700/50 transition-colors duration-300;
  }
  
  .table-styled td {
    @apply px-4 py-3 transition-colors duration-300;
  }
  
  /* Alert und Toast */
  .alert {
    @apply rounded-lg border p-4 mb-4 transition-colors duration-300;
  }
  
  .alert-info {
    @apply bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300;
  }
  
  .alert-success {
    @apply bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300;
  }
  
  .alert-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300;
  }
  
  .alert-error {
    @apply bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300;
  }
  
  /* Navigation */
  .nav-tab {
    @apply inline-flex items-center gap-2 px-4 py-2 border-b-2 text-sm font-medium transition-colors duration-300;
  }
  
  .nav-tab-active {
    @apply border-indigo-600 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400;
  }
  
  .nav-tab-inactive {
    @apply border-transparent text-light-text-muted hover:text-light-text hover:border-light-border dark:text-slate-400 dark:hover:text-slate-300 dark:hover:border-slate-600;
  }

  /* Navigation Links */
  .nav-link {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-light-text-secondary dark:text-slate-300 hover:bg-light-hover dark:hover:bg-slate-700 transition-colors duration-300;
  }
  
  .nav-link.active {
    @apply bg-indigo-50 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 font-medium;
  }
  
  /* Printer Status */
  .printer-status {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium;
  }
  
  .printer-ready {
    @apply bg-printer-ready/10 text-printer-ready ring-1 ring-printer-ready/30;
  }
  
  .printer-busy {
    @apply bg-printer-busy/10 text-printer-busy ring-1 ring-printer-busy/30;
  }
  
  .printer-error {
    @apply bg-printer-error/10 text-printer-error ring-1 ring-printer-error/30;
  }
  
  .printer-offline {
    @apply bg-printer-offline/10 text-printer-offline ring-1 ring-printer-offline/30;
  }
  
  .printer-maintenance {
    @apply bg-printer-maintenance/10 text-printer-maintenance ring-1 ring-printer-maintenance/30;
  }
  
  /* Job Status */
  .job-status {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium;
  }
  
  .job-queued {
    @apply bg-job-queued/10 text-job-queued ring-1 ring-job-queued/30;
  }
  
  .job-printing {
    @apply bg-job-printing/10 text-job-printing ring-1 ring-job-printing/30;
  }
  
  .job-completed {
    @apply bg-job-completed/10 text-job-completed ring-1 ring-job-completed/30;
  }
  
  .job-failed {
    @apply bg-job-failed/10 text-job-failed ring-1 ring-job-failed/30;
  }
  
  .job-cancelled {
    @apply bg-job-cancelled/10 text-job-cancelled ring-1 ring-job-cancelled/30;
  }
  
  .job-paused {
    @apply bg-job-paused/10 text-job-paused ring-1 ring-job-paused/30;
  }

  /* Buttons for light/dark mode */
  .btn {
    @apply px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 shadow-sm hover:shadow;
  }
  
  .btn-primary {
    @apply btn bg-indigo-600 hover:bg-indigo-700 text-white focus:ring-indigo-500;
  }
  
  .btn-secondary {
    @apply btn bg-slate-100 hover:bg-slate-200 text-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white focus:ring-slate-500;
  }
  
  .btn-danger {
    @apply btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
  }
  
  .btn-success {
    @apply btn bg-green-600 hover:bg-green-700 text-white focus:ring-green-500;
  }

  /* Light mode specific shadow enhancement */
  .light-shadow {
    @apply shadow-sm hover:shadow-md transition-shadow duration-300;
  }
}