Firefox Config

Firefox Config.md

Firefox Config

These are my various configs for Firefox.

• Sideberrry custom style
• TreeStyleTabs custom style
• userChrome style

sidebery.css

/* Styles */
#root {
  --bg: #0a1e20ff;
  --tabs-bg-hover: #23545eff;
  --tabs-activated-bg: #760392aa;
}

/* Change styling of pending (unloaded) tabs */
.Tab[data-discarded] {
  opacity: 0.75;
}
.Tab[data-discarded] .title {
  font-style: italic;
}

/* Change styling of unread tabs */
.Tab[data-unread] {
  background-color: #e64b82aa;
}
.Tab[data-unread] .title {
  font-weight: bold;
  color: #5c1e34;
}

treestyle-tabs.css

/* Change styling of pending (unloaded) tabs */
tab-item.discarded tab-item-substance {
  opacity: 0.5;
}
tab-item.discarded .label-content {
  font-style: italic;
}

/* Change styling of unread tabs */
tab-item.unread tab-item-substance {
  background-color: #e64b82;
}
tab-item.unread .label-content {
  font-weight: bold;
}

/* Highlight active tab */
tab-item.active .background {
  background-color: steelblue;
}
tab-item.active .label-content {
  font-weight: bold;
  font-size: 14px;
}

/* This makes the hovered tab noticeable by modifying the color */
tab-item tab-item-substance:hover {
  background: #193B99 !important;
  opacity: 1;
}

/* Make container marker more visible */
.contextual-identity-marker {
  width: 5px !important;
}

userChrome.css

/* Remove min and max width limitations from sidebars */
#sidebar {
  max-width: none !important;
  min-width: 0px !important;
}

/* You can modify the sidebar-box selector to only target a specific sidebar as below:
 * #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
 *
 * Some sidebar ids are:
 * Sidebery: _3c078156-979c-498b-8990-85f7987dd929_-sidebar-action
 * Tree Style Tab: treestyletab_piro_sakura_ne_jp-sidebar-action
 */

/* Hide splitter which is the part separating sidebar from rest of the content */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}

/* Hide sidebar header. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered */
:root {
  --sidebar-collapsed-width: 40px;
  --sidebar-expanded-width: 300px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
  min-width: var(--sidebar-expanded-width) !important;
  max-width: none !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: var(--sidebar-expanded-width) !important;
  max-width: var(--sidebar-expanded-width) !important;
  z-index: 1;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 100ms !important;
  min-width: var(--sidebar-collapsed-width) !important;
  max-width: var(--sidebar-collapsed-width) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  overflow: hidden !important;
  transition: all 200ms !important;
  min-width: var(--sidebar-expanded-width) !important;
  max-width: var(--sidebar-expanded-width) !important;
  margin-right: calc((var(--sidebar-expanded-width) - var(--sidebar-collapsed-width)) * -1) !important;
  z-index: 1;
}

/*
 * Hide entire title bar when Sidebery is active (also hides the window control buttons)
 * Set Sidebery settings > Help > Preface value to the same value as used for titlepreface.
 */
#main-window[titlepreface*="[Sidebery] "] #TabsToolbar {
  visibility: collapse !important;
}