Firefox 自定义CSS界面

以下代码可适用于 Firefox 89 及更新版本

书签栏自动隐藏一:

/*书签栏自动隐藏 鼠标放在标签栏上时不显示书签栏*/
#PersonalToolbar {
      display: block;
      z-index: 1;
      transform: perspective(1000px) rotateX(-90deg);
      transform-origin: top !important;
      visibility: hidden !important;
      padding:3px 2px 2px !important; /* 三个数值分别为书签栏与地址栏间隔 书签栏与窗口左边界间隔 书签图标与书签栏最底部间隔 */
      height:auto !important;
      width: 100% !important;
      position: fixed !important;
      opacity: 0;
      -moz-transition:  .1s ease-out !important;
      -moz-transition-delay: 0.3s!important;      /* 设置多少秒bookmark消失 */
    }
    #nav-bar:hover ~ #PersonalToolbar,#PersonalToolbar:hover /* 地址栏+标签栏为#navigator-toolbox:hover > */
    {
      z-index: 1;
      transform: rotateX(0deg);
      visibility: visible !important;
      opacity: 1;                               /* 动画基于此参数 */
      -moz-transition: .1s ease-in !important;
      -moz-transition-delay: 0.1s!important;     /* 设置多少秒后延迟出现 */
    }


书签栏自动隐藏二:

/*书签栏自动隐藏 鼠标放在标签栏上时显示书签栏*/
#PersonalToolbar {
        display: block;
        z-index: 1;
        margin: 0 !important;
}

#PersonalToolbar {
        margin-top: 1px !important;
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        width: 100% !important;
        -moz-transition: .2s ease-in !important;
        -moz-transition-delay: .2s !important;
}

#navigator-toolbox:hover>#PersonalToolbar {
        max-height: 30px !important;
        min-height: 20px !important;
        margin: 0 !important;  /* 不显示书签栏与地址栏的边界线条 */
        -moz-transition: .2s ease-out !important;
        -moz-transition-delay: .2s !important;
}

标签栏:设置标签高度

#titlebar,#tabbrowser-tabs {
	--tab-min-height: 30px !important;
}

标签栏:设置标签最大最小宽度

.tabbrowser-tab[fadein]:not([pinned]) {
	max-width: 150px !important;
	min-width: 80px !important;
}

标签栏:设置标签颜色

/* 活动标签背景色设置 */
.tab-background[selected="true"] {
	background: #E1EAEF !important;
}

/*非活动标签和标签栏背景色设置为灰色 与FF 88版非聚焦状态下的标签栏背景色一致 */
#TabsToolbar {
    background-color: #C7C7C7;
}
#TabsToolbar:-moz-window-inactive {
    color: black; 
    background-color: #C7C7C7;
}

标签栏:标签页添加分隔线

.tab-stack::before{
  content: "";
  width: 1px;
  height: 50%;
  background-color: #aaa;
  position: absolute;
  top: 25%;
  left: -3px;
}
tab:first-child > .tab-stack::before,
.tabbrowser-tab[visuallyselected=true] > .tab-stack::before,
.tabbrowser-tab[visuallyselected=true] + tab >.tab-stack::before{
  background-color: transparent;
}
tab.tabbrowser-tab{
  padding-left: 3px !important;
  padding-right: 2px !important;
}

标签栏:设置标签关闭按钮

/*当前标签显示关闭按钮*/
.tabbrowser-tab:not([selected]) .tab-close-button {
	display: none!important;
}/*非当前页关闭按钮自动隐藏*/
.tabbrowser-tab .tab-close-button {
	display: none!important;
}/*所有页关闭按钮自动隐藏*/
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
	display: inherit!important;
}/*鼠标移动上去显示*/

标签栏:减少左侧标签与窗口左边界的间隙

.titlebar-spacer[type="pre-tabs"] {
  width: 5px !important; /* Original: 40px */
}
.titlebar-spacer[type="post-tabs"] {
  width: 25px !important; /* Original: 40px */
}

