MasonJohnHawver42 commented 2 years ago

How would I push the browser down with the toobox in autohide_toolbox.css? I have <:root[sessionrestored]:not([inFullscreen]) > body > #browser{ margin-top: var(--uc-navbar-transform); }> but I don't know what to put in the margin to snyc it with the toolbox.

Thanks :)

MrOtherGuy commented 2 years ago

You would need to use a length value corresponding to how tall your toolbox area is. But you need to hardcode it to some value corresponding to height of the toolbox as you can't compute it from anything.

But I'm wondering if it even makes sense to use that style in the first place if you want content to be pushed down - because that style is written explicitly to not cause content to be pushed down.

JokeDeity commented 11 months ago

Hey, sorry to resurrect this old thread but I have the same issue/question. This is perfect for me except on the sites that decide to put their links and content at the very top of the page for some reason making them unreachable by mouse. I have been at it for about 4 hours trying many different things but nothing properly works. I really don't have a good idea of what I'm doing, the best I've gotten has been just a big permanent margin on browser, but it's really a bad solution to such an elegant piece of code you've written.

I just need the content of the browser to move down 30px when the navigator-toolbox comes up, but nothing I try seems to work for me!

MrOtherGuy commented 11 months ago

You could use something like this:

#navigator-toolbox-background:is(:hover,:focus-within) + #browser{
  margin-top: 30px !important;
}

But I don't see what it would solve since then it moves the browser down when you hover the toolbox, but then you can't possibly be simultaneously hovering the browser.

JokeDeity commented 11 months ago

Well, you're right. On the one hand, I can now see all the content at all times, but I can't click things at the top still. Maybe if the #browser had a delayed return? I'm really just throwing stuff at the wall, and don't know enough about CSS to fully understand what I'm doing.

MrOtherGuy commented 11 months ago

You can add animation & delay like this if you want to:

#navigator-toolbox-background:is(:hover,:focus-within) + #browser{
  margin-top: 30px !important;
  transition-delay: 0s;
}
#navigator-toolbox-background + #browser{
  transition: margin-top 120ms ease-in-out 2s;
}

JokeDeity commented 11 months ago

Crazy, I was just coming back to say I came up with this:

navigator-toolbox-background:is(:hover,:focus-within) + #browser {

margin-top: 30px !important;

}

navigator-toolbox-background:is(:not(:hover):not(:focus-within)) + #browser {

margin-top: 0 !important;
transition: margin-top 1.8s ease 1.4s;

}

Not my favorite solution, but it certainly works and ticks all the boxes and I'm not certain how a perfect solution would even necessarily work.

kameryn1811 commented 2 months ago

@JokeDeity - Curious how to add this to the existing code? Can I just paste it near the bottom of the userChrome.css? Not having any luck getting to do anything on Firefox 125.0.2 (64-bit), is it still working for you?

JokeDeity commented 2 months ago

Nope, it broke. I struggle with any page elements at the top now and have to tab to them because the toolbar covers them. I have to figure out something new.

MrOtherGuy commented 2 months ago

I'm not sure how exactly the old method worked, but I think this would lead to the same behavior:

#navigator-toolbox:is(:hover,:focus-within) + #browser {
  margin-top: 70px !important;
}
#navigator-toolbox:not(:hover,:focus-within) + #browser {
  margin-top: 0 !important;
  transition: margin-top 1.8s ease 1.4s;
}

I think you added that to normal autohide_toolbox.css right?

kameryn1811 commented 2 months ago

That worked brilliantly! Thank you for being so quick.

Curious now that the page get's pushed down it leaves a black gap when the toolbox autohides. Is it possible to have the toolbox to stick around for the same duration as the delay before it transitions back to 0px?

kameryn1811 commented 2 months ago

In my search I only found one other solution [not sure of the original author or origin] that worked well but uses a different method and only hides the navbar portion:

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

#nav-bar {
  /* customize this value. */
  --navbar-margin: -38px;

  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
}

#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: 100;
  opacity: 1;
}

MrOtherGuy commented 2 months ago

If that mostly matches the behavior you want, then I think autohide_toolbox.css only complicates things. You could use this sort of thing instead (and remove autohide_toolbox.css):

#navigator-toolbox{
  --uc-toolbox-height: 85px;
  transition: margin-top 100ms ease 1.4s !important;
  margin-top: calc(0px - var(--uc-toolbox-height));
}
#navigator-toolbox:is(:focus-within,:hover){
  margin-top: 0;
  transition-delay: 0s !important;
}
#navigator-toolbox::after{
  position: absolute;
  height: 10px;
  width: 100vw;
  content: "";
  top: 0;
  z-index: 1;
  transition: top 100ms ease 1.4s;
}
#navigator-toolbox:is(:focus-within,:hover)::after{
  top: var(--uc-toolbox-height);
  transition-delay: 0s;
}

kameryn1811 commented 2 months ago

WOW!!! that's precisely what I want! That's incredible, thank you so much!

JokeDeity commented 2 months ago

I don't know what I'm doing wrong, but for me that just got rid of the toolbar completely and it doesn't show even when hitting ALT.

JokeDeity commented 2 months ago

