overleaf/services/web/public/stylesheets/app/editor/review-panel.less

@rp-base-font-size      : 12px;
@rp-small-font-size     : 10px;
@rp-icon-large-size     : 18px;

@rp-bg-blue             : #dadfed;
@rp-bg-dim-blue         : #fafafa;
@rp-highlight-blue      : #8a96b5;

@rp-border-grey         : #d9d9d9;

@rp-green               : #2c8e30;
@rp-green-on-dark		: rgba(37, 107, 41, 0.5);
@rp-red                 : #c5060b;
@rp-yellow              : #f3b111;
@rp-yellow-on-dark		: rgba(194, 93, 11, 0.5);
@rp-grey                : #aaaaaa;

@rp-type-blue           : #6b7797;
@rp-type-darkgrey       : #3f3f3f;

@rp-entry-ribbon-width  : 4px;
@rp-entry-arrow-width   : 6px;
@rp-semibold-weight     : 600;
@review-panel-width     : 230px;
@review-off-width       : 22px;

@rp-toolbar-height      : 32px;

@rp-entry-animation-speed: 0.3s;



.rp-button() {
	display: block; // IE doesn't do flex with inline items.
	background-color: @rp-highlight-blue;
	color: #FFF;
	text-align: center;
	line-height: 1.3;
	user-select: none;
	border: 0;

	&:hover,
	&:focus {
		outline: 0;
		background-color: darken(@rp-highlight-blue, 5%);
		text-decoration: none;
		color: #FFF;
	}

	&[disabled] {
		background-color: tint(@rp-highlight-blue, 50%);

		&:hover,
		&:focus {
			background-color: tint(@rp-highlight-blue, 50%);
		}
	}
}

.triangle(@_, @width, @height, @color) {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
}
	.triangle(top, @width, @height, @color) {
		border-width: 0 @width/2 @height @width/2;
		border-bottom-color: @color;
		border-left-color: transparent;
		border-right-color: transparent;
	}
	.triangle(bottom, @width, @height, @color) {
		border-width: @height @width/2 0 @width/2;
		border-top-color: @color;
		border-left-color: transparent;
		border-right-color: transparent;
	}
	.triangle(right, @width, @height, @color) {
		border-width: @height/2 0 @height/2 @width;
		border-left-color: @color;
		border-top-color: transparent;
		border-bottom-color: transparent;
	}
	.triangle(left, @width, @height, @color) {
		border-width: @height/2 @width @height/2 0;
		border-right-color: @color;
		border-top-color: transparent;
		border-bottom-color: transparent;
	}

#review-panel {
	display: block;
	.rp-size-expanded & {
		display: flex;
		flex-direction: column;
		width: @review-panel-width;
		overflow: visible;
		border-left-width: 1px;
	}
	.rp-size-mini & {
		width: @review-off-width;
		z-index: 6;
		border-left-width: 1px;
	}
	
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background-color: @rp-bg-blue;
	border-left: solid 0px @rp-border-grey;
	font-size: @rp-base-font-size;
	color: @rp-type-blue;
	z-index: 6;
}

.loading-panel {
	.rp-size-expanded & {
		right: @review-panel-width;
	}
}

.review-panel-toolbar {
	display: none;
	.rp-size-expanded & {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px;
	}

	position: relative;
	height: @rp-toolbar-height;
	border-bottom: 1px solid @rp-border-grey;
	background-color: @rp-bg-dim-blue;
	text-align: center;
	z-index: 3;
	flex-basis: 32px;
	flex-shrink: 0;
}
	.review-panel-toolbar-label {
		cursor: pointer;
		text-align: right;
		flex-grow: 1;
	}
		.review-panel-toolbar-label-disabled {
			cursor: auto;
			margin-right: 5px;
		}
	.review-panel-toolbar-spinner {
		margin-left: 5px;
	}

.rp-entry-list {
	display: none;
	width: 100%;

	.rp-size-expanded &,
	.rp-size-mini & {
		display: block;
	}
	
	.rp-state-current-file & {
		position: absolute;
		top: 0;
		bottom: 0;
		padding-bottom: 52px;
	}
	
	.rp-state-overview & {
		flex-grow: 2;
		overflow-y: auto;
	}
}

.rp-entry-list-inner {
	position: relative;
}

