diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 6e3536afd7..2a0d040ee6 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -160,9 +160,9 @@ overflow: hidden; white-space: nowrap; cursor: pointer; - background: #3C3F41; + background: transparent; box-shadow: none; - border: 1px solid #3C3F41; + border: 1px solid transparent; box-sizing: border-box; color: #a0a0a0; font-size: 14px; diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 078fae2389..421764934d 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -1929,6 +1929,10 @@ define({ "AI_CHAT_MODE_PLAN": "Plan Mode", "AI_CHAT_MODE_EDIT": "Edit Mode", "AI_CHAT_MODE_FULL_AUTO": "Full Auto", + "AI_CHAT_MODE_INFO_PLAN": "AI will propose a plan before making changes", + "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval", + "AI_CHAT_MODE_INFO_FULL_AUTO": "AI can edit files and run commands without approval", + "AI_CHAT_MODE_SWITCH_HINT": "(Shift+Tab to switch)", "AI_CHAT_BASH_CONFIRM_TITLE": "Allow command?", "AI_CHAT_BASH_ALLOW": "Allow", "AI_CHAT_BASH_DENY": "Deny", diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less index 35ff4c8f50..c3310c6435 100644 --- a/src/styles/Extn-AIChatPanel.less +++ b/src/styles/Extn-AIChatPanel.less @@ -36,7 +36,7 @@ flex: 1; min-height: 0; overflow: hidden; - background-color: @bc-sidebar-bg; + background-color: @bc-ai-sidebar-bg; color: @project-panel-text-1; font-size: @sidebar-content-font-size; container-type: inline-size; @@ -263,6 +263,7 @@ -webkit-user-select: text; user-select: text; cursor: default; + background-color: @bc-ai-sidebar-bg; } /* ── Individual messages ────────────────────────────────────────────── */ @@ -1695,14 +1696,15 @@ .ai-chat-input-wrap { display: flex; align-items: flex-end; - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.08); + background-color: @bc-ai-input-bg; + border: 1px solid @bc-ai-input-border; border-radius: 8px; transition: border-color 0.15s ease; overflow: hidden; &:focus-within { - border-color: @bc-btn-border-focused; + background-color: @bc-ai-input-bg-focused; + border-color: @bc-ai-input-border-focus; } &.disabled { @@ -1747,6 +1749,22 @@ color: @project-panel-text-2; line-height: 1; } + + .ai-permission-info { + display: none; + margin-left: auto; + font-size: 11px; + line-height: 1; + pointer-events: auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: @project-panel-text-2; + } + + &:hover .ai-permission-info { + display: inline; + } } .ai-chat-context-bar { @@ -1931,7 +1949,7 @@ .ai-chat-textarea { flex: 1; min-width: 0; - background: none; + background: transparent !important; border: none !important; color: @project-panel-text-1; font-size: @sidebar-content-font-size; diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index 065ee17362..9a79950d70 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -23,7 +23,7 @@ #navTabBar { display: none; align-items: center; - background-color: @bc-sidebar-bg; + background-color: @bc-ai-sidebar-bg; height: 2rem; overflow: hidden; user-select: none; diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 05855333ac..009700318f 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -268,6 +268,8 @@ a, img { left: @sidebar-width; // changed dynamically via Resizer right: @main-toolbar-width; z-index: @z-index-brackets-main-content; + border-left: 2px solid rgba(255, 255, 255, 0.10); + border-right: 2px solid rgba(255, 255, 255, 0.10); } .force-right-zero { @@ -1198,7 +1200,7 @@ a, img { /* Project panel */ #working-set-list-container { - background: @bc-sidebar-bg; + background: @bc-working-set-bg; display: block; > div:last-child ul { @@ -1214,19 +1216,19 @@ a, img { position: relative; height: 19px; padding: 10px 0 9px 12px; - background: @bc-sidebar-bg; + background: @bc-working-set-bg; color: @project-panel-text-2; text-shadow: none; overflow: hidden; > span { - background: @bc-sidebar-bg; + background: @bc-working-set-bg; position: relative; z-index: 9; } > div { - background-color: @dark-bc-sidebar-bg; + background-color: @bc-working-set-bg; opacity: 1; } } @@ -1385,15 +1387,16 @@ a, img { #project-files-header { display: flex; align-items: center; - border-top: 1px solid rgba(255, 255, 255, 0.05); + border-top: none; padding: 6px 0 6px 12px; font-size: 15px; color: @project-panel-text-2; + background-color: @bc-project-files-bg; overflow: hidden; gap: .5em; .btn-alt-quiet { - background-color: #47484b; + background-color: transparent; // relative positioning plus z-index make sure that the splitview button flows under the left aligned buttons in the project pane when there are no working set files position: relative; @@ -1444,7 +1447,7 @@ a, img { height: 16px; line-height: 15px; margin-left: 18px; - padding: 3px 0 3px 0; + padding: 4px 0 3px 0; cursor: default; @@ -1466,8 +1469,8 @@ a, img { .sidebar-selection, .filetree-selection { background: @bc-sidebar-selection; - border-top: 1px solid @bc-shadow-small; - border-bottom: 1px solid @bc-highlight; + border: none; + box-shadow: none; box-sizing: border-box; height: 23px; width: 100%; @@ -1475,9 +1478,9 @@ a, img { } .sidebar-selection-extension, .filetree-selection-extension { - background: @bc-sidebar-selection; - border-top: 1px solid @bc-shadow-small; - border-bottom: 1px solid @bc-highlight; + background: transparent; + border-top: none; + border-bottom: none; box-sizing: border-box; height: 23px; width: 9px; /* quiet scrollbar width */ @@ -1511,6 +1514,7 @@ a, img { #project-files-container { .box-flex(1); + background-color: @bc-project-files-bg; div > ul { padding-bottom: 24px; @@ -1521,20 +1525,20 @@ a, img { .scroller-shadow { background-size: 100%; background-repeat: no-repeat; - height: 5px; + height: 8px; position: fixed; z-index: @z-index-brackets-scroller-shadow; pointer-events: none; // serves as a "click through", so clicks go to the file tree behind (see #12684) &.top { - #gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0)); - background-position: 0 -5px; + #gradient > .vertical(rgba(0,0,0,0.18), rgba(0,0,0,0)); + background-position: 0 -8px; background-color: transparent; /* override background-color: @endColor from #gradient.vertical */ } &.bottom { - #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.1)); - background-position: 0 5px; + #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.12)); + background-position: 0 8px; background-color: transparent; /* override background-color: @endColor from #gradient.vertical */ } } diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less index 5dd433c43a..afa394ce41 100644 --- a/src/styles/brackets_core_ui_variables.less +++ b/src/styles/brackets_core_ui_variables.less @@ -149,8 +149,8 @@ // Sidebar -@bc-sidebar-bg: #3C3F41; -@bc-sidebar-selection: #2D2E30; +@bc-sidebar-bg: #252525; +@bc-sidebar-selection: rgba(90, 140, 255, 0.18); // images @button-icon: "images/find-replace-sprites.svg"; @@ -262,11 +262,11 @@ @dark-bc-secondary-btn-border: #202020; // Sidebar -@dark-bc-sidebar-bg: #3C3F41; -@dark-bc-sidebar-selection: #2D2E30; +@dark-bc-sidebar-bg: #252525; +@dark-bc-sidebar-selection: rgba(90, 140, 255, 0.18); // Plugin panel -@plugin-panel-bg: #3C3F41; +@plugin-panel-bg: #252525; // images @dark-button-icon: "images/find-replace-sprites-dark.svg"; diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index 61700cdb50..b8ad1471a8 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -259,7 +259,7 @@ a:focus { } .selected-button{ - background-color: @plugin-panel-bg !important; + background-color: rgba(255, 255, 255, 0.12) !important; margin-left: 3px !important; margin-right: 0 !important; } @@ -280,11 +280,7 @@ a:focus { } > a:hover { - background-color: @bc-shadow !important; - - .dark & { - background-color: @dark-bc-shadow !important; - } + background-color: rgba(255, 255, 255, 0.08) !important; } > a:active { diff --git a/src/styles/brackets_scrollbars.less b/src/styles/brackets_scrollbars.less index 84e71d4c97..25bf78ef12 100644 --- a/src/styles/brackets_scrollbars.less +++ b/src/styles/brackets_scrollbars.less @@ -26,7 +26,7 @@ #project-files-container:hover, .ai-chat-messages:hover, .ai-session-history-dropdown:hover { - background-color: rgba(128, 128, 128, 0); + background-color: inherit; } /* Temporary implementation of unobtrusive scrollbars. @@ -85,6 +85,51 @@ } +/* Always-visible scrollbar — same style as quiet-scrollbars but always shown. + Add element classes here to opt in. */ +.visible-scrollbars, +.ai-plan-body { + &::-webkit-scrollbar { + width: 9px; + height: 9px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + border-radius: 999px; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) inset !important; + border: 2px solid transparent !important; + } + + .dark & { + &::-webkit-scrollbar-thumb { + box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important; + } + } +} + +/* Dropdown overflow menu needs track bg to match its popup background */ +.dropdown-overflow-menu { + &::-webkit-scrollbar { + width: 9px; + height: 9px; + background-color: @bc-menu-bg !important; + } + &::-webkit-scrollbar-thumb { + border-radius: 999px; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3) inset !important; + border: 2px solid transparent !important; + } + + .dark & { + &::-webkit-scrollbar { + background-color: @dark-bc-menu-bg !important; + } + &::-webkit-scrollbar-thumb { + box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important; + } + } +} + .platform-linux, .platform-mac { // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less index 0caf282a24..e4c7c71897 100644 --- a/src/styles/brackets_theme_default.less +++ b/src/styles/brackets_theme_default.less @@ -86,10 +86,17 @@ @matching-bracket: #cfead6; /* sidebar/toolbar colors */ -@project-panel-base-color: #47484B; +@bc-ai-sidebar-bg: #252525; +@bc-ai-input-bg: #2a2a2a; +@bc-ai-input-bg-focused: #2d2d2d; +@bc-ai-input-border: rgba(255, 255, 255, 0.08); +@bc-ai-input-border-focus: rgba(255, 255, 255, 0.2); +@project-panel-base-color: @bc-project-files-bg; +@bc-working-set-bg: #2f2f2f; +@bc-project-files-bg: #252525; @project-panel-text-1: #ffffff; @project-panel-text-2: #adb9bd; -@main-toolbar-background-color: #5D5F60; +@main-toolbar-background-color: #252525; /* open working file highlight */ @open-working-file-name-highlight: #8fddff; diff --git a/tracking-repos.json b/tracking-repos.json index f26946e066..597de61ce6 100644 --- a/tracking-repos.json +++ b/tracking-repos.json @@ -1,5 +1,5 @@ { "phoenixPro": { - "commitID": "4ca7bc6eea7ad4c94fbf321ae2c854f533fb8bd2" + "commitID": "56017ed5a71d6ff22199f9826803ed0cbabaa22e" } }