首页>Firefox 专区>Firefox 主题外观>自用火狐外观样式 userChrome.css （更新20...
回复
« 返回列表
晓仙玄
晓仙玄
火狐狸
火狐狸
  • UID46339
  • 注册日期2014-06-12
  • 最后登录2025-10-23
  • 发帖数110
  • 经验134枚
  • 威望0点
  • 贡献值110点
  • 好评度11点
写私信
  • 社区居民
  • 忠实会员
阅读：5107回复：3

自用火狐外观样式 userChrome.css （更新20250617）

楼主#
更多 发布于：2024-04-21 22:09 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
#PersonalToolbar{
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
  --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
   
  /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
  --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
  --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}
 
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
 
#PersonalToolbar:not([customizing]){
  position: relative;
  margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 1;
  /* The following properties should allow the themes with trasparent toolbars to work */
  background-color: transparent !important;
  background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
    /* y position will be wrong if menubar is enabled... */
  --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding));
  background-position: top left,top left,var(--lwt-background-alignment,top left);
  background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
  background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
}
:root[uidensity="compact"] #PersonalToolbar{
  --toolbarbutton-outer-padding: 1px !important;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
  padding-block: var(--uc-bm-padding) !important;
}
 
#nav-bar:focus-within + #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
#navigator-toolbox:is(:hover,:focus-within){
  border-bottom-color: transparent !important;
}
#navigator-toolbox:hover > #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
 
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {  
  transform: rotateX(0);
}
#navigator-toolbox{
  --browser-area-z-index-toolbox: 4;
}
/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */
/*
#PersonalToolbar:not([customizing]){
  min-height: 0 !important;
  margin-bottom: 0;
  height: 0;
  overflow-y: visible !important;
  z-index: 2;
  padding-inline: 0 !important;
}
#personal-bookmarks{
  background: inherit;
  height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
  pointer-events: none !important;
}
*/
/*=====================================================================================标签栏==========*/
/**************缩小标题栏*******************/
:root {
  /* 标签边距Tabbar: reduce tab margin */
  --tab-block-margin: 5px 0px !important;}
/* 标题栏高度Tab: Ensure tab height doesn't augment when arrowscrollbox is visible  */ 
#tabbrowser-arrowscrollbox {
  --tab-min-height: 30px !important;max-height: var(--tab-min-height);}
/*隐藏标签栏左右空白*/
.titlebar-spacer { display: none !important; }
/*---去掉标题栏顶部1px---*/
#tabbrowser-tabs{margin-top:-4px !important;}
/*当前标签显示关闭按钮*/
.tabbrowser-tab:not([selected]) .tab-close-button{display:none!important;}
/*非当前页关闭按钮自动隐藏*/
.tabbrowser-tab:not([pinned]):hover .tab-close-button{display:inherit!important;}
/*隐藏标签栏与工具栏之间的黑线*/
#nav-bar{ border: none !important }
/*隐藏，列出所有选项卡按钮*/
/*#alltabs-button { display: none !important; }*/
/*==标签计数==*/
/*==[pinned]控制固定标签页计数=*/
#main-window {counter-reset: tabs;}
.tabbrowser-tab:not(:is([concealed])) {counter-increment: tabs;}
#alltabs-button {visibility: visible!important;}
#alltabs-button:after {
    content: counter(tabs);
    font-size: 14pt !important;
    display: -moz-box;}
#alltabs-button >*> :is(label, image) {display: none;}
#alltabs-button menuitem {max-width: 200px !important;}
/*====================================================================================工具栏调整========*/
/*地址栏上下位置*/
:root #nav-bar {
  margin-top  : 1px !important;
  height      : 28px !important;
}
/*地址栏到顶部距离*/
#TabsToolbar {margin-bottom: -3px !important;}
/*固定搜索栏最大宽度*/
#search-container, #searchbar
{max-width:200px !important;} 
/*隐藏地址栏书签图标*/
#star-button-box{
  margin-inline: calc((16px + var(--urlbar-icon-padding) * 2) / -2) !important;
  opacity: 0;
  pointer-events: none;
}
/*===========================================================================隐藏右键菜单================*/
#context-undo,/*撤销*/
#context-redo,/*重做*/
#context-openlink,/*在新窗口中打开*/
#context-openlinkprivate, /*在新的隐私浏览视窗*/
#context-viewpartialsource-selection,/*查看选中部分源代码*/
#context-viewsource,/*查看页面源代码*/
/*分隔线*/
/***blank-context.css：右键单击空白区域时***/
#context-navigation,/*四个按钮*/
#context-forward, /*前进*/
#context-back, /*后退*/
#context-reload, /*刷新*/
#context-stop, /*停止*/
#context-bookmarkpage, /*此页面加入书签*/
#context-savepage,/*网页另存为*/
#context-take-screenshot,/*截屏*/
#context-inspect-a11y,/*检查无障碍环境*/
/*#context-sep-selectall, /*全选下面的分割线*/
#context-sep-screenshots,        /************** 分隔线 ***************/
#context-media-eme-separator,    /************** 分隔线 ***************/
/***frame-context.css右键单击iframe时***/
#open-frame-sep,                         /******** 分隔线 *********/
#context-reloadframe + menuseparator,    /******** 分隔线 *********/
#context-saveframe + menuseparator,      /******** 分隔线 *********/
#context-printframe + menuseparator,     /******** 分隔线 *********/
#spell-separator,                    /*** 分隔线 ***/
#context-take-frame-screenshot + menuseparator,     /******** 分隔线 *********/
/***image-context.css右键单击图像时***/
/*#context-viewimageinfo,/*查看图片信息*/
#context-copyimage,/*复制图片地址*/
#context-sendimage,/*用邮件发送图片*/
#context-setDesktopBackground,/*设为桌面背景*/
#context-sep-setbackground,       /************ 分隔线 ************/
#context-sep-sharing,             /************ 分隔线 ************/
/***input-context.css右键单击输入字段时***/
#passwordmgr-items-separator,           /************ 分隔线 *************/
#spell-suggestions-separator,           /************ 分隔线 *************/
#context-sep-redo,                      /************ 分隔线 *************/
#context-sep-selectall,                 /************ 分隔线 *************/
#spell-separator,                       /************ 分隔线 *************/
#spell-language-separator,              /************ 分隔线 *************/
#context-sep-bidi,                      /************ 分隔线 *************/
#fill-login-separator,                  /************ 分隔线*************/
#inspect-separator,                     /************ 分隔线 *************/
/*** link-context.css右键链接***/
#context-bookmarklink,/*将此链接加为书签*/
#context-savelink,/*从链接另存文件为*/
#context-stripOnShareLink,              /***复制无跟踪参数链接***/
#context-sep-open,                      /************ 分隔线 *************/
#context-sep-sendlinktodevice,          /************ 分隔线*************/
#context-sep-copylink,                  /************ 分隔线*************/
#frame-sep,                             /************ 分隔线*************/
/***media-context.css：右键单击音频或HTML5视频等媒体时***/
#context-sendvideo, /* 用邮件发送视频 */
#context-sendaudio, /* 用邮件发送音频 */
/***select-context.css：右键单击所选文本或对象时***/
#context-print-selection,/*打印选中内容*/
#context-sep-selectall,                /************ 分隔线 *************/
#context-sep-screenshots,              /************ 分隔线 *************/
#frame-sep,                            /************ 分隔线 *************/
 
