折腾 Firefox 浏览器（外观篇）

1// profile/user.js
2user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
3user_pref("devtools.chrome.enabled", true);
4user_pref("devtools.debugger.remote-enabled", true);
5user_pref("devtools.debugger.prompt-connection", false);

1.tab-icon-image {
2  filter: drop-shadow(1px 0 0 white)
3          drop-shadow(-1px 0 0 white)
4          drop-shadow(0 1px 0 white)
5          drop-shadow(0 -1px 0 white) !important;
6}

1#reader-mode-button {
2    visibility: visible !important;
3    display: block !important;
4}

1#new-tab-button {
2    visibility: collapse !important;
3    display: none !important;
4}

 1/* loikein: adjust tab content order */
 2.tab-content {
 3  display: grid;
 4  grid-auto-flow: column;
 5}
 6
 7.tab-close-button {
 8  padding: 4px !important;
 9  grid-column: 1;
10  margin-left: -4px !important;
11}
12
13/* loikein: hide title mask */
14.tab-label-container { mask-image: none !important; }
15
16/* Firefox Quantum userChrome.css tweaks ************************************************/
17/* Github: https://github.com/aris-t2/customcssforfx ************************************/
18
19/****************************************************************************************/
20/* tab close icon settings - [only use one at a time] *******************************************/
21/* tab_close_show_on_hover_only.css */
22
23#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
24  visibility: collapse !important;
25  display: none !important;
26}
27
28#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button {
29  visibility: visible !important;
30  display: block !important;
31}
32
33/* tab_close_at_tabs_start.css" */
34/* loikein: slightly adjusted margins to go with favicon */
35
36#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
37  -moz-box-ordinal-group: 0 !important;
38  -moz-margin-start: -4px !important;
39  -moz-margin-end: 1.5px !important; /* Proton*/
40}
41
42/* missing_tab_favicon_restored_default.css */
43
44.tabbrowser-tab:not([pinned]) .tab-icon-image:not([src]) {
45  display: inline !important;
46}
47
48.tabbrowser-tab:not([pinned])[busy] .tab-icon-image {
49  display: none !important;
50}
51
52/* loikein: hide favicon when close button appears */
53#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-icon-stack {
54  visibility: collapse !important;
55  display: none !important;
56}

 1/* autohide bookmarks and main toolbars */
 2/*
 3Source file: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css
 4made available under Mozilla Public License v. 2.0
 5See the above repository for updates as well as full license text.
 6 */
 7
 8#navigator-toolbox{
 9  --uc-bm-height: 30px; /* Might need to adjust if the toolbar has other buttons */ /* Proton*/
10  --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
11  --uc-navbar-height: -36px; /* navbar is main toolbar. Use negative value */
12  --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
13  /*! border: none; */
14}
15
16:root[uidensity="compact"] #navigator-toolbox{ --uc-bm-padding: 1px; --uc-navbar-height: -32px }
17:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
18
19@media (-moz-proton){
20  #navigator-toolbox{
21     --uc-bm-height: 26px; /* Might need to adjust if the toolbar has other buttons */
22  }
23  :root[uidensity="compact"] #navigator-toolbox{
24    --uc-navbar-height: -34px;
25    --uc-bm-height: 23px;
26  }
27}
28
29:root[sessionrestored] #nav-bar,
30:root[sessionrestored] #PersonalToolbar{
31  transform: rotateX(90deg);
32  transform-origin: top;
33  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
34  z-index: 2;
35}
36#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
37
38#navigator-toolbox > #PersonalToolbar{
39  transform-origin: 0px var(--uc-navbar-height);
40  z-index: 1;
41  position: relative;
42}
43
44:root[sessionrestored]:not([customizing]) #navigator-toolbox{ margin-bottom:  calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding) + var(--uc-navbar-height)); }
45
46#PlacesToolbarItems > .bookmark-item,
47#OtherBookmarks,
48#PersonalToolbar > #import-button{
49  padding-block: var(--uc-bm-padding) !important;
50}
51
52/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
53#PersonalToolbar[collapsed="true"]{
54  min-height: initial !important;
55  max-height: initial !important;
56  visibility: hidden !important
57}
58
59/* The invisible toolbox will overlap sidebar so we'll work around that here */
60#navigator-toolbox{ pointer-events: none; border-bottom: none !important; }
61#PersonalToolbar{ border-bottom: 1px solid var(--chrome-content-separator-color) }
62#navigator-toolbox > *{ pointer-events: auto; /*! border: none; */}
63
64#sidebar-box{ position: relative }
65
66/* SELECT TOOLBAR BEHAVIOR */
67/* Comment out or delete one of these to disable that behavior */
68
69/* Show when urlbar is focused */
70#nav-bar:focus-within + #PersonalToolbar,
71#navigator-toolbox > #nav-bar:focus-within{
72  transition-delay: 100ms !important;
73  transform: rotateX(0);
74}
75
76/* Show when cursor is over the toolbar area */
77#navigator-toolbox:hover > .browser-toolbar{
78  transition-delay: 100ms !important;
79  transform: rotateX(0);
80}