Refactor styles

The styles were refactored so that the styling of the  customized
buttons are compatible with Firefox.

Changes in sync.js were made because of new class names for the
html elements.

Styles were added to the table data containing the syn direction
because the contents collapse when using templates other than
bootstrap.

Styles for color and fill were reapplied after accidental
removal.

Author: alex-krippner

style.less

@@ -50,6 +50,12 @@
             width: 6em;
         }
 
+        td.dir{
+            display: flex;
+            border: none;
+            padding-top: .5em;
+        }
+
         th.local,
         td.local,
         th.remote,
@@ -62,50 +68,100 @@
         td.diff {
             width: 4em;
         }
+    }
+}
 
-        // general setup for custom radio buttons
-        label input {
-            visibility: hidden;
-            width: 2em;
-            height: 2em;
+// custom radio icons
 
-            &::before {
-                cursor: pointer;
-                visibility: visible;
-                display: block;
-                width: 2em;
-                height: 2em;
+.sync-dir {
 
-                color: @ini_text;
-                fill: red;
+    position: relative;
+    cursor: pointer;
+    margin: 5px;
+    width: 15px;
+    height: 15px;
+
+    &__input {
+        position: absolute;
+        top: 0;
+        right: 0;
+        opacity: 0;
+        cursor: pointer;
+        z-index: 1;
+
+        &-push {
+            &:checked ~ .sync-dir__svg-push {
+                &::after {
+                    display: block;
+                    content: url(pix/arrow-right-bold-circle.svg);
+                }
             }
         }
 
-        // custom radio icons
-        label.push input {
-            &::before {
-                content: url(pix/arrow-right-bold-circle-outline.svg);
+        &-skip {
+            &:checked ~ .sync-dir__svg-skip {
+                &::after {
+                    display: block;
+                    content: url(pix/pause-circle.svg);
+                }
             }
-            &:checked::before {
-                content: url(pix/arrow-right-bold-circle.svg);
+        }
+
+        &-pull {
+            &:checked ~ .sync-dir__svg-pull {
+                &::after {
+                    display: block;
+                    content: url(pix/arrow-left-bold-circle.svg);
+                }
             }
         }
+    }
 
-        label.skip input {
-            &::before {
-                content: url(pix/pause-circle-outline.svg);
+    &__svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        cursor: pointer;
+
+        &-push {
+            &::after {
+                display: block;
+                content: url(pix/arrow-right-bold-circle-outline.svg);
+                position: absolute;
+                top: 50%;
+                transform: translate(-20%,-105%);
+                height: 70%;
+                color: @ini_text;
+                fill: red;
             }
-            &:checked::before {
-                content: url(pix/pause-circle.svg);
+        }
+
+        &-skip {
+            &::after {
+                display: block;
+                content: url(pix/pause-circle-outline.svg);
+                position: absolute;
+                top: 50%;
+                transform: translate(-20%,-105%);
+                height: 70%;
+                color: @ini_text;
+                fill: red;
             }
         }
 
-        label.pull input {
-            &::before {
+        &-pull {
+            &::after {
+                display: block;
                 content: url(pix/arrow-left-bold-circle-outline.svg);
-            }
-            &:checked::before {
-                content: url(pix/arrow-left-bold-circle.svg);
+                position: absolute;
+                top: 50%;
+                transform: translate(-20%,-105%);
+                height: 70%;
+                color: @ini_text;
+                fill: red;
+
             }
         }
     }

sync.js

@@ -133,9 +133,9 @@ jQuery(function () {
         row++;
 
         var $html = jQuery(
-            '<label class="push"><input /></label>' +
-            '<label class="skip"><input /></label>' +
-            '<label class="pull"><input /></label>'
+            '<label class="sync-dir push"><input class="sync-dir__input sync-dir__input-push" /><span class="sync-dir__svg sync-dir__svg-push "></span></label>' +
+            '<label class="sync-dir skip"><input class="sync-dir__input sync-dir__input-skip" /><span class="sync-dir__svg sync-dir__svg-skip"></span></label>' +
+            '<label class="sync-dir pull"><input class="sync-dir__input sync-dir__input-pull" /><span class="sync-dir__svg sync-dir__svg-pull"></span></label>'
         );
         var $radios = $html.find('input');
         $radios.attr({