From 6e79a7c0d0f8e3392c3a48d29f0e99e28e600379 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 29 Nov 2018 16:46:19 +0100
Subject: [PATCH] Adjustments to ghost pages and radio button colours. WIP #817
 @0.75

---
 js/libs/fluidbook/fluidbook.bookmarks.js |  2 +-
 js/libs/fluidbook/fluidbook.print.js     |  4 +--
 style/print.less                         | 32 ++++++++++++++++++------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 4171ba1f..f0044059 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -491,7 +491,7 @@ FluidbookBookmarks.prototype = {
     getPrintPreview: function() {
 
         if (!this.hasBookmarkedPages()) {
-            return '<div class="thumb left blank"></div>';
+            return '<div class="thumb left blank"><div class="blank-mask"></div></div>';
         }
 
 
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index f52310cb..e81d3f0b 100644
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -85,7 +85,7 @@ FluidbookPrint.prototype = {
             view += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
             view += '</div>'; // .thumb
             if (!isSinglePageMode && !isLastPage) {
-                view += '<div class="thumb right blank"></div>';
+                view += '<div class="thumb right blank"><div class="blank-mask"></div></div>';
             }
             view += '</div>'; // .doubleThumb
             view += '</label>';
@@ -100,7 +100,7 @@ FluidbookPrint.prototype = {
             view += '<label for="rightPage">';
             view += '<div class="doubleThumb">';
             if (!isFirstPage) {
-                view += '<div class="thumb left blank"></div>';
+                view += '<div class="thumb left blank"><div class="blank-mask"></div></div>';
             }
             view += '<div class="thumb '+ (isFirstPage ? 'left' : 'right') +'">'; // Only shows 1 page when on first page
             view += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
diff --git a/style/print.less b/style/print.less
index 8744447a..e66d8b9d 100644
--- a/style/print.less
+++ b/style/print.less
@@ -33,15 +33,32 @@
   }
 
   // Blank pages
-  .thumb.blank:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
+  .thumb.blank {
     width: 100px;
     height: 125px;
-    background-color: @menu-button-background;
-    opacity: 0.25;
+
+    // We need to mask the shadow so the :after layer can sit on top with
+    // transparency as if it was sitting directly on the modal background
+    .blank-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: @menu-background; // Must match modal background so transparency isn't polluted
+    }
+
+    // Actual blank page
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: @menu-button-background;
+      opacity: 0.5;
+    }
   }
 
   .bookmark-thumbnails {
@@ -88,6 +105,7 @@
     content: '';
     //border: 0.35em solid @menu-button-background;
     background-color: @menu-button-background;
+    opacity: 0.5;
     display: inline-block;
     box-sizing: border-box;
     width: 22px;
-- 
2.39.5