From 8d610f6c9fb3ec526dbdedffa90df569e8e1f0f2 Mon Sep 17 00:00:00 2001 From: Macleod Sawyer Date: Mon, 3 Jan 2022 19:01:46 -0600 Subject: [PATCH] v12022.01.03 :: Rewrite to be more fluid, uses more variables and calculations, and overall better. --- sidebery-data.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sidebery-data.json b/sidebery-data.json index 12c3c35..6a1f129 100644 --- a/sidebery-data.json +++ b/sidebery-data.json @@ -1 +1 @@ -{"settings":{"version":"4.10.0","nativeScrollbars":false,"selWinScreenshots":true,"tabsCheck":true,"tabsFix":"notify","markWindow":false,"markWindowPreface":"[Sidebery] ","ctxMenuNative":false,"autoHideCtxMenu":"none","ctxMenuRenderInact":true,"ctxMenuIgnoreContainers":"","navBarLayout":"horizontal","navBarInline":true,"hideAddBtn":false,"hideSettingsBtn":false,"navBtnCount":true,"hideEmptyPanels":true,"navActTabsPanelLeftClickAction":"none","navActBookmarksPanelLeftClickAction":"none","navMidClickAction":"none","navSwitchPanelsWheel":true,"groupLayout":"grid","skipEmptyPanels":false,"dndTabAct":true,"dndTabActDelay":750,"dndTabActMod":"none","dndExp":"pointer","dndExpDelay":0,"dndExpMod":"none","stateStorage":"global","warnOnMultiTabClose":"collapsed","activateOnMouseUp":true,"activateLastTabOnPanelSwitching":true,"showTabRmBtn":true,"showTabCtx":true,"hideInact":false,"activateAfterClosing":"next","activateAfterClosingPrevRule":"visible","activateAfterClosingNextRule":"tree","activateAfterClosingGlobal":false,"activateAfterClosingNoFolded":true,"activateAfterClosingNoDiscarded":true,"shiftSelAct":true,"askNewBookmarkPlace":false,"tabsRmUndoNote":true,"nativeHighlight":false,"tabsUnreadMark":false,"tabsReloadLimit":5,"tabsReloadLimitNotif":true,"tabsPanelSwitchActMove":true,"moveNewTabPin":"start","moveNewTabParent":"last_child","moveNewTabParentActPanel":false,"moveNewTab":"end","pinnedTabsPosition":"panel","pinnedTabsList":true,"pinnedAutoGroup":false,"tabsTree":true,"groupOnOpen":true,"tabsTreeLimit":"none","hideFoldedTabs":false,"autoFoldTabs":false,"autoFoldTabsExcept":"none","autoExpandTabs":false,"rmChildTabs":"none","tabsChildCount":true,"tabsLvlDots":false,"discardFolded":false,"discardFoldedDelay":0,"discardFoldedDelayUnit":"sec","tabsTreeBookmarks":true,"treeRmOutdent":"branch","bookmarksPanel":true,"warnOnMultiBookmarkDelete":"collapsed","openBookmarkNewTab":false,"midClickBookmark":"open_new_tab","actMidClickTab":false,"autoCloseBookmarks":false,"autoRemoveOther":false,"highlightOpenBookmarks":false,"activateOpenBookmarkTab":false,"showBookmarkLen":false,"bookmarksRmUndoNote":true,"fontSize":"s","bgNoise":false,"animations":true,"animationSpeed":"fast","theme":"default","style":"light","sidebarCSS":true,"groupCSS":false,"snapNotify":true,"snapExcludePrivate":false,"snapInterval":0,"snapIntervalUnit":"min","snapLimit":0,"snapLimitUnit":"snap","hScrollThroughPanels":false,"scrollThroughTabs":"none","scrollThroughVisibleTabs":false,"scrollThroughTabsSkipDiscarded":false,"scrollThroughTabsExceptOverflow":true,"scrollThroughTabsCyclic":false,"tabDoubleClick":"none","tabLongLeftClick":"none","tabLongRightClick":"none","tabsPanelLeftClickAction":"none","tabsPanelDoubleClickAction":"tab","tabsPanelRightClickAction":"menu","tabsPanelMiddleClickAction":"tab","syncName":"","syncSaveSettings":true,"syncSaveCtxMenu":true,"syncSaveStyles":true,"syncAutoApply":false},"tabsMenu":[["undoRmTab","mute","reload","bookmark"],"separator-1",[{"name":"Move to"},"moveToNewWin","moveToWin","moveToPanel"],[{"name":"Reopen in"},"reopenInNewWin","reopenInWin","reopenInCtr"],"separator-2","pin","duplicate","discard","copyUrls","separator-3","group","flatten","separator-4","clearCookies","close"],"bookmarksMenu":[[{"name":"Open in"},"openInNewWin","openInNewPrivWin","openInCtr"],"separator-5","createBookmark","createFolder","createSeparator","separator-6","sortByName","sortByLink","sortByTime","separator-7","copyUrls","edit","delete"],"cssVars":{"bg":null,"title_fg":null,"sub_title_fg":null,"label_fg":null,"label_fg_hover":null,"label_fg_active":null,"info_fg":null,"true_fg":null,"false_fg":null,"active_fg":null,"inactive_fg":null,"favicons_placeholder_bg":null,"btn_bg":null,"btn_bg_hover":null,"btn_bg_active":null,"btn_fg":null,"btn_fg_hover":null,"btn_fg_active":null,"scroll_progress_h":null,"scroll_progress_bg":null,"ctx_menu_font":null,"ctx_menu_bg":null,"ctx_menu_bg_hover":null,"ctx_menu_fg":null,"nav_btn_fg":null,"nav_btn_width":null,"nav_btn_height":"34.5px","pinned_dock_overlay_bg":null,"pinned_dock_overlay_shadow":null,"tabs_height":null,"tabs_pinned_height":null,"tabs_pinned_width":null,"tabs_indent":null,"tabs_font":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";","tabs_count_font":null,"tabs_fg":"#323232","tabs_fg_hover":null,"tabs_fg_active":null,"tabs_bg_hover":"#dedddaff","tabs_bg_active":null,"tabs_activated_bg":"#ffffffff","tabs_activated_fg":null,"tabs_selected_bg":null,"tabs_selected_fg":null,"tabs_border":null,"tabs_activated_border":null,"tabs_selected_border":null,"tabs_shadow":null,"tabs_activated_shadow":"rgba(0,0,0,0.15)","tabs_selected_shadow":null,"tabs_lvl_indicator_bg":null,"bookmarks_bookmark_height":null,"bookmarks_folder_height":null,"bookmarks_separator_height":null,"bookmarks_bookmark_font":null,"bookmarks_folder_font":null,"bookmarks_node_title_fg":null,"bookmarks_node_title_fg_hover":null,"bookmarks_node_title_fg_active":null,"bookmarks_node_bg_hover":null,"bookmarks_node_bg_active":null,"bookmarks_folder_closed_fg":null,"bookmarks_folder_closed_fg_hover":null,"bookmarks_folder_closed_fg_active":null,"bookmarks_folder_open_fg":null,"bookmarks_folder_open_fg_hover":null,"bookmarks_folder_open_fg_active":null,"bookmarks_folder_empty_fg":null,"bookmarks_open_bookmark_fg":null},"sidebarCSS":".Sidebar {\nbackground: var(--sidebar-background-color);\nfont-family: \"Segoe UI\";\n\n}\n\n.container {\n padding-top: 2.5px !important;\n margin: 0 10px !important;\n max-width: calc(100% - 10px) !important;\n}\n\n.NavigationBar {\n padding-left: 8px;\n}\n\n.Tab, .PinnedTab {\n border-radius: 5px;\n border: 1px solid transparent !important;\n background: none;\n box-shadow: none;\n border-radius: 5px;\n margin: 4px 10px;\n text-align: left;\n transition: width 0.1s !Important;\n float: right;\n}\n\n\n.Tab .fav, .PinnedTab .fav {\n position: relative;\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n margin: 0 6px 0 6px;\n opacity: 1 !important;\n}\n\n.PinnedTab .fav {\n margin-left: 4px;\n}\n\n.Tab:hover .fav, .PinnedTab:hover fav {\n opacity: 1 !important;\n}\n\n.Tab .placeholder, .PinnedTab .placeholder {\n width: 18px;\n height: 18px;\n}\n\n.Tab[data-active], .PinnedTab[data-active] {\n box-shadow: 0px 5px 10px var(--tabs-activated-shadow) !important;\n}\n\n\n.Tab .t-box, .PinnedTab .title {\n mask: linear-gradient(-90deg,transparent,#000 25px,#000);\n /*! display: none; */\n}\n\n.Tab .t-box .title, .PinnedTab .title {\npadding-left: 4px;\nfont-family: var(--tabs-font) !important;\ncolor: var(--tabs-fg);\n}\n\n.Tab .close {\n fill: #000;\n}\n\n.Tab .close > svg {\n fill: #000;\n background: none;\n opacity: 1;\n height: 18px !important;\nwidth: 18px !important;\n}\n\n.Tab .close > svg:hover {\n background: rgba(0,0,0,0.075);\n border-radius: 4px;\nfill: #000;\n}\n\n.PinnedTab .close {\ndisplay: none !important;\n}\n\n.Tab .ctx,\n.PinnedTab .ctx {\ntop: 4px;\nright: auto;\nleft: -11px;\nwidth: 4px;\nheight: calc(100% - 5px);\n}\n\n.Tab:hover,\n.PinnedTab:hover {\n background: var(--tabs-bg-hover);\n}\n\n.Tab[data-lvl] { \n padding-left: 0;\n\n}\n\n.Tab[data-lvl=\"0\"] {\n max-width: calc(100% - 10px);\n}\n\n.Tab[data-lvl=\"1\"] {\n max-width: calc(100% - 20px)\n\n}\n\n.Tab[data-lvl=\"2\"] {\n max-width: calc(100% - 30px)\n}\n\n.Tab[data-lvl=\"3\"] {\n max-width: calc(100% - 40px)\n}\n\n.Tab[data-lvl=\"4\"] {\n max-width: calc(100% - 50px)\n}\n\n.Tab[data-lvl=\"5\"] {\n max-width: calc(100% - 60px)\n}\n\n.Tab[data-lvl=\"6\"] {\n max-width: calc(100% - 70px)\n}\n\n.Tab[data-lvl=\"7\"] {\n max-width: calc(100% - 80px)\n}\n\n.Tab[data-lvl=\"8\"] {\n max-width: calc(100% - 90px)\n}\n\n.Sidebar {\nmargin-top: -2.5px;\n}\n\n.PinnedDock {\npadding-top: 2.5px !important;\npadding-bottom: 0 !important;\nmargin-bottom: -2.5px;\n}\n\n.PinnedDock::after {\n display: none !important;\n}\n\n.audio {\n position: absolute;\n margin-left: -14px;\n margin-top: 7px;\n z-index: 10;\n}\n\n.audio svg {\n padding: 3px;\n height: 14px !important;\n width: 14px !important;\n background: #fff;\n border-radius: 50%;\n box-shadow: 1px 1px 5px rgba(0,0,0,0.25);\n\n}\n\n.Tab[data-audible] .t-box, .Tab[data-muted] .t-box {\n transform: none !important;\n}\n\n\n@media screen and (max-width: 60px) {\n .container { \n margin: 0px !important;\n max-width: 50px;\n}\n\n .Tab[data-lvl], .PinnedTab[data-lvl] {\n max-width: 30px;\n float: left;\n }\n\n.panel-btn[data-active=\"true\"] {\n display: ;\n display: flex !important;\n position: absolute !important;\n background: none !important;\n}\n\n\n.panel-btn {\n display: none !important;\n}\n\n.Sidebar .settings-btn {\n display: none;\n}\n\n.container::after { \n margin-left: 16px;\n}\n}\n}","groupCSS":"","ver":"4.10.0"} \ No newline at end of file +{"settings":{"version":"4.10.0","nativeScrollbars":false,"selWinScreenshots":true,"tabsCheck":true,"tabsFix":"notify","markWindow":false,"markWindowPreface":"[Sidebery] ","ctxMenuNative":false,"autoHideCtxMenu":"none","ctxMenuRenderInact":true,"ctxMenuIgnoreContainers":"","navBarLayout":"horizontal","navBarInline":true,"hideAddBtn":false,"hideSettingsBtn":false,"navBtnCount":true,"hideEmptyPanels":true,"navActTabsPanelLeftClickAction":"none","navActBookmarksPanelLeftClickAction":"none","navMidClickAction":"none","navSwitchPanelsWheel":true,"groupLayout":"grid","skipEmptyPanels":false,"dndTabAct":true,"dndTabActDelay":750,"dndTabActMod":"none","dndExp":"pointer","dndExpDelay":0,"dndExpMod":"none","stateStorage":"global","warnOnMultiTabClose":"collapsed","activateOnMouseUp":true,"activateLastTabOnPanelSwitching":true,"showTabRmBtn":true,"showTabCtx":true,"hideInact":false,"activateAfterClosing":"next","activateAfterClosingPrevRule":"visible","activateAfterClosingNextRule":"tree","activateAfterClosingGlobal":false,"activateAfterClosingNoFolded":true,"activateAfterClosingNoDiscarded":true,"shiftSelAct":true,"askNewBookmarkPlace":false,"tabsRmUndoNote":true,"nativeHighlight":false,"tabsUnreadMark":false,"tabsReloadLimit":5,"tabsReloadLimitNotif":true,"tabsPanelSwitchActMove":true,"moveNewTabPin":"start","moveNewTabParent":"last_child","moveNewTabParentActPanel":false,"moveNewTab":"end","pinnedTabsPosition":"panel","pinnedTabsList":true,"pinnedAutoGroup":false,"tabsTree":true,"groupOnOpen":true,"tabsTreeLimit":"none","hideFoldedTabs":false,"autoFoldTabs":false,"autoFoldTabsExcept":"none","autoExpandTabs":false,"rmChildTabs":"none","tabsChildCount":true,"tabsLvlDots":false,"discardFolded":false,"discardFoldedDelay":0,"discardFoldedDelayUnit":"sec","tabsTreeBookmarks":true,"treeRmOutdent":"branch","bookmarksPanel":true,"warnOnMultiBookmarkDelete":"collapsed","openBookmarkNewTab":false,"midClickBookmark":"open_new_tab","actMidClickTab":false,"autoCloseBookmarks":false,"autoRemoveOther":false,"highlightOpenBookmarks":false,"activateOpenBookmarkTab":false,"showBookmarkLen":false,"bookmarksRmUndoNote":true,"fontSize":"s","bgNoise":false,"animations":true,"animationSpeed":"fast","theme":"default","style":"light","sidebarCSS":true,"groupCSS":false,"snapNotify":true,"snapExcludePrivate":false,"snapInterval":0,"snapIntervalUnit":"min","snapLimit":0,"snapLimitUnit":"snap","hScrollThroughPanels":false,"scrollThroughTabs":"none","scrollThroughVisibleTabs":false,"scrollThroughTabsSkipDiscarded":false,"scrollThroughTabsExceptOverflow":true,"scrollThroughTabsCyclic":false,"tabDoubleClick":"none","tabLongLeftClick":"none","tabLongRightClick":"none","tabsPanelLeftClickAction":"none","tabsPanelDoubleClickAction":"tab","tabsPanelRightClickAction":"menu","tabsPanelMiddleClickAction":"tab","syncName":"","syncSaveSettings":true,"syncSaveCtxMenu":true,"syncSaveStyles":true,"syncAutoApply":false},"tabsMenu":[["undoRmTab","mute","reload","bookmark"],"separator-1",[{"name":"Move to"},"moveToNewWin","moveToWin","moveToPanel"],[{"name":"Reopen in"},"reopenInNewWin","reopenInWin","reopenInCtr"],"separator-2","pin","duplicate","discard","copyUrls","separator-3","group","flatten","separator-4","clearCookies","close"],"bookmarksMenu":[[{"name":"Open in"},"openInNewWin","openInNewPrivWin","openInCtr"],"separator-5","createBookmark","createFolder","createSeparator","separator-6","sortByName","sortByLink","sortByTime","separator-7","copyUrls","edit","delete"],"cssVars":{"bg":null,"title_fg":null,"sub_title_fg":null,"label_fg":null,"label_fg_hover":null,"label_fg_active":null,"info_fg":null,"true_fg":null,"false_fg":null,"active_fg":null,"inactive_fg":null,"favicons_placeholder_bg":null,"btn_bg":null,"btn_bg_hover":null,"btn_bg_active":null,"btn_fg":null,"btn_fg_hover":null,"btn_fg_active":null,"scroll_progress_h":null,"scroll_progress_bg":null,"ctx_menu_font":null,"ctx_menu_bg":null,"ctx_menu_bg_hover":null,"ctx_menu_fg":null,"nav_btn_fg":null,"nav_btn_width":null,"nav_btn_height":"34.5px","pinned_dock_overlay_bg":null,"pinned_dock_overlay_shadow":null,"tabs_height":"38px","tabs_pinned_height":null,"tabs_pinned_width":null,"tabs_indent":"10px","tabs_font":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";","tabs_count_font":null,"tabs_fg":"#323232","tabs_fg_hover":null,"tabs_fg_active":null,"tabs_bg_hover":"#dedddaff","tabs_bg_active":null,"tabs_activated_bg":"#ffffff","tabs_activated_fg":null,"tabs_selected_bg":null,"tabs_selected_fg":null,"tabs_border":null,"tabs_activated_border":null,"tabs_selected_border":null,"tabs_shadow":null,"tabs_activated_shadow":"rgba(0,0,0,0.15)","tabs_selected_shadow":null,"tabs_lvl_indicator_bg":null,"bookmarks_bookmark_height":null,"bookmarks_folder_height":null,"bookmarks_separator_height":null,"bookmarks_bookmark_font":null,"bookmarks_folder_font":null,"bookmarks_node_title_fg":null,"bookmarks_node_title_fg_hover":null,"bookmarks_node_title_fg_active":null,"bookmarks_node_bg_hover":null,"bookmarks_node_bg_active":null,"bookmarks_folder_closed_fg":null,"bookmarks_folder_closed_fg_hover":null,"bookmarks_folder_closed_fg_active":null,"bookmarks_folder_open_fg":null,"bookmarks_folder_open_fg_hover":null,"bookmarks_folder_open_fg_active":null,"bookmarks_folder_empty_fg":null,"bookmarks_open_bookmark_fg":null},"sidebarCSS":"#root {\n--tabs-spacing: 4px; */ Spacing between the tabs, be sure to change the tab height for it to look right!) */\n}\n\n@media screen and (max-width: 60px) {\n #root {\n --tabs-indent: unset !important;\n }\n\n .container { \n max-width: 60px;\n } \n\n .Tab .audio {\n margin-left: -15px;\n transform: scale(.80);\n z-index: 99 !important;\n }\n\n .Tab[data-lvl] , .PinnedTab[data-lvl] {\n max-width: 30px;\n float: left;\n }\n .container { \n margin: 0px !important;\n max-width: 50px;\n }\n\n .Tab[data-lvl] , .PinnedTab[data-lvl] {\n max-width: 30px;\n float: left;\n }\n\n .panel-btn[data-active=\"true\"] {\n display: ;\n display: flex !important;\n position: absolute !important;\n background: none !important;\n }\n\n\n .panel-btn {\n display: none !important;\n }\n\n .Sidebar .settings-btn {\n display: none;\n }\n\n .container::after { \n margin-left: 16px;\n }\n}\n\n.Sidebar {\n background: var(--sidebar-background-color);\n font-family: \"Segoe UI\";\n}\n\n.container {\n padding-top: 2.5px !important;\n margin: 0 auto !important;\n max-width: calc(100% - 20px);\n}\n\n.NavigationBar {\n padding-left: 8px;\n}\n\n\n/* Reset default styles */\n.Tab[data-active], .Tab:hover, .PinnedTab[data-active], .PinnedTab:hover {\n background-color: transparent;\n}\n\n.Tab[data-active] .lvl-wrapper:after, .PinnedTab[data-active] {\n background-color: var(--tabs-activated-bg);\n}\n\n\n/* Style for Tabs and Pinned Tabs */\n.Tab .lvl-wrapper:after, .PinnedTab {\n border-radius: 5px;\n border: 1px solid transparent !important;\n border-radius: 5px;\n text-align: left;\n transition: width 0.1s !Important;\n}\n\n/* Background layer for tabs */\n.Tab .lvl-wrapper:after {\n content: '';\n position: absolute;\n top: 0px;\n left: 2px;\n margin: var(--tabs-spacing) 0;\n width: calc(100% - 4px);\n height: calc(100% - calc(var(--tabs-spacing) * 2));\n z-index: -1;\n}\n\n/* Style for pinned tabs */ \n\n.PinnedTab {\n height: calc(var(--tabs-height) - calc(var(--tabs-spacing) * 2)) !important; \n margin: var(--tabs-spacing) 10px;\n}\n\n\n.Tab[data-active] .lvl-wrapper:after, .PinnedTab[data-active] {\n box-shadow: 0px 5px 10px var(--tabs-activated-shadow) !important;\n}\n\n.Tab:hover .lvl-wrapper:after, .PinnedTab:hover {\n background: var(--tabs-bg-hover);\n}\n\n/* Favicon Settings */\n\n.Tab .fav, .PinnedTab .fav {\n position: relative;\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n margin: 0 6px 0 6px;\n opacity: 1 !important;\n}\n\n.Tab .placeholder > svg {\n width: 18px;\n height: 18px;\n}\n\n.PinnedTab .fav {\n margin-left: 4px;\n}\n\n.Tab:hover .fav, .PinnedTab:hover fav {\n opacity: 1 !important;\n}\n\n.Tab .placeholder, .PinnedTab . placeholder {\n width: 18px;\n height: 18px;\n}\n\n\n/* Internal Tab Settings */ \n.Tab .t-box, .PinnedTab .title {\n mask: linear-gradient(-90deg,transparent,#000 25px,#000);\n /*! display: none; */\n}\n\n.Tab .t-box .title, .PinnedTab .title {\npadding-left: 4px;\nfont-family: var(--tabs-font) !important;\ncolor: var(--tabs-fg);\n}\n\n/* Tab Close and Context Buttons */\n.Tab .close {\n fill: #000;\n}\n\n.Tab .close > svg {\n fill: #000;\n background: none;\n opacity: 1;\n height: 18px !important;\nwidth: 18px !important;\n}\n\n.Tab .close > svg:hover {\n background: rgba(0,0,0,0.075);\n border-radius: 4px;\nfill: #000;\n}\n\n.PinnedTab .close {\ndisplay: none !important;\n}\n\n.Tab .ctx,\n.PinnedTab .ctx {\ntop: 4px;\nright: auto;\nleft: -11px;\nwidth: 4px;\nheight: calc(100% - 5px);\n}\n\n.Sidebar {\nmargin-top: -2.5px;\n}\n\n.PinnedDock {\npadding-top: 2.5px !important;\npadding-bottom: 0 !important;\nmargin-bottom: -2.5px;\n}\n\n.PinnedDock::after {\n display: none !important;\n}\n\n.audio {\n position: absolute;\n margin-left: -14px;\n margin-top: 7px;\n z-index: 10;\n}\n\n.audio svg {\n padding: 3px;\n height: 14px !important;\n width: 14px !important;\n background: #fff;\n border-radius: 50%;\n box-shadow: 1px 1px 5px rgba(0,0,0,0.25);\n\n}\n\n.Tab[data-audible] .t-box, .Tab[data-muted] .t-box {\n transform: none !important;\n}\n\n\n\n*/ The following aren't used, but will be in the future\n\n@media (prefers-color-scheme:light) {\n .Tab[data-active] .lvl-wrapper:after {\n box-shadow: 0px 5px 10px rgba(0,0,0,0.15);\n }\n}\n\n@media (prefers-color-scheme:dark) {\n .Tab[data-active] .lvl-wrapper:after {\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n }\n}\n\n*/","groupCSS":"","ver":"4.10.0"} \ No newline at end of file