Add MPRIS player background blur (#355)

* Add MPRIS player background blur

* Added edge fade

* Only blur cover if the size or source changes

data/meson.build

@@ -19,6 +19,7 @@ assert(sassc.found())
 style_css = custom_target(
   'SCSS Compilation',
   build_by_default: true,
+  build_always_stale: true,
   input : 'style/style.scss',
   output : 'style.css',
   install: true,

data/style/widgets/mpris.scss

@@ -1,14 +1,47 @@
+@define-color mpris-album-art-overlay rgba(0, 0, 0, 0.55);
+@define-color mpris-button-hover rgba(0, 0, 0, 0.50);
+
+$mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
+
 .widget-mpris {
   /* The parent to all players */
-}
-.widget-mpris-player {
-  padding: 8px;
-  margin: 8px;
-}
-.widget-mpris-title {
-  font-weight: bold;
-  font-size: 1.25rem;
-}
-.widget-mpris-subtitle {
-  font-size: 1.1rem;
+  .widget-mpris-player {
+    padding: 8px;
+    padding: 16px;
+    margin: 16px 20px;
+    background-color: #{"@mpris-album-art-overlay"};
+    border-radius: $border-radius;
+    box-shadow: $mpris-shadow;
+
+    button:hover {
+      /* The media player buttons (play, pause, next, etc...) */
+      background: #{"@noti-bg-hover"};
+    }
+
+    .widget-mpris-album-art {
+      border-radius: $border-radius;
+      box-shadow: $mpris-shadow;
+    }
+    .widget-mpris-title {
+      font-weight: bold;
+      font-size: 1.25rem;
+    }
+    .widget-mpris-subtitle {
+      font-size: 1.1rem;
+    }
+
+    & > box > button {
+      /* Change player control buttons */
+      &:hover {
+        background-color: #{"@mpris-button-hover"};
+      }
+    }
+  }
+
+  & > box > button {
+    /* Change player side buttons */
+  }
+  & > box > button:disabled {
+    /* Change player side buttons insensitive */
+  }
 }