forked from phcode-dev/staging.phcode.dev
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathCentralControlBar.less
More file actions
234 lines (208 loc) · 7.93 KB
/
Copy pathCentralControlBar.less
File metadata and controls
234 lines (208 loc) · 7.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
/*
* GNU AGPL-3.0 License
*
* Copyright (c) 2021 - present core.ai . All rights reserved.
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
* for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
*
*/
/* Central vertical control bar between sidebar and editor content */
@central-control-bar-width: 30px;
#centralControlBar {
position: absolute;
top: 0;
height: 100%;
width: @central-control-bar-width;
left: @sidebar-width; /* updated dynamically when sidebar resizes */
z-index: @z-index-brackets-main-content + 1;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 4px 0;
box-sizing: border-box;
user-select: none;
/* Phoenix's sidebar uses a fixed dark panel color (#252525) in both
light and dark themes. Use a slightly darker fixed tone here so the
control bar reads as a distinct surface next to the sidebar while
still staying on-theme in light mode. */
background-color: #222;
border-right: 1px solid rgba(0, 0, 0, 0.45);
/* Extend CCB's paint by 2px on each side without affecting layout. Under
non-integer DPR (e.g. 110% browser zoom) subpixel rounding can leave a
1px gap between CCB and the sidebar on the left, and between CCB and the
editor on the right. A solid box-shadow with zero blur paints CCB-colored
pixels into those gaps without shifting any geometry. */
box-shadow:
-2px 0 0 0 #222,
2px 0 0 0 #222;
.ccb-group {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
&.ccb-group-file {
flex: 0 1 auto;
max-height: 220px;
overflow: hidden;
justify-content: flex-start;
padding: 4px 0;
}
}
.ccb-divider {
height: 1px;
margin: 4px 6px;
background-color: rgba(255, 255, 255, 0.06);
}
/* New-style buttons (icons with FA) */
.ccb-btn {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
margin: 0 3px;
color: @project-panel-text-2;
font-size: 15px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
i {
pointer-events: none;
}
svg.ccb-edit-icon {
width: 15px;
height: 11px;
pointer-events: none;
}
&:hover {
color: @project-panel-text-1;
background-color: rgba(255, 255, 255, 0.08);
text-decoration: none;
}
&:active {
background-color: rgba(255, 255, 255, 0.12);
}
&.disabled,
&[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
}
/* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */
#ccbCollapseEditorBtn {
margin-top: -2px;
svg {
width: 15px;
height: 15px;
pointer-events: none;
}
/* Design mode on — give the button a "pressed chip" look. The lighter
background reads as a selected toolbar item without introducing a
new accent color into the middle of the UI. Icon color unchanged. */
&.is-active,
&.is-active:hover {
background-color: rgba(255, 255, 255, 0.12);
color: @project-panel-text-1;
}
}
/* Vertical filename label — clicking reveals the current file in the
file tree (keeps the old binoculars-on-label affordance). */
.ccb-file-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px 0;
color: @project-panel-text-2;
height: 100%;
overflow: hidden;
cursor: pointer;
.ccb-file-dot {
flex: 0 0 auto;
line-height: 1;
color: #f1b84e;
visibility: hidden;
font-size: 1rem;
}
&.is-dirty .ccb-file-dot {
visibility: visible;
}
.ccb-file-name {
flex: 1 1 auto;
min-height: 0;
/* Base: vertical-rl + rotate(180deg) gives the same bottom-to-top
reading direction as sideways-lr and works in all engines
(including WebKit/Tauri on macOS where sideways-lr is unsupported
and silently falls back to horizontal-tb). */
writing-mode: vertical-rl;
text-orientation: sideways;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @project-panel-text-1;
font-size: 13px;
font-weight: 500;
/* Promote to its own compositing layer + force AA — keeps the
rotated glyphs crisp even when the system falls back to the
slow text path. rotate(180deg) flips vertical-rl top-to-bottom
into bottom-to-top reading order. */
transform: rotate(180deg) translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
&:hover .ccb-file-name {
text-decoration: underline;
}
}
}
/* The file label is only useful in design mode — in code mode the active
file is already obvious from the tab bar / working-files list, so the
vertical label (and its preceding divider) would be redundant chrome
that steals vertical space in the CCB. */
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-file-divider,
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-group-file {
display: none;
}
/* Editor collapse: actual layout handled in JS via .content width/visibility */
.ccb-editor-collapsed .content {
overflow: hidden;
}
/* Visually move the sidebar's right-resizer to the right edge of the central
control bar, so the drag handle sits between the control bar and the editor
/ live-preview area. The Resizer keeps the handle at `left: sidebar.width`
internally (and keeps bumping it back after reposition), so a transform is
used here instead of overriding `left`. Hit-testing follows the transform.
When the sidebar is hidden the Resizer moves the handle out to become a
sibling of #sidebar inside .main-view — apply the same shift there. */
#sidebar > .horz-resizer,
.main-view > .horz-resizer {
transform: translateX(@central-control-bar-width);
}
/* In design mode the sidebar resizer doubles as the sidebar↔live-preview
splitter — hide the main-toolbar's own left-resizer so there aren't two
overlapping handles in the same region. */
.ccb-editor-collapsed #main-toolbar > .horz-resizer {
display: none;
}
/* Cap the sidebar in design mode so the live-preview panel always keeps at
least ~200px of its own. A percentage of the viewport (e.g. 70vw) became
too wide on large screens — the live preview would shrink to a useless
sliver. Enforcing this via CSS max-width stops the drag itself rather than
snapping back after the Resizer has already written a larger value, which
also avoids ResizeObserver loop warnings from rapid width writes. The
230px accounts for the 30px control bar plus a 200px LP minimum. */
.ccb-editor-collapsed #sidebar {
max-width: ~"calc(100vw - 230px)";
}