Merge pull request #341 from adzhindzhi/uepr-385-sprite-on-stage-not-clickable

[UEPR-385] Fix sprites issues when extension button tooltip is displayed

Author: adzhindzhi

packages/scratch-gui/src/components/alerts/alert.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.alert {
+body .alert {
     width: 100%;
     display: flex;
     flex-direction: row;

packages/scratch-gui/src/components/cards/card.css

@@ -2,13 +2,13 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.card-container-overlay {
+body .card-container-overlay {
     position: fixed;
     pointer-events: none;
     z-index: $z-index-card;
 }
 
-.card-container {
+body .card-container {
     position:absolute;
     pointer-events: auto;
     z-index: $z-index-card;

packages/scratch-gui/src/components/drag-layer/drag-layer.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.drag-layer {
+body .drag-layer {
     position: fixed;
     pointer-events: none;
     z-index: $z-index-drag-layer;

packages/scratch-gui/src/components/gui/gui.css

@@ -229,7 +229,7 @@
 }
 
 /* Sprite Selection Watermark */
-.watermark {
+body .watermark {
     position: absolute;
     top: 1.25rem;
     pointer-events: none;
@@ -251,7 +251,7 @@
 }
 /* Alerts */
 
-.alerts-container {
+body .alerts-container {
     display: flex;
     justify-content: center;
     width: 100%;

packages/scratch-gui/src/components/monitor-list/monitor-list.css

@@ -1,4 +1,4 @@
-.monitor-list {
+body .monitor-list {
     /* Width/height are set by the component, margin: auto centers in fullscreen */
     margin: auto;
     pointer-events: none;

packages/scratch-gui/src/components/monitor/monitor.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.monitor-container {
+body .monitor-container {
     position: absolute;
     background: $ui-primary;
     z-index: $z-index-monitor;

packages/scratch-gui/src/components/sprite-info/sprite-info.css

@@ -47,7 +47,7 @@
     user-select: none;
 }
 
-.icon {
+body .icon {
     width: 100%;
     height: 100%;
     pointer-events: none;

packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.css

@@ -54,7 +54,7 @@
     align-items: center;
 }
 
-.sprite-image {
+body .sprite-image {
     user-select: none;
     pointer-events: none;
     max-width: 32px;

packages/scratch-gui/src/components/stage/stage.css

@@ -53,7 +53,7 @@
 /* we want stage overlays to all be positioned in the same spot as the stage, but can't put them inside the border
 because we want their overflow to be visible, and the bordered element must have overflow: hidden set so that the
 stage doesn't "spill" out from under its rounded corners. instead, shift these over by the border width. */
-.stage-overlays {
+body .stage-overlays {
     position: absolute;
     top: $stage-standard-border-width;
     left: $stage-standard-border-width;
@@ -67,9 +67,9 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     left: $stage-full-screen-border-width;
 }
 
-.monitor-wrapper,
-.frame-wrapper,
-.green-flag-overlay-wrapper {
+body .monitor-wrapper,
+body .frame-wrapper,
+body .green-flag-overlay-wrapper {
     position: absolute;
     top: 0;
     left: 0;
@@ -84,7 +84,7 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     filter: drop-shadow(5px 5px 5px $ui-black-transparent);
 }
 
-.stage-bottom-wrapper {
+body .stage-bottom-wrapper {
     position: absolute;
     display: flex;
     flex-direction: column;