Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/browser/parts/views/media/views.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
/* File icons in trees */
7
8
.file-icon-themable-tree.align-icons-and-twisties .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
9
.file-icon-themable-tree .align-icon-with-twisty .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
10
.file-icon-themable-tree.hide-arrows .monaco-tl-twistie:not(.force-twistie),
11
.file-icon-themable-tree .monaco-tl-twistie.force-no-twistie {
12
background-image: none !important;
13
width: 0 !important;
14
padding-right: 0 !important;
15
visibility: hidden;
16
}
17
18
/* Misc */
19
20
.file-icon-themable-tree .monaco-list-row .content .monaco-highlighted-label .highlight,
21
.pane-body .monaco-tl-contents .monaco-highlighted-label .highlight {
22
color: unset !important;
23
background-color: var(--vscode-list-filterMatchBackground);
24
outline: 1px dotted var(--vscode-list-filterMatchBorder);
25
outline-offset: -1px;
26
}
27
28
.monaco-workbench .tree-explorer-viewlet-tree-view {
29
height: 100%;
30
}
31
32
.monaco-workbench .tree-explorer-viewlet-tree-view .message {
33
display: flex;
34
padding: 4px 12px 4px 18px;
35
user-select: text;
36
-webkit-user-select: text;
37
}
38
39
.monaco-workbench .tree-explorer-viewlet-tree-view .message p {
40
margin-top: 0px;
41
margin-bottom: 0px;
42
padding-bottom: 4px;
43
}
44
45
.monaco-workbench .tree-explorer-viewlet-tree-view .message ul {
46
padding-left: 24px;
47
}
48
49
.monaco-workbench .tree-explorer-viewlet-tree-view .message p > a {
50
color: var(--vscode-textLink-foreground);
51
}
52
53
.monaco-workbench .tree-explorer-viewlet-tree-view .message .rendered-message {
54
width: 100%;
55
}
56
57
.monaco-workbench .tree-explorer-viewlet-tree-view .message .button-container {
58
width: 100%;
59
max-width: 300px;
60
margin: auto;
61
}
62
63
.monaco-workbench .tree-explorer-viewlet-tree-view .message .button-container:not(:last-child) {
64
padding-bottom: 8px;
65
}
66
.monaco-workbench .tree-explorer-viewlet-tree-view .message.hide {
67
display: none;
68
}
69
70
.monaco-workbench .tree-explorer-viewlet-tree-view .customview-tree {
71
height: 100%;
72
}
73
74
.monaco-workbench .tree-explorer-viewlet-tree-view .customview-tree.hide {
75
display: none;
76
}
77
78
.monaco-workbench .pane > .pane-body > .welcome-view {
79
width: 100%;
80
height: 100%;
81
box-sizing: border-box;
82
display: flex;
83
flex-direction: column;
84
}
85
86
.monaco-workbench .pane > .pane-body:not(.welcome) > .welcome-view,
87
.monaco-workbench .pane > .pane-body.welcome > :not(.welcome-view) {
88
display: none;
89
}
90
91
.monaco-workbench .pane > .pane-body .welcome-view-content {
92
display: flex;
93
flex-direction: column;
94
padding: 0 20px 1em 20px;
95
box-sizing: border-box;
96
align-items: center;
97
}
98
99
.monaco-workbench .pane > .pane-body .welcome-view-content > .button-container {
100
width: 100%;
101
max-width: 300px;
102
}
103
104
.monaco-workbench:not(.reduce-motion) .pane > .pane-body .welcome-view-content > .button-container {
105
transition: 0.2s max-width ease-out;
106
}
107
108
.monaco-workbench .pane > .pane-body .welcome-view-content.wide > .button-container {
109
max-width: 100%;
110
}
111
112
.monaco-workbench .pane > .pane-body .welcome-view-content > .button-container > .monaco-button {
113
max-width: 300px;
114
}
115
116
.monaco-workbench .pane > .pane-body .welcome-view-content > p {
117
width: 100%;
118
}
119
120
.monaco-workbench .pane > .pane-body .welcome-view-content > * {
121
margin-block-start: 1em;
122
margin-block-end: 0;
123
margin-inline-start: 0px;
124
margin-inline-end: 0px;
125
}
126
127
.monaco-workbench .pane > .pane-body .welcome-view-content > p .codicon[class*='codicon-'] {
128
font-size: 13px;
129
line-height: 1.4em;
130
vertical-align: bottom;
131
}
132
133
.customview-tree .monaco-list-row .monaco-tl-contents.align-icon-with-twisty::before {
134
display: none;
135
}
136
137
.customview-tree .monaco-list-row .monaco-tl-contents:not(.align-icon-with-twisty)::before {
138
display: inline-block;
139
}
140
141
.customview-tree .monaco-list .monaco-list-row {
142
padding-right: 12px;
143
padding-left: 0px;
144
}
145
146
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item {
147
display: flex;
148
height: 22px;
149
line-height: 22px;
150
flex: 1;
151
text-overflow: ellipsis;
152
overflow: hidden;
153
flex-wrap: nowrap;
154
padding-left: 3px;
155
}
156
157
.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item .custom-view-tree-node-item-checkbox {
158
background-color: var(--vscode-checkbox-selectBackground);
159
border: 1px solid var(--vscode-checkbox-selectBorder);
160
}
161
162
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-checkbox {
163
width: 16px;
164
height: 16px;
165
margin: 3px 6px 3px 0px;
166
padding: 0px;
167
border: 1px solid var(--vscode-checkbox-border);
168
opacity: 1;
169
background-color: var(--vscode-checkbox-background);
170
}
171
172
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-checkbox.codicon {
173
font-size: 13px;
174
line-height: 15px;
175
}
176
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .monaco-inputbox {
177
line-height: normal;
178
flex: 1;
179
}
180
181
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel {
182
flex: 1;
183
text-overflow: ellipsis;
184
overflow: hidden;
185
}
186
187
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .monaco-icon-label-container::after {
188
content: '';
189
display: block;
190
}
191
192
.timeline-tree-view .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon,
193
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon {
194
background-size: 16px;
195
background-position: left center;
196
background-repeat: no-repeat;
197
padding-right: 6px;
198
width: 16px;
199
height: 22px;
200
display: flex;
201
align-items: center;
202
justify-content: center;
203
-webkit-font-smoothing: antialiased;
204
-moz-osx-font-smoothing: grayscale;
205
}
206
207
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon.disabled {
208
opacity: 0.6;
209
}
210
/* makes spinning icons square */
211
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon.codicon.codicon-modifier-spin {
212
padding-left: 6px;
213
margin-left: -6px;
214
}
215
216
.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .custom-view-tree-node-item-icon.codicon {
217
color: currentColor !important;
218
}
219
220
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel .monaco-icon-label-container > .monaco-icon-name-container {
221
flex: 1;
222
}
223
224
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel::after {
225
padding-right: 0px;
226
margin-right: 4px;
227
}
228
229
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .actions {
230
display: none;
231
}
232
233
.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .actions .action-label {
234
padding: 2px;
235
}
236
237
.customview-tree .monaco-list .monaco-list-row:hover .custom-view-tree-node-item .actions,
238
.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item .actions,
239
.customview-tree .monaco-list .monaco-list-row.focused .custom-view-tree-node-item .actions {
240
display: block;
241
}
242
243
/* filter view pane */
244
245
.monaco-workbench .auxiliarybar.pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item.viewpane-filter-container {
246
max-width: inherit;
247
}
248
249
.viewpane-filter-container {
250
cursor: default;
251
display: flex;
252
}
253
254
.viewpane-filter-container.grow {
255
flex: 1;
256
}
257
258
.viewpane-filter-container > .viewpane-filter {
259
display: flex;
260
align-items: center;
261
flex: 1;
262
position: relative;
263
}
264
265
.viewpane-filter-container > .viewpane-filter .monaco-inputbox {
266
height: 24px;
267
font-size: 12px;
268
flex: 1;
269
}
270
271
.pane-header .viewpane-filter-container > .viewpane-filter .monaco-inputbox .monaco-inputbox {
272
height: 20px;
273
line-height: 18px;
274
}
275
276
.monaco-workbench.vs .viewpane-filter-container > .viewpane-filter .monaco-inputbox {
277
height: 25px;
278
}
279
280
.viewpane-filter-container > .viewpane-filter > .viewpane-filter-controls {
281
position: absolute;
282
top: 0px;
283
bottom: 0;
284
right: 0px;
285
display: flex;
286
align-items: center;
287
}
288
289
.viewpane-filter-container > .viewpane-filter > .viewpane-filter-controls > .viewpane-filter-badge {
290
margin: 4px 2px 4px 0px;
291
padding: 0px 8px;
292
border-radius: 2px;
293
}
294
295
.viewpane-filter > .viewpane-filter-controls > .viewpane-filter-badge.hidden,
296
.viewpane-filter.small > .viewpane-filter-controls > .viewpane-filter-badge {
297
display: none;
298
}
299
300
.panel > .title .monaco-action-bar .action-item.viewpane-filter-container {
301
max-width: 400px;
302
min-width: 150px;
303
margin-right: 10px;
304
}
305
306
.pane-body .viewpane-filter-container:not(:empty) {
307
flex: 1;
308
margin: 10px 20px;
309
height: initial;
310
}
311
312
.pane-body .viewpane-filter-container > .viewpane-filter > .viewpane-filter-controls .monaco-action-bar .action-item {
313
margin-right: 4px;
314
}
315
316
.viewpane-filter > .viewpane-filter-controls .monaco-action-bar .action-label.codicon.codicon-filter.checked {
317
border-color: var(--vscode-inputOption-activeBorder);
318
color: var(--vscode-inputOption-activeForeground);
319
background-color: var(--vscode-inputOption-activeBackground);
320
}
321
322