Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
 Path: blob/main/src/vs/workbench/browser/parts/media/paneCompositePart.css
3296 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
.monaco-workbench .pane-composite-part:not(.empty) > .title.has-composite-bar > .global-actions .actions-container::before {

7
	/* Separate global actions from view actions unless pane is empty */

8
	content: '';

9
	width: 1px;

10
	height: 16px;

11
	background-color: var(--vscode-disabledForeground);

12
	margin-right: 8px;

13
	margin-left: 4px;

14
}

15


16
.monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .actions-container {

17
	justify-content: flex-end;

18
}

19


20
.monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item,

21
.monaco-workbench .pane-composite-part > .title.has-composite-bar > .global-actions .monaco-action-bar .action-item {

22
	margin-right: 4px;

23
}

24


25
.monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item .action-label {

26
	outline-offset: -2px;

27
}

28


29
.monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-label {

30
	display: none;

31
}

32


33
.monaco-workbench .pane-composite-part.empty > .title.has-composite-bar > .title-label {

34
	border-bottom: none !important;

35
}

36


37
.monaco-workbench .pane-composite-part > .header-or-footer {

38
	padding-left: 4px;

39
	padding-right: 4px;

40
	background-color: var(--vscode-activityBarTop-background);

41
}

42


43
.monaco-workbench .pane-composite-part:not(.empty) > .header {

44
	border-bottom: 1px solid var(--vscode-sideBarActivityBarTop-border);

45
}

46


47
.monaco-workbench .pane-composite-part:not(.empty) > .footer {

48
	border-top: 1px solid var(--vscode-sideBarActivityBarTop-border);

49
}

50


51
.monaco-workbench .pane-composite-part > .title > .composite-bar-container,

52
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container {

53
	display: flex;

54
}

55


56
.monaco-workbench .pane-composite-part > .header-or-footer .composite-bar-container {

57
	flex: 1;

58
}

59


60
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more,

61
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more {

62
	display: flex;

63
	align-items: center;

64
	justify-content: center;

65
	margin-left: 0px;

66
	margin-right: 0px;

67
	color: inherit !important;

68
}

69


70
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar,

71
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar {

72
	line-height: 27px; /* matches panel titles in settings */

73
}

74


75
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,

76
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {

77
	text-transform: uppercase;

78
	padding-left: 10px;

79
	padding-right: 10px;

80
	font-size: 11px;

81
	padding-bottom: 2px; /* puts the bottom border down */

82
	padding-top: 2px;

83
	display: flex;

84
}

85


86
.monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon,

87
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon {

88
	height: 35px; /* matches height of composite container */

89
	padding: 0 3px;

90
}

91


92


93
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon),

94
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) {

95
	width: 16px;

96
	height: 16px;

97
}

98


99
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,

100
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,

101
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,

102
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {

103
	content: '';

104
	width: 2px;

105
	height: 24px;

106
	position: absolute;

107
	display: none;

108
	opacity: 0;

109
	background-color: var(--insert-border-color);

110
	transition-property: opacity;

111
	transition-duration: 0ms;

112
	transition-delay: 100ms;

113
}

114


115
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,

116
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after,

117
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,

118
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after {

119
	display: block;

120
}

121


122
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,

123
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before {

124
	left: 1px;

125
	margin-left: -2px;

126
}

127


128
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,

129
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {

130
	right: 1px;

131
	margin-right: -2px;

132
}

133


134


135
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,

136
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before {

137
	left: 2px;

138
	margin-left: -2px;

139
}

140


141
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,

142
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {

143
	right: 2px;

144
	margin-right: -2px;

145
}

146


147
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,

148
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,

149
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,

150
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after,

151
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,

152
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,

153
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,

154
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after {

155
	transition-delay: 0s;

156
}

157


158
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,

159
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,

160
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,

161
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-head  > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,

162
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,

163
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,

164
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,

165
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,

166
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-head  > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,

167
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {

168
	opacity: 1;

169
}