URL 地址栏:设置地址栏边框为蓝色

#urlbar[focused] > #urlbar-background{ border-color: #4F8AEF !important; }

URL 地址栏:设置地址栏文字大小和字体

#nav-bar {
	-moz-appearance: none !important;
	font-size: 95% !important;
	font-family: Segoe UI,Tahoma,Microsoft Yahei, Arial, Helvetica, sans-serif !important;
}

URL 地址栏:隐藏隐私跟踪图标

#tracking-protection-icon-container {
	display: none !important;
}

URL 地址栏:设置https加密锁图标大小

#identity-icon {
	padding: 1px !important;
}

URL 地址栏:设置地址栏高度

#urlbar, #searchbar {
	--urlbar-height: 28px !important;
	min-height: var(--urlbar-height) !important;
	padding-right: 2px !important;
}

URL 地址栏:设置地址栏边框为圆角

#urlbar-background, #searchbar {
	box-shadow: none !important;
	border-radius: 8px !important;
}

URL 地址栏:关闭地址栏自动放大功能

#urlbar[breakout][breakout-extend] {
	width: 100% !important;
	padding: 0px !important;
}

#urlbar[breakout][breakout-extend][open] {
	box-shadow: 0px 4px 8px rgb(0,0,0,0.2) !important;
	border-radius: 8px !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
	animation: none !important;
	;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
	box-shadow: none !important;
}

书签栏:设置书签字体大小

#PersonalToolbar, 
#PersonalToolbar menuitem,
#PersonalToolbar menu {
  font-size: 8.5pt !important; /* 9pt为默认大小 */
}

书签栏:设置书签行间距

/* Firefox 89 版本的书签行间距过大 可自行设置间距 */
:root {
  --menu-padding: 0.15em;
}
:root[uidensity=compact] {
  --menu-padding: 0.1em;
}
:root[uidensity=touch] {
  --menu-padding: 0.2em;
}

Firefox 89 使用 Windows Accent Color 窗口主题

Firefox 89 开始,使用了新的 Proton 主题界面,色彩单一,标签窗口和地址栏框不再跟随 Windows Color 的变化而改变,以下代码可以实现窗口色彩跟随 Windows Color。

  /** System Default Theme ****************************************************/
  /*= Common - URL Bar focus color ===========================================*/
  @media (-moz-windows-accent-color-in-titlebar),
         (-moz-gtk-csd-available) {
    /* URL Bar */
    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
      --focus-outline-color: -moz-accent-color !important;
    }

    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
      border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */
    }
  }

  /*= Windows7 - Aero Based Theme ============================================*/
  @media (-moz-os-version: windows-win7) {
    #TabsToolbar:not(:-moz-lwtheme) {
      --background-color: rgb(229, 229, 235);
    }
    #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
      color: var(--background-color);
      background-color: color-mix(in srgb, currentColor 60%, transparent);
    }
    #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
      background-color: color-mix(in srgb, currentColor 85%, transparent) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
    }
    #scrollbutton-up:not(:-moz-lwtheme),
    #scrollbutton-down:not(:-moz-lwtheme),
    #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
    #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
      color: var(--background-color) !important;
      background-color: color-mix(in srgb, currentColor 50%, transparent);
    }
  }

  /*= Windows10 - Titlebar accent color ======================================*/
  @media (-moz-windows-accent-color-in-titlebar) {
    /* Tab Bar */
    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
      color: -moz-accent-color-foreground;
      background-color: -moz-accent-color;
    }

    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
      --toolbarbutton-icon-fill: currentColor;
      --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
      --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
    }
  }

  /*= GTK - URL View url accent color ========================================*/
  @media (-moz-gtk-csd-available) {
    :root:not(:-moz-lwtheme) .urlbarView-url {
      --urlbar-popup-url-color: -moz-accent-color;
    }

    /* Nightly Compatibility */
    :root:not(:-moz-lwtheme) #urlbar {
      --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1)  */
      --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
    }
  }
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