Okay, I'm sure it has something to do with my specific CSS, but I don't know almost anything about coding and had to get help from ChatGPT to get anything working for me. I had to do a different method to to get it to work how I wanted, but it's only half working how I want. This is what I've got right now, but I can't figure out how to get a delay to happen after the cursor leaves the top and before things move back, like I want the toolbar to just hang for a second before closing slowly and I'm too dumb to figure it out correctly in my many attempts.

/* 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 */

:root {
  --uc-autohide-toolbox-delay: 500ms; /* Wait before hiding toolbars */
  --uc-toolbox-height: 30px; /* Adjust this value based on the height of your menubar */
}

:root[sizemode="fullscreen"],
#navigator-toolbox[inFullscreen] { 
  margin-top: 0 !important; 
}

#navigator-toolbox {
  position: fixed !important;
  background-color: var(--lwt-accent-color, black) !important;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.3s ease-in-out var(--uc-autohide-toolbox-delay) !important;
  transform-origin: top;
  transform: rotateX(var(--uc-toolbox-rotation));
  opacity: 0;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

#navigator-toolbox:hover,
#navigator-toolbox:focus-within {
  transition-delay: calc(var(--uc-autohide-toolbox-delay) - 0.1s) !important;
  opacity: 1;
}

#navigator-toolbox > * { 
  line-height: normal; 
  pointer-events: auto; 
}

#navigator-toolbox,
#navigator-toolbox > * {
  width: 100%;
}

#navigator-toolbox-background:is(:hover,:focus-within) + #browser {
  transition-delay: calc(var(--uc-autohide-toolbox-delay) - 0.1s) !important;
  margin-top: calc(var(--uc-toolbox-height) + 30px) !important;
}

#navigator-toolbox-background:is(:not(:hover):not(:focus-within)) + #browser {
  margin-top: 0 !important;
  transition: margin-top 0.5s ease-in-out var(--uc-autohide-toolbox-delay); /* Add delay before return transition */
}

#navigator-toolbox:focus-within ~ #browser,
#navigator-toolbox:hover ~ #browser {
  transition: margin-top 0.5s ease-in-out var(--uc-autohide-toolbox-delay) !important; /* Add delay before return transition */
  margin-top: var(--uc-toolbox-height) !important;
}

MrOtherGuy commented 2 months ago

In what way simply using code fromthe earlier comment is not behaving the way you want?

JokeDeity commented 2 months ago

Specifically it's got the toolbar so far up that it's not accessible, but I know it's semi functioning because when my cursor goes to the top the page does bump down, but not enough to see the toolbar, also part of the actual page is cut off at the top. Again, it's surely something with my ghetto-rigged CSS, but still it didn't work for me.

MrOtherGuy commented 2 months ago

Yes well, what was intended is that you would only use that and remove your ghetto version of autohide_toolbox altogether.

Of course, if you also have some other custom styles then that's a different problem.

JokeDeity commented 2 months ago

I did remove the autohide and put this one in place, that's what I got. It may be other CSS in my userchrome, it may be CSS in Tab Center Reborn, I'm not sure. I appreciate all your help, though I'm still looking for the perfect solution. If you're interested I could share the rest of the CSS I have with you, but otherwise I won't burden you with it.

MrOtherGuy commented 2 months ago

Sure, feel free to share your complete userChrome.css

Every style can potentially interfere with everything else so if you have bunch of other styles then it's very likely that at least one thing is interfering with that.

JokeDeity commented 2 months ago

Remember, AT BEST, I'm a script kiddie just trying to make things work best I can. So apologies in advance, and no worries if you look at this post and just think "fuck that".

Here's my mess of a userchrome.css:

/*AGENT_SHEET*/

/************************************/
/****** simpleMenuWizard START ******/

/**********************************************
   Modify these files themselves to your needs.
   Do not modify the following @import block.
   **********************************************/

/*** When right-clicking on... ***/
@import url("./simpleMenuWizard/blank-context.css");      /* ...a blank area on a webpage                    */
@import url("./simpleMenuWizard/frame-context.css");      /* ...an iframe                                    */
@import url("./simpleMenuWizard/image-context.css");      /* ...an image                                     */
@import url("./simpleMenuWizard/input-context.css");      /* ...an input-field                               */
@import url("./simpleMenuWizard/link-context.css");       /* ...a link                                       */
@import url("./simpleMenuWizard/main-hamburger.css");     /* Leftclick the hamburger menu on top right       */
@import url("./simpleMenuWizard/main-menubar.css");       /* Leftclick on main menubar (open with ALT key)   */
@import url("./simpleMenuWizard/newtab-containers.css");  /* ...the plus sign to open a new tab or container */
@import url("./simpleMenuWizard/media-context.css");      /* ...media like audio or html5 video              */
@import url("./simpleMenuWizard/select-context.css");     /* ...selected text or selected object             */
@import url("./simpleMenuWizard/sidebar-context.css");    /* ...items in bookmarks- or history sidebar       */
@import url("./simpleMenuWizard/sidebar-header.css");     /* Leftclick on sidebar header                     */
@import url("./simpleMenuWizard/source-context.css");     /* ...a blank area when viewing source code        */
@import url("./simpleMenuWizard/tab-context.css");        /* ...a tab                                        */
@import url("./simpleMenuWizard/toolbar-context.css");    /* ...the toolbar or tabbar                        */
@import url("./simpleMenuWizard/urlbar-context.css");     /* ...the addressbar                               */
@import url("./simpleMenuWizard/urlbar-pageaction.css");  /* Leftclick the addressbar ellipsis (three dots)  */

