From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 15 Apr 2025 16:44:10 +0000 (+0200)
Subject: wip #7463 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d825757e61a7ac5e26499a4c6611d953c235a42e;p=fluidbook-html5.git

wip #7463 @1
---

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 7c761cdf..fd0c1647 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1804,241 +1804,7 @@ form input[type="text"], form input[type="email"] {
   color: @menu-field-text;
 }
 
-.indexView {
-  #bookmarkDisplayOptions {
-    padding-left: 30px;
-    text-align: left;
-
-    .radio-option {
-      display: inline-block;
-      margin-right: 20px;
-    }
-  }
-
-  .indexViewHolder {
-
-
-    margin: auto;
-    text-align: left;
-
-    .rtl & {
-      text-align: right;
-    }
-
-    &.small {
-      .doubleThumb, .padding {
-        width: unit(@thumb-width, px);
-      }
-    }
-  }
-
-  .doubleThumb, .padding {
-    display: inline-block;
-    padding: 10px 10px 25px 10px;
-    margin: 0 5px 15px;
-    position: relative;
-    width: unit(@thumb-width*2, px);
-    cursor: pointer;
-    text-align: center;
-    box-sizing: content-box;
-    border-radius: 3px;
-    vertical-align: top;
-
-    &.singlemode {
-      width: @thumb-width;
-    }
-  }
-
-
-}
-
-.indexViewMessage {
-  padding: 2em 0;
-  text-align: center;
-}
-
-.doubleThumb {
-  height: @thumb-height;
-
-  //&.left {
-  //  .ltr & {
-  //    margin-right: 10px;
-  //  }
-  //}
-
-  &.simple {
-
-    .overlay {
-      width: @thumb-width;
-    }
-
-    &.left {
-      .hits {
-        left: -50px;
-      }
-
-      &.singlemode {
-        .hits {
-          left: 0px;
-        }
-      }
-    }
-
-    &.right {
-      .hits {
-        left: 50px;
-      }
-    }
-
-    .thumb {
-      margin-right: 0 !important;
-    }
-  }
-
-  &.here {
-    background-color: @menu-select-background;
-    color: @menu-select-text;
-    z-index: 0;
-  }
-
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 200px;
-    z-index: 4;
-  }
-
-  .hits {
-    position: relative;
-    display: inline-block;
-    z-index: 5;
-    font-size: 14px;
-    height: 28px;
-    transform: translateY(-15px);
-    top: 50%;
-    white-space: nowrap;
-
-    &.yes {
-      padding: 3px 5px;
-      border-radius: 1px;
-      color: @menu-text;
-      background-color: @menu-background;
-    }
-  }
-}
-
-.padding {
-  height: 1px;
-}
-
-.thumb {
-  position: absolute;
-  width: @thumb-width;
-  height: @thumb-height;
-
-
-  .pageholder {
-    overflow: hidden;
-    max-height: @thumb-height;
-
-    img {
-      width: 100%;
-      height: auto;
-      background-color: #fff;
-      position: relative;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      margin-right: 0 !important;
-    }
-
-    .shade {
-      position: absolute;
-      z-index: 2;
-      width: 33%;
-      height: 100%;
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: 0 0;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  &.left {
-    .pageholder {
-      .shade {
-        left: 67%;
-        background-image: url("../images/shadows/thumbnails/left.png");
-      }
-    }
-  }
-
-  &.right {
-    .pageholder {
-      .shade {
-        background-image: url("../images/shadows/thumbnails/right.png");
-      }
-    }
-  }
-
-  .number {
-    text-align: center;
-    display: block;
-    margin: 0;
-    padding: 5px 0 0 0;
-    width: @thumb-width;
-    position: absolute;
-    z-index: 1;
-    font-size: 14px;
-    line-height: 1em;
-    left: 0;
-    top: unit(@thumb-height, px);
-  }
-
-  &.right {
-    left: 110px;
-  }
-
-  &.simple {
-    width: @thumb-width;
-
-    &.right {
-      margin-left: @thumb-width;
-    }
-  }
-
-  &.left {
-    .ltr & {
-      margin-right: @thumb-width;
-    }
-
-    .rtl & {
-      margin-right: @thumb-width;
-    }
-  }
-
-  @extrashadowheight: min(22, @thumb-height * 0.2);
-  @shade-height: unit(@thumb-height+@extrashadowheight, px);
-
-  &:before {
-    position: absolute;
-    content: "";
-    background-image: url("../images/shadows/thumbnails/back.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    opacity: 0.65;
-    top: -5px;
-    left: -5px;
-    width: unit(@thumb-width+11, px);
-    height: @shade-height;
-    z-index: 1;
-  }
-
-}
-
+@import "menu-overview";
 /* Share */
 
 ul.chapters.shareList a.level0 .svg-icon {
diff --git a/style/menu-overview.less b/style/menu-overview.less
new file mode 100644
index 00000000..2a1313f2
--- /dev/null
+++ b/style/menu-overview.less
@@ -0,0 +1,240 @@
+
+.indexView {
+  #bookmarkDisplayOptions {
+    padding-left: 30px;
+    text-align: left;
+
+    .radio-option {
+      display: inline-block;
+      margin-right: 20px;
+    }
+  }
+
+  .indexViewHolder {
+
+
+    margin: auto;
+    text-align: left;
+
+    .rtl & {
+      text-align: right;
+    }
+
+    &.small {
+      .doubleThumb, .padding {
+        width: unit(@thumb-width, px);
+      }
+    }
+  }
+
+  .doubleThumb, .padding {
+    display: inline-block;
+    padding: 10px 10px 25px 10px;
+    margin: 0 5px 15px;
+    position: relative;
+    width: unit(@thumb-width*2, px);
+    cursor: pointer;
+    text-align: center;
+    box-sizing: content-box;
+    border-radius: 3px;
+    vertical-align: top;
+
+    &.singlemode {
+      width: @thumb-width;
+    }
+  }
+
+
+}
+
+.indexViewMessage {
+  padding: 2em 0;
+  text-align: center;
+}
+
+.doubleThumb {
+  height: @thumb-height;
+
+  //&.left {
+  //  .ltr & {
+  //    margin-right: 10px;
+  //  }
+  //}
+
+  &.simple {
+
+    .overlay {
+      width: @thumb-width;
+    }
+
+
+    &.left {
+      .hits {
+        left: -50px;
+      }
+
+      &.singlemode {
+        .hits {
+          left: 0px;
+        }
+      }
+    }
+
+    &.right {
+      .hits {
+        left: 50px;
+      }
+    }
+
+    .thumb {
+      margin-right: 0 !important;
+    }
+  }
+
+  &.here {
+    background-color: @menu-select-background;
+    color: @menu-select-text;
+    z-index: 0;
+  }
+
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 200px;
+    z-index: 4;
+  }
+
+  .hits {
+    position: relative;
+    display: inline-block;
+    z-index: 5;
+    font-size: 14px;
+    height: 28px;
+    transform: translateY(-15px);
+    top: 50%;
+    white-space: nowrap;
+
+    &.yes {
+      padding: 3px 5px;
+      border-radius: 1px;
+      color: @menu-text;
+      background-color: @menu-background;
+    }
+  }
+}
+
+.padding {
+  height: 1px;
+}
+
+.thumb {
+  position: absolute;
+  width: @thumb-width;
+  height: @thumb-height;
+
+  a{
+    display: block;
+  }
+
+
+  .pageholder {
+    overflow: hidden;
+    max-height: @thumb-height;
+
+    img {
+      width: 100%;
+      height: auto;
+      background-color: #fff;
+      position: relative;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      margin-right: 0 !important;
+    }
+
+    .shade {
+      position: absolute;
+      z-index: 2;
+      width: 33%;
+      height: 100%;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &.left {
+    .pageholder {
+      .shade {
+        left: 67%;
+        background-image: url("../images/shadows/thumbnails/left.png");
+      }
+    }
+  }
+
+  &.right {
+    .pageholder {
+      .shade {
+        background-image: url("../images/shadows/thumbnails/right.png");
+      }
+    }
+  }
+
+  .number {
+    text-align: center;
+    display: block;
+    margin: 0;
+    padding: 5px 0 0 0;
+    width: @thumb-width;
+    position: absolute;
+    z-index: 1;
+    font-size: 14px;
+    line-height: 1em;
+    left: 0;
+    top: unit(@thumb-height, px);
+  }
+
+  &.right {
+    left: 110px;
+  }
+
+  &.simple {
+    width: @thumb-width;
+
+    &.right {
+      margin-left: @thumb-width;
+    }
+  }
+
+  &.left {
+    .ltr & {
+      margin-right: @thumb-width;
+    }
+
+    .rtl & {
+      margin-right: @thumb-width;
+    }
+  }
+
+  @extrashadowheight: min(22, @thumb-height * 0.2);
+  @shade-height: unit(@thumb-height+@extrashadowheight, px);
+
+  &:before {
+    position: absolute;
+    content: "";
+    background-image: url("../images/shadows/thumbnails/back.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    opacity: 0.65;
+    top: -5px;
+    left: -5px;
+    width: unit(@thumb-width+11, px);
+    height: @shade-height;
+    z-index: 1;
+  }
+
+}