CoCalc -- titlebarpart.css

GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
³²⁹⁶ views
1
/*---------------------------------------------------------------------------------------------
2
 *  Copyright (c) Microsoft Corporation. All rights reserved.
3
 *  Licensed under the MIT License. See License.txt in the project root for license information.
4
 *--------------------------------------------------------------------------------------------*/
5

6
/* Part Element */
7
.monaco-workbench .part.titlebar {
8
	display: flex;
9
	flex-direction: row;
10
}
11

12
.monaco-workbench.mac .part.titlebar {
13
	flex-direction: row-reverse;
14
}
15

16
/* Root Container */
17
.monaco-workbench .part.titlebar > .titlebar-container {
18
	box-sizing: border-box;
19
	overflow: hidden;
20
	flex-shrink: 1;
21
	flex-grow: 1;
22
	align-items: center;
23
	justify-content: space-between;
24
	user-select: none;
25
	-webkit-user-select: none;
26
	display: flex;
27
	height: 100%;
28
	width: 100%;
29
}
30

31
/* Account for zooming */
32
.monaco-workbench .part.titlebar > .titlebar-container.counter-zoom {
33
	zoom: calc(1.0 / var(--zoom-factor));
34
}
35

36
/* Platform specific root element */
37
.monaco-workbench.mac .part.titlebar > .titlebar-container {
38
	line-height: 22px;
39
}
40

41
.monaco-workbench.web .part.titlebar > .titlebar-container,
42
.monaco-workbench.windows .part.titlebar > .titlebar-container,
43
.monaco-workbench.linux .part.titlebar > .titlebar-container {
44
	line-height: 22px;
45
	justify-content: left;
46
}
47

48
.monaco-workbench.web.safari .part.titlebar,
49
.monaco-workbench.web.safari .part.titlebar > .titlebar-container {
50
	/* Must be scoped to safari due to #148851 */
51
	/* Is required in safari due to #149476 */
52
	overflow: visible;
53
}
54

55
/* Draggable region */
56
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-drag-region {
57
	top: 0;
58
	left: 0;
59
	display: block;
60
	position: absolute;
61
	width: 100%;
62
	height: 100%;
63
	-webkit-app-region: drag;
64
}
65

66
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left,
67
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center,
68
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right {
69
	display: flex;
70
	height: 100%;
71
	align-items: center;
72
}
73

74
.monaco-workbench .part.titlebar > .titlebar-container.has-center > .titlebar-left {
75
	order: 0;
76
	width: 20%;
77
	flex-grow: 2;
78
	justify-content: flex-start;
79
}
80

81
.monaco-workbench .part.titlebar > .titlebar-container.has-center > .titlebar-center {
82
	order: 1;
83
	width: 60%;
84
	max-width: fit-content;
85
	min-width: 0px;
86
	margin: 0 10px;
87
	/* flex-shrink: 10; */
88
	justify-content: center;
89
}
90

91
.monaco-workbench .part.titlebar > .titlebar-container.has-center > .titlebar-right {
92
	order: 2;
93
	width: 20%;
94
	min-width: min-content;
95
	flex-grow: 2;
96
	justify-content: flex-end;
97
}
98

99
.monaco-workbench .part.titlebar > .titlebar-container:not(.has-center) > .titlebar-left {
100
	flex: 1 1 0%;
101
	min-width: 0;
102
}
103

104
.monaco-workbench .part.titlebar > .titlebar-container:not(.has-center) > .titlebar-center {
105
	display: none;
106
}
107

108
.monaco-workbench .part.titlebar > .titlebar-container:not(.has-center) > .titlebar-right {
109
	flex: 0 0 auto;
110
	padding-left: 16px; /* ensure there is some space between title and controls */
111
}
112

113
/* Window title text */
114
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title {
115
	flex: 0 1 auto;
116
	font-size: 12px;
117
	overflow: hidden;
118
	white-space: nowrap;
119
	text-overflow: ellipsis;
120
	margin-left: auto;
121
	margin-right: auto;
122
}
123

124
.monaco-workbench.web .part.titlebar > .titlebar-container > .titlebar-center > .window-title,
125
.monaco-workbench.windows .part.titlebar > .titlebar-container > .titlebar-center > .window-title,
126
.monaco-workbench.linux .part.titlebar > .titlebar-container > .titlebar-center > .window-title {
127
	cursor: default;
128
}
129

130
.monaco-workbench.linux .part.titlebar > .titlebar-container > .titlebar-center > .window-title {
131
	font-size: inherit;
132
	/* see #55435 */
133
}
134

135
.monaco-workbench .part.titlebar > .titlebar-container .monaco-toolbar .actions-container {
136
	gap: 4px;
137
}
138

139
/* Window Title Menu */
140
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center {
141
	z-index: 2500;
142
	-webkit-app-region: no-drag;
143
}
144

145
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center.hide {
146
	visibility: hidden;
147
}
148

149
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label,
150
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item.monaco-dropdown-with-primary .action-label {
151
	color: var(--vscode-titleBar-activeForeground);
152
}
153

154
.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label,
155
.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item.monaco-dropdown-with-primary .action-label {
156
	color: var(--vscode-titleBar-inactiveForeground);
157
}
158

159
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
160
	color: inherit;
161
}
162

163
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center {
164
	display: flex;
165
	align-items: stretch;
166
	color: var(--vscode-commandCenter-foreground);
167
	background-color: var(--vscode-commandCenter-background);
168
	border: 1px solid var(--vscode-commandCenter-border);
169
	overflow: hidden;
170
	margin: 0 6px;
171
	border-top-left-radius: 6px;
172
	border-bottom-left-radius: 6px;
173
	border-top-right-radius: 6px;
174
	border-bottom-right-radius: 6px;
175
	height: 22px;
176
	width: 38vw;
177
	max-width: 600px;
178
}
179

180
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center .action-item.command-center-quick-pick {
181
	display: flex;
182
	justify-content: start;
183
	overflow: hidden;
184
	margin: auto;
185
	max-width: 600px;
186
}
187

188
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center .action-item.command-center-quick-pick .search-icon {
189
	font-size: 14px;
190
	opacity: .8;
191
	margin: auto 3px;
192
	color: var(--vscode-commandCenter-foreground);
193
}
194

195
.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center .action-item.command-center-quick-pick .search-icon {
196
	color: var(--vscode-titleBar-inactiveForeground);
197
}
198

199
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center .action-item.command-center-quick-pick .search-label {
200
	overflow: hidden;
201
	text-overflow: ellipsis;
202
}
203

204
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center.multiple {
205
	justify-content: flex-start;
206
	padding: 0 12px;
207
}
208

209
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center.multiple.active .action-label {
210
	background-color: inherit;
211
}
212

213
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:only-child {
214
	margin-left: 0; /* no margin if there is only the command center, without nav buttons */
215
}
216

217
.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center {
218
	color: var(--vscode-titleBar-inactiveForeground);
219
	border-color: var(--vscode-commandCenter-inactiveBorder) !important;
220
}
221

222
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:HOVER {
223
	color: var(--vscode-commandCenter-activeForeground);
224
	background-color: var(--vscode-commandCenter-activeBackground);
225
	border-color: var(--vscode-commandCenter-activeBorder);
226
}
227

228
/* Menubar */
229
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .menubar {
230
	/* move menubar above drag region as negative z-index on drag region cause greyscale AA */
231
	z-index: 2500;
232
	min-width: 36px;
233
	flex-wrap: nowrap;
234
	order: 2;
235
}
236

237
.monaco-workbench.web .part.titlebar > .titlebar-container > .titlebar-left > .menubar {
238
	margin-left: 4px;
239
}
240

241
.monaco-workbench .part.titlebar > .titlebar-container.counter-zoom .menubar .menubar-menu-button > .menubar-menu-items-holder.monaco-menu-container,
242
.monaco-workbench .part.titlebar > .titlebar-container.counter-zoom .monaco-toolbar .dropdown-action-container {
243
	zoom: var(--zoom-factor); /* helps to position the menu properly when counter zooming */
244
}
245

246
/* Resizer */
247
.monaco-workbench.windows .part.titlebar > .titlebar-container > .resizer,
248
.monaco-workbench.linux .part.titlebar > .titlebar-container > .resizer {
249
	-webkit-app-region: no-drag;
250
	position: absolute;
251
	top: 0;
252
	width: 100%;
253
	height: 4px;
254
}
255

256
.monaco-workbench.windows.fullscreen .part.titlebar > .titlebar-container > .resizer,
257
.monaco-workbench.linux.fullscreen .part.titlebar > .titlebar-container > .resizer {
258
	display: none;
259
}
260

261
/* App Icon */
262
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon {
263
	width: 35px;
264
	height: 100%;
265
	position: relative;
266
	z-index: 2500;
267
	flex-shrink: 0;
268
	order: 1;
269
}
270

271
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon:not(.codicon) {
272
	background-image: url('../../../media/code-icon.svg');
273
	background-repeat: no-repeat;
274
	background-position: center center;
275
	background-size: 16px;
276
}
277

278
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon.codicon {
279
	line-height: 30px;
280
}
281

282
.monaco-workbench.fullscreen .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon {
283
	display: none;
284
}
285

286
/* Window Controls Container */
287
.monaco-workbench .part.titlebar .window-controls-container {
288
	display: flex;
289
	flex-grow: 0;
290
	flex-shrink: 0;
291
	text-align: center;
292
	z-index: 3000;
293
	-webkit-app-region: no-drag;
294
	width: 0px;
295
	height: 100%;
296
}
297

298
.monaco-workbench.fullscreen .part.titlebar .window-controls-container {
299
	display: none;
300
	background-color: transparent;
301
}
302

303
/* Window Controls Container Web: Apply WCO environment variables (https://developer.mozilla.org/en-US/docs/Web/CSS/env#titlebar-area-x) */
304
.monaco-workbench.web .part.titlebar .titlebar-right .window-controls-container {
305
	width: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px));
306
	height: env(titlebar-area-height, 35px);
307
}
308

309
.monaco-workbench.web .part.titlebar .titlebar-left .window-controls-container {
310
	width: env(titlebar-area-x, 0px);
311
	height: env(titlebar-area-height, 35px);
312
}
313

314
.monaco-workbench.web.mac .part.titlebar .titlebar-left .window-controls-container {
315
	order: 0;
316
}
317

318
.monaco-workbench.web.mac .part.titlebar .titlebar-right .window-controls-container {
319
	order: 1;
320
}
321

322
/* Window Controls Container Desktop: apply zoom friendly size */
323
.monaco-workbench:not(.web):not(.mac) .part.titlebar .window-controls-container {
324
	width: calc(138px / var(--zoom-factor, 1));
325
}
326

327
.monaco-workbench:not(.web):not(.mac) .part.titlebar .titlebar-container.counter-zoom .window-controls-container {
328
	width: 138px;
329
}
330

331
.monaco-workbench.linux:not(.web) .part.titlebar .window-controls-container.wco-enabled {
332
	width: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px));
333
}
334

335
.monaco-workbench:not(.web):not(.mac) .part.titlebar .titlebar-container:not(.counter-zoom) .window-controls-container * {
336
	zoom: calc(1 / var(--zoom-factor, 1));
337
}
338

339
.monaco-workbench:not(.web).mac .part.titlebar .window-controls-container {
340
	width: 70px;
341
}
342

343
/* Window Control Icons */
344
.monaco-workbench .part.titlebar .window-controls-container > .window-icon {
345
	display: flex;
346
	justify-content: center;
347
	align-items: center;
348
	height: 100%;
349
	width: 46px;
350
	font-size: 16px;
351
	color: var(--vscode-titleBar-activeForeground);
352
}
353

354
.monaco-workbench .part.titlebar.inactive .window-controls-container > .window-icon {
355
	color: var(--vscode-titleBar-inactiveForeground);
356
}
357

358
.monaco-workbench .part.titlebar .window-controls-container > .window-icon::before {
359
	height: 16px;
360
	line-height: 16px;
361
}
362

363
.monaco-workbench .part.titlebar .window-controls-container > .window-icon:hover {
364
	background-color: rgba(255, 255, 255, 0.1);
365
}
366

367
.monaco-workbench .part.titlebar.light .window-controls-container > .window-icon:hover {
368
	background-color: rgba(0, 0, 0, 0.1);
369
}
370

371
.monaco-workbench .part.titlebar .window-controls-container > .window-icon.window-close:hover {
372
	background-color: rgba(232, 17, 35, 0.9);
373
}
374

375
.monaco-workbench .part.titlebar .window-controls-container .window-icon.window-close:hover {
376
	color: white;
377
}
378

379
/* Action Tool Bar Controls */
380
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container {
381
	display: none;
382
	padding-right: 4px;
383
	flex-grow: 0;
384
	flex-shrink: 0;
385
	text-align: center;
386
	position: relative;
387
	z-index: 2500;
388
	-webkit-app-region: no-drag;
389
	height: 100%;
390
}
391

392
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container {
393
	margin-left: auto;
394
}
395

396
.monaco-workbench.mac:not(.web) .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container {
397
	right: 8px;
398
}
399

400
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container:not(.has-no-actions) {
401
	display: flex;
402
	justify-content: center;
403
}
404

405
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .codicon {
406
	color: inherit;
407
}
408

409
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item {
410
	display: flex;
411
}
412

413
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .badge {
414
	margin-left: 8px;
415
	display: flex;
416
	align-items: center;
417
}
418

419
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge {
420
	margin-left: 0px;
421
}
422

423
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .badge .badge-content {
424
	padding: 3px 5px;
425
	border-radius: 11px;
426
	font-size: 9px;
427
	min-width: 11px;
428
	height: 16px;
429
	line-height: 11px;
430
	font-weight: normal;
431
	text-align: center;
432
	display: inline-block;
433
	box-sizing: border-box;
434
	position: relative;
435
}
436

437
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge.compact {
438
	position: absolute;
439
	top: 0;
440
	bottom: 0;
441
	margin: auto;
442
	left: 0;
443
	overflow: hidden;
444
	width: 100%;
445
	height: 100%;
446
	z-index: 2;
447
}
448

449
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge.compact .badge-content::before {
450
	mask-size: 12px;
451
	-webkit-mask-size: 12px;
452
	top: 2px;
453
}
454

455
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge.compact .badge-content {
456
	position: absolute;
457
	top: 10px;
458
	right: 0px;
459
	font-size: 9px;
460
	font-weight: 600;
461
	min-width: 12px;
462
	height: 12px;
463
	line-height: 12px;
464
	padding: 0 2px;
465
	border-radius: 16px;
466
	text-align: center;
467
}
468

469
Product

Resources

Company
