一种基于sidebery侧栏插件的Firefox美化方案

Firefox支持高自定义的css自定义，在国外社区多有分享，这里复制了两套代码，以配合sidebery插件实现更大的网页浏览面积。代码非原创，但是有少量删减，这里贴出来源：
https://github.com/refact0r/sidefox/blob/master/userChrome.css

https://www.reddit.com/r/FirefoxCSS/comments/rmi8dg/yet_another_sidebery_setup/

使用效果：

去除书签栏，标签页栏；

使用sidebery侧栏；

更改windows控制按钮（最小化，窗口化，关闭）：

调整纵向标签页间距

使用方法：

在火狐应用市场安装sidebery
在火狐地址栏中输入：about:config；确认；无视风险；输入userprof；更改为true

3. 在火狐右上角菜单栏（三条横线）-帮助-更多排障信息-（下滑）-配置文件夹-打开文件夹

4. 在打开的文件夹中创建命名为chrome的文件夹，在新创建的文件夹，创建userChrome.css（如果没有css编辑器，可以先创建txt文件编辑后改后缀名为txt），复制下面的第一段代码（~~少数派的编辑好难受，链接，图片都不能插文字中间~~），保存。

5.在sidebery 设置-样式编辑器中复制第二段css代码，重启Firefox即可。

userChrome.css代码：

/* Sidebery */
#main-window[titlepreface*="🦊 "] .tabbrowser-tab {
  visibility: collapse !important;
}

#main-window[titlepreface*="🦊 "] .titlebar-button {
  height: 40px !important;
}

#main-window[titlepreface*="🦊 "] #nav-bar {
  margin-top: -40px;
  margin-right: 137px;
  box-shadow: none !important;
}
#main-window[titlepreface*="🦊 "] #titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="🦊 "] #titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="🦊 "] .titlebar-color {
  background-color: var(--toolbar-bgcolor);
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}

/* Add sidebar divider and give it background */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}

#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}




:root {
	--navbar-height: 48px;
	--wc-height: 16px;
	--wc-left-margin: 10px;
	--wc-red: hsl(-10, 90%, 60%);
	--wc-yellow: hsl(50, 90%, 60%);
	--wc-green: hsl(160, 90%, 40%);
	--sidebar-collapsed-width: var(--navbar-height);
	--sidebar-width: 250px;
	--transition-duration: 0.2s;
	--transition-ease: ease-out;
}

/* hide tabline */
#navigator-toolbox {
	-moz-window-dragging: drag;
}

#titlebar {
	appearance: none !important;
}

#TabsToolbar .toolbar-items {
	display: none !important;
}

#TabsToolbar.browser-toolbar {
	display: block !important;
	position: absolute;
	right: 0;
	top: calc((var(--navbar-height) - var(--wc-height)) / 2);
}

#nav-bar {
	margin-right: calc(var(--wc-height) * 6 + var(--wc-left-margin));
	padding: calc((var(--navbar-height) - 40px) / 2) 0;
}

#urlbar {
	--urlbar-toolbar-height: 40px !important;
	z-index: 200 !important;
}

#private-browsing-indicator-with-label {
	display: none !important;
}

.titlebar-button > .toolbarbutton-icon {
	visibility: hidden;
}

.titlebar-button {
	padding: 0 !important;
	height: var(--wc-height) !important;
	min-height: var(--wc-height) !important;
	width: var(--wc-height) !important;
	min-width: var(--wc-height) !important;
	border-radius: 50%;
	opacity: 0.7 !important;
}

.titlebar-button:hover {
	transform: scale(1.1);
	opacity: 1 !important;
	cursor: pointer;
}

.titlebar-buttonbox {
	display: flex;
	margin-right: var(--wc-height);
	gap: var(--wc-height);
}

.titlebar-close {
	background: var(--wc-red) !important;
}

.titlebar-min {
	background: var(--wc-yellow) !important;
}

.titlebar-max,
.titlebar-restore {
	background: var(--wc-green) !important;
}

/* hide sidebar header */
#sidebar-box[sidebarcommand='treestyletab_piro_sakura_ne_jp-sidebar-action']
	#sidebar-header {
	display: none;
}

#sidebar-box {
	z-index: 100 !important;
	position: relative !important;
	min-width: var(--sidebar-collapsed-width) !important;
	max-width: var(--sidebar-collapsed-width) !important;
}

sidebery css代码：

#root {
  --tabs-font: 10pt Segoe UI;
  --tabs-count-font: .625rem Segoe UI;
  --bookmarks-bookmark-font: .875rem Segoe UI;
  --bookmarks-folder-font: 10pt Segoe UI;
}
 
/* Adjust styles according to sidebar width */
@media screen and (max-width: 49px) {
  #root {
    --tabs-indent: unset;
  }
  .ScrollBox > .scroll-container {
    overflow: hidden;
  }
  .Tab .audio {
    left: 10px;
    transform: scale(.80);
    transform: translateY(4px);
    z-index: 99 !important;
  }
  .Tab .title {
    visibility: collapse;
  }
}
 
@media screen and (min-width: 49px) {
  .Tab .audio {
    left: 28px;
  }
}
 
/*
 * Add margins and rounding around tabs
 */ 
 
#root {
  --tabs-height: 33px;
}
 
/* Background layer */
 
.Tab {
  margin: 0 4px;
  width: unset;
}
.Tab .lvl-wrapper:after {
  content: '';
  position: absolute;
  top: 4px;
  width: 100%;
  height: calc(100% - 5px);
  border-radius: 4px;
  z-index: -1;
}
 
@media (prefers-color-scheme:light) {
  #root {
    --tabs-activated-bg: white !important;
    --tabs-bg-active: var(--tabs-activated-bg) !important;
    --tabs-selected-fg: var(--tabs-activated-fg) !important;
    --tabs-selected-bg: var(--tabs-activated-bg) !important;
    --bg: #f0f0f0 !important;
  }
  .Tab[data-selected] .lvl-wrapper:after,
  .Tab[data-active] .lvl-wrapper:after {
    box-shadow: 0 0 1px rgba(128,128,142,0.9), 0 0 4px rgba(128,128,142,0.5);
  }
}
 
 
/* Reset default styles */
.Tab:hover,
.Tab:active,
.Tab[data-active],
.Tab[data-active]:active,
.Tab[data-selected],
.Tab[data-selected]:hover,
.Tab[data-selected]:active {
  background: transparent;
}
 
/* Reapply styles */
 
.Tab:hover .lvl-wrapper:after {
  background-color: var(--tabs-bg-hover);
}
 
.Tab:active .lvl-wrapper:after,
.Tab[data-active]:active .lvl-wrapper:after {
  background-color: var(--tabs-bg-active);
}
 
.Tab[data-active] .lvl-wrapper:after {
  background-color: var(--tabs-activated-bg);
}
 
 
.Tab[data-selected] .lvl-wrapper:after {
  background-color: var(--tabs-selected-bg);,
}
 
/* Resize and reposition favicons */
.Tab .fav {
  width: 18px;
  height: 18px;
  margin-left: 10px;
}
 
.Tab .placeholder > svg {
  width: 18px;
  height: 18px;
}
 
.Tab .fav,
.Tab .placeholder,
.Tab .t-box {
  margin-bottom: -2px;
}

本文可随意转载。