/**********************************************************
   How to activate or deactivate the following options:
   Remove '/*' at the beginning of a line (not comment line) to activate the option
   Add '/*' at the beginning of the line (not comment line) to deactivate the option
   ********************************************************

/*** Options ***/

/*** If you don't use syncing: Hide all "Send to device" and sync items ***/
@import url("./simpleMenuWizard/opt_noSync.css");

/* Note: If you use Firefox 60 or higher, please see here:
   https://github.com/stonecrusher/simpleMenuWizard#hide-pocket--sync--screenshots
*/

/*** If you use uBlock Origin and want to remove all uBO context menu entries ***/
/* @import url("./simpleMenuWizard/opt_uBO.css"); */

/*** Hide all "Send <item> to Device" entries ***/
@import url("./simpleMenuWizard/opt_noSendToDevice.css");

/*** Hide all inactive menu items ***/
#mainPopupSet menuitem[disabled="true"] { display: none !important; }

/****** simpleMenuWizard end ******/

/*------------------------------------------------------------------------------------------------------------------------------------*/

<?xml version="1.0"?>

.tabbrowser-tab:not([pinned])
{
max-width: 200px !important;
min-width: 70px !important;
}
.tab-content {
overflow: hidden !important;
}
.tabbrowser-tab:not([fadein])
{
max-width: 1px !important;
min-width: 1px !important;
max-width: 1px;
min-width: 1px;
}

.titlebar-spacer:not([type="pre-tabs"]) {
  visibility: collapse !important;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  visibility: hidden !important;
}

#alltabs-button {
  visibility: hidden !important;
}

.titlebar-spacer[type="pre-tabs"]{ margin-left: -39px}
.titlebar-spacer[type="post-tabs"]{
  display: none;
  width: 1px;
  margin-right: 0px;
}

<!-- Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
 -->
<!-- modified by alice0775 2019/05/24
  69.0a1  Bug 1519577 Convert toolbarbutton to a custom element
 -->
<!-- modified by alice0775 2019/05/22
  69.0a1 Bug 1534407 - Enable browser.xhtml by default
 -->
<!-- modified by alice0775 2018/08/28
  fix: menu would not popup.
 -->
<!-- modified by alice0775 2018/08/03
  wirking with Sub-Script/Overlay Loader v3.0.56mod
 -->
<!-- modified by alice0775 2018/08/02
  removed unused line.
 -->

<!-- Run userChrome.js -->
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="js">
    <implementation>
      <constructor><![CDATA[

        if(window.userChromeJsMod) return;
        window.userChromeJsMod = true;

        const file = Services.dirsvc.get('UChrm', Components.interfaces.nsIFile);
        file.append('userChrome.js');

        const mFileURL = Services.io.getProtocolHandler('file')
        .QueryInterface(Components.interfaces.nsIFileProtocolHandler)
        .getURLSpecFromFile(file) + "?" + file.lastModifiedTime;

        try {
          Components.utils.import('resource://gre/modules/Services.jsm');

          let maybeneed = true
          let enumerator = Services.wm.getEnumerator("navigator:browser");
          while(enumerator.hasMoreElements()) {
            var win = enumerator.getNext();
            if(typeof win.userChrome_js == "object") {
              maybeneed = false;
              break;
            }
          }

          if (maybeneed) {
            new class {
              constructor() {
                Services.obs.addObserver(this, 'domwindowopened', false);
              }

              observe(aSubject, aTopic, aData) {
                switch (aTopic) {
                  case 'domwindowopened':
                    aSubject.addEventListener('load', this, true);
                    break;
                }
              }

              handleEvent(aEvent) {
                if (!Services.appinfo.inSafeMode) {
                  const document = aEvent.originalTarget;
                  if (document.location
                      && document.location.protocol === 'chrome:'
                      && !(document.location.href == "chrome://browser/content/browser.xhtml") ) {
                    try {
                        console.log("chrome window opened")
                        Services.scriptloader.loadSubScript(mFileURL, document.defaultView, 'UTF-8');
                    } catch (ex) {
                      Components.utils.reportError(ex);
                    }
                  }
                }
              }
            }();
          }
        } catch (exception) {
          displayError(exception);
        }

        if (!Services.appinfo.inSafeMode) {
          try {
              console.log("browser window opened")
              Services.scriptloader.loadSubScript(mFileURL, document.defaultView, 'UTF-8');
          } catch (ex) {
            Components.utils.reportError(ex);
          }
        }
      ]]></constructor>
    </implementation>
  </binding>
</bindings>

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* Recreates the basic functionality of the Roomy Bookmarks Toolbar add-on: Hide bookmarks bar items label text, show on hover. */
#PlacesToolbarItems > .bookmark-item {
    margin-top: -1px !important;
    list-style-image: none !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    display: none !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
    margin-inline-end: 0 !important;
}

