confirm-view.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /* 确认对话框样式(复制自 client/css/confirm-view.css) */
  2. .global-confirm-overlay {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. right: 0;
  7. bottom: 0;
  8. background: rgba(0, 0, 0, 0.6);
  9. display: none;
  10. align-items: center;
  11. justify-content: center;
  12. z-index: 100001;
  13. backdrop-filter: blur(4px);
  14. }
  15. .global-confirm-overlay.show {
  16. display: flex;
  17. animation: overlayFadeIn 0.3s ease-out;
  18. }
  19. @keyframes overlayFadeIn {
  20. from {
  21. background: rgba(0, 0, 0, 0);
  22. backdrop-filter: blur(0);
  23. }
  24. to {
  25. background: rgba(0, 0, 0, 0.6);
  26. backdrop-filter: blur(4px);
  27. }
  28. }
  29. .global-confirm-dialog {
  30. background: white;
  31. border-radius: 16px;
  32. box-shadow:
  33. 0 20px 60px rgba(0, 0, 0, 0.3),
  34. 0 0 0 1px rgba(0, 0, 0, 0.05);
  35. min-width: 420px;
  36. max-width: 520px;
  37. animation: confirmSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  38. }
  39. @keyframes confirmSlideIn {
  40. from {
  41. opacity: 0;
  42. transform: translateY(-30px) scale(0.95);
  43. }
  44. to {
  45. opacity: 1;
  46. transform: translateY(0) scale(1);
  47. }
  48. }
  49. .confirm-content {
  50. padding: 36px 32px 24px;
  51. }
  52. .confirm-message {
  53. font-size: 17px;
  54. line-height: 1.7;
  55. color: #1f2937;
  56. white-space: pre-wrap;
  57. font-weight: 400;
  58. letter-spacing: 0.2px;
  59. }
  60. .confirm-actions {
  61. padding: 0 32px 32px;
  62. display: flex;
  63. gap: 12px;
  64. justify-content: flex-end;
  65. }
  66. .confirm-btn {
  67. padding: 12px 28px;
  68. border: none;
  69. border-radius: 8px;
  70. font-size: 15px;
  71. cursor: pointer;
  72. transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  73. font-weight: 500;
  74. letter-spacing: 0.3px;
  75. min-width: 90px;
  76. }
  77. .confirm-cancel {
  78. background: #f3f4f6;
  79. color: #6b7280;
  80. border: 1px solid #e5e7eb;
  81. }
  82. .confirm-cancel:hover {
  83. background: #e5e7eb;
  84. color: #4b5563;
  85. border-color: #d1d5db;
  86. }
  87. .confirm-cancel:active {
  88. transform: scale(0.98);
  89. }
  90. .confirm-ok {
  91. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  92. color: white;
  93. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  94. }
  95. .confirm-ok:hover {
  96. box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
  97. transform: translateY(-1px);
  98. }
  99. .confirm-ok:active {
  100. transform: translateY(0) scale(0.98);
  101. }
  102. /* 输入框样式 */
  103. .prompt-input {
  104. width: 100%;
  105. margin-top: 16px;
  106. padding: 12px 16px;
  107. font-size: 15px;
  108. border: 2px solid #e5e7eb;
  109. border-radius: 8px;
  110. outline: none;
  111. transition: border-color 0.2s, box-shadow 0.2s;
  112. }
  113. .prompt-input:focus {
  114. border-color: #667eea;
  115. box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  116. }
  117. .prompt-input::placeholder {
  118. color: #9ca3af;
  119. }