Refactor synctex controls z-index handling.

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

@@ -73,21 +73,21 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-pdf(
 			tooltip=translate('go_to_code_location_in_pdf')
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
 		)
-			i.fa.fa-long-arrow-right
+			i.synctex-control-icon
 		br
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToCode()"
 		)
-			i.fa.fa-long-arrow-left
+			i.synctex-control-icon
 			
 div.full-size(
 	ng-if="ui.pdfLayout == 'flat'"

services/web/public/coffee/ide/directives/layout.coffee

@@ -53,9 +53,7 @@ define [
 							else
 								controls.show()
 								controls.css({
-									position: "absolute"
 									right: state.east.size
-									"z-index": 3
 								})
 
 					resetOpenStates = () ->
@@ -112,7 +110,7 @@ define [
 						# Set the panel as overflowing (gives it higher z-index and sets overflow rules)
 						layoutObj.allowOverflow overflowPane
 						# Read the given z-index value and increment it, so that it's higher than synctex controls.
-						overflowPaneZVal = overflowPaneEl.css "z-index"
+						overflowPaneZVal = overflowPaneEl.zIndex()
 						overflowPaneEl.css "z-index", overflowPaneZVal + 1
 
 					resetOpenStates()

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

@@ -289,6 +289,7 @@
 	margin-right: -(@extra-hit-area - 1px) !important;
 	padding-left: @extra-hit-area !important;
 	padding-right: @extra-hit-area !important;
+	z-index: 5 !important;
 	box-sizing: content-box;
 	background-image: linear-gradient(90deg, 
 		transparent,

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

@@ -229,14 +229,49 @@
 }
 
 .synctex-controls {
+	position: absolute;
+	z-index: @synctex-controls-z-index;
 	top: 68px;
 	padding: 0px 2px;
 	.btn-xs {
 		line-height: 1.3;
-		padding: 0 2px 0;
+		padding: @synctex-controls-btn-padding;
 	}
 }
 
+.synctex-controls when (@is-overleaf = true) {
+	margin-right: -9px;
+}
+	.synctex-control-goto-pdf,
+	.synctex-control-goto-code {
+		.btn;
+		.btn-default;
+		.btn-xs;
+
+		> .synctex-control-icon {
+			display: inline-block;
+			font: normal normal normal 14px/1 FontAwesome;
+			font-size: inherit;
+			text-rendering: auto;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f061";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f060";		
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f178";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f177";		
+	}
+
 .editor-dark {
 	.pdf-logs {
 		background-color: lighten(@editor-dark-background-color, 10%);

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

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

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

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