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(
- '' +
- '' +
- ''
+ '' +
+ '' +
+ ''
);
var $radios = $html.find('input');
$radios.attr({