.rp-entry-indicator {
	display: none;
	.rp-size-mini & {
		display: block;
	}
	.rp-size-mini &-add-comment {
		display: none;
	}
	position: absolute;
	left: 2px;
	right: 2px;
	text-align: center;
	background-color: @rp-highlight-blue;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
	transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
	.no-animate & {
		transition: none;
	}
	
	&-focused {
		left: 0px;
		right: 4px;
		z-index: 1;
	}

}

.rp-entry-wrapper {
	&:hover .rp-entry-insert,
	&:hover .rp-entry-delete,
	&:hover .rp-entry-comment {
		display: block;
	}
}

.rp-entry {
	.rp-state-current-file & {
		position: absolute;
		width: @review-panel-width;
	}
	.rp-state-current-file-mini & {
		display: none;
		left: @review-off-width + @rp-entry-arrow-width;
		box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			top:  -(@review-off-width + @rp-entry-arrow-width);
			right: -(@review-off-width + @rp-entry-arrow-width);
			bottom: -(@review-off-width + @rp-entry-arrow-width);
			left: -(2 * @rp-entry-arrow-width + 2);
			z-index: -1;
		}
		&::after {
			.triangle(left, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
			top: (@review-off-width / 2) - @rp-entry-arrow-width;
			left: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
			content: '';
		}
	}
	.rp-state-current-file-mini.rp-layout-left & {
		left: auto;
		right: @review-off-width + @rp-entry-arrow-width;
		border-left-width: 0;
		border-right-width: @rp-entry-ribbon-width;
		border-right-style: solid;

		&::before {
			left: -(@review-off-width + @rp-entry-arrow-width);
			right: -(2 * @rp-entry-arrow-width + 2);
		}
		&::after {
			.triangle(right, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
			right: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
			left: auto;
		}
	}
	.rp-state-current-file-expanded & {
		left: 5px;
		right: 5px;
		width: auto;

		&-focused {
			left: -2px;
			right: 12px;
			z-index: 1;
		}

		&-add-comment {
			right: auto;

			&.rp-entry-adding-comment {
				right: 5px;
			}
		}
		&-bulk-actions {
			right: auto;
		}
	}
	.rp-state-overview & {
		border-radius: 0;
		border-bottom: solid 1px @rp-border-grey;
		cursor: pointer;
	}
	.resolved-comments-dropdown & {
		position: static;
		margin-bottom: 5px;
	}

	border-left: solid @rp-entry-ribbon-width transparent;
	border-radius: 3px;
	background-color: #FFF;
	transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
	.no-animate & {
		transition: none;
	}

	&-insert {
		border-color: @rp-green;
	}

	&-delete {
		border-color: @rp-red;
	}

	&-comment {
		border-color: @rp-yellow;
	}
	
	&-comment-resolving {
		top: 4px;
		left: 6px;
		opacity: 0;
		z-index: 3;
		transform: scale(.1);
		transform-origin: 0 0;
		transition: top .35s ease-out, left .35s ease-out, transform .35s ease-out, opacity .35s ease-out .2s;
	}
	
	&-comment-resolved {
		border-color: @rp-grey;
		background-color: #efefef;
	}

	&-add-comment {
		background-color: transparent;
		right: auto;
		border-left-width: 0;

		&.rp-entry-adding-comment {
			background-color: #FFF;
			right: 5px;
			border-left-width: 3px;
			border-left-color: @rp-yellow;
		}
	}

	&-bulk-actions {
		background-color: transparent;
		right: auto;
		border-left-width: 0;
	}
}
	.rp-entry-body {
		display: flex;
		align-items: center;
		padding: 4px 5px;
	}
		.rp-entry-action-icon {
			font-size: @rp-icon-large-size;
			padding: 0 3px;
			line-height: 0;

			.rp-state-overview & {
				display: none;
			}
		}

		.rp-entry-details {
			line-height: 1.4;
			margin-left: 5px;
			// We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
			// This is needed to ensure that IE makes the element fill the available space. 
			flex: 1 0 1px; 
			overflow-x: auto;

			.rp-state-overview & {
				margin-left: 0;
			}
		}

			.rp-entry-metadata {
				font-size: @rp-small-font-size;
			}
				.rp-entry-user {
					font-weight: @rp-semibold-weight;
					font-style: normal;
				}
				.rp-comment-actions {
					a { color: @rp-type-blue; }
				}

			.rp-content-highlight {
				color: @rp-type-darkgrey;
				font-weight: @rp-semibold-weight;
				text-decoration: none;

				.rp-entry-delete & {
					text-decoration: line-through;
				}
			}

	.rp-entry-actions {
		display: flex;

		.rp-state-overview .rp-entry-list & {
			display: none;
		}
	}
		.rp-entry-button {
			.rp-button();
			flex: 1 1 50%;
			border-right: solid 1px #FFF;
			padding: 2px 0;

			&:last-child {
				border-bottom-right-radius: 3px;
				border-right-width: 0;
			}

			.rp-state-current-file-mini.rp-layout-left & {
				&:first-child {
					border-bottom-left-radius: 3px;
				}
				&:last-child {
					border-bottom-right-radius: 0;
				}
			}
		}

	.rp-comment {
		margin: 2px 5px;
		padding-bottom: 3px;
		line-height: 1.4;
		border-bottom: solid 1px @rp-border-grey;

		&:last-child {
			margin-bottom: 2px;
			border-bottom-width: 0;
		}

		.rp-state-overview .rp-entry-list & {
			margin: 4px 5px;

			&:first-child {
				margin-top: 0;
				padding-top: 4px;
			}
		}
	}
		.rp-comment-content {
			margin: 0;
			color: @rp-type-darkgrey;
			overflow-x: auto; // Long words, like links can overflow without this.
		}
	
	.rp-comment-resolver {
		color: @rp-type-blue;
	}
		.rp-comment-resolver-content {
			font-style: italic;
			margin: 0;
		}

	.rp-comment-reply {
		padding: 0 5px;
	}

	.rp-add-comment-btn,
	.rp-bulk-actions-btn {
		.rp-button();
		display: inline-block;
		padding: 5px 10px;
		border-radius: 3px;

		.rp-in-editor-widgets & {
			display: block;
			white-space: nowrap;
			border-radius: 0;

			&:last-child {
				border-bottom-left-radius: 3px;
			}
		}
	}

	.rp-bulk-actions-btn {
		border-radius: 0;
		&:first-child {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
		&:last-child {
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			margin-left: 1px;
		}
	}

	.rp-new-comment {
		padding: 5px;
	}

	.rp-comment-input {
		width: 100%;
		font-size: @rp-base-font-size;
		padding: 2px 5px;
		border-radius: 3px;
		border: solid 1px @rp-border-grey;
		resize: vertical;
		color: @rp-type-darkgrey;
		margin-top: 3px;
		overflow-x: hidden;
		min-height: 3em;
		max-height: 400px;
	}

.rp-icon-delete {
	display: inline-block;
	line-height: 1;
	font-style: normal;
	font-size: 0.8em;
	text-decoration: line-through;
	font-weight: @rp-semibold-weight;
	&::before {
		content: 'Ab';
	}
}

.rp-resolved-comment {
	border-left: solid @rp-entry-ribbon-width @rp-yellow;
	border-radius: 3px;
	background-color: #FFF;
	margin-bottom: 5px;
}
	.rp-resolved-comment-context {
		background-color: lighten(@rp-yellow, 35%);
		padding: 4px 5px;
	}
		.rp-resolved-comment-context-file {
			font-weight: @rp-semibold-weight;
		}

		.rp-resolved-comment-context-quote {
			color: #000;
			font-family: @font-family-monospace;
			margin: 0;
		}

.rp-entry-callout {
	transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed;
	.rp-state-current-file & {
		position: absolute;
		border-top: 1px solid grey;
		border-right: 1px dashed grey;
		&::after {
			content: "";
			position: absolute;
			top: -1px;
			left: 3px;
			bottom: 0;
			border-bottom: 1px solid grey;
		}
	}
	.rp-state-current-file-expanded & {
		width: 3px;
		&::after {
			width: 3px;
		}
	}
	.rp-state-current-file-mini & {
		width: 1px;
		&::after {
			width: 1px;
		}
	}
	
	.rp-state-overview & {
		display: none;
	}
	
	.rp-state-current-file &-inverted {
		border-top: none;
		border-bottom: 1px solid grey;
		&::after {
			top: 0px;
			bottom: -1px;
			border-top: 1px solid grey;
			border-bottom: none;
		}
	}
	
	.rp-state-current-file &-insert {
		border-color: @rp-green;
		&::after {
			border-color: @rp-green;
		}
	}
	
	.rp-state-current-file &-delete {
		border-color: @rp-red;
		&::after {
			border-color: @rp-red;
		}
	}
	
	.rp-state-current-file &-comment {
		border-color: @rp-yellow;
		&::after {
			border-color: @rp-yellow;
		}
	}

	.rp-size-mini &-add-comment {
		display: none;
	}
}

.rp-overview-file-header {
	padding: 2px 5px;
	border-top: solid 1px @rp-border-grey;
	border-bottom: solid 1px @rp-border-grey;
	background-color: @rp-bg-dim-blue;
	margin-top: 10px;
	font-weight: @rp-semibold-weight;
	text-align: center;
	cursor: pointer;
}

	.rp-overview-file-num-entries {
		font-weight: normal;
		font-size: 0.9em;
	}
	.rp-overview-file-header-collapse {
		display: inline-block;
		float: left;
		transform: rotateZ(0deg);
		transition: transform 0.15s ease
	}
	
	.rp-overview-file-header-collapse-on {
		transform: rotateZ(-90deg);
	}

	.rp-overview-file-entries {
		overflow: hidden;
	}

.rp-comment-wrapper {
	transition: .35s opacity ease-out .2s;

	&-resolving {
		opacity: 0;
	}
}

.rp-loading,
.rp-empty {
	text-align: center;
	padding: 5px;
}

.rp-nav {
	display: none;
	flex-shrink: 0;
	.rp-size-expanded & {
		display: flex;
	}

	.rp-state-current-file & {
		position: absolute;
		bottom: 0;
	}
	width: 100%;
	font-size: @rp-icon-large-size;
	text-align: center;
	background-color: @rp-bg-dim-blue;
	border-top: solid 1px @rp-border-grey;
	z-index: 2;
}
	.rp-nav-item {
		display: block;
		color: lighten(@rp-type-blue, 25%);
		flex: 0 0 50%;
		border-top: solid 3px transparent;
		padding-bottom: 2px;

		&:hover,
		&:focus {
			text-decoration: none;
			color: @rp-type-blue;
		}

		&-active {
			color: @rp-type-blue;
			border-top: solid 3px @rp-highlight-blue;
		}
	}
		.rp-nav-label {
			display: block;
			font-size: @rp-base-font-size;
		}

#editor {
	.rp-size-mini & {
		right: @review-off-width;
		.ace-editor-body {
			overflow: visible;
			.ace_scrollbar-v {
				right: -@review-off-width;
			}
		}
	}

	.rp-size-expanded & {
		right: @review-panel-width;
		left: 0px;
		width: auto;
	}
	
	.rp-state-current-file-expanded & {
		.ace-editor-body {
			overflow: visible;
			.ace_scrollbar-v {
				right: -@review-panel-width;
			}
		}
	}
}

.rp-toggle {
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
}
	.rp-toggle-hidden-input {
		display: none;

		+ .rp-toggle-btn {
			display: block;
			width: 3.5em;
			height: 1.75em;
			position: relative;
			outline: 0;
			margin: 0;
			font-weight: normal;
			cursor: pointer;
			user-select: none;
			padding: 1px;
			background-color: @rp-highlight-blue;
			border: 1px solid #FFF;
			border-radius: .875em;
			transition: background .15s ease, border-color 0.15s ease;

			&::before {
				content: '';
				display: block;
				width: 50%;
				height: 100%;
				position: relative;
				left: 0;
				background-color: #FFF;
				border-radius: .875em;
				transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
			}
		}

		&:checked + .rp-toggle-btn {
			background-color: @red;
			border-color: #FFF;

			&::before {
				left: 50%;
				background-color: #FFF;
			}
		}
	}

.ace-editor-wrapper {
	.track-changes-marker-callout {
		border-radius: 0;
		position: absolute;
		.rp-state-overview &, .rp-loading-threads & {
			display: none;
		}
	}
	.track-changes-added-marker-callout {
		border-bottom: 1px dashed @rp-green;
	}
	.track-changes-comment-marker-callout {
		border-bottom: 1px dashed @rp-yellow;
	}
	.track-changes-deleted-marker-callout {
		border-bottom: 1px dashed @rp-red;
	}
	
	.track-changes-marker {
		border-radius: 0;
		position: absolute;
		.rp-loading-threads & {
			display: none;
		}
		z-index: 6 // Appear above text selection
	}

	.track-changes-comment-marker {
		background-color: @rp-yellow;
		opacity: 0.3;
	}
	.track-changes-added-marker {
		background-color: @rp-green;
		opacity: 0.3;
	}
	.track-changes-deleted-marker {
		border-left: 2px dotted @rp-red;
		margin-left: -1px;
	}

	.ace_dark {
		.track-changes-comment-marker {
			background-color: @rp-yellow-on-dark
		}
		.track-changes-added-marker {
			background-color: @rp-green-on-dark;
		}	
	}
}

.review-icon {
	display: inline-block;
	background: url('/img/review-icon-sprite.png') top/30px no-repeat;
	width: 30px;

	&::before {
		content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
	}

	.toolbar .btn-full-height:hover & {
		background-position-y: -30px;
	}

	.toolbar .btn-full-height.active &,
	.toolbar .btn-full-height:active & {
		background-position-y: -60px;
	}
	
	@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
		background-image: url('/img/review-icon-sprite@2x.png');
	}
}

.resolved-comments-toggle {
	font-size: 14px;
	color: lighten(@rp-type-blue, 25%);
	border: solid 1px @rp-border-grey;
	border-radius: 3px;
	padding: 0 4px;
	display: block;
	height: 22px;
	width: 22px;
	line-height: 1.4;

	&:hover,
	&:focus {
		text-decoration: none;
		color: @rp-type-blue;
	}
}

.resolved-comments-backdrop {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	&-visible {
		display: block;
	}
}

.resolved-comments-dropdown {
	display: none;
	position: absolute;
	width: 300px;
	left: -150px;
	max-height: ~"calc(100vh - 100px)";
	margin-top: @rp-entry-arrow-width * 1.5;
	margin-left: 1em;
	background-color: @rp-bg-blue;
	text-align: left;
	align-items: stretch;
	justify-content: center;
	border-radius: 3px;
	box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3);

	&::before {
		content: '';
		.triangle(top, @rp-entry-arrow-width * 3, @rp-entry-arrow-width * 1.5, @rp-bg-blue);
		top: -@rp-entry-ribbon-width * 2;
		left: 50%;
		margin-left: -@rp-entry-arrow-width * .75;
	}

	&-open {
		display: flex;
	}
}
	.resolved-comments-scroller {
		flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
		width: 100%; // We need to set the width explicitly, as flex-basis won't work.
		max-height: ~"calc(100vh - 100px)"; // We also need to explicitly set the max-height, IE won't compute the flex-determined height.
		padding: 5px;
		overflow-y: auto;
	}

.rp-collapse-toggle {
	color: @rp-type-blue;
	font-weight: @rp-semibold-weight;

	&:hover,
	&:focus {
		color: darken(@rp-type-blue, 5%);
		text-decoration: none;
	}
}

.rp-in-editor-widgets {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 11px;
	z-index: 2;
	
	.rp-size-mini & {
		right: @review-off-width;
	}
	.rp-size-expanded & {
		display: none;
	}
}
	.rp-track-changes-indicator {
		display: block;
		padding: 5px 10px;
		background-color: rgba(240, 240, 240, 0.9);
		color: @rp-type-blue;
		text-align: center;
		border-bottom-left-radius: 3px;
		white-space: nowrap;

		&.rp-track-changes-indicator-on-dark {
			background-color: rgba(88, 88, 88, .8);
			color: #FFF;
			
			&:hover,
			&:focus {
				background-color: rgba(88, 88, 88, 1);
				color: #FFF;
			}
		}

		&:hover,
		&:focus {
			outline: 0;
			text-decoration: none;
			background-color: rgba(240, 240, 240, 1);
			color: @rp-type-blue;
		}
	}

// Helper class for elements which aren't treated as flex-items by IE10, e.g:
// * inline items;
// * unknown elements (elements which aren't standard DOM elements, such as custom element directives)
.rp-flex-block {
	display: block;
}