阅读:4715回复: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
|
|