I've noticed that when reordering tabs, the blue line which indicates where the tab wi

Tab reordering UI off-centre of tabs,about drannex42/firefoxsidebar

Comments (4)

drannex42 commented on May 31, 2024 1

I went ahead and rewrote a lot of the original CSS and made it cleaner and use more variables and calculations. This should solve your issue and make everything a lot nicer and faster (and fix a few other issues)! I also rewrote how it handles dynamic tab sizing, should be a lot smoother.

Think you could test this out for me? I'll drop the json file here for you. If it works I'll publish it later today.

{"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":"40px","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":"#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":"#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/* 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"}

from firefoxsidebar.

bpoteryko commented on May 31, 2024 1

Amazing, thanks for your quick work! Everything works perfectly now, no further complaints from me :P

from firefoxsidebar.

bpoteryko commented on May 31, 2024

Apologies for closing this prematurely!

Thanks for doing the rewrite, everything looks like it's working smoothly.

One UX feature that's giving me trouble is the active tab background colour. It appears to be very subtle, so it can be tough to tell which tab is active at a glance. Normally I would change this myself in Sidebery settings, but it appears that something in the CSS is overwriting the Sidebery --tabs-activated-bg line.

I normally prefer using the dark theme and so adjust the tab colouring manually, but it is quite subtle in both themes:

from firefoxsidebar.

drannex42 commented on May 31, 2024

That is because I forgot about it! I have fixed that now, the default doesn't have a background, but you can change it in settings now.

{"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"}

from firefoxsidebar.

Tab reordering UI off-centre of tabs about firefoxsidebar HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent