Skip to content

CSS Tweaks ─ zTCR v0.6.0

Jump to bottom
James edited this page Apr 26, 2019 · 3 revisions

File Menu Items

Show/Hide CSS 
menupopup:not([id="BMB_bookmarksPopup"]),#BMB_bookmarksPopup menupopup[placespopup=true] > hbox 
{
    background-color:#064e9d!important
}

For Tab Center Redux(Z)

Note: Download Tab Center Redux(Z) 0.6.0 ─ CSS displays improperly with later versions.

Tab Center Redux tweaks

To add custom CSS, open the extension's preferences page by either:

  • Clicking on the gear icon in the sidebar.
  • Or navigating to about:addons then clicking on the Tab Center Redux Options button.

You will find the Custom CSS at the bottom of that page.

Change styling of unread tabs #283

Show/Hide CSS 
.tab[notselectedsinceload="true"] {
  font-style: italic;
}

Reduce the dimming of unloaded/discarded tabs

Show/Hide CSS 
.tab.discarded .tab-title {
    opacity: 0.65; /* default is 0.5 */
}
.tab.discarded .tab-meta-image {
    opacity: 0.6; /* default is 0.45 */
}

Use reversed tab order #202

Show/Hide CSS 
#tablist {
  flex-direction: column-reverse;
  display: flex;
  flex: 0 0 auto;
}
.tab.pinned {
  order: 1;
}

Reduce height of tabs in compact mode

Show/Hide CSS 
#tablist-wrapper.shrinked .tab:not(.pinned) {
  height: 29px !important;
}

Add white outline around favicons (dark theme)

Show/Hide CSS 
body.dark-theme .tab .tab-icon {
  filter: url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="s"><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.2125 -0.7154 -0.0721 1 0" /><feMorphology operator="dilate" radius="1"/><feComponentTransfer><feFuncA type="gamma" offset="0" amplitude="1" exponent="2"/></feComponentTransfer><feGaussianBlur stdDeviation="0.5"/><feComposite in="SourceGraphic" operator="over"/></filter></svg>#s');
}

Change colors of icon border + bg, thumbnail border + bg

Demonstration of less-bright icon/border colors on a dark theme

Show/Hide CSS 
/* color for icon border + transparent icon bg */
#tablist-wrapper:not(.shrinked) #tablist .tab-icon-wrapper,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact){
  background-color: silver;
}

/* color for thumbnail border */
#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail {
    border: 2px solid silver;
}

/* color for thumbnail bg color */
#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image  {
  background-color: #38383D;
}

Hide scrollbar

Show/Hide CSS 
#tablist-wrapper {
  scrollbar-width: none;
}

Autohide scrollbar

Show/Hide CSS 
.tab {
  max-width: 100vw;
}
#tablist {
  margin-right: -19px; /* Value from KDE's Breeze theme; adjust as needed */
  transition: margin-right 0s 1s;
}
#tablist:hover {
  margin-right: 0px;
  transition: margin-right 0s 4s;
}
#tablist-wrapper {
  overflow-x: hidden;
}

For Firefox 64 and ulterior, with no animation (hiding of scrollbar can’t be animated with scrollbar-width):

Show/Hide CSS 
#tablist {
  scrollbar-width: none;
}
#tablist:hover {
  scrollbar-width: auto;
}

Move scrollbar to the left

Show/Hide CSS 
#tablist {
  direction: rtl;
}
.tab {
  direction: ltr;
}

Make scrollbar thinner

Show/Hide CSS 
#tablist {
  scrollbar-width: thin;
}

Hide tab close button #363

Show/Hide CSS 
/* Hide close button */
.tab-close {
  display: none;
}
/* Fix title gradient */
.tab:hover:not(.pinned) > .tab-title-wrapper {
  mask-image: linear-gradient(to left, transparent 0, black 2em);
}

Hide tab loading burst

Show/Hide CSS 
.tab-loading-burst {
  display: none;
}

Hide tab context menu items (#93)

Show/Hide CSS 
.contextmenu li:nth-child(01), /* Reload Tab */
.contextmenu li:nth-child(02), /* Mute Tab */
.contextmenu li:nth-child(04), /* Pin Tab */
.contextmenu li:nth-child(05), /* Duplicate Tab */
.contextmenu li:nth-child(06), /* Move to New Window */
.contextmenu li:nth-child(08), /* Reload All Tabs */
.contextmenu li:nth-child(09), /* Close Tabs Underneath */
.contextmenu li:nth-child(10), /* Close Other Tabs */
.contextmenu li:nth-child(12), /* Undo Close Tab */
.contextmenu li:nth-child(13) /* Close Tab */
{
display: none;
}

Hide attention indicator on pinned tabs

Show/Hide CSS 
.tab.pinned.wants-attention {
  background-image: none !important;
}

Hide muted audio icon (keeps it clickable, good for Mute Sites by Default)

Show/Hide CSS 
/* Hide in fullsize mode */
#tablist-wrapper .tab-icon-overlay.muted {
  opacity: .0;
}

/* Hide in compact mode */
#tablist-wrapper.shrinked .tab-icon-overlay.muted {
  opacity: .0;
}

