@finos/legend-vscode-extension-dependencies 1.0.2 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1086,12 +1086,6 @@
1086
1086
  display: inline-block;
1087
1087
  }
1088
1088
 
1089
- .monaco-hover-content {
1090
- padding-right: 2px;
1091
- padding-bottom: 2px;
1092
- box-sizing: border-box;
1093
- }
1094
-
1095
1089
  .monaco-hover-content .action-container a {
1096
1090
  -webkit-user-select: none;
1097
1091
  user-select: none;
@@ -2104,149 +2098,174 @@
2104
2098
  * Licensed under the MIT License. See License.txt in the project root for license information.
2105
2099
  *--------------------------------------------------------------------------------------------*/
2106
2100
 
2107
- :root {
2108
- --vscode-sash-size: 4px;
2109
- --vscode-sash-hover-size: 4px;
2101
+ .monaco-text-button {
2102
+ box-sizing: border-box;
2103
+ display: flex;
2104
+ width: 100%;
2105
+ padding: 4px;
2106
+ border-radius: 2px;
2107
+ text-align: center;
2108
+ cursor: pointer;
2109
+ justify-content: center;
2110
+ align-items: center;
2111
+ border: 1px solid var(--vscode-button-border, transparent);
2112
+ line-height: 18px;
2110
2113
  }
2111
2114
 
2112
- .monaco-sash {
2113
- position: absolute;
2114
- z-index: 35;
2115
- touch-action: none;
2115
+ .monaco-text-button:focus {
2116
+ outline-offset: 2px !important;
2116
2117
  }
2117
2118
 
2118
- .monaco-sash.disabled {
2119
- pointer-events: none;
2119
+ .monaco-text-button:hover {
2120
+ text-decoration: none !important;
2120
2121
  }
2121
2122
 
2122
- .monaco-sash.mac.vertical {
2123
- cursor: col-resize;
2123
+ .monaco-button.disabled:focus,
2124
+ .monaco-button.disabled {
2125
+ opacity: 0.4 !important;
2126
+ cursor: default;
2124
2127
  }
2125
2128
 
2126
- .monaco-sash.vertical.minimum {
2127
- cursor: e-resize;
2129
+ .monaco-text-button .codicon {
2130
+ margin: 0 0.2em;
2131
+ color: inherit !important;
2128
2132
  }
2129
2133
 
2130
- .monaco-sash.vertical.maximum {
2131
- cursor: w-resize;
2134
+ .monaco-text-button.monaco-text-button-with-short-label {
2135
+ flex-direction: row;
2136
+ flex-wrap: wrap;
2137
+ padding: 0 4px;
2138
+ overflow: hidden;
2139
+ height: 28px;
2132
2140
  }
2133
2141
 
2134
- .monaco-sash.mac.horizontal {
2135
- cursor: row-resize;
2142
+ .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
2143
+ flex-basis: 100%;
2136
2144
  }
2137
2145
 
2138
- .monaco-sash.horizontal.minimum {
2139
- cursor: s-resize;
2146
+ .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
2147
+ flex-grow: 1;
2148
+ width: 0;
2149
+ overflow: hidden;
2140
2150
  }
2141
2151
 
2142
- .monaco-sash.horizontal.maximum {
2143
- cursor: n-resize;
2152
+ .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
2153
+ .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
2154
+ display: flex;
2155
+ justify-content: center;
2156
+ align-items: center;
2157
+ font-weight: normal;
2158
+ font-style: inherit;
2159
+ padding: 4px 0;
2144
2160
  }
2145
2161
 
2146
- .monaco-sash.disabled {
2147
- cursor: default !important;
2148
- pointer-events: none !important;
2162
+ .monaco-button-dropdown {
2163
+ display: flex;
2164
+ cursor: pointer;
2149
2165
  }
2150
2166
 
2151
- .monaco-sash.vertical {
2152
- cursor: ew-resize;
2153
- top: 0;
2154
- width: var(--vscode-sash-size);
2155
- height: 100%;
2167
+ .monaco-button-dropdown.disabled {
2168
+ cursor: default;
2156
2169
  }
2157
2170
 
2158
- .monaco-sash.horizontal {
2159
- cursor: ns-resize;
2160
- left: 0;
2161
- width: 100%;
2162
- height: var(--vscode-sash-size);
2171
+ .monaco-button-dropdown > .monaco-button:focus {
2172
+ outline-offset: -1px !important;
2163
2173
  }
2164
2174
 
2165
- .monaco-sash:not(.disabled) > .orthogonal-drag-handle {
2166
- content: " ";
2167
- height: calc(var(--vscode-sash-size) * 2);
2168
- width: calc(var(--vscode-sash-size) * 2);
2169
- z-index: 100;
2170
- display: block;
2171
- cursor: all-scroll;
2172
- position: absolute;
2175
+ .monaco-button-dropdown.disabled > .monaco-button.disabled,
2176
+ .monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
2177
+ .monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
2178
+ opacity: 0.4 !important;
2173
2179
  }
2174
2180
 
2175
- .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
2176
- > .orthogonal-drag-handle.start,
2177
- .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
2178
- > .orthogonal-drag-handle.end {
2179
- cursor: nwse-resize;
2181
+ .monaco-button-dropdown > .monaco-button.monaco-text-button {
2182
+ border-right-width: 0 !important;
2180
2183
  }
2181
2184
 
2182
- .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
2183
- > .orthogonal-drag-handle.end,
2184
- .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
2185
- > .orthogonal-drag-handle.start {
2186
- cursor: nesw-resize;
2185
+ .monaco-button-dropdown .monaco-button-dropdown-separator {
2186
+ padding: 4px 0;
2187
+ cursor: default;
2187
2188
  }
2188
2189
 
2189
- .monaco-sash.vertical > .orthogonal-drag-handle.start {
2190
- left: calc(var(--vscode-sash-size) * -0.5);
2191
- top: calc(var(--vscode-sash-size) * -1);
2190
+ .monaco-button-dropdown .monaco-button-dropdown-separator > div {
2191
+ height: 100%;
2192
+ width: 1px;
2192
2193
  }
2193
- .monaco-sash.vertical > .orthogonal-drag-handle.end {
2194
- left: calc(var(--vscode-sash-size) * -0.5);
2195
- bottom: calc(var(--vscode-sash-size) * -1);
2194
+
2195
+ .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
2196
+ border: 1px solid var(--vscode-button-border, transparent);
2197
+ border-left-width: 0 !important;
2198
+ border-radius: 0 2px 2px 0;
2199
+ display: flex;
2200
+ align-items: center;
2196
2201
  }
2197
- .monaco-sash.horizontal > .orthogonal-drag-handle.start {
2198
- top: calc(var(--vscode-sash-size) * -0.5);
2199
- left: calc(var(--vscode-sash-size) * -1);
2202
+
2203
+ .monaco-button-dropdown > .monaco-button.monaco-text-button {
2204
+ border-radius: 2px 0 0 2px;
2200
2205
  }
2201
- .monaco-sash.horizontal > .orthogonal-drag-handle.end {
2202
- top: calc(var(--vscode-sash-size) * -0.5);
2203
- right: calc(var(--vscode-sash-size) * -1);
2206
+
2207
+ .monaco-description-button {
2208
+ display: flex;
2209
+ flex-direction: column;
2210
+ align-items: center;
2211
+ margin: 4px 5px; /* allows button focus outline to be visible */
2204
2212
  }
2205
2213
 
2206
- .monaco-sash:before {
2207
- content: '';
2208
- pointer-events: none;
2209
- position: absolute;
2210
- width: 100%;
2211
- height: 100%;
2212
- background: transparent;
2214
+ .monaco-description-button .monaco-button-description {
2215
+ font-style: italic;
2216
+ font-size: 11px;
2217
+ padding: 4px 20px;
2213
2218
  }
2214
2219
 
2215
- .monaco-workbench:not(.reduce-motion) .monaco-sash:before {
2216
- transition: background-color 0.1s ease-out;
2220
+ .monaco-description-button .monaco-button-label,
2221
+ .monaco-description-button .monaco-button-description {
2222
+ display: flex;
2223
+ justify-content: center;
2224
+ align-items: center;
2217
2225
  }
2218
2226
 
2219
- .monaco-sash.hover:before,
2220
- .monaco-sash.active:before {
2221
- background: var(--vscode-sash-hoverBorder);
2227
+ .monaco-description-button .monaco-button-label > .codicon,
2228
+ .monaco-description-button .monaco-button-description > .codicon {
2229
+ margin: 0 0.2em;
2230
+ color: inherit !important;
2222
2231
  }
2223
2232
 
2224
- .monaco-sash.vertical:before {
2225
- width: var(--vscode-sash-hover-size);
2226
- left: calc(50% - (var(--vscode-sash-hover-size) / 2));
2233
+ /* default color styles - based on CSS variables */
2234
+
2235
+ .monaco-button.default-colors,
2236
+ .monaco-button-dropdown.default-colors > .monaco-button{
2237
+ color: var(--vscode-button-foreground);
2238
+ background-color: var(--vscode-button-background);
2227
2239
  }
2228
2240
 
2229
- .monaco-sash.horizontal:before {
2230
- height: var(--vscode-sash-hover-size);
2231
- top: calc(50% - (var(--vscode-sash-hover-size) / 2));
2241
+ .monaco-button.default-colors:hover,
2242
+ .monaco-button-dropdown.default-colors > .monaco-button:hover {
2243
+ background-color: var(--vscode-button-hoverBackground);
2232
2244
  }
2233
2245
 
2234
- .pointer-events-disabled {
2235
- pointer-events: none !important;
2246
+ .monaco-button.default-colors.secondary,
2247
+ .monaco-button-dropdown.default-colors > .monaco-button.secondary {
2248
+ color: var(--vscode-button-secondaryForeground);
2249
+ background-color: var(--vscode-button-secondaryBackground);
2236
2250
  }
2237
2251
 
2238
- /** Debug **/
2252
+ .monaco-button.default-colors.secondary:hover,
2253
+ .monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
2254
+ background-color: var(--vscode-button-secondaryHoverBackground);
2255
+ }
2239
2256
 
2240
- .monaco-sash.debug {
2241
- background: cyan;
2257
+ .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
2258
+ background-color: var(--vscode-button-background);
2259
+ border-top: 1px solid var(--vscode-button-border);
2260
+ border-bottom: 1px solid var(--vscode-button-border);
2242
2261
  }
2243
2262
 
2244
- .monaco-sash.debug.disabled {
2245
- background: rgba(0, 255, 255, 0.2);
2263
+ .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
2264
+ background-color: var(--vscode-button-secondaryBackground);
2246
2265
  }
2247
2266
 
2248
- .monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
2249
- background: red;
2267
+ .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
2268
+ background-color: var(--vscode-button-separator);
2250
2269
  }
2251
2270
 
2252
2271
  /*---------------------------------------------------------------------------------------------
@@ -2254,129 +2273,87 @@
2254
2273
  * Licensed under the MIT License. See License.txt in the project root for license information.
2255
2274
  *--------------------------------------------------------------------------------------------*/
2256
2275
 
2257
- .monaco-split-view2 {
2258
- position: relative;
2259
- width: 100%;
2260
- height: 100%;
2261
- }
2262
-
2263
- .monaco-split-view2 > .sash-container {
2264
- position: absolute;
2265
- width: 100%;
2266
- height: 100%;
2267
- pointer-events: none;
2276
+ .monaco-count-badge {
2277
+ padding: 3px 6px;
2278
+ border-radius: 11px;
2279
+ font-size: 11px;
2280
+ min-width: 18px;
2281
+ min-height: 18px;
2282
+ line-height: 11px;
2283
+ font-weight: normal;
2284
+ text-align: center;
2285
+ display: inline-block;
2286
+ box-sizing: border-box;
2268
2287
  }
2269
2288
 
2270
- .monaco-split-view2 > .sash-container > .monaco-sash {
2271
- pointer-events: initial;
2289
+ .monaco-count-badge.long {
2290
+ padding: 2px 3px;
2291
+ border-radius: 2px;
2292
+ min-height: auto;
2293
+ line-height: normal;
2272
2294
  }
2273
2295
 
2274
- .monaco-split-view2 > .monaco-scrollable-element {
2275
- width: 100%;
2276
- height: 100%;
2277
- }
2296
+ /*---------------------------------------------------------------------------------------------
2297
+ * Copyright (c) Microsoft Corporation. All rights reserved.
2298
+ * Licensed under the MIT License. See License.txt in the project root for license information.
2299
+ *--------------------------------------------------------------------------------------------*/
2278
2300
 
2279
- .monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
2301
+ .monaco-progress-container {
2280
2302
  width: 100%;
2281
- height: 100%;
2282
- white-space: nowrap;
2283
- position: relative;
2303
+ height: 2px;
2304
+ overflow: hidden; /* keep progress bit in bounds */
2284
2305
  }
2285
2306
 
2286
- .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
2287
- white-space: initial;
2307
+ .monaco-progress-container .progress-bit {
2308
+ width: 2%;
2309
+ height: 2px;
2288
2310
  position: absolute;
2289
- }
2290
-
2291
- .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
2311
+ left: 0;
2292
2312
  display: none;
2293
2313
  }
2294
2314
 
2295
- .monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
2296
- width: 100%;
2297
- }
2298
-
2299
- .monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
2300
- height: 100%;
2315
+ .monaco-progress-container.active .progress-bit {
2316
+ display: inherit;
2301
2317
  }
2302
2318
 
2303
- .monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2304
- content: ' ';
2305
- position: absolute;
2306
- top: 0;
2319
+ .monaco-progress-container.discrete .progress-bit {
2307
2320
  left: 0;
2308
- z-index: 5;
2309
- pointer-events: none;
2310
- background-color: var(--separator-border);
2311
- }
2312
-
2313
- .monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2314
- height: 100%;
2315
- width: 1px;
2316
- }
2317
-
2318
- .monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2319
- height: 1px;
2320
- width: 100%;
2321
- }
2322
-
2323
- /*---------------------------------------------------------------------------------------------
2324
- * Copyright (c) Microsoft Corporation. All rights reserved.
2325
- * Licensed under the MIT License. See License.txt in the project root for license information.
2326
- *--------------------------------------------------------------------------------------------*/
2327
-
2328
- .monaco-table {
2329
- display: flex;
2330
- flex-direction: column;
2331
- position: relative;
2332
- height: 100%;
2333
- width: 100%;
2334
- white-space: nowrap;
2335
- overflow: hidden;
2336
- }
2337
-
2338
- .monaco-table > .monaco-split-view2 {
2339
- border-bottom: 1px solid transparent;
2340
- }
2341
-
2342
- .monaco-table > .monaco-list {
2343
- flex: 1;
2344
- }
2345
-
2346
- .monaco-table-tr {
2347
- display: flex;
2348
- height: 100%;
2321
+ transition: width 100ms linear;
2349
2322
  }
2350
2323
 
2351
- .monaco-table-th {
2324
+ .monaco-progress-container.discrete.done .progress-bit {
2352
2325
  width: 100%;
2353
- height: 100%;
2354
- font-weight: bold;
2355
- overflow: hidden;
2356
- text-overflow: ellipsis;
2357
2326
  }
2358
2327
 
2359
- .monaco-table-th,
2360
- .monaco-table-td {
2361
- box-sizing: border-box;
2362
- flex-shrink: 0;
2363
- overflow: hidden;
2364
- white-space: nowrap;
2365
- text-overflow: ellipsis;
2328
+ .monaco-progress-container.infinite .progress-bit {
2329
+ animation-name: progress;
2330
+ animation-duration: 4s;
2331
+ animation-iteration-count: infinite;
2332
+ transform: translate3d(0px, 0px, 0px);
2333
+ animation-timing-function: linear;
2366
2334
  }
2367
2335
 
2368
- .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
2369
- content: "";
2370
- position: absolute;
2371
- left: calc(var(--vscode-sash-size) / 2);
2372
- width: 0;
2373
- border-left: 1px solid transparent;
2336
+ .monaco-progress-container.infinite.infinite-long-running .progress-bit {
2337
+ /*
2338
+ The more smooth `linear` timing function can cause
2339
+ higher GPU consumption as indicated in
2340
+ https://github.com/microsoft/vscode/issues/97900 &
2341
+ https://github.com/microsoft/vscode/issues/138396
2342
+ */
2343
+ animation-timing-function: steps(100);
2374
2344
  }
2375
2345
 
2376
- .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2,
2377
- .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
2378
- transition: border-color 0.2s ease-out;
2379
- }
2346
+ /**
2347
+ * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
2348
+ * that container. Since translateX is relative to the progress bit size, we have to multiple it with
2349
+ * its relative size to the parent container:
2350
+ * parent width: 5000%
2351
+ * bit width: 100%
2352
+ * translateX should be as follow:
2353
+ * 50%: 5000% * 50% - 50% (set to center) = 2450%
2354
+ * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
2355
+ */
2356
+ @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
2380
2357
 
2381
2358
  /*---------------------------------------------------------------------------------------------
2382
2359
  * Copyright (c) Microsoft Corporation. All rights reserved.
@@ -2562,174 +2539,149 @@
2562
2539
  * Licensed under the MIT License. See License.txt in the project root for license information.
2563
2540
  *--------------------------------------------------------------------------------------------*/
2564
2541
 
2565
- .monaco-tl-row {
2566
- display: flex;
2567
- height: 100%;
2568
- align-items: center;
2569
- position: relative;
2542
+ :root {
2543
+ --vscode-sash-size: 4px;
2544
+ --vscode-sash-hover-size: 4px;
2570
2545
  }
2571
2546
 
2572
- .monaco-tl-row.disabled {
2573
- cursor: default;
2574
- }
2575
- .monaco-tl-indent {
2576
- height: 100%;
2547
+ .monaco-sash {
2577
2548
  position: absolute;
2578
- top: 0;
2579
- left: 16px;
2580
- pointer-events: none;
2581
- }
2582
-
2583
- .hide-arrows .monaco-tl-indent {
2584
- left: 12px;
2549
+ z-index: 35;
2550
+ touch-action: none;
2585
2551
  }
2586
2552
 
2587
- .monaco-tl-indent > .indent-guide {
2588
- display: inline-block;
2589
- box-sizing: border-box;
2590
- height: 100%;
2591
- border-left: 1px solid transparent;
2553
+ .monaco-sash.disabled {
2554
+ pointer-events: none;
2592
2555
  }
2593
2556
 
2594
- .monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {
2595
- transition: border-color 0.1s linear;
2557
+ .monaco-sash.mac.vertical {
2558
+ cursor: col-resize;
2596
2559
  }
2597
2560
 
2598
- .monaco-tl-twistie,
2599
- .monaco-tl-contents {
2600
- height: 100%;
2561
+ .monaco-sash.vertical.minimum {
2562
+ cursor: e-resize;
2601
2563
  }
2602
2564
 
2603
- .monaco-tl-twistie {
2604
- font-size: 10px;
2605
- text-align: right;
2606
- padding-right: 6px;
2607
- flex-shrink: 0;
2608
- width: 16px;
2609
- display: flex !important;
2610
- align-items: center;
2611
- justify-content: center;
2612
- transform: translateX(3px);
2565
+ .monaco-sash.vertical.maximum {
2566
+ cursor: w-resize;
2613
2567
  }
2614
2568
 
2615
- .monaco-tl-contents {
2616
- flex: 1;
2617
- overflow: hidden;
2569
+ .monaco-sash.mac.horizontal {
2570
+ cursor: row-resize;
2618
2571
  }
2619
2572
 
2620
- .monaco-tl-twistie::before {
2621
- border-radius: 20px;
2573
+ .monaco-sash.horizontal.minimum {
2574
+ cursor: s-resize;
2622
2575
  }
2623
2576
 
2624
- .monaco-tl-twistie.collapsed::before {
2625
- transform: rotate(-90deg);
2577
+ .monaco-sash.horizontal.maximum {
2578
+ cursor: n-resize;
2626
2579
  }
2627
2580
 
2628
- .monaco-tl-twistie.codicon-tree-item-loading::before {
2629
- /* Use steps to throttle FPS to reduce CPU usage */
2630
- animation: codicon-spin 1.25s steps(30) infinite;
2581
+ .monaco-sash.disabled {
2582
+ cursor: default !important;
2583
+ pointer-events: none !important;
2631
2584
  }
2632
2585
 
2633
- .monaco-tree-type-filter {
2634
- position: absolute;
2586
+ .monaco-sash.vertical {
2587
+ cursor: ew-resize;
2635
2588
  top: 0;
2636
- display: flex;
2637
- padding: 3px;
2638
- max-width: 200px;
2639
- z-index: 100;
2640
- margin: 0 6px;
2641
- border: 1px solid var(--vscode-widget-border);
2642
- border-bottom-left-radius: 4px;
2643
- border-bottom-right-radius: 4px;
2589
+ width: var(--vscode-sash-size);
2590
+ height: 100%;
2644
2591
  }
2645
2592
 
2646
- .monaco-workbench:not(.reduce-motion) .monaco-tree-type-filter {
2647
- transition: top 0.3s;
2593
+ .monaco-sash.horizontal {
2594
+ cursor: ns-resize;
2595
+ left: 0;
2596
+ width: 100%;
2597
+ height: var(--vscode-sash-size);
2648
2598
  }
2649
2599
 
2650
- .monaco-tree-type-filter.disabled {
2651
- top: -40px !important;
2600
+ .monaco-sash:not(.disabled) > .orthogonal-drag-handle {
2601
+ content: " ";
2602
+ height: calc(var(--vscode-sash-size) * 2);
2603
+ width: calc(var(--vscode-sash-size) * 2);
2604
+ z-index: 100;
2605
+ display: block;
2606
+ cursor: all-scroll;
2607
+ position: absolute;
2652
2608
  }
2653
2609
 
2654
- .monaco-tree-type-filter-grab {
2655
- display: flex !important;
2656
- align-items: center;
2657
- justify-content: center;
2658
- cursor: grab;
2659
- margin-right: 2px;
2610
+ .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
2611
+ > .orthogonal-drag-handle.start,
2612
+ .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
2613
+ > .orthogonal-drag-handle.end {
2614
+ cursor: nwse-resize;
2660
2615
  }
2661
2616
 
2662
- .monaco-tree-type-filter-grab.grabbing {
2663
- cursor: grabbing;
2617
+ .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
2618
+ > .orthogonal-drag-handle.end,
2619
+ .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
2620
+ > .orthogonal-drag-handle.start {
2621
+ cursor: nesw-resize;
2664
2622
  }
2665
2623
 
2666
- .monaco-tree-type-filter-input {
2667
- flex: 1;
2624
+ .monaco-sash.vertical > .orthogonal-drag-handle.start {
2625
+ left: calc(var(--vscode-sash-size) * -0.5);
2626
+ top: calc(var(--vscode-sash-size) * -1);
2668
2627
  }
2669
-
2670
- .monaco-tree-type-filter-input .monaco-inputbox {
2671
- height: 23px;
2628
+ .monaco-sash.vertical > .orthogonal-drag-handle.end {
2629
+ left: calc(var(--vscode-sash-size) * -0.5);
2630
+ bottom: calc(var(--vscode-sash-size) * -1);
2672
2631
  }
2673
-
2674
- .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
2675
- .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
2676
- padding: 2px 4px;
2632
+ .monaco-sash.horizontal > .orthogonal-drag-handle.start {
2633
+ top: calc(var(--vscode-sash-size) * -0.5);
2634
+ left: calc(var(--vscode-sash-size) * -1);
2677
2635
  }
2678
-
2679
- .monaco-tree-type-filter-input .monaco-findInput > .controls {
2680
- top: 2px;
2636
+ .monaco-sash.horizontal > .orthogonal-drag-handle.end {
2637
+ top: calc(var(--vscode-sash-size) * -0.5);
2638
+ right: calc(var(--vscode-sash-size) * -1);
2681
2639
  }
2682
2640
 
2683
- .monaco-tree-type-filter-actionbar {
2684
- margin-left: 4px;
2641
+ .monaco-sash:before {
2642
+ content: '';
2643
+ pointer-events: none;
2644
+ position: absolute;
2645
+ width: 100%;
2646
+ height: 100%;
2647
+ background: transparent;
2685
2648
  }
2686
2649
 
2687
- .monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
2688
- padding: 2px;
2650
+ .monaco-workbench:not(.reduce-motion) .monaco-sash:before {
2651
+ transition: background-color 0.1s ease-out;
2689
2652
  }
2690
2653
 
2691
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
2692
- position: absolute;
2693
- top: 0;
2694
- left: 0;
2695
- width: 100%;
2696
- height: 0;
2697
- z-index: 13; /* Settings editor uses z-index: 12 */
2698
-
2699
- /* Backup color in case the tree does not provide the background color */
2700
- background-color: var(--vscode-sideBar-background);
2654
+ .monaco-sash.hover:before,
2655
+ .monaco-sash.active:before {
2656
+ background: var(--vscode-sash-hoverBorder);
2701
2657
  }
2702
2658
 
2703
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
2704
- position: absolute;
2705
- width: 100%;
2706
- opacity: 1 !important; /* Settings editor uses opacity < 1 */
2707
- overflow: hidden;
2659
+ .monaco-sash.vertical:before {
2660
+ width: var(--vscode-sash-hover-size);
2661
+ left: calc(50% - (var(--vscode-sash-hover-size) / 2));
2662
+ }
2708
2663
 
2709
- /* Backup color in case the tree does not provide the background color */
2710
- background-color: var(--vscode-sideBar-background);
2664
+ .monaco-sash.horizontal:before {
2665
+ height: var(--vscode-sash-hover-size);
2666
+ top: calc(50% - (var(--vscode-sash-hover-size) / 2));
2711
2667
  }
2712
2668
 
2713
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
2714
- background-color: var(--vscode-list-hoverBackground) !important;
2715
- cursor: pointer;
2669
+ .pointer-events-disabled {
2670
+ pointer-events: none !important;
2716
2671
  }
2717
2672
 
2718
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
2719
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
2720
- display: none;
2673
+ /** Debug **/
2674
+
2675
+ .monaco-sash.debug {
2676
+ background: cyan;
2721
2677
  }
2722
2678
 
2723
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow {
2724
- position: absolute;
2725
- bottom: -3px;
2726
- left: 0px;
2727
- height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */
2728
- width: 100%;
2679
+ .monaco-sash.debug.disabled {
2680
+ background: rgba(0, 255, 255, 0.2);
2729
2681
  }
2730
2682
 
2731
- .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
2732
- outline: none;
2683
+ .monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
2684
+ background: red;
2733
2685
  }
2734
2686
 
2735
2687
  /*---------------------------------------------------------------------------------------------
@@ -2737,112 +2689,128 @@
2737
2689
  * Licensed under the MIT License. See License.txt in the project root for license information.
2738
2690
  *--------------------------------------------------------------------------------------------*/
2739
2691
 
2740
- /* ---------- Icon label ---------- */
2741
-
2742
- .monaco-icon-label {
2743
- display: flex; /* required for icons support :before rule */
2744
- overflow: hidden;
2745
- text-overflow: ellipsis;
2692
+ .monaco-split-view2 {
2693
+ position: relative;
2694
+ width: 100%;
2695
+ height: 100%;
2746
2696
  }
2747
2697
 
2748
- .monaco-icon-label::before {
2698
+ .monaco-split-view2 > .sash-container {
2699
+ position: absolute;
2700
+ width: 100%;
2701
+ height: 100%;
2702
+ pointer-events: none;
2703
+ }
2749
2704
 
2750
- /* svg icons rendered as background image */
2751
- background-size: 16px;
2752
- background-position: left center;
2753
- background-repeat: no-repeat;
2754
- padding-right: 6px;
2755
- width: 16px;
2756
- height: 22px;
2757
- line-height: inherit !important;
2758
- display: inline-block;
2705
+ .monaco-split-view2 > .sash-container > .monaco-sash {
2706
+ pointer-events: initial;
2707
+ }
2759
2708
 
2760
- /* fonts icons */
2761
- -webkit-font-smoothing: antialiased;
2762
- -moz-osx-font-smoothing: grayscale;
2763
- vertical-align: top;
2709
+ .monaco-split-view2 > .monaco-scrollable-element {
2710
+ width: 100%;
2711
+ height: 100%;
2712
+ }
2764
2713
 
2765
- flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
2714
+ .monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
2715
+ width: 100%;
2716
+ height: 100%;
2717
+ white-space: nowrap;
2718
+ position: relative;
2766
2719
  }
2767
2720
 
2768
- .monaco-icon-label-container.disabled {
2769
- color: var(--vscode-disabledForeground);
2721
+ .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
2722
+ white-space: initial;
2723
+ position: absolute;
2770
2724
  }
2771
- .monaco-icon-label > .monaco-icon-label-container {
2772
- min-width: 0;
2773
- overflow: hidden;
2774
- text-overflow: ellipsis;
2775
- flex: 1;
2725
+
2726
+ .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
2727
+ display: none;
2776
2728
  }
2777
2729
 
2778
- .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
2779
- color: inherit;
2780
- white-space: pre; /* enable to show labels that include multiple whitespaces */
2730
+ .monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
2731
+ width: 100%;
2781
2732
  }
2782
2733
 
2783
- .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
2784
- margin: 0 2px;
2785
- opacity: 0.5;
2734
+ .monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
2735
+ height: 100%;
2786
2736
  }
2787
2737
 
2788
- .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
2789
- opacity: .7;
2790
- white-space: pre;
2738
+ .monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2739
+ content: ' ';
2740
+ position: absolute;
2741
+ top: 0;
2742
+ left: 0;
2743
+ z-index: 5;
2744
+ pointer-events: none;
2745
+ background-color: var(--separator-border);
2791
2746
  }
2792
2747
 
2793
- .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
2794
- opacity: .7;
2795
- margin-left: 0.5em;
2796
- font-size: 0.9em;
2797
- white-space: pre; /* enable to show labels that include multiple whitespaces */
2748
+ .monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2749
+ height: 100%;
2750
+ width: 1px;
2798
2751
  }
2799
2752
 
2800
- .monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
2801
- white-space: nowrap
2753
+ .monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
2754
+ height: 1px;
2755
+ width: 100%;
2802
2756
  }
2803
2757
 
2804
- .vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
2805
- opacity: .95;
2758
+ /*---------------------------------------------------------------------------------------------
2759
+ * Copyright (c) Microsoft Corporation. All rights reserved.
2760
+ * Licensed under the MIT License. See License.txt in the project root for license information.
2761
+ *--------------------------------------------------------------------------------------------*/
2762
+
2763
+ .monaco-table {
2764
+ display: flex;
2765
+ flex-direction: column;
2766
+ position: relative;
2767
+ height: 100%;
2768
+ width: 100%;
2769
+ white-space: nowrap;
2770
+ overflow: hidden;
2806
2771
  }
2807
2772
 
2808
- .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
2809
- .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
2810
- font-style: italic;
2773
+ .monaco-table > .monaco-split-view2 {
2774
+ border-bottom: 1px solid transparent;
2811
2775
  }
2812
2776
 
2813
- .monaco-icon-label.deprecated {
2814
- text-decoration: line-through;
2815
- opacity: 0.66;
2777
+ .monaco-table > .monaco-list {
2778
+ flex: 1;
2816
2779
  }
2817
2780
 
2818
- /* make sure apply italic font style to decorations as well */
2819
- .monaco-icon-label.italic::after {
2820
- font-style: italic;
2781
+ .monaco-table-tr {
2782
+ display: flex;
2783
+ height: 100%;
2821
2784
  }
2822
2785
 
2823
- .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
2824
- .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
2825
- text-decoration: line-through;
2786
+ .monaco-table-th {
2787
+ width: 100%;
2788
+ height: 100%;
2789
+ font-weight: bold;
2790
+ overflow: hidden;
2791
+ text-overflow: ellipsis;
2826
2792
  }
2827
2793
 
2828
- .monaco-icon-label::after {
2829
- opacity: 0.75;
2830
- font-size: 90%;
2831
- font-weight: 600;
2832
- margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
2833
- text-align: center;
2794
+ .monaco-table-th,
2795
+ .monaco-table-td {
2796
+ box-sizing: border-box;
2797
+ flex-shrink: 0;
2798
+ overflow: hidden;
2799
+ white-space: nowrap;
2800
+ text-overflow: ellipsis;
2834
2801
  }
2835
2802
 
2836
- /* make sure selection color wins when a label is being selected */
2837
- .monaco-list:focus .selected .monaco-icon-label, /* list */
2838
- .monaco-list:focus .selected .monaco-icon-label::after
2839
- {
2840
- color: inherit !important;
2803
+ .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
2804
+ content: "";
2805
+ position: absolute;
2806
+ left: calc(var(--vscode-sash-size) / 2);
2807
+ width: 0;
2808
+ border-left: 1px solid transparent;
2841
2809
  }
2842
2810
 
2843
- .monaco-list-row.focused.selected .label-description,
2844
- .monaco-list-row.selected .label-description {
2845
- opacity: .8;
2811
+ .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2,
2812
+ .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
2813
+ transition: border-color 0.2s ease-out;
2846
2814
  }
2847
2815
 
2848
2816
  /*---------------------------------------------------------------------------------------------
@@ -2850,237 +2818,295 @@
2850
2818
  * Licensed under the MIT License. See License.txt in the project root for license information.
2851
2819
  *--------------------------------------------------------------------------------------------*/
2852
2820
 
2853
- .monaco-keybinding {
2821
+ .monaco-tl-row {
2854
2822
  display: flex;
2823
+ height: 100%;
2855
2824
  align-items: center;
2856
- line-height: 10px;
2825
+ position: relative;
2857
2826
  }
2858
2827
 
2859
- .monaco-keybinding > .monaco-keybinding-key {
2828
+ .monaco-tl-row.disabled {
2829
+ cursor: default;
2830
+ }
2831
+ .monaco-tl-indent {
2832
+ height: 100%;
2833
+ position: absolute;
2834
+ top: 0;
2835
+ left: 16px;
2836
+ pointer-events: none;
2837
+ }
2838
+
2839
+ .hide-arrows .monaco-tl-indent {
2840
+ left: 12px;
2841
+ }
2842
+
2843
+ .monaco-tl-indent > .indent-guide {
2860
2844
  display: inline-block;
2861
- border-style: solid;
2862
- border-width: 1px;
2863
- border-radius: 3px;
2864
- vertical-align: middle;
2865
- font-size: 11px;
2866
- padding: 3px 5px;
2867
- margin: 0 2px;
2845
+ box-sizing: border-box;
2846
+ height: 100%;
2847
+ border-left: 1px solid transparent;
2868
2848
  }
2869
2849
 
2870
- .monaco-keybinding > .monaco-keybinding-key:first-child {
2871
- margin-left: 0;
2850
+ .monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {
2851
+ transition: border-color 0.1s linear;
2872
2852
  }
2873
2853
 
2874
- .monaco-keybinding > .monaco-keybinding-key:last-child {
2875
- margin-right: 0;
2854
+ .monaco-tl-twistie,
2855
+ .monaco-tl-contents {
2856
+ height: 100%;
2876
2857
  }
2877
2858
 
2878
- .monaco-keybinding > .monaco-keybinding-key-separator {
2879
- display: inline-block;
2859
+ .monaco-tl-twistie {
2860
+ font-size: 10px;
2861
+ text-align: right;
2862
+ padding-right: 6px;
2863
+ flex-shrink: 0;
2864
+ width: 16px;
2865
+ display: flex !important;
2866
+ align-items: center;
2867
+ justify-content: center;
2868
+ transform: translateX(3px);
2880
2869
  }
2881
2870
 
2882
- .monaco-keybinding > .monaco-keybinding-key-chord-separator {
2883
- width: 6px;
2871
+ .monaco-tl-contents {
2872
+ flex: 1;
2873
+ overflow: hidden;
2884
2874
  }
2885
2875
 
2886
- /*---------------------------------------------------------------------------------------------
2887
- * Copyright (c) Microsoft Corporation. All rights reserved.
2888
- * Licensed under the MIT License. See License.txt in the project root for license information.
2889
- *--------------------------------------------------------------------------------------------*/
2876
+ .monaco-tl-twistie::before {
2877
+ border-radius: 20px;
2878
+ }
2890
2879
 
2891
- .monaco-text-button {
2892
- box-sizing: border-box;
2880
+ .monaco-tl-twistie.collapsed::before {
2881
+ transform: rotate(-90deg);
2882
+ }
2883
+
2884
+ .monaco-tl-twistie.codicon-tree-item-loading::before {
2885
+ /* Use steps to throttle FPS to reduce CPU usage */
2886
+ animation: codicon-spin 1.25s steps(30) infinite;
2887
+ }
2888
+
2889
+ .monaco-tree-type-filter {
2890
+ position: absolute;
2891
+ top: 0;
2893
2892
  display: flex;
2894
- width: 100%;
2895
- padding: 4px;
2896
- border-radius: 2px;
2897
- text-align: center;
2898
- cursor: pointer;
2899
- justify-content: center;
2893
+ padding: 3px;
2894
+ max-width: 200px;
2895
+ z-index: 100;
2896
+ margin: 0 6px;
2897
+ border: 1px solid var(--vscode-widget-border);
2898
+ border-bottom-left-radius: 4px;
2899
+ border-bottom-right-radius: 4px;
2900
+ }
2901
+
2902
+ .monaco-workbench:not(.reduce-motion) .monaco-tree-type-filter {
2903
+ transition: top 0.3s;
2904
+ }
2905
+
2906
+ .monaco-tree-type-filter.disabled {
2907
+ top: -40px !important;
2908
+ }
2909
+
2910
+ .monaco-tree-type-filter-grab {
2911
+ display: flex !important;
2900
2912
  align-items: center;
2901
- border: 1px solid var(--vscode-button-border, transparent);
2902
- line-height: 18px;
2913
+ justify-content: center;
2914
+ cursor: grab;
2915
+ margin-right: 2px;
2903
2916
  }
2904
2917
 
2905
- .monaco-text-button:focus {
2906
- outline-offset: 2px !important;
2918
+ .monaco-tree-type-filter-grab.grabbing {
2919
+ cursor: grabbing;
2907
2920
  }
2908
2921
 
2909
- .monaco-text-button:hover {
2910
- text-decoration: none !important;
2922
+ .monaco-tree-type-filter-input {
2923
+ flex: 1;
2911
2924
  }
2912
2925
 
2913
- .monaco-button.disabled:focus,
2914
- .monaco-button.disabled {
2915
- opacity: 0.4 !important;
2916
- cursor: default;
2926
+ .monaco-tree-type-filter-input .monaco-inputbox {
2927
+ height: 23px;
2917
2928
  }
2918
2929
 
2919
- .monaco-text-button .codicon {
2920
- margin: 0 0.2em;
2921
- color: inherit !important;
2930
+ .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
2931
+ .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
2932
+ padding: 2px 4px;
2922
2933
  }
2923
2934
 
2924
- .monaco-text-button.monaco-text-button-with-short-label {
2925
- flex-direction: row;
2926
- flex-wrap: wrap;
2927
- padding: 0 4px;
2928
- overflow: hidden;
2929
- height: 28px;
2935
+ .monaco-tree-type-filter-input .monaco-findInput > .controls {
2936
+ top: 2px;
2930
2937
  }
2931
2938
 
2932
- .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
2933
- flex-basis: 100%;
2939
+ .monaco-tree-type-filter-actionbar {
2940
+ margin-left: 4px;
2934
2941
  }
2935
2942
 
2936
- .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
2937
- flex-grow: 1;
2938
- width: 0;
2939
- overflow: hidden;
2943
+ .monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
2944
+ padding: 2px;
2940
2945
  }
2941
2946
 
2942
- .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
2943
- .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
2944
- display: flex;
2945
- justify-content: center;
2946
- align-items: center;
2947
- font-weight: normal;
2948
- font-style: inherit;
2949
- padding: 4px 0;
2947
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
2948
+ position: absolute;
2949
+ top: 0;
2950
+ left: 0;
2951
+ width: 100%;
2952
+ height: 0;
2953
+ z-index: 13; /* Settings editor uses z-index: 12 */
2954
+
2955
+ /* Backup color in case the tree does not provide the background color */
2956
+ background-color: var(--vscode-sideBar-background);
2950
2957
  }
2951
2958
 
2952
- .monaco-button-dropdown {
2953
- display: flex;
2959
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
2960
+ position: absolute;
2961
+ width: 100%;
2962
+ opacity: 1 !important; /* Settings editor uses opacity < 1 */
2963
+ overflow: hidden;
2964
+
2965
+ /* Backup color in case the tree does not provide the background color */
2966
+ background-color: var(--vscode-sideBar-background);
2967
+ }
2968
+
2969
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
2970
+ background-color: var(--vscode-list-hoverBackground) !important;
2954
2971
  cursor: pointer;
2955
2972
  }
2956
2973
 
2957
- .monaco-button-dropdown.disabled {
2958
- cursor: default;
2959
- }
2974
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
2975
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
2976
+ display: none;
2977
+ }
2978
+
2979
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow {
2980
+ position: absolute;
2981
+ bottom: -3px;
2982
+ left: 0px;
2983
+ height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */
2984
+ width: 100%;
2985
+ }
2986
+
2987
+ .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
2988
+ outline: none;
2989
+ }
2990
+
2991
+ /*---------------------------------------------------------------------------------------------
2992
+ * Copyright (c) Microsoft Corporation. All rights reserved.
2993
+ * Licensed under the MIT License. See License.txt in the project root for license information.
2994
+ *--------------------------------------------------------------------------------------------*/
2995
+
2996
+ /* ---------- Icon label ---------- */
2960
2997
 
2961
- .monaco-button-dropdown > .monaco-button:focus {
2962
- outline-offset: -1px !important;
2998
+ .monaco-icon-label {
2999
+ display: flex; /* required for icons support :before rule */
3000
+ overflow: hidden;
3001
+ text-overflow: ellipsis;
2963
3002
  }
2964
3003
 
2965
- .monaco-button-dropdown.disabled > .monaco-button.disabled,
2966
- .monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
2967
- .monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
2968
- opacity: 0.4 !important;
2969
- }
3004
+ .monaco-icon-label::before {
2970
3005
 
2971
- .monaco-button-dropdown > .monaco-button.monaco-text-button {
2972
- border-right-width: 0 !important;
2973
- }
3006
+ /* svg icons rendered as background image */
3007
+ background-size: 16px;
3008
+ background-position: left center;
3009
+ background-repeat: no-repeat;
3010
+ padding-right: 6px;
3011
+ width: 16px;
3012
+ height: 22px;
3013
+ line-height: inherit !important;
3014
+ display: inline-block;
2974
3015
 
2975
- .monaco-button-dropdown .monaco-button-dropdown-separator {
2976
- padding: 4px 0;
2977
- cursor: default;
2978
- }
3016
+ /* fonts icons */
3017
+ -webkit-font-smoothing: antialiased;
3018
+ -moz-osx-font-smoothing: grayscale;
3019
+ vertical-align: top;
2979
3020
 
2980
- .monaco-button-dropdown .monaco-button-dropdown-separator > div {
2981
- height: 100%;
2982
- width: 1px;
3021
+ flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
2983
3022
  }
2984
3023
 
2985
- .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
2986
- border: 1px solid var(--vscode-button-border, transparent);
2987
- border-left-width: 0 !important;
2988
- border-radius: 0 2px 2px 0;
3024
+ .monaco-icon-label-iconpath {
3025
+ width: 16px;
3026
+ height: 16px;
3027
+ padding-left: 2px;
3028
+ margin-top: 2px;
2989
3029
  display: flex;
2990
- align-items: center;
2991
3030
  }
2992
3031
 
2993
- .monaco-button-dropdown > .monaco-button.monaco-text-button {
2994
- border-radius: 2px 0 0 2px;
3032
+ .monaco-icon-label-container.disabled {
3033
+ color: var(--vscode-disabledForeground);
2995
3034
  }
2996
-
2997
- .monaco-description-button {
2998
- display: flex;
2999
- flex-direction: column;
3000
- align-items: center;
3001
- margin: 4px 5px; /* allows button focus outline to be visible */
3035
+ .monaco-icon-label > .monaco-icon-label-container {
3036
+ min-width: 0;
3037
+ overflow: hidden;
3038
+ text-overflow: ellipsis;
3039
+ flex: 1;
3002
3040
  }
3003
3041
 
3004
- .monaco-description-button .monaco-button-description {
3005
- font-style: italic;
3006
- font-size: 11px;
3007
- padding: 4px 20px;
3042
+ .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
3043
+ color: inherit;
3044
+ white-space: pre; /* enable to show labels that include multiple whitespaces */
3008
3045
  }
3009
3046
 
3010
- .monaco-description-button .monaco-button-label,
3011
- .monaco-description-button .monaco-button-description {
3012
- display: flex;
3013
- justify-content: center;
3014
- align-items: center;
3047
+ .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
3048
+ margin: 0 2px;
3049
+ opacity: 0.5;
3015
3050
  }
3016
3051
 
3017
- .monaco-description-button .monaco-button-label > .codicon,
3018
- .monaco-description-button .monaco-button-description > .codicon {
3019
- margin: 0 0.2em;
3020
- color: inherit !important;
3052
+ .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
3053
+ opacity: .7;
3054
+ white-space: pre;
3021
3055
  }
3022
3056
 
3023
- /* default color styles - based on CSS variables */
3024
-
3025
- .monaco-button.default-colors,
3026
- .monaco-button-dropdown.default-colors > .monaco-button{
3027
- color: var(--vscode-button-foreground);
3028
- background-color: var(--vscode-button-background);
3057
+ .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
3058
+ opacity: .7;
3059
+ margin-left: 0.5em;
3060
+ font-size: 0.9em;
3061
+ white-space: pre; /* enable to show labels that include multiple whitespaces */
3029
3062
  }
3030
3063
 
3031
- .monaco-button.default-colors:hover,
3032
- .monaco-button-dropdown.default-colors > .monaco-button:hover {
3033
- background-color: var(--vscode-button-hoverBackground);
3064
+ .monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
3065
+ white-space: nowrap
3034
3066
  }
3035
3067
 
3036
- .monaco-button.default-colors.secondary,
3037
- .monaco-button-dropdown.default-colors > .monaco-button.secondary {
3038
- color: var(--vscode-button-secondaryForeground);
3039
- background-color: var(--vscode-button-secondaryBackground);
3068
+ .vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
3069
+ opacity: .95;
3040
3070
  }
3041
3071
 
3042
- .monaco-button.default-colors.secondary:hover,
3043
- .monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
3044
- background-color: var(--vscode-button-secondaryHoverBackground);
3072
+ .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
3073
+ .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
3074
+ font-style: italic;
3045
3075
  }
3046
3076
 
3047
- .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
3048
- background-color: var(--vscode-button-background);
3049
- border-top: 1px solid var(--vscode-button-border);
3050
- border-bottom: 1px solid var(--vscode-button-border);
3077
+ .monaco-icon-label.deprecated {
3078
+ text-decoration: line-through;
3079
+ opacity: 0.66;
3051
3080
  }
3052
3081
 
3053
- .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
3054
- background-color: var(--vscode-button-secondaryBackground);
3082
+ /* make sure apply italic font style to decorations as well */
3083
+ .monaco-icon-label.italic::after {
3084
+ font-style: italic;
3055
3085
  }
3056
3086
 
3057
- .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
3058
- background-color: var(--vscode-button-separator);
3087
+ .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
3088
+ .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
3089
+ text-decoration: line-through;
3059
3090
  }
3060
3091
 
3061
- /*---------------------------------------------------------------------------------------------
3062
- * Copyright (c) Microsoft Corporation. All rights reserved.
3063
- * Licensed under the MIT License. See License.txt in the project root for license information.
3064
- *--------------------------------------------------------------------------------------------*/
3065
-
3066
- .monaco-count-badge {
3067
- padding: 3px 6px;
3068
- border-radius: 11px;
3069
- font-size: 11px;
3070
- min-width: 18px;
3071
- min-height: 18px;
3072
- line-height: 11px;
3073
- font-weight: normal;
3092
+ .monaco-icon-label::after {
3093
+ opacity: 0.75;
3094
+ font-size: 90%;
3095
+ font-weight: 600;
3096
+ margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
3074
3097
  text-align: center;
3075
- display: inline-block;
3076
- box-sizing: border-box;
3077
3098
  }
3078
3099
 
3079
- .monaco-count-badge.long {
3080
- padding: 2px 3px;
3081
- border-radius: 2px;
3082
- min-height: auto;
3083
- line-height: normal;
3100
+ /* make sure selection color wins when a label is being selected */
3101
+ .monaco-list:focus .selected .monaco-icon-label, /* list */
3102
+ .monaco-list:focus .selected .monaco-icon-label::after
3103
+ {
3104
+ color: inherit !important;
3105
+ }
3106
+
3107
+ .monaco-list-row.focused.selected .label-description,
3108
+ .monaco-list-row.selected .label-description {
3109
+ opacity: .8;
3084
3110
  }
3085
3111
 
3086
3112
  /*---------------------------------------------------------------------------------------------
@@ -3088,63 +3114,39 @@
3088
3114
  * Licensed under the MIT License. See License.txt in the project root for license information.
3089
3115
  *--------------------------------------------------------------------------------------------*/
3090
3116
 
3091
- .monaco-progress-container {
3092
- width: 100%;
3093
- height: 2px;
3094
- overflow: hidden; /* keep progress bit in bounds */
3095
- }
3096
-
3097
- .monaco-progress-container .progress-bit {
3098
- width: 2%;
3099
- height: 2px;
3100
- position: absolute;
3101
- left: 0;
3102
- display: none;
3117
+ .monaco-keybinding {
3118
+ display: flex;
3119
+ align-items: center;
3120
+ line-height: 10px;
3103
3121
  }
3104
3122
 
3105
- .monaco-progress-container.active .progress-bit {
3106
- display: inherit;
3123
+ .monaco-keybinding > .monaco-keybinding-key {
3124
+ display: inline-block;
3125
+ border-style: solid;
3126
+ border-width: 1px;
3127
+ border-radius: 3px;
3128
+ vertical-align: middle;
3129
+ font-size: 11px;
3130
+ padding: 3px 5px;
3131
+ margin: 0 2px;
3107
3132
  }
3108
3133
 
3109
- .monaco-progress-container.discrete .progress-bit {
3110
- left: 0;
3111
- transition: width 100ms linear;
3134
+ .monaco-keybinding > .monaco-keybinding-key:first-child {
3135
+ margin-left: 0;
3112
3136
  }
3113
3137
 
3114
- .monaco-progress-container.discrete.done .progress-bit {
3115
- width: 100%;
3138
+ .monaco-keybinding > .monaco-keybinding-key:last-child {
3139
+ margin-right: 0;
3116
3140
  }
3117
3141
 
3118
- .monaco-progress-container.infinite .progress-bit {
3119
- animation-name: progress;
3120
- animation-duration: 4s;
3121
- animation-iteration-count: infinite;
3122
- transform: translate3d(0px, 0px, 0px);
3123
- animation-timing-function: linear;
3142
+ .monaco-keybinding > .monaco-keybinding-key-separator {
3143
+ display: inline-block;
3124
3144
  }
3125
3145
 
3126
- .monaco-progress-container.infinite.infinite-long-running .progress-bit {
3127
- /*
3128
- The more smooth `linear` timing function can cause
3129
- higher GPU consumption as indicated in
3130
- https://github.com/microsoft/vscode/issues/97900 &
3131
- https://github.com/microsoft/vscode/issues/138396
3132
- */
3133
- animation-timing-function: steps(100);
3146
+ .monaco-keybinding > .monaco-keybinding-key-chord-separator {
3147
+ width: 6px;
3134
3148
  }
3135
3149
 
3136
- /**
3137
- * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
3138
- * that container. Since translateX is relative to the progress bit size, we have to multiple it with
3139
- * its relative size to the parent container:
3140
- * parent width: 5000%
3141
- * bit width: 100%
3142
- * translateX should be as follow:
3143
- * 50%: 5000% * 50% - 50% (set to center) = 2450%
3144
- * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
3145
- */
3146
- @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
3147
-
3148
3150
  /*---------------------------------------------------------------------------------------------
3149
3151
  * Copyright (c) Microsoft Corporation. All rights reserved.
3150
3152
  * Licensed under the MIT License. See License.txt in the project root for license information.
@@ -3475,6 +3477,10 @@
3475
3477
  flex-shrink: 0;
3476
3478
  flex-grow: 0;
3477
3479
 
3480
+ & > div {
3481
+ position: absolute;
3482
+ }
3483
+
3478
3484
  .gutterItem {
3479
3485
  opacity: 0;
3480
3486
  transition: opacity 0.7s;
@@ -3521,8 +3527,7 @@
3521
3527
  .actions-container {
3522
3528
  width: fit-content;
3523
3529
  border-radius: 4px;
3524
- border: 1px var(--vscode-menu-border) solid;
3525
- background: var(--vscode-editor-background);
3530
+ background: var(--vscode-editorGutter-commentRangeForeground);
3526
3531
 
3527
3532
  .action-item {
3528
3533
  &:hover {
@@ -3530,7 +3535,7 @@
3530
3535
  }
3531
3536
 
3532
3537
  .action-label {
3533
- padding: 0.5px 1px;
3538
+ padding: 1px 2px;
3534
3539
  }
3535
3540
  }
3536
3541
  }
@@ -3634,8 +3639,35 @@
3634
3639
 
3635
3640
  .monaco-component.multiDiffEditor {
3636
3641
  background: var(--vscode-multiDiffEditor-background);
3642
+
3643
+ position: relative;
3644
+
3645
+ height: 100%;
3646
+ width: 100%;
3647
+
3637
3648
  overflow-y: hidden;
3638
3649
 
3650
+ > div {
3651
+ position: absolute;
3652
+ top: 0px;
3653
+ left: 0px;
3654
+
3655
+ height: 100%;
3656
+ width: 100%;
3657
+
3658
+ &.placeholder {
3659
+ visibility: hidden;
3660
+
3661
+ &.visible {
3662
+ visibility: visible;
3663
+ }
3664
+
3665
+ display: grid;
3666
+ place-items: center;
3667
+ place-content: center;
3668
+ }
3669
+ }
3670
+
3639
3671
  .active {
3640
3672
  --vscode-multiDiffEditor-border: var(--vscode-focusBorder);
3641
3673
  }
@@ -4766,6 +4798,12 @@
4766
4798
  background-color: var(--vscode-editor-hoverHighlightBackground);
4767
4799
  }
4768
4800
 
4801
+ .monaco-editor .monaco-hover-content {
4802
+ padding-right: 2px;
4803
+ padding-bottom: 2px;
4804
+ box-sizing: border-box;
4805
+ }
4806
+
4769
4807
  .monaco-editor .monaco-hover {
4770
4808
  color: var(--vscode-editorHoverWidget-foreground);
4771
4809
  background-color: var(--vscode-editorHoverWidget-background);
@@ -6271,6 +6309,7 @@
6271
6309
  box-shadow: var(--vscode-editorStickyScroll-shadow) 0 3px 2px -2px;
6272
6310
  z-index: 4;
6273
6311
  background-color: var(--vscode-editorStickyScroll-background);
6312
+ right: initial !important;
6274
6313
  }
6275
6314
 
6276
6315
  .monaco-editor .sticky-widget.peek {