晓仙玄
火狐狸
火狐狸
  • UID46339
  • 注册日期2014-06-12
  • 最后登录2026-03-30
  • 发帖数112
  • 经验137枚
  • 威望0点
  • 贡献值114点
  • 好评度13点
  • 社区居民
  • 忠实会员
阅读:5691回复:3

自用火狐外观样式 userChrome.css (更新20260317)

楼主#
更多 发布于: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: 4px; /* 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;
}
@media -moz-pref("sidebar.verticalTabs"){
  #PersonalToolbar{
    --toolbar-bgcolor: transparent;
  }
  #PersonalToolbar:not([customizing]){
    background-color: inherit !important;
    margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
    --uc-bg-y: calc(0px - (2 * var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - 27px - var(--bookmark-block-padding));
  }
}
: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: 6px 0px !important;}
/* 标题栏高度Tab: Ensure tab height doesn't augment when arrowscrollbox is visible  */
/* 仅在紧凑模式下生效 */
:root[uidensity="compact"] {--tab-min-height: 24px !important;}
/*隐藏标签栏左右空白*/
.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;}
/*====================================================================================工具栏调整========*/
/*===地址栏样式=作用:移除了导航栏(通常包含标签页、地址栏、工具栏按钮等)的默认背景色,使其变得透明或无背景。==*/
#nav-bar { background  : none !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;
}
/*=============================调整浏览器右键菜单(内容区上下文菜单)的布局,主要是为了让菜单项看起来更紧凑、更现代=============================*/
#contentAreaContextMenu menu, #contentAreaContextMenu menuitem, #contentAreaContextMenu menucaption {
  --menuitem-padding: 0.2em 0.2em;
}
/*===========================================================================隐藏右键菜单================*/
#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; }
 
