Custom userChrome.css for hiding tabstrip and other things #118

lopis · 2017-07-26T16:42:12Z

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;
}

The text was updated successfully, but these errors were encountered:

lopis · 2017-07-27T09:37:28Z

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 · 2017-07-28T17:12:03Z

Also for hiding minimize/maximize/close buttons:

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

craftycorvid · 2017-08-09T21:18:55Z

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 · 2017-08-10T13:13:02Z

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 · 2017-08-11T07:07:16Z

Maybe add a delay to the transition?

transition: all 0.25s ease 1s !important;

asciijungle · 2017-09-25T18:18:02Z

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 · 2017-09-25T19:43:58Z

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

#newtab {
  display: none;
}

asciijungle · 2017-09-25T20:10:22Z

oh this is awesome. Thank you.

lkraav · 2017-09-26T20:32:07Z

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 · 2017-09-26T20:44:26Z

@lkraav See the comment here for a solution: #103 (comment)

lkraav · 2017-09-26T21:06:14Z

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 · 2017-09-26T21:15:14Z

You can preview changes before saving them by following this tutorial: Timvde/UserChrome-Tweaks#4

schiessle · 2017-09-29T22:02:57Z

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

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

dos1 · 2017-09-30T19:25:05Z

[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 · 2017-10-01T17:04:09Z

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 :)

While pinned tabs being outside of scrolling container are awesome, for old Tab Center-like configurations with autoshrinking sidebar the presentation of many tabs in one row is actually an antifeature. This PR makes it configurable, so custom userChrome.css configs like in eoger#103 or eoger#118 that restore old behavior can work properly. Also, the thumbnail reseting has been removed. This fixes a newly introduced issue of unpinned tab not having its thumbnail updated. While this could be fixed in other way, disabling thumbnail generation for pinned tabs is not desired when compact pins are disabled anyway.

KienVu2368 · 2017-10-04T01:24:51Z

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

lopis · 2017-10-04T06:37:09Z

@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 · 2017-10-04T10:28:31Z

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 · 2017-10-04T11:45:08Z

@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 · 2017-10-07T17:00:19Z

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 · 2017-10-08T13:49:32Z

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 · 2017-10-08T22:34:38Z

@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 · 2017-10-18T09:54:56Z

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

lopis · 2017-10-18T09:56:46Z

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" <[email protected]>:

…

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 <#118 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AClwZxKqnv0SEWe0cK8ejYp3_aHCxRvFks5stcrxgaJpZM4OkL_P> .

schiessle · 2017-10-18T19:32:39Z

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 · 2017-10-18T21:38:22Z

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

SXZ1 · 2017-10-19T09:59:40Z

@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 · 2017-10-19T16:00:48Z

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

eoger · 2017-11-14T02:53:10Z

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

thebunnyrules · 2017-12-18T10:09:53Z

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;
}

lopis changed the title ~~Custom userChrome.css~~ Custom userChrome.css for hiding tabstrip and other things Jul 27, 2017

This was referenced Oct 1, 2017

Make compact (many in one row) pinned tabs configurable. #177

Closed

Why can't Tab Center continue to be used? #161

Closed

eoger closed this as completed Nov 14, 2017

thebunnyrules mentioned this issue Dec 18, 2017

unmaximized firefox startup bug resulted from using #tabbrowser-tabs { visibility: collapse;} in userStyle.css + alternative #287

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom userChrome.css for hiding tabstrip and other things #118

Custom userChrome.css for hiding tabstrip and other things #118

lopis commented Jul 26, 2017 •

edited

Loading

lopis commented Jul 27, 2017

AlexBeLi commented Jul 28, 2017

craftycorvid commented Aug 9, 2017

Bo-Duke commented Aug 10, 2017

lopis commented Aug 11, 2017

asciijungle commented Sep 25, 2017

Keith94 commented Sep 25, 2017

asciijungle commented Sep 25, 2017

lkraav commented Sep 26, 2017

Keith94 commented Sep 26, 2017

lkraav commented Sep 26, 2017

Keith94 commented Sep 26, 2017

schiessle commented Sep 29, 2017

dos1 commented Sep 30, 2017 •

edited

Loading

dos1 commented Oct 1, 2017

KienVu2368 commented Oct 4, 2017 •

edited

Loading

lopis commented Oct 4, 2017

dos1 commented Oct 4, 2017

lopis commented Oct 4, 2017 •

edited

Loading

eoger commented Oct 7, 2017

4i6l commented Oct 8, 2017

Keith94 commented Oct 8, 2017

SXZ1 commented Oct 18, 2017

lopis commented Oct 18, 2017 via email

schiessle commented Oct 18, 2017

Keith94 commented Oct 18, 2017

SXZ1 commented Oct 19, 2017

Keith94 commented Oct 19, 2017

eoger commented Nov 14, 2017

thebunnyrules commented Dec 18, 2017

Custom userChrome.css for hiding tabstrip and other things #118

Custom userChrome.css for hiding tabstrip and other things #118

Comments

lopis commented Jul 26, 2017 • edited Loading

lopis commented Jul 27, 2017

AlexBeLi commented Jul 28, 2017

craftycorvid commented Aug 9, 2017

Bo-Duke commented Aug 10, 2017

lopis commented Aug 11, 2017

asciijungle commented Sep 25, 2017

Keith94 commented Sep 25, 2017

asciijungle commented Sep 25, 2017

lkraav commented Sep 26, 2017

Keith94 commented Sep 26, 2017

lkraav commented Sep 26, 2017

Keith94 commented Sep 26, 2017

schiessle commented Sep 29, 2017

dos1 commented Sep 30, 2017 • edited Loading

dos1 commented Oct 1, 2017

KienVu2368 commented Oct 4, 2017 • edited Loading

lopis commented Oct 4, 2017

dos1 commented Oct 4, 2017

lopis commented Oct 4, 2017 • edited Loading

eoger commented Oct 7, 2017

4i6l commented Oct 8, 2017

Keith94 commented Oct 8, 2017

SXZ1 commented Oct 18, 2017

lopis commented Oct 18, 2017 via email

schiessle commented Oct 18, 2017

Keith94 commented Oct 18, 2017

SXZ1 commented Oct 19, 2017

Keith94 commented Oct 19, 2017

eoger commented Nov 14, 2017

thebunnyrules commented Dec 18, 2017

lopis commented Jul 26, 2017 •

edited

Loading

dos1 commented Sep 30, 2017 •

edited

Loading

KienVu2368 commented Oct 4, 2017 •

edited

Loading

lopis commented Oct 4, 2017 •

edited

Loading