|
18 | 18 | * |
19 | 19 | */ |
20 | 20 |
|
21 | | -/* Central vertical control bar between sidebar and editor content */ |
22 | | - |
23 | | -@central-control-bar-width: 30px; |
| 21 | +/* Vertical control bar docked to the left edge of the window */ |
24 | 22 |
|
25 | 23 | #centralControlBar { |
26 | 24 | position: absolute; |
27 | 25 | top: 0; |
| 26 | + left: 0; |
28 | 27 | height: 100%; |
29 | 28 | width: @central-control-bar-width; |
30 | | - left: @sidebar-width; /* updated dynamically when sidebar resizes */ |
31 | | - z-index: @z-index-brackets-main-content + 1; |
| 29 | + z-index: @z-index-brackets-main-toolbar; |
32 | 30 | display: flex; |
33 | 31 | flex-direction: column; |
34 | 32 | align-items: stretch; |
35 | 33 | padding: 4px 0; |
36 | 34 | box-sizing: border-box; |
37 | 35 | user-select: none; |
38 | | - /* Phoenix's sidebar uses a fixed dark panel color (#252525) in both |
39 | | - light and dark themes. Use a slightly darker fixed tone here so the |
40 | | - control bar reads as a distinct surface next to the sidebar while |
41 | | - still staying on-theme in light mode. */ |
42 | | - background-color: #222; |
| 36 | + background-color: @main-toolbar-background-color; |
43 | 37 | border-right: 1px solid rgba(0, 0, 0, 0.45); |
44 | 38 |
|
45 | 39 | .ccb-group { |
|
55 | 49 | background-color: rgba(255, 255, 255, 0.06); |
56 | 50 | } |
57 | 51 |
|
58 | | - /* New-style buttons (icons with FA) */ |
| 52 | + .ccb-spacer { |
| 53 | + flex: 1 1 auto; |
| 54 | + } |
| 55 | + |
| 56 | + .claude-ai-icon { |
| 57 | + display: inline-block; |
| 58 | + width: 16px; |
| 59 | + height: 16px; |
| 60 | + background-color: currentColor; |
| 61 | + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25.5 3c-.6-2.1-3.6-2.1-4.2 0L18.6 12a3 3 0 0 1-2 2L7.5 16.8c-2.1.6-2.1 3.6 0 4.2L16.6 24a3 3 0 0 1 2 2l2.7 9.1c.6 2.1 3.6 2.1 4.2 0L28.2 26a3 3 0 0 1 2-2l9.1-2.7c2.1-.6 2.1-3.6 0-4.2L30.2 14a3 3 0 0 1-2-2L25.5 3ZM40.3 30.5c-.3-1.2-2-1.2-2.4 0l-1 3.4a1.7 1.7 0 0 1-1.1 1.1l-3.4 1c-1.2.3-1.2 2 0 2.4l3.4 1c.5.2 1 .6 1.1 1.1l1 3.4c.3 1.2 2 1.2 2.4 0l1-3.4c.2-.5.6-1 1.1-1.1l3.4-1c1.2-.3 1.2-2 0-2.4l-3.4-1a1.7 1.7 0 0 1-1.1-1.1l-1-3.4Z'/%3E%3C/svg%3E"); |
| 62 | + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25.5 3c-.6-2.1-3.6-2.1-4.2 0L18.6 12a3 3 0 0 1-2 2L7.5 16.8c-2.1.6-2.1 3.6 0 4.2L16.6 24a3 3 0 0 1 2 2l2.7 9.1c.6 2.1 3.6 2.1 4.2 0L28.2 26a3 3 0 0 1 2-2l9.1-2.7c2.1-.6 2.1-3.6 0-4.2L30.2 14a3 3 0 0 1-2-2L25.5 3ZM40.3 30.5c-.3-1.2-2-1.2-2.4 0l-1 3.4a1.7 1.7 0 0 1-1.1 1.1l-3.4 1c-1.2.3-1.2 2 0 2.4l3.4 1c.5.2 1 .6 1.1 1.1l1 3.4c.3 1.2 2 1.2 2.4 0l1-3.4c.2-.5.6-1 1.1-1.1l3.4-1c1.2-.3 1.2-2 0-2.4l-3.4-1a1.7 1.7 0 0 1-1.1-1.1l-1-3.4Z'/%3E%3C/svg%3E"); |
| 63 | + -webkit-mask-size: contain; |
| 64 | + mask-size: contain; |
| 65 | + -webkit-mask-repeat: no-repeat; |
| 66 | + mask-repeat: no-repeat; |
| 67 | + -webkit-mask-position: center; |
| 68 | + mask-position: center; |
| 69 | + } |
| 70 | + |
| 71 | + /* Override legacy sprite styles that NavigationProvider applies */ |
| 72 | + #searchNav { |
| 73 | + background: transparent !important; |
| 74 | + top: auto !important; |
| 75 | + padding: 0 !important; |
| 76 | + width: auto !important; |
| 77 | + height: 28px !important; |
| 78 | + content: normal !important; |
| 79 | + } |
| 80 | + |
59 | 81 | .ccb-btn { |
60 | 82 | display: flex; |
61 | 83 | align-items: center; |
|
73 | 95 | pointer-events: none; |
74 | 96 | } |
75 | 97 |
|
76 | | - svg.ccb-edit-icon { |
77 | | - width: 15px; |
78 | | - height: 11px; |
79 | | - pointer-events: none; |
80 | | - } |
81 | | - |
82 | 98 | &:hover { |
83 | 99 | color: @project-panel-text-1; |
84 | 100 | background-color: rgba(255, 255, 255, 0.08); |
|
89 | 105 | background-color: rgba(255, 255, 255, 0.12); |
90 | 106 | } |
91 | 107 |
|
| 108 | + &.active { |
| 109 | + color: @project-panel-text-1; |
| 110 | + background-color: rgba(255, 255, 255, 0.12); |
| 111 | + } |
| 112 | + |
92 | 113 | &.disabled, |
93 | 114 | &[aria-disabled="true"] { |
94 | 115 | opacity: 0.4; |
95 | 116 | pointer-events: none; |
96 | 117 | } |
97 | 118 | } |
98 | | - |
99 | | - /* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */ |
100 | | - #ccbCollapseEditorBtn { |
101 | | - margin-top: -2px; |
102 | | - |
103 | | - svg { |
104 | | - width: 15px; |
105 | | - height: 15px; |
106 | | - pointer-events: none; |
107 | | - } |
108 | | - } |
109 | | - |
110 | | - /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */ |
111 | | - #searchNav, |
112 | | - #navBackButton, |
113 | | - #navForwardButton { |
114 | | - background: transparent !important; |
115 | | - top: auto !important; |
116 | | - padding: 0 !important; |
117 | | - width: auto !important; |
118 | | - height: 28px !important; |
119 | | - content: normal !important; |
120 | | - opacity: 1; |
121 | | - } |
122 | | - |
123 | | - #navBackButton.nav-back-btn-disabled, |
124 | | - #navForwardButton.nav-forward-btn-disabled { |
125 | | - opacity: 0.35; |
126 | | - pointer-events: none; |
127 | | - } |
128 | | - |
129 | 119 | } |
130 | 120 |
|
131 | 121 | /* Editor collapse: actual layout handled in JS via .content width/visibility */ |
132 | 122 | .ccb-editor-collapsed .content { |
133 | 123 | overflow: hidden; |
134 | 124 | } |
135 | 125 |
|
136 | | -/* Visually move the sidebar's right-resizer to the right edge of the central |
137 | | - control bar, so the drag handle sits between the control bar and the editor |
138 | | - / live-preview area. The Resizer keeps the handle at `left: sidebar.width` |
139 | | - internally (and keeps bumping it back after reposition), so a transform is |
140 | | - used here instead of overriding `left`. Hit-testing follows the transform. |
141 | | - When the sidebar is hidden the Resizer moves the handle out to become a |
142 | | - sibling of #sidebar inside .main-view — apply the same shift there. */ |
143 | | -#sidebar > .horz-resizer, |
144 | | -.main-view > .horz-resizer { |
145 | | - transform: translateX(@central-control-bar-width); |
146 | | -} |
147 | | - |
148 | 126 | /* In design mode the sidebar resizer doubles as the sidebar↔live-preview |
149 | 127 | splitter — hide the main-toolbar's own left-resizer so there aren't two |
150 | 128 | overlapping handles in the same region. */ |
|
153 | 131 | } |
154 | 132 |
|
155 | 133 | /* Cap the sidebar in design mode so the live-preview panel always keeps at |
156 | | - least ~200px of its own. A percentage of the viewport (e.g. 70vw) became |
157 | | - too wide on large screens — the live preview would shrink to a useless |
158 | | - sliver. Enforcing this via CSS max-width stops the drag itself rather than |
159 | | - snapping back after the Resizer has already written a larger value, which |
160 | | - also avoids ResizeObserver loop warnings from rapid width writes. The |
161 | | - 230px accounts for the 30px control bar plus a 200px LP minimum. */ |
| 134 | + least ~200px of its own. The 230px accounts for the 30px control bar |
| 135 | + plus a 200px LP minimum. */ |
162 | 136 | .ccb-editor-collapsed #sidebar { |
163 | 137 | max-width: ~"calc(100vw - 230px)"; |
164 | 138 | } |
0 commit comments