Merge pull request #12 from muzik-apps/macos-config

updated backdrop filter and filter to account for macOS config
muzik-apps · Jan 24, 2024 · 1bd84ad · 1bd84ad
2 parents 9626c66 + 6f8c01d
commit 1bd84ad
Show file tree

Hide file tree

Showing 22 changed files with 25 additions and 0 deletions.
diff --git a/muzik-offline/src/interface/styles/App/MiniPlayer.scss b/muzik-offline/src/interface/styles/App/MiniPlayer.scss
@@ -39,6 +39,7 @@ body {
             justify-content: center;
             align-items: center;
             filter: blur(30px);
+            -webkit-filter: blur(30px);
 
             img{
                 display: inline;

diff --git a/muzik-offline/src/interface/styles/components/cards/LargeResizableCover.scss b/muzik-offline/src/interface/styles/components/cards/LargeResizableCover.scss
@@ -36,6 +36,7 @@
 
     .first_cover{
         filter: $bg-blur-150;
+        -webkit-filter: $bg-blur-150;
     }
 
     .second_cover{

diff --git a/muzik-offline/src/interface/styles/components/cards/RectangleSongBox.scss b/muzik-offline/src/interface/styles/components/cards/RectangleSongBox.scss
@@ -96,6 +96,7 @@
 .RectangleSongBox:hover, .RectangleSongBox-selected{
     background: $on-hover-song;
     backdrop-filter: var(--var-bg-blur-150);
+    -webkit-backdrop-filter: var(--var-bg-blur-150);
 }
 
 .RectangleSongBox:active{

diff --git a/muzik-offline/src/interface/styles/components/context_menu/GeneralContextMenu.scss b/muzik-offline/src/interface/styles/components/context_menu/GeneralContextMenu.scss
@@ -10,6 +10,7 @@
     border: 1px solid $songs-container-border-col;
     background: var(--var-songs-container-bg-col);
     backdrop-filter: var(--var-bg-blur-150);
+    -webkit-backdrop-filter: var(--var-bg-blur-150);
     box-shadow: $box-shadow-10-10-25;
     padding: 9px;
 

diff --git a/muzik-offline/src/interface/styles/components/modals/AddSongToPlaylistModal.scss b/muzik-offline/src/interface/styles/components/modals/AddSongToPlaylistModal.scss
@@ -21,6 +21,7 @@
         background: var(--var-songs-container-bg-col);
         box-shadow: $box-shadow-10-10-25;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         padding-right: 0px;
 

diff --git a/muzik-offline/src/interface/styles/components/modals/AirplayCastModal.scss b/muzik-offline/src/interface/styles/components/modals/AirplayCastModal.scss
@@ -24,6 +24,7 @@
         background: var(--var-songs-container-bg-col);
         box-shadow: $box-shadow-10-10-25;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         padding-right: 0px;
         display: flex;

diff --git a/muzik-offline/src/interface/styles/components/modals/CreatePlaylistModal.scss b/muzik-offline/src/interface/styles/components/modals/CreatePlaylistModal.scss
@@ -21,6 +21,7 @@
         background: var(--var-songs-container-bg-col);
         box-shadow: $box-shadow-10-10-25;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         display: flex;
         flex-direction: column;

diff --git a/muzik-offline/src/interface/styles/components/modals/DirectoriesModal.scss b/muzik-offline/src/interface/styles/components/modals/DirectoriesModal.scss
@@ -30,6 +30,7 @@
         box-shadow: $box-shadow-10-10-25;
         background: var(--var-songs-container-bg-col);
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         font-size: 16px;
         resize: none;

diff --git a/muzik-offline/src/interface/styles/components/modals/EditPlaylistModal.scss b/muzik-offline/src/interface/styles/components/modals/EditPlaylistModal.scss
@@ -21,6 +21,7 @@
         background: var(--var-songs-container-bg-col);
         box-shadow: $box-shadow-10-10-25;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         display: flex;
         flex-direction: column;

diff --git a/muzik-offline/src/interface/styles/components/modals/PropertiesModal.scss b/muzik-offline/src/interface/styles/components/modals/PropertiesModal.scss
@@ -23,6 +23,7 @@
         border: 1px solid $songs-container-border-col;
         background: var(--var-songs-container-bg-col);
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
         padding-right: 0px;
         box-shadow: $box-shadow-10-10-25;

diff --git a/muzik-offline/src/interface/styles/components/music/AppMusicPlayer.scss b/muzik-offline/src/interface/styles/components/music/AppMusicPlayer.scss
@@ -27,6 +27,7 @@
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         filter: var(--var-layer-blur-300);
+        -webkit-filter: var(--var-layer-blur-300);
 
         img{
             display: inline;
@@ -57,6 +58,7 @@
         overflow: hidden;
         position: absolute;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
 
         .art_and_song_details{
             display: flex;
@@ -320,5 +322,6 @@
         width: calc(100vw - 2px);
         background: var(--var-glass-music-bar-bg);
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
     }
 }
diff --git a/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss b/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss
@@ -38,6 +38,7 @@
                 justify-content: center;
                 align-items: center;
                 filter: blur(30px);
+                -webkit-filter: blur(30px);
 
                 img{
                     display: inline;

diff --git a/muzik-offline/src/interface/styles/components/music/MainMusicPlayer.scss b/muzik-offline/src/interface/styles/components/music/MainMusicPlayer.scss
@@ -37,6 +37,7 @@
 
         .first_cover{
             filter: $bg-blur-150;
+            -webkit-filter: $bg-blur-150;
         }
 
         .second_cover{

diff --git a/muzik-offline/src/interface/styles/components/popover/MusicPopOver.scss b/muzik-offline/src/interface/styles/components/popover/MusicPopOver.scss
@@ -19,6 +19,7 @@
         background: var(--var-songs-container-bg-col);
         box-shadow: $box-shadow-10-10-25;
         backdrop-filter: var(--var-bg-blur-150);
+        -webkit-backdrop-filter: var(--var-bg-blur-150);
         border-radius: 20px;
 
         .music_cover_art{

diff --git a/muzik-offline/src/interface/styles/components/toasts/NotifyBottomRight.scss b/muzik-offline/src/interface/styles/components/toasts/NotifyBottomRight.scss
@@ -11,6 +11,7 @@
     border: 1px solid $songs-container-border-col;
     background: var(--var-songs-container-bg-col);
     backdrop-filter: var(--var-bg-blur-150);
+    -webkit-backdrop-filter: var(--var-bg-blur-150);
     box-shadow: $box-shadow-10-10-25;
     bottom: 86px;
     display: flex;
@@ -54,6 +55,7 @@
 
         .first_cover{
             filter: $layer-blur-50;
+            -webkit-filter: $layer-blur-50;
         }
 
         .second_cover{

diff --git a/muzik-offline/src/interface/styles/layouts/HistoryNextFloating.scss b/muzik-offline/src/interface/styles/layouts/HistoryNextFloating.scss
@@ -10,6 +10,7 @@
     border: 1px solid $songs-container-border-col;
     background: var(--var-songs-container-bg-col);
     backdrop-filter: var(--var-bg-blur-150);
+    -webkit-backdrop-filter: var(--var-bg-blur-150);
     box-shadow: $box-shadow-10-10-25;
     padding: 9px;
     padding-right: 0px;

diff --git a/muzik-offline/src/interface/styles/layouts/ProfileDetails.scss b/muzik-offline/src/interface/styles/layouts/ProfileDetails.scss
@@ -29,6 +29,7 @@
 
         .first_cover{
             filter: $bg-blur-150;
+            -webkit-filter: $bg-blur-150;
         }
 
         .second_cover{

diff --git a/muzik-offline/src/interface/styles/pages/AlbumDetails.scss b/muzik-offline/src/interface/styles/pages/AlbumDetails.scss
@@ -81,6 +81,7 @@
                     display: flex;
                     background: $btn-clickable;
                     backdrop-filter: var(--var-bg-blur-150);
+                    -webkit-backdrop-filter: var(--var-bg-blur-150);
                     height: 34px;
                     border-radius: 15px;
                     justify-content: center;

diff --git a/muzik-offline/src/interface/styles/pages/ArtistCatalogue.scss b/muzik-offline/src/interface/styles/pages/ArtistCatalogue.scss
@@ -41,6 +41,7 @@
                     display: flex;
                     background: $btn-clickable;
                     backdrop-filter: var(--var-bg-blur-150);
+                    -webkit-backdrop-filter: var(--var-bg-blur-150);
                     height: 34px;
                     border-radius: 15px;
                     justify-content: center;

diff --git a/muzik-offline/src/interface/styles/pages/GenreView.scss b/muzik-offline/src/interface/styles/pages/GenreView.scss
@@ -41,6 +41,7 @@
                     display: flex;
                     background: $btn-clickable;
                     backdrop-filter: var(--var-bg-blur-150);
+                    -webkit-backdrop-filter: var(--var-bg-blur-150);
                     height: 34px;
                     border-radius: 15px;
                     justify-content: center;

diff --git a/muzik-offline/src/interface/styles/pages/PlaylistView.scss b/muzik-offline/src/interface/styles/pages/PlaylistView.scss
@@ -41,6 +41,7 @@
                     display: flex;
                     background: $btn-clickable;
                     backdrop-filter: var(--var-bg-blur-150);
+                    -webkit-backdrop-filter: var(--var-bg-blur-150);
                     height: 34px;
                     border-radius: 15px;
                     justify-content: center;

diff --git a/muzik-offline/src/interface/styles/pages/Settings.scss b/muzik-offline/src/interface/styles/pages/Settings.scss
@@ -14,6 +14,7 @@
     border: 1px solid $songs-container-border-col;
     background: var(--var-songs-container-bg-col);
     backdrop-filter: var(--var-bg-blur-150);
+    -webkit-backdrop-filter: var(--var-bg-blur-150);
     box-shadow: $box-shadow-10-10-25;
 
     /* Track */