-
Notifications
You must be signed in to change notification settings - Fork 0
/
userChrome.css
204 lines (167 loc) 路 7.11 KB
/
userChrome.css
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Adapted from: https://www.reddit.com/r/FirefoxCSS/comments/bm77hx/modern_firefox/ */
/* Not sure I understand this syntax but detailed in: */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=1594771 */
*|*:root {
/* url bar border color */
/* --toolbar-field-focus-border-color: Highlight; /* this is the default, and it means use the system highlight color */ */
--lwt-toolbar-field-border-color: var(--lwt-accent-color) !important;
--toolbar-bgcolor: white !important; /* toolbar bg color */
background: transparent !important;
}
#urlbar-background {
/* #urlbar[focused="true"] > #urlbar-background { */
/* usually uses --toolbar-field-focus-border-color */
border: 1px solid #ddd !important;
}
/* border below toolbox */
#navigator-toolbox::after {
height: 2px !important;
-moz-appearance: none !important;
}
#navigator-toolbox {
/* so, the default light theme doesn't include the mac os frosted glass effected... */
-moz-appearance: -moz-mac-vibrancy-light !important;
border-bottom: none !important;
--tabs-border-color: rgba(0, 0, 0, 0) !important;
background-color: transparent !important;
}
.tab-background {
border-radius: 10px 10px 0px 0px !important;
}
tab {
--edges-opacity: 0.0;
}
tab[selected="true"] {
--edges-opacity: 1.0;
}
/* keep curved edges as part of tab-stack, so tab sizing calculation won't be affected */
.tabbrowser-tab .tab-stack::after {
content: '';
display: block;
position: absolute;
right: -9.5px;
bottom: -0.8px;
height: 10px;
width: 10px;
background-color: inherit;
background-image: url('data:image/svg+xml;utf8,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.1092 10.9078C4.5864 10.9078 0.109245 6.43068 0.109245 0.907827V10.9078H10.1092Z" fill="white"/></svg>');
background-size: 10px 10px;
background-repeat: no-repeat;
z-index: 3;
opacity: var(--edges-opacity) !important;
}
tab .tab-stack::before {
content: '';
display: block;
position: absolute;
left: -9.5px;
bottom: -0.8px;
height: 10px;
width: 10px;
background-image: url('data:image/svg+xml;utf8,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.109247 10.9078C5.63209 10.9078 10.1092 6.43068 10.1092 0.907827V10.9078H0.109247Z" fill="white"/></svg>');
background-size: 10px 10px;
background-repeat: no-repeat;
z-index: 3;
opacity: var(--edges-opacity) !important;
}
/* Prevent scroll left/right buttons from being to close to curved edges of tabs */
/* (seems like width of tab scroll area can't be changed with css */
#scrollbutton-up, #scrollbutton-down {
padding: 0px !important;
}
#scrollbutton-up {
margin-right: -3px !important;
}
/* Reduce opacity for disabled scroll buttons */
#scrollbutton-up[disabled], #scrollbutton-down[disabled] {
opacity: 0.2 !important;
}
spacer[part="overflow-start-indicator"], spacer[part="overflow-end-indicator"] {
border: none !important;
}
/* And for first tab in tab scrollbox */
tab:not(pinned) .tab-stack {
margin-left: 6px !important;
}
/* overflow shadows on overflow tab scroller */
spacer[part=overflow-start-indicator], spacer[part=overflow-end-indicator] {
background-image: none !important;
}
/* remove tab seperators */
.tab-background {
margin-inline-start: -0.5px !important;
margin-inline-end: -0.5px !important;
border: 0 !important;
border-image-width: 0 !important;
}
/* hide line above tabs */
.tab-line { visibility: hidden !important; }
/* Reduce unnecessary spacing before/after tabs */
.titlebar-spacer[type="pre-tabs"] { max-width: 12px !important; }
.titlebar-spacer[type="post-tabs"] { display: none; }
/* Hide separator before and after tabs in titlebar */
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
border-inline-end: none !important;
}
#urlbar-background {
background: rgba(255, 255, 255, 1) !important;
}
/* set margin top of tabbar */
#TabsToolbar-customization-target { margin-top: 4px; }
#nav-bar {
height: 42px !important;
padding: 0 2px !important;
}
#urlbar {
min-height: 30px !important;
border-radius: 2em !important;
}
/* change background of bookmarks and history */
/* tabs seems to be WebExtension based? have to modify: chrome://browser/skin/syncedtabs/sidebar.css */
#bookmarks-view, #historyTree {
-moz-appearance: none !important;
background-color: white !important;
}
#back-button:not(:hover),#back-button:not(:hover) > .toolbarbutton-icon {
background: transparent !important;
border: none !important;
}
#back-button:hover,#back-button:hover > .toolbarbutton-icon {
border: none !important;
}
/* make back button same size as other toolbar icons */
#back-button > .toolbarbutton-icon {
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
border-radius: var(--toolbarbutton-border-radius) !important;
padding: var(--toolbarbutton-inner-padding) !important;
}
/* make hover effect same as other toolbar icons */
#back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
box-shadow: none !important;
background-color: var(--toolbarbutton-hover-background) !important;
}
/* make click effect same as other toolbar icons */
#back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
box-shadow: none !important;
background-color: var(--toolbarbutton-hover-background) !important;
}
/* make opacity the same as forward button */
#back-button[disabled="true"] { fill-opacity: 0.4 !important; }
/* readjust margins for smaller size */
#back-button { margin-left: 4px !important; }
/* standardize radius on tab overflow buttons */
#scrollbutton-up, #scrollbutton-down {
border-radius: var(--toolbarbutton-border-radius) !important;
}
/* realign new tab, all tabs button */
#new-tab-button, #alltabs-button { margin-bottom: 4px !important; }
/* Separator after tabs and new tab button */
.tabbrowser-tab::after, .tabbrowser-tab::before {
border: 0.5px solid var(--tabs-border-color) !important;
}
/* custom icon for sidebar button */
#sidebar-button {
list-style-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 1H13C13.795 1.00211 14.5568 1.31886 15.119 1.88101C15.6811 2.44316 15.9979 3.205 16 4V12C15.9976 12.7949 15.6808 13.5566 15.1187 14.1187C14.5566 14.6808 13.7949 14.9976 13 15H3C2.20476 14.9987 1.44246 14.6822 0.88014 14.1199C0.317817 13.5575 0.0013221 12.7952 0 12L0 4C0.00342106 3.2054 0.32059 2.44433 0.882459 1.88246C1.44433 1.32059 2.2054 1.00342 3 1ZM14 12V4C14 3.73478 13.8946 3.48043 13.7071 3.29289C13.5196 3.10536 13.2652 3 13 3H6.13237V13H13C13.2652 13 13.5196 12.8946 13.7071 12.7071C13.8946 12.5196 14 12.2652 14 12ZM2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H2V7.94676V3H3C2.73478 3 2.48043 3.10536 2.29289 3.29289C2.10536 3.48043 2 3.73478 2 4V12Z" fill="context-fill" fill-opacity="context-fill-opacity"/></svg>') !important;
}