Use ~ notation in components for image references

This uses (more or less) absolute references to external assets, which
allows imported stylesheets (like components.scss) to work from other
locations that may not have the expected path structure (e.g. the win95
theme).

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 207406cc08f4c676a45ab169a0de61ef9f3e5e9f..0366d7cba870da60501a15befa4e994b233257ee 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1758,7 +1758,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1773,7 +1773,7 @@
   }
 
   > .mastodon {
-    background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain;
+    background: url('~images/mastodon-drawer.png') no-repeat left bottom / contain;
     flex: 1;
   }
 }