| .. | .. |
|---|
| 525 | 525 | color: #f3f4f6; |
|---|
| 526 | 526 | font-weight: 600; |
|---|
| 527 | 527 | } |
|---|
| 528 | + |
|---|
| 529 | +/* ---------- Operation Progress Bar ---------- */ |
|---|
| 530 | +.op-progress { |
|---|
| 531 | + height: 3px; |
|---|
| 532 | + border-radius: 2px; |
|---|
| 533 | + margin-bottom: 0.75rem; |
|---|
| 534 | + overflow: hidden; |
|---|
| 535 | + background: #1f2937; |
|---|
| 536 | + transition: opacity 0.3s; |
|---|
| 537 | +} |
|---|
| 538 | +.op-progress.hidden { |
|---|
| 539 | + opacity: 0; |
|---|
| 540 | + height: 0; |
|---|
| 541 | + margin: 0; |
|---|
| 542 | +} |
|---|
| 543 | +.op-progress.running { |
|---|
| 544 | + opacity: 1; |
|---|
| 545 | +} |
|---|
| 546 | +.op-progress.running .op-progress-fill { |
|---|
| 547 | + width: 100%; |
|---|
| 548 | + height: 100%; |
|---|
| 549 | + background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%); |
|---|
| 550 | + background-size: 200% 100%; |
|---|
| 551 | + animation: progress-slide 1.5s ease-in-out infinite; |
|---|
| 552 | +} |
|---|
| 553 | +.op-progress.done-ok .op-progress-fill { |
|---|
| 554 | + width: 100%; |
|---|
| 555 | + height: 100%; |
|---|
| 556 | + background: #10b981; |
|---|
| 557 | + animation: none; |
|---|
| 558 | +} |
|---|
| 559 | +.op-progress.done-fail .op-progress-fill { |
|---|
| 560 | + width: 100%; |
|---|
| 561 | + height: 100%; |
|---|
| 562 | + background: #ef4444; |
|---|
| 563 | + animation: none; |
|---|
| 564 | +} |
|---|
| 565 | + |
|---|
| 566 | +@keyframes progress-slide { |
|---|
| 567 | + 0% { background-position: 200% 0; } |
|---|
| 568 | + 100% { background-position: -200% 0; } |
|---|
| 569 | +} |
|---|
