perf: 完善黑夜模式的表现效果，工作流编排幕布和节点在黑夜模式正常表现
This commit is contained in:
@@ -227,8 +227,8 @@
|
||||
}
|
||||
|
||||
.tf-mixed-ref-box {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: var(--tf-bg-input);
|
||||
border: 1px solid var(--tf-border-color-strong);
|
||||
padding: 0 48px 0 12px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@@ -236,8 +236,8 @@
|
||||
}
|
||||
|
||||
.tf-mixed-text-box {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: var(--tf-bg-input);
|
||||
border: 1px solid var(--tf-border-color-strong);
|
||||
padding: 0 48px 0 12px;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
@@ -247,13 +247,13 @@
|
||||
.tf-mixed-wrapper.is-focus .tf-mixed-text-box,
|
||||
.tf-mixed-ref-box:hover,
|
||||
.tf-mixed-text-box:hover {
|
||||
border-color: #94a3b8;
|
||||
border-color: var(--tf-border-color-strong);
|
||||
}
|
||||
.tf-mixed-wrapper.is-focus .tf-mixed-ref-box,
|
||||
.tf-mixed-wrapper.is-focus .tf-mixed-text-box {
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--tf-primary-color);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
|
||||
box-shadow: var(--tf-focus-shadow);
|
||||
}
|
||||
|
||||
.tf-mixed-sel-val {
|
||||
@@ -272,8 +272,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #3474ff;
|
||||
background: #cedafb;
|
||||
color: var(--tf-icon-color);
|
||||
background: var(--tf-icon-bg);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
@@ -281,9 +281,9 @@
|
||||
:global(svg) { width: 12px; height: 12px; }
|
||||
}
|
||||
|
||||
.tf-mixed-val-name { color: #111827; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
|
||||
.tf-mixed-val-name { color: var(--tf-text-primary); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
|
||||
.tf-mixed-placeholder {
|
||||
color: #9ca3af;
|
||||
color: var(--tf-text-muted);
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -301,12 +301,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #94a3b8;
|
||||
color: var(--tf-text-muted);
|
||||
border-radius: 0 5px 5px 0;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover { background: rgba(0,0,0,0.04); color: #64748b; }
|
||||
&:hover { background: var(--tf-bg-tag); color: var(--tf-text-secondary); }
|
||||
}
|
||||
|
||||
/* Keep the trigger in the same visual position in both text/ref modes */
|
||||
@@ -330,10 +330,10 @@
|
||||
height: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #e2e8f0;
|
||||
background: var(--tf-bg-active);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: #64748b;
|
||||
color: var(--tf-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -343,7 +343,7 @@
|
||||
padding: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
.tf-mixed-clear-btn:hover { background: #ef4444; color: #fff; }
|
||||
.tf-mixed-clear-btn:hover { background: var(--tf-danger-color); color: var(--tf-bg-surface); }
|
||||
.tf-mixed-wrapper:hover .tf-mixed-clear-btn { opacity: 1; }
|
||||
|
||||
.tf-mixed-native-input {
|
||||
@@ -352,7 +352,7 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
color: var(--tf-text-primary);
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
@@ -363,17 +363,17 @@
|
||||
}
|
||||
|
||||
.tf-mixed-native-input::placeholder {
|
||||
color: #9ca3af;
|
||||
color: var(--tf-text-muted);
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
/* Dropdown Styles matched perfectly to Select */
|
||||
.tf-mixed-dropdown {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
background: var(--tf-bg-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: var(--tf-shadow-medium);
|
||||
border: 1px solid var(--tf-border-color);
|
||||
overflow: hidden;
|
||||
width: max-content;
|
||||
box-sizing: border-box;
|
||||
@@ -382,9 +382,9 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tf-mixed-list { display: flex; flex-direction: column; padding: 8px; overflow-y: auto; }
|
||||
.tf-mixed-primary-list { width: 100%; flex-shrink: 0; background: #f9fafb; }
|
||||
.tf-mixed-primary-list { width: 100%; flex-shrink: 0; background: var(--tf-bg-surface-alt); }
|
||||
.tf-mixed-dropdown:has(.tf-mixed-secondary-list) .tf-mixed-primary-list { width: auto; min-width: 180px; }
|
||||
.tf-mixed-secondary-list { min-width: 220px; background: #fff; padding: 12px; border-left: 1px solid #f3f4f6; animation: slideIn 0.2s ease-out; box-sizing: border-box; }
|
||||
.tf-mixed-secondary-list { min-width: 220px; background: var(--tf-bg-surface); padding: 12px; border-left: 1px solid var(--tf-bg-muted); animation: slideIn 0.2s ease-out; box-sizing: border-box; }
|
||||
|
||||
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
|
||||
|
||||
@@ -398,28 +398,28 @@
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
color: var(--tf-text-primary);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
transition: all 0.15s;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover { background: #f3f4f6; }
|
||||
&.active { background: #eff6ff; color: #2563eb; font-weight: 500; }
|
||||
&.has-children { background: #f8fafc; margin-bottom: 4px; &:hover { background: #f1f5f9; } }
|
||||
&:hover { background: var(--tf-bg-muted); }
|
||||
&.active { background: var(--tf-primary-soft-bg); color: var(--tf-primary-color); font-weight: 500; }
|
||||
&.has-children { background: var(--tf-bg-hover); margin-bottom: 4px; &:hover { background: var(--tf-bg-active); } }
|
||||
}
|
||||
|
||||
.tf-mixed-item-icon {
|
||||
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #3474ff; background: #cedafb; border-radius: 5px; padding: 3px; box-sizing: border-box;
|
||||
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tf-icon-color); background: var(--tf-icon-bg); border-radius: 5px; padding: 3px; box-sizing: border-box;
|
||||
:global(svg) { width: 16px; height: 16px; }
|
||||
}
|
||||
.tf-mixed-item-label { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.tf-mixed-item-arrow { width: 14px; height: 14px; color: #9ca3af; }
|
||||
.tf-mixed-item-arrow { width: 14px; height: 14px; color: var(--tf-text-muted); }
|
||||
.tf-mixed-item-container { position: relative; width: 100%; }
|
||||
.tf-mixed-item-children { position: relative; width: 100%; &::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: #f0f0f0; } }
|
||||
.tf-mixed-item-children { position: relative; width: 100%; &::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--tf-border-color-soft); } }
|
||||
.tf-mixed-label { display: flex; justify-content: flex-start; align-items: center; width: 100%; gap: 8px; overflow: hidden;}
|
||||
.tf-mixed-name-wrapper { display: flex; align-items: center; gap: 6px; }
|
||||
.tf-mixed-expand-icon { width: 12px; height: 12px; color: currentColor; opacity: 0.6; }
|
||||
.tf-mixed-name { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.tf-mixed-type { background: rgba(0,0,0,0.06); color: #6b7280; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }
|
||||
.tf-mixed-type { background: var(--tf-bg-tag); color: var(--tf-text-secondary); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user