userChrome.css tweaks suggestion #1672

wheybags · 2017-12-12T00:51:27Z

at https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-userchromecss you suggest some css to hide the normal top tab bar, but you get some messed up overlaying of the normal window management buttons on windows:

I've been using

opacity: 0;
pointer-events: none;

Which works much better:

The topbar essentially returns to behaving like a normal windows window border.

piroor · 2017-12-12T01:18:04Z

Could you update the wiki by yourself? I'm not use these style rules, so I hope that the page is maintained by users.

Lej77 · 2017-12-12T04:20:04Z

@wheybags Nice! I made the following userChrome.css file with your css code:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

It uses your CSS code when title bar isn't shown and the visibility: collapse !important; code when the title bar is shown. Also it allows showing the tabs again by using the "extra space" option on the customization page.

Title shown:
Hides all tabs.

Title not shown:
Shows empty tab bar. (can drag window with toolbar area).

Extra Space in tab bar:
Show tabs as normal.

Lej77 · 2017-12-12T11:29:33Z

I improved the tab hiding when opening the window's menu alternatives with the alt key:

  /* Make tab area transparent when title is not shown */
  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
  }
  
  /* Improve Alt-window-menu when title is not shown */
  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar:-moz-any([autohide="false"] ,:not([inactive="true"])) ~ #TabsToolbar {
    visibility: collapse !important;
  }  
  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #titlebar-buttonbox {
    height: 33px !important;
  }
  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar {
    padding: 4px !important;
  }
  
  /* Hide tab area when title is shown */
  #main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
  }

Lej77 · 2017-12-27T22:13:51Z

I made another userChrome.css code that shows the window title without the title bar.

/* Make tab area transparent when native titlebar is not shown */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar .toolbar-items {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide tab area when native titlebar is shown */
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}



/* Show title in tab area when native titlebar is not shown */
:root {
    --customized-firefox-title-font-size: 1.1em;
    --customized-firefox-title-line-height: 30px;
    --customized-firefox-title-buttons-width: 150px;

    --customized-firefox-title-margin-top: 9px;
    --customized-firefox-title-margin-top-extra-fullscreen: calc(7px + var(--customized-firefox-title-fullscreen-title-offset));
    --customized-firefox-title-margin-left: calc(9px + var(--customized-firefox-title-icon-size));
    --customized-firefox-title-margin-right: calc(var(--customized-firefox-title-buttons-width));


    --customized-firefox-title-fullscreen-shrink: 6px;
    --customized-firefox-title-fullscreen-alt-shrink: 2px;
    --customized-firefox-title-fullscreen-title-offset: calc(-1 * var(--customized-firefox-title-fullscreen-shrink) / 2);
    --customized-firefox-title-fullscreen-icon-offset: -4px;


    --customized-firefox-title-icon-margin-top: calc(var(--customized-firefox-title-margin-top) - 2px);
    --customized-firefox-title-icon-margin-left: 4px;
    --customized-firefox-title-icon-size: 16px;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #titlebar::before {
    display: block !important;
    pointer-events: none !important;

    --customized-firefox-title-icon-margin-top-fullscreen-offset: 0px;
    --customized-firefox-title-icon-margin-top-alt-offset: 0px;
    --customized-firefox-title-icon-margin-top-total: calc(var(--customized-firefox-title-icon-margin-top) + var(--customized-firefox-title-icon-margin-top-alt-offset) + var(--customized-firefox-title-icon-margin-top-fullscreen-offset));
    margin-top: var(--customized-firefox-title-icon-margin-top-total) !important;
    margin-bottom: calc(-1 * (var(--customized-firefox-title-icon-size) + var(--customized-firefox-title-icon-margin-top-total))) !important;
    padding-top: var(--customized-firefox-title-icon-size) !important;

    margin-left: var(--customized-firefox-title-icon-margin-left) !important;

    opacity: 1 !important;
    content: "" !important;
    background-size: var(--customized-firefox-title-icon-size) !important;
    background-image: url(chrome://branding/content/icon32.png#) !important;
    background-repeat: no-repeat !important;
}
/* Apply Theme color to title */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]):-moz-lwtheme #navigator-toolbox {
    background-color: var(--chrome-background-color) !important;
}
/* Hide Theme colored element in front of title */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #navigator-toolbox {
    background-color: unset !important;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"])::before {
    display: block !important;
    position: relative !important;
    pointer-events: none !important;


    color: var(--titlebar-text-color) !important;
    content: attr(title) !important;


    word-break: break-all !important;
    overflow: hidden !important;

    line-height: var(--customized-firefox-title-line-height) !important;
    --customized-firefox-title-margin-top-total: calc(-1 * (var(--customized-firefox-title-line-height) * 0.5) + var(--customized-firefox-title-margin-top) + 5px);
    --customized-firefox-title-margin-bottom-total: calc(-1 * (var(--customized-firefox-title-line-height) + var(--customized-firefox-title-margin-top-total)));

    font-size: var(--customized-firefox-title-font-size) !important;


    margin-top: var(--customized-firefox-title-margin-top-total) !important;
    margin-bottom: var(--customized-firefox-title-margin-bottom-total) !important;
    max-height: 0px !important;

    margin-left: var(--customized-firefox-title-margin-left) !important;
    margin-right: var(--customized-firefox-title-margin-right) !important;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]):not(:-moz-lwtheme)::before {
    color: white !important;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]):-moz-window-inactive::before {
    opacity: 0.65 !important;
}
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"])::before {
    margin-top: calc(var(--customized-firefox-title-margin-top-total) + var(--customized-firefox-title-margin-top-extra-fullscreen)) !important;
    margin-bottom: calc(var(--customized-firefox-title-margin-bottom-total) - var(--customized-firefox-title-margin-top-extra-fullscreen)) !important;
}


