+++ /dev/null
-/*
-📝 custom.css — This file customizes the right-side AI chat panel in Cursor.
-
-It is NOT responsible for styling the central code editor panel — that should be
-done using `settings.json`. Use this file only for visual tweaks to the AI chat UI,
-such as font sizes, colors, backgrounds, buttons, and icons.
-
-🛠️ IMPORTANT: After every Cursor update, run "Enable Custom CSS and JS"
-from the Command Palette (Ctrl+Shift+P) to reapply these styles, since updates reset the patch.
-*/
-
-/* 🗨️ Main chat message bubbles and markdown areas */
-.aislash-editor-input-readonly,
-.anysphere-markdown-container-root,
-.markdown-section,
-.composer-human-message,
-.collapsible-header-text,
-.cursor-button {
- font-size: 16px !important;
- line-height: 1.6 !important;
- color: #e0e0e0 !important;
-}
-
-/* 🔘 "Load older messages" button */
-.cursor-button-secondary {
- font-size: 15px !important;
- font-weight: 500 !important;
- color: #ffffff !important;
-}
-
-/* 💬 Chat panel background color */
-.chat-container {
- background-color: #111827 !important;
-}
-
-/* ✅ AI chat thumbs/copy/... icons - make them larger and green */
-.anysphere-icon-button span[class^="codicon"] {
- font-size: 22px !important;
- color: #a3fda0 !important;
-}
-
-/* 🖱️ Icon hover effect: grow and brighten */
-.anysphere-icon-button:hover span[class^="codicon"] {
- filter: brightness(1.2);
- transform: scale(1.1);
- transition: all 0.2s ease-in-out;
-}
-
-/* 👍 "Accept all" button: make it bold, larger, green background */
-.anysphere-secondary-button {
- font-size: 18px !important;
- font-weight: 600 !important;
- color: #ffffff !important;
- background-color: #188d18 !important;
- padding: 4px 10px !important;
- border-radius: 4px !important;
-}
-
-/* ⛔ "Reject all" text only: bold, red, styled with padding */
-.anysphere-text-button > span:first-child {
- background-color: #faf8f8 !important;
- color: #a81a1a !important;
- font-weight: 600 !important;
- padding: 4px 8px !important;
- border-radius: 4px !important;
- font-size: 13px !important;
-}
-
-/* ⌨️ Input box (where you type): make font larger while typing */
-.aislash-editor-input {
- font-size: 15px !important;
- font-weight: 500 !important;
- line-height: 1.6 !important;
-}
-
-/* 💡 Highlight only the "Generating..." line in yellow */
-div[style*="text-overflow: ellipsis"] > span:has(span:only-child) {
- color: #ffff33 !important;
- font-weight: 700 !important;
- font-size: 13px !important;
-}
-
-/* 🖊️ Style for submitted chat messages (readonly text) */
-.aislash-editor-input-readonly {
- color: #000000 !important; /* Black text */
- background-color: #ffffcc !important; /* Bright yellow background */
- font-weight: 700 !important; /* Bold */
- padding: 6px 10px !important;
- border-radius: 4px !important;
- font-size: 14px !important;
-}
-
-/* 🛠 Restore terminal text visibility */
-.xterm .xterm-rows {
- color: #ffffff !important; /* white text */
- background-color: #1e1e1e !important; /* VS Code default terminal bg */
-}
-
-/*
-Control the size of the copy icon specifically within code block headers.
-Adjust the font-size value below to experiment.
-*/
-.composer-code-block-header .anysphere-icon-button .codicon-copy-two {
- font-size: 17px !important; /* Default from HTML is 10px. Adjust this value to test different sizes. */
-}
-
-/*
-Improve spacing for the copy icon within code block headers.
-Add space to its right.
-*/
-.composer-code-block-header .anysphere-icon-button:has(.codicon-copy-two) {
- margin-right: 7px !important; /* Add space to the right of the copy button */
-}
-
-/*
-Increase spacing for the group of four action icons (thumbs up/down, copy, ellipsis)
-at the end of AI and user messages.
-*/
-
-/* Target the icon buttons within that group to increase space INSIDE them */
-.anysphere-markdown-container-root
- div[style*="margin-left: auto"]:has(
- > .anysphere-icon-button .codicon-thumbs-up
- ):has(> .anysphere-icon-button .codicon-ellipsis-two)
- > .anysphere-icon-button,
-.composer-human-message
- div[style*="margin-left: auto"]:has(
- > .anysphere-icon-button .codicon-thumbs-up
- ):has(> .anysphere-icon-button .codicon-ellipsis-two)
- > .anysphere-icon-button {
- padding: 6px !important; /* Original inline styles were 4px or 6px. This standardizes and potentially increases space INSIDE. */
-}
-
-/* Target icon buttons (except the first) in that group to add space BETWEEN them */
-.anysphere-markdown-container-root
- div[style*="margin-left: auto"]:has(
- > .anysphere-icon-button .codicon-thumbs-up
- ):has(> .anysphere-icon-button .codicon-ellipsis-two)
- > .anysphere-icon-button:not(:first-child),
-.composer-human-message
- div[style*="margin-left: auto"]:has(
- > .anysphere-icon-button .codicon-thumbs-up
- ):has(> .anysphere-icon-button .codicon-ellipsis-two)
- > .anysphere-icon-button:not(:first-child) {
- margin-left: 5px !important; /* Add space to the left of each button (except the first). Adjust as needed. */
-}
-
-/* ===== Icon action-group spacing fix ===== */
-
-/* 1. Give every icon button equal inner padding */
-.anysphere-icon-button {
- padding: 6px !important; /* Consistent internal space */
-}
-
-/* 2. Inject extra space *between* buttons. */
-/* We cannot rely on overriding the parent's inline `gap`, */
-/* because Cursor rewrites it after load. */
-/* Instead, add a left-margin to every button except the first. */
-.anysphere-markdown-container-root
- div[style*="margin-left: auto"]
- > .anysphere-icon-button
- + .anysphere-icon-button,
-.composer-human-message
- div[style*="margin-left: auto"]
- > .anysphere-icon-button
- + .anysphere-icon-button {
- margin-left: 10px !important; /* ← adjust to taste (5-7 px) */
-}
-
-/* Improve the presentation of buttons containing the 'codicon-review' icon,
- like the 'Review changes' button. */
-
-/* Style for the button itself when it contains a 'codicon-review' icon */
-.anysphere-text-button:has(span.codicon-review) {
- gap: 4px !important; /* Increase space between icon and text (adjust as needed) */
- padding-left: 5px !important; /* Add some horizontal padding to the button */
- padding-right: 5px !important; /* Add some horizontal padding to the button */
- background-color: transparent !important; /* Make background transparent in normal state */
- border: none !important; /* Remove any border */
- box-shadow: none !important; /* Attempt to remove any box-shadow that might look like a background */
-}
-
-/* Ensure hover state also has a transparent background or matches page */
-.anysphere-text-button:has(span.codicon-review):hover {
- background-color: transparent !important; /* Or use your page's actual background color if known and `transparent` doesn't work */
-}
-
-/* Style for the 'codicon-review' icon within such buttons */
-.anysphere-text-button span.codicon-review {
- font-size: 11px !important; /* Match button text font-size (icon was 10px) */
- opacity: 0 !important; /* Make icon invisible */
-}
-
-/* ===== Styles for "Submit from a previous message?" Dialog Buttons ===== */
-
-/* Make the "Continue and revert" button (primary blue) larger and more prominent */
-.pretty-dialog-modal .pretty-dialog-button.pretty-dialog-button-primary {
- font-size: 18px !important; /* Increased from default/screenshot 11px */
- font-weight: 600 !important;
- padding: 13px 12px !important; /* Increased vertical padding for more height */
- /* Ensure it maintains its primary button appearance if other styles conflict */
- background-color: var(
- --vscode-button-background
- ) !important; /* Standard primary button blue */
- color: var(
- --vscode-button-foreground
- ) !important; /* Standard primary button text color */
- border: 1px solid var(--vscode-button-border, transparent) !important;
-}
-
-.pretty-dialog-modal .pretty-dialog-button.pretty-dialog-button-primary:hover {
- background-color: var(--vscode-button-hoverBackground) !important;
-}
-
-/* Adjust the "Continue without reverting" button (secondary green) to be less prominent than the new primary */
-/* The existing .anysphere-secondary-button style makes it quite large (18px font, 4px 10px padding) */
-/* We'll make it slightly smaller here specifically within this dialog */
-.pretty-dialog-modal .anysphere-secondary-button.pretty-dialog-button {
- font-size: 14px !important; /* Smaller than the primary, and smaller than its global style */
- font-weight: 500 !important;
- padding: 4px 8px !important;
- background-color: red !important; /* Changed to red */
- color: yellow !important; /* Changed to yellow */
-}
-
-/* Ensure Cancel button remains a text button */
-.pretty-dialog-modal .anysphere-text-button.pretty-dialog-button {
- font-size: 12px !important;
- padding: 4px 8px !important;
- /* Resetting any potentially inherited background from other generic button styles */
- background-color: transparent !important;
- color: var(--vscode-foreground) !important; /* Or specific text color */
-}
-
-/* ===== Project Title in VS Code Command Center ===== */
-/* Target the project title/label in the command center area */
-.command-center-center .search-label {
- font-size: 16px !important; /* Adjust as needed for "a bit larger" */
- color: #f9fc3c !important; /* Updated color */
-}
-
-/* You might also want to ensure hover/active states don't override this */
-.command-center-center .search-label:hover,
-.command-center-center .search-label:active {
- color: #f9fc3c !important; /* Maintain updated color on hover/active */
-}
-
-/* ===== Inline Diff Accept/Reject Button Styling (Revised) ===== */
-
-/* Parent selector for the container of Accept/Reject buttons */
-div[notransition="true"][forcegap="4"] {
- /* You can add overrides for the container itself if needed, e.g., to ensure no other background bleeds through */
-}
-
-/* Specific styling for the "Reject" button (anysphere-text-button) within that container */
-div[notransition="true"][forcegap="4"] .anysphere-text-button {
- background-color: red !important;
- border: 1px solid #dd0000 !important; /* Darker red border */
- padding: 3px 6px !important; /* Increased padding by 20% */
- border-radius: 4px !important;
- position: relative; /* Ensure pseudo-element is positioned correctly if needed */
-}
-
-/* Hide original span text and prepare for pseudo-element */
-div[notransition="true"][forcegap="4"] .anysphere-text-button > span {
- font-size: 0 !important; /* Hide original text */
- /* Other properties like color are irrelevant now for the span, will be on ::before */
- padding: 0 !important;
-}
-
-/* Add "Reject" text using a pseudo-element */
-div[notransition="true"][forcegap="4"] .anysphere-text-button::before {
- content: "Reject";
- color: yellow !important;
- background-color: transparent !important;
- font-size: 13px !important; /* Restored font size */
- font-weight: normal !important;
-}
-
-/* Specific styling for the "Accept" button (anysphere-secondary-button) within that container */
-/* This will override the general .anysphere-secondary-button styles for this specific context */
-div[notransition="true"][forcegap="4"] .anysphere-secondary-button {
- background-color: #00ff00 !important; /* Bright green (lime) */
- color: #000000 !important; /* Black text */
- font-size: 13px !important; /* Font size for the button itself, can remain or match span */
- padding: 5px 7px !important; /* Slightly increased vertical padding */
- border-radius: 4px !important;
- border: 1px solid #00dd00 !important; /* Darker green border */
- font-weight: normal !important; /* Ensure it's not bold from general styles */
-}
-
-/* Text span inside the "Accept" button, if direct styling is needed (usually handled by button color) */
-div[notransition="true"][forcegap="4"] .anysphere-secondary-button > span {
- color: #000000 !important; /* Explicitly black text for the span */
- font-size: 15px !important; /* Increased font size for "bigger" */
- font-weight: bold !important; /* Make text bold */
-}
-
-/* ===== Model Selector in Composer (e.g., "gemini-2.5-pro") ===== */
-
-/* Main container for the model selector */
-.composer-unified-dropdown-model,
-.composer-unified-dropdown-model:hover {
- background: transparent !important; /* Ensure no background change on parent */
- /* Other non-color related styles for the container can go here if needed */
-}
-
-/* Target the brain icon next to the model name - DEFAULT STATE */
-.composer-unified-dropdown-model .codicon-brain {
- color: #ffffff !important; /* Pure white */
- font-size: 18px !important; /* Updated font size to match text */
- vertical-align: middle !important;
- opacity: 1 !important; /* Full opacity */
- background-color: transparent !important;
- filter: none !important;
- transform: none !important;
-}
-
-/* Target the brain icon next to the model name - HOVER STATE */
-.composer-unified-dropdown-model .codicon-brain:hover {
- color: #ffffff !important; /* Still pure white on hover */
- /* Retain other properties from default */
- font-size: 18px !important; /* Updated font size to match text */
- opacity: 1 !important;
- filter: none !important;
- transform: none !important;
- background-color: transparent !important;
-}
-
-/* Target the chevron down icon - DEFAULT STATE */
-.composer-unified-dropdown-model .codicon-chevron-down {
- color: #ffffff !important; /* Pure white */
- opacity: 1 !important; /* Full opacity */
- background-color: transparent !important;
- filter: none !important;
- transform: none !important;
-}
-
-/* Target the chevron down icon - HOVER STATE */
-.composer-unified-dropdown-model .codicon-chevron-down:hover {
- color: #ffffff !important; /* Still pure white on hover */
- opacity: 1 !important;
- filter: none !important;
- transform: none !important;
- background-color: transparent !important;
-}
-
-/* Target the chevron up icon (for when the dropdown is open) - DEFAULT STATE */
-.composer-unified-dropdown-model .codicon-chevron-up {
- color: #ffffff !important; /* Pure white */
- opacity: 1 !important; /* Full opacity */
- background-color: transparent !important;
- filter: none !important;
- transform: none !important;
-}
-
-/* Target the chevron up icon (for when the dropdown is open) - HOVER STATE */
-.composer-unified-dropdown-model .codicon-chevron-up:hover {
- color: #ffffff !important; /* Still pure white on hover */
- opacity: 1 !important;
- filter: none !important;
- transform: none !important;
- background-color: transparent !important;
-}
-
-/* Ensure the model selector container itself is fully opaque by default */
-.composer-unified-dropdown-model {
- opacity: 1 !important;
-}
-
-/* Allow the container of the model name and brain icon to expand vertically */
-.composer-unified-dropdown-model > div > div {
- height: auto !important;
- align-items: center !important; /* Ensure vertical centering */
-}
-
-/* ===== Agent Dropdown Styling ===== */
-
-/* Main container for Agent dropdown - ensure full opacity and no conflicting background */
-.composer-unified-dropdown {
- opacity: 1 !important;
- background-color: transparent !important;
-}
-
-/* Parent div of "Agent" text and "Ctrl+I" hint - adjust for height and alignment */
-
-/* "Agent" text span itself */
-
-/* "Ctrl+I" hint text styling */
-
-/* ===== Truncate-X: Agent & Gemini Buttons Styling ===== */
-.composer-unified-dropdown > div > div > span.truncate-x:first-child,
-.composer-unified-dropdown-model .truncate-x,
-span.truncate-x[style],
-span.truncate-x[style]:hover {
- background: #cff87d !important;
- color: #1b0938 !important;
- font-weight: bold !important;
- font-size: 13px !important;
- padding: 2px 4px !important;
- line-height: 16px !important;
- height: 16px !important;
- border-radius: 4px !important;
- border: 1px solid /* #ffff00 !important; */
- opacity: 1 !important;
- filter: none !important;
- transform: none !important;
- text-shadow: none !important;
-}
-
-/* Agent-specific overrides */
-.composer-unified-dropdown > div > div > span.truncate-x:first-child {
- background-color: #007acc !important;
- color: #ffffff !important;
- /* border: 1px solid #2cda6e !important; */
-}
-
-/* grows the inner flex container for Agent */
-.composer-unified-dropdown > div > div {
- height: 20px !important; /* or min-height:20px */
- align-items: center !important;
- overflow: visible !important; /* lets the pill protrude if needed */
-}