MozillaZine

[Ext] Classic Theme Restorer

Announce and Discuss the Latest Theme and Extension Releases.
marty60
 
Posts: 475
Joined: March 21st, 2012, 7:09 am

Post Posted June 8th, 2018, 8:57 am

Something was interfering. You had combined some of the code and I forgot to delete several of the previous lines. After doing that it's perfect, I've got the full bar and it unhides below the web page scroll bar. It's almost like we never lost the addon bar, thanks again Aris.

Benjamin Markson

User avatar
 
Posts: 365
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted June 12th, 2018, 5:35 am

Thank you for the idea of using #PersonalToolbar as a bottom Status/Add-on bar. It works really well:
Image

I am no CSS expert and my code seems to look somewhat different to everyone else's:
Code: Select all
#main-window:not([inFullscreen]) #content-deck {margin-bottom: 55px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 26px !important;
   width: 100% !important;
   border-bottom: 1px solid rgb(160, 160, 160) !important;
   background-color:  rgb(212, 208, 200) !important;
}
#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
{
   display: none !important;
   bottom: 0px !important;
}
#navigator-toolbox:hover #TabsToolbar {display: inline !important;}

#PersonalToolbar
{
   direction: rtl !important;
   width: 100% !important;
   padding: 5px !important;
   position: fixed !important;
   height: 26px !important;
   bottom: 0px !important;
}
.browserContainer>#statuspanel
{
   left: 4px !important;
   bottom: 0px !important;
   transition-duration: 0s !important;
   transition-delay: 0s !important;
}
.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label
{
   margin-left: 0px !important;
   border: none !important;
   padding: 0px !important;
   margin-bottom: 4px !important;
}
window[inFullscreen] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label {display:none !important;}

One thing I've not had any problem with are the scrollbars. I think the secret is to adjust the #content-deck bottom margin. This seems to lift the web page (including its scrollbars) away from the bottom of the browser space. As a consequence the bottom px values for the toolbars also become more intuitive.

Where I have a small glitch is with the #navigator-toolbox:hover when in full screen. While this works the hover only triggers when the mouse it at the top of the screen and not at the bottom. As I like to have my tabs on the bottom of the screen this means I can't click the tabs (under FF52 + Tab Mix Plus I don't have that problem).

To be honest this is getting a bit marginal, I don't use full screen very much, and when I do I don't tend to go switching tabs. However, if there is a simple solution it would be nice to include that functionality.

Ben.

Edit: with FF61 the various statuspanel css entries change to #statuspanel
Last edited by Benjamin Markson on June 28th, 2018, 11:36 am, edited 1 time in total.
XUL is dead. Long live the Google Chrome Clones.

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 12th, 2018, 9:54 am

@Benjamin

Your issue with tabs toolbar in fullscreen can easily be solved. You are using position rule "position: fixed", so it does not rely on #navigator-toolbox node.

Remove this from your code:
Code: Select all
#TabsToolbar[inFullscreen]
{
   display: none !important;
   bottom: 0px !important;
}
#navigator-toolbox:hover #TabsToolbar {display: inline !important;}


Add this instead:

Code: Select all
#TabsToolbar[inFullscreen] {
   bottom: -24px !important;
   opacity: 0 !important;
}

#TabsToolbar[inFullscreen]:hover {
   bottom: 0px !important;
   opacity: 1.0 !important;
}

Benjamin Markson

User avatar
 
Posts: 365
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted June 12th, 2018, 12:53 pm

Cool beans, I can see that. I've gone for this:
Code: Select all
#TabsToolbar[inFullscreen]
{
   bottom: 0px !important;
   opacity: 0 !important;
}

#navigator-toolbox[inFullscreen]:hover #TabsToolbar,
#TabsToolbar[inFullscreen]:hover
{
   opacity: 1.0 !important;
}

