├── README.md
├── user.js
└── userChrome.css


/README.md:
--------------------------------------------------------------------------------
 1 | Changes to make the new proton UI redesign in Firefox better; including changes to tabs, tab indicator, compact mode-reduced height, proton gradient accents in elements, bookmarks-bar-appear-on-hover and much more. All testing done in latest nightly versions with Proton enabled.
 2 | 
 3 | Works best with default dark theme and alpenglow theme. Compact mode enabled.
 4 | 
 5 | How to add stylesheets: https://winaero.com/enable-loading-userchrome-css-usercontent-css-firefox/
 6 | 
 7 | _Pending fixes._
 8 | 
 9 | <img width="957" alt="Screenshot (286)" src="https://user-images.githubusercontent.com/56472130/119192124-a7e82d00-ba90-11eb-9942-f543acde414f.png">
10 | 
11 | <img width="959" alt="Screenshot (285)" src="https://user-images.githubusercontent.com/56472130/119192265-e4b42400-ba90-11eb-80ea-5a17fa27d0a1.png">
12 | 
13 | 


--------------------------------------------------------------------------------
/user.js:
--------------------------------------------------------------------------------
1 | user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
2 | user_pref("svg.context-properties.content.enabled", true); 


--------------------------------------------------------------------------------
/userChrome.css:
--------------------------------------------------------------------------------
  1 | /*for FF-proton dark theme/Alpenglow & compact UI mode*/
  2 | 
  3 | :root {
  4 |   --tab-curve-width: 30px;
  5 |   --tabs-border: transparent !important;
  6 | }
  7 | 
  8 | .tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
  9 |   padding-inline-start: 10px !important;
 10 | }
 11 | 
 12 | /* To be able to see the top border of the tab*/
 13 | .tab-stack {
 14 |   margin-top: 0px !important;
 15 | }
 16 | 
 17 | /* To prevent tab label appearing on pinned tab in compact mode. */
 18 | .tab-content {
 19 |   padding: 0 12px !important;
 20 | }
 21 | 
 22 | /* When the window is maximized, the first pinned tab is properly displayed. */
 23 | #TabsToolbar  {
 24 |   padding-inline-start: 15px !important;
 25 | }
 26 | 
 27 | .tabbrowser-tab[first-visible-tab="true"] {
 28 |   padding-left: 12px !important;
 29 | }
 30 | 
 31 | #tabbrowser-tabs {
 32 |   margin-left: -15px !important;
 33 | }
 34 | 
 35 | .titlebar-placeholder {
 36 |   border: none !important;
 37 | }
 38 | 
 39 | .titlebar-spacer {
 40 |   border: none !important;
 41 | }
 42 | 
 43 | /* Styles to account for small window size and margin-inline-start kicks in */
 44 | .tabbrowser-tab[pinned="true"] {
 45 |   width: 40px !important; 
 46 | }
 47 | 
 48 | .tabbrowser-tab[pinned="true"][style="margin-inline-start"] {
 49 |   padding-left: 12px !important;
 50 | }
 51 | 
 52 | /* Tab border after/before none */
 53 | .tabbrowser-tab::before,
 54 | .tabbrowser-tab::after {
 55 |   border: none !important;
 56 | }
 57 | 
 58 | .tabbrowser-tab > .tab-stack > .tab-background {
 59 |   background-image: none !important;
 60 |   -moz-box-orient: horizontal !important;
 61 |   background-color: transparent !important;
 62 |   margin-top: 1px !important;
 63 | }
 64 | 
 65 | .tab-background[selected="true"] {
 66 |   border: none !important;
 67 | }
 68 | 
 69 | .tab-background {
 70 |   pointer-events: none !important;
 71 | }
 72 | 
 73 | .tab-line {
 74 |   display: none !important;
 75 | }
 76 | 
 77 | .tab-bottom-line {
 78 |   display: none !important;
 79 | }
 80 | 
 81 | /* Match height of new tab button (right svg) on hover */
 82 | #new-tab-button {
 83 |   margin: 0 !important;
 84 | }
 85 | 
 86 | /* overlap the tab curves */
 87 | .tab-background {
 88 |   -moz-margin-end: -15px !important;
 89 |   -moz-margin-start: -15px !important;
 90 | }
 91 | 
 92 | /* Tab background customizations */
 93 | .tab-background[selected="true"]::before {
 94 |   border: none !important;
 95 |   content: "" !important;
 96 |   width: 30px !important;
 97 |   min-height: 30px !important;
 98 |   display: -moz-box !important;
 99 |   background-repeat: no-repeat !important;
100 | }
101 | 
102 | .tab-background[selected="true"]::after {
103 |   border: none !important;
104 |   content: "" !important;
105 |   width: 30px !important;
106 |   min-height: 30px !important;
107 |   display: -moz-box !important;
108 |   background-repeat: no-repeat !important;
109 | }
110 | 
111 | .tab-background[selected="true"] > spacer {
112 |   margin-top: 0px !important;
113 | }
114 | 
115 | #tabs-newtab-button,
116 | #new-tab-button {
117 |   width: calc(36px + 30px) !important;
118 |   margin-inline-start: -15px !important;
119 |   margin-top: 0px !important;
120 |  
121 | }
122 | /* newtab plus icon color */
123 | #tabs-newtab-button .toolbarbutton-icon {
124 |   fill: #22EE5B !important;
125 | }
126 | 
127 | /* Tab hover customizations */
128 | .close-icon:hover {
129 |   border-radius: 60% !important;
130 |   fill: #FF0000 !important;
131 |   transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
132 | }
133 | 
134 | /* Regular tabs */
135 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
136 |   display: -moz-box !important;
137 |   background-repeat: no-repeat !important;
138 |   content: "" !important;
139 |   width: 30px !important;
140 |   max-height: 30px !important;
141 |   background-color: transparent !important;
142 |   margin-bottom: 0 !important;
143 | }
144 | 
145 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
146 |   display: -moz-box !important;
147 |   background-repeat: no-repeat !important;
148 |   content: "" !important;
149 |   width: 30px !important;
150 |   max-height: 30px !important;
151 |   background-color: transparent !important;
152 |   margin-bottom: 0 !important;
153 | }
154 | 
155 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
156 |   margin-top: 0px !important;
157 |   margin-bottom: 0px !important;
158 | }
159 | 
160 | #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
161 | #tabs-newtab-button:hover,
162 | #tabs-newtab-button:hover::before,
163 | #tabs-newtab-button:hover::after {
164 |   background-color: transparent !important;
165 | }
166 | 
167 | /* New tab hover customizations */
168 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
169 | #tabs-newtab-button:hover {
170 |   background-position: 0px 2px, 30px 4px , 36px 2px !important;
171 |   background-repeat: no-repeat !important;
172 |   background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
173 |   margin-bottom: 0 !important;
174 | }
175 | 
176 | #tabs-newtab-button:hover > .toolbarbutton-icon {
177 |   background: none !important;
178 |   background-color: transparent !important;
179 | }
180 | 
181 | /* Color specific customizations */
182 | :root {
183 | 
184 |   --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
185 | 
186 |   --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
187 | 
188 |   --background-hover-middle:
189 |     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
190 |     linear-gradient(
191 |       transparent
192 |       2px,
193 |       rgba(255,255,255,.1) 2px,
194 |       rgba(255,255,255,.1)
195 |     ),
196 |     none;
197 | 
198 |   --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
199 |     linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
200 |     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
201 | }
202 | 
203 | 
204 | @media (-moz-windows-accent-color-in-titlebar) {
205 |   :root[tabsintitlebar]:not(:-moz-window-inactive) {
206 |     background-color: #000000 !important;
207 |   }
208 | }
209 | 
210 | 
211 | .tab-background[selected="true"]::before {
212 |   background-image: var(--svg-selected-before) !important;
213 |   
214 | }
215 | .tab-background[selected="true"]::after {
216 |   background-image: var(--svg-selected-after) !important;
217 |   
218 | }
219 | 
220 | .tab-background[selected="true"] > spacer {
221 |   background-image: var(--background-selected-middle) !important;
222 |   border-top: 1.5px solid transparent !important;
223 |   border-image: 1 0 0 0 linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important;
224 | }
225 | 
226 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
227 |   background-image: var(--svg-hover-before) !important;
228 | }
229 | 
230 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
231 |   background-image: var(--svg-hover-after) !important;
232 | }
233 | 
234 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
235 |   background-image: var(--background-hover-middle) !important;
236 | }
237 | 
238 | #tabs-newtab-button:hover {
239 |   background-image: var(--newtab-hover) !important;
240 | }
241 | 
242 | 
243 | /* more tab changes */
244 | 
245 | :root {
246 |       --tab-border-radius: 0 !important;
247 |     }
248 |     
249 |     .tab-background {   
250 |       margin-bottom: 0 !important;
251 |      display: flex;
252 |      
253 |     }
254 |     
255 |     .tab-background > .tab-context-line {
256 |       flex: 1;
257 |     }
258 |     
259 |   
260 |     .tab-background[selected="true"] > .tab-context-line {
261 |       background-image: var(--background-selected-middle) !important;
262 |       /*border-top: 1.5px solid #00DDFF !important;*/
263 |       border-top: 1.5px solid transparent !important;
264 |   border-image: 1 0 0 0 linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important;
265 |       
266 |     }
267 | 
268 |     .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background[selected=true] > .tab-context-line {
269 |       background-color: #2B2A33 !important;
270 |       height: inherit !important;
271 |       border-radius: 0px !important;
272 |       margin: 0px !important;
273 |       
274 |     }
275 |     
276 |     .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
277 |       background-image: var(--background-hover-middle) !important;
278 |     }
279 |     
280 |     .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
281 |       box-shadow: none !important;    
282 |     }
283 | 
284 | 
285 | :root {
286 |       --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(43, 42, 51);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
287 |     
288 | 
289 |       --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(43, 42, 51);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
290 | 
291 |       --background-selected-middle:
292 |       linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
293 |       linear-gradient(#2B2A33 1.5px,#2B2A33 2px,#2B2A33), none !important;
294 |     }
295 | 
296 | 
297 | :root {
298 |   --toolbar-bgcolor: #2B2A33 !important;
299 | }
300 | 
301 | /*My gradient
302 |   border: solid transparent !important;
303 |   border-image: 0 0 1 0 linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important;
304 | */
305 | #navigator-toolbox{
306 | 	border-bottom: none !important;
307 | }
308 | #urlbar-background,#urlbar{ 
309 |   border-radius: 16px !important ;
310 |   background-color: #1C1B22 !important;
311 |   border: transparent !important;
312 | }
313 | 
314 | #urlbar{
315 |   background-image: linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52);
316 |   /*background-size: auto 10px;
317 |     background-repeat: no-repeat;
318 |     background-position: bottom; */
319 | 
320 | }
321 | #urlbar-background{ 
322 |   margin-bottom: 2px !important;
323 |   margin-top: 2px !important;
324 |   margin-left: 2px !important;
325 |   margin-right: 2px !important; }
326 | 
327 | #urlbar[focused=true] #urlbar-background{
328 | 	background-color: rgb(43, 42, 51, 0.85) !important;
329 | }
330 | 
331 | #urlbar[open=true] #urlbar-background {
332 |   background-color: rgb(43, 42, 51, 0.85) !important;
333 | }
334 | 
335 | /*rgb(42, 43, 51) grey shade*/
336 | /* purple: #9400FF, firefox orange: #E55B0A */
337 | 
338 | /*tooltip dark theme*/
339 | tooltip {
340 |   -moz-appearance: none !important;
341 | 	color: #fff !important;
342 | 	background-color: #2B2A33 !important;
343 | 	/*border-color: #E55B0A !important;*/
344 |   border: 1px solid transparent !important;
345 |   border-image: 1 1 1 1 linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important;
346 | 
347 | }
348 | 
349 | /*link hover tooltip custom*/
350 | #statuspanel-label {
351 |   -moz-appearance: none !important;
352 | 	color: #fff !important;
353 | 	background-color: #2B2A33 !important;
354 | 	/*border-color: #E55B0A !important;*/
355 |   border: 1px solid transparent !important;
356 |   border-image: 1 1 0 0 linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important;
357 | 
358 | }
359 | 
360 | 
361 | /*bookmarks bar color*/
362 | #PersonalToolbar{
363 |   background-color: rgb(43, 42, 51, 0.60) !important;
364 |   }
365 | 
366 | /*for hiding bookmarks bar*/
367 | #PersonalToolbar{
368 |   --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
369 |   --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
370 |   --uc-autohide-toolbar-delay: 250ms; /* The toolbar is hidden after 0.6s */
371 |   
372 |   /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
373 |   --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
374 |   --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
375 | }
376 | 
377 | :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
378 | :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
379 | 
380 | #PersonalToolbar:not([customizing]){
381 |   position: relative;
382 |   margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
383 |   transform: rotateX(90deg);
384 |   transform-origin: top;
385 |   transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
386 |   z-index: 1;
387 | }
388 | 
389 | #PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
390 | 
391 | #nav-bar:focus-within + #PersonalToolbar{
392 |   transition-delay: 100ms !important;
393 |   transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
394 | }
395 | 
396 | #navigator-toolbox:hover > #PersonalToolbar{
397 |   transition-delay: 100ms !important;
398 |   transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
399 | }
400 | 
401 | #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {  
402 |   transform: rotateX(0);
403 | }
404 | 
405 | /*toolbar buttons*/
406 | .toolbarbutton-1 {
407 |   fill: #9f1aff !important;
408 |   transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
409 | }
410 | 
411 | .toolbarbutton-1:hover {
412 |   fill: #00DDFF !important;
413 | }
414 | 
415 | .toolbarbutton-1[open="true"] {
416 |   fill: #00DDFF !important;
417 | }
418 | 
419 | .toolbarbutton-1[disabled] {
420 |   fill: #652299 !important;
421 | }
422 | 
423 | .toolbarbutton-1 .toolbarbutton-icon,
424 | .toolbarbutton-1 .toolbarbutton-badge-stack {
425 |     background: none !important;
426 | }
427 | 
428 | /*contextmenu right-click pg*/
429 | #context-navigation menuitem {
430 |   color: #9f1aff !important;
431 |   transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
432 | }
433 | #context-navigation menuitem:hover {
434 |   color: #00DDFF !important;
435 |   background: none !important;
436 | }
437 | 
438 | #context-navigation
439 |     > .menuitem-iconic
440 |     > .menu-iconic-left
441 |     > .menu-iconic-icon {
442 | 	background-color: transparent !important;
443 | }
444 | 
445 |   .sidebar-splitter {
446 | 	display: none !important
447 |   }
448 | 
449 | /* menu customizations */
450 | menupopup > menuitem,
451 | menupopup > menu
452 |  {
453 | 	border-radius: 4px !important;
454 | 	margin-left: 8px !important;
455 | 	margin-right: 8px !important;
456 | }
457 | 
458 | 
459 | /** Menu top items border and padding */
460 | /* context menu top left button padding */
461 | menugroup > menuitem:first-child {  
462 | 	border-radius: 4px !important;
463 | 	padding-left: 8px !important;
464 | }
465 | /* context menu top right button padding */
466 | menugroup > menuitem:last-child {  
467 | 	border-radius: 4px !important;
468 | 	padding-right: 8px !important;
469 | 
470 | }
471 | /* context menu top buttons radius */
472 | menugroup > menuitem {
473 | 	border-radius: 4px !important;
474 | }
475 | menugroup > menuitem > hbox > image {  
476 |   border-radius: 4px !important;
477 | }
478 | /* for menu item with submenu  */
479 | .panel-header > .subviewbutton {
480 | 	border-radius: 4px !important;
481 |   }
482 | 
483 | /* green dot on pinned tab for site update notif */
484 | /* in console for testing: var titlechanger = window.setInterval(function(){document.title=document.title+'0';}, 5000); */
485 | .tabbrowser-tab > .tab-stack >
486 | .tab-content[pinned][titlechanged]:not([selected="true"]){
487 |  background-position: bottom !important;
488 | }
489 | 
490 | /* bookmarks star appear on urlbar hover and focus */
491 | #star-button-box{
492 |     display: none !important;
493 | }
494 | 
495 | #urlbar:hover #star-button-box{
496 |     display: -moz-box !important;
497 | }
498 | 
499 | #urlbar[focused=true] #star-button-box{
500 |     display: -moz-box !important;
501 | }
502 | 
503 | #urlbar[open=true] #star-button-box{
504 |     display: -moz-box !important;
505 | }
506 | 
507 | /*prevent tab overflow to expand causing height changes */
508 | #tabbrowser-tabs,
509 | #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
510 |   min-height: unset !important;
511 | }
512 | #TabsToolbar{ --toolbarbutton-inner-padding: 2px !important; }
513 | 
514 | /*container tab label color when selected */
515 |   .tabbrowser-tab[class*="identity-color-"] .tab-label {
516 |     color: var(--identity-tab-color) !important;
517 | }
518 | 
519 | 


--------------------------------------------------------------------------------