From 9c0088eeee9895f881477085f9dc9dc9f4a46d04 Mon Sep 17 00:00:00 2001
From: Oleg Solomko <legomushroom@gmail.com>
Date: Fri, 27 Dec 2024 15:23:18 -0800
Subject: [PATCH] [instruction attachments]: improve CSS styles

---
 .../contrib/chat/browser/media/chat.css       | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css
index dd7b601af7e..999579a5ee7 100644
--- a/src/vs/workbench/contrib/chat/browser/media/chat.css
+++ b/src/vs/workbench/contrib/chat/browser/media/chat.css
@@ -926,20 +926,49 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 /**
- * Styles related to `prompt instruction` attachments.
+ * Styles for the `prompt instructions` attachment widget.
  */
-.chat-attached-context .chat-attached-context-attachment.chat-prompt-instructions-attachment .codicon {
-	color: inherit;
+.chat-attached-context .chat-prompt-instructions-attachments {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
 }
-.chat-attached-context .chat-attached-context-attachment.chat-prompt-instructions-attachment {
+.chat-attached-context .chat-prompt-instructions-attachment {
+	display: flex;
+	gap: 4px;
 	border-color: currentColor;
 }
-.chat-attached-context .chat-attached-context-attachment.chat-prompt-instructions-attachment.warning {
+.chat-attached-context .chat-prompt-instructions-attachment .codicon {
+	color: inherit;
+	text-decoration: none;
+}
+.chat-attached-context .chat-prompt-instructions-attachment .chat-implicit-hint {
+	opacity: 0.7;
+	font-size: .9em;
+}
+.chat-attached-context .chat-prompt-instructions-attachment.warning {
 	color: var(--vscode-notificationsWarningIcon-foreground);
 }
-.chat-attached-context .chat-attached-context-attachment.chat-prompt-instructions-attachment.error {
+.chat-attached-context .chat-prompt-instructions-attachment.error {
 	color: var(--vscode-notificationsErrorIcon-foreground);
 }
+.chat-attached-context .chat-prompt-instructions-attachment.disabled {
+	border-style: dashed;
+	opacity: 0.75;
+}
+.chat-attached-context .chat-prompt-instructions-attachment.disabled:hover {
+	opacity: 1;
+}
+.chat-attached-context .chat-prompt-instructions-attachment.disabled .chat-implicit-hint,
+.chat-attached-context .chat-prompt-instructions-attachment.disabled .label-name {
+	font-style: italic;
+	text-decoration: line-through;
+}
+.chat-attached-context .chat-prompt-instructions-attachment.disabled:focus {
+	outline: none;
+	border-color: var(--vscode-focusBorder);
+}
 
 .chat-notification-widget .chat-warning-codicon .codicon-warning,
 .chat-quota-error-widget .codicon-warning {