changed from supports to media

edelvarden · Oct 31, 2023 · 92ddf23 · 92ddf23
1 parent ef2e582
commit 92ddf23
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 13 deletions.
diff --git a/chrome/user-chrome.css b/chrome/user-chrome.css
diff --git a/chrome/user-content.css b/chrome/user-content.css
diff --git a/src/global/_experimental.scss b/src/global/_experimental.scss
@@ -1,5 +1,5 @@
 // fixes for default Firefox colors feature
-@supports -moz-bool-pref("userChrome.default-theme-colors") {
+@media (-moz-bool-pref: meta.inspect("userChrome.default-theme-colors")) {
   :root,
   html,
   body,

diff --git a/src/user-chrome.scss b/src/user-chrome.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @import "variables/index";
 @import "global/reset";
 @import "global/fonts";

diff --git a/src/user-chrome/_variables-local.scss b/src/user-chrome/_variables-local.scss
@@ -1,4 +1,4 @@
-@supports not -moz-bool-pref("userChrome.default-theme-colors") {
+@media not (-moz-bool-pref: meta.inspect("userChrome.default-theme-colors")) {
   // accent color vars
   :root,
   html,

diff --git a/src/user-chrome/tabbar/_new-tabbar-feature.scss b/src/user-chrome/tabbar/_new-tabbar-feature.scss
@@ -1,4 +1,4 @@
-@supports -moz-bool-pref("userChrome.chrome-refresh-2023") {
+@media (-moz-bool-pref: meta.inspect("userChrome.chrome-refresh-2023")) {
   // tabs bar top margin
   #TabsToolbar-customization-target > :not(#alltabs-button) {
     margin-top: 0px !important;

diff --git a/src/user-chrome/urlbar/_compact-urlbar-feature.scss b/src/user-chrome/urlbar/_compact-urlbar-feature.scss
@@ -1,4 +1,4 @@
-@supports -moz-bool-pref("userChrome.compact-url-bar") {
+@media (-moz-bool-pref: meta.inspect("userChrome.compact-url-bar")) {
   #urlbar {
     --urlbar-height: 28px !important;
     --urlbar-toolbar-height: 36px !important;

diff --git a/src/variables/_colors.scss b/src/variables/_colors.scss
@@ -30,8 +30,7 @@ $colors: (
   // --------------------------------------------------------------------------------
   // -- Shadow
   // --------------------------------------------------------------------------------
-  "elevation-2":
-    (rgba(0, 0, 0, 0.3) 0 1px 2px 0, rgba(0, 0, 0, 0.15) 0 2px 6px 2px),
+  "elevation-2": (0 2px 4px 0 rgba(0, 0, 0, 0.28)),
   "elevation-3": (
     rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
     rgba(0, 0, 0, 0.3) 0px 8px 16px -8px

diff --git a/src/variables/_index.scss b/src/variables/_index.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @import "constants";
 @import "functions";
 @import "animation";
@@ -14,8 +15,7 @@ body {
       --#{$prefix}-#{$key}: #{$value};
     }
   }
-
-  @supports -moz-bool-pref("userChrome.force-enable-animations") {
+  @media (-moz-bool-pref: meta.inspect("userChrome.force-enable-animations")) {
     // animation durations
     @each $key, $value in $animation-durations {
       --#{$prefix}-#{$key}: #{$value};
@@ -43,21 +43,21 @@ body {
   }
 
   // optional feature: Github theme colors
-  @supports -moz-bool-pref("userChrome.github-theme-colors") {
+  @media (-moz-bool-pref: meta.inspect("userChrome.github-theme-colors")) {
     @each $key, $value in $github-theme-colors {
       --#{$prefix}-#{$key}: #{$value};
     }
   }
 
   // optional feature: Dracula theme colors
-  @supports -moz-bool-pref("userChrome.dracula-theme-colors") {
+  @media (-moz-bool-pref: meta.inspect("userChrome.dracula-theme-colors")) {
     @each $key, $value in $dracula-theme-colors {
       --#{$prefix}-#{$key}: #{$value};
     }
   }
 
   // optional feature: Chrome refresh theme colors
-  @supports -moz-bool-pref("userChrome.chrome-refresh-colors") {
+  @media (-moz-bool-pref: meta.inspect("userChrome.chrome-refresh-colors")) {
     @each $key, $value in $chrome-refresh-colors {
       --#{$prefix}-#{$key}: #{$value};
     }