This makes #TabsToolbar appear when the mouse goes top or bottom - which is the Tab Mix Plus behaviour - although, I've not worked out how to make #nav-bar appear when the mouse goes to the bottom.

I've also added this:
Code: Select all
#main-window[inFullscreen] #navigator-toolbox:hover ~ #content-deck,
#main-window[inFullscreen] #TabsToolbar:hover ~ #content-deck
{
   margin-bottom: 29px !important;
}

Which stops the scrollbars from going behind #TabsToolbar - more aesthetic than strictly necessary in full screen.

Ben.
XUL is dead. Long live the Google Chrome Clones.

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 13th, 2018, 1:19 am

Benjamin Markson wrote:... I've not worked out how to make #nav-bar appear when the mouse goes to the bottom.

...


I don't think this is possible, if you keep your #nav-bar on top. The trick with tabs toolbar only works, because you moved it to the bottom. It internally still is a part of the top #navigator-toolbox, but additionally can be accessed separately because of tab toolbars "fixed bottom position". Even if #nav-bar would appear (on top?) once mouse cursor hits windows bottom area, it would still disappear on the way the cursor takes to the top.

In case you want to experiment with the complete #navigator-toolbox at the bottom, try this (without any other code you are using):

Code: Select all
#navigator-toolbox {
  -moz-box-ordinal-group: 100 !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar {
  visibility: visible !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #toolbar-menubar {
  visibility: visible !important;
}

kltpzyxmrm
 
Posts: 100
Joined: June 16th, 2015, 10:59 am

Post Posted June 26th, 2018, 4:23 pm

Hi Aris,

I'm using your Classic CSS tweaks for Firefox Quantum v1.9.5.

I'm having a problem with resizing the tab bar and centering the tab text.

I didn't realize you were taking messages here. I thought it was just for CTR, so I posted over here http://forums.mozillazine.org/viewtopic.php?f=7&t=3040671 where Frank was kind enough to help me out.

You'll see the tweaks I made, mostly from your userchrome.css.

Instead of rehashing everything, maybe you could check out the conversation and let me know what you think?

Thanks

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 27th, 2018, 4:48 am

I would prefer issue reports regarding "CustomCSSforFx" to be posted on Github to separate CTRs support thread from it, but I will answer here too.

If everything is working you and Frank put together there is no need to look over it. However the "CustomCSSforFx" projct handles your request like this:
Code: Select all
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: 24px !important;
  /*height: 24px !important;*/ /* this might be required for some OS themes */
}

#TabsToolbar #tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  min-height: 23px !important;
  max-height: 23px !important;
}

.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}

kltpzyxmrm
 
Posts: 100
Joined: June 16th, 2015, 10:59 am

Post Posted June 27th, 2018, 11:31 am

I'm not having an issue with the default appearance of the tabs/tab bar using CustomCSSforFx.

I'm trying to narrow the tab bar and center the text in proportion to the height adjustment.

I mentioned there are tweaks I used, i.e. numbered tabs & close button on the left. From "CustomCSSforFx": tab background colors; /* @import url(./css/tabs/classic_squared_tabs.css), just in case there is some conflict with what I'm trying to accomplish.

Here it is with no alterations
Image

This is the result with a tweak I found and added. Notice the thicker white bottom margin with no real narrowing and the text riding on the margin & in some cases being cut off
Code: Select all
/* TAB BAR: ADJUST HEIGHT */
#TabsToolbar .tabbrowser-tab {
  height: 19px !important; /* 29px compact, 33px normal, YMMV */
  min-height: 19px !important;
  max-height: 19px !important;

Image

Frank added this. Only change is the raised active tab text. White tab is active.
Code: Select all
/*Franks raise selected tab text...*/
#TabsToolbar .tabbrowser-tab[selected] .tab-label {
margin-top: -5px !important;
margin-bottom: 5px !important;}

Image

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 28th, 2018, 9:01 am

