merge-upstream: various more style fixes

src/addons/addon-precedence.js

@@ -1,10 +1,12 @@
-// This list is a subset of `addons` and defines the order by which addon CSS should
-// applied in. Items later in this list are given higher precedence. Addons not listed
-// here are implied to have the lowest possible precedence.
+// This list is a subset of all addon IDs to control the order of userstyles.
+// The last item in the list is given the highest precedence (last in the DOM).
+// If an addon isn't listed here, it's interpreted to have lowest precedence and
+// that its order with other unlisted addons does not matter.
 const addonPrecedence = [
     'columns',
     'editor-stage-left',
-    'editor-theme3'
+    'editor-theme3',
+    'hide-stage'
 ];
 
 /**

src/addons/addons/debugger/style.css

@@ -32,7 +32,8 @@
   display: none;
   position: absolute;
   z-index: 492;
-  background-color: white;
+  background-color: var(--ui-modal-background);
+  color: var(--ui-modal-foreground);
   width: 565px;
   height: 25rem;
 }
@@ -163,20 +164,18 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid var(--ui-black-transparent);
   padding-left: 4px;
   font-family: monospace;
-  color: black;
 }
 .sa-debugger-log[data-type="warn"] {
-  border-color: hsl(50deg, 100%, 75%);
-  color: hsl(39deg 100% 18%);
-  background-color: hsl(50deg 100% 95%);
+  border-color: hsla(56deg, 100%, 69%, 0.5);
+  background-color: hsla(56deg, 100%, 69%, 0.3);
 }
 .sa-debugger-log[data-type="error"] {
-  border-color: hsl(0deg 100% 92%);
+  border-color: hsla(0deg, 100%, 69%, 0.5);
   color: red;
-  background-color: hsl(0deg 100% 95%);
+  background-color: hsla(0deg, 100%, 69%, 0.3);
 }
 
 .sa-debugger-log-repeats {
@@ -273,7 +272,7 @@
   display: block;
   text-align: center;
   height: 24px;
-  color: #2121bf;
+  color: var(--link-color);
 }
 .sa-debugger-compiler-warning[hidden] {
   display: none;

src/addons/addons/hide-flyout/style.css

@@ -91,6 +91,7 @@
 
 .sa-lock-button img {
   width: 20px;
+  user-select: none;
   filter: var(--editorDarkMode-accent-filter, none);
 }
 

src/addons/addons/vol-slider/userstyle.css

@@ -30,7 +30,10 @@
 
 .sa-small-stage .sa-vol-slider-input,
 .sa-small-stage .sa-vol-slider-icon:not([data-icon="mute"]) {
-  display: none;
+  display: none !important;
+}
+.sa-small-stage .sa-vol-slider {
+  width: 0;
 }
 
 .sa-vol-slider-input {

src/addons/generated/upstream-meta.json

@@ -1 +1 @@
-{"commit":"ce0cd3d"}
+{"commit":"a79f5d8"}

src/components/menu-bar/menu-bar.jsx

@@ -835,6 +835,9 @@ class MenuBar extends React.Component {
                             </div>
                         )}
                     </div>
+
+                    <Divider className={styles.divider} />
+
                     {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
                             <MenuBarItemTooltip

src/css/z-index.css

@@ -15,7 +15,7 @@ $z-index-stage-question: 49; /* "ask" block text input goes above monitors */
 $z-index-card: 480;
 $z-index-alerts: 490;
 $z-index-menu-bar: 491; /* menu-bar should go over monitors, alerts and tutorials */
-$z-index-loader: 500;
+$z-index-loader: 490; /* behind menu-bar */
 $z-index-modal: 510;
 
 $z-index-drag-layer: 1000;