extensionEditor.css

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

.extension-editor {
	height: 100%;
	overflow: hidden;
}

.extension-editor .clickable {
	cursor: pointer;
}

.extension-editor > .header {
	display: flex;
	height: 128px;
	background: rgba(128, 128, 128, 0.15);
	padding: 20px;
	overflow: hidden;
	font-size: 14px;
}

.extension-editor > .header > .icon {
	height: 128px;
	width: 128px;
	object-fit: contain;
}

.extension-editor > .header > .details {
	flex: 1;
	padding-left: 20px;
	overflow: hidden;
}

.extension-editor > .header > .details > .title {
	display: flex;
	align-items: baseline;
}

.extension-editor > .header > .details > .title > .name {
	flex: 0;
	font-size: 26px;
	line-height: 30px;
	font-weight: 600;
	white-space: nowrap;
}

.extension-editor > .header > .details > .title > .identifier {
	margin-left: 10px;
	font-size: 14px;
	opacity: 0.6;
	background: rgba(173, 173, 173, 0.51);
	padding: 0px 4px;
	border-radius: 4px;
	user-select: text;
	-webkit-user-select: text;
}

.extension-editor > .header > .details > .subtitle {
	padding-top: 10px;
	white-space: nowrap;
	height: 20px;
	line-height: 20px;
}

.extension-editor > .header > .details > .subtitle > .publisher {
	font-size: 18px;
}

.extension-editor > .header > .details > .subtitle > .install > .count {
	margin-left: 6px;
}

.extension-editor > .header > .details > .subtitle > span:not(:first-child):not(:empty),
.extension-editor > .header > .details > .subtitle > a:not(:first-child):not(:empty) {
	border-left: 1px solid rgba(128, 128, 128, 0.7);
	margin-left: 14px;
	padding-left: 14px;
}

.extension-editor > .header > .details > .description {
	margin-top: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.extension-editor > .header > .details > .actions {
	margin-top: 14px;
}

.extension-editor > .header > .details > .actions > .monaco-action-bar {
	text-align: initial;
}

.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container {
	justify-content: flex-start;
}

.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .action-label {
	font-weight: 600;
	padding: 1px 6px;
	line-height: 15px;
}

.extension-editor > .body {
	height: calc(100% - 168px);
	overflow: hidden;
}

.extension-editor > .body > .navbar {
	height: 36px;
	font-weight: bold;
	font-size: 14px;
	line-height: 36px;
	padding-left: 20px;
	border-bottom: 1px solid rgba(136, 136, 136, 0.45);
	box-sizing: border-box;
}

.extension-editor > .body > .navbar > .monaco-action-bar > .actions-container {
	justify-content: initial;
}

.extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
	margin-right: 16px;
}

.extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
	font-size: inherit;
	opacity: 0.7;
}

.extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item.disabled > .action-label {
	opacity: 1;
	text-decoration: underline;
}

.extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label:hover {
	text-decoration: underline;
}

.extension-editor > .body > .content {
	height: calc(100% - 36px);
}

.extension-editor > .body > .content > .monaco-scrollable-element {
	height: 100%;
}

.extension-editor > .body > .content > .monaco-scrollable-element > .subcontent {
	height: 100%;
	padding: 20px;
	overflow-y: scroll;
	box-sizing: border-box;
}

.extension-editor > .body > .content table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
}

.extension-editor > .body > .content details:not(:first-child) {
	margin-top: 20px;
}

.extension-editor > .body > .content details > summary {
	cursor: pointer;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
	padding-bottom: 6px;
}

.extension-editor > .body > .content details > summary:focus {
	outline: none;
}

.extension-editor > .body > .content details > summary::-webkit-details-marker {
	color: rgba(128, 128, 128, 0.5);
}

.extension-editor > .body > .content table tr:nth-child(odd) {
	background-color: rgba(130, 130, 130, 0.04);
}

.extension-editor > .body > .content table tr:not(:first-child):hover {
	background-color: rgba(128, 128, 128, 0.15);
}

.extension-editor > .body > .content table th,
.extension-editor > .body > .content table td {
	padding: 2px 16px 2px 4px;
}

.extension-editor > .body > .content table th:last-child,
.extension-editor > .body > .content table td:last-child {
	padding: 2px 4px;
}

.extension-editor > .body > .content table th {
	text-align: left;
}

.extension-editor > .body > .content table code:not(:empty) {
	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
	font-size: 90%;
	background-color: rgba(128, 128, 128, 0.17);
	border-radius: 4px;
	padding: 1px 4px;
}