]> _ Git - fluidbook-html5.git/commitdiff
wait #7843 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 14 Nov 2025 10:33:01 +0000 (11:33 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 14 Nov 2025 10:33:01 +0000 (11:33 +0100)
style/fluidbook.less
style/shadow.less [new file with mode: 0644]

index 9bc3dc398325b6ebae8f2eb01eb560906ee21442..cd9bdd485989fb0c809f0dc088c7a452094e90bc 100644 (file)
@@ -743,84 +743,7 @@ body, html {
   }
 }
 
-/* Shadow */
-
-@shadow-height: 120px;
-@shadow-offset: 0px;
-
-#shadow {
-  @shadow-width-left: @book-page-width+12;
-  @shadow-width-right: @book-page-width+12;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: unit(@book-page-width*2, px);
-  height: unit(@book-page-height, px);
-  pointer-events: none;
-  mix-blend-mode: @shadow-blend-mode;
-
-  transition-property: none !important;
-  transition-duration: 0ms !important;
-
-  > .shadow {
-    position: absolute;
-    left: 0;
-    opacity: @shadow-opacity;
-    .shadowedge-fade-item();
-
-    &.bottom {
-      bottom: -@shadow-height+@shadow-offset;
-      background-size: 100% @shadow-height;
-      height: @shadow-height;
-
-      .portrait & {
-        opacity: @shadow-opacity/2;
-      }
-
-      &.left {
-        left: -12px;
-        width: @shadow-width-left;
-        background-image: url("../images/shadows/back/bottom-left.png");
-      }
-
-      &.right {
-        background-image: url("../images/shadows/back/bottom-right.png");
-        width: @shadow-width-right;
-
-        .landscape & {
-          left: @book-page-width;
-        }
-      }
-    }
-
-    &.side {
-      top: 0;
-      width: 35px;
-      height: unit(@book-page-height, px);
-      background-size: 100% 100%;
-
-      &.right {
-        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 - @edge-right-offset, px);
-        }
-      }
-
-      &.left {
-        background-image: url("../images/shadows/back/left.png");
-        left: unit(-35 + @edge-left-offset, px);
-
-        .portrait & {
-          left: unit(-29 + @edge-left-offset, px);
-        }
-      }
-
-    }
-  }
-}
+@import "shadow";
 
 @import "edges";
 
diff --git a/style/shadow.less b/style/shadow.less
new file mode 100644 (file)
index 0000000..2a54d6c
--- /dev/null
@@ -0,0 +1,78 @@
+/* Shadow */
+@shadow-scale: 0.5;
+@shadow-height: unit(120*@shadow-scale, px);
+@shadow-offset: 0px;
+
+#shadow {
+  @shadow-width-left: @book-page-width+(12*@shadow-scale);
+  @shadow-width-right: @book-page-width+(12*@shadow-scale);
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: unit(@book-page-width*2, px);
+  height: unit(@book-page-height, px);
+  pointer-events: none;
+  mix-blend-mode: @shadow-blend-mode;
+
+  transition-property: none !important;
+  transition-duration: 0ms !important;
+
+  > .shadow {
+    position: absolute;
+    left: 0;
+    opacity: @shadow-opacity;
+    .shadowedge-fade-item();
+
+    &.bottom {
+      bottom: -@shadow-height+@shadow-offset;
+      background-size: 100% @shadow-height;
+      height: @shadow-height;
+
+      .portrait & {
+        opacity: @shadow-opacity/2;
+      }
+
+      &.left {
+        left: unit(-12*@shadow-scale, px);
+        width: @shadow-width-left;
+        background-image: url("../images/shadows/back/bottom-left.png");
+      }
+
+      &.right {
+        background-image: url("../images/shadows/back/bottom-right.png");
+        width: @shadow-width-right;
+
+        .landscape & {
+          left: @book-page-width;
+        }
+      }
+    }
+
+    &.side {
+      top: 0;
+      width: unit(35*@shadow-scale, px);
+      height: unit(@book-page-height, px);
+      background-size: 100% 100%;
+
+      &.right {
+        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*@shadow-scale) - @edge-right-offset, px);
+        }
+      }
+
+      &.left {
+        background-image: url("../images/shadows/back/left.png");
+        left: unit((-35*@shadow-scale) + @edge-left-offset, px);
+
+        .portrait & {
+          left: unit((-29*@shadow-scale) + @edge-left-offset, px);
+        }
+      }
+
+    }
+  }
+}
\ No newline at end of file