@yesdgq/claude-buddy 1.1.1018 → 1.1.2000

package/assets/libs/style.css

@@ -208,16 +208,20 @@ code {
 }
 
 /* Entrance animations for cards */
-.auth-card {
+div:not(.auth-list-ready) > .auth-card {
   animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
 }
 
 /* 卡片交错延迟 - 向上滑动效果，间隔更大 */
-.auth-card:nth-child(1) { animation-delay: 0ms; }
-.auth-card:nth-child(2) { animation-delay: 150ms; }
-.auth-card:nth-child(3) { animation-delay: 300ms; }
-.auth-card:nth-child(4) { animation-delay: 450ms; }
-.auth-card:nth-child(5) { animation-delay: 600ms; }
+div:not(.auth-list-ready) > .auth-card:nth-child(1) { animation-delay: 0ms; }
+div:not(.auth-list-ready) > .auth-card:nth-child(2) { animation-delay: 150ms; }
+div:not(.auth-list-ready) > .auth-card:nth-child(3) { animation-delay: 300ms; }
+div:not(.auth-list-ready) > .auth-card:nth-child(4) { animation-delay: 450ms; }
+div:not(.auth-list-ready) > .auth-card:nth-child(5) { animation-delay: 600ms; }
+
+.auth-list-ready > .auth-card {
+  animation: none;
+}
 
 /* Fade animation */
 /* ============================================
@@ -835,10 +839,11 @@ code {
   position: relative;
   padding-left: 3.5rem;
   transition: all var(--duration-normal) var(--ease-out-quart);
+  will-change: transform;
 }
 
 /* 卡片悬停效果 */
-.auth-card:hover {
+.auth-card:hover:not(.auth-card-shift-up):not(.auth-card-shift-down):not(.auth-card-dragging) {
   border-color: var(--accent-primary);
   box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
@@ -860,6 +865,9 @@ code {
 .auth-card-dragging {
   opacity: 0.5;
   cursor: grabbing;
+  z-index: 10;
+  transform: translateY(var(--drag-follow-offset, 0px));
+  transition: opacity var(--duration-fast);
 }
 
 .auth-card-drag-over {
@@ -868,6 +876,12 @@ code {
   box-shadow: var(--shadow-glow-blue);
 }
 
+.auth-card-shift-up,
+.auth-card-shift-down {
+  transform: translateY(var(--drag-shift-offset));
+  transition: transform var(--duration-normal) var(--ease-out-quart), border-color var(--duration-fast), box-shadow var(--duration-fast);
+}
+
 /* Drag handle */
 .auth-card .drag-handle {
   position: absolute;
@@ -1242,6 +1256,93 @@ code {
   color: var(--text-primary);
 }
 
+.auth-card .auth-body .codex-env-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-top: var(--space-sm);
+  margin-bottom: var(--space-md);
+  padding: 12px;
+  background-color: rgba(255, 255, 255, 0.025);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+
+[data-theme="light"] .auth-card .auth-body .codex-env-section {
+  background-color: rgba(16, 185, 129, 0.075);
+  border-color: rgba(16, 185, 129, 0.18);
+}
+
+.auth-card .auth-body .codex-env-section .default-model-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.auth-card .auth-body .codex-env-section .default-model-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
+
+.auth-card .auth-body .codex-env-section .default-model-header label,
+.auth-card .auth-body .codex-env-section .default-model-inline-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.auth-card .auth-body .codex-env-section .default-model-inline-label {
+  flex: 0 0 132px;
+  min-height: 42px;
+  justify-content: flex-start;
+  padding: 0 var(--space-md);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+
+.auth-card .auth-body .codex-env-section .default-model-header label i {
+  color: var(--accent-primary);
+}
+
+.auth-card .auth-body .codex-env-section .default-model-input-wrap {
+  position: relative;
+  flex: 0 1 calc((100% - 132px - var(--space-md)) / 2);
+  min-width: 0;
+}
+
+.auth-card .auth-body .codex-env-section input {
+  width: 100%;
+  min-height: 42px;
+  padding: 10px var(--space-md);
+  font-size: 0.875rem;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: all var(--duration-fast);
+}
+
+.auth-card .auth-body .codex-env-section input::placeholder {
+  color: var(--text-disabled);
+}
+
+.auth-card .auth-body .codex-env-section input:focus {
+  background-color: var(--bg-elevated);
+  border-color: var(--accent-primary);
+}
+
 /* ============================================
    Model & Env Sections
    ============================================ */
@@ -1463,20 +1564,18 @@ code {
   flex: 1;
 }
 
-/* 右下角悬浮保存按钮 */
+/* 右下角悬浮按钮 */
+.fab-add,
 .fab-save {
   position: fixed;
-  bottom: var(--space-xl);
   right: var(--space-xl);
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
-  background: linear-gradient(135deg, var(--accent-success) 0%, #34d399 100%);
   color: white;
   font-size: 1.25rem;
   cursor: pointer;
-  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45), 0 8px 24px rgba(16, 185, 129, 0.25);
   transition: all var(--duration-fast) var(--ease-out-quart);
   z-index: 100;
   display: flex;
@@ -1484,11 +1583,32 @@ code {
   justify-content: center;
 }
 
+.fab-add {
+  bottom: calc(var(--space-xl) + 68px);
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
+  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.45), 0 8px 24px rgba(14, 165, 233, 0.25);
+}
+
+.fab-save {
+  bottom: var(--space-xl);
+  background: linear-gradient(135deg, var(--accent-success) 0%, #34d399 100%);
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45), 0 8px 24px rgba(16, 185, 129, 0.25);
+}
+
+.fab-add:hover,
 .fab-save:hover:not(:disabled) {
   transform: translateY(-3px) scale(1.05);
+}
+
+.fab-add:hover {
+  box-shadow: 0 6px 24px rgba(14, 165, 233, 0.6), 0 12px 36px rgba(14, 165, 233, 0.35);
+}
+
+.fab-save:hover:not(:disabled) {
   box-shadow: 0 6px 24px rgba(16, 185, 129, 0.6), 0 12px 36px rgba(16, 185, 129, 0.35);
 }
 
+.fab-add:active,
 .fab-save:active:not(:disabled) {
   transform: translateY(0) scale(0.98);
 }
@@ -1499,13 +1619,21 @@ code {
 }
 
 @media (max-width: 768px) {
+  .fab-add,
   .fab-save {
     width: 48px;
     height: 48px;
     font-size: 1.125rem;
-    bottom: var(--space-lg);
     right: var(--space-lg);
   }
+
+  .fab-add {
+    bottom: calc(var(--space-lg) + 60px);
+  }
+
+  .fab-save {
+    bottom: var(--space-lg);
+  }
 }
 
 /* ============================================
@@ -1516,6 +1644,21 @@ code {
     padding: 0 var(--space-sm);
   }
 
+  .auth-card .auth-body .codex-env-section .default-model-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-sm);
+  }
+
+  .auth-card .auth-body .codex-env-section .default-model-inline-label {
+    flex-basis: auto;
+    justify-content: flex-start;
+  }
+
+  .auth-card .auth-body .codex-env-section .default-model-input-wrap {
+    flex: 1 1 auto;
+  }
+
   .header-row {
     flex-direction: column;
     align-items: flex-start;