Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
 Path: blob/main/src/vs/sessions/browser/parts/media/chatCompositeBar.css
13509 views
1
/*---------------------------------------------------------------------------------------------

2
 *  Copyright (c) Microsoft Corporation. All rights reserved.

3
 *  Licensed under the MIT License. See License.txt in the project root for license information.

4
 *--------------------------------------------------------------------------------------------*/

5


6
.chat-composite-bar {

7
	display: flex;

8
	align-items: center;

9
	background-color: var(--chat-bar-background);

10
	padding: 0 4px;

11
	height: 35px;

12
	flex-shrink: 0;

13
	overflow: hidden;

14
}

15


16
.chat-composite-bar-tabs {

17
	display: flex;

18
	align-items: center;

19
	height: 100%;

20
	gap: 0;

21
	overflow-x: auto;

22
	overflow-y: hidden;

23
}

24


25
.chat-composite-bar-tabs::-webkit-scrollbar {

26
	display: none;

27
}

28


29
/* Base tab: preserve chat title casing while keeping the same pill treatment */

30
.chat-composite-bar-tab {

31
	display: flex;

32
	align-items: center;

33
	position: relative;

34
	padding: 0 8px;

35
	cursor: pointer;

36
	white-space: nowrap;

37
	color: var(--chat-tab-inactive-foreground);

38
	font-weight: 500;

39
	font-size: 12px;

40
	line-height: 22px;

41
	height: 26px;

42
	border-radius: 4px;

43
	user-select: none;

44
}

45


46
.chat-composite-bar-tab:hover {

47
	color: var(--chat-tab-active-foreground);

48
}

49


50
/* Active state: background container instead of underline — mirrors auxiliarybar checked */

51
.chat-composite-bar-tab.active {

52
	color: var(--chat-tab-active-foreground);

53
	background-color: color-mix(in srgb, var(--vscode-agentsPanel-foreground, var(--vscode-foreground)) 5%, transparent);

54
}

55


56
/* Reduce right padding when close button is present to avoid excess spacing */

57
.chat-composite-bar-tab:has(.chat-composite-bar-tab-actions) {

58
	padding-right: 2px;

59
}

60


61
/* Hide the underline indicator — mirrors auxiliarybar active-item-indicator hiding */

62
.chat-composite-bar-tab-indicator {

63
	display: none;

64
}

65


66
.chat-composite-bar-tab:focus-visible {

67
	outline: 1px solid var(--vscode-focusBorder);

68
	outline-offset: -1px;

69
}

70


71
/* Remove action bar — always occupies space; opacity toggled like editor tabs */

72
.chat-composite-bar-tab-actions {

73
	display: flex;

74
	margin-left: 2px;

75
}

76


77
.chat-composite-bar-tab-actions .action-item .action-label {

78
	width: 16px;

79
	height: 16px;

80
	border-radius: 4px;

81
	color: var(--chat-tab-inactive-foreground, currentColor);

82
	opacity: 0;

83
}

84


85
.chat-composite-bar-tab.active .chat-composite-bar-tab-actions .action-label,

86
.chat-composite-bar-tab:hover .chat-composite-bar-tab-actions .action-label,

87
.chat-composite-bar-tab-actions .action-label:focus {

88
	opacity: 1;

89
}

90


91
.chat-composite-bar-tab-actions .action-item .action-label:hover {

92
	background-color: var(--vscode-toolbar-hoverBackground);

93
	color: var(--chat-tab-active-foreground);

94
}

95


96