/* Change folder icons */
#PlacesToolbarItems > .bookmark-item[container="true"] [label="EXACT-FOLDER-LABEL1"] {
    list-style-image: url("Foldericon1.svg") !important;
}

#PlacesToolbarItems > .bookmark-item[container="true"] [label="JS"] {
    list-style-image: url("Config.svg") !important;        
}

#PlacesToolbarItems > .bookmark-item[container="true"] [label="Streaming"] {
    list-style-image: url("TV.svg") !important;        
}

#PlacesToolbarItems > .bookmark-item[container="true"] [label="Random"] {
    list-style-image: url("Mario.svg") !important;        
}

#PlacesToolbarItems > .bookmark-item[container="true"] [label="Games"] {
    list-style-image: url("Games.svg") !important;        
}

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* URL bar on same level as Menu Bar */
*|*:root {
  --uc-navbar-height: 30px;
  --uc-navbar-margin-top: 20px;
  --uc-navbar-padding-right: 320px;
  --uc-navbar-margin-left: 200px;
}

#toolbar-menubar {
  height: var(--uc-navbar-height) !important;
  background-color: var(--toolbar-bgcolor) !important;
}

*|*:root:not([inFullscreen="true"]) #nav-bar {
  padding-right: var(--uc-navbar-padding-right) !important;
  margin-top: calc(var(--uc-navbar-height) * -1.12);
  margin-left: var(--uc-navbar-margin-left) !important;
  background-color: transparent !important;
}

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* Firefox Sidebar Tabs */

:root {
    --delay: 0.05s;
    --transition-time: 0.25s;
    --positionX1: 43px;
    --positionX2: absolute;
    --default-sidebar-width: 43px;
    --fullscreen-sidebar-width: 1px;
}

/* Windows specific styles */
@media (-moz-platform: windows), (-moz-platform: windows-win10) {
    :root[tabsintitlebar] {
        --uc-window-control-width: 137px;
    }
    #PanelUI-button, #preferences-button, #PlacesToolbarItems {
        padding-top: 3px !important;
    }
    #PlacesToolbarItems {
        transform: scale(1.2);
    }
    #nav-bar-overflow-button {
        margin-top: -0.5px !important;
    }
    :root {
        --uc-toolbar-height: 32px;
        --chrome-content-separator-color: none !important;
    }
    :root:not([uidensity="compact"]) {
        --uc-toolbar-height: 32px;
    }
    #TabsToolbar {
        visibility: collapse !important;
    }
}

/* General styles */

#sidebar-box:not([lwt-sidebar]) {
    appearance: unset !important;
}
#sidebar-box[sidebarcommand*="tabcenter"] {
    z-index: 1;
}
#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
    visibility: collapse;
    display: none;
}
[sidebarcommand*="tabcenter"] #sidebar, #sidebar-box[sidebarcommand*="tabcenter"] {
    position: relative;
    min-width: 43px !important;
    max-width: 43px !important;
    width: var(--default-sidebar-width);
}
#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    display: block;
    position: absolute;
    min-width: 43px;
    max-width: 43px;
    overflow: hidden;
    border-right: 1px solid var(--sidebar-border-color);
    z-index: 1;
    top: 0;
    bottom: 0;
}
:where(#main-window[inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    display: none;
    min-width: var(--fullscreen-sidebar-width) !important;
    max-width: var(--fullscreen-sidebar-width) !important;
}
#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar, #sidebar-box[sidebarcommand*="tabcenter"]:hover {
    min-width: 10vw !important;
    width: 30vw !important;
    max-width: 200px !important;
    z-index: 1 !important;
    transition: all var(--transition-time) ease var(--delay);
}
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar, #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
    transition: all var(--transition-time) ease 0.2s;
}
@media (width >= 1200px) {
    #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar, #sidebar-box[sidebarcommand*="tabcenter"]:hover {
        max-width: 250px !important;
    }
}
[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    display: none;
}
[sidebarcommand*="tabcenter"] #sidebar {
    max-height: 100%;
    height: 100%;
}
#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--positionX1);
}
#main-window[inFullscreen]:not([inDOMFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--fullscreen-sidebar-width);
}
#main-window[inFullscreen] #sidebar {
    height: 100vh;
}
[sidebarcommand*="tabcenter"] #sidebar-header {
    background: #0C0C0D;
    border-bottom: none !important;
}
[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    border-right-color: #0C0C0D !important;
    border-left-color: #0C0C0D !important;
}
[sidebarcommand*="tabcenter"] #sidebar-switcher-target, [sidebarcommand*="tabcenter"] #sidebar-close {
    filter: invert(100%);
}
#nav-bar toolbarspring {
    -moz-box-flex: 20 !important;
    min-width: 10px !important;
    max-width: 20px !important;
}

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* 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 */

:root {
  --uc-autohide-toolbox-delay: 500ms; /* Wait before hiding toolbars */
  --uc-toolbox-height: 30px; /* Adjust this value based on the height of your menubar */
}

