mirror of
https://github.com/Microsoft/vscode
synced 2024-09-13 13:46:13 +00:00
Add CSS vars for slash commands and tweak styling (#189965)
Add css vars for slash commands and tweak styling
This commit is contained in:
parent
42b4bf0670
commit
d1c4bf3fcb
|
@ -38,6 +38,8 @@
|
||||||
"--vscode-charts-yellow",
|
"--vscode-charts-yellow",
|
||||||
"--vscode-chat-requestBackground",
|
"--vscode-chat-requestBackground",
|
||||||
"--vscode-chat-requestBorder",
|
"--vscode-chat-requestBorder",
|
||||||
|
"--vscode-chat-slashCommandBackground",
|
||||||
|
"--vscode-chat-slashCommandForeground",
|
||||||
"--vscode-checkbox-background",
|
"--vscode-checkbox-background",
|
||||||
"--vscode-checkbox-border",
|
"--vscode-checkbox-border",
|
||||||
"--vscode-checkbox-foreground",
|
"--vscode-checkbox-foreground",
|
||||||
|
@ -211,12 +213,14 @@
|
||||||
"--vscode-editorHoverWidget-foreground",
|
"--vscode-editorHoverWidget-foreground",
|
||||||
"--vscode-editorHoverWidget-highlightForeground",
|
"--vscode-editorHoverWidget-highlightForeground",
|
||||||
"--vscode-editorHoverWidget-statusBarBackground",
|
"--vscode-editorHoverWidget-statusBarBackground",
|
||||||
|
"--vscode-editorIndentGuide-activeBackground",
|
||||||
"--vscode-editorIndentGuide-activeBackground1",
|
"--vscode-editorIndentGuide-activeBackground1",
|
||||||
"--vscode-editorIndentGuide-activeBackground2",
|
"--vscode-editorIndentGuide-activeBackground2",
|
||||||
"--vscode-editorIndentGuide-activeBackground3",
|
"--vscode-editorIndentGuide-activeBackground3",
|
||||||
"--vscode-editorIndentGuide-activeBackground4",
|
"--vscode-editorIndentGuide-activeBackground4",
|
||||||
"--vscode-editorIndentGuide-activeBackground5",
|
"--vscode-editorIndentGuide-activeBackground5",
|
||||||
"--vscode-editorIndentGuide-activeBackground6",
|
"--vscode-editorIndentGuide-activeBackground6",
|
||||||
|
"--vscode-editorIndentGuide-background",
|
||||||
"--vscode-editorIndentGuide-background1",
|
"--vscode-editorIndentGuide-background1",
|
||||||
"--vscode-editorIndentGuide-background2",
|
"--vscode-editorIndentGuide-background2",
|
||||||
"--vscode-editorIndentGuide-background3",
|
"--vscode-editorIndentGuide-background3",
|
||||||
|
@ -312,6 +316,7 @@
|
||||||
"--vscode-inlineChat-regionHighlight",
|
"--vscode-inlineChat-regionHighlight",
|
||||||
"--vscode-inlineChat-shadow",
|
"--vscode-inlineChat-shadow",
|
||||||
"--vscode-inlineChatDiff-inserted",
|
"--vscode-inlineChatDiff-inserted",
|
||||||
|
"--vscode-inlineChatDiff-removed",
|
||||||
"--vscode-inlineChatInput-background",
|
"--vscode-inlineChatInput-background",
|
||||||
"--vscode-inlineChatInput-border",
|
"--vscode-inlineChatInput-border",
|
||||||
"--vscode-inlineChatInput-focusBorder",
|
"--vscode-inlineChatInput-focusBorder",
|
||||||
|
@ -529,6 +534,7 @@
|
||||||
"--vscode-sideBarTitle-foreground",
|
"--vscode-sideBarTitle-foreground",
|
||||||
"--vscode-sideBySideEditor-horizontalBorder",
|
"--vscode-sideBySideEditor-horizontalBorder",
|
||||||
"--vscode-sideBySideEditor-verticalBorder",
|
"--vscode-sideBySideEditor-verticalBorder",
|
||||||
|
"--vscode-simpleFindWidget-sashBorder",
|
||||||
"--vscode-statusBar-background",
|
"--vscode-statusBar-background",
|
||||||
"--vscode-statusBar-border",
|
"--vscode-statusBar-border",
|
||||||
"--vscode-statusBar-debuggingBackground",
|
"--vscode-statusBar-debuggingBackground",
|
||||||
|
@ -760,4 +766,4 @@
|
||||||
"--z-index-notebook-sticky-scroll",
|
"--z-index-notebook-sticky-scroll",
|
||||||
"--zoom-factor"
|
"--zoom-factor"
|
||||||
]
|
]
|
||||||
}
|
}
|
|
@ -19,6 +19,8 @@
|
||||||
"button.secondaryBackground": "#1F1F1F",
|
"button.secondaryBackground": "#1F1F1F",
|
||||||
"button.secondaryForeground": "#CCCCCC",
|
"button.secondaryForeground": "#CCCCCC",
|
||||||
"button.secondaryHoverBackground": "#2B2B2B",
|
"button.secondaryHoverBackground": "#2B2B2B",
|
||||||
|
"chat.slashCommandBackground": "#3E4C56",
|
||||||
|
"chat.slashCommandForeground": "#7FC3FF",
|
||||||
"checkbox.background": "#313131",
|
"checkbox.background": "#313131",
|
||||||
"checkbox.border": "#3C3C3C",
|
"checkbox.border": "#3C3C3C",
|
||||||
"debugToolBar.background": "#181818",
|
"debugToolBar.background": "#181818",
|
||||||
|
|
|
@ -19,6 +19,8 @@
|
||||||
"button.secondaryBackground": "#E5E5E5",
|
"button.secondaryBackground": "#E5E5E5",
|
||||||
"button.secondaryForeground": "#3B3B3B",
|
"button.secondaryForeground": "#3B3B3B",
|
||||||
"button.secondaryHoverBackground": "#CBCBCB",
|
"button.secondaryHoverBackground": "#CBCBCB",
|
||||||
|
"chat.slashCommandBackground": "#D2ECFF",
|
||||||
|
"chat.slashCommandForeground": "#306CA2",
|
||||||
"checkbox.background": "#F8F8F8",
|
"checkbox.background": "#F8F8F8",
|
||||||
"checkbox.border": "#CECECE",
|
"checkbox.border": "#CECECE",
|
||||||
"descriptionForeground": "#3B3B3B",
|
"descriptionForeground": "#3B3B3B",
|
||||||
|
|
|
@ -4,16 +4,12 @@
|
||||||
*--------------------------------------------------------------------------------------------*/
|
*--------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
.chat-slash-command-content-widget {
|
.chat-slash-command-content-widget {
|
||||||
padding: 0.1em 0.3em;
|
padding: 0 3px 1px 3px;
|
||||||
border-radius: 2px;
|
border-radius: 3px;
|
||||||
background-color: var(--vscode-textCodeBlock-background);
|
background-color: var(--vscode-chat-slashCommandBackground);
|
||||||
color: var(--vscode-textLink-foreground);
|
color: var(--vscode-chat-slashCommandForeground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive-session .interactive-input-and-toolbar .chat-slash-command-content-widget {
|
.interactive-session .interactive-input-and-toolbar .chat-slash-command-content-widget {
|
||||||
top: 7px !important;
|
top: 7px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-chat .chat-slash-command-content-widget {
|
|
||||||
top: 2px !important;
|
|
||||||
}
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
import { Color, RGBA } from 'vs/base/common/color';
|
import { Color, RGBA } from 'vs/base/common/color';
|
||||||
import { localize } from 'vs/nls';
|
import { localize } from 'vs/nls';
|
||||||
import { registerColor } from 'vs/platform/theme/common/colorRegistry';
|
import { badgeBackground, badgeForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
|
||||||
|
|
||||||
|
|
||||||
export const chatRequestBackground = registerColor(
|
export const chatRequestBackground = registerColor(
|
||||||
|
@ -19,3 +19,15 @@ export const chatRequestBorder = registerColor(
|
||||||
{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
|
{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
|
||||||
localize('chat.requestBorder', 'The border color of a chat request.')
|
localize('chat.requestBorder', 'The border color of a chat request.')
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const chatSlashCommandBackground = registerColor(
|
||||||
|
'chat.slashCommandBackground',
|
||||||
|
{ dark: badgeBackground, light: badgeBackground, hcDark: Color.white, hcLight: badgeBackground },
|
||||||
|
localize('chat.slashCommandBackground', 'The background color of a chat slash command.')
|
||||||
|
);
|
||||||
|
|
||||||
|
export const chatSlashCommandForeground = registerColor(
|
||||||
|
'chat.slashCommandForeground',
|
||||||
|
{ dark: badgeForeground, light: badgeForeground, hcDark: Color.black, hcLight: badgeForeground },
|
||||||
|
localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
|
||||||
|
);
|
||||||
|
|
Loading…
Reference in a new issue