firefox-compact-ui/onebar.css at master · MapoMagpie/firefox-compact-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/* this style maintained by https://github.com/MapoMagpie/firefox-compact-ui */
:root {
  --globle-height: 28px !important;
  /* 地址栏最小宽度 */
  --url-container-width: 250px !important;
  /* 地址栏最大宽度 */
  --url-container-max-width: 600px !important;
  --url-container-max-height: 28px !important;
  --urlbar-min-height: 28px !important;
  /* 标签页非选中宽度 */
  --tab-max-width-c: 120px !important;
  /* 标签页选中宽度 */
  --tab-max-width-s: 210px !important;
  --tab-min-height: 28px !important;
  --tab-max-height: 28px !important;
  --tab-block-margin: 0px !important;
}

/* 隐藏元素 */
hbox.titlebar-spacer,
#toolbar-menubar[inactive],
/* right part of urlbar buttons #page-action-buttons, */
/* urlbar button */ #contextual-feature-recommendation,
/* urlbar button #userContext-icons, */
/* urlbar button */ #reader-mode-button,
/* urlbar button */ #picture-in-picture-button,
/* urlbar button */ #translations-button,
/* urlbar button */ #shopping-sidebar-button,
/* urlbar button */ /* #urlbar-zoom-button, */
/* urlbar button */ /* #pageActionButton, */
/* urlbar button bookmark */ #star-button-box,

/* tab    button close         */ .tab-close-button,
/* tabbar button new tab    */ #tabs-newtab-button,
/* navigator button back    */ #navigator-toolbox #nav-bar #nav-bar-customization-target #back-button,
/* navigator button forword */ #navigator-toolbox #nav-bar #nav-bar-customization-target #forward-button,
/* 地址栏搜索图标 #urlbar-container:not(:hover) */ #identity-box,
/* 地址栏安全图标 #urlbar-container:not(:hover) */ #tracking-protection-icon-container,
/* 地址栏背景元素 */ #urlbar-background
{
  display: none !important;
}

/* 设置整个导航工具栏为弹性盒模型，反转地址栏和标签栏的位置 */
#navigator-toolbox {
  /* position: relative !important; */
  display: flex !important;
  justify-content: start !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
}

#navigator-toolbox > #titlebar {
  -moz-appearance: unset !important;
  margin-left: 1px !important;
  flex: 1 !important;
  height: var(--globle-height) !important;
}

.tabbrowser-tab:is([fadein]) {
  max-width: var(--tab-max-width-c) !important;
}
.tabbrowser-tab:is([fadein]):is([selected]) {
  max-width: var(--tab-max-width-s) !important;
}

.tab-background {
  height: var(--globle-height) !important;
  border-radius: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tab-content {
  padding: 0 5px !important;
  height: var(--globle-height) !important;
}

#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0px !important;
}

/* 地址栏,消除一些边距 */
#nav-bar,
#nav-bar-customization-target,
#urlbar-container {
  margin: 0px !important;
  padding: 0px !important;
  height: var(--globle-height) !important;
}

/* 地址栏宽度动画 */
#urlbar-container {
  width: var(--url-container-width) !important;
  transition: width 400ms !important;
}
#urlbar-container:hover:focus-within {
  width: var(--url-container-max-width) !important;
  transition: width 400ms !important;
}
#urlbar > vbox.urlbarView {
  display: none !important;
  background-color: #37363ac9 !important;
}
#urlbar-container:hover:focus-within >
#urlbar > vbox.urlbarView {
  display: block !important;
}

/* 书签栏 */
#PersonalToolbar {
  width: 28px !important;
  height: 28px !important;
  padding-inline: 0 !important;
  margin-right: 1px !important;
}

/* 书签列表中的元素长宽 */
menuitem.bookmark-item {
  min-width: 20em !important;
  max-width: 20em !important;
}

/* 修改书签组图标 */
#PlacesChevron {
  list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-content .tab-icon-image {
      display: none;
    }
    .tab-audio-button {
      margin-top: -4px;
    }
  }
}
/* place navigator bar to bottom */
/* #navigator-toolbox {
  order: 2;
} */