Book reader styling (#641)

* Book reader styling

# Fixed
- Fixed styling issue with bottom nav

# Changed
- Added slight show to settings drawer
- Removed button outlines unless on hover.

* Added focus selector for keyboard only readers

* Updating

- Resolving review comments.
- Added z-index to top nav so drawer opens underneath (removing visible border)

* Styling fixes for light mode

- Added box shadow to book reader top nav to provide depth effect on light mode.
- Fixed book reader font color top nav buttons on light mode so they would show up.
- Fixed book reader drawer box shadow. for light mode.

* More style fixes

- Fix box-shadow on top and bottom book reader nav

* Fixed a button press style on light mode

Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>

UI/Web/src/app/book-reader/book-reader/book-reader.component.html

@@ -100,14 +100,14 @@
     </div>
 
     <div #readingSection class="reading-section" [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" [@isLoading]="isLoading ? true : false" (click)="handleReaderClick($event)">
-        <div #readingHtml [innerHtml]="page" *ngIf="page !== undefined"></div>
+        <div #readingHtml class="book-content" [ngStyle]="{'padding-bottom': topOffset + 20 + 'px'}" [innerHtml]="page" *ngIf="page !== undefined"></div>
 
         <div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate">
         </div>
         <div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate">
         </div>
         
-        <div [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" *ngIf="page !== undefined && scrollbarNeeded">
+        <div *ngIf="page !== undefined && scrollbarNeeded">
             <ng-container [ngTemplateOutlet]="actionBar"></ng-container>
         </div>
     </div>

UI/Web/src/app/book-reader/book-reader/book-reader.component.scss

@@ -49,6 +49,10 @@ $primary-color: #0062cc;
     padding-right: 2px;
 }
 
+.fixed-top {
+    z-index: 1022;
+}
+
 .dark-mode {
 
     color: #dcdcdc !important;
@@ -92,6 +96,7 @@ $primary-color: #0062cc;
 .reading-bar {
     background-color: white;
     overflow: hidden;
+    box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
 }
 
 .dark-mode {
@@ -101,6 +106,32 @@ $primary-color: #0062cc;
     button {
         background-color: $dark-form-background-no-opacity;
     }
+
+    .btn {
+        &.btn-secondary {
+            border-color: transparent;
+    
+            &:hover, &:focus {
+                border-color: #545b62;
+            }
+        }
+        
+        &.btn-outline-secondary {
+            border-color: transparent;
+    
+            &:hover, &:focus {
+                border-color: #545b62;
+            }
+        }
+    
+        span {
+            background-color: unset;
+        }
+    
+        i {
+            background-color: unset;
+        }
+    }
 }
 
 ::ng-deep .dark-mode .drawer-container {
@@ -173,4 +204,40 @@ $primary-color: #0062cc;
 .highlight-2 {
   background-color: rgba(65, 105, 225, 0.5) !important;
   animation: fadein .5s both;
-}
+}
+
+.btn {
+    &.btn-secondary {
+        border-color: transparent;
+        background-color: unset;
+
+        &:hover, &:focus {
+            border-color: #545b62;
+        }
+    }
+    
+    &.btn-outline-secondary {
+        border-color: transparent;
+        background-color: unset;
+
+        &:hover, &:focus {
+            border-color: #545b62;
+        }
+    }
+
+    span {
+        background-color: unset;
+        color: #6c757d;
+    }
+
+    i {
+        background-color: unset;
+        color: #6c757d;
+    }
+
+    &:active {
+        * {
+            color: white;
+        }
+    }
+}

UI/Web/src/app/shared/drawer/drawer.component.scss

@@ -13,7 +13,7 @@
     height: 100vh;
     background: var(--drawer-background-color);
     transition: all 300ms;
-    box-shadow: -3px 0px 6px 1px #00000026;
+    box-shadow: 0 6px 4px 2px rgb(0 0 0 / 70%);
     padding: 10px 10px;
     z-index: 1021;
     overflow: auto;