/* Shrink in Fullscreen */
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #toolbar-menubar:not(:-moz-any([autohide="false"], :not([inactive="true"]))) ~ #TabsToolbar .titlebar-buttonbox-container {
    margin-top: 4px !important;
    margin-bottom: -0px !important;
}
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #titlebar::before {
    --customized-firefox-title-icon-margin-top-fullscreen-offset: var(--customized-firefox-title-fullscreen-icon-offset);
}
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #toolbar-menubar:not(:-moz-any([autohide="false"], :not([inactive="true"]))) ~ #TabsToolbar {
    margin-top: -9px !important;
}


/* Improve Alt-window-menu when native titlebar is not shown and title is shown */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar:-moz-any([autohide="false"], :not([inactive="true"])) #menubar-items menu {
    font-size: 0.9em !important;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]):-moz-window-inactive #toolbar-menubar:-moz-any([autohide="false"], :not([inactive="true"])) #menubar-items menu {
    opacity: 0.65 !important;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="false"]:not([inactive="true"]) #menubar-items {
    margin-top: 29px !important;
    ;
    margin-bottom: -35px !important;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="false"]:not([inactive="true"]) ~ #TabsToolbar {
    margin-bottom: -14px;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) .titlebar-buttonbox {
    padding-bottom: 15px;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) #menubar-items {
    margin-top: 30px !important;
    ;
    margin-bottom: -35px !important;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
    margin-top: -13px;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar .toolbar-items {
    visibility: collapse;
}
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
    height: 45px !important;
}

#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #toolbar-menubar:-moz-any([autohide="false"], :not([inactive="true"])) #menubar-items {
    margin-top: 24px !important;
    ;
    margin-bottom: -35px !important;
}
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
    margin-bottom: -19px;
}
#main-window[tabsintitlebar="true"][sizemode="maximized"]:not([extradragspace="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
    margin-bottom: -7px;
}

stefnotch · 2018-01-26T09:16:38Z

I updated the wiki with this code: #1672 (comment)

stefnotch · 2018-01-26T10:06:35Z

@piroor I found a fairly good looking dark tree-style tabs userChrome.css tweak:
https://www.reddit.com/r/FirefoxCSS/comments/7emhsq/my_compact_treestyletab_css_and_sidebar_hover

Should this be added to the wiki?

piroor · 2018-01-26T10:11:44Z

@stefnotch Yes, I hope that the snippets page is maintained by people.

wheybags changed the title ~~userChrome.css tweakssuggestion~~ userChrome.css tweaks suggestion Dec 12, 2017

piroor added the need contribution label Dec 12, 2017

piroor added the has-workaround label Dec 13, 2017

Lej77 mentioned this issue Feb 1, 2018

used the code snippet to hide the top tabs and I would like to make the top bard dark to fit with the dark theme #1753

Closed

piroor added help wanted and removed need contribution labels May 28, 2018

Lej77 mentioned this issue Feb 14, 2019

Minimize, Maximize, and Close buttons disappeared in FF65.0 with userChrome.css styling. Fix included #2147

Closed

piroor closed this as completed May 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

userChrome.css tweaks suggestion #1672

userChrome.css tweaks suggestion #1672

wheybags commented Dec 12, 2017 •

edited

Loading

piroor commented Dec 12, 2017

Lej77 commented Dec 12, 2017 •

edited

Loading

Lej77 commented Dec 12, 2017 •

edited

Loading

Lej77 commented Dec 27, 2017 •

edited

Loading

stefnotch commented Jan 26, 2018

stefnotch commented Jan 26, 2018

piroor commented Jan 26, 2018 •

edited

Loading

userChrome.css tweaks suggestion #1672

userChrome.css tweaks suggestion #1672

Comments

wheybags commented Dec 12, 2017 • edited Loading

piroor commented Dec 12, 2017

Lej77 commented Dec 12, 2017 • edited Loading

Lej77 commented Dec 12, 2017 • edited Loading

Lej77 commented Dec 27, 2017 • edited Loading

stefnotch commented Jan 26, 2018

stefnotch commented Jan 26, 2018

piroor commented Jan 26, 2018 • edited Loading

wheybags commented Dec 12, 2017 •

edited

Loading

Lej77 commented Dec 12, 2017 •

edited

Loading

Lej77 commented Dec 12, 2017 •

edited

Loading

Lej77 commented Dec 27, 2017 •

edited

Loading

piroor commented Jan 26, 2018 •

edited

Loading