Use unique dom element to style active activiy bar elements

src/vs/workbench/browser/parts/activitybar/activitybarActions.ts

@@ -281,18 +281,8 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
 	if (activeBorderColor) {
 		collector.addRule(`
-			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:before {
-				content: "";
-				position: absolute;
-				z-index: 1;
-				top: 0;
-				bottom: 0;
-				margin: auto;
-				left: 0;
-				width: 100%;
-				height: calc(100% - 10px);
-				margin-left: 1px;
-				border-left: 2px solid ${activeBorderColor};
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before {
+				border-left-color: ${activeBorderColor};
 			}
 		`);
 	}
@@ -300,15 +290,8 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
 	if (activeForegroundColor) {
 		collector.addRule(`
-			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:after {
-				content: "";
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				margin: auto;
-				width: 100%;
-				height: calc(100% - 10px);
-				margin-left: 1px;
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item {
+				z-index: 0;
 				background-color: ${activeBackgroundColor};
 			}
 		`);
@@ -321,11 +304,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:before {
 				content: "";
 				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				margin: auto;
-				height: calc(100% - 10px);
+				top: 9px;
+				left: 9px;
+				height: 32px;
 				width: 32px;
 			}
 

src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -22,32 +22,56 @@
 	font-size: 15px;
 }
 
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before,
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	content: "";
 	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	height: calc(100% - 10px);
+	top: 9px;
+	height: 32px;
+	z-index: 1;
+	top: 5px;
+	height: 40px;
 	width: 0;
 	border-left: 2px solid;
 }
 
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before {
+	top: 0;
+	height: 100%;
+}
+
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus .active-item:before {
+	border-left: none; /* don't show active border + focus at the same time, focus takes priority */
+}
+
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.clicked:focus:before {
 	border-left: none !important; /* no focus feedback when using mouse */
 }
 
+.monaco-workbench .activitybar.left > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before,
 .monaco-workbench .activitybar.left > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	left: 1px;
 }
 
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before,
 .monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	right: 1px;
 }
 
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item:before {
+	right: 2px;
+}
+
+/* Hides outline on HC as focus is handled by border */
+.hc-black .monaco-workbench .activitybar.left > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before,
+.hc-black .monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
+	outline: none;
+}
+
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .active-item,
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge {
 	position: absolute;
+	z-index: 1;
 	top: 5px;
 	left: 0;
 	overflow: hidden;

src/vs/workbench/browser/parts/compositeBarActions.ts

@@ -213,6 +213,9 @@ export class ActivityActionViewItem extends BaseActionViewItem {
 		this.badge = dom.append(container, dom.$('.badge'));
 		this.badgeContent = dom.append(this.badge, dom.$('.badge-content'));
 
+		// Active border + background
+		dom.append(container, dom.$('.active-item'));
+
 		dom.hide(this.badge);
 
 		this.updateActivity();

src/vs/workbench/common/theme.ts

@@ -349,12 +349,12 @@ export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', {
 export const ACTIVITY_BAR_ACTIVE_BORDER = registerColor('activityBar.activeBorder', {
 	dark: ACTIVITY_BAR_FOREGROUND,
 	light: ACTIVITY_BAR_FOREGROUND,
-	hc: ACTIVITY_BAR_FOREGROUND
+	hc: transparent(Color.white, 0)
 }, nls.localize('activityBarActiveBorder', "Activity bar border for active items. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
 export const ACTIVITY_BAR_ACTIVE_BACKGROUND = registerColor('activityBar.activeBackground', {
-	dark: transparent(ACTIVITY_BAR_FOREGROUND, 0.1),
-	light: transparent(ACTIVITY_BAR_FOREGROUND, 0.1),
+	dark: null,
+	light: null,
 	hc: null
 }, nls.localize('activityBarActiveBorder', "Activity bar border for active items. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));