Spaces:
Running
Running
| /* ===== Tag AutoComplete Popup ===== */ | |
| .tac-popup { | |
| display: none; | |
| position: fixed; | |
| z-index: 10000; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: 0 8px 32px var(--shadow), 0 0 0 1px var(--border); | |
| max-height: 300px; | |
| min-width: 280px; | |
| max-width: 480px; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 4px 0; | |
| } | |
| .tac-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| font-size: 0.82rem; | |
| line-height: 1.4; | |
| } | |
| .tac-item:hover, | |
| .tac-item.selected { | |
| background: var(--bg-hover); | |
| } | |
| .tac-item.selected { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| .tac-item.selected .tac-item-count, | |
| .tac-item.selected .tac-item-zh { | |
| color: rgba(255,255,255,0.6); | |
| } | |
| .tac-item.selected .tac-item-cat { | |
| border-color: rgba(255,255,255,0.5); | |
| } | |
| .tac-item.selected .tac-alias { | |
| color: rgba(255,255,255,0.7); | |
| } | |
| .tac-item.selected .tac-alias-arrow { | |
| color: rgba(255,255,255,0.5); | |
| } | |
| /* Category dot */ | |
| .tac-item-cat { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| border: 1px solid var(--border); | |
| } | |
| .tac-cat-0 { background: #4a9eff; } | |
| .tac-cat-1 { background: #ff4a6a; } | |
| .tac-cat-3 { background: #a64aff; } | |
| .tac-cat-4 { background: #4aff7a; } | |
| .tac-cat-5 { background: #ffaa4a; } | |
| .tac-cat-9 { background: #ff6b6b; } | |
| /* Name area: uses flex-shrink:0 so it keeps its width */ | |
| .tac-item-name { | |
| flex-shrink: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| } | |
| .tac-item.selected .tac-item-name { | |
| color: #fff; | |
| } | |
| /* Alias display */ | |
| .tac-alias { | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| } | |
| .tac-alias-arrow { | |
| color: var(--text-muted); | |
| margin: 0 3px; | |
| font-size: 0.75rem; | |
| } | |
| /* Chinese translation: takes remaining space */ | |
| .tac-item-zh { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| } | |
| /* ── Prompt Chunk Manager ── */ | |
| .tac-chunk-hint { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| line-height: 1.5; | |
| } | |
| .tac-chunk-add-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 12px; | |
| } | |
| .tac-chunk-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .tac-chunk-item { | |
| background: var(--bg-hover); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 8px 10px; | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-start; | |
| } | |
| .tac-chunk-item-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .tac-chunk-item-name { | |
| font-size: 0.83rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .tac-chunk-item-alias { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: 1px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .tac-chunk-item-content { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| margin-top: 3px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| word-break: break-all; | |
| } | |
| .tac-chunk-delete { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 1rem; | |
| padding: 0 2px; | |
| flex-shrink: 0; | |
| line-height: 1; | |
| } | |
| .tac-chunk-delete:hover { | |
| color: var(--danger, #e05); | |
| } | |
| /* Chunk popup item gets a special dot color */ | |
| .tac-cat-chunk { background: #f5a623; } | |
| /* Count: always at the right edge. | |
| When there is no zh element, flex:1 on name would push count right, | |
| but we want name to shrink. Solution: use a spacer or margin-left:auto. */ | |
| .tac-item-count { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| min-width: 32px; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| margin-left: auto; | |
| } |