Firefox styling tweaks

_Firefox Tree Style Tab tweaks.md

UI tweaks Partly needed to make Tree Style tabs look nicer Edit in: [your_ffox_profile_dir]/chrome/userChrome.css

Tree Style tab tweaks: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

Some bugs: Hide top tabs piroor/treestyletab#1349

treestyletab.css

:root {
  --tab-height: 30px;
}

:root tab-item {
  height: var(--tab-height);
}

/* Hide close button when not hovering */
:root #tabbar tab-item tab-item-substance:not(:hover) tab-closebox {
  display: none;
}

/* Put closebox right side, even if I choose "Right side" style */
:root tab-item tab-twisty {
  order: -1;
}
:root tab-item tab-closebox {
  order: 10000;
}

/* Move counter to end */
:root tab-item tab-counter {
  order: 10001;
  min-width: 1.1em;
  text-align: right;
}
/* Hide parenthesis on counter */
:root tab-item tab-counter:before,
:root tab-item tab-counter:after{
  content: "";
}

/* Style unread tabs */
:root tab-item.unread .label {
  font-style: italic;
  opacity: 0.7;
}

/* Hide scrollbar */
:root #tabbar {
  scrollbar-width: none;
}
/* Stop tabs moving for scrollbar */
:root tab-item-substance {
  margin-left: calc(var(--tab-margin-left) + var(--tab-indent));
}



/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "🕶";
}
*/

/* new tab button first */
/* #all-tabs {
  order: 1000;
} */

/* Move new tab button to end?
#tabbar:not(.overflow) .after-tabs {
  display: none;
}
#tabbar:not(.overflow) ~ .after-tabs {
  display: block;
}*/

userChrome.css

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

:root {
    --tab-min-height: 26px;
}

/* Hide horizontal tabs */
/* One day...
:root:has(>>> #sidebar-title[value="Tree Style Tab"]) #TabsToolbar {
  height: 10px;
}
*/
/* Or... Hide "Tree Style Tabs" sidebar header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display:none;
}
#TabsToolbar,
#titlebar-buttonbox {
  height: var(--tab-min-height);
}
.titlebar-placeholder {
  display: none;
}
 .titlebar-button {
  padding-top: 3px;
  height: var(--tab-min-height);
  width: var(--tab-min-height);
} 
#tabbrowser-tabs {
  visibility: collapse;
}

/* Hide dropdown header in sidebar */
#sidebar-header {
  visibility: collapse;
}

userContent.css

@-moz-document url("about:newtab") {
    :root {
        /* force dark theme */
        --newtab-background-color: #2A2A2E;
        --newtab-border-primary-color: rgba(249, 249, 250, 0.8);
        --newtab-border-secondary-color: rgba(249, 249, 250, 0.1);
        --newtab-button-primary-color: #0060DF;
        --newtab-button-secondary-color: #38383D;
        --newtab-element-active-color: rgba(249, 249, 250, 0.2);
        --newtab-element-hover-color: rgba(249, 249, 250, 0.1);
        --newtab-icon-primary-color: rgba(249, 249, 250, 0.8);
        --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
        --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4);
        --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
        --newtab-link-primary-color: #45A1FF;
        --newtab-link-secondary-color: #50BCB6;
        --newtab-text-conditional-color: #F9F9FA;
        --newtab-text-primary-color: #F9F9FA;
        --newtab-text-secondary-color: rgba(249, 249, 250, 0.8);
        --newtab-textbox-background-color: #38383D;
        --newtab-textbox-border: rgba(249, 249, 250, 0.2);
        --newtab-textbox-focus-color: #45A1FF;
        --newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
        --newtab-contextmenu-background-color: #4A4A4F;
        --newtab-contextmenu-button-color: #2A2A2E;
        --newtab-modal-color: #2A2A2E;
        --newtab-overlay-color: rgba(12, 12, 13, 0.8);
        --newtab-section-header-text-color: rgba(249, 249, 250, 0.8);
        --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8);
        --newtab-section-active-contextmenu-color: #FFF;
        --newtab-search-border-color: rgba(249, 249, 250, 0.2);
        --newtab-search-dropdown-color: #38383D;
        --newtab-search-dropdown-header-color: #4A4A4F;
        --newtab-search-icon-color: rgba(249, 249, 250, 0.6);
        --newtab-topsites-background-color: #38383D;
        --newtab-topsites-icon-shadow: none;
        --newtab-topsites-label-color: rgba(249, 249, 250, 0.8);
        --newtab-card-active-outline-color: #4A4A4F;
        --newtab-card-background-color: #38383D;
        --newtab-card-hairline-color: rgba(249, 249, 250, 0.1);
        --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
        --newtab-snippets-background-color: #38383D;
        --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
    }
}

/* New tab group styling*/
@-moz-document regexp("moz-extension://.+/resources/group-tab.html.*") {
    :root {
        background: #2A2A2E !important;
        color: #B9B9B9 !important;
    }
}