| |
| |
|
|
|
|
|
|
| .card {
|
| background: var(--bg-card);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| box-shadow: var(--shadow-sm);
|
| }
|
|
|
| .card-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: var(--space-3) var(--space-4);
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
|
|
| .card-title {
|
| font-size: var(--text-base);
|
| font-weight: 600;
|
| color: var(--text-primary);
|
| margin: 0;
|
| }
|
|
|
| .card-body {
|
| padding: var(--space-3) var(--space-4);
|
| }
|
|
|
|
|
| .badge {
|
| display: inline-flex;
|
| align-items: center;
|
| padding: 2px 8px;
|
| font-size: 10px;
|
| font-weight: 600;
|
| border-radius: var(--radius-full);
|
| }
|
|
|
| .badge-success {
|
| background: rgba(16, 185, 129, 0.1);
|
| color: var(--success);
|
| }
|
|
|
| .badge-error,
|
| .badge-danger {
|
| background: rgba(239, 68, 68, 0.1);
|
| color: var(--danger);
|
| }
|
|
|
| .badge-warning {
|
| background: rgba(245, 158, 11, 0.1);
|
| color: var(--warning);
|
| }
|
|
|
| .badge-info {
|
| background: rgba(34, 211, 238, 0.1);
|
| color: var(--cyan);
|
| }
|
|
|
| .badge-primary {
|
| background: rgba(20, 184, 166, 0.1);
|
| color: var(--teal);
|
| }
|
|
|
|
|
| .form-group {
|
| margin-bottom: var(--space-4);
|
| }
|
|
|
| .form-label {
|
| display: block;
|
| font-size: var(--text-sm);
|
| font-weight: 500;
|
| color: var(--text-primary);
|
| margin-bottom: var(--space-1);
|
| }
|
|
|
| .form-input,
|
| .form-select,
|
| .form-textarea {
|
| width: 100%;
|
| padding: var(--space-2) var(--space-3);
|
| font-size: var(--text-sm);
|
| color: var(--text-primary);
|
| background: var(--bg-card);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-sm);
|
| }
|
|
|
| .form-input:focus,
|
| .form-select:focus,
|
| .form-textarea:focus {
|
| outline: none;
|
| border-color: var(--primary);
|
| box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
|
| }
|
|
|
|
|
| .data-table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| background: var(--bg-card);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| overflow: hidden;
|
| }
|
|
|
| .data-table thead {
|
| background: var(--mint);
|
| }
|
|
|
| .data-table th {
|
| padding: var(--space-2) var(--space-3);
|
| text-align: left;
|
| font-size: 10px;
|
| font-weight: 600;
|
| color: var(--text-muted);
|
| text-transform: uppercase;
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
|
|
| .data-table td {
|
| padding: var(--space-2) var(--space-3);
|
| font-size: var(--text-sm);
|
| color: var(--text-secondary);
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
|
|
| .data-table tbody tr:hover {
|
| background: var(--bg-tint);
|
| }
|
|
|
| .data-table tbody tr:last-child td {
|
| border-bottom: none;
|
| }
|
|
|
|
|
| .modal-backdrop {
|
| position: fixed;
|
| inset: 0;
|
| background: rgba(15, 41, 38, 0.5);
|
| backdrop-filter: blur(4px);
|
| z-index: 999;
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| }
|
|
|
| .modal-backdrop.show {
|
| opacity: 1;
|
| }
|
|
|
| .modal {
|
| position: fixed;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%) scale(0.95);
|
| z-index: var(--z-modal);
|
| opacity: 0;
|
| transition: all 0.2s;
|
| }
|
|
|
| .modal.show {
|
| opacity: 1;
|
| transform: translate(-50%, -50%) scale(1);
|
| }
|
|
|
| .modal-dialog {
|
| background: var(--bg-card);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| box-shadow: var(--shadow-xl);
|
| max-width: 90vw;
|
| max-height: 90vh;
|
| overflow: auto;
|
| }
|
|
|
| .modal-small .modal-dialog { width: 360px; }
|
| .modal-medium .modal-dialog { width: 500px; }
|
| .modal-large .modal-dialog { width: 720px; }
|
|
|
| .modal-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: var(--space-4);
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
|
|
| .modal-title {
|
| font-size: var(--text-lg);
|
| font-weight: 600;
|
| color: var(--text-primary);
|
| margin: 0;
|
| }
|
|
|
| .modal-close {
|
| background: none;
|
| border: none;
|
| font-size: 18px;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| padding: 4px;
|
| border-radius: var(--radius-sm);
|
| }
|
|
|
| .modal-close:hover {
|
| color: var(--text-primary);
|
| background: var(--mint);
|
| }
|
|
|
| .modal-body {
|
| padding: var(--space-4);
|
| }
|
|
|
|
|
| .toast-container,
|
| #toast-container {
|
| position: fixed;
|
| top: 60px;
|
| right: 16px;
|
| z-index: var(--z-toast);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| max-width: 320px;
|
| pointer-events: none;
|
| }
|
|
|
| .toast {
|
| display: flex;
|
| align-items: flex-start;
|
| gap: 10px;
|
| padding: 12px 14px;
|
| background: var(--bg-card);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| box-shadow: var(--shadow-lg);
|
| pointer-events: all;
|
| opacity: 0;
|
| transform: translateX(100%);
|
| transition: all 0.3s;
|
| }
|
|
|
| .toast.toast-show {
|
| opacity: 1;
|
| transform: translateX(0);
|
| }
|
|
|
| .toast.toast-hide {
|
| opacity: 0;
|
| transform: translateX(100%);
|
| }
|
|
|
| .toast-success { border-left: 3px solid var(--success); }
|
| .toast-error { border-left: 3px solid var(--danger); }
|
| .toast-warning { border-left: 3px solid var(--warning); }
|
| .toast-info { border-left: 3px solid var(--cyan); }
|
|
|
| .toast-icon {
|
| font-size: 16px;
|
| flex-shrink: 0;
|
| }
|
|
|
| .toast-success .toast-icon { color: var(--success); }
|
| .toast-error .toast-icon { color: var(--danger); }
|
| .toast-warning .toast-icon { color: var(--warning); }
|
| .toast-info .toast-icon { color: var(--cyan); }
|
|
|
| .toast-content {
|
| flex: 1;
|
| }
|
|
|
| .toast-message {
|
| font-size: var(--text-sm);
|
| color: var(--text-primary);
|
| }
|
|
|
| .toast-close {
|
| background: none;
|
| border: none;
|
| font-size: 14px;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| padding: 2px;
|
| }
|
|
|
| .toast-progress {
|
| position: absolute;
|
| bottom: 0;
|
| left: 0;
|
| height: 2px;
|
| background: var(--gradient-primary);
|
| animation: toast-progress linear forwards;
|
| }
|
|
|
| @keyframes toast-progress {
|
| from { width: 100%; }
|
| to { width: 0%; }
|
| }
|
|
|
|
|
| .loading-container {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: var(--space-6);
|
| }
|
|
|
| .spinner {
|
| width: 32px;
|
| height: 32px;
|
| border: 2px solid var(--mint);
|
| border-top-color: var(--primary);
|
| border-radius: 50%;
|
| animation: spin 0.8s linear infinite;
|
| }
|
|
|
| @keyframes spin {
|
| to { transform: rotate(360deg); }
|
| }
|
|
|
| .loading-text {
|
| margin-top: var(--space-3);
|
| font-size: var(--text-sm);
|
| color: var(--text-muted);
|
| }
|
|
|
| .skeleton-box {
|
| background: linear-gradient(90deg, var(--mint) 25%, var(--aqua-light) 50%, var(--mint) 75%);
|
| background-size: 200% 100%;
|
| animation: shimmer 1.5s infinite;
|
| border-radius: var(--radius-sm);
|
| height: 1em;
|
| }
|
|
|
| @keyframes shimmer {
|
| 0% { background-position: -200% 0; }
|
| 100% { background-position: 200% 0; }
|
| }
|
|
|
|
|
| .tabs {
|
| display: flex;
|
| gap: 2px;
|
| padding: 2px;
|
| background: var(--mint);
|
| border-radius: var(--radius-md);
|
| }
|
|
|
| .tab {
|
| padding: 6px 14px;
|
| font-size: var(--text-sm);
|
| font-weight: 500;
|
| color: var(--text-muted);
|
| background: transparent;
|
| border: none;
|
| border-radius: var(--radius-sm);
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| }
|
|
|
| .tab:hover {
|
| color: var(--text-secondary);
|
| background: white;
|
| }
|
|
|
| .tab.active {
|
| color: white;
|
| background: var(--gradient-primary);
|
| }
|
|
|
|
|
| .progress {
|
| height: 6px;
|
| background: var(--mint);
|
| border-radius: var(--radius-full);
|
| overflow: hidden;
|
| }
|
|
|
| .progress-bar {
|
| height: 100%;
|
| background: var(--gradient-primary);
|
| border-radius: var(--radius-full);
|
| transition: width 0.3s;
|
| }
|
|
|
|
|
| [data-tooltip] {
|
| position: relative;
|
| }
|
|
|
| [data-tooltip]::after {
|
| content: attr(data-tooltip);
|
| position: absolute;
|
| bottom: calc(100% + 6px);
|
| left: 50%;
|
| transform: translateX(-50%) scale(0.9);
|
| padding: 4px 8px;
|
| font-size: 10px;
|
| font-weight: 500;
|
| color: white;
|
| background: var(--gray-800);
|
| border-radius: var(--radius-sm);
|
| white-space: nowrap;
|
| opacity: 0;
|
| pointer-events: none;
|
| transition: all 0.15s;
|
| z-index: 100;
|
| }
|
|
|
| [data-tooltip]:hover::after {
|
| opacity: 1;
|
| transform: translateX(-50%) scale(1);
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .modal-dialog {
|
| width: 95vw !important;
|
| }
|
|
|
| .toast-container,
|
| #toast-container {
|
| left: 12px;
|
| right: 12px;
|
| max-width: none;
|
| }
|
|
|
| .toast {
|
| width: 100%;
|
| }
|
| }
|
|
|
|
|
| [data-theme="dark"] .card,
|
| [data-theme="dark"] .data-table,
|
| [data-theme="dark"] .modal-dialog,
|
| [data-theme="dark"] .toast {
|
| background: var(--bg-card);
|
| border-color: var(--border-light);
|
| }
|
|
|
| [data-theme="dark"] .data-table thead,
|
| [data-theme="dark"] .modal-header {
|
| background: rgba(45, 212, 191, 0.05);
|
| }
|
|
|
| [data-theme="dark"] .tabs,
|
| [data-theme="dark"] .progress {
|
| background: rgba(45, 212, 191, 0.1);
|
| }
|
|
|
