Adds additional safeguards for edge cases, and improves theme coverage

src/styles/color-palette.scss

@@ -29,6 +29,7 @@
   --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
   --item-group-shadow: var(--item-shadow);
+  --settings-container-shadow: none;
 
   /* Specific components, using variables allows them to be overridden individually */
   --heading-text-color: var(--primary);
@@ -48,4 +49,6 @@
   --search-field-background: var(--background);
   --footer-text-color: var(--medium-grey);
   --footer-text-color-link:  var(--primary);
+  --welcome-popup-background: var(--background-darker);
+  --welcome-popup-text-color: var(--primary);
 }

src/styles/color-themes.scss

@@ -144,6 +144,9 @@ html[data-theme='material'] {
   --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+  --settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
+  --welcome-popup-background: #01579b;
+  --welcome-popup-text-color: #ffffff;
 }
 
 html[data-theme='material-dark'] {
@@ -171,6 +174,8 @@ html[data-theme='material-dark'] {
   --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+  --welcome-popup-background: #131a1f;
+  --welcome-popup-text-color: var(--primary);
 }
 
 html[data-theme='colorful'] {

src/styles/media-queries.scss

@@ -53,3 +53,8 @@ $extra-large: 2800px;
     @content;
   }
 }
+@mixin big-screen-up {
+  @media (min-width: #{$extra-large}) {
+    @content;
+  }
+}