Refactor styles

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

Author: alex-krippner

style.less

@@ -62,50 +62,97 @@
         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 {
+
+    position: relative;
+    cursor: pointer;
+    margin: 5px;
+    width: 15px;
+    height: 15px;
+
+    &__input {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        z-index: 1;
+
+        &-push {
+            &:checked ~ .sync-dir__svg-push {
+                &::after {
+                    display: block;
+                    content: url(pix/arrow-right-bold-circle.svg);
+                }
+            }
+        }
 
-                color: @ini_text;
-                fill: red;
+        &-skip {
+            &:checked ~ .sync-dir__svg-skip {
+                &::after {
+                    display: block;
+                    content: url(pix/pause-circle.svg);
+                }
             }
         }
 
-        // custom radio icons
-        label.push input {
-            &::before {
-                content: url(pix/arrow-right-bold-circle-outline.svg);
+        &-pull {
+            &:checked ~ .sync-dir__svg-pull {
+                &::after {
+                    display: block;
+                    content: url(pix/arrow-left-bold-circle.svg);
+                }
             }
-            &:checked::before {
-                content: url(pix/arrow-right-bold-circle.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(-50%, -50%);
+                height: 70%;
+
             }
         }
 
-        label.skip input {
-            &::before {
+        &-skip {
+            &::after {
+                display: block;
                 content: url(pix/pause-circle-outline.svg);
-            }
-            &:checked::before {
-                content: url(pix/pause-circle.svg);
+                position: absolute;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                height: 70%;
             }
         }
 
-        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(-50%, -50%);
+                height: 70%;
+
             }
         }
     }

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({