:root[sizemode="fullscreen"],
#navigator-toolbox[inFullscreen] { 
  margin-top: 0 !important; 
}

#navigator-toolbox {
  position: fixed !important;
  background-color: var(--lwt-accent-color, black) !important;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.3s ease-in-out var(--uc-autohide-toolbox-delay) !important;
  transform-origin: top;
  transform: rotateX(var(--uc-toolbox-rotation));
  opacity: 0;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

#navigator-toolbox:hover,
#navigator-toolbox:focus-within {
  transition-delay: calc(var(--uc-autohide-toolbox-delay) - 0.1s) !important;
  opacity: 1;
}

#navigator-toolbox > * { 
  line-height: normal; 
  pointer-events: auto; 
}

#navigator-toolbox,
#navigator-toolbox > * {
  width: 100%;
}

#navigator-toolbox-background:is(:hover,:focus-within) + #browser {
  transition-delay: calc(var(--uc-autohide-toolbox-delay) - 0.1s) !important;
  margin-top: calc(var(--uc-toolbox-height) + 30px) !important;
}

#navigator-toolbox-background:is(:not(:hover):not(:focus-within)) + #browser {
  margin-top: 0 !important;
  transition: margin-top 0.5s ease-in-out var(--uc-autohide-toolbox-delay); /* Add delay before return transition */
}

#navigator-toolbox:focus-within ~ #browser,
#navigator-toolbox:hover ~ #browser {
  transition: margin-top 0.5s ease-in-out var(--uc-autohide-toolbox-delay) !important; /* Add delay before return transition */
  margin-top: var(--uc-toolbox-height) !important;
}

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_menubar_items.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Replaces menubar items text ("File Edit etc.") with icons */

#main-menubar > menu{
  fill: currentColor;
  height: var(--uc-menubaritem-height,28px);
  width: var(--uc-menubaritem-width,30px);
  -moz-context-properties: fill;
  padding: 3px !important;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--toolbarbutton-border-radius)
}
#main-menubar > menu > .menubar-text{ display: none }

#file-menu{ background-image: url("chrome://devtools/skin/images/tool-storage.svg") }
#edit-menu{ background-image: url("chrome://browser/skin/customize.svg") }
#view-menu{ background-image: url("chrome://devtools/skin/images/command-frames.svg") }
#history-menu{ background-image: url("chrome://browser/skin/history.svg") }
#bookmarksMenu{ background-image: url("chrome://browser/skin/bookmark.svg") }
#tools-menu{ background-image: url("chrome://global/skin/icons/developer.svg") }
#helpMenu{ background-image: url("chrome://global/skin/icons/help.svg") }

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/context_menus_more_proton.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Adds more proton-like styling to context menus. Rounded rows, and more consistent padding. This is only going to work on Win10+ */

:root{
  --arrowpanel-menuitem-margin: 0 8px;
  --arrowpanel-menuitem-padding-block: 8px;
  --arrowpanel-menuitem-padding-inline: 8px;
  --arrowpanel-menuitem-border-radius: 4px;
  --panel-separator-margin-vertical: 4px;
  --button-hover-bgcolor: rgb(219, 132, 88);
}
:root[uidensity="compact"] menupopup:not(.in-menulist){
  --panel-padding: 4px 0 !important;
  --arrowpanel-menuitem-padding-block: 8px;
}
/* OPTIONAL Set custom context menu colors below */

menupopup:not(.in-menulist){
  --panel-background: #141414 !important;
  --panel-color: #a37622 !important;
  --panel-separator-color: #a37622 !important;
  --panel-border-color: ThreeDShadow !important;
}
menupopup > menuseparator{
  border-color: var(--panel-separator-color,ThreeDShadow) !important;
}

menupopup{
  --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
  --panel-border-radius: var(--arrowpanel-border-radius) !important;
}
menupopup > menuitem,
menupopup > menu{
  appearance: none !important;
  margin: var(--arrowpanel-menuitem-margin) !important;
  min-height: 24px !important;
  padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  background-color: transparent !important;
}
#context-navigation{
  padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
}
.menu-right{
  margin-inline-end: initial !important;
}
menupopup:not(.in-menulist){
  --panel-padding: var(--arrowpanel-menuitem-padding-block) 0 !important;
}

:root[uidensity="compact"] #context-navigation{
  padding-block: 0 !important;
}
menuseparator:not(.in-menulist){
  margin-block: var(--panel-separator-margin-vertical) !important;
}

#context-navigation > menuitem[_moz-menuactive] .menu-iconic-icon{
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}
#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon,
menupopup > menuitem[_moz-menuactive],
menupopup > menu[_moz-menuactive]{
  background-color: var(--panel-item-hover-bgcolor) !important;
  color: var(--panel-color,inherit) !important;
}
menupopup > menuitem[disabled][_moz-menuactive],
menupopup > menu[disabled][_moz-menuactive]{
  background-color: var(--menuitem-disabled-hover-background-color) !important;
}

/* Change the background color of all buttons in Firefox's toolbars */
#nav-bar toolbarbutton, 
#PersonalToolbar toolbarbutton {
  filter: grayscale(80%);
}

