Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.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
.extensions-viewlet {
7
position: relative;
8
height: 100%;
9
}
10
11
.extensions-viewlet .hidden {
12
display: none !important;
13
visibility: hidden;
14
}
15
16
.extensions-viewlet > .overlay {
17
position: absolute;
18
top: 0;
19
right: 0;
20
bottom: 0;
21
left: 0;
22
z-index: 2;
23
}
24
25
.extensions-viewlet > .header {
26
height: 41px;
27
box-sizing: border-box;
28
padding: 5px 12px 6px 20px;
29
}
30
31
.extensions-viewlet > .header > .extensions-search-container {
32
position: relative;
33
}
34
35
.extensions-viewlet > .header > .extensions-search-container > .search-box {
36
width: 100%;
37
height: 28px;
38
line-height: 18px;
39
box-sizing: border-box;
40
padding: 4px;
41
border: 1px solid transparent;
42
-webkit-appearance: textfield;
43
-moz-appearance: textfield;
44
}
45
46
.extensions-viewlet > .header > .extensions-search-container > .extensions-search-actions-container {
47
display: flex;
48
align-items: center;
49
position: absolute;
50
top: 0;
51
right: 0;
52
height: 100%;
53
}
54
55
.extensions-viewlet > .header > .notification-container {
56
margin-top: 10px;
57
display: flex;
58
justify-content: space-between;
59
}
60
61
.extensions-viewlet > .header .notification-container .message-container {
62
padding-left: 4px;
63
}
64
65
.extensions-viewlet > .header .notification-container .message-container .codicon {
66
vertical-align: text-top;
67
padding-right: 5px;
68
}
69
70
.extensions-viewlet .notification-container .message-text-action {
71
cursor: pointer;
72
margin-left: 5px;
73
color: var(--vscode-textLink-foreground);
74
text-decoration: underline;
75
}
76
77
.extensions-viewlet .notification-container .message-text-action:hover,
78
.extensions-viewlet .notification-container .message-text-action:active {
79
color: var(--vscode-textLink-activeForeground);
80
}
81
82
.extensions-viewlet .notification-container .message-action {
83
cursor: pointer;
84
padding: 2px;
85
border-radius: 5px;
86
height: 16px;
87
}
88
89
.extensions-viewlet .notification-container .message-action:hover {
90
background-color: var(--vscode-toolbar-hoverBackground);
91
outline: 1px dashed var(--vscode-toolbar-hoverOutline);
92
}
93
94
.extensions-viewlet > .extensions {
95
height: calc(100% - 41px);
96
}
97
98
.extensions-viewlet > .extensions .extension-list-item .monaco-action-bar,
99
.extensions-viewlet > .extensions .extension-view-header .monaco-action-bar {
100
margin-right: 4px;
101
}
102
103
.extensions-viewlet > .extensions .extension-view-header .count-badge-wrapper {
104
margin-right: 12px;
105
}
106
107
.extensions-viewlet > .extensions .extension-view-header .monaco-action-bar .action-item > .action-label.icon.codicon {
108
vertical-align: middle;
109
line-height: 22px;
110
}
111
112
.extensions-viewlet > .extensions .extension-view-header .monaco-action-bar .action-item.disabled {
113
display: none;
114
}
115
116
.extensions-viewlet > .extensions .panel-header {
117
padding-right: 12px;
118
}
119
120
.extensions-viewlet > .extensions .panel-header > .title {
121
flex: 1;
122
}
123
124
.extensions-viewlet > .extensions .panel-header > .actions.show {
125
flex: inherit;
126
}
127
128
.extensions-viewlet > .extensions .message-container {
129
padding: 5px 9px 5px 20px;
130
cursor: default;
131
display: flex;
132
}
133
134
.extensions-viewlet > .extensions .message-container .message {
135
padding-left: 5px;
136
}
137
138
.extensions-viewlet > .extensions .message-container .severity-icon {
139
flex-shrink: 0;
140
}
141
142
.extensions-viewlet > .extensions .extension-list-item {
143
position: absolute;
144
}
145
146
.extensions-viewlet > .extensions .extension-list-item.loading {
147
background: url('loading.svg') center center no-repeat;
148
}
149
150
.monaco-workbench.vs-dark .extensions-viewlet > .extensions .extension-list-item.loading {
151
background-image: url('loading-dark.svg');
152
}
153
154
.monaco-workbench.hc-black .extensions-viewlet > .extensions .extension-list-item.loading {
155
background-image: url('loading-hc.svg');
156
}
157
158
.extensions-viewlet > .extensions .extension-list-item.loading > .icon-container {
159
display: none;
160
}
161
.extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container {
162
display: flex;
163
align-items: flex-start;
164
padding-top: 10px;
165
}
166
.extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container > .extension-icon .icon {
167
width: 24px;
168
height: 24px;
169
padding-right: 8px;
170
}
171
.extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container > .extension-icon .codicon {
172
font-size: 24px !important;
173
padding-right: 8px;
174
}
175
176
.extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container .extension-badge,
177
.extensions-viewlet.mini > .extensions .extension-list-item > .icon-container,
178
.extensions-viewlet.mini > .extensions .extension-list-item > .details > .header-container > .header > .ratings,
179
.extensions-viewlet.mini > .extensions .extension-bookmark-container {
180
display: none;
181
}
182
183
.extensions-viewlet.narrow > .extensions .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action {
184
max-width: 100px;
185
}
186
187
.monaco-workbench.vs .extensions-viewlet > .extensions .monaco-list-row.disabled:not(.selected) > .extension-list-item > .icon-container > .extension-icon .icon,
188
.monaco-workbench.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled:not(.selected) > .extension-list-item > .icon-container > .extension-icon .icon,
189
.monaco-workbench.vs .extensions-viewlet > .extensions .monaco-list-row.disabled:not(.selected) > .extension-list-item > .details > .header-container .codicon,
190
.monaco-workbench.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled:not(.selected) > .extension-list-item > .details > .header-container .codicon {
191
opacity: 0.5;
192
}
193
194
.extensions-viewlet .codicon-error::before {
195
color: var(--vscode-editorError-foreground);
196
}
197
198
.extensions-viewlet .codicon-warning::before {
199
color: var(--vscode-editorWarning-foreground);
200
}
201
202
.extensions-viewlet .codicon-info::before {
203
color: var(--vscode-editorInfo-foreground);
204
}
205
206