From ef63d4816e20e2f47533ec760c3f9214e41a2145 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 15 Apr 2025 16:55:26 +0200
Subject: [PATCH] wip #7459 @1.5

---
 js/libs/modernizr/tests.js |   6 +-
 style/fluidbook.less       | 282 +-----------------------------------
 style/links.less           | 285 +++++++++++++++++++++++++++++++++++++
 3 files changed, 291 insertions(+), 282 deletions(-)
 create mode 100644 style/links.less

diff --git a/js/libs/modernizr/tests.js b/js/libs/modernizr/tests.js
index 78b9ddc9..298b0ab7 100644
--- a/js/libs/modernizr/tests.js
+++ b/js/libs/modernizr/tests.js
@@ -22,8 +22,12 @@ Modernizr.addTest('android', function () {
     return !!(navigator.userAgent.match(/android/i) || navigator.userAgent.search(/galaxy/i) > -1);
 });
 
+Modernizr.addTest('chromeos', function () {
+    return !!(navigator.userAgent.match(/cros/i));
+})
+
 Modernizr.addTest('ios', function () {
-    return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone);
+    return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone || Modernizr.chromeos);
 });
 
 Modernizr.addTest('mobile', function () {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ba0e98c8..7c761cdf 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1406,287 +1406,7 @@ html.ios body.portrait #interface {
   transition: none;
 }
 
-/* Links */
-
-#links {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 4;
-  background-color: rgba(0, 0, 0, 0.001);
-}
-
-#links, #links .container, .clinks, .ctlinks, #searchHighlights {
-  transform-origin: 0 0 0;
-}
-
-.rtl .portrait #links {
-  .leftContainer {
-    left: 0;
-  }
-}
-
-.rtl #links {
-  .leftContainer {
-    left: 50%;
-  }
-
-  .rightContainer {
-    left: 0;
-  }
-}
-
-#links .link {
-  position: absolute;
-  cursor: auto;
-}
-
-.linkshowclose {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-
-  &.topleft, &.topright {
-    width: 200px;
-    height: 200px;
-  }
-
-  &.topleft {
-    left: 0;
-  }
-
-  &.topright {
-    left: auto;
-    right: 0;
-  }
-
-  &.none {
-    display: none;
-  }
-}
-
-.link.multimedia {
-  position: absolute;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-
-  // Fix #2551
-  overflow: hidden;
-
-  // Fix #2556
-  &.tabslink {
-    overflow: visible;
-  }
-
-  .lottie {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.notinteractive {
-    pointer-events: none;
-
-    .mask {
-      position: absolute;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: block;
-
-      .ios & {
-        pointer-events: all;
-      }
-    }
-
-    iframe {
-      position: relative;
-      z-index: 1;
-      pointer-events: none;
-
-      * {
-        pointer-events: none;
-      }
-    }
-  }
-
-  // Force images to take space provided (see: https://team.cubedesigners.com/redmine/issues/1457)
-  > img.multimediaimage {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.link {
-  &[data-hidden="1"] {
-    transition: opacity 500ms, visibility 500ms;
-    visibility: hidden;
-    opacity: 0;
-
-    &.show {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    &[data-animation-hide] {
-      transition: none;
-
-      &.show {
-        transition: none;
-      }
-    }
-  }
-
-  &.contentLink[data-flipcard] {
-    background-image: none !important;
-    perspective: 2000px;
-    position: relative;
-    overflow: visible;
-
-    > a {
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-    }
-
-    &[data-flipcard="axis-y"] {
-      .flipcard {
-        &.flipped {
-          transform: rotateY(180deg);
-        }
-
-        > div.back {
-          transform: rotateY(180deg);
-        }
-      }
-    }
-
-    &[data-flipcard="axis-x"] {
-      .flipcard {
-        &.flipped {
-          transform: rotateX(180deg);
-        }
-
-        > div.back {
-          transform: rotateX(180deg);
-        }
-      }
-    }
-
-    .flipcard {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      transition: transform 0.8s;
-      transform-style: preserve-3d;
-
-      > div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        backface-visibility: hidden;
-
-        img {
-          width: 100%;
-          height: 100%
-        }
-      }
-    }
-  }
-}
-
-
-.link.contentLink {
-  z-index: 500;
-  position: absolute;
-  pointer-events: none;
-  overflow: hidden;
-
-  &.interactive {
-    pointer-events: auto;
-  }
-
-  &.textLink {
-    white-space: nowrap;
-    overflow: visible;
-
-    &[data-animations] {
-      transform-origin: 0 100%;
-      opacity: 0;
-    }
-  }
-
-  &[data-layer="bothsvg"] {
-    background-color: #fff;
-  }
-
-  &[data-animation-hide] {
-    display: none;
-  }
-
-  img, div.img {
-    width: 100%;
-    height: 100%;
-    display: block;
-    background-size: 100% 100%;
-    background-position: 0 0;
-  }
-}
-
-@links-area-color: fadeout(@links-color, 100% - @links-opacity);
-
-.link a {
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-color: transparent;
-
-  &.displayArea {
-    -webkit-tap-highlight-color: @links-area-color;
-    background-color: fadeout(@links-color, 99.999%);
-    border-radius: unit(@links-rounded-corners*2, px);
-
-    &.animating {
-      background-color: @links-area-color;
-    }
-
-    &:hover, &.hover {
-      .using-mouse & {
-        opacity: 1 !important;
-        background-color: @links-area-color;
-      }
-    }
-
-    &:focus {
-      .keyboard-navigating & {
-        opacity: 1 !important;
-        background-color: @links-area-color;
-      }
-    }
-  }
-}
-
-#links .nonlinkarea {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  display: block;
-
-  .zoom-disabled & {
-    cursor: auto !important;
-    pointer-events: none;
-  }
-}
+@import "links";
 
 @import "bookmarks";
 
diff --git a/style/links.less b/style/links.less
new file mode 100644
index 00000000..e76a2db5
--- /dev/null
+++ b/style/links.less
@@ -0,0 +1,285 @@
+/* Links */
+
+#links {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 4;
+  background-color: rgba(0, 0, 0, 0.001);
+}
+
+#links, #links .container, .clinks, .ctlinks, #searchHighlights {
+  transform-origin: 0 0 0;
+}
+
+.rtl .portrait #links {
+  .leftContainer {
+    left: 0;
+  }
+}
+
+.rtl #links {
+  .leftContainer {
+    left: 50%;
+  }
+
+  .rightContainer {
+    left: 0;
+  }
+}
+
+#links .link {
+  position: absolute;
+  cursor: auto;
+}
+
+.linkshowclose {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+
+  &.topleft, &.topright {
+    width: 200px;
+    height: 200px;
+  }
+
+  &.topleft {
+    left: 0;
+  }
+
+  &.topright {
+    left: auto;
+    right: 0;
+  }
+
+  &.none {
+    display: none;
+  }
+}
+
+.link.multimedia {
+  position: absolute;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+
+  // Fix #2551
+  overflow: hidden;
+
+  // Fix #2556
+  &.tabslink {
+    overflow: visible;
+  }
+
+  .lottie {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.notinteractive {
+    pointer-events: none;
+
+    .mask {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: block;
+
+      .ios & {
+        pointer-events: all;
+      }
+    }
+
+    iframe {
+      position: relative;
+      z-index: 1;
+      pointer-events: none;
+
+      * {
+        pointer-events: none;
+      }
+    }
+  }
+
+  // Force images to take space provided (see: https://team.cubedesigners.com/redmine/issues/1457)
+  > img.multimediaimage {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.link {
+  &[data-hidden="1"] {
+    transition: opacity 500ms, visibility 500ms;
+    visibility: hidden;
+    opacity: 0;
+
+    &.show {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &[data-animation-hide] {
+      transition: none;
+
+      &.show {
+        transition: none;
+      }
+    }
+  }
+
+  &.contentLink[data-flipcard] {
+    background-image: none !important;
+    perspective: 2000px;
+    position: relative;
+    overflow: visible;
+
+    > a {
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    &[data-flipcard="axis-y"] {
+      .flipcard {
+        &.flipped {
+          transform: rotateY(180deg);
+        }
+
+        > div.back {
+          transform: rotateY(180deg);
+        }
+      }
+    }
+
+    &[data-flipcard="axis-x"] {
+      .flipcard {
+        &.flipped {
+          transform: rotateX(180deg);
+        }
+
+        > div.back {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+
+    .flipcard {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      transition: transform 0.8s;
+      transform-style: preserve-3d;
+
+      > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+
+        img {
+          width: 100%;
+          height: 100%
+        }
+      }
+    }
+  }
+}
+
+
+.link.contentLink {
+  z-index: 500;
+  position: absolute;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.interactive {
+    pointer-events: auto;
+  }
+
+  &.textLink {
+    white-space: nowrap;
+    overflow: visible;
+
+    &[data-animations] {
+      transform-origin: 0 100%;
+      opacity: 0;
+    }
+  }
+
+  &[data-layer="bothsvg"] {
+    background-color: #fff;
+  }
+
+  &[data-animation-hide] {
+    display: none;
+  }
+
+  img, div.img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+}
+
+@links-area-color: fadeout(@links-color, 100% - @links-opacity);
+
+.link a {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: transparent;
+
+  &.displayArea {
+    -webkit-tap-highlight-color: @links-area-color;
+    background-color: fadeout(@links-color, 99.999%);
+    border-radius: unit(@links-rounded-corners*2, px);
+
+    &.animating {
+      background-color: @links-area-color;
+    }
+
+    &:hover, &.hover {
+      .using-mouse & {
+        opacity: 1 !important;
+        background-color: @links-area-color;
+      }
+    }
+
+    &:focus {
+      .keyboard-navigating & {
+        opacity: 1 !important;
+        background-color: @links-area-color;
+      }
+    }
+  }
+}
+
+#links .nonlinkarea {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: block;
+
+  .zoom-disabled & {
+    cursor: auto !important;
+    pointer-events: none;
+  }
+}
+
+html.mobile [data-visibility-os="desktop"], html.desktop [data-visibility-os="mobile"] {
+  display: none !important;
+}
\ No newline at end of file
-- 
2.39.5