extensionsViewlet.css

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.extensions-viewlet {
	height: 100%;
}

.extensions-viewlet > .header {
	height: 38px;
	box-sizing: border-box;
	padding: 5px 9px 5px 16px;
}

.extensions-viewlet > .header > .search-box {
	width: 100%;
	height: 28px;
	line-height: 18px;
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid transparent;
	-webkit-appearance: textfield;
}

.extensions-viewlet > .extensions {
	height: calc(100% - 38px);
}

.extensions-viewlet > .extensions .extension {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 11px 0 16px;
	overflow: hidden;
	display: flex;
}

.extensions-viewlet > .extensions .extension > .icon {
	width: 42px;
	height: 42px;
	padding: 10px 14px 10px 0;
	flex-shrink: 0;
	object-fit: contain;
}

.extensions-viewlet.narrow > .extensions .extension > .icon {
	display: none;
}

.extensions-viewlet > .extensions .extension.loading > .icon {
	display: none;
}

.extensions-viewlet > .extensions .extension > .details {
	flex: 1;
	padding: 4px 0;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	height: 19px;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .header > .name {
	font-weight: bold;
	min-width: fit-content;
}

.extensions-viewlet > .extensions .extension > .details > .header > .version {
	opacity: 0.6;
	font-size: 80%;
	padding-left: 6px;
	flex: 1;
	min-width: fit-content;
}

.extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) {
	font-size: 80%;
	margin: 0 6px;
}

.extensions-viewlet > .extensions .extension > .details > .header > .install-count > .octicon {
	font-size: 100%;
	margin-right: 2px;
}

.extensions-viewlet > .extensions .extension > .details > .header > .ratings {
	text-align: right;
}

.extensions-viewlet.narrow > .extensions .extension > .details > .header > .ratings,
.extensions-viewlet.narrow > .extensions .extension > .details > .header > .install-count {
	display: none;
}

.extensions-viewlet > .extensions .extension > .details > .footer {
	display: flex;
	justify-content: flex-end;
	height: 18px;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .author {
	flex: 1;
	font-size: 90%;
	padding-right: 6px;
	opacity: 0.6;
	font-weight: 600;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar > .actions-container {
	flex-wrap: wrap-reverse;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar .action-label {
	margin-right: 0;
	margin-left: 0.3em;
	line-height: 15px;
}

.extensions-viewlet > .extensions .extension .ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.extensions-badge > .badge-content {
	background-color: #007ACC;
}

.extensions-badge.progress-badge > .badge-content {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMiAyIDE0IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIgMiAxNCAxNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTZjLTMuODYgMC03LTMuMTQtNy03czMuMTQtNyA3LTdjMy44NTkgMCA3IDMuMTQxIDcgN3MtMy4xNDEgNy03IDd6bTAtMTIuNmMtMy4wODggMC01LjYgMi41MTMtNS42IDUuNnMyLjUxMiA1LjYgNS42IDUuNiA1LjYtMi41MTIgNS42LTUuNi0yLjUxMi01LjYtNS42LTUuNnptMy44NiA3LjFsLTMuMTYtMS44OTZ2LTMuODA0aC0xLjR2NC41OTZsMy44NCAyLjMwNS43Mi0xLjIwMXoiLz48L3N2Zz4=");
	background-position: center center;
	background-repeat: no-repeat;
}