Skip to content

Commit 1539b3b

Browse files
authored
style(chat): make chat more compact (aws#6956)
## Problem Before: <img width="624" alt="image" src="https://github.com/user-attachments/assets/38079266-60c8-4b97-bba5-d2126110b163" /> ## Solution After: <img width="621" alt="image" src="https://github.com/user-attachments/assets/6450d84d-924d-47d4-b337-645cba21b153" /> --- - Treat all work as PUBLIC. Private `feature/x` branches will not be squash-merged at release time. - Your code changes must meet the guidelines in [CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines). - License: I confirm that my contribution is made under the terms of the Apache 2.0 license.
1 parent 8a20b10 commit 1539b3b

File tree

1 file changed

+102
-0
lines changed

1 file changed

+102
-0
lines changed

packages/core/resources/css/amazonq-webview.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,104 @@ html {
77
overflow: hidden;
88
margin: 0;
99
padding: 0;
10+
11+
--mynah-font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
12+
'Amazon Ember', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
13+
font-size: var(--vscode-font-size, 12px);
14+
font-family: var(--mynah-font-family, 'system-ui');
15+
--mynah-max-width: 2560px;
16+
--mynah-sizing-base: 0.2rem;
17+
--mynah-sizing-half: calc(var(--mynah-sizing-base) / 2);
18+
--mynah-sizing-1: var(--mynah-sizing-base);
19+
--mynah-sizing-2: calc(var(--mynah-sizing-base) * 2);
20+
--mynah-sizing-3: calc(var(--mynah-sizing-base) * 3);
21+
--mynah-sizing-4: calc(var(--mynah-sizing-base) * 4);
22+
--mynah-sizing-5: calc(var(--mynah-sizing-base) * 5);
23+
--mynah-sizing-6: calc(var(--mynah-sizing-base) * 6);
24+
--mynah-sizing-7: calc(var(--mynah-sizing-base) * 7);
25+
--mynah-sizing-8: calc(var(--mynah-sizing-base) * 8);
26+
--mynah-sizing-9: calc(var(--mynah-sizing-base) * 9);
27+
--mynah-sizing-10: calc(var(--mynah-sizing-base) * 10);
28+
--mynah-sizing-11: calc(var(--mynah-sizing-base) * 11);
29+
--mynah-sizing-12: calc(var(--mynah-sizing-base) * 12);
30+
--mynah-sizing-13: calc(var(--mynah-sizing-base) * 13);
31+
--mynah-sizing-14: calc(var(--mynah-sizing-base) * 14);
32+
--mynah-sizing-15: calc(var(--mynah-sizing-base) * 15);
33+
--mynah-sizing-16: calc(var(--mynah-sizing-base) * 16);
34+
--mynah-sizing-17: calc(var(--mynah-sizing-base) * 17);
35+
--mynah-sizing-18: calc(var(--mynah-sizing-base) * 18);
36+
--mynah-chat-wrapper-spacing: var(--mynah-sizing-2);
37+
--mynah-button-border-width: 1px;
38+
--mynah-border-width: 1px;
39+
40+
--mynah-color-text-default: var(--vscode-foreground);
41+
--mynah-color-text-strong: var(--vscode-input-foreground);
42+
--mynah-color-text-weak: var(--vscode-disabledForeground);
43+
--mynah-color-text-link: var(--vscode-textLink-foreground);
44+
--mynah-color-text-input: var(--vscode-input-foreground);
45+
46+
--mynah-color-bg: var(--vscode-sideBar-background);
47+
--mynah-color-tab-active: var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg)));
48+
--mynah-color-light: rgba(0, 0, 0, 0.05);
49+
50+
--mynah-color-border-default: var(--vscode-panel-border, var(--vscode-tab-border, rgba(0, 0, 0, 0.1)));
51+
52+
--mynah-color-highlight: rgba(255, 179, 0, 0.25);
53+
--mynah-color-highlight-text: #886411;
54+
55+
--mynah-color-toggle: var(--vscode-sideBar-background);
56+
--mynah-color-toggle-reverse: rgba(0, 0, 0, 0.5);
57+
58+
--mynah-color-syntax-bg: var(--vscode-terminal-dropBackground);
59+
--mynah-color-syntax-variable: var(--vscode-debugTokenExpression-name);
60+
--mynah-color-syntax-function: var(--vscode-gitDecoration-modifiedResourceForeground);
61+
--mynah-color-syntax-operator: var(--vscode-debugTokenExpression-name);
62+
--mynah-color-syntax-attr-value: var(--vscode-debugIcon-stepBackForeground);
63+
--mynah-color-syntax-attr: var(--vscode-debugTokenExpression-string);
64+
--mynah-color-syntax-property: var(--vscode-terminal-ansiCyan);
65+
--mynah-color-syntax-comment: var(--vscode-debugConsole-sourceForeground);
66+
--mynah-color-syntax-code: var(--vscode-terminal-ansiBlue);
67+
--mynah-syntax-code-font-family: var(--vscode-editor-font-family);
68+
--mynah-syntax-code-font-size: var(--vscode-editor-font-size, var(--mynah-font-size-medium));
69+
--mynah-syntax-code-block-max-height: calc(25 * var(--mynah-syntax-code-line-height));
70+
71+
--mynah-color-status-info: var(--vscode-editorInfo-foreground);
72+
--mynah-color-status-success: var(--vscode-terminal-ansiGreen);
73+
--mynah-color-status-warning: var(--vscode-editorWarning-foreground);
74+
--mynah-color-status-error: var(--vscode-editorError-foreground);
75+
76+
--mynah-color-button: var(--vscode-button-background);
77+
--mynah-color-button-reverse: var(--vscode-button-foreground);
78+
79+
--mynah-color-alternate: var(--vscode-button-secondaryBackground);
80+
--mynah-color-alternate-reverse: var(--vscode-button-secondaryForeground);
81+
82+
--mynah-card-bg: var(--vscode-editor-background);
83+
84+
--mynah-shadow-button: none;
85+
--mynah-shadow-card: none;
86+
--mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
87+
88+
--mynah-font-size-xxsmall: 0.75rem;
89+
--mynah-font-size-xsmall: 0.85rem;
90+
--mynah-font-size-small: 0.95rem;
91+
--mynah-font-size-medium: 1rem;
92+
--mynah-font-size-large: 1.125rem;
93+
--mynah-line-height: 1.1rem;
94+
--mynah-syntax-code-line-height: 1.1rem;
95+
96+
--mynah-card-radius: var(--mynah-sizing-2);
97+
--mynah-input-radius: var(--mynah-sizing-1);
98+
--mynah-card-radius-corner: 0;
99+
--mynah-button-radius: var(--mynah-sizing-1);
100+
101+
--mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
102+
--mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1);
103+
--mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1);
104+
--mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1);
105+
--mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1);
106+
--mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
107+
--mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1), transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
10108
}
11109

12110
body.vscode-dark,
@@ -19,3 +117,7 @@ body.vscode-high-contrast:not(.vscode-high-contrast-light) {
19117
body .mynah-card-body h1 {
20118
--mynah-line-height: 1.5rem;
21119
}
120+
121+
div.mynah-card.padding-large {
122+
padding: var(--mynah-sizing-4) var(--mynah-sizing-3);
123+
}

0 commit comments

Comments
 (0)