/* ========================================================================向 Web 内容区域上下文菜单中的菜单项添加图标 ==========*/
:where(#contentAreaContextMenu > menu:not(.menu-iconic))::before,
:where(#contentAreaContextMenu > menuitem:not(.menuitem-iconic))::before{
  display: flex;
  padding-inline-end: 8px;
  padding-top: 2px;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  content: url("chrome://browser/skin/tab.svg");
  -moz-context-properties: fill;
  fill: currentColor;
}
:where(#contentAreaContextMenu > menu),
:where(#contentAreaContextMenu > menuitem){
  padding-inline-start: 1em !important;
}
#contentAreaContextMenu > menuitem[type="checkbox"]::before{
  content: url("chrome://devtools/skin/images/checkbox.svg");
}
#contentAreaContextMenu > menuitem[type="checkbox"] > :is(.menu-iconic-left,.menu-icon){
  display: none;
}
#contentAreaContextMenu > menuitem[type="checkbox"][_moz-menuactive]::before,
#contentAreaContextMenu > menuitem[type="checkbox"][checked="true"]::before{
  background: no-repeat center left url("chrome://global/skin/icons/check.svg");
}
#contentAreaContextMenu > :is(.menu-iconic,.menuitem-iconic)::before{
  content: none;
}
:where(#context-sep-navigation) ~ menuitem::before{
  content: url("chrome://devtools/skin/images/tool-dom.svg");
}
:where(#context-sep-viewsource-commands) ~ menuitem::before{
  content: url("chrome://browser/skin/translations.svg");
}
:where(#spell-suggestions-separator) ~ menuitem::before{
  content: url("chrome://browser/skin/new-tab.svg");
}
:where(#context-sep-open) ~ menuitem::before{
  content: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
:where(#context-savelinktopocket) ~ menuitem::before{
  content: url("chrome://global/skin/icons/edit-copy.svg");
}
:where(#context-sep-copylink) ~ menuitem::before{
  content: url("chrome://devtools/skin/images/play.svg");
}
:where(#context-media-sep-commands) ~ menuitem::before{
  content: url("chrome://browser/skin/canvas.svg");
}
:where(#context-sep-sharing) ~ menuitem::before{
  content: url("chrome://browser/skin/login.svg");
}
:where(#passwordmgr-items-separator) ~ menuitem::before{
  content: url("chrome://global/skin/icons/edit.svg");
}
:where(#context-sep-screenshots) ~ menuitem::before{
  content: url("chrome://global/skin/icons/search-glass.svg");
}
/* Individual items below */
#context-openlink::before{
  content: url("chrome://browser/skin/window.svg");
}
#context-openlinkprivate::before{
  content: url("chrome://browser/skin/privateBrowsing.svg");
}
#context-savelinktopocket::before{
  content: url("chrome://global/skin/icons/pocket-outline.svg");
}
#context-copylink::before,
#context-stripOnShareLink::before,
#context-copyaudiourl::before,
#context-copyvideourl::before{
  content: url("chrome://global/skin/icons/link.svg");
}
#context-saveaudio::before,
#context-saveimage::before,
#context-savelink::before,
#context-savevideo::before,
#context-savepage::before{
  content: url("chrome://browser/skin/save.svg");
}
#context-pocket::before{
  content: url("chrome://global/skin/icons/pocket.svg");
}
#contentAreaContextMenu > #fill-login::before{
  content: url("chrome://browser/skin/login.svg");
}
#use-relay-mask::before{
  content: url("chrome://browser/skin/preferences/relay-logo.svg");
  transform: scale(0.85);
}
#context-copy::before,
#context-pdfjs-copy::before{
  content: url("chrome://global/skin/icons/edit-copy.svg");
}
#context-cut::before,
#context-pdfjs-cut::before{
  content: url("chrome://browser/skin/edit-cut.svg");
}
#context-paste-no-formatting::before,
#context-paste::before,
#context-pdfjs-paste::before{
  content: url("chrome://browser/skin/edit-paste.svg");
}
#context-delete::before,
#context-pdfjs-delete::before{
  content: url("chrome://global/skin/icons/delete.svg");
}
#context-video-saveimage::before,
#context-take-screenshot::before{
  content: url("chrome://devtools/skin/images/command-screenshot.svg");
}
#context-sendpagetodevice::before,
#context-sendlinktodevice::before{
  content: url("chrome://browser/skin/synced-tabs.svg");
}
#context-media-play::before{
  content: url("chrome://devtools/skin/images/play.svg");
}
#context-media-pause::before{
  content: url("chrome://devtools/skin/images/pause.svg");
}
#context-media-mute::before{
  content: url("chrome://global/skin/media/audio-muted.svg");
  transform: scale(0.85);
}
#context-media-unmute::before{
  content: url("chrome://global/skin/media/audio.svg");
  transform: scale(0.85);
}
#context-media-hidecontrols::before,
#context-media-showcontrols::before{
  content: url("chrome://devtools/skin/images/dock-bottom.svg");
}
#context-media-loop::before{
  content: url("chrome://browser/skin/notification-icons/autoplay-media.svg");
}
#context-leave-dom-fullscreen::before{
  content: url("chrome://browser/skin/fullscreen-exit.svg");
}
#context-video-fullscreen::before{
  content: url("chrome://browser/skin/fullscreen.svg");
}
#context-video-pictureinpicture::before{
  content: url("chrome://global/skin/media/picture-in-picture-open.svg");
}
#context-media-playbackrate::before{
  content: url("chrome://global/skin/icons/performance.svg");
}
#context-sendimage::before,
#context-sendvideo::before,
#context-sendaudio::before{
  content: url("chrome://browser/skin/mail.svg");
}
#context-undo::before,
#context-pdfjs-undo::before,
#context-redo::before,
#context-pdfjs-redo::before{
  content: url("chrome://global/skin/icons/undo.svg");
}
#context-redo::before,
#context-pdfjs-redo::before{
  transform-box: content-box;
  transform: scaleX(-1);
}
#context-selectall::before,
#context-pdfjs-selectall::before,
#context-pdfjs-highlight-selection::before{
  content: url("chrome://global/skin/reader/character-spacing-20.svg");
  transform: scale(0.85);
}
#context-reveal-password::before{
  -moz-context-properties: fill,stroke;
  stroke: currentColor;
  content: url("chrome://devtools/skin/images/eye-opened.svg");
}
#context-print-selection::before{
  content: url("chrome://global/skin/icons/print.svg");
}
#context-translate-selection::before,
#spell-check-enabled::before,
#spell-add-dictionaries-main::before,
#spell-dictionaries::before{
  content: url("chrome://browser/skin/translations.svg");
}
#context-ask-chat::before{
  content: url("chrome://global/skin/icons/highlights.svg");
}
#context-bidi-text-direction-toggle::before,
#context-bidi-page-direction-toggle::before{
  content: url("chrome://devtools/skin/images/command-bidi.svg");
}
#context-viewpartialsource-selection::before,
#context-viewsource::before{
  content: url("chrome://browser/skin/characterEncoding.svg");
}
#context-inspect-a11y::before{
  content: url("chrome://devtools/skin/images/accessibility.svg");
}
#context-inspect::before{
  content: url("chrome://devtools/skin/images/open-inspector.svg");
}
/*===========================================================================最小化,最大化,关闭========*/
/*最小化,最大化,关闭的间距大小*/
.titlebar-button{ padding-inline: 10px !important; }
测试火狐版本号149.0b9 (64 位)
开启紧凑模式,在新标签页地址栏输入 about:config,接受风险并继续,打开Firefox高级设置。 在搜索框内输入 browser.compactmode.show,将结果改成 true。
viewtheard
千年狐狸
千年狐狸
  • UID2383
  • 注册日期2005-01-20
  • 最后登录2026-03-31
  • 发帖数2146
  • 经验666枚
  • 威望1点
  • 贡献值536点
  • 好评度27点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2024-05-03 06:34
发个预览图看看啊
My Technical Blog: http://art-technical.blogspot.com/
藉无棱
小狐狸
小狐狸
  • UID57131
  • 注册日期2019-05-27
  • 最后登录2026-03-27
  • 发帖数10
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度1点
  • 社区居民
  • 忠实会员
2楼#
发布于:2024-05-10 10:50
三个控制按钮跟菜单按钮没对齐 强迫症受不了
晓仙玄
火狐狸
火狐狸
  • UID46339
  • 注册日期2014-06-12
  • 最后登录2026-03-30
  • 发帖数112
  • 经验137枚
  • 威望0点
  • 贡献值114点
  • 好评度13点
  • 社区居民
  • 忠实会员
3楼#
发布于:2024-05-10 20:30
藉无棱:三个控制按钮跟菜单按钮没对齐 强迫症受不了回到原帖
但是那样的话,和上边右边的间距又不一样了啊,更丑吧
游客

返回顶部