#PersonalToolbar toolbarbutton:hover {
  filter: grayscale(0%);
}

#nav-bar toolbarbutton:hover {
  filter: grayscale(0%);
}

/*------------------------------------------------------------------------------------------------------------------------------------*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_caption_buttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make window-control - aka caption buttons round. */

.titlebar-button:hover{ --uc-caption-background: var(--uc-caption-color) }

.titlebar-button { opacity: 0.8; --uc-caption-color: rgb(252,185,15) }
.titlebar-min    { opacity: 0.7; --uc-caption-color: rgb(36, 209, 49) }
.titlebar-close  { --uc-caption-color: rgb(250, 55, 55) }

.titlebar-button:hover { 
 opacity: 1 !important; 
 transform: scale(1.5) !important; 
}

.titlebar-button {
  position: relative; 
  background: transparent !important;
  padding-inline: 10px !important;
  z-index: 9999 !important;
  transition: opacity 0.2s ease;
}
.titlebar-close { padding-right: 18px !important; }

.titlebar-button > .toolbarbutton-icon {
    list-style-image: none;
    border-radius: 10px;
    background: var(--uc-caption-background,currentColor) !important;
}

/* OPTIONAL - move caption buttons in tabs toolbar a bit upwards */
#TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-inner-padding) !important; } */

/*------------------------------------------------------------------------------------------------------------------------------------*/

And this is what I have in Tab Center Reborn's CSS:

/* Overwrite some colours */
:root {
 --tab-separator: transparent;
 --tab-selected-line: transparent;
 --tablist-separator: #cccccc;
 --overflow-indicator-border: #333333
}

@media (prefers-color-scheme: dark) {
 :root {
 --background: #a37622;
 --icons: rgb(163, 118, 34);
 --tab-separator: rgb(163, 118, 34);
 --tab-active-background: rgb(209, 157, 15);
 --tab-active-text: rgb(209, 157, 15);
 --tab-text: #a37622;
 --toolbar-background: rgb(43,42,51);
 --toolbar-text: rgb(251, 251, 254);
 --input-background: rgb(28,27,34);
 --input-border: transparent;
 --input-background-focus: rgb(66,65,77);
 --input-selected-text: rgb(251,251,254);
 --input-text: rgb(251,251,254);
 --input-text-focus: rgb(251,251,254);
 --identity-color-toolbar: rgb(251,251,254);
 --tablist-separator: #a37622;
 --overflow-indicator-border: #cccccc
 }
}

/* fix autoscrolling bug when middle clicking */
:root,
body {
 overflow: hidden
}

/* Move topmenu to bottom */
#topmenu {
 order: 2;
 background: transparent;
 border: none;
}

#settings {
 position: absolute;
 bottom: 0
}

/* Hide different parts */
#filterbox-icon,
#filterbox-input,
#newtab {
 display: none
}

#tablist-wrapper {
 height: auto;
 margin-inline: 3px;
 /* adds margin above tabs to make the spacing even */
 margin-top: 31px
}

/* fix glitch with spacing in-between pinned tabs */
#pinnedtablist:not(.compact) {
 display: flex;
 flex-direction: column
}

#tablist-wrapper::after {
 content: "";
 margin: 2px 0;
 border: 1px solid var(--tablist-separator)
}

#pinnedtablist:not(.compact) .tab,
#tablist .tab {
 padding: 0;
 border: 0 solid transparent;
 border-radius: 50px;
 margin: 1px;
 background: #18191b
}

.tab .tab-drag-overlay {
 border-radius: 4px;
 z-index: -1
}

.tab:not(.active):hover .tab-drag-overlay {
 background-color: var(--tab-hover-background)
}

.tab.active .tab-drag-overlay {
 background-color: var(--tab-active-background)
}

#pinnedtablist:not(.compact) .tab.drag-highlight-next,
#tablist .tab.drag-highlight-next {
 border-bottom-width: var(--tab-height-compact);
 height: calc(var(--tab-height-compact) * 2) !important;
 max-height: calc(var(--tab-height-normal) + var(--tab-height-compact)) !important
}

#pinnedtablist:not(.compact) .tab.drag-highlight-previous,
#tablist .tab.drag-highlight-previous {
 border-top-width: var(--tab-height-compact);
 height: calc(var(--tab-height-compact) * 2) !important;
 max-height: calc(var(--tab-height-normal) + var(--tab-height-compact)) !important
}

#pinnedtablist:not(.compact) .tab:before,
#tablist .tab:before {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: -6px;
 width: 6px
}

/* the @media rule only allows these settings apply when the sidebar is expanded */
@media (min-width: 49px) {
 /* Move close button to left side */
 /*.tab-close {
 left: 0;
 margin-left: 3px
 }*/

 /* Fix title gradient */
 /*#tablist .tab:hover > .tab-title-wrapper {
 mask-image: linear-gradient(to left, transparent 0, black 2em)
 }*/

 #tablist .tab:hover > .tab-title-wrapper {
 margin-left: 18px;
 transition: all 0.2s ease
 }
}

#tablist {
  font-weight: bold;
  color: #e8a933;
  font-family: "Trirong", serif;
  text-transform: capitalize;
}

