Adjustments to synctex controls.

services/web/app/views/project/editor/editor.pug

@@ -73,15 +73,14 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.synctex-control-goto-pdf(
+		a.synctex-control.synctex-control-goto-pdf(
 			tooltip=translate('go_to_code_location_in_pdf')
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
 		)
 			i.synctex-control-icon
-		br
-		a.synctex-control-goto-code(
+		a.synctex-control.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"

services/web/public/stylesheets/app/editor/pdf.less

@@ -231,19 +231,14 @@
 .synctex-controls {
 	position: absolute;
 	z-index: @synctex-controls-z-index;
+	padding: @synctex-controls-padding;
 	top: 68px;
-	padding: 0px 2px;
-	.btn-xs {
-		line-height: 1.3;
-		padding: @synctex-controls-btn-padding;
-	}
 }
 
 .synctex-controls when (@is-overleaf = true) {
-	margin-right: -9px;
+	margin-right: -11px;
 }
-	.synctex-control-goto-pdf,
-	.synctex-control-goto-code {
+	.synctex-control {
 		.btn;
 		.btn-default;
 		.btn-xs;
@@ -257,12 +252,38 @@
 			-moz-osx-font-smoothing: grayscale;
 		}
 	}
+
+	.synctex-control when (@is-overleaf = true) {
+		@ol-synctex-control-size: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1em;
+		width: @ol-synctex-control-size;
+		height: @ol-synctex-control-size;
+		border-radius: @ol-synctex-control-size / 2;
+		padding: 0 0 2px;
+		background-color: fade(@btn-default-bg, 80%);
+		transition: background 0.15s ease;
+		margin-bottom: @ol-synctex-control-size / 2;
+	}
+
+	.synctex-control when (@is-overleaf = false) {
+		line-height: 1.3;
+		padding: 0 2px;
+	}
 	
-	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) {
-		content: "\f061";		
+	.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
+		text-indent: 1px; // "Optical" adjustment.
+		&::before {
+			content: "\f061";		
+		}
 	}
-	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) {
-		content: "\f060";		
+	.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
+		text-indent: -1px; // "Optical" adjustment.
+		&::before {
+			content: "\f060";		
+		}
 	}
 	
 	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {

services/web/public/stylesheets/core/_common-variables.less

@@ -920,7 +920,7 @@
 @editor-resizer-bg-color          : #F4F4F4;
 @editor-resizer-bg-color-dragging : #ddd;
 @synctex-controls-z-index         : 3;
-@synctex-controls-btn-padding     : 0 2px 0;
+@synctex-controls-padding         : 0 2px;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;

services/web/public/stylesheets/core/ol-variables.less

@@ -188,7 +188,7 @@
 @editor-resizer-bg-color          : @ol-blue-gray-6;
 @editor-resizer-bg-color-dragging : transparent;
 @synctex-controls-z-index         : 6;
-@synctex-controls-btn-padding     : 4px;
+@synctex-controls-padding         : 0;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.