diff --git a/resources/assets/snippets/new-hover-panel.png b/resources/assets/snippets/new-hover-panel.png new file mode 100644 index 00000000..53192390 Binary files /dev/null and b/resources/assets/snippets/new-hover-panel.png differ diff --git a/resources/snippets.json b/resources/snippets.json index f4ee7e53..47e52439 100644 --- a/resources/snippets.json +++ b/resources/snippets.json @@ -62,9 +62,15 @@ { "title": "Hover Panels", "description": "Have your playlist, right sidebar, and controls bar be hoverable.", - "code": ".Root__nav-bar {\n position: absolute;\n width: 35px;\n opacity: 0;\n bottom: 0;\n left: 0;\n top: 0;\n z-index: 12;\n transition: width 400ms, opacity 250ms ease-out;\n}\n.main-yourLibraryX-entryPoints {\n background: var(--spice-sidebar);\n}\n.Root__nav-bar:hover {\n width: 250px;\n opacity: 1;\n transition: width 250ms, opacity 400ms ease-in;\n}\n.LayoutResizer__resize-bar {\n cursor: none;\n}\n.Root__top-bar {\n opacity: 0;\n transition: visibility 5s, opacity 1s linear;\n}\n.Root__top-bar:hover {\n transition-delay: 0.5s;\n opacity: 1;\n transition: visibility 5s, opacity 0.5s linear;\n}\n.main-topBar-container {\n -webkit-padding-end: 32px;\n padding: 16px 85px;\n padding-inline-end: 32px;\n max-width: none;\n}\n.main-buddyFeed-container:hover {\n width: 350px !important;\n opacity: 1 !important;\n transition: width 250ms, opacity 400ms ease-in;\n}\n.main-buddyFeed-container {\n position: absolute;\n right: -5px;\n top: 0;\n bottom: 84px;\n width: 50px !important;\n opacity: 0 !important;\n transition: width 400ms, opacity 250ms ease-out;\n}\n.main-trackList-trackListHeader {\n top: 0 !important;\n}\n.main-yourLibraryX-navItem {\n overflow: hidden;\n}\n.main-coverSlotCollapsed-navAltContainer {\n overflow: visible;\n}\n.LayoutResizer__resize-bar {\n display: none;\n}\n:root {\n --left-sidebar-width: 35px !important;\n --right-sidebar-width: 50px !important;\n}", + "code": ".Root__nav-bar {\n position: absolute;\n width: 35px;\n opacity: 0;\n bottom: 0;\n left: 0;\n top: 0;\n z-index: 12;\n transition: width 400ms, opacity 250ms ease-out;\n}\n.main-yourLibraryX-entryPoints {\n background: var(--spice-sidebar);\n}\n.Root__nav-bar:hover {\n width: 250px;\n opacity: 1;\n transition: width 250ms, opacity 400ms ease-in;\n}\n.LayoutResizer__resize-bar {\n cursor: none;\n}\n.Root__top-bar {\n opacity: 0;\n transition: visibility 5s, opacity 1s linear;\n}\n.Root__top-bar:hover {\n transition-delay: 0.5s;\n opacity: 1;\n transition: visibility 5s, opacity 0.5s linear;\n}\n.main-topBar-container {\n -webkit-padding-end: 32px;\n padding: 16px 85px;\n padding-inline-end: 32px;\n max-width: none;\n}\n.main-buddyFeed-container:hover {\n width: 350px !important;\n opacity: 1 !important;\n transition: width 250ms, opacity 400ms ease-in;\n}\n.main-buddyFeed-container {\n position: absolute;\n right: -5px;\n top: 0;\n bottom: 84px;\n width: 50px !important;\n opacity: 0 !important;\n transition: width 400ms, opacity 250ms ease-out;\n}\n.main-trackList-trackListHeader {\n top: 0 !important;\n}\n.main-yourLibraryX-navItem {\n overflow: hidden;\n}\n.main-coverSlotCollapsed-navAltContainer {\n overflow: visible;\n}\n.LayoutResizer__resize-bar {\n display: none;\n}\n:root {\n --left-sidebar-width: 35px !important;\n --right-sidebar-width: 50px !important;\n margin-left:-8px;\n}", "preview": "resources/assets/snippets/hover-panels.png" }, + { + "title": "New Hover Panel", + "description": "A New Hover Panel that servers the same purpose as the legacy 'Hover Panels', but only for the left sidebar and without modifying any other elements.", + "code": "#Desktop_LeftSidebar_Id {\n position: absolute;\n left: -280px;\n width: 288px;\n height: 100%;\n background-color: black;\n opacity: 0;\n visibility: visible;\n transition: left 0.5s ease, opacity 0.5s ease;\n z-index: 12;\n}\n#Desktop_LeftSidebar_Id:hover {\n left: 0;\n opacity: 1;\n visibility: visible;\n}\n:root {\n margin-left: -8px;\n}", + "preview": "resources/assets/snippets/new-hover-panel.png" + }, { "title": "Fix progress bar displacement", "description": "Fixes the progress bar displacement for a few themes. Better version of @CharlieS1103 Snippet",