codexmate 0.0.33 → 0.0.36

package/web-ui/styles/skills-market.css

@@ -1,3 +1,297 @@
+/* =========================
+   Minimalist Skills Flow Layout
+   ========================= */
+
+/* Header with title and target switch */
+.skills-minimal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+    padding-bottom: var(--spacing-sm);
+    border-bottom: 1px solid var(--color-border-soft);
+}
+
+.skills-header-left {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.skills-header-title {
+    font-size: 20px;
+    font-weight: var(--font-weight-primary);
+    color: var(--color-text-primary);
+    letter-spacing: -0.01em;
+}
+
+.skills-target-switch {
+    display: inline-flex;
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-full);
+    padding: 3px;
+    gap: 3px;
+}
+
+.skills-target-chip {
+    border: none;
+    background: transparent;
+    color: var(--color-text-secondary);
+    padding: 6px 14px;
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-caption);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: all var(--transition-fast) var(--ease-smooth);
+}
+
+.skills-target-chip:disabled,
+.skills-target-chip[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.skills-target-chip.active {
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+
+.skills-target-chip:hover:not(.active):not(:disabled) {
+    color: var(--color-text-primary);
+}
+
+.skills-header-actions {
+    display: flex;
+    gap: 6px;
+}
+
+/* Flow panels */
+.skills-flow-panel {
+    margin-bottom: var(--spacing-md);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.skills-flow-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-bottom: 1px solid var(--color-border-soft);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
+}
+
+.skills-flow-title-wrap {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.skills-flow-title {
+    font-size: var(--font-size-body);
+    font-weight: var(--font-weight-secondary);
+    color: var(--color-text-secondary);
+}
+
+.skills-flow-count {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    background: var(--color-surface-alt);
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-weight: var(--font-weight-caption);
+}
+
+/* Flow list */
+.skills-flow-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.skills-flow-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-bottom: 1px solid var(--color-border-soft);
+    transition: background var(--transition-fast) var(--ease-smooth);
+    min-height: 56px;
+}
+
+.skills-flow-item:last-child {
+    border-bottom: none;
+}
+
+.skills-flow-item:hover {
+    background: rgba(255,255,255,0.4);
+}
+
+.skills-flow-item.has-issue {
+    background: rgba(255,243,236,0.3);
+}
+
+.skills-flow-item.has-issue:hover {
+    background: rgba(255,243,236,0.5);
+}
+
+.skills-flow-main {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+    flex: 1;
+}
+
+.skills-flow-name {
+    font-size: var(--font-size-body);
+    font-weight: var(--font-weight-secondary);
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.skills-flow-path,
+.skills-flow-meta {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.skills-flow-status {
+    font-size: var(--font-size-caption);
+    padding: 4px 10px;
+    border-radius: var(--radius-full);
+    font-weight: var(--font-weight-caption);
+    white-space: nowrap;
+}
+
+.skills-flow-status.success {
+    background: rgba(52,168,83,0.1);
+    color: rgba(52,168,83,0.9);
+}
+
+.skills-flow-status.warning {
+    background: rgba(255,159,10,0.1);
+    color: rgba(255,159,10,0.9);
+}
+
+.skills-flow-add {
+    border: none;
+    background: var(--color-surface-alt);
+    color: var(--color-text-secondary);
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-fast) var(--ease-smooth);
+    flex-shrink: 0;
+}
+
+.skills-flow-add:hover:not(:disabled) {
+    background: var(--color-brand);
+    color: white;
+}
+
+.skills-flow-add:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Quick actions in import panel */
+.skills-flow-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-bottom: 1px solid var(--color-border-soft);
+    background: rgba(255,255,255,0.3);
+}
+
+.skills-action-btn {
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text-secondary);
+    padding: 10px 14px;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-caption);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all var(--transition-fast) var(--ease-smooth);
+}
+
+.skills-action-btn:hover:not(:disabled) {
+    border-color: var(--color-brand);
+    background: rgba(255,243,236,0.5);
+    color: var(--color-brand-dark);
+}
+
+.skills-action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Loading and empty states */
+.skills-flow-loading,
+.skills-flow-empty {
+    padding: var(--spacing-md);
+    text-align: center;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-caption);
+}
+
+/* Spinning icon */
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.spin {
+    animation: spin 0.8s linear infinite;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    .skills-minimal-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-sm);
+    }
+
+    .skills-header-actions {
+        align-self: flex-end;
+    }
+
+    .skills-flow-actions {
+        grid-template-columns: 1fr;
+    }
+
+    .skills-flow-item {
+        flex-wrap: wrap;
+    }
+
+    .skills-flow-status,
+    .skills-flow-add {
+        margin-left: auto;
+    }
+}
+
+/* Legacy styles for modal (preserved) */
 .agent-list {
     display: flex;
     flex-direction: column;

package/web-ui/styles/titles-cards.css

@@ -154,6 +154,20 @@
     background: var(--color-brand);
 }
 
+.card.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+.card.disabled:hover {
+    transform: none;
+}
+
+.card.disabled::after {
+    opacity: 0;
+}
+
 .card:hover::after {
     opacity: 0.6;
 }

package/web-ui/styles/webhook.css

@@ -1,4 +1,39 @@
-/* webhook 行 — 对齐暖色设计系统 */
+/* ============================================
+   Webhook 模态框 — 极简设计
+   ============================================ */
+
+/* Webhook 事件复选框列表 */
+.webhook-events-checkbox-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+}
+
+.webhook-event-checkbox-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    border-radius: 10px;
+    transition: all 0.15s ease;
+}
+
+.webhook-event-checkbox-item:hover {
+    background: rgba(137, 111, 94, 0.06);
+}
+
+.webhook-event-checkbox-item input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--color-brand);
+    cursor: pointer;
+}
+
+/* 保留兼容旧组件的样式 */
 .webhook-row {
     display: flex;
     align-items: center;
@@ -30,7 +65,6 @@
     color: var(--color-text-muted);
 }
 
-/* 只读展示行 */
 .webhook-readonly-row {
     display: flex;
     align-items: flex-start;
@@ -71,11 +105,11 @@
 
 .webhook-event-tag {
     display: inline-block;
-    padding: 2px 8px;
+    padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid var(--color-border);
     background: var(--color-brand-light);
     color: var(--color-brand-dark);
-    font-size: var(--font-size-caption);
+    font-size: 12px;
     font-weight: var(--font-weight-secondary);
 }