|
458 | 458 | } |
459 | 459 | } |
460 | 460 | } |
| 461 | + |
| 462 | +// Reset Database Section |
| 463 | +.reset-db-section { |
| 464 | + &.danger-zone { |
| 465 | + border-left: 4px solid $danger; |
| 466 | + background: rgba(245, 101, 101, 0.05); |
| 467 | + |
| 468 | + h3 { |
| 469 | + color: $danger; |
| 470 | + } |
| 471 | + |
| 472 | + .danger-description { |
| 473 | + color: #d32f2f; |
| 474 | + font-weight: $font-weight-medium; |
| 475 | + } |
| 476 | + } |
| 477 | + |
| 478 | + .reset-db-content { |
| 479 | + display: flex; |
| 480 | + flex-direction: column; |
| 481 | + gap: $spacing-md; |
| 482 | + } |
| 483 | + |
| 484 | + .warning-box { |
| 485 | + display: flex; |
| 486 | + align-items: flex-start; |
| 487 | + gap: $spacing-md; |
| 488 | + padding: $spacing-md; |
| 489 | + background: #fff3cd; |
| 490 | + border: 1px solid #ffc107; |
| 491 | + border-radius: 8px; |
| 492 | + |
| 493 | + i { |
| 494 | + color: #ff6b6b; |
| 495 | + font-size: 1.25rem; |
| 496 | + flex-shrink: 0; |
| 497 | + margin-top: 0.125rem; |
| 498 | + } |
| 499 | + |
| 500 | + p { |
| 501 | + margin: 0; |
| 502 | + color: #856404; |
| 503 | + font-size: $font-size-sm; |
| 504 | + } |
| 505 | + } |
| 506 | + |
| 507 | + .btn-danger { |
| 508 | + background: $danger; |
| 509 | + color: white; |
| 510 | + border: none; |
| 511 | + padding: 0.75rem 1.5rem; |
| 512 | + border-radius: 8px; |
| 513 | + cursor: pointer; |
| 514 | + font-weight: $font-weight-semibold; |
| 515 | + display: inline-flex; |
| 516 | + align-items: center; |
| 517 | + gap: 0.5rem; |
| 518 | + transition: all 0.2s; |
| 519 | + |
| 520 | + &:hover:not(:disabled) { |
| 521 | + background: darken($danger, 10%); |
| 522 | + transform: translateY(-1px); |
| 523 | + box-shadow: 0 4px 12px rgba($danger, 0.3); |
| 524 | + } |
| 525 | + |
| 526 | + &:active:not(:disabled) { |
| 527 | + transform: translateY(0); |
| 528 | + } |
| 529 | + |
| 530 | + &:disabled { |
| 531 | + opacity: 0.5; |
| 532 | + cursor: not-allowed; |
| 533 | + } |
| 534 | + |
| 535 | + i { |
| 536 | + font-size: $font-size-base; |
| 537 | + } |
| 538 | + } |
| 539 | + |
| 540 | + .reset-confirmation-box { |
| 541 | + display: flex; |
| 542 | + flex-direction: column; |
| 543 | + gap: $spacing-md; |
| 544 | + padding: $spacing-md; |
| 545 | + background: var(--bg-tertiary); |
| 546 | + border: 2px solid $danger; |
| 547 | + border-radius: 8px; |
| 548 | + |
| 549 | + .confirmation-label { |
| 550 | + font-weight: $font-weight-semibold; |
| 551 | + color: var(--text-primary); |
| 552 | + margin: 0; |
| 553 | + } |
| 554 | + |
| 555 | + .confirmation-input { |
| 556 | + padding: 0.75rem $spacing-md; |
| 557 | + border: 1px solid var(--border-color); |
| 558 | + border-radius: 6px; |
| 559 | + background: white; |
| 560 | + color: var(--text-primary); |
| 561 | + font-size: $font-size-base; |
| 562 | + font-weight: $font-weight-medium; |
| 563 | + font-family: "Courier New", monospace; |
| 564 | + |
| 565 | + &:focus { |
| 566 | + outline: none; |
| 567 | + border-color: $danger; |
| 568 | + box-shadow: 0 0 0 2px rgba($danger, 0.1); |
| 569 | + } |
| 570 | + |
| 571 | + &::placeholder { |
| 572 | + color: var(--text-muted); |
| 573 | + } |
| 574 | + } |
| 575 | + |
| 576 | + .confirmation-actions { |
| 577 | + display: flex; |
| 578 | + gap: $spacing-md; |
| 579 | + justify-content: flex-end; |
| 580 | + |
| 581 | + .btn { |
| 582 | + padding: 0.625rem 1.25rem; |
| 583 | + border: none; |
| 584 | + border-radius: 6px; |
| 585 | + cursor: pointer; |
| 586 | + font-weight: $font-weight-semibold; |
| 587 | + display: flex; |
| 588 | + align-items: center; |
| 589 | + gap: 0.5rem; |
| 590 | + transition: all 0.2s; |
| 591 | + font-size: $font-size-sm; |
| 592 | + |
| 593 | + &:disabled { |
| 594 | + opacity: 0.5; |
| 595 | + cursor: not-allowed; |
| 596 | + } |
| 597 | + } |
| 598 | + |
| 599 | + .btn-secondary { |
| 600 | + background: var(--bg-primary); |
| 601 | + color: var(--text-primary); |
| 602 | + border: 1px solid var(--border-color); |
| 603 | + |
| 604 | + &:hover:not(:disabled) { |
| 605 | + background: var(--bg-tertiary); |
| 606 | + border-color: $gray-300; |
| 607 | + } |
| 608 | + } |
| 609 | + |
| 610 | + .btn-danger { |
| 611 | + background: $danger; |
| 612 | + color: white; |
| 613 | + padding: 0.625rem 1.25rem; |
| 614 | + |
| 615 | + &:hover:not(:disabled) { |
| 616 | + background: darken($danger, 10%); |
| 617 | + transform: translateY(-1px); |
| 618 | + box-shadow: 0 4px 12px rgba($danger, 0.3); |
| 619 | + } |
| 620 | + |
| 621 | + &:active:not(:disabled) { |
| 622 | + transform: translateY(0); |
| 623 | + } |
| 624 | + } |
| 625 | + } |
| 626 | + } |
| 627 | +} |
0 commit comments