Hide top menu (New Tab/Search)

Show/Hide CSS 
#topmenu {
  display: none;
}

Hide New Tab button

Show/Hide CSS 
#newtab {
  display: none;
}

Hide New Tab button label

The button is still present, but is reduced to just the the plus icon.

Show/Hide CSS 
#newtab-label {
  display: none;
}

userChrome.css tweaks

To use the following tweaks, first:

  1. Navigate to about:support and open your profile folder.
  2. Create a file called userChrome.css in a directory called chrome.

You can then add your desired tweaks to the file.

Hide the horizontal tab strip #15

Step 1

Add the following CSS to your userChrome.css file.

Show/Hide CSS 
#main-window:not([customizing]):not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse;
}
#navigator-toolbox {
  margin-top: 1px;
}

Step 2

Navigate to about:config and toggle browser.tabs.drawInTitlebar to false.

Show tab strip if menu bar is visible

Show/Hide CSS 
#toolbar-menubar[inactive="true"] + #TabsToolbar {
  visibility: collapse !important;
}

Hide sidebar with only one tab open

Step 1

Show/Hide CSS 
#main-window[titlepreface^="[1] "] #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] {
  visibility: collapse;
}

Step 2

Install the Tab Count in Window Title extension.

Hide sidebar header

Show/Hide CSS 
#sidebar-box #sidebar-header {
  visibility: collapse;
}

For Tab Center Redux only:

Show/Hide CSS 
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

Reduce height of sidebar header

Show/Hide CSS 
#sidebar-box #sidebar-header * {
  margin-top: -3px !important;
  margin-bottom: -3px !important;
}

Move sidebar header to the bottom

Show/Hide CSS 
#sidebar-box {
  -moz-box-direction: reverse;
}
#sidebar-switcher-arrow {
  transform: rotate(180deg);
}

Sidebar header improvements for dark theme #244

Show/Hide CSS 
#sidebar-header {
  background: #0C0C0D;
  border-bottom: none !important;
}
#sidebar-splitter {
  border-right-color: #0C0C0D !important;
  border-left-color: #0C0C0D !important;
}
#sidebar-switcher-target,
#sidebar-close {
  filter: invert(100%);
}

Set maximum width of the sidebar

Show/Hide CSS 
#sidebar-box {
  max-width: 192px;
}

Floating auto-shrinking sidebar #103 (video preview)

Show/Hide CSS 
/* Windows users might also want to consider setting
 * browser.tabs.drawInTitlebar to false in about:config
 */

#TabsToolbar {
  visibility: collapse !important;
}

#sidebar-box {
  overflow: hidden;
  min-width: 4vw;
  max-width: 4vw;
  position: fixed;
  transition: all 0.2s ease;
  border-right: 1px solid #ddd;
}

#sidebar-box:hover,
#sidebar-header,
#sidebar {
  min-width: 20vw !important;
  max-width: 20vw !important;
}

#sidebar-header,
#sidebar-splitter {
  display: none;
}

/*
 * ADJUST!
 * You need to subtract the height of the panels above sidebar: nav bar,
 * bokmarks bar, sidebar header, etc. -- whichever you have enabled.
 * 
 * 43px 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 nav bar height is 37px btw, if you use that.
 */
#sidebar {
  height: calc(100vh - 43px);
}

#sidebar-box:not([hidden]) ~ #appcontent {
  margin-left: 4vw;
}

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

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}

Complete look'n'feels

JZersche's zDark Theme

A dark theme with azure accents with autoshrinking sidebar showing just the favicons, hidden scrollbar. Mozilla Firefox 57.0b11 (Developer Edition)

Visit JZersche's zTCR Wiki Page for more information.

Note: Use Tab Center Redux 0.6.0 ─ CSS displays improperly with later versions.

This theme assumes that you use Firefox 57+ with the Dark theme enabled, In the Tab Center Redux's settings, Enable the dark theme, and set Compact to 'Always'.

NEW UPDATE! | Use the new userChrome.css here instead:
NEW userChrome.css

Update 2019-4-26 | Tested and Working with Firefox Nightly 57.0b11 ─> 67.0b15 May work with older/newer versions also.

Install

Flat | Modern | Modern (Large Tabs)


Note: Close tabs by moving the cursor to the end of the tab and clicking. The close tab button is hidden.

JZersche's Dark Context Menus

Show/Hide Info Changes the Context Menus to match the Dark Theme.
**2018-03-06 | Tested and Working with Firefox Developer Edition 60.0b1**

Install (Opaque) | (Transparency) | (Blue) | (RGB Easy Edit)
Use the RGB Version if you want to set your own colors.

Hide Right-Click Context Menu Icons

#contentAreaContextMenu > :-moz-any(menuitem,menu) > .menu-iconic-left {visibility:hidden!important;}
Add this to your userChrome.css file.

Note: This only hides icons on the right-click menu.

--uc-light-bkgnd-color:#31363b; ─ Determines Context Menu Background Color.
Use #064e9d for Blue ─ Add 99 to the end for transparency.
Use #31363b for Dark ─ Add 99 to the end for transparency.

Clone this wiki locally