From 05595385e6c9964e94f61912611fd824c998d1f7 Mon Sep 17 00:00:00 2001 From: Ayshe Dzhindzhi Date: Thu, 2 Oct 2025 17:13:08 +0300 Subject: [PATCH] fix: use more specific selectors to override driverjs styles --- packages/scratch-gui/src/components/alerts/alert.css | 2 +- packages/scratch-gui/src/components/cards/card.css | 4 ++-- .../src/components/drag-layer/drag-layer.css | 2 +- packages/scratch-gui/src/components/gui/gui.css | 4 ++-- .../src/components/monitor-list/monitor-list.css | 2 +- .../scratch-gui/src/components/monitor/monitor.css | 2 +- .../src/components/sprite-info/sprite-info.css | 2 +- .../sprite-selector-item/sprite-selector-item.css | 2 +- packages/scratch-gui/src/components/stage/stage.css | 10 +++++----- 9 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/scratch-gui/src/components/alerts/alert.css b/packages/scratch-gui/src/components/alerts/alert.css index fab305bcce..3350fbf906 100644 --- a/packages/scratch-gui/src/components/alerts/alert.css +++ b/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; diff --git a/packages/scratch-gui/src/components/cards/card.css b/packages/scratch-gui/src/components/cards/card.css index 38f78d7cf1..a9e33a1cae 100644 --- a/packages/scratch-gui/src/components/cards/card.css +++ b/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; diff --git a/packages/scratch-gui/src/components/drag-layer/drag-layer.css b/packages/scratch-gui/src/components/drag-layer/drag-layer.css index cb8885374f..0074684a72 100644 --- a/packages/scratch-gui/src/components/drag-layer/drag-layer.css +++ b/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; diff --git a/packages/scratch-gui/src/components/gui/gui.css b/packages/scratch-gui/src/components/gui/gui.css index d502bfcd46..07979384e9 100644 --- a/packages/scratch-gui/src/components/gui/gui.css +++ b/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%; diff --git a/packages/scratch-gui/src/components/monitor-list/monitor-list.css b/packages/scratch-gui/src/components/monitor-list/monitor-list.css index 8a6a314070..50f7bc285c 100644 --- a/packages/scratch-gui/src/components/monitor-list/monitor-list.css +++ b/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; diff --git a/packages/scratch-gui/src/components/monitor/monitor.css b/packages/scratch-gui/src/components/monitor/monitor.css index a4011457a5..e176d7f443 100644 --- a/packages/scratch-gui/src/components/monitor/monitor.css +++ b/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; diff --git a/packages/scratch-gui/src/components/sprite-info/sprite-info.css b/packages/scratch-gui/src/components/sprite-info/sprite-info.css index 364df9fceb..951aacbacd 100644 --- a/packages/scratch-gui/src/components/sprite-info/sprite-info.css +++ b/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; diff --git a/packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.css b/packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.css index 81c48358bd..a315bed9ae 100644 --- a/packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.css +++ b/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; diff --git a/packages/scratch-gui/src/components/stage/stage.css b/packages/scratch-gui/src/components/stage/stage.css index a799e05ce3..cd23b1a6a3 100644 --- a/packages/scratch-gui/src/components/stage/stage.css +++ b/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;