Adjustments to ghost pages and radio button colours. WIP #817 @0.75

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 4171ba1fcdb5543307bd3bcc8e833ffdb2696527..f004405916973ada66d778925765ba35a3a078f2 100644 (file)
--- 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 f52310cb5e0e52f75e0aac491fa4514987976949..e81d3f0bbcaf5b8b1d5407ddc982d16b5b75c002 100644 (file)
--- 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 8744447a8f9c3401150644d80b2b416545972f51..e66d8b9de2c52b9e69f3a6693c4ddbdd1b91d80b 100644 (file)
--- 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;