Custom userChrome.css for hiding tabstrip and other things

[lopis]

I just wanted to share some custom style I made to go with this addon to make it a bit more like the original TC:

#tabbrowser-tabs {
  visibility: collapse !important;
}

#sidebar-box {
  overflow-x: hidden;
  min-width: 0 !important;
  width: 5em !important;
  margin-top: -84px;
  transition: margin 0.2s ease-in-out 2s;
}
#sidebar-box:hover {
  margin-top: 0;
}

#newtab-label, #newtab  {
  display: none !important;
}

#settings {
  display: none !important;
}

[lopis]

It seems that I can't apply custom styles to the contents of #sidebar which is a pitty. I really wanted to customize the addon itself.

[AlexBeLi]

Also for hiding minimize/maximize/close buttons:

#main-window  {
  -moz-appearance:none !important;
}

[craftycorvid]

I went with this. It works well with macOS and properly hides the title bar when maximized.

@-moz-document url("chrome://browser/content/browser.xul") {
  #titlebar {
    margin-bottom: -10px !important;
  }

  #titlebar-spacer {
    height: 37px;
  }

  #TabsToolbar {
    visibility: collapse !important;
  }

  #sidebar-header {
    visibility: collapse !important;
  }

  #sidebar-splitter {
    border: 0 solid transparent !important;;
  }
}

[Bo-Duke]

Not really the same but I did an "auto-shrink" feature like in the original TC, wanted to share it if anyone is interested :

#tabbrowser-tabs {
    visibility: collapse !important;
}

#sidebar-box {
    overflow-x: hidden;
    min-width: 50px !important;
    max-width: 50px !important;
    transition: all 0.25s ease !important;
}

#sidebar-box:hover {
    min-width: 250px !important;
    max-width: 250px !important;
} 

[lopis]

Maybe add a delay to the transition?

transition: all 0.25s ease 1s !important;

[asciijungle]

as @lopis already pointed out it is not possible to modify the css of the addon itself from userChrome.css since it is rendered in a shadow dom. Is there any other way to customize the styling of the addon without having to build it from source? I'd like to get rid of the newTab button to enlarge the search bar.

[Keith94]

Version 0.4.2 added a custom stylesheet in the options, just install it and add this.

#newtab {
  display: none;
}

[asciijungle]

oh this is awesome. Thank you.

[lkraav]

Not really the same but I did an "auto-shrink" feature like in the original TC, wanted to share it if anyone is interested :

This is terrific, but seems to wiggle the size of the viewport during resize. Can the sidebar be at a different z-index or position level, so it would be on top of the viewport?

[Keith94]

@lkraav See the comment here for a solution: https://github.com/eoger/tabcenter-redux/issues/103#issuecomment-329941346

[lkraav]

Much better, position: fixed trick does the job adequately well for now.

One more q, is it possible to live-edit userChrome? It's quite time consuming to test things via restarting.

[Keith94]

You can preview changes before saving them by following this tutorial: https://github.com/Timvde/UserChrome-Tweaks/issues/4

[schiessle]

#tabbrowser-tabs {
  visibility: collapse !important;
}

This doesn't work for me with Firefox 56 on Debian GNU/Linux. I'm the only one?

[dos1]

[edit] This post is now deprecated, check the updated version on https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks [/edit]

My version for 57, based on some versions above mixed together, with modified background color for nice KDE's Breeze integration. Although I'm using Breeze window decoration, I'm forcing Breeze Dark to Firefox's window for better visual effect. This assumes Photon Dark theme with Compact density set in the browser, and dark theme and compact mode enabled in Tab Center Redux. It also collapses the sidebar to show just the favicons when not hovered and makes icons and hovered buttons brighter to match the dark theme's background.

userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

#main-window {
    --toolbar-bgcolor: #31363b !important;
}

#tabbrowser-tabs {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] {
    overflow: hidden;
    min-width: 32px;
    max-width: 32px;
    position: fixed;
    top: 36px;
    transition: all 0.2s ease;
    border-right: 1px solid #0c0c0d;
    z-index: 2;
}

#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar {
    min-width: 260px !important;
    max-width: 260px !important;
}

#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header, #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] ~ #sidebar-splitter {
    display: none;
}

#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header {
    background-color: #31363b;
    border-bottom: none;
}

/*
 * ADJUST!
 * You need to subtract the height of the panels above sidebar: nav bar,
 * bokmarks bar, sidebar header, etc. -- whichever you have enabled.
 * 
 * 42px subtracted below is the height of the nav bar with default theme.
 * I don't have bookmarks bar enabled, and sidebar header is hidden with
 * CSS above, so this is all I need to do.
 * 
 * Compact theme nav bar height is 29px btw, if you use that.
 */
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar {
    height: calc(100vh - 36px); 
}

#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]:not([hidden="true"]) ~ #sidebar-splitter ~ #appcontent {
    margin-left: 32px;
}

#main-window[inFullscreen] #appcontent {
    margin-left: 0 !important;
}

