Overlay fixes and improvements (#3901)

* Overlay-related fixes
- Prevent navigation when a folder's grid or list view is displayed in
an overlay;

* Overlay-related fixes
- Get rid of theme-based special overlay coloring that was making the
overlay hard to use;
- Add margin to `l-overlay-large` to make it clearer that user is in an
overlay when interacting with that view;
- Refinements to colors and layout in About screens;

src/api/overlays/components/overlay-component.scss

@@ -21,8 +21,7 @@
 
     &__outer {
         @include abs();
-        background: $overlayColorBg;
+        background: $colorBodyBg;
-        color: $overlayColorFg;
         display: flex;
         flex-direction: column;
         padding: $overlayInnerMargin;
@@ -30,7 +29,6 @@
 
     &__close-button {
         $p: $interiorMargin + 2px;
-        color: $overlayColorFg;
         font-size: 1.5em;
         position: absolute;
         top: $p; right: $p;
@@ -82,11 +80,6 @@
         }
     }
 
-    .c-button,
-    .c-click-icon {
-        filter: $overlayBrightnessAdjust;
-    }
-
     .c-object-label__name {
         filter: $objectLabelNameFilter;
     }
@@ -103,6 +96,7 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -124,12 +118,8 @@ body.desktop {
         $tbPad: floor($pad * 0.8);
         $lrPad: $pad;
         .c-overlay {
-            &__blocker {
-                display: none;
-            }
-
             &__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
+                @include overlaySizing($overlayOuterMarginLarge);
                 padding: $tbPad $lrPad;
             }
 

src/plugins/folderView/components/grid-view.scss

@@ -23,6 +23,11 @@
     body.mobile & {
         flex: 1 0 auto;
     }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }
 
 /******************************* GRID ITEMS */

src/plugins/folderView/components/list-item.scss

@@ -22,4 +22,9 @@
             @include isAlias();
         }
     }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }

src/styles/_about.scss

@@ -26,6 +26,7 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+    margin-top: 30px; // Don't overlap with close "X" button
 
     &:before,
     &:after {
@@ -95,10 +96,6 @@
     &--licenses {
         padding: 0 10%;
         .c-license {
-            &__text {
-                color: pushBack($overlayColorFg, 20%);
-            }
-
             + .c-license {
                 border-top: 1px solid $colorInteriorBorder;
                 margin-top: 2em;
@@ -111,7 +108,7 @@
     }
 
     em {
-        color: pushBack($overlayColorFg, 20%);
+        color: pushBack($colorBodyFg, 20%);
     }
 
     h1, h2, h3 {

src/styles/_constants-espresso.scss

@@ -290,12 +290,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
+$overlayCr: $interiorMargin;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
-$colorOvrBtnFg: #fff;
-$overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants-maelstrom.scss

@@ -294,12 +294,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
-$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants-snow.scss

@@ -290,12 +290,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 40%);
-$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants.scss

@@ -40,7 +40,8 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
-$overlayOuterMarginFullscreen: 0%;
+$overlayOuterMarginFullscreen: 0;
+$overlayOuterMarginLarge: 10px;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
 $mainViewPad: 0px;