From a9d343dac4b696937431356eccfaca1cdc91adbd Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 28 Oct 2019 16:36:40 +0100
Subject: [PATCH] wip #3168 @0:05

---
 style/edges.less     | 89 ++++++++++++++++++++++++++++++++++++++++
 style/fluidbook.less | 97 +++-----------------------------------------
 2 files changed, 94 insertions(+), 92 deletions(-)
 create mode 100644 style/edges.less

diff --git a/style/edges.less b/style/edges.less
new file mode 100644
index 00000000..166cbc82
--- /dev/null
+++ b/style/edges.less
@@ -0,0 +1,89 @@
+#edges {
+  transition-property: none !important;
+  transition-duration: 0ms !important;
+
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: unit(@book-page-width*2, px);
+  height: unit(@book-page-height, px);
+  pointer-events: none;
+  .hideifnot(@edges-display);
+
+  .portrait & {
+    width: unit(@book-page-width, px);
+  }
+
+  @edge-scale: 1;
+
+  > .edge {
+    .shadowedge-fade-item();
+    position: absolute;
+    top: 0;
+    height: 100%;
+    opacity: @edges-opacity;
+
+    > div {
+      background-size: 100% 100%;
+      position: absolute;
+      background-repeat: no-repeat;
+    }
+
+    .top {
+      top: 0;
+      height: unit(12*@edge-scale, px);
+    }
+
+    .bottom {
+      bottom: 0;
+      height: unit(22*@edge-scale, px);
+    }
+
+    .middle {
+      top: unit(12*@edge-scale, px);
+      bottom: unit(22*@edge-scale, px);
+    }
+
+    &.left {
+      left: unit(-17*@edge-scale, px)+@edge-left-offset;
+      width: unit(17*@edge-scale, px);
+
+      div {
+        width: unit(17*@edge-scale, px);
+      }
+
+      .top {
+        background-image: url("../images/edges/edge-left-top.png");
+      }
+
+      .bottom {
+        background-image: url("../images/edges/edge-left-bottom.png");
+      }
+
+      .middle {
+        background-image: url("../images/edges/edge-left-middle.png");
+      }
+    }
+
+    &.right {
+      right: unit(-11*@edge-scale, px)+@edge-right-offset;
+      width: unit(11*@edge-scale, px);
+
+      div {
+        width: unit(11*@edge-scale, px);
+      }
+
+      .top {
+        background-image: url("../images/edges/edge-right-top.png");
+      }
+
+      .bottom {
+        background-image: url("../images/edges/edge-right-bottom.png");
+      }
+
+      .middle {
+        background-image: url("../images/edges/edge-right-middle.png");
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1fc48902..3d37b688 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -562,21 +562,21 @@ body, html {
       background-size: 100% 100%;
 
       &.right {
-        left: unit(@book-page-width*2, px);
+        left: unit(@book-page-width*2-@edge-right-offset, px);
         background-image: url("../images/shadows/back/right.png");
 
         .portrait & {
           display: block !important;
-          left: unit(@book-page-width - 6, px);
+          left: unit(@book-page-width - 6 - @edge-right-offset, px);
         }
       }
 
       &.left {
         background-image: url("../images/shadows/back/left.png");
-        left: -35px;
+        left: unit(-35 + @edge-left-offset, px);
 
         .portrait & {
-          left: -29px;
+          left: unit(-29 + @edge-left-offset, px);
         }
       }
 
@@ -584,94 +584,7 @@ body, html {
   }
 }
 
-#edges {
-  transition-property: none !important;
-  transition-duration: 0ms !important;
-
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: unit(@book-page-width*2, px);
-  height: unit(@book-page-height, px);
-  pointer-events: none;
-  .hideifnot(@edges-display);
-
-  .portrait & {
-    width: unit(@book-page-width, px);
-  }
-
-  @edge-scale: 1;
-
-  > .edge {
-    .shadowedge-fade-item();
-    position: absolute;
-    top: 0;
-    height: 100%;
-
-    > div {
-      background-size: 100% 100%;
-      position: absolute;
-      background-repeat: no-repeat;
-    }
-
-    .top {
-      top: 0;
-      height: unit(12*@edge-scale, px);
-    }
-
-    .bottom {
-      bottom: 0;
-      height: unit(22*@edge-scale, px);
-    }
-
-    .middle {
-      top: unit(12*@edge-scale, px);
-      bottom: unit(22*@edge-scale, px);
-    }
-
-    &.left {
-      left: unit(-17*@edge-scale, px);
-      width: unit(17*@edge-scale, px);
-
-      div {
-        width: unit(17*@edge-scale, px);
-      }
-
-      .top {
-        background-image: url("../images/edges/edge-left-top.png");
-      }
-
-      .bottom {
-        background-image: url("../images/edges/edge-left-bottom.png");
-      }
-
-      .middle {
-        background-image: url("../images/edges/edge-left-middle.png");
-      }
-    }
-
-    &.right {
-      right: unit(-11*@edge-scale, px);
-      width: unit(11*@edge-scale, px);
-
-      div {
-        width: unit(11*@edge-scale, px);
-      }
-
-      .top {
-        background-image: url("../images/edges/edge-right-top.png");
-      }
-
-      .bottom {
-        background-image: url("../images/edges/edge-right-bottom.png");
-      }
-
-      .middle {
-        background-image: url("../images/edges/edge-right-middle.png");
-      }
-    }
-  }
-}
+@import "edges";
 
 /* Locale Flag icon */
 .locale-flag {
-- 
2.39.5