|
阅读:5586回复:6
标签栏地址栏同一列,习惯之后,就再也用受不了其他浏览器了
搭配鼠标手势
userChrome.css: /*隐藏前进后退图标*/
#back-button { display: none !important }
#forward-button { display: none !important }
/*隐藏网站信息图标*/
#identity-box { display: none !important }
/*隐藏盾形图标*/
#tracking-protection-icon-container { display: none !important }
/*隐藏地址栏添加书签图标*/
#star-button-box{
margin-inline: calc((16px + var(--urlbar-icon-padding) * 2) / -2) !important;
opacity: 0;
pointer-events: none;
}
/*隐藏标签栏左右空白*/
.titlebar-spacer { display: none !important; }
/*隐藏右键图标*/
#context-navigation,
#context-sep-navigation
{display: none !important;}
/*书签图标*/
#bookmarks-menu-button {
/*list-style-image: url("chrome://browser/skin/bookmark-hollow.svg")!important;*/
list-style-image: url("chrome://global/skin/icons/arrow-down.svg")!important;
/*list-style-image: url("chrome://global/skin/icons/resizer.svg")!important;*/
}
/*扩展图标*/
#unified-extensions-button{
list-style-image: url("chrome://global/skin/icons/chevron.svg")!important;
}
/*窗口按钮间隔,linux 可能需要注释此项*/
.titlebar-button{ margin-inline: -5px !important; }
/*标题栏高度*/
:root {
--tab-min-height: 34px !important;
--tab-block-margin: 4px 6px !important;
}
/*#tabbrowser-arrowscrollbox {
--tab-min-height: 40px !important;
max-height: var(--tab-min-height);
}
.tabbrowser-tab {
min-height: 24px !important;
}*/
/*===地址栏样式1===
#nav-bar { background : none !important; }
#urlbar-background { outline:none !important; }
#urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background {
box-shadow : none !important;
background : none !important;
}*/
/*===地址栏样式2===*/
#nav-bar { background : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open]) > #urlbar-background { background: none !important; }
#urlbar-background {
outline: 2px solid AccentColor !important;
outline-offset: -2px !important;
outline-color: #606060 !important;
}
/*地址栏下拉列表*/
#urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
--toolbar-field-focus-background-color: #DBDEDE !important;
}
/*地址栏标签栏同列*/
#urlbar-container { width: auto !important; }
:root {
--uc-urlbar-width: clamp(200px, 240px, 300px);
}
@media (min-width: 500px) {
#TabsToolbar { margin-left: var(--uc-urlbar-width) !important; }
#nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 11px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
}
配合可移动主菜单图标的 uc.js,使用效果更佳: // ==UserScript==
// @name
// @description 可移动 PanelUI 按钮
// @author Ryan, firefox
// @include main
// @shutdown window.movablePanelUIButton.destroy()
// @compatibility Firefox 78
// @homepage https://github.com/benzBrake/FirefoxCustomize
// @note 2022.09.07 修正新窗口不能定制
// @note 2022.09.05 修正窗口报错
// @note 2022.08.27 fx 102+
// @note 2022.07.02 非 xiaoxiaoflood 的 userChromeJS 环境测试可用
// @note 2022.04.20 修改为可热插拔(不知道非 xiaoxiaoflood 的 userChromeJS 环境是否可用)
// @onlyonce
// ==/UserScript==
(function () {
const CustomizableUI = globalThis.CustomizableUI || Cu.import("resource:///modules/CustomizableUI.jsm").CustomizableUI;
if (window.movablePanelUIButton) {
window.movablePanelUIButton.destroy();
}
window.movablePanelUIButton = {
get sss() {
delete this.sss;
return this.sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
},
STYLE_ICON: {
url: Services.io.newURI('data:text/css;charset=UTF-8,' + encodeURIComponent(`
#movable-PanelUI-button {
list-style-image: url(chrome://browser/skin/menu.svg);
}
`)),
type: 0
},
STYLE_DISPLAY: {
url: Services.io.newURI('data:text/css;charset=UTF-8,' + encodeURIComponent(`
#PanelUI-button {
display: none;
}
`)),
type: 0
},
listener: {
windows: windows,
onCustomizeStart(win) {
this.windows(function (doc, win, location) {
win.dispatchEvent(new CustomEvent("OriginalPanelUIButtonShow"));
})
},
onCustomizeEnd(win) {
this.windows(function (doc, win, location) {
win.dispatchEvent(new CustomEvent("OriginalPanelUIButtonHide"));
})
}
},
init: function () {
this.sss.loadAndRegisterSheet(this.STYLE_ICON.url, this.STYLE_ICON.type);
this.sss.loadAndRegisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
CustomizableUI.addListener(this.listener);
CustomizableUI.createWidget({
id: "movable-PanelUI-button",
type: "button",
defaultArea: CustomizableUI.AREA_NAVBAR,
localized: false,
removable: true,
onCreated: node => {
node.addEventListener('mousedown', this);
node.addEventListener('keypress', this);
let pNode = node.ownerDocument.getElementById('PanelUI-menu-button');
['label', 'tooltiptext'].forEach(attr => node.setAttribute(attr, pNode.getAttribute(attr)));
}
});
window.addEventListener('OriginalPanelUIButtonShow', this);
window.addEventListener('OriginalPanelUIButtonHide', this);
},
handleEvent: function (event) {
if (event.type === "mousedown" && event.button !== 0) return;
switch (event.type) {
case 'mousedown':
case 'keypress':
let { target: node } = event;
let { ownerDocument: document } = node;
const { PanelUI } = document.defaultView;
PanelUI.menuButton = node;
PanelUI.show();
break;
case 'OriginalPanelUIButtonShow':
this.sss.unregisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
break;
case 'OriginalPanelUIButtonHide':
this.sss.loadAndRegisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
break;
}
},
destroy: function () {
this.sss.unregisterSheet(this.STYLE_ICON.url, this.STYLE_ICON.type);
this.sss.unregisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
CustomizableUI.destroyWidget("movable-PanelUI-button");
windows(function (doc, win, location) {
doc.defaultView.PanelUI.menuButton = doc.getElementById('PanelUI-button');
})
window.removeEventListener('OriginalPanelUIButtonShow', this);
window.removeEventListener('OriginalPanelUIButtonHide', this);
delete this;
}
}
function windows(fun) {
let windows = Services.wm.getEnumerator('navigator:browser');
while (windows.hasMoreElements()) {
let win = windows.getNext();
if (!win._uc)
continue;
let { document, location } = win;
if (fun(document, win, location))
break;
}
}
window.movablePanelUIButton.init();
})(); |
|
|
1楼#
发布于:2024-06-28 23:44
地址栏单列一行空荡荡的确实浪费,不过你的css没处理地址栏下拉菜单,下拉菜单跟随地址栏,宽度那么小什么都看不到。
|
|
|
2楼#
发布于:2024-07-02 09:20
|
|
|
3楼#
发布于:2024-07-02 17:54
fire/fox:对我来讲,很少用到地址栏下拉菜单,倒是无所谓的,能看到主域名地址就可以了。https://github.com/lr-tech/OnelineProton/ https://github.com/crambaud/waterfall/ 这两位的样式可以合并下 |
|
|
4楼#
发布于:2024-07-02 20:23
yangzhen:https://github.com/lr-tech/OnelineProton/我的css就是根据你发的第二个精简过来的,只挑了地址标签同列的那几行代码。 第一个我应该也试用过。 这两个css,除了地址标签同列和某些外观颜色定义之外,没有其他特别的功能。 |
|
|
5楼#
发布于:2024-07-02 20:32
fire/fox:对我来讲,很少用到地址栏下拉菜单,倒是无所谓的,能看到主域名地址就可以了。老哥老兄都行,大佬当不起。每个人需求不同,我是很喜欢firefox地址栏弹出菜单的。 我把地址栏弹出菜单弄宽了,不再受地址栏宽度限制。代码是自用的不知道兼容咋样。 /*下拉菜单弹出时地址栏不要移动*/
#urlbar[breakout][breakout-extend] {
left: 0 !important;
}
/*地址栏下拉菜单扩大*/
#urlbar[open] > .urlbarView {
/*菜单宽度占窗口百分比*/
width: 90vw !important;
background-color: #ffffff !important;
margin-inline: 0px !important;
/*下拉地址栏边框*/
border-left: 1px solid ThreeDShadow !important;
border-right: 1px solid ThreeDShadow !important;
border-bottom: 1px solid ThreeDShadow !important;
}
/*去除地址栏下拉和地址栏之间的分界线以免和导航栏边框重合变粗*/
#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
border-top: none !important;
}
@media screen and (min-width: 600px) {
/*窗口宽度大于600px时还原.urlbarView-results[wrap]时对地址栏下拉菜单分行的更改*/
.urlbarView-no-wrap {
/*最长标题宽度比例*/
max-width: 70% !important;
/*标题宽度与url排列方式*/
flex-basis: auto !important;
}
/*禁止下拉条目分行*/
.urlbarView-row-inner {
flex-wrap: nowrap !important;
}
.urlbarView-url {
/*去除url周围空白*/
margin:0px !important;
}
/*恢复分隔符*/
.urlbarView-title-separator {
display: block !important;
}
/*窗口宽度大于600px时还原.urlbarView-results[wrap]时对地址栏下拉菜单分行的更改 -end-*/
} |
|
|
6楼#
发布于:2024-07-02 20:48
|
|