MozillaZine

FF CSS remove Dead space

User Help for Mozilla Firefox
jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 16th, 2020, 5:16 pm

I've tried just about every combination i can think of and nothing works. Perhaps its not possible. I would like to get rid of the dead space in yellow between the menubar-toolbar and the search bar.

Code: Select all
  #toolbar-menubar {
border: none !important;
  margin-top:-10px!important;
  margin-bottom:-10px!important;
  pading-top:0px!important;
  padding-bottom:0px!important;
  height: 0px!important;
  max-height:0px!important;
  min-height: 0px !important;
}


also tried more simple variations setting to 0 and negative values, i don't think the code is valid but hoping someone knows.

https://imgur.com/8sh4JCI
Image

Any suggestions is appreciated.

thanks

Frank Lion

User avatar
 
Posts: 20651
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 17th, 2020, 4:47 am

jetspeedz wrote:Any suggestions is appreciated.


As a general principle, I think I'd first give the #toolbar-menubar a red background to make sure that the dead space really is from it and not from some border or the #nav-bar, etc.

Assuming it is, I'd next turn to examining the max/min/close area, just because something is forcing that height and it's not going to be the menu item text.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 17th, 2020, 10:18 am

Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

Frank Lion

User avatar
 
Posts: 20651
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 17th, 2020, 11:11 am

jetspeedz wrote:Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Hi,

Did you add -moz-appearance: none !important; and background-image: none !important; to your background-color code?

jetspeedz wrote:Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

That browser toolbox is as good as it gets, but don't forget those rules on the right also give you the file location for those particular rules. Just right click on the file and select Copy Location and paste it into the urlbar, i.e. chrome://global/skin/toolbar.css chrome://browser/content/browser.css etc.

Sometime I'll load up FF 75 and have a look around. I need to bring myself up to date on their code anyway. How hard can it be? :P
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 17th, 2020, 11:22 am

Frank Lion wrote:
jetspeedz wrote:Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Hi,

Did you add -moz-appearance: none !important; and background-image: none !important; to your background-color code?

jetspeedz wrote:Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

That browser toolbox is as good as it gets, but don't forget those rules on the right also give you the file location for those particular rules. Just right click on the file and select Copy Location and paste it into the urlbar, i.e. chrome://global/skin/toolbar.css chrome://browser/content/browser.css etc.

Sometime I'll load up FF 75 and have a look around. I need to bring myself up to date on their code anyway. How hard can it be? :P



I did not but I just added it and the result is the same, the portion which changes color is the same, its the menu bar options (File, Edit, History... & top right close, minimize and maximize buttons) change color to red, the space below nothing happens.

I was hoping there was a simple way to identify these attributes, I've used the browser toolbox briefly and didn't find it helpful like the Page inspector element where i can target websites to change colors. I must just not be using it properly.

FF 76 and the next version will continue to make changes and break CSS code. wish they would leave good alone honestly.

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 17th, 2020, 11:29 am

I'm befuddled what that empty space can be?

Image

https://imgur.com/t7xBYwA

Frank Lion

User avatar
 
Posts: 20651
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 17th, 2020, 12:06 pm

jetspeedz wrote:I'm befuddled what that empty space can be?

Image

https://imgur.com/t7xBYwA

Well, least now you know that it's not the #toolbar-menubar or else it would be red.

I've now loaded up FF78 and the tabs by default are above the nav bar. You seem to have no tabs there (tabs on bottom fix?) so my guess would be that blank space is a part left over from the tab bar.

I don't have much of a space there - https://i.postimg.cc/prf6SHG5/SNAG-0575.png

The good news is that is the theme I did for Firefox 57 almost 3 years ago on there! Yep, it's a bit broken, but it shows to me that not that much has really changed 19 versions later.

I'll look into this stuff generally sometime, but meantime I'd try commenting out /* */ your tabs on bottom fix, maybe?

Edit - I reckon that dead space is #TabsToolbar-customization-target
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 17th, 2020, 12:11 pm

I have a lot of changes honestly to minimize the menu's and yes tabs are on the bottom like the old FF back in the day.

It has been my experience almost every change breaks something in the CSS so this is not an isolated change. I'm constantly having to tweak to keep things the same.

I tried the #TabsToolbar-customization-target and it was not the dead space.

There is something interesting though when the browser is maximized that dead space is smaller. It could just be that it is not possible to make that change.

Frank Lion

User avatar
 
Posts: 20651
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 17th, 2020, 12:18 pm

Give me your Tabs on Bottom code and I'll see if I get a dead space there.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 17th, 2020, 12:21 pm

You are a gem Frank

Here is the code for everything i have minus the website specifics:


Code: Select all
.browserContainer { background-color: black !important; }

@-moz-document url("about:blank"), url("about:home"), url("about:newtab") {
    body {
        background-color:#000000;
    }
}


/*HB all this is the new FF68 moving forward to set URL bar the way you like */
/* https://www.jeffersonscher.com/gm/url-bar-tweaks.html */


