主要实现
- 标签栏底部，带自动收展
- 地址栏圆角
- 三自定义窗口按钮
代码备忘
/*标签页移到底部------------------------------------------------------------*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/
.titlebar-buttonbox-container{
position: fixed;
display: block;
top:0;
right:0;
height: 40px;
z-index: 3;
visibility: visible !important;
}
@media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
:root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
/* Re-adjust window cotrols if menubar is permanently enabled */
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }
@media (-moz-platform: windows){
#titlebar{ -moz-appearance: none !important; }
}
/* Move tabs below content */
#main-window > body::after{
content: "";
display: flex;
}
#main-window:not([inFullscreen]) > body::after{
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
}
#main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
margin-bottom: 1px;
}
#TabsToolbar{
position: fixed;
display: flex;
bottom: 0;
width: 100vw;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
--tabs-navbar-shadow-size: 0px;
}
.toolbar-items {
width:calc(100vw - 120px) !important;
}
#private-browsing-indicator-with-label {
flex: 0 0 90px !important;
justify-content: center !important;
}
#TabsToolbar:hover{ z-index: 1 }
#TabsToolbar{ background-color: var(--lwt-accent-color); }
#TabsToolbar-customization-target{ width: 100vw; }
.tab-background{ border-top-style: none !important; }
/* Hide stuff that doesn't make sense with tabs below content */
#TabsToolbar > .titlebar-buttonbox-container,
#window-controls, /* Fullscreen window controls */
#TabsToolbar .titlebar-spacer{
display: none !important;
}
#navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
/*mac版本设置左侧margin，以及三按钮强制上移；*/
#nav-bar{
margin-left:90px !important;
}
.titlebar-buttonbox-container,.titlebar-buttonbox{
margin-top:-5px !important;
}
/*原始chromecss文件0------------------------------------------------------------*/
/*
#sidebar-header{
display: none !important;
}
*/
*{
font-family: "HarmonyOS Sans SC" !important;
font-weight:400 !important;
}
/*书签工具栏高度,建议值28~30*/
#personal-bookmarks {
height:32px !important;
}
/*书签工具栏居中*/
#PersonalToolbar #PlacesToolbarItems{
-moz-box-pack: center !important;
justify-content: center !important;
align-items:center !important;
}
/*书签下拉菜单高度，建议值25~28*/
.bookmark-item {
height:20px!important;
font-size: 9pt !important;
}
/*图标宽度*/
.bookmark-item > .toolbarbutton-icon {margin: 0px 0px 0px 0px !important;}
/*文本宽度，调整与图标之间的距离*/
.bookmark-item > .toolbarbutton-text { padding: 0px 3px 0px 3px !important;}
/*右键菜单属性设置*/
popup, menu, menuitem {
text-align: left !important;
margin:0px 3px 0px 3px !important; /*菜单与菜单之间距离，上右下左*/
padding:4px !important;/*菜单内部距离*/
}
/*右键菜单编辑,发送页面到pocket，发送页面到设备*/
#context-pocket,#context-sep-sendlinktodevice{
display: none !important;
}
/*标签页右键菜单编辑,恢复关闭标签，关闭标签，发送标签到设备，克隆标签，重载全部标签，标签页静音*/
#context_undoCloseTab,#context_closeTab,#context_sendTabToDevice,#context_duplicateTab,#context_reloadAllTabs,#context_toggleMuteTab{
display: none !important;
}
#pageActionButton,#pageActionSeparator,#tracking-protection-icon-container
{display: none !important;}
/*隐私保护,分割线,开启新窗口,开启隐私窗口，恢复先前浏览……
#appMenu-protection-report-button,#appMenu-tp-separator,#appMenu-private-window-button,#appMenuRestoreLastSession,#appMenu-open-file-button,#appMenu-save-file-button,#appMenu-find-button,#appMenu-whatsnew-button,#toolbarseparator,#appMenu-more-button,#appMenu-developer-button
{display: none !important;}*/
/*页面右键菜单*/
#context-sendpagetodevice,#context-viewinfo,#context-viewbgimage,#context-navigation,#inspect-separator,#context_moveTabOptions,#context_pinTab,#context_selectAllTabs,#appMenu-help-button
{display: none !important;}
/*页面右键菜单分隔xian*/
#context-sep-screenshots,#context-media-eme-separator,#context-sep-selectall{display: none !important;}
/*系统菜单中的分割线全部隐藏
.panel-subview-body >toolbarseparator
{display: none !important;}
*/
/*系统菜单中的分割线指定隐藏*/
.panel-subview-body > toolbarseparator:nth-child(12),.panel-subview-body > toolbarseparator:nth-child(10),.panel-subview-body > toolbarseparator:nth-child(24),.panel-subview-body > toolbarseparator:nth-child(2),.panel-subview-body > toolbarseparator:nth-child(7),.panel-subview-body > toolbarseparator:nth-child(9),.panel-subview-body > toolbarseparator:nth-child(11)
{display: none !important;}
/*其中2,7,9,11编号为同步菜单中的分割线，12,10,24为主菜单中的分割线*/
#appMenu-edit-controls,#appMenu-zoom-controls
{display: none !important;}
#context-savepage,#context-sep-ctp,#context-selectall,.openintabs-menuitem,#context-sep-viewbgimage
{display: none !important;}
/*用户同步菜单内容*/
#PanelUI-fxa-menu-sendtab-button,#PanelUI-fxa-menu-remotetabs-button,#PanelUI-fxa-menu-connect-device-button,.subview-subheader,#PanelUI-fxa-menu-monitor-button,#PanelUI-fxa-menu-send-button
{display: none !important;}
/*版本新菜单标记*/
#appMenu-new-tab-button2,#appMenu-new-window-button2,#appMenu-new-private-window-button2,#appMenu-passwords-button
#appMenu-print-button2,#appMenu-save-file-button2,#appMenu-find-button2,#appMenu-more-button2/*,#appMenu-help-button2*/
{display: none !important;}
/*右上角菜单分割线设置*/
.panel-subview-body
> toolbarseparator:nth-child(8),.panel-subview-body >
toolbarseparator:nth-child(14),.panel-subview-body >
toolbarseparator:nth-child(19)
{display: none !important;}
/*关闭标签合并的二级菜单，关闭后建议安装扩展
#context_closeTabOptions {
display: none !important;
}*/
/*清除tab标签右键菜单上的全部分割线*/
#tabContextMenu> menuseparator{
display: none !important;
}
/*标签栏宽度设置
.tabbrowser-tab:not([pinned])[fadein] {
min-width: 120px !important;
max-width: 120px !important;
}
*/
/****************************标签页自动收展**START**************************/
/*标签栏高度*/
:root {--tab-min-height: 25px !important;}
/* 选中的时候缩小为135px，没有选中的时候缩小为30px */
.tabbrowser-tab{
margin-right:5px !important;
}
.tabbrowser-tab:is([selected="true"]):not([pinned])[fadein] {
min-width: 135px !important;
max-width: 135px !important;
}
.tabbrowser-tab:not([selected="true"]):not([pinned])[fadein] {
min-width: 35px !important;
max-width: 35px !important;
}
/*鼠标移动到标签上显示关闭按钮*/
.tab-content > .tab-close-button
{
visibility: hidden !important;
opacity: 0 !important;
}
.tab-content:hover > .tab-close-button {
visibility: visible !important;
opacity: 1 !important;
}
/*收起标签的时候文字隐藏，点开时候恢复*/
.tab-label:is([selected="true"]):not([pinned])[fadein]{
display:block !important;
}
.tab-label:not([selected="true"]):not([pinned])[fadein]{
display:none !important;
}
/** 为空白标签加上图标 Add icon for blank tabs 来自卡饭豆腐乳*/
#TabsToolbar .tabbrowser-tab .tab-icon-image:not([src]):not([busy]):not([pending]),
#TabsToolbar .tabbrowser-tab .tab-icon-image:not([src]):not([busy]):not([pending]):not([selected]) {
display: inline !important;
list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
}
/*标签底色*/
.tab-background:is([selected="true"]){
/*border:1px solid #888 !important;*/
box-shadow: 1px 1px 50px var(--focus-outline-color) inset,-1px -1px 50px var(--focus-outline-color) inset !important; /*内发光*/
opacity:0.5 !important;
}
/****************************标签页自动收展**END**************************/
/****************************地址栏相关**START**************************/
/* 地址栏/搜索栏选中边框，来自卡饭豆腐乳*/
#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
#searchbar:focus-within {
outline-width: 0px !important;
}
/*地址栏圆角**/
/*#urlbar-container,
#urlbar,
#urlbar-input-container,*/
#urlbar-background{
border-radius:15px !important;
box-shadow:2px 2px 50px #111 inset,-2px -2px 50px #111 inset !important;
}
/*这个是设置页面地址栏出现一个firefox的按钮背景*/
/*默认css包含：
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, #urlbar-label-box {
background-color: transparent !important;
}
只需要选#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button 就可以。
*/
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button {
background-color: transparent !important;
}
/*地址栏两侧往内适当收点*/
#urlbar-input-container {
padding: 0 10px 0 10px !important;
}
/****************************地址栏相关**END**************************/