@kltpzyxmrm
You shrinked your tabs, but you also have to shrink tabs toolbar.
This can be achieved with the code I posted above. Additionally the above code centers the label, but more tweaks may be required, if you use different font size settings.

Test this code instead of the one you posted:
Code: Select all
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: 19px !important;
  /*height: 24px !important;*/ /* this might be required for some OS themes */
}

#TabsToolbar #tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  min-height: 18px !important;
  max-height: 18px !important;
}

#TabsToolbar .tabbrowser-tab {
  height: 19px !important; /* 29px compact, 33px normal, YMMV */
  min-height: 19px !important;
  max-height: 19px !important;
}

.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
  font-weight: bold !important;
}


If you increase the font size, the label has to be repositioned like this:

Code: Select all
.tab-label {
  font-size: 16px !important;
  margin-top: -5px !important;
}


Image

kltpzyxmrm
 
Posts: 100
Joined: June 16th, 2015, 10:59 am

Post Posted June 28th, 2018, 4:20 pm

That worked nicely
Image

But I hope you can help me out with a complication.

Notice on my previous post attachment, I have the close button on the left.

Code: Select all
/* MOVE CLOSE BUTTON TO THE LEFT */
.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-icon-image,
.tabbrowser-tab .tab-sharing-icon-overlay,
.tabbrowser-tab .tab-icon-overlay,
.tabbrowser-tab .tab-label-container,
.tabbrowser-tab .tab-icon-sound {
  -moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab .tab-close-button {
  margin-left: -2px !important;
  margin-right: 2px !important;
}


After adding the tab bar code, the close button is hiding under the favicon. Unfortunately, it's not functional in this position. That would be a nice space saver actually.
Image

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 29th, 2018, 3:56 am

Have you tried moving close button to the left instead moving everything else to the right?
https://github.com/Aris-t2/CustomCSSfor ... _start.css

kltpzyxmrm
 
Posts: 100
Joined: June 16th, 2015, 10:59 am

Post Posted June 29th, 2018, 10:17 am

Nice. But it voids the height adjustment.

Image

Also, would it be possible to close the gap between the close tab button and the tab number?

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 29th, 2018, 10:31 am

Sure, reduce close buttons -moz-margin-end value.
Changing tab contents order does not affect tab height at least not in my tests. I don't have your "tabs number code" though.

Image

Here is what I have at the end of userChrome.css based on CustomCSSforFx (different values might be required for browsers default tabs).
Code: Select all
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: 19px !important;
  /*height: 19px !important;*/ /* this might be required for some OS themes */
}

#TabsToolbar #tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  min-height: 18px !important;
  max-height: 18px !important;
}

#TabsToolbar .tabbrowser-tab {
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
}

.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
  font-weight: bold !important;
  font-size: 16px !important;
  margin-top: -5px !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  -moz-margin-start: -8px !important;
  -moz-margin-end: 4px !important;
}

kltpzyxmrm
 
Posts: 100
Joined: June 16th, 2015, 10:59 am

Post Posted June 29th, 2018, 11:09 am

Slight adjustment. With the width of my tabs, need all the room I can squeeze out of it :D
Could the close button be made more prominent, like red or bold?
Code: Select all
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  -moz-margin-start: -11px !important;
  -moz-margin-end: 1px !important;
}

Image

Numbered Tabs
Code: Select all
/* NUMBERED TABS */
#tabbrowser-tabs{
  counter-reset: n_tabs 0;
}
.tabbrowser-tab .tab-content{padding-left: 2px;}
.tabbrowser-tab .tab-content::before{
  display: -moz-box;
  padding-right:2px;
  counter-increment: n_tabs;
  content: counter(n_tabs);
}

Aris

User avatar
 
Posts: 3202
Joined: February 27th, 2011, 10:14 am

Post Posted June 29th, 2018, 11:20 am

Try

Code: Select all
.tab-close-button {
  fill: red !important;
}

Return to Extension/Theme Releases


Who is online

Users browsing this forum: No registered users and 4 guests