Skip to content

Instantly share code, notes, and snippets.

@vexx32

vexx32/sidebery.css

Last active January 6, 2025 18:17
Show Gist options
  • Save vexx32/2a450158bf9682a0b305f6ed9984d35a to your computer and use it in GitHub Desktop.
Save vexx32/2a450158bf9682a0b305f6ed9984d35a to your computer and use it in GitHub Desktop.
Download ZIP
CSS for Sidebery extension in Firefox to work as a collapsible sidebar
Raw
sidebery.css
#root.root {--nav-btn-width: 28px;}
#root.root {--nav-btn-height: 28px;}
#root.root {--tabs-normal-fg: #d4d4d4;}
#root.root {--tabs-pinned-height: var(--tabs-height);}
#root.root {--tabs-close-btn-margin: 5px;}
#root.root {--tabs-activated-color-layer-opacity: 0.4;}
#root.root {--tabs-color-layer-opacity: 0.1;}
#root.root {--general-margin: 3px;}
#root.root {--tabs-height: 30px;}
#root.root {--tabs-indent: 5px;}
#root.root {--tabs-inner-gap: 5px;}
#root.root {--general-border-radius: 10px;}
#root {
/* Dark Theme base settings */
--bg: #1a1b26 !important;
--tabs-bg-hover: #3b3948 !important;
--tabs-activated-bg: #5b5b66 !important;
--nav-btn-activated-bg: #1f222f !important;
--panel-btn: #f2f2f2 !important;
--warn: #8c4351 !important;
}
/* TABS */
.Tab {
margin: auto;
width: 94%;
}
.Tab .close:hover {
/* Styling the tab close button */
background: var(--warn) !important;
}
.Tab .title {
overflow: hidden !important;
}
.Tab .audio {
transition: all 0.1s ease-in-out;
margin-top: 1px;
margin-left: -1px;
}
/* PINNED TABS */
.PinnedTabsBar {
margin-bottom: 2px;
margin-left: 1px;
}
/* SEARCH BAR */
.SearchBar {
margin-bottom: var(--general-margin);
}
/* NAV BAR */
.NavigationBar {
padding: 4px !important;
margin-bottom: 2px;
overflow: hidden;
}
.NavigationBar .panel-btn:hover {
border-radius: 3px !important;
background-color: var(--tabs-bg-hover) !important;
}
.NavigationBar .panel-btn[data-active="true"] {
border-radius: 3px !important;
background-color: var(--bg) !important;
}
.NavigationBar .panel-btn[data-active="true"]:hover {
border-radius: 3px !important;
background-color: var(--tabs-bg-hover) !important;
}
.NavigationBar .panel-btn>svg,
.NavigationBar .panel-btn>img {
fill: var(--panel-btn) !important;
}
/* SIDEBAR HACK PATCHES */
@media (max-width: 50px) {
/* Fix to tab tree identation when minimised */
#root:not(:hover) .Tab {
--tabs-indent: 0;
}
.BookmarkNode .children {
padding: 0;
}
/* Hide placeholder when minimised */
.SearchBar .placeholder {
display: none;
}
/* Hide context menu when minimised */
.CtxMenu {
opacity: 0 !important;
pointer-events: none;
}
.Tab[data-lvl]>div.lvl-wrapper {
right: -2px;
}
.Tab {
max-width: var(--tabs-height);
}
.Tab .fav {
z-index: 1;
}
.Tab .audio {
z-index: 1;
margin-top: 6px;
margin-left: -12px;
height: 26px;
}
.Tab .title {
display: none;
}
.PinnedTabsBar div:has(.Tab[data-active="true"]) {
order: -1;
}
.PinnedTabsBar .Tab {
margin-left: 0 5px;
}
.NavigationBar .settings-btn {
display: none;
}
}
/* OPTIONAL */
/* Disable these two snippets below to make pinned tabs wrap when minimised */
.PinnedTabsBar {
flex-wrap: nowrap !important;
}
.PinnedTab {
overflow: hidden !important;
min-width: var(--tabs-pinned-width) !important;
}
/* Optional patch for better tab notifications on pinned tabs */
.PinnedTab[data-audible] .fav>img,
.PinnedTab[data-muted] .fav>img,
.PinnedTab[data-loading] .fav>img {
mask: none;
}
.PinnedTab .fav>img {
mask: none;
}
.PinnedTab[data-updated="true"] .fav>img {
mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), rgba(0, 0, 0, 0.141), rgba(0, 0, 0, 0.141) 4px, #000 5px, #000);
}
.PinnedTab .audio-badge {
top: 5px;
}
.PinnedTab .update-badge {
opacity: 0;
}
.PinnedTab[data-updated="true"] .update-badge {
opacity: 100;
}
.Tab[data-discarded="true"] .title {
opacity: 80%;
}
Raw
sidebery.json
{
"settings": {
"nativeScrollbars": true,
"nativeScrollbarsThin": true,
"nativeScrollbarsLeft": true,
"selWinScreenshots": false,
"updateSidebarTitle": true,
"markWindow": false,
"markWindowPreface": "[Sidebery] ",
"ctxMenuNative": false,
"ctxMenuRenderInact": true,
"ctxMenuRenderIcons": true,
"ctxMenuIgnoreContainers": "",
"navBarLayout": "horizontal",
"navBarInline": true,
"navBarSide": "left",
"hideAddBtn": false,
"hideSettingsBtn": false,
"navBtnCount": true,
"hideEmptyPanels": true,
"hideDiscardedTabPanels": false,
"navActTabsPanelLeftClickAction": "none",
"navActBookmarksPanelLeftClickAction": "none",
"navTabsPanelMidClickAction": "discard",
"navBookmarksPanelMidClickAction": "convert",
"navSwitchPanelsWheel": true,
"subPanelRecentlyClosedBar": true,
"subPanelBookmarks": true,
"subPanelHistory": true,
"groupLayout": "grid",
"containersSortByName": false,
"skipEmptyPanels": false,
"dndTabAct": false,
"dndTabActDelay": 750,
"dndTabActMod": "none",
"dndExp": "none",
"dndExpDelay": 750,
"dndExpMod": "none",
"dndOutside": "win",
"dndActTabFromLink": true,
"dndActSearchTab": true,
"dndMoveTabs": false,
"dndMoveBookmarks": false,
"searchBarMode": "dynamic",
"searchPanelSwitch": "same_type",
"searchBookmarksShortcut": "",
"searchHistoryShortcut": "",
"warnOnMultiTabClose": "collapsed",
"activateLastTabOnPanelSwitching": true,
"activateLastTabOnPanelSwitchingLoadedOnly": true,
"switchPanelAfterSwitchingTab": "no",
"tabRmBtn": "hover",
"activateAfterClosing": "prev_act",
"activateAfterClosingStayInPanel": true,
"activateAfterClosingGlobal": false,
"activateAfterClosingNoFolded": true,
"activateAfterClosingNoDiscarded": true,
"askNewBookmarkPlace": true,
"tabsRmUndoNote": true,
"tabsUnreadMark": false,
"tabsUpdateMark": "all",
"tabsUpdateMarkFirst": true,
"tabsReloadLimit": 5,
"tabsReloadLimitNotif": true,
"showNewTabBtns": true,
"newTabBarPosition": "after_tabs",
"tabsPanelSwitchActMove": false,
"tabsPanelSwitchActMoveAuto": true,
"tabsUrlInTooltip": "full",
"newTabCtxReopen": false,
"tabWarmupOnHover": true,
"tabSwitchDelay": 0,
"moveNewTabPin": "start",
"moveNewTabParent": "last_child",
"moveNewTabParentActPanel": false,
"moveNewTab": "end",
"moveNewTabActivePin": "start",
"pinnedTabsPosition": "panel",
"pinnedTabsList": false,
"pinnedAutoGroup": false,
"pinnedNoUnload": false,
"pinnedForcedDiscard": false,
"tabsTree": true,
"groupOnOpen": true,
"tabsTreeLimit": "none",
"autoFoldTabs": false,
"autoFoldTabsExcept": "none",
"autoExpandTabs": false,
"autoExpandTabsOnNew": false,
"rmChildTabs": "folded",
"tabsLvlDots": false,
"discardFolded": true,
"discardFoldedDelay": 2,
"discardFoldedDelayUnit": "min",
"tabsTreeBookmarks": true,
"treeRmOutdent": "branch",
"autoGroupOnClose": false,
"autoGroupOnClose0Lvl": false,
"autoGroupOnCloseMouseOnly": false,
"ignoreFoldedParent": false,
"showNewGroupConf": true,
"sortGroupsFirst": true,
"colorizeTabs": true,
"colorizeTabsSrc": "domain",
"colorizeTabsBranches": true,
"colorizeTabsBranchesSrc": "url",
"inheritCustomColor": true,
"previewTabs": false,
"previewTabsMode": "i",
"previewTabsPageModeFallback": "w",
"previewTabsInlineHeight": 70,
"previewTabsPopupWidth": 280,
"previewTabsSide": "right",
"previewTabsDelay": 500,
"previewTabsFollowMouse": true,
"previewTabsWinOffsetY": 36,
"previewTabsWinOffsetX": 6,
"previewTabsInPageOffsetY": 0,
"previewTabsInPageOffsetX": 0,
"previewTabsCropRight": 0,
"hideInact": false,
"hideFoldedTabs": false,
"hideFoldedParent": "none",
"nativeHighlight": false,
"warnOnMultiBookmarkDelete": "collapsed",
"autoCloseBookmarks": false,
"autoRemoveOther": false,
"highlightOpenBookmarks": false,
"activateOpenBookmarkTab": false,
"showBookmarkLen": true,
"bookmarksRmUndoNote": true,
"loadBookmarksOnDemand": true,
"pinOpenedBookmarksFolder": true,
"oldBookmarksAfterSave": "ask",
"loadHistoryOnDemand": true,
"fontSize": "l",
"animations": true,
"animationSpeed": "norm",
"theme": "proton",
"density": "loose",
"colorScheme": "ff",
"sidebarCSS": true,
"groupCSS": false,
"snapNotify": true,
"snapExcludePrivate": false,
"snapInterval": 0,
"snapIntervalUnit": "min",
"snapLimit": 0,
"snapLimitUnit": "snap",
"snapAutoExport": false,
"snapAutoExportType": "json",
"snapAutoExportPath": "Sidebery/snapshot-%Y.%M.%D-%h.%m.%s",
"snapMdFullTree": false,
"hScrollAction": "none",
"onePanelSwitchPerScroll": false,
"wheelAccumulationX": true,
"wheelAccumulationY": true,
"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": "none",
"tabsSecondClickActPrev": false,
"tabsSecondClickActPrevPanelOnly": false,
"shiftSelAct": true,
"activateOnMouseUp": false,
"tabLongLeftClick": "none",
"tabLongRightClick": "none",
"tabMiddleClick": "close",
"tabMiddleClickCtrl": "discard",
"tabMiddleClickShift": "duplicate",
"tabCloseMiddleClick": "close",
"tabsPanelLeftClickAction": "none",
"tabsPanelDoubleClickAction": "tab",
"tabsPanelRightClickAction": "menu",
"tabsPanelMiddleClickAction": "tab",
"newTabMiddleClickAction": "new_child",
"bookmarksLeftClickAction": "open_in_new",
"bookmarksLeftClickActivate": true,
"bookmarksLeftClickPos": "default",
"bookmarksMidClickAction": "open_in_new",
"bookmarksMidClickActivate": false,
"bookmarksMidClickRemove": false,
"bookmarksMidClickPos": "default",
"historyLeftClickAction": "open_in_new",
"historyLeftClickActivate": true,
"historyLeftClickPos": "default",
"historyMidClickAction": "open_in_new",
"historyMidClickActivate": false,
"historyMidClickPos": "default",
"syncName": "FirefoxWin",
"syncSaveSettings": true,
"syncSaveCtxMenu": true,
"syncSaveStyles": true,
"syncSaveKeybindings": true,
"selectActiveTabFirst": true
},
"sidebar": {
"nav": [
"I0pRunKuFvZ9",
"HBHxpE2nsB2d",
"add_tp",
"sp-0",
"settings"
],
"panels": {
"I0pRunKuFvZ9": {
"type": 2,
"id": "I0pRunKuFvZ9",
"name": "Tabs",
"color": "toolbar",
"iconSVG": "icon_tabs",
"iconIMGSrc": "",
"iconIMG": "",
"lockedPanel": false,
"skipOnSwitching": false,
"noEmpty": false,
"newTabCtx": "none",
"dropTabCtx": "none",
"moveRules": [
],
"moveExcludedTo": -1,
"bookmarksFolderId": -1,
"newTabBtns": [
],
"srcPanelConfig": null
},
"HBHxpE2nsB2d": {
"type": 2,
"id": "HBHxpE2nsB2d",
"name": "Picrews",
"color": "yellow",
"iconSVG": "icon_man",
"iconIMGSrc": "",
"iconIMG": "",
"lockedPanel": false,
"skipOnSwitching": false,
"noEmpty": false,
"newTabCtx": "none",
"dropTabCtx": "none",
"moveRules": [
],
"moveExcludedTo": -1,
"bookmarksFolderId": -1,
"newTabBtns": [
],
"srcPanelConfig": null
},
"l1OT32PG8O5d": {
"type": 1,
"id": "l1OT32PG8O5d",
"name": "Bookmarks",
"iconSVG": "icon_bookmarks",
"iconIMGSrc": "",
"iconIMG": "",
"color": "toolbar",
"lockedPanel": false,
"tempMode": false,
"skipOnSwitching": false,
"rootId": "root________",
"viewMode": "tree",
"autoConvert": false,
"srcPanelConfig": null
},
"history": {
"type": 4,
"id": "history",
"name": "History",
"color": "toolbar",
"iconSVG": "icon_clock",
"tempMode": false,
"lockedPanel": false,
"skipOnSwitching": false,
"viewMode": "history"
}
}
},
"sidebarCSS": "#root.root {--nav-btn-width: 28px;}\n#root.root {--nav-btn-height: 28px;}\n#root.root {--tabs-normal-fg: #d4d4d4;}\n#root.root {--tabs-pinned-height: var(--tabs-height);}\n#root.root {--tabs-close-btn-margin: 5px;}\n#root.root {--tabs-activated-color-layer-opacity: 0.4;}\n#root.root {--tabs-color-layer-opacity: 0.1;}\n#root.root {--general-margin: 3px;}\n#root.root {--tabs-height: 30px;}\n#root.root {--tabs-indent: 5px;}\n#root.root {--tabs-inner-gap: 5px;}\n#root.root {--general-border-radius: 10px;}\n\n#root {\n /* Dark Theme base settings */\n --bg: #1a1b26 !important;\n --tabs-bg-hover: #3b3948 !important;\n --tabs-activated-bg: #5b5b66 !important;\n --nav-btn-activated-bg: #1f222f !important;\n --panel-btn: #f2f2f2 !important;\n --warn: #8c4351 !important;\n}\n\n/* TABS */\n\n.Tab {\n margin: auto;\n width: 94%;\n}\n\n.Tab .close:hover {\n /* Styling the tab close button */\n background: var(--warn) !important;\n}\n\n.Tab .title {\n overflow: hidden !important;\n}\n\n.Tab .audio {\n transition: all 0.1s ease-in-out;\n margin-top: 1px;\n margin-left: -1px;\n}\n\n\n/* PINNED TABS */\n\n.PinnedTabsBar {\n\t\tmargin-bottom: 2px;\n\t\tmargin-left: 1px;\n}\n\n/* SEARCH BAR */\n.SearchBar {\n\t\tmargin-bottom: var(--general-margin);\n}\n\n/* NAV BAR */\n\n.NavigationBar {\n padding: 4px !important;\n margin-bottom: 2px;\n overflow: hidden;\n}\n\n.NavigationBar .panel-btn:hover {\n border-radius: 3px !important;\n background-color: var(--tabs-bg-hover) !important;\n}\n\n.NavigationBar .panel-btn[data-active=\"true\"] {\n border-radius: 3px !important;\n background-color: var(--bg) !important;\n}\n\n.NavigationBar .panel-btn[data-active=\"true\"]:hover {\n border-radius: 3px !important;\n background-color: var(--tabs-bg-hover) !important;\n}\n\n.NavigationBar .panel-btn>svg,\n.NavigationBar .panel-btn>img {\n fill: var(--panel-btn) !important;\n}\n\n/* SIDEBAR HACK PATCHES */\n\n@media (max-width: 50px) {\n /* Fix to tab tree identation when minimised */\n #root:not(:hover) .Tab {\n --tabs-indent: 0;\n }\n\n\t\t.BookmarkNode .children {\n \t\t\tpadding: 0;\n\t\t}\n\n\t\t/* Hide placeholder when minimised */\n\t\t.SearchBar .placeholder {\n\t\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Hide context menu when minimised */\n\n\t\t.CtxMenu {\n\t\t\t\topacity: 0 !important;\n\t\t\t\tpointer-events: none;\n\t\t}\n\n .Tab[data-lvl]>div.lvl-wrapper {\n right: -2px;\n }\n\n .Tab {\n max-width: var(--tabs-height);\n }\n\n .Tab .fav {\n z-index: 1;\n }\n\n .Tab .audio {\n z-index: 1;\n margin-top: 6px;\n margin-left: -12px;\n height: 26px;\n }\n\n .Tab .title {\n display: none;\n }\n\n\n\t\t.PinnedTabsBar div:has(.Tab[data-active=\"true\"]) {\n \t\torder: -1;\n\t\t}\n\n .PinnedTabsBar .Tab {\n margin-left: 0 5px;\n }\n\n .NavigationBar .settings-btn {\n display: none;\n }\n}\n\n\n/* OPTIONAL */\n\n\n/* Disable these two snippets below to make pinned tabs wrap when minimised */\n\n.PinnedTabsBar {\n flex-wrap: nowrap !important;\n}\n\n.PinnedTab {\n overflow: hidden !important;\n min-width: var(--tabs-pinned-width) !important;\n}\n\n\n/* Optional patch for better tab notifications on pinned tabs */\n\n.PinnedTab[data-audible] .fav>img,\n.PinnedTab[data-muted] .fav>img,\n.PinnedTab[data-loading] .fav>img {\n mask: none;\n}\n\n.PinnedTab .fav>img {\n mask: none;\n}\n\n.PinnedTab[data-updated=\"true\"] .fav>img {\n mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), rgba(0, 0, 0, 0.141), rgba(0, 0, 0, 0.141) 4px, #000 5px, #000);\n}\n\n.PinnedTab .audio-badge {\n top: 5px;\n}\n\n.PinnedTab .update-badge {\n opacity: 0;\n}\n\n.PinnedTab[data-updated=\"true\"] .update-badge {\n opacity: 100;\n}\n\n.Tab[data-discarded=\"true\"] .title {\n opacity: 80%;\n}",
"ver": "5.2.0"
}
Raw
userchrome.css
@media (prefers-color-scheme:dark) {
:root {
--bg: #1a1b26;
--urlbar-bg: #0d0d15;
--urlbar-border-top: #000;
--urldrop-bg: #0d0d15;
--urlbar-border-bottom: #404040;
--urlbar-height: 30px;
--urlbar-outline: #414868;
--fullscreen-warn: rgb(25, 25, 25);
--arrowpanel-background: var(--urlbar-bg) !important;
--button-hover-bgcolor: rgba(159, 159, 159, 0.35) !important;
--button-active-bgcolor: rgba(255, 255, 255, .2) !important;
--button-bgcolor: rgba(117, 117, 117, 0.9) !important;
--toolbarbutton-icon-fill-opacity: 0.8 !important;
--arrowpanel-border-color: rgb(55, 55, 55) !important;
--identity-btn-hover-color: rgba(117, 117, 117) !important;
--dark-menu-background-color: rgba(34, 34, 36, .5) !important;
--dark-menu-border-color: rgb(55, 55, 55) !important;
--dark-menuitem-hover-background-color: rgba(159, 159, 159, 0.35) !important;
}
}
@media (prefers-color-scheme:light) {
:root {
--bg: #f1f5f9;
--urlbar-bg: #cbd5e1;
--urlbar-border-top: #9ca3af;
--urlbar-border-bottom: #fff;
--urldrop-bg: #cbd5e1;
--urlbar-outline: #94a3b8;
--fullscreen-warn: rgb(25, 25, 25);
--arrowpanel-background: #e2e8f0 !important;
--button-hover-bgcolor: #9699a3 !important;
--button-hover-bgcolor: #cbd5e1 !important;
--button-active-bgcolor: #cbd5e1 !important;
--identity-btn-hover-color: white !important;
}
}
/* Suppress Connecting/Waiting/Reading/Transerring */
/* #statuspanel[type="status"] {
display: none !important;
} */
/* Suppress Link Destination Overlay */
/* #statuspanel[type="overLink"] {
display: none !important;
} */
/* URL BAR */
#urlbar {
border-radius: 30px !important;
border: 0 !important;
}
#urlbar:not(.megabar):not([focused="true"]):hover {
outline: 1px solid var(--urlbar-outline) !important;
}
#urlbar[focused="true"] {
border: 0 !important;
border-top: 1px solid var(--urlbar-border-top) !important;
border-bottom: 1px solid var(--urlbar-border-bottom) !important;
border-radius: 30px !important;
}
#urlbar[breakout][breakout-extend] {
border: none !important;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
top: calc( (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar-container {
margin-top: 3px;
display: initial;
}
#urlbar-background {
box-shadow: none !important;
border-radius: 30px !important;
background: var(--urlbar-bg) !important;
}
#urlbar[focused="true"] #urlbar-background {
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.35) !important;
outline: none !important;
}
#wrapper-urlbar-container #urlbar {
height: var(--urlbar-height) !important;
}
/* Active Address/Search Field Dropdown */
#urlbar[breakout][breakout-extend]>#urlbar-background {
outline: none !important;
box-shadow: none !important;
background: var(--urldrop-bg) !important;
border-radius: 15px !important;
}
#urlbar[breakout][breakout-extend]>#urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0px !important;
padding-inline: 0px !important;
transition: none !important;
}
/* Idendity icon button */
#identity-icon-box.identity-box-button {
margin: 3px 0 3px 3px;
border-radius: 14px !important;
background-color: var(--bg) !important;
opacity: 0.8
}
#identity-icon-box.identity-box-button:hover {
cursor: pointer;
background-color: var(--identity-btn-hover-color) !important;
}
/* Track protection icon */
#tracking-protection-icon-container {
border-radius: 16px !important;
}
#tracking-protection-icon-container:hover {
cursor: pointer !important;
}
/* Star button */
#star-button-box {
border-radius: 16px !important;
}
#star-button-box {
cursor: pointer !important;
}
/* | Borders | */
.tabbrowser-tab::after {
border: 0 !important;
}
.titlebar-spacer[type="pre-tabs"] {
border: 0 !important;
}
#navigator-toolbox {
border: 1 !important;
}
.titlebar-spacer[type="pre-tabs"] {
border: 0 !important;
}
.tabbrowser-tab::after {
border: 0 !important;
}
#urlbar-background {
border: 0 !important;
}
#urlbar[open]>.urlbarView>.urlbarView-body-outer>.urlbarView-body-inner {
border-top: 0 !important;
}
/* Active Tab */
:root:not([lwt-default-theme-in-dark-mode]) .tab-background[selected],
.tab-background[multiselected="true"] {
background: rgba(0, 0, 0, .05) !important;
}
:root[lwt-default-theme-in-dark-mode] .tab-background[selected],
.tab-background[multiselected="true"] {
background: rgba(0, 0, 0, .2) !important;
}
/* Navigation Bar */
#nav-bar {
background-color: var(--bg) !important;
}
/* Bookmarks Bar */
#PersonalToolbar {
background-color: var(--bg) !important;
}
/* Navigation Bar Separator */
#navigator-toolbox {
border-color: var(--bg) !important;
}
/* Navigation bar Buttons */
toolbarbutton:hover {
cursor: pointer;
}
/* Show Tab close button on hover */
.tabbrowser-tab:not([pinned]) .tab-close-button {
display: -moz-box !important;
opacity: 0;
visibility: collapse !important;
transition: opacity 0.25s, visibility 0.25s ease-in !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
opacity: 1;
visibility: visible !important;
border-radius: 3px 3px 3px 3px !important;
}
/* Show URL buttons on Hover */
#nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#page-action-buttons {
opacity: 0;
}
#page-action-buttons {
transition: opacity 0.15s ease;
}
#nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#tracking-protection-icon-container {
opacity: 0;
}
#tracking-protection-icon-container {
transition: opacity 0.15s ease;
}
/*Full Screen Warning*/
#fullscreen-warning {
background-color: var(--fullscreen-warn) !important;
border-color: var(--fullscreen-warn) !important;
max-width: 500px !important;
max-height: 50px !important;
border-radius: 50px !important;
font-size: 12px !important;
opacity: 0.8 !important;
}
.pointerlockfswarning-generic-text,
.pointerlockfswarning-domain-text {
font-size: 15px !important;
color: rgb(255, 255, 255) !important;
text-shadow: none !important;
}
/* Uncomment to Hide tabs bar for Tree style tabs (Credit u/jfgxyz on Reddit) */
toolbar#TabsToolbar {
height: 0px;
min-height: 0 !important;
background-color: var(--bg) !important;
}
.toolbar-items {
visibility: collapse;
}
/* ----- Move menu buttons ----- */
/* :root {
--toolbar-start-end-padding: 2px !important;
} */
#nav-bar #PanelUI-button {
-moz-box-ordinal-group: 0 !important;
}
#nav-bar #PanelUI-button #PanelUI-menu-button {
margin-right: 2px !important;
margin-left: 2px !important;
}
/* toolbar:not([customizing]) > #nav-bar-overflow-button {
-moz-box-ordinal-group: 1 !important;
}
toolbar:not([customizing]) > #nav-bar-customization-target {
-moz-box-ordinal-group: 2 !important;
} */
/* ----- Close/min/max fix ----- */
/* Fix popup position */
#appMenu-popup {
margin-inline: -244px !important;
}
#nav-bar {
padding-left: 0px !important;
padding-right: 118px !important;
position: static !important;
}
#navigator-toolbox:not([inFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
visibility: visible !important;
display: block !important;
position: absolute !important;
top: 1px !important;
left: unset !important;
right: 0 !important;
}
#TabsToolbar .titlebar-min {
-moz-box-ordinal-group: 0 !important;
}
#TabsToolbar .titlebar-max,
.titlebar-restore {
-moz-box-ordinal-group: 1 !important;
}
#TabsToolbar .titlebar-close {
-moz-box-ordinal-group: 2 !important;
}
#navigator-toolbox[inFullscreen] #navigator-toolbox #TabsToolbar .titlebar-buttonbox-container {
-moz-box-ordinal-group: 1 !important;
}
#navigator-toolbox #TabsToolbar .titlebar-buttonbox-container {
-moz-box-ordinal-group: 1 !important;
}
@media only screen and (max-width: 670px) {
#main-window #navigator-toolbox:not([inFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
visibility: visible !important;
position: relative !important;
display: block !important;
}
#main-window #navigator-toolbox:not([inFullscreen]) #nav-bar {
padding-right: initial !important;
}
#TabsToolbar.browser-toolbar {
display: flex !important;
justify-content: flex-end !important;
}
}
#toolbar-menubar {
/* menubar bg color */
background-color: var(--bg) !important;
}
/* Line up the Windows controls with the rest of the icons in the toolbar. */
:root:not([sizemode="maximized"]) .titlebar-buttonbox-container {
padding-top: 3px;
}
.titlebar-buttonbox {
z-index: 3 !important;
padding-right: 3px;
}
.titlebar-buttonbox * {
border-radius: 4px;
width: 35px;
height: 38px;
}
/* SIDEBERY */
/* hides the sidebar header */
#sidebar-header {
display: none !important;
}
.tab[selected="true"] {
visibility: collapse;
height: 0px;
}
.tabbrowser-tab {
visibility: collapse;
height: 0px;
}
.tabbrowser-tab[visuallyselected="true"] {
visibility: collapse;
height: 0px;
}
/* AUTO HIDE SIDE BAR */
#sidebar-box {
--uc-sidebar-min-width: 36px;
--uc-sidebar-hover-width: 260px;
--uc-autohide-sidebar-delay: 500ms;
/* Waiting time before hiding sidebar */
position: relative;
min-width: var(--uc-sidebar-min-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-min-width) !important;
z-index: 100 !important;
}
#sidebar-box[positionend] {
direction: rtl;
}
#sidebar-box[positionend]>* {
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) {
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl)>* {
direction: rtl;
}
/* HIDE SIDE BAR IN FULL SCREEN */
/*
#main-window[inFullscreen="true"] #sidebar-box {
--uc-sidebar-width: 0px;
}*/
#sidebar-splitter {
display: none;
}
#sidebar-header {
position: absolute;
transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
min-width: var(--uc-sidebar-min-width) !important;
will-change: min-width;
overflow: hidden;
color: var(--bg) !important;
}
#sidebar {
position: absolute;
transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
min-width: var(--uc-sidebar-min-width) !important;
will-change: min-width;
}
#sidebar-box:hover>#sidebar,
#sidebar-box:hover>#sidebar-header {
min-width: var(--uc-sidebar-hover-width) !important;
transition-delay: 0ms !important;
}
.sidebar-panel {
background-color: transparent !important;
color: var(--newtab-text-primary-color) !important;
}
.sidebar-panel #search-box {
-moz-appearance: none !important;
background-color: rgba(249, 249, 250, 0.1) !important;
color: inherit !important;
}
/* Add sidebar divider and give it background */
#sidebar,
#sidebar-header {
background-color: inherit !important;
/* border-inline: 1px solid rgb(80, 80, 80); */
border-inline-width: 0px 1px;
}
#sidebar-box:not([positionend])> :-moz-locale-dir(rtl),
#sidebar-box[positionend]>* {
border-inline-width: 1px 0px;
}
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
#sidebar-box:not([positionend]):hover~#appcontent #statuspanel {
inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover~#appcontent #statuspanel-label {
margin-inline: 0px !important;
border-left-style: solid !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment