monaco-editor/esm/vs/platform/actionWidget/browser/actionWidget.css

A browser based code editor

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

.action-widget {
	font-size: 13px;
	min-width: 100px;
	max-width: 80vw;
	z-index: 40;
	display: block;
	width: 100%;
	border: 1px solid var(--vscode-editorHoverWidget-border) !important;
	border-radius: var(--vscode-cornerRadius-large);
	background-color: var(--vscode-menu-background);
	color: var(--vscode-menu-foreground);
	padding: 4px;
	box-shadow: var(--vscode-shadow-lg);
}

.context-view-block {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.context-view-pointerBlock {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.action-widget .monaco-list {
	user-select: none;
	-webkit-user-select: none;
	border: none !important;
	border-width: 0 !important;
}

.action-widget .monaco-list:focus:before {
	outline: 0 !important;
}

.action-widget .monaco-list .monaco-scrollable-element {
	overflow: visible;
}

/** Styles for each row in the list element **/
.action-widget .monaco-list .monaco-list-row {
	padding: 0 12px 0 6px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
	border-radius: var(--vscode-cornerRadius-medium);
}

.action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) {
	background-color: var(--vscode-list-hoverBackground) !important;
	color: var(--vscode-list-hoverForeground);
	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
	outline-offset: -2px;
}

.action-widget .monaco-list-row.group-header {
	color: var(--vscode-descriptionForeground) !important;
	font-weight: 500;
	font-size: 11px;
}

.action-widget .monaco-list-row.group-header:not(:first-of-type) {
	margin-top: 2px;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
	margin: 4px 0px;
	width: 100%;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
	border-radius: 0;
	pointer-events: none;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator:hover,
.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator.focused {
	outline: 0 solid;
	background-color: transparent !important;
	border-radius: 0;
}

.action-widget .monaco-list-row.separator:first-of-type {
	border-top: none;
	margin-top: 0;
}

/* Separators with text labels (titled section headers) */
.action-widget .monaco-list-row.separator > span:not(:empty) {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 10px;
}

.action-widget .monaco-list .group-header,
.action-widget .monaco-list .option-disabled,
.action-widget .monaco-list .option-disabled:before,
.action-widget .monaco-list .option-disabled .focused,
.action-widget .monaco-list .option-disabled .focused:before {
	cursor: default !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	background-color: transparent !important;
	outline: 0 solid !important;
}

.action-widget .monaco-list-row.action {
	display: flex;
	gap: 6px;
	align-items: center;
}

.action-widget .monaco-list-row.action .codicon {
	font-size: 12px;
}

.action-widget .monaco-list-row.action .action-list-item-toolbar .codicon {
	font-size: 16px;
}

/* Compact icon modifier: render the leading row codicon at the compact size */
.action-widget .actionList.compact-icons .monaco-list-row.action .codicon {
	font-size: var(--vscode-codiconFontSize-compact, 12px);
}

/* Toolbar codicons keep the regular codicon size even in compact lists */
.action-widget .actionList.compact-icons .monaco-list-row.action .action-list-item-toolbar .codicon {
	font-size: var(--vscode-codiconFontSize, 16px);
}

/* The submenu indicator keeps the regular codicon size even in compact lists */
.action-widget .actionList.compact-icons .monaco-list-row.action .action-list-submenu-indicator.codicon {
	font-size: var(--vscode-codiconFontSize, 16px);
}

.action-widget .monaco-list-row.action.option-disabled,
.action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
.action-widget .monaco-list-row.action.option-disabled .codicon,
.action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled {
	color: var(--vscode-disabledForeground);
}


.action-widget .monaco-list-row.action:not(.option-disabled) .codicon {
	color: inherit;
}

.action-widget .monaco-list-row.action .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.action-widget .monaco-list-row.action .detail {
	order: 99;
	width: 100%;
	padding-left: 18px;
	font-size: 11px;
	line-height: 14px;
	color: var(--vscode-descriptionForeground);
	opacity: 0.8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.action-widget .monaco-list-row.action .action-item-badge {
	padding: 0px 6px;
	border-radius: 10px;
	background-color: var(--vscode-badge-background);
	color: var(--vscode-badge-foreground);
	font-size: 11px;
	line-height: 18px;
	flex-shrink: 0;
}

.action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key {
	background-color: var(--vscode-keybindingLabel-background);
	color: var(--vscode-keybindingLabel-foreground);
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: var(--vscode-keybindingLabel-border);
	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
}

/* Action bar */

.action-widget .action-widget-action-bar {
	background-color: var(--vscode-menu-background);
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	margin-top: 4px;
}

.action-widget .action-widget-action-bar::before {
	display: block;
	content: "";
	width: 100%;
}

.action-widget .action-widget-action-bar .actions-container {
	padding: 2px 8px 0px 26px;
	width: auto;
}

.action-widget-action-bar .action-label {
	color: var(--vscode-textLink-activeForeground);
	font-size: 12px;
	line-height: 22px;
	padding: 0;
	pointer-events: all;
}

.action-widget-action-bar .action-item {
	margin-right: 16px;
	pointer-events: none;
}

.action-widget-action-bar .action-label:hover {
	background-color: transparent !important;
}

.monaco-action-bar .actions-container.highlight-toggled .action-label.checked {
	/* The important gives this rule precedence over the hover rule. */
	background: var(--vscode-actionBar-toggledBackground) !important;
}

.action-widget .monaco-list .monaco-list-row .description {
	color: var(--vscode-descriptionForeground);
	margin-left: 0.5em;
	font-size: 12px;
}

.action-widget .monaco-list .monaco-list-row .description a {
	color: var(--vscode-textLink-foreground);
}

.action-widget .monaco-list .monaco-list-row .description a:hover,
.action-widget .monaco-list .monaco-list-row .description a:active {
	color: var(--vscode-textLink-activeForeground);
}

.action-widget .monaco-list-row.action .group-title {
	color: var(--vscode-descriptionForeground);
	margin-left: 0.5em;
	margin-right: 6px;
	font-size: 12px;
	flex-shrink: 0;
}

/* Items with detail — show detail as subtext below the title */
.action-widget .monaco-list .monaco-list-row.action {
	&:has(.detail:not([style*="display: none"])) {
		flex-wrap: wrap;
		align-content: center;
		padding-right: 6px;

		.title {
			line-height: 14px;
		}
	}
}

/* Inline description mode — description rendered right after the label */
.action-widget .inline-description .monaco-list-row.action {
	/* Override the row gap so group-title and toolbar sit flush */
	gap: 0;

	.title {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: 6px;
	}

	.description {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.group-title {
		margin-left: auto;
	}

	.action-list-item-toolbar {
		margin-left: 4px;
		margin-right: 10px;
	}

	/* When description is hidden (e.g. items with only a submenu), push the
	 * submenu chevron to the far right using an auto left margin. When
	 * description is visible it already consumes all available space via
	 * flex:1, so the auto margin has no additional effect. */
	.action-list-submenu-indicator {
		margin-left: auto;
		margin-right: 10px;
	}
}

/* Item toolbar - shows on hover/focus */
.action-widget .monaco-list-row.action .action-list-item-toolbar {
	display: none;
}

.action-widget .monaco-list-row.focused.action.has-toolbar .action-list-item-toolbar,
.action-widget .monaco-list-row:hover.action.has-toolbar .action-list-item-toolbar {
	display: flex;
}

.action-widget .monaco-list-row .action-list-item-toolbar .monaco-action-bar:not(.vertical) .action-label:not(.disabled):hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.action-widget-delegate-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}

/* Filter input */
.action-widget .action-list-filter {
	padding: 2px 2px 4px 2px;
}

.action-widget .action-list-filter-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-right: 10px;
}

.action-widget .action-list-filter:first-child {
	border-bottom: none;
}

.action-widget .action-list-filter:last-child {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
}

.action-widget .action-list-filter-input {
	width: 100%;
	flex: 1;
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid var(--vscode-input-border, transparent);
	border-radius: 3px;
	background-color: var(--vscode-input-background);
	color: var(--vscode-input-foreground);
	outline: none;
}

.action-widget .action-list-filter-input:focus {
	border-color: var(--vscode-focusBorder);
}

.action-widget .action-list-filter-input::placeholder {
	color: var(--vscode-input-placeholderForeground);
}

.action-widget .action-list-filter-actions .action-label {
	padding: 3px;
	border-radius: 3px;
}

.action-widget .action-list-filter-actions .action-label:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.action-widget .action-list-filter-label {
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
	flex-shrink: 0;
	margin-right: 2px;
}

/* Footer text */
.action-widget .action-list-footer {
	color: var(--vscode-descriptionForeground);
	font-size: 11px;
	/* Left padding matches the list row padding so the text aligns with the section headings. */
	padding: 4px 10px 2px 6px;
	/* Space between the last list item and the divider above the footer. */
	margin-top: 4px;
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
}

/* Header banner */
.action-widget .action-list-header {
	display: flex;
	align-items: flex-start;
	/* Match the row gap so the text aligns with the item labels. */
	gap: 6px;
	color: var(--vscode-foreground);
	font-size: 12px;
	line-height: 16px;
	/* Match the row padding so the icon sits in the item icon column and the text aligns with the item labels. Top padding matches the left so the icon is evenly inset. */
	padding: 6px 12px 6px 6px;
	/* No horizontal margin so the rounded box matches the item hover outline. */
	margin-bottom: 2px;
	background-color: var(--vscode-chat-requestBubbleBackground);
	border-radius: var(--vscode-cornerRadius-medium);
}

/* Give widgets with a header banner more room so the banner text reads well. */
.action-widget:has(.action-list-header) {
	min-width: 160px;
}

.action-widget .action-list-header .action-list-header-icon {
	flex-shrink: 0;
	/* Match the row icon column so the icon centers on the item icon column and the text lines up with the item labels. The filled info glyph reads optically heavier than the item check icon, so render it slightly smaller. */
	width: 12px;
	text-align: center;
	font-size: 12px !important;
	line-height: 16px;
	color: var(--vscode-descriptionForeground);
}

.action-widget .action-list-header .action-list-header-text {
	flex: 1;
	font-size: 11px;
}

/* Anchor for the absolutely-positioned submenu panel */
.action-widget .actionList {
	position: relative;
}

.action-widget .action-list-submenu-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 4px;
}

.action-widget .action-list-submenu-indicator.has-submenu {
	opacity: 0.6;
}

.action-widget .monaco-list-row.action .action-list-submenu-indicator.codicon {
	display: flex;
	font-size: 16px;
}

.action-list-submenu-panel {
	background-color: var(--vscode-menu-background);
	color: var(--vscode-menu-foreground);
	border: 1px solid var(--vscode-menu-border, var(--vscode-editorHoverWidget-border));
	border-radius: 5px;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
	z-index: 50;
	width: max-content;
	outline: none;
}

.action-list-submenu-hover-header {
	padding: 4px 8px;
	line-height: 1.4em;
	font-size: 12px;
	max-width: 300px;
	word-wrap: break-word;
	-webkit-user-select: text;
	user-select: text;
}

.action-list-submenu-hover-header a {
	color: var(--vscode-textLink-foreground);
}

.action-list-submenu-hover-header a:hover,
.action-list-submenu-hover-header a:active {
	color: var(--vscode-textLink-activeForeground);
}

.action-list-submenu-hover-header.has-submenu {
	border-bottom: 1px solid var(--vscode-menu-separatorBackground, var(--vscode-editorWidget-border));
}

.action-list-submenu-hover-header > p {
	margin-left: 0;
	margin-right: 0;
}

.action-list-submenu-hover-header > p:first-child {
	margin-top: 0;
}

.action-list-submenu-hover-header > p:last-child {
	margin-bottom: 0;
}