/*** Move container indicators to left ***/
#tablist-wrapper {
 margin-left: 0px;
 padding-left: 6px
}
#tablist,
#pinnedtablist:not(.compact) {
 margin-left: -6px;
 padding-left: 6px
}
.tab {
 overflow: visible
}
#tablist .tab[data-identity-color] .tab-context,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
 box-shadow: none !important
}
#tablist .tab[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before {
 content: "";
 position: absolute;
 top: 6px;
 left: -6px;
 bottom: 6px;
 width: 3px;
 border-radius: 0 5px 5px 0;
 background: var(--identity-color);
 transition: inset .1s
}
#tablist .tab.active[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before {
 top: 1px;
 bottom: 1px
}

/* center favicons within the tab */
#tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image {
 margin-left: 6px !important
}

/* hide certain items when collapsed */
@media (max-width: 64px) {
    /* using 64px minimum width to give the tab favicons more room during the transition */
    .tab-close,
    .tab-pin {
        visibility: collapse !important;
    }

    /* hide scrollbar when sidebar is collapsed */
    #tablist {
        scrollbar-width: none;
    }
}

@media (max-width: 48px) {
    #settings-icon,
    #tablist-wrapper .tab-title-wrapper,
    #settings {
        visibility: hidden !important;
    }
}

/* Use mask for overflow instead of shadows */
.can-scroll-top #tablist {
 mask: linear-gradient(transparent, black 40px)
}
.can-scroll-bottom #tablist {
 mask: linear-gradient(black calc(100% - 40px), transparent)
}
.can-scroll-bottom.can-scroll-top #tablist {
 mask: linear-gradient(transparent, black 40px calc(100% - 40px), transparent)
}
#topshadow, #bottomshadow {
 display: none
}

/* Prevent showing scrollbar when adding/removing tabs */
#tablist-wrapper:not(.can-scroll-bottom):not(.can-scroll-top) #tablist {
 overflow: hidden
}

/*** Prevent Favicon-only pinned tabs from wrapping ***/
#pinnedtablist.compact {
 flex-wrap: nowrap;
 overflow-x: auto;
 gap: 2px
}
#pinnedtablist.compact:not(:hover):not(:focus-within) { /* Prevent scrollbar from showing when transitioning */
 scrollbar-width: none
}
#pinnedtablist.compact .tab {
 min-width: 36px
}
@media (max-width: 48px) {
 #pinnedtablist.compact {
 overflow-x: clip /* Clip always makes it reset scroll position */
 }
 #pinnedtablist.compact .tab.active {
 order: -1
 }
}

/*** Better support for non-compact mode ***/
#tablist-wrapper:not(.shrinked) .tab-meta-image {
 display: flex;
 align-items: center;
 width: 58px;
 border: 0 !important;
 margin-right: 4px;
 border-radius: inherit;
 background-position: center;
 min-width: 0px !important;
 background-color: var(--toolbar-background) !important;
 transition: margin .4s
}
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
 transition: margin .1s;
 z-index: 2
}
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
 top: unset !important;
 bottom: 8px;
 left: 25px !important;
 z-index: 4;
 transition: inset .1s
}

/* If you want to disable the website previews,
comment out the @media line below and its closing bracket */
@media (max-width: 49px) {
 #tablist-wrapper:not(.shrinked) .tab-meta-image {
 background-color: inherit !important;
 border-width: 0 !important;
 box-shadow: none !important;
 height: 0 !important;
 width: 26px;
 margin-right: 0px
 }
 #tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
 background-color: transparent !important;
 margin-top: 0 !important;
 margin-left: 3px !important;
 box-shadow: none !important
 }
 #tablist-wrapper:not(.shrinked) .tab-icon-overlay {
 bottom: 12px;
 left: 16px !important
 }
}

/* middle click newtab workaround */

/* allows the #spacer element to take up more space */
#spacer {
 min-height: 100vh
}

/* moves the new tab button to the original position */
#tablist-wrapper {
 margin-bottom: -100vh
}

/* moves the new tab button separator to the original position */
#tablist-wrapper::after {
 transform: translateY(-100vh)
}

MrOtherGuy commented 2 months ago

All right, that's a lot to unpack. I kinda assume that all those simpleMenuWizard imports won't be the problem here. I don't know what is inside those files but I hope they only contain stuff that modifies context menus or menu panels.

But then, you need to remove that <?xml version="1.0"?> on line 62. That is some xml code, not css. It won't do anything in userChrome.css except to make the ruleset that comes after it to be ignored as invalid (so your tabs won't have min-width: 70px and max-width: 200px)

Then lines 100 - 197 you again have some xml code - this again doesn't do anything but it does cause lines 204-207 to be ignored as invalid.

Apart from that, I think it would mostly work if you simply modify that --uc-toolbox-height variable in the snippet I shared previously. I used 85px as an example, but that is just way too large because you are making the main toolbar (nav-bar) smaller than normal but most importantly because you are removing tabs toolbar with by collapsing it (lines 298-300) - thus in your case the toolbox height needs to be way less than 85px - maybe 36px or something.

