Update resizable handle and sync scrolling toggle styles

Author: jackycute

public/css/index.css

@@ -108,21 +108,25 @@ body {
 }
 .ui-edit-area .ui-resizable-handle.ui-resizable-e {
     cursor: col-resize;
-    width: 5px;
+    width: 8px;
+    right: -8px;
     background-color: white;
-    box-shadow: 5px 0px 10px #e7e7e7;
+    box-shadow: 3px 0px 6px #e7e7e7;
 }
 .ui-edit-area .ui-sync-toggle {
     width: 42px;
     height: 42px;
-    padding: 3px 1px 0 0;
+    padding: 2px 1px 0 0;
     border-radius: 50%;
-    border-color: #e7e7e7;
+    box-shadow: 2px 0px 2px #e7e7e7;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
+.ui-edit-area .ui-sync-toggle:active {
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125), 2px 0px 2px #e7e7e7;
+}
 .ui-view-area {
     /*overflow-y: scroll;*/
     -webkit-overflow-scrolling: touch;