#main-window[privatebrowsingmode="temporary"] #TabsToolbar, #main-window[inFullscreen] #TabsToolbar {
    background-color: #11161b;
}
#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs, #main-window[inFullscreen] #tabbrowser-tabs {
    visibility: visible !important;
}
#main-window[inFullscreen][inDOMFullscreen] #tabbrowser-tabs {
    visibility: collapse !important;
}
#main-window[inFullscreen] #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] {
    display: none !important;
}
#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), .browserContainer > findbar, #browser-bottombox, #toolbar-menubar {
   background-color: #31363b !important;
}
#nav-bar-customization-target {
   margin: 0px 2px;
}
#window-controls {
   filter: invert(75%);
}
#nav-bar toolbarpaletteitem[id^="wrapper-customizableui-special-spring"], #nav-bar toolbarspring {
   -moz-box-flex: 1 !important;
}
.findbar-button:hover {
    color: #ddd !important;
}
.findbar-button[checked="true"]:not(:hover) {
    color: white !important;
}

Tab Center Redux's custom CSS:

body.dark-theme {
  --tab-background-normal: 210, 9.289%, 21.045% !important;
}
#newtab {
  margin-left: -1px;
}
#newtab-icon {
  margin-right: 8px !important;
}
body.dark-theme #newtab.menuopened, body.dark-theme .topmenu-button:hover {
  background-color: #5a5e62 !important;
  border-color: transparent !important;
}
.tab-close, #newtab-icon, .tab-pin {
  filter: invert(100%);
}
#settings:hover {
  background-color: #a5a19d !important;
}
#settings {
  filter: invert(75%);
}

Now I just need a button to temporarily disable collapsing like in the old Tab Center, slimmer scrollbar and an ability to show pinned tabs always on top (outside of scrolling container - oh, just like #152!) and it will be just perfect! :D

[edit] Updated with fullscreen and private mode support (hiding the sidebar and restoring tabs on top).

[dos1]

BTW. If you use selectors like #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]:not([hidden="true"]), you can apply styling only when Tab Center Redux is active, so all the other sidebars can still work properly. They can be accessed via menu bar (which is made visible after pressing Alt) - View->Sidebar. Unfortunately, the tabbar on top cannot be dynamically hidden/shown that way, but the API for it it being worked on anyway, so whatever :)

The downside is that I think this will only work with official builds - for self-compiled ones the ID would have to be changed.

I've updated my post above, so now the styling gets applied only for Tab Center Redux and all other sidebars work just like they would without styling, on both screen sides :)

[KienVu2368]

@dos1 can i move tab side bar from left to right?

[lopis]

@KienVu2368 that's a feature of Firefox itself - to move the sidebar to the right. WIth the sidebar open, click the sidebar picker (the one where you chose History, Bookmarks, Tabs, etc) and select "Move sidebar to Right"

[dos1]

With my user CSS the sidebar with Tab Center Redux always sticks to the left though. Should be possible to change, but I didn't bother ;)

[lopis]

@dos1 Oh because its position is fixed. @KienVu2368 You can add an exception to your CSS like

#sidebar-box[ordinal="4"] {
  right: 0;
}

The value of the ordinal is 2 when the sidebar is on the left and 4 on the right. This might change soon though.

[eoger]

I recently activated the Wiki feature of the project on Github, you can add your CSS tweaks there (probably better than an issue buried in the issue tracker).

[4i6l]

Is there any way to hide the scrollbar in the sidebar using CSS? I keep a lot of tabs open so the scrollbar is always present for me but I dislike how much space it takes up when I scroll exclusively with the mouse wheel. I knew this was possible with legacy extensions but I'm looking for a solution for FF57 and above.

[Keith94]

@4i6l Here's a CSS "workaround" I came up with on Windows. It's not perfect so if anyone knows a better way, feel free to post it on the Tab Center Redux Wiki.

#tablist-wrapper {
  overflow-x: hidden;
}
#tablist {
  margin-right: -16px;
}
.tab-close {
  margin-inline-start: 147px !important;
  right: auto !important;
}
.tab-title-wrapper::after {
  width: 82px;
}

[SXZ1]

Is it possible to reduce the height of tabs in the sidebar using Tab Center Redux custom stylesheet in about:addons?

[lopis]

Yes. Use CTRL+ALT+I to open the chrome inspector and find which elements you want to change.

Am 18.10.2017 11:54 vorm. schrieb "SXZ1" notifications@github.com:

Is it possible to reduce the height of tabs in the sidebar using Tab Center Redux custom stylesheet in about:addons?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/eoger/tabcenter-redux/issues/118#issuecomment-337532228, or mute the thread https://github.com/notifications/unsubscribe-auth/AClwZxKqnv0SEWe0cK8ejYp3_aHCxRvFks5stcrxgaJpZM4OkL_P .

[schiessle]

This issue contains many interesting css, especially I like the one from @dos1.

But I noticed that all this css changes doesn't apply to firefox if I switch to "private mode". Is there any way to also apply it to private mode? Thanks!

[Keith94]

@SXZ1 Added to wiki, check here: https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks#reduce-the-height-of-tabs

[SXZ1]

@Keith94 Thank you very much! One thing I've noticed: the small scrollbar appears to the right of the open tab when tab height is set to 25px or smaller. No problem with tab height = 26px or bigger.

[Keith94]

I never noticed that problem on my setup. 29px looks about half as tall as the default height.

[eoger]

Closing this, feel free to add CSS hacks in the wiki.

[thebunnyrules]

For anyone that cares for it, I made a small modification to the OP's css to keep the New Tab/Search Tab row while removing the big white row above it:

#tabbrowser-tabs {
  visibility: collapse !important;
}

#sidebar-box {
  overflow-x: hidden;
  min-width: 0 !important;
  width: 5em !important;
  margin-top: -48px;
  transition: margin 0.2s ease-in-out 2s;
}

#newtab-label, #newtab  {
  display: none !important;
}

#settings {
  display: none !important;
}