/* witdh of the urlbar */
  #PopupAutoCompleteRichResult, #urlbar-results {max-width: 1100px !important;}
  .urlbarView-row-inner {max-width:1000px !important;}
 
  .urlbarView {background: black !important; , border-color: transparent !important;}

  /* Remove excess width of one-off search engine buttons */
  #urlbar-results .searchbar-engine-one-off-item.dummy:not(.last-of-row) {display: none !important;}
 
  /* Firefox 70 */
  .urlbarView:not(.megabar){
    left: unset !important;
    right: unset !important;}
   
  /* Avoid search one-offs being too wide */
  .urlbarView {
    --item-padding-start: 0px !important;
    --item-padding-end: 0px !important;}
 
   
  :root[uidensity="compact"] .urlbarView {
margin-top: 0px !important;
}

 
/*HB this is mouse hover on URL bar background color*/ 
 .urlbarView-row:hover {background-color: #404040 !important;}

 
/* Dark Themed Drop-down */
#PopupAutoCompleteRichResult .autocomplete-richlistbox, #urlbarView-results {background-color: black !important;}

.autocomplete-richlistitem .ac-title, .autocomplete-richlistitem .ac-action, .autocomplete-richlistitem .ac-separator,
.urlbarView-row .urlbarView-title, .urlbarView-row .urlbarView-secondary,.urlbarView-row .urlbarView-title-separator {color: #777 !important;}

.autocomplete-richlistitem[selected=true], .urlbarView-row[selected] {background-color: #666 !important;}

.autocomplete-richlistitem[selected=true] .ac-title, .ac-title[selected], .autocomplete-richlistitem[selected=true]
.ac-action, .ac-action[selected], .autocomplete-richlistitem[selected=true] .ac-separator, .ac-separator[selected],
.urlbarView-row[selected] .urlbarView-title, .urlbarView-row[selected] .urlbarView-secondary,.urlbarView-row[selected] .urlbarView-title-separator {color: #eee !important;}

.autocomplete-richlistitem[selected=true] .ac-url, .ac-url[selected], .urlbarView-row[selected] .urlbarView-url {color: white !important;}

/* Subtle bottom border */
#PopupAutoCompleteRichResult .autocomplete-richlistitem, .urlbarView-row {border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;}
/* HB all above just for URL bar */

/*CTRL+F Find color for not found*/
.findbar-textbox[status="notfound"] {
  background-color:white !important;
  color:black !important;
}
/*CTRL+F Find color default color*/
.findbar-textbox{
  background-color:black !important;
  color: white !important;
}

/*HB this is the Google search bar color*/
#searchbar .searchbar-textbox{
  background-color: #000000 !important;
}
#PopupSearchAutoComplete {
    background-color: black !important;
    color: white !important;
}

/*HB this makes the URL background black*/
#urlbar {
  background-color: #000000 !important;
}

/*HB These 2 lines below is tab scroll bar if you want to remove it*/
.tabbrowser-tab {min-width: initial !important;}
.tab-content {overflow: hidden !important;}

/*HB Tab section starts*/
 /*HB this removes the Blue bar at top of tab*/
.tab-background {
    opacity: 0 !important;
}

/* TABS on bottom */
 *|*:root {
 --tab-min-height: 20px !important;
 }


 #TabsToolbar {
  position: absolute !important;
  display: block !important;
  bottom: 0 !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height)) !important;
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  background-color: rgb(0,0,0) !important;
  color: rgb(153,153,153) !important;
}

.tabbrowser-tab[selected="true"] {
  font-weight: bold !important;
  background-color: rgb(166,166,166) !important;
  color: black !important;
  height: var(--tab-min-height) !important;
}
/*HB Tab section ends*/
 
/*Reduce the padding between the URL bar and the tabs/content */
#nav-bar-customization-target {
    margin-top: -5px !important;
    margin-bottom: -5px !important;


toolbarbutton {
  padding-top: 0px !important;
  padding-bottom: 0px !important;}
 
/*HB this shows the x on tabs*/
tab:hover .tab-close-button
{display: -moz-box !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;}
 

Frank Lion

User avatar
 
Posts: 20651
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 18th, 2020, 1:33 am

Here's 78 with a clean profile and a clean userChrome.css with just your code added -
https://i.postimg.cc/JzZY5jyp/SNAG-0576.png

As you can see, there's no dead space there. My guess would be, you are on Win10 and I'm on Win7 or you have some setting somewhere that is messing things up.

Hope that helps.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 19th, 2020, 8:22 am

Frank Lion wrote:Here's 78 with a clean profile and a clean userChrome.css with just your code added -
https://i.postimg.cc/JzZY5jyp/SNAG-0576.png

As you can see, there's no dead space there. My guess would be, you are on Win10 and I'm on Win7 or you have some setting somewhere that is messing things up.

Hope that helps.


Hi Frank, not sure why i didn't get a notification from this site to respond sooner.

You are correct I'm on Win10, i also have Win7 with the same code but have not used that machine yet to check.

Perhaps it is a windows 10 thing, i don't have any unique options or settings, i even tried it on a corporate laptop with strict restrictions and it behaves the same.

Maybe there is just no css code for that area?

dickvl

User avatar
 
Posts: 53092
Joined: July 18th, 2005, 3:25 am

Post Posted May 19th, 2020, 2:14 pm

Does changing the Density or Drag Space setting on the customize page has any effect ?

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted May 19th, 2020, 2:35 pm

I just tested it and it made no difference, what does change is the url bar size but not that gap in Win10.

I honestly don't think there is a way to change that, i'm hoping im wrong but not likely.

dickvl

User avatar
 
Posts: 53092
Joined: July 18th, 2005, 3:25 am

Post Posted May 20th, 2020, 1:31 pm

A possible way to move up content is to apply a negative margin-top.
Sometimes there is content added via ::after rules, but you would have to find out to what element you need to apply the rules.

What element in #navigator-toolbox or #nav-bar do you need to select in the Browser Toolbox to include this dead space in the selection?

You can also check "Layout -> Box Model" to check the height.

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 5 guests