Skip to content

Commit 3f3e8ad

Browse files
atonaamzatonaamz
committed
feat(amazonq): removing scroll bar and adding text wrapper for commands
1 parent 009258c commit 3f3e8ad

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎packages/amazonq/src/lsp/chat/webviewProvider.ts‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export class AmazonQChatViewProvider implements WebviewViewProvider {
117117
const contentPolicy = `default-src ${entrypoint} data: blob: 'unsafe-inline';
118118
script-src ${entrypoint} filesystem: ws: wss: 'unsafe-inline';`
119119

120+
// TODO move these styles to a dedicated css file.
120121
return `
121122
<!DOCTYPE html>
122123
<html lang="en">
@@ -135,7 +136,136 @@ export class AmazonQChatViewProvider implements WebviewViewProvider {
135136
overflow: hidden;
136137
margin: 0;
137138
padding: 0;
139+
140+
--mynah-font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
141+
'Amazon Ember', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
142+
font-size: var(--vscode-font-size, 12px);
143+
font-family: var(--mynah-font-family, 'system-ui');
144+
--mynah-max-width: 2560px;
145+
--mynah-sizing-base: 0.2rem;
146+
--mynah-sizing-half: calc(var(--mynah-sizing-base) / 2);
147+
--mynah-sizing-1: var(--mynah-sizing-base);
148+
--mynah-sizing-2: calc(var(--mynah-sizing-base) * 2);
149+
--mynah-sizing-3: calc(var(--mynah-sizing-base) * 3);
150+
--mynah-sizing-4: calc(var(--mynah-sizing-base) * 4);
151+
--mynah-sizing-5: calc(var(--mynah-sizing-base) * 5);
152+
--mynah-sizing-6: calc(var(--mynah-sizing-base) * 6);
153+
--mynah-sizing-7: calc(var(--mynah-sizing-base) * 7);
154+
--mynah-sizing-8: calc(var(--mynah-sizing-base) * 8);
155+
--mynah-sizing-9: calc(var(--mynah-sizing-base) * 9);
156+
--mynah-sizing-10: calc(var(--mynah-sizing-base) * 10);
157+
--mynah-sizing-11: calc(var(--mynah-sizing-base) * 11);
158+
--mynah-sizing-12: calc(var(--mynah-sizing-base) * 12);
159+
--mynah-sizing-13: calc(var(--mynah-sizing-base) * 13);
160+
--mynah-sizing-14: calc(var(--mynah-sizing-base) * 14);
161+
--mynah-sizing-15: calc(var(--mynah-sizing-base) * 15);
162+
--mynah-sizing-16: calc(var(--mynah-sizing-base) * 16);
163+
--mynah-sizing-17: calc(var(--mynah-sizing-base) * 17);
164+
--mynah-sizing-18: calc(var(--mynah-sizing-base) * 18);
165+
--mynah-chat-wrapper-spacing: var(--mynah-sizing-2);
166+
--mynah-button-border-width: 1px;
167+
--mynah-border-width: 1px;
168+
169+
--mynah-color-text-default: var(--vscode-foreground);
170+
--mynah-color-text-strong: var(--vscode-input-foreground);
171+
--mynah-color-text-weak: var(--vscode-disabledForeground);
172+
--mynah-color-text-link: var(--vscode-textLink-foreground);
173+
--mynah-color-text-input: var(--vscode-input-foreground);
174+
175+
--mynah-color-bg: var(--vscode-sideBar-background);
176+
--mynah-color-tab-active: var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg)));
177+
--mynah-color-light: rgba(0, 0, 0, 0.05);
178+
179+
--mynah-color-border-default: var(--vscode-panel-border, var(--vscode-tab-border, rgba(0, 0, 0, 0.1)));
180+
181+
--mynah-color-highlight: rgba(255, 179, 0, 0.25);
182+
--mynah-color-highlight-text: #886411;
183+
184+
--mynah-color-toggle: var(--vscode-sideBar-background);
185+
--mynah-color-toggle-reverse: rgba(0, 0, 0, 0.5);
186+
187+
--mynah-color-syntax-bg: var(--vscode-terminal-dropBackground);
188+
--mynah-color-syntax-variable: var(--vscode-debugTokenExpression-name);
189+
--mynah-color-syntax-function: var(--vscode-gitDecoration-modifiedResourceForeground);
190+
--mynah-color-syntax-operator: var(--vscode-debugTokenExpression-name);
191+
--mynah-color-syntax-attr-value: var(--vscode-debugIcon-stepBackForeground);
192+
--mynah-color-syntax-attr: var(--vscode-debugTokenExpression-string);
193+
--mynah-color-syntax-property: var(--vscode-terminal-ansiCyan);
194+
--mynah-color-syntax-comment: var(--vscode-debugConsole-sourceForeground);
195+
--mynah-color-syntax-code: var(--vscode-terminal-ansiBlue);
196+
--mynah-syntax-code-font-family: var(--vscode-editor-font-family);
197+
--mynah-syntax-code-font-size: var(--vscode-editor-font-size, var(--mynah-font-size-medium));
198+
--mynah-syntax-code-block-max-height: calc(25 * var(--mynah-syntax-code-line-height));
199+
200+
--mynah-color-status-info: var(--vscode-editorInfo-foreground);
201+
--mynah-color-status-success: var(--vscode-terminal-ansiGreen);
202+
--mynah-color-status-warning: var(--vscode-editorWarning-foreground);
203+
--mynah-color-status-error: var(--vscode-editorError-foreground);
204+
205+
--mynah-color-button: var(--vscode-button-background);
206+
--mynah-color-button-reverse: var(--vscode-button-foreground);
207+
208+
--mynah-color-alternate: var(--vscode-button-secondaryBackground);
209+
--mynah-color-alternate-reverse: var(--vscode-button-secondaryForeground);
210+
211+
--mynah-card-bg: var(--vscode-editor-background);
212+
213+
--mynah-shadow-button: none;
214+
--mynah-shadow-card: none;
215+
--mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
216+
217+
--mynah-font-size-xxsmall: 0.75rem;
218+
--mynah-font-size-xsmall: 0.85rem;
219+
--mynah-font-size-small: 0.95rem;
220+
--mynah-font-size-medium: 1rem;
221+
--mynah-font-size-large: 1.125rem;
222+
--mynah-line-height: 1.1rem;
223+
--mynah-syntax-code-line-height: 1.1rem;
224+
225+
--mynah-card-radius: var(--mynah-sizing-2);
226+
--mynah-input-radius: var(--mynah-sizing-1);
227+
--mynah-card-radius-corner: 0;
228+
--mynah-button-radius: var(--mynah-sizing-1);
229+
230+
--mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
231+
--mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1);
232+
--mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1);
233+
--mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1);
234+
--mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1);
235+
--mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
236+
--mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1), transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
237+
}
238+
239+
body.vscode-dark,
240+
body.vscode-high-contrast:not(.vscode-high-contrast-light) {
241+
--mynah-color-light: rgba(255, 255, 255, 0.05);
242+
--mynah-color-highlight: rgba(0, 137, 255, 0.2);
243+
--mynah-color-highlight-text: rgba(0, 137, 255, 1);
244+
}
245+
246+
body .mynah-card-body h1 {
247+
--mynah-line-height: 1.5rem;
248+
font-size: 1.25em;
249+
}
250+
251+
body .mynah-card-body h2,
252+
body .mynah-card-body h3,
253+
body .mynah-card-body h4 {
254+
font-size: 1em;
255+
}
256+
257+
div.mynah-card.padding-large {
258+
padding: var(--mynah-sizing-4) var(--mynah-sizing-3);
259+
}
260+
261+
.mynah-chat-wrapper {
262+
padding: 0.75rem 1.25rem;
263+
box-sizing: border-box;
138264
}
265+
.mynah-syntax-highlighter>pre>code, .mynah-syntax-highlighter>pre {
266+
overflow: hidden !important;
267+
text-wrap: wrap !important;
268+
}
139269
</style>
140270
</head>
141271
<body>

0 commit comments

Comments
 (0)