summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/message-part.css
diff options
context:
space:
mode:
authoropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
committeropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
commitfe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch)
treee330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/message-part.css
parent20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff)
downloadopencode-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.css1482
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);
+ }
}