| |
| |
| |
|
|
|
|
| |
| |
|
|
|
|
| .table-wrapper {
|
| background: var(--surface-glass);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| backdrop-filter: var(--blur-lg);
|
| -webkit-backdrop-filter: var(--blur-lg);
|
| overflow: hidden;
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| |
| |
|
|
|
|
| .table-filter-bar {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| gap: var(--space-4);
|
| padding: var(--space-4);
|
| background: var(--surface-glass);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| margin-bottom: var(--space-4);
|
| backdrop-filter: var(--blur-lg);
|
| -webkit-backdrop-filter: var(--blur-lg);
|
| }
|
|
|
| .table-filter-bar .search-wrapper {
|
| position: relative;
|
| flex: 1;
|
| max-width: 400px;
|
| }
|
|
|
| .table-filter-bar .search-icon {
|
| position: absolute;
|
| left: var(--space-3);
|
| top: 50%;
|
| transform: translateY(-50%);
|
| color: var(--text-muted);
|
| pointer-events: none;
|
| }
|
|
|
| .table-search-input {
|
| width: 100%;
|
| padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
|
| background: rgba(15, 23, 42, 0.60);
|
| border: 1px solid var(--border-subtle);
|
| border-radius: var(--radius-sm);
|
| color: var(--text-normal);
|
| font-size: var(--fs-sm);
|
| font-weight: var(--fw-medium);
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .table-search-input:focus {
|
| outline: none;
|
| border-color: var(--brand-blue);
|
| background: rgba(15, 23, 42, 0.80);
|
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
| }
|
|
|
| .table-info {
|
| color: var(--text-muted);
|
| font-size: var(--fs-sm);
|
| font-weight: var(--fw-medium);
|
| white-space: nowrap;
|
| }
|
|
|
| |
| |
|
|
|
|
| .enhanced-table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| font-size: var(--fs-sm);
|
| }
|
|
|
| .enhanced-table thead {
|
| background: rgba(255, 255, 255, 0.05);
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
|
|
| .enhanced-table th {
|
| padding: var(--space-4);
|
| text-align: left;
|
| font-weight: var(--fw-bold);
|
| font-size: var(--fs-xs);
|
| text-transform: uppercase;
|
| letter-spacing: var(--tracking-wider);
|
| color: var(--text-soft);
|
| user-select: none;
|
| }
|
|
|
| .enhanced-table th.sortable {
|
| cursor: pointer;
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .enhanced-table th.sortable:hover {
|
| background: rgba(255, 255, 255, 0.08);
|
| color: var(--text-strong);
|
| }
|
|
|
| .enhanced-table th.sorted {
|
| color: var(--brand-blue);
|
| background: rgba(59, 130, 246, 0.1);
|
| }
|
|
|
| .th-content {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-2);
|
| justify-content: space-between;
|
| }
|
|
|
| .sort-icon {
|
| color: var(--brand-blue);
|
| font-size: var(--fs-base);
|
| opacity: 0.8;
|
| }
|
|
|
| .enhanced-table tbody tr {
|
| border-bottom: 1px solid var(--border-subtle);
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .enhanced-table tbody tr:hover {
|
| background: rgba(255, 255, 255, 0.05);
|
| }
|
|
|
| .enhanced-table tbody tr.clickable {
|
| cursor: pointer;
|
| }
|
|
|
| .enhanced-table tbody tr.clickable:hover {
|
| background: rgba(59, 130, 246, 0.1);
|
| transform: translateX(4px);
|
| }
|
|
|
| .enhanced-table td {
|
| padding: var(--space-4);
|
| color: var(--text-normal);
|
| font-weight: var(--fw-regular);
|
| }
|
|
|
| |
| |
|
|
|
|
| .table-empty-state {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: var(--space-16) var(--space-8);
|
| text-align: center;
|
| }
|
|
|
| .table-empty-state .empty-icon {
|
| font-size: 64px;
|
| margin-bottom: var(--space-4);
|
| opacity: 0.3;
|
| }
|
|
|
| .table-empty-state .empty-message {
|
| color: var(--text-muted);
|
| font-size: var(--fs-base);
|
| font-weight: var(--fw-medium);
|
| }
|
|
|
| |
| |
|
|
|
|
| .table-pagination {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: var(--space-4);
|
| padding: var(--space-4);
|
| background: var(--surface-glass);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| margin-top: var(--space-4);
|
| backdrop-filter: var(--blur-lg);
|
| -webkit-backdrop-filter: var(--blur-lg);
|
| }
|
|
|
| .pagination-btn {
|
| padding: var(--space-2) var(--space-4);
|
| background: rgba(255, 255, 255, 0.08);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-sm);
|
| color: var(--text-normal);
|
| font-size: var(--fs-sm);
|
| font-weight: var(--fw-semibold);
|
| cursor: pointer;
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .pagination-btn:hover:not(:disabled) {
|
| background: var(--brand-blue);
|
| border-color: var(--brand-blue);
|
| color: white;
|
| transform: translateY(-2px);
|
| box-shadow: var(--glow-blue);
|
| }
|
|
|
| .pagination-btn:disabled {
|
| opacity: 0.4;
|
| cursor: not-allowed;
|
| }
|
|
|
| .pagination-pages {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-2);
|
| }
|
|
|
| .pagination-page {
|
| min-width: 36px;
|
| height: 36px;
|
| padding: var(--space-2);
|
| background: rgba(255, 255, 255, 0.05);
|
| border: 1px solid var(--border-subtle);
|
| border-radius: var(--radius-sm);
|
| color: var(--text-normal);
|
| font-size: var(--fs-sm);
|
| font-weight: var(--fw-semibold);
|
| cursor: pointer;
|
| transition: all var(--transition-fast);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .pagination-page:hover {
|
| background: rgba(255, 255, 255, 0.1);
|
| border-color: var(--border-light);
|
| transform: translateY(-2px);
|
| }
|
|
|
| .pagination-page.active {
|
| background: var(--brand-blue);
|
| border-color: var(--brand-blue);
|
| color: white;
|
| box-shadow: var(--glow-blue);
|
| }
|
|
|
| .pagination-ellipsis {
|
| color: var(--text-muted);
|
| padding: 0 var(--space-2);
|
| }
|
|
|
| |
| |
|
|
|
|
| @media (max-width: 768px) {
|
| .table-filter-bar {
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .table-filter-bar .search-wrapper {
|
| max-width: none;
|
| }
|
|
|
| .table-wrapper {
|
| overflow-x: auto;
|
| }
|
|
|
| .enhanced-table {
|
| min-width: 600px;
|
| }
|
|
|
| .table-pagination {
|
| flex-direction: column;
|
| }
|
|
|
| .pagination-pages {
|
| order: -1;
|
| }
|
| }
|
|
|
| @media (max-width: 480px) {
|
| .enhanced-table th,
|
| .enhanced-table td {
|
| padding: var(--space-2) var(--space-3);
|
| }
|
|
|
| .pagination-page {
|
| min-width: 32px;
|
| height: 32px;
|
| }
|
| }
|
|
|