#context-sep-navigation/*四个按钮分隔线*/
{ display:none !important; }
 
/*===========================================================================最小化，最大化，关闭========*/
/*最小化，最大化，关闭的间距大小*/
.titlebar-button{ padding-inline: 12px !important; }
/* 最小化，最大化，关闭 形状 圆形 Custom min-max-close Buttons */
.titlebar-button {
    transition: all 0.3s ease !important;
    padding: 8px 10px !important;
     
}
.titlebar-button > .toolbarbutton-icon {
    transition: all 0.3s ease !important;
    list-style-image: none;
  border: 1px solid;
    border-radius: 10px;
}
.titlebar-button.titlebar-min > .toolbarbutton-icon {
    background: #27c840 !important;
  border-color: #27c83f7a !important;
}
 
.titlebar-button.titlebar-max > .toolbarbutton-icon,
.titlebar-button.titlebar-restore > .toolbarbutton-icon {
    background: #febb2e !important;
  border-color: #febc2e7c !important;
}
 
.titlebar-button.titlebar-close > .toolbarbutton-icon {
    background: #ff5f57 !important;
    stroke: #ff5f57 !important;
  border-color: #ff5f5777 !important;
   
}
.titlebar-button.titlebar-close:hover > .toolbarbutton-icon {
    background: #ff5f5742 !important;
  border: 1px solid;
  border-color: #ff5f57 !important;
}
.titlebar-button.titlebar-close:hover {
    background: #fdfdfd00 !important;
}
.titlebar-button.titlebar-max:hover > .toolbarbutton-icon,
.titlebar-button.titlebar-restore:hover > .toolbarbutton-icon {
    background: #febc2e44 !important;
  border: 1px solid;
  border-color: #febb2e !important;
}
.titlebar-button.titlebar-max:hover, .titlebar-button.titlebar-restore:hover {
    background: #fdfdfd00 !important;
}
.titlebar-button.titlebar-min:hover > .toolbarbutton-icon {
    background: #27c83f38 !important;
  border: 1px solid;
  border-color: #27c840 !important;
}
.titlebar-button.titlebar-min:hover {
    background: #fdfdfd00 !important;
}

火狐版本号140
开启紧凑模式，在新标签页地址栏输入 about:config，接受风险并继续，打开Firefox高级设置。 在搜索框内输入 browser.compactmode.show，将结果改成 true。
喜欢0
回复
viewtheard
viewtheard
千年狐狸
千年狐狸
  • UID2383
  • 注册日期2005-01-20
  • 最后登录2025-10-28
  • 发帖数2132
  • 经验650枚
  • 威望1点
  • 贡献值528点
  • 好评度27点
写私信
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于：2024-05-03 06:34
发个预览图看看啊
My Technical Blog: http://art-technical.blogspot.com/
回复(0) 喜欢(0)
藉无棱
藉无棱
小狐狸
小狐狸
  • UID57131
  • 注册日期2019-05-27
  • 最后登录2025-10-24
  • 发帖数10
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度1点
写私信
  • 社区居民
  • 忠实会员
2楼#
发布于：2024-05-10 10:50
三个控制按钮跟菜单按钮没对齐 强迫症受不了
回复(1) 喜欢(0)
晓仙玄
晓仙玄
火狐狸
火狐狸
  • UID46339
  • 注册日期2014-06-12
  • 最后登录2025-10-23
  • 发帖数110
  • 经验134枚
  • 威望0点
  • 贡献值110点
  • 好评度11点
写私信
  • 社区居民
  • 忠实会员
3楼#
发布于：2024-05-10 20:30
藉无棱：三个控制按钮跟菜单按钮没对齐 强迫症受不了回到原帖
但是那样的话，和上边右边的间距又不一样了啊，更丑吧
回复(0) 喜欢(0)
游客

关于FirefoxMozilla 技术支持谋智中国手机版(Beta)了解 Mozilla

返回顶部