mauricekraus
commented
1 year ago Not battle tested, but I sort of fixed it for now.
#root {
--nav-btn-width: 22px;
--name-font-size: 12px;
--count-font-size: 10px;
}
.NavigationBar .nav-item {
display: flex;
flex-direction: column-reverse;
padding: 6px 0;
height: auto;
}
.NavigationBar .nav-item .panel-btn[data-type="tabs"] {
height: var(--nav-btn-width);
}
.NavigationBar [data-type="add_tp"] > svg,
.NavigationBar .nav-item > img {
display: none;
}
.NavigationBar .nav-item .badge {
top: 1px;
left: 1px;
}
.NavigationBar .nav-item .badge,
.NavigationBar ..nav-item .progress-spinner {
display: none;
}
.NavigationBar .nav-item .len {
position: relative;
font-size: var(--count-font-size);
writing-mode: sideways-lr;
text-orientation: mixed;
background-color: transparent;
padding: 0;
margin: 5px 2px 3px 0;
top: 0;
right: 0;
color: var(--container-fg, var(--nav-btn-fg));
}
.NavigationBar .nav-item .len:before {
content: ": ";
font-size: var(--name-font-size);
}
.NavigationBar .nav-item .name-box {
position: relative;
display: block;
padding: 0;
margin: 0 2px 5px 0;
font-size: var(--name-font-size);
color: var(--container-fg, var(--nav-btn-fg));
writing-mode: sideways-lr;
text-orientation: mixed;
}
mawvius
mbnuqw
Steps to reproduce
'Vertical panel labels' CCS code
``` #root { --nav-btn-width: 22px; } .NavigationBar .panel-btn { display: flex; flex-direction: column-reverse; padding: 5px 0; height: auto; } .NavigationBar .panel-btn svg, .NavigationBar .panel-btn img, .NavigationBar .panel-btn .update-badge, .NavigationBar .panel-btn .ok-badge, .NavigationBar .panel-btn .err-badge, .NavigationBar .panel-btn .progress-spinner { display: none; } .NavigationBar .panel-btn .progress-spinner { display: none; } .NavigationBar .panel-btn .len { position: relative; font-size: 9px; writing-mode: sideways-lr; text-orientation: mixed; background-color: transparent; padding: 0; top: 0; right: 0; } .NavigationBar .panel-btn .name { position: relative; display: block; padding: 3px 0 0; font-size: 13px; color: var(--container-fg, var(--nav-btn-fg)); writing-mode: sideways-lr; text-orientation: mixed; } ```Expected behavior
Actual behavior
Debug info
Addon data (with other desired settings)
```json { "addonVersion": "5.0.0b31", "firefoxVersion": "111.0.1", "settings": { "nativeScrollbars": false, "nativeScrollbarsThin": true, "nativeScrollbarsLeft": false, "selWinScreenshots": false, "updateSidebarTitle": true, "markWindow": false, "markWindowPreface": "[Sidebery] ", "ctxMenuNative": false, "ctxMenuRenderInact": true, "ctxMenuRenderIcons": true, "ctxMenuIgnoreContainers": "", "navBarLayout": "vertical", "navBarInline": true, "navBarSide": "right", "hideAddBtn": false, "hideSettingsBtn": false, "navBtnCount": true, "hideEmptyPanels": true, "navActTabsPanelLeftClickAction": "none", "navActBookmarksPanelLeftClickAction": "none", "navTabsPanelMidClickAction": "discard", "navBookmarksPanelMidClickAction": "none", "navSwitchPanelsWheel": true, "groupLayout": "grid", "skipEmptyPanels": false, "dndTabAct": true, "dndTabActDelay": 1750, "dndTabActMod": "none", "dndExp": "pointer", "dndExpDelay": 750, "dndExpMod": "none", "dndOutside": "win", "searchBarMode": "dynamic", "warnOnMultiTabClose": "collapsed", "activateLastTabOnPanelSwitching": true, "activateLastTabOnPanelSwitchingLoadedOnly": true, "tabRmBtn": "hover", "hideInact": false, "activateAfterClosing": "next", "activateAfterClosingStayInPanel": false, "activateAfterClosingGlobal": false, "activateAfterClosingNoFolded": true, "activateAfterClosingNoDiscarded": true, "askNewBookmarkPlace": true, "tabsRmUndoNote": true, "nativeHighlight": false, "tabsUnreadMark": true, "tabsUpdateMark": "all", "tabsUpdateMarkFirst": true, "tabsReloadLimit": 5, "tabsReloadLimitNotif": true, "showNewTabBtns": true, "newTabBarPosition": "bottom", "tabsPanelSwitchActMove": false, "tabsUrlInTooltip": "full", "openSubPanelOnMouseHover": false, "selectActiveTabFirst": true, "moveNewTabPin": "end", "moveNewTabParent": "last_child", "moveNewTabParentActPanel": false, "moveNewTab": "end", "moveNewTabActivePin": "start", "pinnedTabsPosition": "panel", "pinnedTabsList": true, "pinnedAutoGroup": true, "tabsTree": true, "groupOnOpen": true, "tabsTreeLimit": "none", "hideFoldedTabs": false, "hideFoldedParent": "none", "autoFoldTabs": false, "autoFoldTabsExcept": "none", "autoExpandTabs": false, "rmChildTabs": "none", "tabsChildCount": true, "tabsLvlDots": true, "discardFolded": false, "discardFoldedDelay": 0, "discardFoldedDelayUnit": "sec", "tabsTreeBookmarks": true, "treeRmOutdent": "branch", "colorizeTabs": true, "colorizeTabsSrc": "container", "colorizeTabsBranches": false, "colorizeTabsBranchesSrc": "url", "inheritCustomColor": true, "warnOnMultiBookmarkDelete": "collapsed", "autoCloseBookmarks": false, "autoRemoveOther": false, "highlightOpenBookmarks": false, "activateOpenBookmarkTab": false, "showBookmarkLen": true, "bookmarksRmUndoNote": true, "loadBookmarksOnDemand": true, "pinOpenedBookmarksFolder": true, "loadHistoryOnDemand": true, "fontSize": "s", "animations": true, "animationSpeed": "norm", "theme": "proton", "density": "compact", "colorScheme": "ff", "sidebarCSS": false, "groupCSS": false, "snapNotify": true, "snapExcludePrivate": false, "snapInterval": 10, "snapIntervalUnit": "min", "snapLimit": 1, "snapLimitUnit": "day", "hScrollAction": "switch_act_tabs", "navSwitchPanelsDelay": 128, "scrollThroughTabs": "none", "scrollThroughVisibleTabs": true, "scrollThroughTabsSkipDiscarded": true, "scrollThroughTabsExceptOverflow": true, "scrollThroughTabsCyclic": false, "scrollThroughTabsScrollArea": 0, "autoMenuMultiSel": true, "multipleMiddleClose": false, "longClickDelay": 500, "wheelThreshold": false, "wheelThresholdX": 10, "wheelThresholdY": 60, "tabDoubleClick": "exp", "tabsSecondClickActPrev": false, "tabsSecondClickActPrevPanelOnly": false, "shiftSelAct": true, "activateOnMouseUp": true, "tabLongLeftClick": "reload", "tabLongRightClick": "duplicate", "tabCloseMiddleClick": "discard", "tabsPanelLeftClickAction": "none", "tabsPanelDoubleClickAction": "collapse", "tabsPanelRightClickAction": "menu", "tabsPanelMiddleClickAction": "undo", "newTabMiddleClickAction": "new_child", "bookmarksLeftClickAction": "open_in_new", "bookmarksLeftClickActivate": false, "bookmarksLeftClickPos": "default", "bookmarksMidClickAction": "edit", "bookmarksMidClickActivate": false, "bookmarksMidClickPos": "default", "syncName": "firefox-surface", "syncSaveSettings": true, "syncSaveCtxMenu": true, "syncSaveStyles": true, "syncSaveKeybindings": true }, "permissions": { "allUrls": true, "tabHide": true, "clipboardWrite": true, "webRequest": true, "webRequestBlocking": true }, "storage": { "size": "284 kb", "props": { "containers": "1.25 kb", "expandedBookmarkFolders": "19 b", "favDomains": "7.11 kb", "favHashes": "811 b", "favicons": "121 kb", "lastSnapTime": "13 b", "profileID": "14 b", "settings": "3.88 kb", "sidebar": "1.86 kb", "sidebarCSS": "929 b", "snapshots": "122 kb", "tabsDataCache": "24.7 kb", "ver": "10 b" } }, "sidebar": { "panels": { "xPuvmpjbRJCX": { "type": 1, "id": "xPuvmpjbRJCX", "name": "len: 9", "iconSVG": "icon_bookmarks", "iconIMGSrc": "", "iconIMG": "", "color": "toolbar", "lockedPanel": false, "tempMode": false, "skipOnSwitching": false, "rootId": "root________", "viewMode": "tree", "autoConvert": false }, "history": { "type": 4, "id": "history", "name": "len: 7", "color": "toolbar", "iconSVG": "icon_clock", "tempMode": false, "lockedPanel": false, "skipOnSwitching": false, "viewMode": "history" }, "6rRzXycCv1jO": { "type": 2, "id": "6rRzXycCv1jO", "name": "len: 4", "color": "toolbar", "iconSVG": "icon_tabs", "iconIMGSrc": "", "iconIMG": "", "lockedPanel": false, "skipOnSwitching": false, "noEmpty": false, "newTabCtx": "none", "dropTabCtx": "none", "moveTabCtx": "none", "moveTabCtxNoChild": true, "bookmarksFolderId": -1, "newTabBtns": [] }, "G6dug-9qAskO": { "type": 2, "id": "G6dug-9qAskO", "name": "len: 6", "color": "green", "iconSVG": "icon_coffee", "iconIMGSrc": "", "iconIMG": "", "lockedPanel": false, "skipOnSwitching": false, "noEmpty": true, "newTabCtx": "none", "dropTabCtx": "none", "moveTabCtx": "none", "moveTabCtxNoChild": true, "bookmarksFolderId": -1, "newTabBtns": [] }, "EhYgxll2D2kO": { "type": 2, "id": "EhYgxll2D2kO", "name": "len: 5", "color": "pink", "iconSVG": "cart", "iconIMGSrc": "", "iconIMG": "", "lockedPanel": false, "skipOnSwitching": false, "noEmpty": false, "newTabCtx": "none", "dropTabCtx": "none", "moveTabCtx": "none", "moveTabCtxNoChild": true, "bookmarksFolderId": -1, "newTabBtns": [] }, "9FD1YJB-xXlO": { "type": 2, "id": "9FD1YJB-xXlO", "name": "len: 7", "color": "red", "iconSVG": "icon_play", "iconIMGSrc": "", "iconIMG": "", "lockedPanel": false, "skipOnSwitching": false, "noEmpty": false, "newTabCtx": "none", "dropTabCtx": "none", "moveTabCtx": "none", "moveTabCtxNoChild": true, "bookmarksFolderId": -1, "newTabBtns": [] } }, "nav": [ "search", "xPuvmpjbRJCX", "history", "settings", "sp-LYyyXZlwcRDX", "6rRzXycCv1jO", "G6dug-9qAskO", "EhYgxll2D2kO", "9FD1YJB-xXlO", "sp-0", "collapse", "add_tp", "sd-Vbn25CGwm5DX", "remute_audio_tabs", "create_snapshot" ] }, "containers": [ { "id": "firefox-container-1", "cookieStoreId": "firefox-container-1", "name": "8", "icon": "...", "color": "blue", "colorCode": "#37adff", "proxified": false, "proxy": null, "includeHostsActive": false, "includeHosts": "", "excludeHostsActive": false, "excludeHosts": "", "userAgentActive": false, "userAgent": "" }, { "id": "firefox-container-2", "cookieStoreId": "firefox-container-2", "name": "4", "icon": "...", "color": "orange", "colorCode": "#37adff", "proxified": false, "proxy": null, "includeHostsActive": false, "includeHosts": "", "excludeHostsActive": false, "excludeHosts": "", "userAgentActive": false, "userAgent": "" }, { "id": "firefox-container-3", "cookieStoreId": "firefox-container-3", "name": "7", "icon": "...", "color": "green", "colorCode": "#37adff", "proxified": false, "proxy": null, "includeHostsActive": false, "includeHosts": "", "excludeHostsActive": false, "excludeHosts": "", "userAgentActive": false, "userAgent": "" }, { "id": "firefox-container-4", "cookieStoreId": "firefox-container-4", "name": "8", "icon": "...", "color": "pink", "colorCode": "#37adff", "proxified": false, "proxy": null, "includeHostsActive": false, "includeHosts": "", "excludeHostsActive": false, "excludeHosts": "", "userAgentActive": false, "userAgent": "" } ], "sidebarCSSLen": "883", "windows": [ { "state": "maximized", "incognito": false, "tabsCount": 138 } ], "bookmarks": { "bookmarksCount": 4114, "foldersCount": 281, "separatorsCount": 2, "maxDepth": 8 } } ```Logs
``` No logs as it's just CSS ```Note
Hey, Long-term fan/promoter/worshiper here.
If you can spare a few seconds, would love to try and get the 'Vertical panel labels' snippet working.
I'm on the latest beta 5.0.0b31, the latest Firefox, OS, etc. Tried on a few machines with fresh instals and no other changes but nothing is sticking.
CSS all looks good to me so maybe something in the latest release is not playing nice.
Massive thanks in advance if you can spare a few moments to help out a huge fan of your work.
Warmest regards,
-maws-