diff --git a/resources/assets/snippets/Minimal_visualizer.gif b/resources/assets/snippets/Minimal_visualizer.gif new file mode 100644 index 00000000..e1041af5 Binary files /dev/null and b/resources/assets/snippets/Minimal_visualizer.gif differ diff --git a/resources/snippets.json b/resources/snippets.json index 88220186..8679b68c 100644 --- a/resources/snippets.json +++ b/resources/snippets.json @@ -538,5 +538,11 @@ "description": "Transforms the player into a pill with glassy effect, and rounded corners for library icons.", "code": ".Root__right-sidebar .cover-art,.main-nowPlayingView-coverArtContainer .cover-art,.main-nowPlayingView-coverArtContainer div[style*=background]{background:0 0!important;border-radius:50%!important;opacity:1!important}.Root__right-sidebar .cover-art::after,.Root__right-sidebar .cover-art::before,.main-nowPlayingView-coverArtContainer .cover-art::after,.main-nowPlayingView-coverArtContainer .cover-art::before{display:none!important;content:none!important}.Root__right-sidebar img,.main-nowPlayingView-coverArtContainer img{border-radius:50%!important;visibility:visible!important;opacity:1!important;display:block!important}.Root__now-playing-bar,.main-nowPlayingBar-container{border-radius:99px!important;overflow:hidden!important;margin:12px!important;width:calc(100% - 24px)!important;box-shadow:0 10px 30px rgba(0,0,0,.5)!important;z-index:9999!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;background-color:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.1)!important}footer.main-nowPlayingBar-nowPlayingBar{border-radius:99px!important}.main-nowPlayingBar-left *{box-shadow:none!important;-webkit-box-shadow:none!important;filter:none!important;-webkit-filter:none!important}.main-nowPlayingBar-left .main-coverSlot-container,.main-nowPlayingBar-left .main-coverSlot-expanded{box-shadow:none!important;background:0 0!important}.main-nowPlayingBar-left canvas{display:none!important}.main-nowPlayingBar-left canvas[class*=cover],.main-nowPlayingBar-left canvas[style*=transform]{display:block!important}.main-yourLibraryX-listItemImage,.main-yourLibraryX-listItemImage>div,.x-entityImage-imageContainer{border-radius:8px!important;-webkit-mask-image:none!important;mask-image:none!important;background-color:transparent!important;overflow:hidden!important}.main-yourLibraryX-listItemImage img,.x-entityImage-image{border-radius:8px!important;-webkit-mask-image:none!important;mask-image:none!important;border:none!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important}[class*=rounded-full],[style*=\"border-radius: 50%\"]{border-radius:8px!important}.Root__main-view,.Root__nav-bar,.Root__right-sidebar,.os-host-overflow,.os-padding,div[data-testid=main-view-container]{border-radius:24px!important;overflow:hidden!important}.main-card-card,.main-cardImage-imageWrapper,.view-home-shortcut{border-radius:12px!important;overflow:hidden!important}:root{--spice-card:var(--spice-main-elevated)!important}", "preview": "resources/assets/snippets/Pill-Player-Bar.png" - } + }, + { + "title": "Minimal 4-Bar Visualizer", + "description": "A minimalist, CSS-only 4-bar visualizer for the playback bar.", + "code": ":root { --viz-color: var(--spice-button-active); --viz-speed: 0.8s; --viz-width: 18px; --viz-height: 20px; --viz-bar-w: 3px; --viz-off-y: -4px; } .main-nowPlayingBar-extraControls::before { content: ''; display: flex; width: var(--viz-width); height: var(--viz-height); margin-right: 15px; transform: translateY(var(--viz-off-y)); background-image: linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)); background-position: 0% 100%, 33% 100%, 66% 100%, 100% 100%; background-repeat: no-repeat; background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 80%, var(--viz-bar-w) 30%, var(--viz-bar-w) 60%; animation: organicBounce var(--viz-speed) infinite linear; transition: background-size 0.3s ease; } @keyframes organicBounce { 0% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 100%, var(--viz-bar-w) 10%, var(--viz-bar-w) 40%; } 9% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 55%; } 18% { background-size: var(--viz-bar-w) 100%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%; } 27% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 85%; } 36% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 100%; } 45% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 85%; } 54% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 10%, var(--viz-bar-w) 100%, var(--viz-bar-w) 70%; } 63% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 55%; } 72% { background-size: var(--viz-bar-w) 10%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%; } 81% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 25%; } 90% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 10%; } 100% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 25%; } } .main-nowPlayingBar-container:has( button[data-testid='control-button-playpause'] path[d^='M3'], button[data-testid='control-button-playpause'] path[d^='M11'], button[aria-label*='Play'] ) .main-nowPlayingBar-extraControls::before { background-size: var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px !important; animation: none !important; opacity: 0.8; }", + "preview": "Minimal_visualizer.gif" +} ]