The lesson here is that if you are making rather abnormal changes to normal Firefox layout, then you can't really expect any ready-made css to have their intended effect - because most of the stuff is interdependent.

JokeDeity commented 2 months ago

You're a saint. After following your instructions and removing unnecessary code I haphazardly took from some Japanese github and put where it didn't belong; I'm using the following, but I still wish I could make it stay out for a few seconds before returning, nothing I try makes it work though, if I add a delay to #navigator-toolbox{ it works, but it also adds the same delay to the beginning, if I add it to #navigator-toolbox:is(:focus-within,:hover){ it only happens when opening, and the other two sections don't seem to change anything with delay. Otherwise it works GREAT (at least when maximized, I can't get to it in windowed now) and I can now access anything on the page with my cursor easily.

navigator-toolbox{

--uc-toolbox-height: 30px; transition: margin-top .6s !important; margin-top: calc(0px - var(--uc-toolbox-height)); z-index: 3; }

navigator-toolbox:is(:focus-within,:hover){

margin-top: 0; transition-delay: 0.35s !important; }

navigator-toolbox::after{

position: absolute; height: 10px; width: 100vw; top: 0; }

navigator-toolbox:is(:focus-within,:hover)::after{

top: var(--uc-toolbox-height); }

MrOtherGuy commented 2 months ago

The CSS in your last comment won't work in normal windows because it is missing some crucial bits - you have removed the content: "" property, and as such the ::after pseudo-element is not generated, and because of that, you can't hover over the top part because in normal windows the OS takes control of the cursor when it is very near the top of the window to show a window resize cursor. But you should be able to just increase the height of hoverable area by increasing that 10px height.

In addition, you are now only setting transition-duration (.6s) for the non-hovered toolbox. If you want to also set transition-delay for it, then you need to add a second time value in transition shorthand, or with transition-delay. If you make that transition: margin-top .6s 1.2s !important; then the duration is .6s and delay is 1.2s.

However, you also need to use the same transition delay and duration values for the top property of the ::after pseudo-element (like was shown in my example). If you don't, then as soon as you hover it, the toolbox becomes hovered, and the pseudo-element will in that state have top: var(--uc-toolbox-height) and not 0px anymore. Thus, the end result is that as soon as you hover it, it gets moved away from your cursor and becomes non-hovered again. And the loop continues.

JokeDeity commented 2 months ago

My guy. It's perfect now. I don't have much, but do you have a way to send donations or anything? I really appreciate all your hard work and effort and good deeds.

JokeDeity commented 2 months ago

Might have spoke a little prematurely. Added back in content: "", changed the delays as suggest and it works great, but changing the 10px to any value doesn't seem to make a difference in windowed mode, even up to 40px it doesn't become hoverable and page elements right next to the top of the page are still clickable. also, hitting ALT no longer is an option for bringing up the bar quickly.

MrOtherGuy commented 2 months ago

Perhaps I didn't express this clearly enough; the ::after pseudo element needs to have: transition: top .6s ease 1.2s; i.e. it's top property needs to be transitioned.

But if adding that doesn't solve your issue then I don't know what the problem is. This works fine on my end.

JokeDeity commented 2 months ago

Like this? This is what I had:

navigator-toolbox::after{

position: absolute; height: 10px; width: 100vw; content: ""; top: 0 .5s 1.4s !important; }

MrOtherGuy commented 2 months ago

Not quite. You need to set top property to a length value like 0px (although for zero simply 0 works as well) - that sets its position. Then you need to the transition property to tell that changes in the element's top property need to be transitioned. You might also need to set z-index to something so that ::after pseudo-element appears on top of web-content and not behind it.

So like this:

#navigator-toolbox::after{
  position: absolute;
  height: 10px;
  width: 100vw;
  content: "";
  top: 0px;
  transition: top 0 .5s 1.4s;
  z-index: 1;
}

JokeDeity commented 2 months ago

Hell yeah, that works great now, final results being:

navigator-toolbox{

--uc-toolbox-height: 30px; transition: margin-top .6s 3s !important; margin-top: calc(0px - var(--uc-toolbox-height)); z-index: 3; }

navigator-toolbox:is(:focus-within,:hover){

margin-top: 0; transition-delay: 0.35s !important; }

navigator-toolbox::after{

position: absolute; height: 10px; width: 100vw; content: ""; top: 0px; transition: top 0.5s 1.4s; z-index: 3; }

navigator-toolbox:is(:focus-within,:hover)::after{

top: var(--uc-toolbox-height); }

Now I just have to figure out how I broke my minimize, maximize and close buttons.

MrOtherGuy / firefox-csshacks

AutoHide Toolbox Push Browser down with toolbox #194

navigator-toolbox-background:is(:hover,:focus-within) + #browser {

navigator-toolbox-background:is(:not(:hover):not(:focus-within)) + #browser {

navigator-toolbox{

navigator-toolbox:is(:focus-within,:hover){

navigator-toolbox::after{

navigator-toolbox:is(:focus-within,:hover)::after{

navigator-toolbox::after{

navigator-toolbox{

navigator-toolbox:is(:focus-within,:hover){

navigator-toolbox::after{

navigator-toolbox:is(:focus-within,:hover)::after{