feedback.css

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-shell .feedback-form {
	width: 420px;
	top: 30px;
	right: 6px;
	padding: 1em;
	cursor: default;
}

.monaco-shell .feedback-form h2 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.8em;
}

.monaco-shell .feedback-form h3 {
	margin: 1em 0 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.2em;
}

.monaco-shell .feedback-form .content {
	font-size: 1.2em;
}

.monaco-shell .feedback-form .content > div {
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
}

.monaco-shell .feedback-form .content .contactus {
	padding: 10px;
	float: right;
}

.monaco-shell .feedback-form .content .channels {
	margin-top: 5px;
	font-size: 0.9em;
}

.monaco-shell .char-counter {
	padding-left: 3px;
}

/* TODO @C5 review link color */
.monaco-shell .feedback-form .content .channels a {
	padding: 2px 0;
}

.monaco-shell .feedback-form .content .channels a:hover {
	text-decoration: underline;
}

.monaco-shell .feedback-form .feedback-alias, .monaco-shell .feedback-form .feedback-description {
	resize: none;
	font-size: 1.1em;
	margin: 6px 0 0;
	width: 100%;
	padding: 3px 2px;
	box-sizing:			border-box;
}

.monaco-shell .feedback-form .feedback-empty {
	margin-top: .2em;
}

.monaco-shell .feedback-form .feedback-alias-checkbox {
	display: inline-block;
	vertical-align: text-top;
	margin-left: 0;
}

.monaco-shell .feedback-form .feedback-alias {
	height: 26px;
}

.monaco-shell .feedback-form .feedback-alias:disabled {
	opacity: 0.6;
}

.monaco-shell .feedback-form .cancel {
	position: absolute;
	top: 0;
	right: 0;
	padding: .5em;
	width: 22px;
	height: 22px;
	border: none;
	cursor: pointer;
}

.monaco-shell .feedback-form .form-buttons {
	margin-top: 18px;
	text-align: right;
}

.monaco-shell .feedback-form .send {
	padding: .5em 1.5em;
	font-size: 1.1em;
	margin: 0;
	box-sizing:			border-box;
	transition: width 200ms ease-out;
}

.monaco-shell .feedback-form .send.in-progress {
	width: 22%;
}

.monaco-shell .feedback-form .send.success,
.monaco-shell .feedback-form .send.error {
	width: 20%;
}

.monaco-shell .feedback-form .sentiment {
	height: 32px;
	width: 32px;
	display: inline-block;
	margin: .5em 0;
	cursor: pointer;
	box-sizing:			border-box;
}

.monaco-shell .feedback-form .sentiment:hover {
	background-color: #eaeaea;
}

/* Statusbar */
.monaco-shell .statusbar-item > .monaco-dropdown.send-feedback {
	display: inline-block;
}

.monaco-shell .statusbar-item > .monaco-dropdown.send-feedback > .dropdown-label.send-feedback {
	-webkit-mask: url('smiley.svg') no-repeat 50% 50%; /* use mask to be able to change color dynamically */
	width: 26px;
}

/* Theming */
.monaco-shell.vs .feedback-form .feedback-alias, .monaco-shell.vs .feedback-form .feedback-description {
	font-family: inherit;
	border: 1px solid transparent;
}


.monaco-shell.vs .feedback-form .cancel {
	background: url('close.svg') center center no-repeat;
}

.monaco-shell .feedback-form .form-buttons {
	display: flex;
}

.monaco-shell .feedback-form .form-buttons .hide-button-container {
	display: flex;
}

.monaco-shell .feedback-form .form-buttons .hide-button-container input,
.monaco-shell .feedback-form .form-buttons .hide-button-container label {
	align-self: center;
}

.monaco-shell .feedback-form .form-buttons .send {
	color: white;
	border: none;
	cursor: pointer;
	background-image: url('twitter.svg');
	background-color: #007ACC;
	background-position: left;
	background-size: 20px;
	background-repeat: no-repeat;
	padding-left: 30px;
	padding-right: 12px;
	border: 4px solid #007ACC;
	border-radius: 4px;
	margin-left: auto;
}

.monaco-shell .feedback-form .form-buttons .send.in-progress,
.monaco-shell .feedback-form .form-buttons .send:hover {
	background-color: #006BB3;
}

.monaco-shell .feedback-form .form-buttons .send:disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: .65;
}

.monaco-shell .feedback-form .form-buttons .send.success {
	background-color: #2d883e;
}

.monaco-shell .feedback-form .form-buttons .send.error {
	background-color: #E51400;
}

.monaco-shell.vs-dark .feedback-form h3 {
	font-weight: normal;
	font-size: 1.2em;
}

.monaco-shell.vs-dark .feedback-form .sentiment:hover {
	background-color: rgba(30,30,30,0.8);
}

.monaco-shell.vs-dark .feedback-form .feedback-alias, .monaco-shell.vs-dark .feedback-form .feedback-description {
	font-family: inherit;
}

.monaco-shell.vs-dark .feedback-form .cancel,
.monaco-shell.hc-black .feedback-form .cancel {
	background: url('close-dark.svg') center center no-repeat;
}

.monaco-shell .feedback-form .sentiment.smile {
	background-image: url('happy.svg');
	background-position: center;
	background-repeat: no-repeat;
}

.monaco-shell .feedback-form .sentiment.frown {
	background-image: url('sad.svg');
	background-position: center;
	background-repeat: no-repeat;
}

.monaco-shell .feedback-form .infotip {
	background-image: url('info.svg');
	background-position: center;
	background-repeat: no-repeat;

	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: text-bottom;
	box-sizing:	border-box;
	margin-left: 5px;
}

/* High Contrast Theming */
.monaco-shell.hc-black .feedback-form {
	outline: 2px solid #6fc3df;
	outline-offset: -2px;
}

.monaco-shell.hc-black .feedback-form .feedback-alias, .monaco-shell.hc-black .feedback-form .feedback-description {
	font-family: inherit;
}

.monaco-shell.hc-black .feedback-form .content .contactus {
	padding: 10px;
	float: right;
}

.monaco-shell.hc-black .feedback-form .form-buttons .send,
.monaco-shell.hc-black .feedback-form .form-buttons .send.in-progress,
.monaco-shell.hc-black .feedback-form .form-buttons .send.success {
	background-color: #0C141F;
	color: #D4D4D4;
	border: 1px solid #6FC3DF;
}

.monaco-shell.hc-black .feedback-form .form-buttons .send:hover {
	background-color: #0C141F;
}


.monaco-shell .feedback-form .infotip {
	background: none;
}

.monaco-shell .feedback-form .infotip:before {
	content: url('info.svg');
	height: 16px;
	width: 16px;
	display: inline-block;
}