diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css
index b93eb0db43f2ad5e67e4ecb30f552bd0ba8502f3..aa8840c4cc822574ff565273a858d52ced169227 100644
--- a/src/components/browser-modal/browser-modal.css
+++ b/src/components/browser-modal/browser-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 84b6e6bf784773577d29e29954b663d19f74ab5a..0f0616a04fd12f08c452846b11b89674e45eb5ee 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -1,9 +1,10 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.card-container {
position:absolute;
- z-index: 100;
+ z-index: $z-index-card;
}
.left-card, .right-card {
@@ -13,7 +14,7 @@
background: $ui-white;
border: 1px solid $ui-tertiary;
width: 10px;
- z-index: 99;
+ z-index: 10;
opacity: 0.9;
overflow: hidden;
}
@@ -46,7 +47,7 @@
position: absolute;
top: 50%;
margin-top: -15px;
- z-index: 101;
+ z-index: 20;
user-select: none;
cursor: pointer;
background: $motion-primary;
@@ -73,7 +74,7 @@
display: flex;
flex-direction: column;
cursor: move;
- z-index: 101;
+ z-index: 20;
overflow: hidden;
box-shadow: 0px 5px 25px 5px $ui-black-transparent;
align-items: center;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index db737e1c80f5a8eefca91d8b1a5e66e8a0d629cd..bdd7f87eb4f031a9155aec4a0fd3f6affda1ad0d 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -5,17 +5,18 @@
*/
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.coming-soon {
background-color: $data-primary !important;
- border: 1px solid $ui-black-transparent) !important;
+ border: 1px solid $ui-black-transparent !important;
border-radius: .25rem !important;
box-shadow: 0 0 .5rem $ui-black-transparent !important;
padding: .75rem 1rem !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.25rem !important;
- z-index: 100 !important;
+ z-index: $z-index-coming-soon !important;
}
.coming-soon:after {
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
index ff2505ff955e0c318c8edcd01864f21e20253abc..5a02ce797d9498990738f75f497a299acf441608 100644
--- a/src/components/context-menu/context-menu.css
+++ b/src/components/context-menu/context-menu.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.context-menu {
min-width: 130px;
@@ -13,7 +14,7 @@
box-shadow: 0px 0px 5px 1px $ui-black-transparent;
pointer-events: none;
transition: opacity 0.2s ease;
- z-index: 200; /* Above the stage */
+ z-index: $z-index-context-menu;
}
.menu-item {
diff --git a/src/components/drag-layer/drag-layer.css b/src/components/drag-layer/drag-layer.css
index 711b5eea813d6a2d80b97d75c98c40fbb68e8457..0e89c6b5c71d31b13a5afffce634ee305b5950e6 100644
--- a/src/components/drag-layer/drag-layer.css
+++ b/src/components/drag-layer/drag-layer.css
@@ -1,10 +1,11 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.drag-layer {
position: fixed;
pointer-events: none;
- z-index: 1000; /* Above everything */
+ z-index: $z-index-drag-layer;
left: 0;
top: 0;
width: 100%;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 2e4e7b846811c8fced93abbc6c004c19fde51ad8..e1739444a5a24a191e19a99061f67602a397b81f 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.page-wrapper {
height: 100%;
@@ -190,7 +191,7 @@
position: absolute;
bottom: 0;
left: 0;
- z-index: 50; /** Force extension button above the ScratchBlocks flyout. */
+ z-index: $z-index-extension-button;
background: $motion-primary;
border: 1px solid $motion-primary;
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index 93480429b19e92ee3f8d4fa08883d2a87b9a7530..b41c02b1baaa92923fc92af9ecbe3d22667cef1f 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css
index 8ebbdb5cfe9d47e7a9eb880ee66e38272c8d86d4..9f97b3e811596bb6a6811d707229caaaada97159 100644
--- a/src/components/loader/loader.css
+++ b/src/components/loader/loader.css
@@ -1,4 +1,5 @@
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.background {
position: fixed;
@@ -6,7 +7,7 @@
left: 0;
width: 100%;
height: 100%;
- z-index: 999; /* Below preview modal */
+ z-index: $z-index-loader;
display: flex;
justify-content: center;
align-items: center;
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 96c64b345fd7e60c9ff9d1bc52c01dcdc9aa6ed8..8063361d9f5701d2788274f6b8b360ec31bf6db8 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.menu-bar {
display: flex;
@@ -44,8 +45,7 @@
}
.menu {
- /* blocklyToolboxDiv is 40 */
- z-index: 50;
+ z-index: $z-index-menu-bar;
top: $menu-bar-height;
}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 2a69d8ba63df54fa1973bcc98e8141dcbc499126..3aa21280beba80b61181349e5ae8a1bc38b52459 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -7,7 +8,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index f7337e90f6c9217f112f08169ee96332e0873aae..97a62e02d23916200db10035b79b42f2adc4aa3d 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -1,10 +1,11 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.monitor-container {
position: absolute;
background: $ui-primary;
- z-index: 100;
+ z-index: $z-index-monitor;
border: 1px solid $ui-black-transparent;
border-radius: calc($space / 2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -19,7 +20,7 @@
}
.dragging {
- z-index: 101;
+ z-index: $z-index-monitor-dragging;
box-shadow: 3px 3px 5px #888888;
}
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index 837ed92cfef69fd1ff77f9567483455f7c02d074..2c35acf63e0f78fbca407f74b063e691e105f2ec 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 2ac722efc5579336874b97e565ecedaab235e213..24194b3324742da78769d7ae8064e13ebba30435 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.stage-header-wrapper {
position: relative;
@@ -11,7 +12,7 @@
top: 0;
left: 0;
right: 0;
- z-index: 5000;
+ z-index: $z-index-stage-header;
}
.stage-menu-wrapper {
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index d2c7894c7832a935b6794a0784a3a89afa58dda3..15ac8bcc1d0267d12903ebf472b4273a75401b9d 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.stage {
/*
@@ -21,7 +22,7 @@
.with-color-picker {
cursor: none;
- z-index: 2001;
+ z-index: $z-index-stage-with-color-picker;
}
.color-picker-background {
@@ -30,7 +31,7 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
display: block;
- z-index: 2000;
+ z-index: $z-index-stage-color-picker-background;
top: 0;
left: 0;
}
@@ -45,7 +46,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 5000;
+ z-index: $z-index-stage-wrapper-overlay;
background-color: $ui-white;
}
@@ -86,6 +87,6 @@
position: absolute;
top: 0;
left: 0;
- z-index: 1000; /* Above everything so it is draggable into other panes */
+ z-index: $z-index-dragging-sprite;
filter: drop-shadow(5px 5px 5px $ui-black-transparent);
}
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index 334ef8f685adb061cea151422056edb422d26d49..f1b6ff6efee57e7a40a5ad1a1ebc3325e8167dcd 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/css/z-index.css b/src/css/z-index.css
new file mode 100644
index 0000000000000000000000000000000000000000..dfca96245d6a7d29353ec032f978604ca5a47a2e
--- /dev/null
+++ b/src/css/z-index.css
@@ -0,0 +1,21 @@
+/*
+ Contains constants for the z-index values of elements that are part of the global stack context.
+ In other words, z-index values that are "inside" a component are not added here.
+ This prevents conflicts between identical z-index values in different components.
+*/
+
+$z-index-extension-button: 50; /* Force extension button above the ScratchBlocks flyout */
+$z-index-menu-bar: 50; /* blocklyToolboxDiv is 40 */
+$z-index-card: 100;
+$z-index-coming-soon: 100;
+$z-index-monitor: 100;
+$z-index-monitor-dragging: 101;
+$z-index-context-menu: 200; /* above the stage */
+$z-index-loader: 999; /* below modals */
+$z-index-modal: 1000;
+$z-index-drag-layer: 1000; /* above everything */
+$z-index-dragging-sprite: 1000; /* above everything so it is draggable into other panes */
+$z-index-stage-color-picker-background: 2000;
+$z-index-stage-with-color-picker: 2001;
+$z-index-stage-header: 5000;
+$z-index-stage-wrapper-overlay: 5000;
\ No newline at end of file