From 8716baca8e37fd31087b511307ea4e455777c375 Mon Sep 17 00:00:00 2001 From: rydesun Date: Fri, 16 Dec 2022 22:16:36 +0800 Subject: [PATCH] Rewrite firefox css --- .mozilla/firefox/profile/chrome/color.css | 4 +- .../firefox/profile/chrome/userChrome.css | 110 +--------------- .../profile/chrome/userChrome/sidebar.css | 44 +++++++ .../profile/chrome/userChrome/topbar.css | 21 +++ .../firefox/profile/chrome/userContent.css | 121 +----------------- 5 files changed, 71 insertions(+), 229 deletions(-) create mode 100644 .mozilla/firefox/profile/chrome/userChrome/sidebar.css create mode 100644 .mozilla/firefox/profile/chrome/userChrome/topbar.css diff --git a/.mozilla/firefox/profile/chrome/color.css b/.mozilla/firefox/profile/chrome/color.css index db44d5e..7bf434b 100644 --- a/.mozilla/firefox/profile/chrome/color.css +++ b/.mozilla/firefox/profile/chrome/color.css @@ -1,4 +1,4 @@ :root { - --color-background-dark: #202020; - --color-background-light: #d0d0ff; + --color-background-dark: #1c1b22; + --color-shadow: black; } diff --git a/.mozilla/firefox/profile/chrome/userChrome.css b/.mozilla/firefox/profile/chrome/userChrome.css index be7ec3e..bb4f165 100644 --- a/.mozilla/firefox/profile/chrome/userChrome.css +++ b/.mozilla/firefox/profile/chrome/userChrome.css @@ -1,107 +1,3 @@ -/* 隐藏标签栏 */ -#main-window:not([tabsintitlebar="true"]) #TabsToolbar { - visibility: collapse !important; -} - -/* 地址栏高度 */ -#urlbar { - min-height: 16px !important; -} -#urlbar-input { - height: 16px !important; -} - -/* 地址栏内图标 */ -.urlbar-page-action { - padding-top: 0px !important; - padding-bottom: 0px !important; -} - -/* 去除地址栏、搜索栏的阴影边框 */ -#urlbar:not(.megabar), #urlbar.megabar > #urlbar-background, #searchbar { - box-shadow: none !important; -} -/* 隐藏地址栏的容器图标 */ -#urlbar .identity-icon-fingerprint { - display: none !important; -} - -/* 简化后退图标 */ -#back-button > .toolbarbutton-icon { - border: none !important; - background-color: unset !important; -} - -/* 自动弹出式侧边栏 */ -/* 强制在 VisualTab 扩展下有效 */ -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] { - z-index: 1000 !important; - position: relative !important; - min-width: 35px !important; - max-width: 35px !important; -} -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] #sidebar { - position: absolute !important; - transition: all 0.1s; -} -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] #sidebar:not(:hover) { - width: 35px !important; - min-width: 35px !important; - max-width: 35px !important; -} -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] #sidebar:hover { - box-shadow: 2px 0 13px 0px #333333; -} -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] + #sidebar-splitter { - display: none !important; -} - -/* 暗色侧边栏 */ -#sidebar-header { - -moz-appearance: none !important; - background-color: var(--frame-background-color) !important; - color: #fff !important; - border-bottom: 1px solid #223 !important -} -#sidebar-search-container, #sidebar, .sidebar-placesTree { - -moz-appearance: none !important; - background-color: var(--frame-background-color) !important; - color: #ddd !important; -} -treechildren::-moz-tree-separator { - border-color: #333 !important -} - -/* 隐藏扩展侧边栏的头部 */ -/* Visual Tabs */ -#sidebar-box[sidebarcommand="visualtab_xuldev_org-sidebar-action"] #sidebar-header, -/* Bitwarden */ -#sidebar-box[sidebarcommand="_446900e4-71c2-419f-a6a7-df9c091e268b_-sidebar-action"] #sidebar-header { - display: none !important; -} - -/* 去除弹出菜单的阴影 */ -.menupopup-arrowscrollbox { - border: 0px !important; - margin: 0px !important; -} - -/* 弹出工具栏 */ -panelview#widget-overflow-mainView vbox.panel-subview-body { - display: block !important; - overflow: auto !important; -} -panelview#widget-overflow-mainView vbox#widget-overflow-fixed-list { - display: flex !important; - flex-wrap: wrap !important; -} -panelview#widget-overflow-mainView vbox#widget-overflow-fixed-list toolbarbutton { - width: calc(100% / 10) !important; - height: 40px !important; -} -panelview#widget-overflow-mainView vbox#widget-overflow-fixed-list label.toolbarbutton-text { - display: none !important; -} -panelview#widget-overflow-mainView .subviewbutton.panel-subview-footer { - min-height: unset !important; -} +@import "color.css"; +@import "userChrome/sidebar.css"; +@import "userChrome/topbar.css"; diff --git a/.mozilla/firefox/profile/chrome/userChrome/sidebar.css b/.mozilla/firefox/profile/chrome/userChrome/sidebar.css new file mode 100644 index 0000000..1d44284 --- /dev/null +++ b/.mozilla/firefox/profile/chrome/userChrome/sidebar.css @@ -0,0 +1,44 @@ +/* {{{ 标签侧边栏 (使用扩展Sidebery) */ +/* https://addons.mozilla.org/zh-CN/firefox/addon/sidebery */ +/* 需要关闭 Tabs tree */ + +/* Sidebery侧边栏在Hover时自动弹出 */ +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { + min-width: 32px !important; + max-width: 32px !important; + position: relative !important; + z-index: 1000; +} +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + > #sidebar:hover { + min-width: 200px !important; + max-width: 200px !important; + box-shadow: 1px 0 10px var(--color-shadow); +} +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + > #sidebar { + transition: all 200ms; +} + +/* 隐藏Sidebery侧边栏的头部 */ +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + > #sidebar-header { + display: none; +} + +/* 隐藏Sidebery侧边栏右侧的用于调整大小的分割条 */ +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + + #sidebar-splitter { + display: none; +} +/* }}} */ + +/* {{{ Bitwarden */ +/* 隐藏Bitwarden侧边栏的头部 */ +#sidebar-box[sidebarcommand="_446900e4-71c2-419f-a6a7-df9c091e268b_-sidebar-action"] + > #sidebar-header { + display: none; +} +/* }}} */ + +/* vim:fdm=marker diff --git a/.mozilla/firefox/profile/chrome/userChrome/topbar.css b/.mozilla/firefox/profile/chrome/userChrome/topbar.css new file mode 100644 index 0000000..0583226 --- /dev/null +++ b/.mozilla/firefox/profile/chrome/userChrome/topbar.css @@ -0,0 +1,21 @@ +/* 隐藏标签栏 */ +#main-window:not([tabsintitlebar="true"]) #TabsToolbar { + visibility: collapse; +} + +/* 去除工具栏最左和最右的空白边距 */ +:root { + --toolbar-start-end-padding: 0 !important; +} + +/* 减小工具栏的高度 (需要减小地址栏的最小高度) */ +/* 不采用修改 :root 的 --urlbar-min-height 的方式， + * 因为该方式会导致地址栏内部最右侧的图标显示有问题 */ +#urlbar { + min-height: 20px !important; +} + +/* 隐藏地址栏内部的容器图标 */ +#urlbar .identity-icon-fingerprint { + display: none; +} diff --git a/.mozilla/firefox/profile/chrome/userContent.css b/.mozilla/firefox/profile/chrome/userContent.css index 6c5186b..add333a 100644 --- a/.mozilla/firefox/profile/chrome/userContent.css +++ b/.mozilla/firefox/profile/chrome/userContent.css @@ -1,126 +1,7 @@ @import "color.css"; -@-moz-document url("about:blank") { +@-moz-document url("about:blank"), url("about:newtab") { body { background-color: var(--color-background-dark) !important; } } - -/* Visual Tabs */ -@-moz-document regexp("^moz-extension://[a-zA-Z0-9-]+/sidebar/view\.html.*") { - :root { - --background-color: var(--color-background-dark) !important; - --separator-color: black !important; - } - #tabbox #tabList { - margin-top: 6px !important; - } - #tabbox #tabList .tab { - background: transparent !important; - } - #tabbox #tabList .tab .bar { - padding: 0 5px !important; - } - - /* 固定标签栏 */ - #tabbox #pinList:not(:empty) { - border-bottom: unset !important; - } - #tabbox #pinList:not(:empty) .tab { - border-right-color: var(--color-background-light) !important; - background: white !important; - } - #tabbox #pinList:not(:empty) .tab[selected="true"] { - background: var(--color-background-light) !important; - } - #tabbox #pinList:not(:empty) .tab .line1 { - display: none !important; - } - #tabbox #pinList:not(:empty) .tab .line2 { - height: 2px !important; - } - - #tabbox #tabList .tab { - padding-top: 0 !important; - padding-left: 0 !important; - padding-bottom: 0 !important; - margin-bottom: 15px !important; - margin-right: 4px !important; - border-bottom: none !important; - } - #tabbox #tabList .tab .bar { - height: 24px !important; - } - - #tabbox #tabList .tab .bar .favicon { - padding: 12px !important; - background-color: #ccc !important; - background-repeat: no-repeat !important; - background-position: center !important; - border-radius: 5px !important; - } - #tabbox #tabList .tab[selected="true"] .bar .favicon { - background-color: var(--color-background-light) !important; - } - #tabbox #tabList .tab .bar .title { - color: white !important; - background: #404040 !important; - margin-left: 6px !important; - padding: 4px 8px !important; - border-radius: 7px 0 0 7px !important; - } - body:not(:hover) #tabList .tab .bar .title { - display: none !important; - } - #tabbox #tabList .tab[selected="true"] .bar .title { - color: #90c0ff !important; - font-weight: unset !important; - } - #tabbox #tabList .tab .line1 { - display: none !important; - } - #tabbox #tabList .tab .line2 { - width: 2px !important; - } - #tabbox #tabList .tab button.close { - filter: invert(1) !important; - } - #tabbox #tabList .tab .thumbnail { - width: 100% !important; - margin: 0 !important; - box-shadow: inset 0px 1px 2px 0px #606060 !important; - } - #tabbox #tabList .tab[discarded="true"] { - padding-bottom: 0 !important; - } - #tabbox #tabList .tab[url^="about:"] .thumbnail, - #tabbox #tabList .tab[discarded="true"] .thumbnail { - display: none !important; - } - #tabbox #tabList .tab[url^="moz-extension:"] .line2, - #tabbox #tabList .tab[url^="file:///"] .line2, - #tabbox #tabList .tab[url^="https://addons.mozilla.org/"] .line2, - #tabbox #tabList .tab[url^="about:"] .line2 { - background-color: #ee9090; - } - /* 自动隐藏关闭按钮 */ - #tabbox #tabList .tab:not(:hover) button.close { - display: none !important; - } - /* 自动隐藏音量图标 */ - body:not(:hover) div.audio { - display: none !important; - } - - /* 隐藏新标签按钮 */ - #newTab { - display: none !important; - } - - #menu #contexts { - border-left: none !important; - } - #menu #contexts button { - color: #a0a0a0 !important; - } -}