From 8f89f73b20169eda5a1c22ea23ddeaf04750b221 Mon Sep 17 00:00:00 2001 From: Swarsel Date: Sun, 8 Dec 2024 12:27:11 +0100 Subject: [PATCH] fix: update firefox userChrome.css for new version --- programs/firefox/chrome/userChrome.css | 189 ++++++++++++++++++++----- 1 file changed, 154 insertions(+), 35 deletions(-) diff --git a/programs/firefox/chrome/userChrome.css b/programs/firefox/chrome/userChrome.css index 74e851d..f657cdd 100644 --- a/programs/firefox/chrome/userChrome.css +++ b/programs/firefox/chrome/userChrome.css @@ -1,73 +1,97 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar */ -/* Dimensions on non-Win10 OS probably needs to be adjusted */ - -/* Compatibility options for hide_tabs_toolbar.css and tabs_on_bottom.css at the end of this file */ +/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar + * Dimensions on non-Win10 OS probably needs to be adjusted. + */ :root{ - --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars */ - --uc-toolbox-rotation: 82deg; /* This may need to be lower on mac - like 75 or so */ + --uc-autohide-toolbox-delay: 0ms; /* Wait 0.1s before hiding toolbars */ + --uc-toolbox-rotation: 107deg; /* This may need to be lower on mac - like 75 or so */ } :root[sizemode="maximized"]{ - --uc-toolbox-rotation: 88.5deg; + --uc-toolbox-rotation: 88.5deg; } @media (-moz-platform: windows){ - :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; } + :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; } } :root[sizemode="fullscreen"], :root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important; } #navigator-toolbox{ - position: fixed !important; - display: block; - background-color: var(--lwt-accent-color,black) !important; - transition: transform 82ms linear, opacity 82ms linear !important; - transition-delay: var(--uc-autohide-toolbox-delay) !important; - transform-origin: top; - transform: rotateX(var(--uc-toolbox-rotation)); - opacity: 0; - line-height: 0; - z-index: 1; - pointer-events: none; + --browser-area-z-index-toolbox: 3; + position: fixed !important; + background-color: var(--lwt-accent-color,black) !important; + transition: transform 0ms linear, opacity 0ms linear !important; + transition-delay: var(--uc-autohide-toolbox-delay) !important; + transform-origin: top; + transform: rotateX(var(--uc-toolbox-rotation)); + opacity: 0; + line-height: 0; + z-index: 1; + pointer-events: none; } - +:root[sessionrestored] #urlbar[popover]{ + pointer-events: none; + opacity: 0; + transition: transform 0ms linear var(--uc-autohide-toolbox-delay), opacity 0ms calc(var(--uc-autohide-toolbox-delay) + 0ms); + transform-origin: 0px calc(0px - var(--tab-min-height) - var(--tab-block-margin) * 2); + transform: rotateX(89.9deg); +} +#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox #urlbar[popover], +#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover], +#urlbar-container > #urlbar[popover]:is([focused],[open]){ + pointer-events: auto; + opacity: 1; + transition-delay: 0ms; + transform: rotateX(0deg); +} +#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox, +#navigator-toolbox:has(#urlbar:is([open],[focus-within])), #navigator-toolbox:hover, #navigator-toolbox:focus-within{ - transition-delay: 33ms !important; - transform: rotateX(0); - opacity: 1; + transition-delay: 0ms !important; + transform: rotateX(0); + opacity: 1; } -/* This ruleset is separate, because not having :has support breaks other selectors as well */ -#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox{ - transition-delay: 33ms !important; - transform: rotateX(0); - opacity: 1; +/* This makes things like OS menubar/taskbar show the toolbox when hovered in maximized windows. + * Unfortunately it also means that other OS native surfaces (such as context menu on macos) + * and other always-on-top applications will trigger toolbox to show up. */ +@media (-moz-bool-pref: "userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){ + :root[sizemode="maximized"]:not(:hover){ + #navigator-toolbox:not(:-moz-window-inactive), + #urlbar[popover]:not(:-moz-window-inactive){ + transition-delay: 0ms !important; + transform: rotateX(0); + opacity: 1; + } + } } #navigator-toolbox > *{ line-height: normal; pointer-events: auto } #navigator-toolbox, #navigator-toolbox > *{ - width: 100vw; - -moz-appearance: none !important; + width: 100vw; + -moz-appearance: none !important; } /* These two exist for oneliner compatibility */ #nav-bar{ width: var(--uc-navigationbar-width,100vw) } -#TabsToolbar{ width: calc(100vw - var(--uc-navigationbar-width,0px)) } - +#TabsToolbar +{ + visibility: collapse; +} /* Don't apply transform before window has been fully created */ :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important } :root[customizing] #navigator-toolbox{ - position: relative !important; - transform: none !important; - opacity: 1 !important; + position: relative !important; + transform: none !important; + opacity: 1 !important; } #navigator-toolbox[inFullscreen] > #PersonalToolbar, @@ -81,3 +105,98 @@ See the above repository for updates as well as full license text. */ #navigator-toolbox{ flex-direction: column; display: flex; } #titlebar{ order: 2 } */ +#sidebar-header { + display: none; +} +#sidebar-header { + /* display: none; */ + visibility: collapse !important; +} +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* 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{ + --uc-sidebar-width: 30px; + --uc-sidebar-hover-width: 210px; + --uc-autohide-sidebar-delay: 0ms; /* Wait 0.6s before hiding sidebar */ + --uc-autohide-transition-duration: 0ms; + --uc-autohide-transition-type: linear; + --browser-area-z-index-sidebar: 3; + position: relative; + min-width: var(--uc-sidebar-width) !important; + width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + z-index: var(--browser-area-z-index-sidebar,3); +} +#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 } + +#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; } + +#sidebar-splitter{ display: none } + +#sidebar-header{ + overflow: hidden; + color: var(--chrome-color, inherit) !important; + padding-inline: 0 !important; +} + +#sidebar-header::before, +#sidebar-header::after{ + content: ""; + display: flex; + padding-left: 8px; +} + +#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-box:hover > #sidebar-header, +#sidebar-box:hover > #sidebar{ + 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; +}