From d1fc8d1b869a976a110cb91b845438135d0c3d16 Mon Sep 17 00:00:00 2001 From: Lillian-Violet Date: Thu, 29 Aug 2024 11:46:26 +0200 Subject: [PATCH] Fix sidebar in firefox --- .../desktop/package-configs/firefox.nix | 398 +++++++++--------- 1 file changed, 199 insertions(+), 199 deletions(-) diff --git a/home-manager/desktop/package-configs/firefox.nix b/home-manager/desktop/package-configs/firefox.nix index 8145022..0da278d 100644 --- a/home-manager/desktop/package-configs/firefox.nix +++ b/home-manager/desktop/package-configs/firefox.nix @@ -29,342 +29,342 @@ "browser.newtabpage.activity-stream.improvesearch.topSiteSearchShortcuts.searchEngines" = "DuckDuckGo"; }; userChrome = '' - /* - Title: Drannex42's FirefoxSidebar / Vertical Tabs - Description: Vertical tab design for Firefox with dynamic indentation:: - Sideberry and TreeStyleTabs (Legacy) themes available! - Repository URL: https://github.com/drannex42/FirefoxSidebar - Version: 12022.04.17 - */ - /* - Preferences / Settings :: - Use this file to set your preferences this will save them in one place for easier future updating - ========================================================================= - */ - - /* - Preferences / Settings - Use this file to set your preferences this will save them in one place for easier future updating - ========================================================================= + Title: Drannex42's FirefoxSidebar / Vertical Tabs + Description: Vertical tab design for Firefox with dynamic indentation:: + Sideberry and TreeStyleTabs (Legacy) themes available! + Repository URL: https://github.com/drannex42/FirefoxSidebar + Version: 12022.04.17 */ :root { - --sidebar-width: 50px; - --toolbar-height: -12px; - --menubar-height: -42px; - --sidebar-padding: calc(var(--sidebar-width) + 5px); - --toolbar-start-end-padding: 5px !important; + --sidebar-width: 50px; + --toolbar-height: 10px; + --menubar-height: 100px; + --sidebar-padding: calc(var(--sidebar-width) + 5px); + --toolbar-start-end-padding: 5px !important; - /* Custom Sidebar/Header Backround :: + /* Custom Sidebar/Header Backround :: This sets the background for the other sidebar options (bookmarks, history, in case it is transparent from a theme that is not set up properly - */ + */ /* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */ - --custom-sidebar-header-bg: #000; /* Default: Field (Disabled) */ + /* --custom-sidebar-header-bg: #000; */ - /* ====== Extension Settings ====== */ + /* ====== Extension Settings ====== */ - /* Window Control / Client Side Display Settings === + /* Window Control / Client Side Display Settings === If you are putting this on the left or right side uncomment the side preferences below and comment the other ========================================================================= - */ + */ --csd-width: 100px; --csd-top: 8px; /* - CSD - Left Side === - Default: --csd-left: 50px; --csd-margin-left: 92px; + CSD - Left Side === + Default: --csd-left: 50px; --csd-margin-left: 92px; */ - /* - --csd-left: 50px; - --csd-margin-left: 92px; - */ - /* - CSD - Right Side === - Defaults: --csd-right: 0px; --csd-margin-right: 95px; + --csd-left: 50px; + --csd-margin-left: 92px; */ - --csd-right: 36px; - --csd-margin-right: 130px; + /* + CSD - Right Side === + Defaults: --csd-right: 0px; --csd-margin-right: 95px; + */ - /* === END: Window Control / Client Side Display Settings === */ + --csd-right: 36px; + --csd-margin-right: 130px; - /* === END: Extension Settings === */ + /* === END: Window Control / Client Side Display Settings === */ + + /* === END: Extension Settings === */ } /* ========================================================================= */ - /* Sidebar (Core) :: This file is for the sidebar implementation */ /* - Extension (Core): Sidebar - Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar. - Repository URL: https://github.com/drannex42/FirefoxSidebar - Version: v12022.11.22 (YYYYY.MM.DD) + Extension (Core): Sidebar + Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar. + Repository URL: https://github.com/drannex42/FirefoxSidebar + Version: v12024.05.15 (YYYYY.MM.DD) */ #main-window #TabsToolbar { - visibility: collapse; + visibility: collapse; } + /* As of v12024.05.15 we updated to using this one by MrOtherGuy, with modifications */ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 */ + /* Show sidebar only when the cursor is over it */ + /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ - #sidebar-box > #browser, - #webextpanels-window { - background: transparent !important; - - } - - #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] - #sidebar-header { - /*! display: none; */ - } - - /*Collapse in default state and add transition*/ #sidebar-box { - /*! overflow: visible !important; */ - border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */ - z-index: 2; - border-right: none !important; - width: 100% !important; - background: var(--custom-sidebar-bg, --sidebar-background); - - /* lock sidebar to height by doing the inverse margin of the toolbar element */ - z-index: 1000 !important; - position: relative !important; - margin-top: var(--menubar-height) !important; - border-right: none; - transition: none !important; - - /* lock sidebar to specified width */ - min-width: var(--sidebar-width) !important; - max-width: var(--sidebar-width) !important; - overflow: hidden !important; - transition-property: width; - transition-duration: 0.25s; - transition-delay: 0.25s; - transition-timing-function: ease-in; + --uc-sidebar-width: 50px; + --uc-sidebar-hover-width: 260px; + --uc-autohide-sidebar-delay: 10ms; + /* Wait 0.6s before hiding sidebar */ + --uc-autohide-transition-duration: 115ms; + --uc-autohide-transition-type: linear; + position: relative; + min-width: var(--uc-sidebar-width) !important; + width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + z-index: 1; + margin-top: -40px; } - #sidebar-box::after { - background: var(--sidebar-border-color) !important; - margin-left: 207px; - z-index: 9999999; - position: absolute; - content: " "; - width: 1px; - height: 100%; - top: 0; - right: 0px; + + #sidebar-box[positionend] { + direction: rtl } - #sidebar-box:hover:after { - top: 42px; + #sidebar-box[positionend]>* { + direction: ltr } - /*All other sidebar-boxes should be larger on hover*/ - #sidebar-box:hover, #sidebar-box #sidebar:hover { - min-width: 350px !important; - max-width: 350px !important; - z-index: 999; - margin-right: -300px !important; + #sidebar-box[positionend]:-moz-locale-dir(rtl) { + direction: ltr } - /*Tree Style Tabs && Sideberry specific sidebar width and size*/ + #sidebar-box[positionend]:-moz-locale-dir(rtl)>* { + direction: rtl + } - #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, - #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover, - #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar:hover { - min-width: 260px !important; - max-width: 260px !important; - margin-right: -210px !important; + #main-window[sizemode="fullscreen"] #sidebar-box { + --uc-sidebar-width: 1px; + } + + #sidebar-splitter { + display: none } #sidebar-header { - border: none !important; - border-right: 1px solid var(--sidebar-border-color); - background: var(--custom-sidebar-header-bg, transparent) !important; + overflow: hidden; + color: var(--chrome-color, inherit) !important; + padding-inline: 0 !important; + background: var(--custom-sidebar-header-bg, inherit) !important; + padding: 8px 12px !important; + padding-top: 9px !important; + border-bottom: none !Important; } - #sidebar-close, - #sidebar-title, - #sidebar-switcher-arrow { - display: none; - border: none; + #sidebar-header::before, + #sidebar-header::after { + content: ""; + display: flex; + padding-left: 0px; } - #sidebar-switcher-target { - border: none !important; - margin-left: 4.5px !important; - padding-top: 4px !important; - padding-bottom: 6px !important; + #sidebar-header, + #sidebar { + transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important; + min-width: var(--uc-sidebar-width) !important; + will-change: min-width; } - #sidebar-switcher-target:focus-visible:not(:hover, [open]), - #sidebar-close:focus-visible:not(:hover, [open]) { - outline: none !important; + #sidebar-box:hover>#sidebar-header, + #sidebar-box:hover>#sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + width: var(--uc-sidebar-hover-width) !important; + transition-delay: 0ms !important; + } + + #sidebar-box>#sidebar-header #sidebar-title { + opacity: 0; + } + + #sidebar-box:hover>#sidebar-header #sidebar-title { + opacity: 1; + } + + .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-right: 1px solid var(--sidebar-border-color); + 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-splitter { - opacity: 0 !important; - width: 0px !important; - border: none !important; - --avatar-image-url: none !important; + #sidebar-box:not([positionend]):hover~#appcontent #statuspanel { + inset-inline: auto 0px !important; } - #sidebarMenu-popup .subviewbutton { - min-width: 0px; - padding: 0; - margin: 0 !important; + #sidebar-box:not([positionend]):hover~#appcontent #statuspanel-label { + margin-inline: 0px !important; + border-left-style: solid !important; } - toolbarseparator { - display: none; - } - - #nav-bar-customization-target { - z-index: 99999; - position: relative; - } .browser-toolbar { - padding-left: var(--sidebar-width) !important; - position: relative !important; + padding-left: var(--sidebar-width) !important; + position: relative !important; } #PersonalToolbar { - padding: 2px 5px !important; - padding-top: 0px !important; - margin-top: 0px !important; - padding-left: calc(var(--sidebar-width) + 6px) !important; + padding: 2px 5px !important; + padding-top: 0px !important; + margin-top: 0px !important; + padding-left: calc(var(--sidebar-width) + 6px) !important; } /* - Extensions :: - To enable/disable specific extensions just comment/uncomment the line below. - ========================================================================= + Extensions :: + To enable/disable specific extensions just comment/uncomment the line below. + ========================================================================= */ - /* CSD / Window Controls */ /* - Extension: Window Controls / Client Side Decorations (CSD) - Description: This brings the window controls into the main bar (where the address bar exists). Please see the prefs.css folder for switching the sides from left to right. - Repository URL: https://github.com/drannex42/FirefoxSidebar - Contributors: Mr-nUUb, Xanaxus, Drannex42 - Issue URL: https://github.com/drannex42/FirefoxSidebar/issues/14 + Extension: Window Controls / Client Side Decorations (CSD) + Description: This brings the window controls into the main bar (where the address bar exists). Please see the prefs.css folder for switching the sides from left to right. + Repository URL: https://github.com/drannex42/FirefoxSidebar + Contributors: Mr-nUUb, Xanaxus, Drannex42 + Issue URL: https://github.com/drannex42/FirefoxSidebar/issues/14 */ /* allow the buttons to appear */ .browser-toolbar { - position: unset !important; + position: unset !important; } /* reserve space for buttons */ #nav-bar { - padding-right: var(--csd-margin-right) !important; - margin-left: var(--csd-margin-left) !important; + padding-right: var(--csd-margin-right) !important; + margin-left: var(--csd-margin-left) !important; } /* move buttons next to menu button */ .titlebar-buttonbox-container { - visibility: visible !important; - position: fixed !important; - display: block; - z-index: 999999999; - top: var(--csd-top, inherit); - right: var(--csd-right, inherit); - left: var(--csd-left, inherit); - max-width: var(--csd-width); + visibility: visible !important; + position: fixed !important; + display: block; + z-index: 999999999; + top: var(--csd-top, inherit); + right: var(--csd-right, inherit); + left: var(--csd-left, inherit); + max-width: var(--csd-width); } /* hide buttons in fullscreen mode (video player and F11) */ #main-window[inFullscreen="true"] .titlebar-buttonbox-container, #main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container { - visibility: hidden !important; + visibility: hidden !important; } /* remove empty space when in fullscreen mode (F11) */ #main-window[inFullscreen="true"] #nav-bar { - padding-right: 0px !important; - margin-left: 0px !important; + padding-right: 0px !important; + margin-left: 0px !important; } + /* END Client Side Decorations / Window Controls */ + /* + Extension: Superbox Removal (and compaction) + Description: This removes the superbox and fixes some padding around the urlbar. + Repository URL: https://github.com/drannex42/FirefoxSidebar + */ + /* --- Prevent enlargement */ #urlbar[breakout-extend] { - top: calc( - (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 - ) !important; - left: 0 !important; - width: 100% !important; + /* top: calc( */ + /* (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 */ + /* ) !important; */ + /* Fix due to deprecation https://www.reddit.com/r/firefox/comments/1cs3g49/address_bar_suggestions_going_up_instead_of_down/ */ + top: calc((var(--urlbar-container-height, --urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; } #urlbar[breakout-extend] #urlbar-input-container { - height: var(--urlbar-height) !important; - /* padding: 0px !important; */ - padding-block: 0px !important; - padding-inline: 0px !important; + height: var(--urlbar-height) !important; + /* padding: 0px !important; */ + padding-block: 0px !important; + padding-inline: 0px !important; } + .urlbarView-row { - padding: 0px 2px 0px 2px; + padding: 0px 2px 0px 2px; } + /* END Prevent enlargement --- */ /*/* --- Reduce row paddings to make them more compact */ .urlbarView-row { - padding: 2px 0px !important; - line-height: 1.2em !important; - margin: -1px; - margin-bottom: 0px; + padding: 2px 0px !important; + line-height: 1.2em !important; + margin: -1px; + margin-bottom: 0px; } + .urlbarView-row-inner { - padding-bottom: 6px !important; + padding-bottom: 6px !important; } + .urlbarView { - margin: 0px !important; - width: 100% !important; + margin: 0px !important; + width: 100% !important; } + /* END Reduce row paddings to make them more compact --- */ /* Disable Urlbar Animation */ - #urlbar[breakout][breakout-extend][breakout-extend-animate] - > #urlbar-background { - animation-name: none !important; - animation: none !important; + #urlbar[breakout][breakout-extend][breakout-extend-animate]>#urlbar-background { + animation-name: none !important; + animation: none !important; } + /* END Disable Urlbar Animation */ /* --- More compact "Search with Google" rows */ - .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { - min-height: auto !important; - width: auto !important; + .urlbarView-row[dynamicType="onboardTabToSearch"]>.urlbarView-row-inner { + min-height: auto !important; + width: auto !important; } - .urlbarView-row[dynamicType="onboardTabToSearch"] - > .urlbarView-row-inner - > .urlbarView-no-wrap - > .urlbarView-favicon { - margin-bottom: -1px; + + .urlbarView-row[dynamicType="onboardTabToSearch"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon { + margin-bottom: -1px; } + /* END More compact "Search with Google" rows --- */ /* Remove active border on the addressbar when in focus */ #nav-bar { - --toolbar-field-focus-border-color: #ccc; + --toolbar-field-focus-border-color: #ccc; } /* Remove box shadow on address bar */ #urlbar-background, #searchbar { - box-shadow: none !important; + box-shadow: none !important; } ''; bookmarks = [