170


171
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,

172
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {

173
	margin-right: 0;

174
	padding: 2px;

175
}

176


177
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label:not(.codicon-more),

178
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label:not(.codicon-more) {

179
	border-radius: 0;

180
}

181


182
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,

183
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon:not(.codicon-more),

184
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,

185
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon:not(.codicon-more) {

186
	background: none !important;

187
}

188


189
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,

190
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label {

191
	margin-right: 0;

192
}

193


194
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge,

195
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge {

196
	margin-left: 2px;

197
	display: flex;

198
	align-items: center;

199
}

200


201
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge,

202
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge {

203
	margin-left: 0px;

204
}

205


206
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content,

207
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content {

208
	padding: 3px 5px;

209
	border-radius: 10px;

210
	font-size: 10px;

211
	min-width: 16px;

212
	height: 16px;

213
	line-height: 10px;

214
	font-weight: normal;

215
	text-align: center;

216
	display: inline-block;

217
	box-sizing: border-box;

218
	position: relative;

219
}

220


221
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .icon-badge .badge-content {

222
	padding: 3px;

223
}

224


225
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact,

226
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact {

227
	position: absolute;

228
	top: 0;

229
	bottom: 0;

230
	margin: auto;

231
	left: 0;

232
	overflow: hidden;

233
	width: 100%;

234
	height: 100%;

235
	z-index: 2;

236
}

237


238
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content,

239
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content {

240
	position: absolute;

241
	top: 17px;

242
	right: 0px;

243
	font-size: 9px;

244
	font-weight: 600;

245
	min-width: 13px;

246
	height: 13px;

247
	line-height: 13px;

248
	padding: 0 2px;

249
	border-radius: 16px;

250
	text-align: center;

251
}

252


253
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.compact-content .badge-content,

254
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.compact-content .badge-content {

255
	font-size: 8px;

256
	padding: 0 3px;

257
}

258


259
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before,

260
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {

261
	mask-size: 11px;

262
	-webkit-mask-size: 11px;

263
	top: 3px;

264
	left: 1px;

265
}

266


267
/* active item indicator */

268
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,

269
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {

270
	position: absolute;

271
	z-index: 1;

272
	bottom: 0;

273
	overflow: hidden;

274
	pointer-events: none;

275
	height: 100%;

276
}

277


278
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,

279
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {

280
	top: -4px;

281
	left: 10px;

282
	width: calc(100% - 20px);

283
}

284


285
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator,

286
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {

287
	top: 1px;

288
	left: 2px;

289
	width: calc(100% - 4px);

290
}

291


292
.monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon.checked,

293
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon.checked {

294
	background-color: var(--vscode-activityBarTop-activeBackground);

295
}

296


297
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,

298
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,

299
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,

300
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {

301
	content: "";

302
	position: absolute;

303
	z-index: 1;

304
	bottom: 2px;

305
	width: 100%;

306
	height: 0;

307
	border-top-width: 1px;

308
	border-top-style: solid;

309
}

310


311
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before,

312
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before {

313
	border-top-color: transparent !important; /* hides border on clicked state */

314
}

315


316
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,

317
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {

318
	border-top-color: var(--vscode-focusBorder) !important;

319
	border-top-width: 2px;

320
}

321


322
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,

323
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,

324
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,

325
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {

326
	outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;

327
}

328


329
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label,

330
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label {

331
	outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;

332
}

333


334
/** Empty Pane Message **/

335


336
.monaco-workbench .pane-composite-part .empty-pane-message-area {

337
	display: none;

338
	height: 100%;

339
	width: 100%;

340
}

341


342
.monaco-workbench .pane-composite-part.empty .empty-pane-message-area {

343
	display: flex;

344
	align-items: center;

345
	align-content: center;

346
	justify-content: center;

347
}

348


349
.monaco-workbench .pane-composite-part .empty-pane-message-area .empty-pane-message {

350
	margin: 12px;

351
	text-align: center;

352
}

353


354