Unable to resize TST width about firefox_custom_css

[foxhoundsk]

I'm now managed to resize the tab by commenting out the following in userChrome.css:

#sidebar,
  #sidebar-header {
    position: relative !important;
    min-width: var(--sidebar-min-width) !important;
    max-width: var(--sidebar-min-width) !important;
  transition: .1s ease .1s;
    z-index:1;
  }

And the default (also the minimum) width of TST is now wider than before.

I still can't figure how this limits the resize operation, could anyone give me a hint?

Thanks!

[foxhoundsk]

I just found that maybe the following is suppose to narrowing the TST width when the focus is not in the sidebar:

  #sidebar,
  #sidebar-header {
    position: relative !important;
    min-width: var(--sidebar-min-width) !important;
    max-width: var(--sidebar-min-width) !important;
  transition: .1s ease .1s;
    z-index:1;
  }

  #sidebar-box:hover :-moz-any(#sidebar,#sidebar-header) {
    min-width: var(--sidebar-visible-width) !important;
    max-width: var(--sidebar-visible-width) !important;
    margin-right: calc((var(--sidebar-visible-width) - var(--sidebar-min-width)) * -1) !important;
    z-index:1;
    position: relative !important;
  transition: .21s ease 3.20s;
  }

However, with this, I can't adjust the TST width.

Is it possible that I can adjust the width while keeping the auto sizing of sidebar feature enabled?

Thanks!

[hakan-demirli]

Since there were some bugs that I forgot, I disabled the resize feature by limiting the max-min width of the sidebar. But, let me tell you everything I know about the code which I stole from someone else.

As you have noticed by default the size of the sidebar is fixed to --sidebar-min-width.
min-width and max-width properties are set to the same variable. Hence, you can't drag it to increase it's size.

Firefox_Custom_CSS/userChrome.css

Lines 49 to 56 in d354c40

	#sidebar,
	#sidebar-header {
	position: relative !important;
	min-width: var(--sidebar-min-width) !important;
	max-width: var(--sidebar-min-width) !important;
	transition: .1s ease .1s;
	z-index:1;
	}

You can create another variable --sidebar-max-width and set it to something higher. Lets say 200px.
Assign it to the max-width.

  #sidebar,
  #sidebar-header {
    position: relative !important;
    min-width: var(--sidebar-min-width) !important;
    max-width: var(--sidebar-max-width) !important;
  transition: .1s ease .1s;
    z-index:1;
  }

Now, you can resize the sidebar by mouse as long as it doesn't exceed these two variables.
Also if you hover your mouse over the sidebar for 3 seconds. It will expand or shrink to reach the --sidebar-visible-width, which is 162px.

You can also change the hover time by adjusting this:

Firefox_Custom_CSS/userChrome.css

Line 64 in d354c40

transition: .21s ease 3.20s;

Or you can just disable the mouse hover event by removing the whole block.

[foxhoundsk]

@hakan-demirli Got it, thank you for the detailed explanation.