diff options
| author | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
|---|---|---|
| committer | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
| commit | fe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch) | |
| tree | e330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/message-part.css | |
| parent | 20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff) | |
| download | opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip | |
chore: generate
Diffstat (limited to 'packages/ui/src/components/message-part.css')
| -rw-r--r-- | packages/ui/src/components/message-part.css | 1482 |
1 files changed, 741 insertions, 741 deletions
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index dba0a59b7..2bef792a2 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -1,439 +1,439 @@ [data-component="assistant-message"] { - content-visibility: auto; - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 12px; + content-visibility: auto; + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; } [data-component="user-message"] { - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); - letter-spacing: var(--letter-spacing-normal); - color: var(--text-base); - display: flex; - flex-direction: column; - gap: 8px; - - [data-slot="user-message-attachments"] { - display: flex; - flex-wrap: wrap; - gap: 8px; - } - - [data-slot="user-message-attachment"] { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-radius: 6px; - overflow: hidden; - background: var(--surface-weak); - border: 1px solid var(--border-weak-base); - transition: border-color 0.15s ease; - - &:hover { - border-color: var(--border-strong-base); - } - - &[data-type="image"] { - width: 48px; - height: 48px; - } - - &[data-type="file"] { - width: 48px; - height: 48px; - } - } - - [data-slot="user-message-attachment-image"] { - width: 100%; - height: 100%; - object-fit: cover; - } - - [data-slot="user-message-attachment-icon"] { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: var(--icon-weak); - - [data-component="icon"] { - width: 20px; - height: 20px; - } - } - - [data-slot="user-message-text"] { - position: relative; - white-space: pre-wrap; - word-break: break-word; - overflow: hidden; - background: var(--surface-weak); - border: 1px solid var(--border-weak-base); - padding: 8px 12px; - border-radius: 4px; - - [data-highlight="file"] { - color: var(--syntax-property); - } - - [data-highlight="agent"] { - color: var(--syntax-type); - } - - [data-slot="user-message-copy-wrapper"] { - position: absolute; - top: 7px; - right: 7px; - opacity: 0; - transition: opacity 0.15s ease; - } - - &:hover [data-slot="user-message-copy-wrapper"] { - opacity: 1; - } - } - - .text-text-strong { - color: var(--text-strong); - } - - .font-medium { - font-weight: var(--font-weight-medium); - } + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + color: var(--text-base); + display: flex; + flex-direction: column; + gap: 8px; + + [data-slot="user-message-attachments"] { + display: flex; + flex-wrap: wrap; + gap: 8px; + } + + [data-slot="user-message-attachment"] { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 6px; + overflow: hidden; + background: var(--surface-weak); + border: 1px solid var(--border-weak-base); + transition: border-color 0.15s ease; + + &:hover { + border-color: var(--border-strong-base); + } + + &[data-type="image"] { + width: 48px; + height: 48px; + } + + &[data-type="file"] { + width: 48px; + height: 48px; + } + } + + [data-slot="user-message-attachment-image"] { + width: 100%; + height: 100%; + object-fit: cover; + } + + [data-slot="user-message-attachment-icon"] { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--icon-weak); + + [data-component="icon"] { + width: 20px; + height: 20px; + } + } + + [data-slot="user-message-text"] { + position: relative; + white-space: pre-wrap; + word-break: break-word; + overflow: hidden; + background: var(--surface-weak); + border: 1px solid var(--border-weak-base); + padding: 8px 12px; + border-radius: 4px; + + [data-highlight="file"] { + color: var(--syntax-property); + } + + [data-highlight="agent"] { + color: var(--syntax-type); + } + + [data-slot="user-message-copy-wrapper"] { + position: absolute; + top: 7px; + right: 7px; + opacity: 0; + transition: opacity 0.15s ease; + } + + &:hover [data-slot="user-message-copy-wrapper"] { + opacity: 1; + } + } + + .text-text-strong { + color: var(--text-strong); + } + + .font-medium { + font-weight: var(--font-weight-medium); + } } [data-component="text-part"] { - width: 100%; - - [data-slot="text-part-body"] { - position: relative; - margin-top: 32px; - } - - [data-slot="text-part-copy-wrapper"] { - position: absolute; - top: 8px; - right: 8px; - opacity: 0; - transition: opacity 0.15s ease; - z-index: 1; - } - - [data-slot="text-part-body"]:hover [data-slot="text-part-copy-wrapper"] { - opacity: 1; - } - - [data-component="markdown"] { - margin-top: 0; - font-size: var(--font-size-base); - } + width: 100%; + + [data-slot="text-part-body"] { + position: relative; + margin-top: 32px; + } + + [data-slot="text-part-copy-wrapper"] { + position: absolute; + top: 8px; + right: 8px; + opacity: 0; + transition: opacity 0.15s ease; + z-index: 1; + } + + [data-slot="text-part-body"]:hover [data-slot="text-part-copy-wrapper"] { + opacity: 1; + } + + [data-component="markdown"] { + margin-top: 0; + font-size: var(--font-size-base); + } } [data-component="reasoning-part"] { - width: 100%; - color: var(--text-base); - opacity: 0.8; - line-height: var(--line-height-large); - - [data-component="markdown"] { - margin-top: 24px; - font-style: italic !important; - - p:has(strong) { - margin-top: 24px; - margin-bottom: 0; - - &:first-child { - margin-top: 0; - } - } - } + width: 100%; + color: var(--text-base); + opacity: 0.8; + line-height: var(--line-height-large); + + [data-component="markdown"] { + margin-top: 24px; + font-style: italic !important; + + p:has(strong) { + margin-top: 24px; + margin-bottom: 0; + + &:first-child { + margin-top: 0; + } + } + } } [data-component="tool-error"] { - display: flex; - align-items: start; - gap: 8px; - - [data-slot="icon-svg"] { - color: var(--icon-critical-base); - margin-top: 4px; - } - - [data-slot="message-part-tool-error-content"] { - display: flex; - align-items: start; - gap: 8px; - } - - [data-slot="message-part-tool-error-title"] { - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); - letter-spacing: var(--letter-spacing-normal); - color: var(--text-on-critical-base); - white-space: nowrap; - } - - [data-slot="message-part-tool-error-message"] { - color: var(--text-on-critical-weak); - max-height: 240px; - overflow-y: auto; - word-break: break-word; - } + display: flex; + align-items: start; + gap: 8px; + + [data-slot="icon-svg"] { + color: var(--icon-critical-base); + margin-top: 4px; + } + + [data-slot="message-part-tool-error-content"] { + display: flex; + align-items: start; + gap: 8px; + } + + [data-slot="message-part-tool-error-title"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + color: var(--text-on-critical-base); + white-space: nowrap; + } + + [data-slot="message-part-tool-error-message"] { + color: var(--text-on-critical-weak); + max-height: 240px; + overflow-y: auto; + word-break: break-word; + } } [data-component="tool-output"] { - white-space: pre; - padding: 8px 12px; - height: fit-content; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - - [data-component="markdown"] { - width: 100%; - min-width: 0; - - pre { - margin: 0; - padding: 0; - background-color: transparent !important; - border: none !important; - } - } - - pre { - margin: 0; - padding: 0; - background: none; - } - - &[data-scrollable] { - height: auto; - max-height: 240px; - overflow-y: auto; - scrollbar-width: none; - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } - - [data-component="markdown"] { - overflow: visible; - } - } + white-space: pre; + padding: 8px 12px; + height: fit-content; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + [data-component="markdown"] { + width: 100%; + min-width: 0; + + pre { + margin: 0; + padding: 0; + background-color: transparent !important; + border: none !important; + } + } + + pre { + margin: 0; + padding: 0; + background: none; + } + + &[data-scrollable] { + height: auto; + max-height: 240px; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + + [data-component="markdown"] { + overflow: visible; + } + } } [data-component="edit-trigger"], [data-component="write-trigger"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - width: 100%; - - [data-slot="message-part-title-area"] { - flex-grow: 1; - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - } - - [data-slot="message-part-title"] { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 4px; - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); - letter-spacing: var(--letter-spacing-normal); - color: var(--text-base); - } - - [data-slot="message-part-title-text"] { - text-transform: capitalize; - } - - [data-slot="message-part-title-filename"] { - /* No text-transform - preserve original filename casing */ - } - - [data-slot="message-part-path"] { - display: flex; - flex-grow: 1; - min-width: 0; - } - - [data-slot="message-part-directory"] { - color: var(--text-weak); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - direction: rtl; - text-align: left; - } - - [data-slot="message-part-filename"] { - color: var(--text-strong); - flex-shrink: 0; - } - - [data-slot="message-part-actions"] { - display: flex; - gap: 16px; - align-items: center; - justify-content: flex-end; - } + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + width: 100%; + + [data-slot="message-part-title-area"] { + flex-grow: 1; + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + } + + [data-slot="message-part-title"] { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 4px; + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + color: var(--text-base); + } + + [data-slot="message-part-title-text"] { + text-transform: capitalize; + } + + [data-slot="message-part-title-filename"] { + /* No text-transform - preserve original filename casing */ + } + + [data-slot="message-part-path"] { + display: flex; + flex-grow: 1; + min-width: 0; + } + + [data-slot="message-part-directory"] { + color: var(--text-weak); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + direction: rtl; + text-align: left; + } + + [data-slot="message-part-filename"] { + color: var(--text-strong); + flex-shrink: 0; + } + + [data-slot="message-part-actions"] { + display: flex; + gap: 16px; + align-items: center; + justify-content: flex-end; + } } [data-component="edit-content"] { - border-top: 1px solid var(--border-weaker-base); - max-height: 420px; - overflow-y: auto; + border-top: 1px solid var(--border-weaker-base); + max-height: 420px; + overflow-y: auto; - scrollbar-width: none; - -ms-overflow-style: none; + scrollbar-width: none; + -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } } [data-component="write-content"] { - border-top: 1px solid var(--border-weaker-base); - max-height: 240px; - overflow-y: auto; + border-top: 1px solid var(--border-weaker-base); + max-height: 240px; + overflow-y: auto; - [data-component="code"] { - padding-bottom: 0px !important; - } + [data-component="code"] { + padding-bottom: 0px !important; + } - /* Hide scrollbar */ - scrollbar-width: none; - -ms-overflow-style: none; + /* Hide scrollbar */ + scrollbar-width: none; + -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } } [data-component="tool-action"] { - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; } [data-component="todos"] { - padding: 10px 12px 24px 48px; - display: flex; - flex-direction: column; - gap: 8px; - - [data-slot="message-part-todo-content"] { - &[data-completed="completed"] { - text-decoration: line-through; - color: var(--text-weaker); - } - } + padding: 10px 12px 24px 48px; + display: flex; + flex-direction: column; + gap: 8px; + + [data-slot="message-part-todo-content"] { + &[data-completed="completed"] { + text-decoration: line-through; + color: var(--text-weaker); + } + } } [data-component="task-tools"] { - padding: 8px 12px; - display: flex; - flex-direction: column; - gap: 6px; - - [data-slot="task-tool-item"] { - display: flex; - align-items: center; - gap: 8px; - color: var(--text-weak); - - [data-slot="icon-svg"] { - flex-shrink: 0; - color: var(--icon-weak); - } - } - - [data-slot="task-tool-title"] { - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); - color: var(--text-weak); - } - - [data-slot="task-tool-subtitle"] { - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); - color: var(--text-weaker); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + padding: 8px 12px; + display: flex; + flex-direction: column; + gap: 6px; + + [data-slot="task-tool-item"] { + display: flex; + align-items: center; + gap: 8px; + color: var(--text-weak); + + [data-slot="icon-svg"] { + flex-shrink: 0; + color: var(--icon-weak); + } + } + + [data-slot="task-tool-title"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + color: var(--text-weak); + } + + [data-slot="task-tool-subtitle"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); + color: var(--text-weaker); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } [data-component="diagnostics"] { - display: flex; - flex-direction: column; - gap: 4px; - padding: 8px 12px; - background-color: var(--surface-critical-weak); - border-top: 1px solid var(--border-critical-base); - - [data-slot="diagnostic"] { - display: flex; - align-items: baseline; - gap: 6px; - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - line-height: var(--line-height-large); - } - - [data-slot="diagnostic-label"] { - color: var(--text-on-critical-base); - font-weight: var(--font-weight-medium); - text-transform: uppercase; - letter-spacing: -0.5px; - flex-shrink: 0; - } - - [data-slot="diagnostic-location"] { - color: var(--text-on-critical-weak); - flex-shrink: 0; - } - - [data-slot="diagnostic-message"] { - color: var(--text-on-critical-base); - word-break: break-word; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; - overflow: hidden; - } + display: flex; + flex-direction: column; + gap: 4px; + padding: 8px 12px; + background-color: var(--surface-critical-weak); + border-top: 1px solid var(--border-critical-base); + + [data-slot="diagnostic"] { + display: flex; + align-items: baseline; + gap: 6px; + font-family: var(--font-family-mono); + font-size: var(--font-size-small); + line-height: var(--line-height-large); + } + + [data-slot="diagnostic-label"] { + color: var(--text-on-critical-base); + font-weight: var(--font-weight-medium); + text-transform: uppercase; + letter-spacing: -0.5px; + flex-shrink: 0; + } + + [data-slot="diagnostic-location"] { + color: var(--text-on-critical-weak); + flex-shrink: 0; + } + + [data-slot="diagnostic-message"] { + color: var(--text-on-critical-base); + word-break: break-word; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; + overflow: hidden; + } } [data-component="user-message"] [data-slot="user-message-text"], @@ -446,383 +446,383 @@ [data-component="todos"], [data-component="diagnostics"], .error-card { - -webkit-user-select: text; - user-select: text; + -webkit-user-select: text; + user-select: text; } [data-component="tool-part-wrapper"] { - width: 100%; - - &[data-permission="true"], - &[data-question="true"] { - position: sticky; - top: calc(2px + var(--sticky-header-height, 40px)); - bottom: 0px; - z-index: 20; - border-radius: 6px; - border: none; - box-shadow: var(--shadow-xs-border-base); - background-color: var(--surface-raised-base); - overflow: visible; - overflow-anchor: none; - - & > *:first-child { - border-top-left-radius: 6px; - border-top-right-radius: 6px; - overflow: hidden; - } - - & > *:last-child { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - overflow: hidden; - } - - [data-component="collapsible"] { - border: none; - } - - [data-component="card"] { - border: none; - } - } - - &[data-permission="true"] { - &::before { - content: ""; - position: absolute; - inset: -1.5px; - top: -5px; - border-radius: 7.5px; - border: 1.5px solid transparent; - background: - linear-gradient(var(--background-base) 0 0) padding-box, - conic-gradient( - from var(--border-angle), - transparent 0deg, - transparent 0deg, - var(--border-warning-strong, var(--border-warning-selected)) 300deg, - var(--border-warning-base) 360deg - ) - border-box; - animation: chase-border 2.5s linear infinite; - pointer-events: none; - z-index: -1; - } - } - - &[data-question="true"] { - background: var(--background-base); - border: 1px solid var(--border-weak-base); - } + width: 100%; + + &[data-permission="true"], + &[data-question="true"] { + position: sticky; + top: calc(2px + var(--sticky-header-height, 40px)); + bottom: 0px; + z-index: 20; + border-radius: 6px; + border: none; + box-shadow: var(--shadow-xs-border-base); + background-color: var(--surface-raised-base); + overflow: visible; + overflow-anchor: none; + + & > *:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + overflow: hidden; + } + + & > *:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + overflow: hidden; + } + + [data-component="collapsible"] { + border: none; + } + + [data-component="card"] { + border: none; + } + } + + &[data-permission="true"] { + &::before { + content: ""; + position: absolute; + inset: -1.5px; + top: -5px; + border-radius: 7.5px; + border: 1.5px solid transparent; + background: + linear-gradient(var(--background-base) 0 0) padding-box, + conic-gradient( + from var(--border-angle), + transparent 0deg, + transparent 0deg, + var(--border-warning-strong, var(--border-warning-selected)) 300deg, + var(--border-warning-base) 360deg + ) + border-box; + animation: chase-border 2.5s linear infinite; + pointer-events: none; + z-index: -1; + } + } + + &[data-question="true"] { + background: var(--background-base); + border: 1px solid var(--border-weak-base); + } } @property --border-angle { - syntax: "<angle>"; - initial-value: 0deg; - inherits: false; + syntax: "<angle>"; + initial-value: 0deg; + inherits: false; } @keyframes chase-border { - from { - --border-angle: 0deg; - } + from { + --border-angle: 0deg; + } - to { - --border-angle: 360deg; - } + to { + --border-angle: 360deg; + } } [data-component="permission-prompt"] { - display: flex; - flex-direction: column; - padding: 8px 12px; - background-color: var(--surface-raised-strong); - border-radius: 0 0 6px 6px; - - [data-slot="permission-actions"] { - display: flex; - align-items: center; - gap: 8px; - justify-content: flex-end; - } + display: flex; + flex-direction: column; + padding: 8px 12px; + background-color: var(--surface-raised-strong); + border-radius: 0 0 6px 6px; + + [data-slot="permission-actions"] { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; + } } [data-component="question-prompt"] { - display: flex; - flex-direction: column; - padding: 12px; - background-color: var(--surface-inset-base); - border-radius: 0 0 6px 6px; - gap: 12px; - - [data-slot="question-tabs"] { - display: flex; - gap: 4px; - flex-wrap: wrap; - - [data-slot="question-tab"] { - padding: 4px 12px; - font-size: 13px; - border-radius: 4px; - background-color: var(--surface-base); - color: var(--text-base); - border: none; - cursor: pointer; - transition: - color 0.15s, - background-color 0.15s; - - &:hover { - background-color: var(--surface-base-hover); - } - - &[data-active="true"] { - background-color: var(--surface-raised-base); - } - - &[data-answered="true"] { - color: var(--text-strong); - } - } - } - - [data-slot="question-content"] { - display: flex; - flex-direction: column; - gap: 8px; - - [data-slot="question-text"] { - font-size: 14px; - color: var(--text-base); - line-height: 1.5; - } - } - - [data-slot="question-options"] { - display: flex; - flex-direction: column; - gap: 4px; - - [data-slot="question-option"] { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - padding: 8px 12px; - background-color: var(--surface-base); - border: 1px solid var(--border-weaker-base); - border-radius: 6px; - cursor: pointer; - text-align: left; - width: 100%; - transition: - background-color 0.15s, - border-color 0.15s; - position: relative; - - &:hover { - background-color: var(--surface-base-hover); - border-color: var(--border-default); - } - - &[data-picked="true"] { - [data-component="icon"] { - position: absolute; - right: 12px; - top: 50%; - transform: translateY(-50%); - color: var(--text-strong); - } - } - - [data-slot="option-label"] { - font-size: 14px; - color: var(--text-base); - font-weight: 500; - } - - [data-slot="option-description"] { - font-size: 12px; - color: var(--text-weak); - } - } - - [data-slot="custom-input-form"] { - display: flex; - gap: 8px; - padding: 8px 0; - align-items: stretch; - - [data-slot="custom-input"] { - flex: 1; - padding: 8px 12px; - font-size: 14px; - border: 1px solid var(--border-default); - border-radius: 6px; - background-color: var(--surface-base); - color: var(--text-base); - outline: none; - - &:focus { - border-color: var(--border-focus); - } - - &::placeholder { - color: var(--text-weak); - } - } - - [data-component="button"] { - height: auto; - } - } - } - - [data-slot="question-review"] { - display: flex; - flex-direction: column; - gap: 12px; - - [data-slot="review-title"] { - display: none; - } - - [data-slot="review-item"] { - display: flex; - flex-direction: column; - gap: 2px; - font-size: 13px; - - [data-slot="review-label"] { - color: var(--text-weak); - } - - [data-slot="review-value"] { - color: var(--text-strong); - - &[data-answered="false"] { - color: var(--text-weak); - } - } - } - } - - [data-slot="question-actions"] { - display: flex; - align-items: center; - gap: 8px; - justify-content: flex-end; - } + display: flex; + flex-direction: column; + padding: 12px; + background-color: var(--surface-inset-base); + border-radius: 0 0 6px 6px; + gap: 12px; + + [data-slot="question-tabs"] { + display: flex; + gap: 4px; + flex-wrap: wrap; + + [data-slot="question-tab"] { + padding: 4px 12px; + font-size: 13px; + border-radius: 4px; + background-color: var(--surface-base); + color: var(--text-base); + border: none; + cursor: pointer; + transition: + color 0.15s, + background-color 0.15s; + + &:hover { + background-color: var(--surface-base-hover); + } + + &[data-active="true"] { + background-color: var(--surface-raised-base); + } + + &[data-answered="true"] { + color: var(--text-strong); + } + } + } + + [data-slot="question-content"] { + display: flex; + flex-direction: column; + gap: 8px; + + [data-slot="question-text"] { + font-size: 14px; + color: var(--text-base); + line-height: 1.5; + } + } + + [data-slot="question-options"] { + display: flex; + flex-direction: column; + gap: 4px; + + [data-slot="question-option"] { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + padding: 8px 12px; + background-color: var(--surface-base); + border: 1px solid var(--border-weaker-base); + border-radius: 6px; + cursor: pointer; + text-align: left; + width: 100%; + transition: + background-color 0.15s, + border-color 0.15s; + position: relative; + + &:hover { + background-color: var(--surface-base-hover); + border-color: var(--border-default); + } + + &[data-picked="true"] { + [data-component="icon"] { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + color: var(--text-strong); + } + } + + [data-slot="option-label"] { + font-size: 14px; + color: var(--text-base); + font-weight: 500; + } + + [data-slot="option-description"] { + font-size: 12px; + color: var(--text-weak); + } + } + + [data-slot="custom-input-form"] { + display: flex; + gap: 8px; + padding: 8px 0; + align-items: stretch; + + [data-slot="custom-input"] { + flex: 1; + padding: 8px 12px; + font-size: 14px; + border: 1px solid var(--border-default); + border-radius: 6px; + background-color: var(--surface-base); + color: var(--text-base); + outline: none; + + &:focus { + border-color: var(--border-focus); + } + + &::placeholder { + color: var(--text-weak); + } + } + + [data-component="button"] { + height: auto; + } + } + } + + [data-slot="question-review"] { + display: flex; + flex-direction: column; + gap: 12px; + + [data-slot="review-title"] { + display: none; + } + + [data-slot="review-item"] { + display: flex; + flex-direction: column; + gap: 2px; + font-size: 13px; + + [data-slot="review-label"] { + color: var(--text-weak); + } + + [data-slot="review-value"] { + color: var(--text-strong); + + &[data-answered="false"] { + color: var(--text-weak); + } + } + } + } + + [data-slot="question-actions"] { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; + } } [data-component="question-answers"] { - display: flex; - flex-direction: column; - gap: 12px; - padding: 8px 12px; - - [data-slot="question-answer-item"] { - display: flex; - flex-direction: column; - gap: 2px; - font-size: 13px; - - [data-slot="question-text"] { - color: var(--text-weak); - } - - [data-slot="answer-text"] { - color: var(--text-strong); - } - } + display: flex; + flex-direction: column; + gap: 12px; + padding: 8px 12px; + + [data-slot="question-answer-item"] { + display: flex; + flex-direction: column; + gap: 2px; + font-size: 13px; + + [data-slot="question-text"] { + color: var(--text-weak); + } + + [data-slot="answer-text"] { + color: var(--text-strong); + } + } } [data-component="apply-patch-files"] { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } [data-component="apply-patch-file"] { - display: flex; - flex-direction: column; - border-top: 1px solid var(--border-weaker-base); - - &:first-child { - border-top: 1px solid var(--border-weaker-base); - } - - [data-slot="apply-patch-file-header"] { - display: flex; - align-items: center; - gap: 8px; - padding: 8px 12px; - background-color: var(--surface-inset-base); - } - - [data-slot="apply-patch-file-action"] { - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); - color: var(--text-base); - flex-shrink: 0; - - &[data-type="delete"] { - color: var(--text-critical-base); - } - - &[data-type="add"] { - color: var(--text-success-base); - } - - &[data-type="move"] { - color: var(--text-warning-base); - } - } - - [data-slot="apply-patch-file-path"] { - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--text-weak); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex-grow: 1; - } - - [data-slot="apply-patch-deletion-count"] { - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--text-critical-base); - flex-shrink: 0; - } + display: flex; + flex-direction: column; + border-top: 1px solid var(--border-weaker-base); + + &:first-child { + border-top: 1px solid var(--border-weaker-base); + } + + [data-slot="apply-patch-file-header"] { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + background-color: var(--surface-inset-base); + } + + [data-slot="apply-patch-file-action"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + color: var(--text-base); + flex-shrink: 0; + + &[data-type="delete"] { + color: var(--text-critical-base); + } + + &[data-type="add"] { + color: var(--text-success-base); + } + + &[data-type="move"] { + color: var(--text-warning-base); + } + } + + [data-slot="apply-patch-file-path"] { + font-family: var(--font-family-mono); + font-size: var(--font-size-small); + color: var(--text-weak); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; + } + + [data-slot="apply-patch-deletion-count"] { + font-family: var(--font-family-mono); + font-size: var(--font-size-small); + color: var(--text-critical-base); + flex-shrink: 0; + } } [data-component="apply-patch-file-diff"] { - max-height: 420px; - overflow-y: auto; - scrollbar-width: none; - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } + max-height: 420px; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } } [data-component="tool-loaded-file"] { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 0 4px 28px; - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); - color: var(--text-weak); - - [data-component="icon"] { - flex-shrink: 0; - color: var(--icon-weak); - } + display: flex; + align-items: center; + gap: 8px; + padding: 4px 0 4px 28px; + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); + color: var(--text-weak); + + [data-component="icon"] { + flex-shrink: 0; + color: var(--icon-weak); + } } |
