actionbar.css

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

.monaco-action-bar {
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

.monaco-action-bar .actions-container {
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.monaco-action-bar .action-item {
	cursor: pointer;
	display: inline-block;
	-ms-transition: -ms-transform 100ms ease;
	-webkit-transition: -webkit-transform 100ms ease;
	-moz-transition: -moz-transform 100ms ease;
	-o-transition: -o-transform 100ms ease;
	transition: transform 100ms ease;
	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
}

.monaco-action-bar .action-item.disabled {
	cursor: default;
}

.monaco-action-bar .action-item.active {
	-ms-transform: translate(0, -3px);
	-webkit-transform: translate(0, -3px);
	-moz-transform: translate(0, -3px);
	-o-transform: translate(0, -3px);
	transform: translate(0, -3px);
}

.monaco-action-bar .action-item .icon {
	display: inline-block;
}

.monaco-action-bar .action-label {
	font-size: 12px;
	margin-right: 0.3em;
}

.monaco-action-bar:focus {
	outline: 0;
}

.monaco-action-bar .action-label:focus {
	outline: 0;
}

.monaco-action-bar .action-item.disabled .action-label,
.monaco-action-bar .action-item.disabled .action-label:hover {
	opacity: 0.4;
}

/* Vertical actions */

.monaco-action-bar.vertical {
	text-align: left;
}

.monaco-action-bar.vertical .action-item {
	padding-bottom: 0.1em;
	display: block;
}

.monaco-action-bar.vertical .action-label.separator {
	display: block;
	border-bottom: 1px solid #bbb;
	padding-top: 1px;
	margin-left: .8em;
	margin-right: .8em;
}

.monaco-action-bar.vertical .action-item.active {
	-ms-transform: translate(5px, 0);
	-webkit-transform: translate(5px, 0);
	-moz-transform: translate(5px, 0);
	-o-transform: translate(5px, 0);
	transform: translate(5px, 0);
}

.secondary-actions .monaco-action-bar .action-label {
	margin-left: 6px;
}

.monaco-action-bar .action-item .progress-item .label {
	padding: 0.7em;
	background-color: #1382CE;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
}

.monaco-action-bar .action-item .progress-item .tag {
	display: inline-block;
	vertical-align: top;
	padding: 0.7em 0;
	color: white;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	width: 0;
	transition: width 200ms;
	-webkit-transition: width 200ms;
	-o-transition: width 200ms;
	-moz-transition: width 200ms;
	-ms-transition: width 200ms;
}

.monaco-action-bar .action-item .progress-item .tag.active {
	width: 1.5em;
}

.monaco-action-bar .action-item .progress-item .tag.progress {
	background-color: gray;
}

.monaco-action-bar .action-item .progress-item .tag.done {
	background-color: green;
}

.monaco-action-bar .progress-item .tag.error {
	background-color: #C33;
}

/* Actions widget */

.monaco-actions-widget {
	position: relative;
}

.monaco-actions-widget .more {
	position: absolute;
	top: 0;
	right: 1em;
	font-weight: bold;
	cursor: pointer;
	display: none;
}

.monaco-actions-widget .more.active {
	-ms-transform: translate(0, -3px);
	-webkit-transform: translate(0, -3px);
	-moz-transform: translate(0, -3px);
	-o-transform: translate(0, -3px);
	transform: translate(0, -3px);
}

.monaco-actions-widget .primary {
	display: none;
}

.monaco-actions-widget.hasPrimary .primary {
	display: inherit;
}

.monaco-actions-widget.hasSecondary .more {
	display: inherit;
}

.monaco-actions-widget .secondary.monaco-action-bar {
	display: none;
}

.monaco-actions-widget.more .secondary.monaco-action-bar {
	display: inherit;
}

/* Action Items */
.monaco-action-bar .action-item.select-container {
	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
}

.monaco-workbench .action-bar-select {
	height: 20px;
	margin: 5px 4px;
	outline: none;
}

.vs-dark.monaco-workbench .action-bar-select {
	background-color: #3C3C3C;
	border-color: #3C3C3C;
	color: rgb(204, 204, 204);
}