vscode/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css

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

/* CI Status Widget - beneath the files list */
.ci-status-widget {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 12px;
}

/* Header */
.ci-status-widget-header {
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px;
	margin-top: 4px;
	border-radius: 4px;
	min-height: 22px;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}

.ci-status-widget-header:hover {
	background-color: var(--vscode-list-hoverBackground);
	padding-right: 22px;
}

.ci-status-widget-header:focus {
	padding-right: 22px;
}

.ci-status-widget-header:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

/* Chevron — right-aligned, visible on hover only */
.ci-status-widget-header .group-chevron {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	visibility: hidden;
	opacity: 0;
}

.ci-status-widget-header:hover .group-chevron,
.ci-status-widget-header:focus-within .group-chevron {
	visibility: visible;
	opacity: 0.7;
}

/* Title - single line, overflow ellipsis */
.ci-status-widget-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	color: var(--vscode-foreground);
}

.ci-status-widget-title-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Status count badges in the header */
.ci-status-widget-counts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	padding-right: 8px;
}

.ci-status-widget-header:hover .ci-status-widget-counts, .ci-status-widget-header:focus .ci-status-widget-counts {
	visibility: hidden;
}

.ci-status-widget-count-badge {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	line-height: 1;
}

.ci-status-widget-count-badge .codicon {
	font-size: 14px;
}

.ci-status-widget-count-badge.ci-status-success .codicon {
	color: var(--vscode-testing-iconPassed, #73c991);
}

.ci-status-widget-count-badge.ci-status-failure .codicon {
	color: var(--vscode-testing-iconFailed, #f14c4c);
}

.ci-status-widget-count-badge.ci-status-running .codicon {
	color: var(--vscode-testing-iconQueued, var(--vscode-editorWarning-foreground));
}

.ci-status-widget-count-badge.ci-status-pending .codicon {
	color: var(--vscode-descriptionForeground);
}

.ci-status-widget-header-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.ci-status-widget-header-actions .monaco-action-bar {
	display: flex;
	align-items: center;
}

.ci-status-widget-header-actions .action-item .action-label {
	width: 16px;
	height: 16px;
}

/* Body - check list */
.ci-status-widget-body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.ci-status-widget-list {
	background-color: transparent;
}

.ci-status-widget-list > .monaco-list,
.ci-status-widget-list > .monaco-list > .monaco-scrollable-element {
	background-color: transparent;
}

/* Individual check row */
.ci-status-widget .ci-status-widget-list .monaco-list-row {
	border-radius: 4px;
}

.ci-status-widget-check {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.ci-status-widget-check-label {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.ci-status-widget-check-label .monaco-icon-label {
	display: flex;
	flex: 1;
	min-width: 0;
	width: 100%;
}

.ci-status-widget-check-label .monaco-icon-label::before {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.ci-status-widget-check-label .monaco-icon-label-container,
.ci-status-widget-check-label .monaco-icon-name-container {
	display: block;
	min-width: 0;
	overflow: hidden;
}

.ci-status-widget-check-label .label-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vscode-foreground);
}

.ci-status-widget-check.ci-status-success .monaco-icon-label::before {
	color: var(--vscode-testing-iconPassed, #73c991);
}

.ci-status-widget-check.ci-status-failure .monaco-icon-label::before {
	color: var(--vscode-testing-iconFailed, #f14c4c);
}

.ci-status-widget-check.ci-status-running .monaco-icon-label::before {
	color: var(--vscode-testing-iconQueued, var(--vscode-editorWarning-foreground));
}

.ci-status-widget-check.ci-status-pending .monaco-icon-label::before {
	color: var(--vscode-descriptionForeground);
}

.ci-status-widget-check.ci-status-neutral .monaco-icon-label::before {
	color: var(--vscode-descriptionForeground);
}

/* Actions - float to the right, visible on hover */
.ci-status-widget-check-actions {
	display: none;
	flex: 0 0 auto;
	flex-shrink: 0;
	margin-left: auto;
}

.ci-status-widget-list .monaco-list-row:hover .ci-status-widget-check-actions,
.ci-status-widget-list .monaco-list-row.focused .ci-status-widget-check-actions,
.ci-status-widget-list .monaco-list-row.selected .ci-status-widget-check-actions,
.ci-status-widget-check:hover .ci-status-widget-check-actions {
	display: flex;
}

.ci-status-widget-check-actions .monaco-action-bar {
	display: flex;
	align-items: center;
}

.ci-status-widget-check-actions .action-bar .action-item .action-label {
	width: 16px;
	height: 16px;
}