From 6d5b1d083fb2ab2c17f144936c70e8ee0d020f7c Mon Sep 17 00:00:00 2001
From: Alex Krippner <alexakrippner@gmail.com>
Date: Wed, 17 Mar 2021 11:19:17 +0100
Subject: [PATCH] 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.
---
 style.less | 114 +++++++++++++++++++++++++++++++++++++++--------------
 sync.js    |   6 +--
 2 files changed, 88 insertions(+), 32 deletions(-)
 mode change 100644 => 100755 style.less

diff --git a/style.less b/style.less
old mode 100644
new mode 100755
index a575601..e125abf
--- a/style.less
+++ b/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;
+
             }
         }
     }
diff --git a/sync.js b/sync.js
index 8a9e49e..e0dca3f 100644
--- a/sync.js
+++ b/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({