diff --git a/frontend/src/query-tool/style.css b/frontend/src/query-tool/style.css index 017ca74..14df2d7 100644 --- a/frontend/src/query-tool/style.css +++ b/frontend/src/query-tool/style.css @@ -446,6 +446,134 @@ body { font-size: 13px; } +/* ---- MultiSelect 元件 ---- */ +.multi-select { + position: relative; + min-width: 160px; +} + +.multi-select-trigger { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + border: 1px solid var(--border); + border-radius: 8px; + padding: 8px 10px; + font-size: 13px; + color: #1f2937; + background: #ffffff; + cursor: pointer; +} + +.multi-select-trigger:disabled { + cursor: not-allowed; + opacity: 0.7; +} + +.multi-select-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: left; +} + +.multi-select-arrow { + color: #64748b; + font-size: 11px; +} + +.multi-select-dropdown { + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + z-index: 20; + border: 1px solid var(--border); + border-radius: 8px; + background: #ffffff; + box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14); + overflow: hidden; +} + +.multi-select-search { + display: block; + width: 100%; + border: none; + border-bottom: 1px solid var(--border); + padding: 8px 12px; + font-size: 13px; + color: #1f2937; + outline: none; + background: #f8fafc; +} + +.multi-select-search::placeholder { + color: #94a3b8; +} + +.multi-select-options { + max-height: 250px; + overflow-y: auto; + padding: 8px 0; +} + +.multi-select-option { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding: 6px 12px; + border: none; + background: transparent; + font-size: 13px; + color: #334155; + cursor: pointer; + text-align: left; +} + +.multi-select-option:hover { + background: #f8fafc; +} + +.multi-select-option input[type='checkbox'] { + margin: 0; + width: 14px; + height: 14px; + accent-color: #2563eb; +} + +.multi-select-empty { + padding: 12px; + text-align: center; + color: #94a3b8; + font-size: 13px; +} + +.multi-select-actions { + display: flex; + gap: 8px; + padding: 8px 10px; + border-top: 1px solid var(--border); + background: #f8fafc; +} + +.btn-sm { + padding: 4px 10px; + border: 1px solid var(--border); + border-radius: 6px; + background: #f8fafc; + color: var(--text); + cursor: pointer; + font-size: 12px; +} + +.btn-sm:hover { + border-color: #c2d0e0; + background: #eef4fb; +} + /* ---- 表格高度變體 ---- */ .query-tool-table-wrap.short { max-height: 360px;