API tools faq
paste
Advertisement
alvinrium

userchrome 2.5.9

alvinrium
Jun 27th, 2025
7
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.85 KB | Source Code | 0 0
raw download clone embed print report
  1. @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  2.  
  3. :root {
  4. --bg1: light-dark(#f5f6f6, #383838);
  5. --bg2: light-dark(#fff, #454545);
  6. --bg3: light-dark(rgba(50, 50, 50, .1), rgba(225, 225, 225, .1));
  7. --bg4: light-dark(rgba(255, 255, 255, .75), rgba(15, 15, 12, .75));
  8. --bs1: 0 5px 15px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .15);
  9. --bs2: 0 5px 15px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .5);
  10. --outline-color: light-dark(#7db0f7, #2c749f);
  11. --button-bgcolor: light-dark(rgba(70, 70, 70, .12), rgba(170, 170, 170, .15)) !important;
  12. --button-hover-bgcolor: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important;
  13. --button-active-bgcolor: light-dark(rgba(70, 70, 70, .15), rgba(170, 170, 170, .3)) !important;
  14. --button-background-color: var(--button-bgcolor) !important;
  15. --button-background-color-hover: var(--button-hover-bgcolor) !important;
  16. --button-background-color-active: var(--button-active-bgcolor) !important;
  17. --in-content-primary-button-background: light-dark(#2b87fb, #3078ef) !important;
  18. --in-content-primary-button-background-hover: light-dark(#227cfb, #2566e1) !important;
  19. --in-content-primary-button-background-active: light-dark(#1c66e8, #225cca) !important;
  20. --in-content-primary-button-text-color: #fff !important;
  21. --devtools-splitter-color: transparent !important;
  22. --button-text-color-primary: #fff !important;
  23. --button-primary-color: #fff !important;
  24. --color-accent-primary: light-dark(#2b87fb, #3078ef) !important;
  25. --color-accent-primary-hover: light-dark(#227cfb, #2566e1) !important;
  26. --color-accent-primary-active: light-dark(#1c66e8, #225cca) !important;
  27. --button-primary-bgcolor: light-dark(#2b87fb, #3078ef) !important;
  28. --button-primary-hover-bgcolor: light-dark(#227cfb, #2566e1) !important;
  29. --button-primary-active-bgcolor: light-dark(#1c66e8, #225cca) !important;
  30. --in-content-button-background: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important;
  31. --in-content-button-background-hover: light-dark(rgba(70, 70, 70, .15), rgba(170, 170, 170, .3)) !important;
  32. --in-content-button-background-active: light-dark(rgba(70, 70, 70, .12), rgba(170, 170, 170, .15)) !important;
  33. --link-color: light-dark(#4481f2, #1280fd) !important;
  34. --toolbar-field-focus-background-color: light-dark(rgba(155, 155, 155, .25), rgba(195, 195, 195, .25)) !important;
  35. --urlbarView-result-button-hover-color: light-dark(rgba(0, 0, 0, .8), rgba(255, 255, 255, .8)) !important;
  36. --urlbarView-result-button-hover-background-color: light-dark(rgba(155, 155, 155, .5), rgba(195, 195, 195, .5)) !important;
  37. --toolbarbutton-icon-fill-attention: light-dark(#4481f2, #1280fd) !important;
  38. --arrowpanel-background: light-dark(#fff, #383838) !important;
  39. --focus-outline-color: transparent !important;
  40. --in-content-box-background: light-dark(rgba(155, 155, 155, .2), rgba(195, 195, 195, .2)) !important;
  41. --background-color-box: light-dark(rgba(155, 155, 155, .2), rgba(195, 195, 195, .2)) !important;
  42. --in-content-box-border-color: transparent !important;
  43. --sidebar-background-color: transparent !important;
  44. --sidebar-border-color: transparent !important;
  45. --sidebar-box-border: transparent !important;
  46. --sidebar-box-background: light-dark(rgba(102, 105, 108, .1), rgba(165, 165, 165, .1)) !important;
  47. --urlbarView-hover-background: light-dark(rgba(155, 155, 155, .2), rgba(195, 195, 195, .2)) !important;
  48. --urlbarView-highlight-background: light-dark(rgba(155, 155, 155, .3), rgba(195, 195, 195, .3)) !important;
  49. --urlbarView-highlight-color: light-dark(#000, #fff) !important;
  50. --input-bgcolor: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important;
  51. --input-border-color: transparent !important;
  52. --tabstrip-min-height: unset !important;
  53. --tab-icon-overlay-fill: light-dark(rgba(0, 0, 0, .8), rgba(225, 225, 225, .8)) !important;
  54. --toolbarbutton-hover-background: color-mix(in srgb, currentColor 10%, transparent) !important;
  55. --toolbarbutton-active-background: color-mix(in srgb, currentColor 15%, transparent) !important;
  56. @media (-moz-platform: windows) {
  57. --bs1: 0 45px 65px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .17);
  58. --bs2: 0 45px 65px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .15);
  59. }
  60. }
  61.  
  62. :root[macOSNativeFullscreen] #navigator-toolbox {
  63. transform: none !important;
  64. &.fullscreen-with-menubar {
  65. box-shadow: none !important;
  66. }
  67. }
  68.  
  69. #tabbrowser-tabbox {
  70. box-shadow: none !important;
  71. outline: none !important;
  72. overflow: unset !important;
  73. }
  74.  
  75. :root:not([inDOMFullscreen], [chromehidden~="toolbar"]) {
  76. #tabbrowser-tabbox browser:not(.devtools-toolbox-bottom-iframe, .devtools-toolbox-side-iframe) {
  77. border-radius: 6px;
  78. clip-path: inset(0 round 8px);
  79. background-color: light-dark(#fff, #202020) !important;
  80. -moz-window-dragging: no-drag;
  81. }
  82.  
  83. .browserStack {
  84. border-radius: 8px;
  85. margin: 0 8px 8px;
  86. box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
  87. }
  88.  
  89. #tabbrowser-tabpanels {
  90. margin-top: 0;
  91. transition: .25s !important;
  92. background-color: transparent !important;
  93. }
  94.  
  95. .devtools-toolbox-side-iframe {
  96. border-radius: 8px;
  97. margin-bottom: 8px !important;
  98. box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
  99. -moz-window-dragging: no-drag;
  100. &:first-child { margin-left: 8px !important; }
  101. &:last-child { margin-right: 8px !important; }
  102. }
  103.  
  104. .devtools-toolbox-bottom-iframe {
  105. border-radius: 8px;
  106. margin: 0 8px 8px 8px !important;
  107. box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
  108. }
  109.  
  110. :has(#sidebar-main:not([hidden])) {
  111. .browserStack {
  112. margin-left: 0;
  113. }
  114.  
  115. .devtools-toolbox-side-iframe:first-child {
  116. margin-left: 0 !important;
  117. margin-right: 8px !important;
  118. }
  119.  
  120. .devtools-toolbox-bottom-iframe {
  121. margin-left: 0 !important;
  122. }
  123.  
  124. #sidebar-box {
  125. &:not([sidebar-positionend]) {
  126. &[sidebar-panel-open] {
  127. margin-inline-end: 2px !important;
  128. margin-bottom: 2px !important;
  129. }
  130. }
  131. }
  132. }
  133. }
  134.  
  135. #browser {
  136. clip-path: circle(100%);
  137. background-color: transparent !important;
  138. }
  139.  
  140. :has(#PersonalToolbar:hover, #sidebar-main:hover) {
  141. #tabbrowser-tabbox browser {
  142. -moz-window-dragging: unset;
  143. }
  144. }
  145.  
  146. #navigator-toolbox {
  147. background: none !important;
  148. border: none !important;
  149. z-index: unset !important;
  150. }
  151.  
  152. .browser-toolbar {
  153. border: none !important;
  154. }
  155.  
  156. .browser-titlebar {
  157. will-change: unset !important;
  158. }
  159.  
  160. #nav-bar {
  161. padding-top: 2px !important;
  162. height: 47px !important;
  163. @media (-moz-platform: windows) {
  164. @media not -moz-pref("sidebar.verticalTabs") {
  165. height: 48px !important;
  166. }
  167. }
  168. }
  169.  
  170. #nav-bar, #PersonalToolbar, #TabsToolbar {
  171. background: transparent !important;
  172. }
  173.  
  174. :root[inDOMFullscreen] {
  175. #tabbrowser-tabbox {
  176. margin: 0 !important;
  177. }
  178. }
  179.  
  180. :root[inFullscreen] {
  181. #nav-bar {
  182. padding-left: 0 !important;
  183. }
  184. }
  185.  
  186. :root[customizing] {
  187. #PersonalToolbar {
  188. outline: 1px dashed var(--button-active-bgcolor) !important;
  189. }
  190. }
  191.  
  192. @media not -moz-pref("sidebar.verticalTabs") {
  193. .titlebar-buttonbox-container {
  194. position: absolute !important;
  195. left: 7px;
  196. top: 15.5px;
  197. @media (-moz-platform: windows) {
  198. @media not -moz-pref("gwfox.plus") {
  199. left: unset;
  200. right: 0;
  201. top: 1px;
  202.  
  203. .titlebar-button {
  204. padding-top: 17px !important;
  205. padding-bottom: 18px !important;
  206. }
  207. }
  208. }
  209. }
  210.  
  211. .titlebar-spacer {
  212. display: none !important
  213. }
  214.  
  215. #navigator-toolbox {
  216. display: grid;
  217. grid-template-columns: minmax(auto, 0) auto;
  218. }
  219.  
  220. #nav-bar {
  221. width: fit-content !important;
  222. grid-area: 2 / 1 / auto / auto;
  223. padding-left: 76px !important;
  224. @media (-moz-platform: windows) {
  225. @media not -moz-pref("gwfox.plus") {
  226. padding-left: 0 !important;
  227. }
  228. }
  229.  
  230. toolbarspring {
  231. display: none;
  232. }
  233. }
  234.  
  235. #urlbar-container {
  236. max-width: 219px !important;
  237. }
  238.  
  239. #TabsToolbar {
  240. grid-area: 2 / 2 / auto / auto;
  241. padding-inline-end: 77px !important;
  242. margin-bottom: 5.5px !important;
  243. @media (-moz-platform: windows) {
  244. @media not -moz-pref("gwfox.plus") {
  245. padding-inline-end: 212px !important;
  246. }
  247. }
  248.  
  249. :has(#nav-bar-overflow-button:not(#nav-bar:not([overflowing], [nonemptyoverflow], [customizing]) > #nav-bar-overflow-button)) & {
  250. padding-inline-end: 111px !important;
  251. @media (-moz-platform: windows) {
  252. @media not -moz-pref("gwfox.plus") {
  253. padding-inline-end: 246px !important;
  254. }
  255. }
  256. }
  257. }
  258.  
  259. #navigator-toolbox > *:not(#TabsToolbar, #nav-bar) {
  260. grid-column: 1 / span 2 !important;
  261. }
  262.  
  263. #PanelUI-menu-button {
  264. position: fixed;
  265. inset-inline-end: 3px;
  266. @media (-moz-platform: windows) {
  267. @media not -moz-pref("gwfox.plus") {
  268. inset-inline-end: 138px;
  269. }
  270. }
  271. }
  272.  
  273. #nav-bar-overflow-button {
  274. position: fixed;
  275. inset-inline-end: 43px;
  276. @media (-moz-platform: windows) {
  277. @media not -moz-pref("gwfox.plus") {
  278. inset-inline-end: 178px;
  279. }
  280. }
  281. }
  282.  
  283. #unified-extensions-button {
  284. position: fixed;
  285. display: flex !important;
  286. inset-inline-end: 43px;
  287. @media (-moz-platform: windows) {
  288. @media not -moz-pref("gwfox.plus") {
  289. inset-inline-end: 178px;
  290. }
  291. }
  292.  
  293. :has(#nav-bar-overflow-button:not(#nav-bar:not([overflowing], [nonemptyoverflow], [customizing]) > #nav-bar-overflow-button)) & {
  294. inset-inline-end: 77px;
  295. @media (-moz-platform: windows) {
  296. @media not -moz-pref("gwfox.plus") {
  297. inset-inline-end: 212px;
  298. }
  299. }
  300. }
  301. }
  302. }
  303.  
  304. /* urlbar */
  305.  
  306. #urlbar {
  307. --urlbar-box-bgcolor: var(--button-hover-bgcolor) !important;
  308. margin: 0 !important;
  309. transition: margin .25s !important;
  310. }
  311.  
  312. #urlbar-container {
  313. -moz-window-dragging: drag;
  314. }
  315.  
  316. #urlbar-search-mode-indicator {
  317. margin-top: 3px !important;
  318. height: 22px !important;
  319. }
  320.  
  321. #urlbar-searchmode-switcher {
  322. background-color: transparent !important;
  323. }
  324.  
  325. #searchmode-switcher-dropmarker,
  326. #searchmode-switcher-close,
  327. #searchmode-switcher-title {
  328. display: none !important;
  329. }
  330.  
  331. #urlbar-background {
  332. height: 30px !important;
  333. border: none !important;
  334. border-radius: 6px !important;
  335. background: var(--button-hover-bgcolor) !important;
  336. transition: background .5s !important;
  337. }
  338.  
  339. #urlbar:hover #urlbar-background {
  340. background: var(--button-active-bgcolor) !important;
  341. box-shadow: none !important;
  342. transition: background .5s !important;
  343. }
  344.  
  345. #urlbar[open] #urlbar-background {
  346. transition: none !important;
  347. }
  348.  
  349. .urlbar-input-container {
  350. padding: 0 !important;
  351. height: 30px !important;
  352. border-radius: 6px !important;
  353. }
  354.  
  355. #urlbar-input::placeholder,
  356. .searchbar-textbox::placeholder {
  357. font-size: 12.5px !important;
  358. text-align: left !important;
  359. }
  360.  
  361. #urlbar-input {
  362. text-align: center !important;
  363. margin-bottom: 1px !important;
  364. }
  365.  
  366. .urlbar-input-container[pageproxystate=invalid] .urlbar-input {
  367. mask-image: linear-gradient(to left, transparent, #fff 10ch);
  368. }
  369.  
  370. #urlbar[focused] > .urlbar-input-container {
  371. outline: none !important;
  372. }
  373.  
  374. #urlbar > #urlbar-background {
  375. outline-style: solid !important;
  376. outline-color: transparent !important;
  377. outline-width: 18px !important;
  378. }
  379.  
  380. #urlbar[focused]:not([suppress-focus-border]) > #urlbar-background {
  381. outline-color: var(--outline-color) !important;
  382. outline-width: 3px !important;
  383. outline-offset: -1px !important;
  384. transition: all .3s cubic-bezier(.8, 0, 0, .8) !important;
  385. }
  386.  
  387. #urlbar:not([breakout][breakout-extend]) {
  388. transform: none !important;
  389. }
  390.  
  391. #urlbar:not([breakout][breakout-extend]) #identity-icon-label {
  392. display: none !important;
  393. }
  394.  
  395. #urlbar[breakout][breakout-extend] {
  396. position: fixed !important;
  397. top: 20vh !important;
  398. left: 18vw !important;
  399. width: 65vw !important;
  400. max-width: unset !important;
  401. animation-name: panel-grow;
  402. animation-duration: 250ms;
  403. margin-top: 25px !important;
  404. transition: none !important;
  405.  
  406. #urlbar-input,
  407. #urlbar-input::placeholder {
  408. font-size: 21px !important;
  409. }
  410.  
  411. .urlbar-input-container {
  412. height: 50px !important;
  413. padding-inline-start: 15px !important;
  414. padding-inline-end: 15px !important;
  415. & > :is(box, image) {
  416. margin-top: 10px !important;
  417. }
  418. }
  419.  
  420. .urlbarView-row-inner {
  421. flex-wrap: nowrap !important;
  422. }
  423.  
  424. .urlbarView-no-wrap {
  425. max-width: 50% !important;
  426. flex-basis: 0 !important;
  427. }
  428.  
  429. .urlbarView-row[has-url] .urlbarView-url {
  430. margin-left: 0 !important;
  431. }
  432.  
  433. .urlbarView-row[has-url] .urlbarView-title-separator {
  434. display: block !important;
  435. }
  436.  
  437. #urlbar-search-mode-indicator {
  438. margin-top: 13px !important;
  439. }
  440. }
  441.  
  442. #urlbar[breakout][breakout-extend] #urlbar-background {
  443. background-color: var(--bg4) !important;
  444. backdrop-filter: blur(30px) !important;
  445. box-shadow: var(--bs1) !important;
  446. }
  447.  
  448. :has(#urlbar[breakout][breakout-extend]) {
  449. #urlbar-background {
  450. height: unset !important;
  451. }
  452. }
  453.  
  454. :has(#urlbar[usertyping]) {
  455. #urlbar {
  456. position: fixed !important;
  457. top: 20vh !important;
  458. left: 18vw !important;
  459. width: 65vw !important;
  460. max-width: unset !important;
  461. margin-top: 25px !important;
  462. }
  463.  
  464. #urlbar-background {
  465. background-color: var(--bg4) !important;
  466. backdrop-filter: blur(30px) !important;
  467. box-shadow: var(--bs1) !important;
  468. height: 50px !important;
  469. }
  470.  
  471. .urlbar-input-container {
  472. height: 50px !important;
  473. & > :is(box, image) {
  474. margin-top: 10px !important;
  475. }
  476. }
  477.  
  478. #urlbar-input {
  479. font-size: 21px !important;
  480. }
  481.  
  482. #urlbar[focused] #urlbar-background {
  483. box-shadow: var(--bs1) !important;
  484. }
  485.  
  486. .urlbar-revert-button {
  487. margin-top: 10px !important;
  488. margin-right: 5px !important;
  489. }
  490.  
  491. #urlbar-search-mode-indicator {
  492. margin-top: 13px !important;
  493. }
  494.  
  495. #tabbrowser-tabs[orient="horizontal"] {
  496. margin-top: 0 !important;
  497. }
  498. }
  499.  
  500. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  501. #urlbar-container {
  502. max-height: 30px !important;
  503. min-height: 30px !important;
  504. margin-top: 6.5px !important;
  505. border-radius: 6px;
  506. background: var(--button-active-bgcolor);
  507. }
  508. }
  509.  
  510. .urlbarView-body-outer {
  511. padding: 0 8px !important;
  512. }
  513.  
  514. .urlbarView-body-inner {
  515. border: 0 !important;
  516. border-top: 1px solid rgba(105, 105, 105, .2) !important;
  517. }
  518.  
  519. .search-one-offs {
  520. background: transparent !important;
  521. border: none !important;
  522. padding: 8px !important;
  523. }
  524.  
  525. .urlbar-page-action {
  526. height: 28px !important;
  527. border-radius: 6px !important;
  528. padding: 6px !important;
  529. -moz-window-dragging: no-drag;
  530. }
  531.  
  532. @media -moz-pref("gwfox.plus") or (not -moz-pref("sidebar.verticalTabs")) {
  533. .urlbar-page-action:not(#star-button-box) {
  534. margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding));
  535. opacity: 0;
  536. transition: .2s;
  537. }
  538.  
  539. #urlbar[open] .urlbar-page-action,
  540. #urlbar:hover .urlbar-page-action,
  541. .urlbar-page-action[open] {
  542. opacity: 1;
  543. margin-inline-end: 0 !important;
  544. }
  545.  
  546. :has(#page-action-buttons > *[open]) {
  547. .urlbar-page-action {
  548. opacity: 1;
  549. margin-inline-end: 0 !important;
  550. }
  551. }
  552.  
  553. :has(#identity-permission-box > *[open]) {
  554. #identity-permission-box {
  555. opacity: 1;
  556. margin-inline-start: 0 !important;
  557. }
  558. }
  559.  
  560. #identity-permission-box, #notification-popup-box, #tracking-protection-icon-container {
  561. margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
  562. opacity: 0;
  563. transition: .2s;
  564. }
  565.  
  566. #urlbar[open] #tracking-protection-icon-container,
  567. #urlbar:hover #tracking-protection-icon-container,
  568. #tracking-protection-icon-container[open] {
  569. opacity: 1;
  570. margin-inline-start: 0 !important;
  571. }
  572.  
  573. #urlbar[open] #identity-permission-box,
  574. #urlbar[open] #notification-popup-box,
  575. #urlbar:hover #identity-permission-box,
  576. #urlbar:hover #notification-popup-box,
  577. #identity-permission-box[open],
  578. #notification-popup-box[open] {
  579. opacity: 1;
  580. margin-inline-start: 0 !important;
  581. }
  582.  
  583. .urlbar-page-action:active,
  584. #identity-permission-box:active,
  585. #notification-popup-box:active,
  586. #tracking-protection-icon-container:active {
  587. opacity: unset;
  588. }
  589.  
  590. #urlbar:-moz-window-inactive .urlbar-page-action:not(#star-button-box),
  591. #urlbar:-moz-window-inactive #identity-permission-box,
  592. #urlbar:-moz-window-inactive #notification-popup-box {
  593. opacity: 0 !important;
  594. }
  595.  
  596. #urlbar:-moz-window-inactive:hover .urlbar-page-action:not(#star-button-box),
  597. #urlbar:-moz-window-inactive:hover #identity-permission-box,
  598. #urlbar:-moz-window-inactive:hover #notification-popup-box {
  599. opacity: unset !important;
  600. }
  601. }
  602.  
  603. #urlbar-zoom-button {
  604. background: var(--button-hover-bgcolor) !important;
  605. }
  606.  
  607. #urlbar:-moz-window-inactive {
  608. * { opacity: 78%; }
  609. }
  610.  
  611. #urlbar[focused] > #urlbar-background,
  612. #searchbar:focus-within {
  613. box-shadow: none !important;
  614. }
  615.  
  616. .urlbarView-row:is([type=bookmark], [pinned]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  617. display: none !important;
  618. }
  619.  
  620. #searchbar {
  621. min-height: 28px !important;
  622. background: var(--button-hover-bgcolor) !important;
  623. border-radius: 6px !important;
  624. border: none !important;
  625. }
  626.  
  627. .search-go-button, .search-panel-header, .searchbar-separator {
  628. display: none !important;
  629. }
  630.  
  631. #PopupSearchAutoComplete {
  632. --panel-background: var(--bg2) !important;
  633. --panel-border-color: transparent !important;
  634. }
  635.  
  636. /* button */
  637.  
  638. .toggle-button { --toggle-dot-background-color-on-pressed: #fff !important; }
  639. #blocked-permissions-container, #picture-in-picture-button,
  640. #urlbar-go-button, .private-browsing-indicator-with-label,
  641. #reset-pbm-toolbar-button,
  642. #firefox-view-button, #fxa-toolbar-menu-button,
  643. #userContext-icons, #userContext-label,
  644. #scrollbutton-up, #scrollbutton-down,
  645. .sharing-icon, #save-to-pocket-button {
  646. display: none !important;
  647. }
  648.  
  649. .tab-close-button, .tab-icon-overlay, .tab-icon-image, span[part="button"],
  650. .toolbarbutton-1, #identity-permission-box,
  651. #notification-popup-box, #star-button,
  652. #translations-button-circle-arrows,
  653. #reader-mode-button > .urlbar-icon,
  654. #translations-button > #translations-button-icon,
  655. #shopping-sidebar-button > .urlbar-icon , #identity-box,
  656. #tracking-protection-icon-container {
  657. fill: light-dark(#525252, #c9c9cb) !important;
  658. fill-opacity: 1 !important;
  659. }
  660.  
  661. .tab-close-button:active, .tab-icon-overlay:active, span[part="button"]:active,
  662. .toolbarbutton-1:active, #identity-permission-box:active,
  663. #notification-popup-box:active, #star-button:active,
  664. #translations-button-circle-arrows:active,
  665. #reader-mode-button:active > .urlbar-icon,
  666. #translations-button:active > #translations-button-icon,
  667. #shopping-sidebar-button:active > .urlbar-icon , #identity-box:active,
  668. #tracking-protection-icon-container:active {
  669. fill: light-dark(#2d2d2d, #ececec) !important;
  670. }
  671.  
  672. #viewButton {
  673. border: none !important;
  674. background: none !important;
  675. border-radius: 4px !important;
  676. }
  677.  
  678. #viewButton:hover {
  679. background-color: var(--button-hover-bgcolor) !important;
  680. }
  681.  
  682. #viewButton[open] {
  683. background-color: var(--button-active-bgcolor) !important;
  684. }
  685.  
  686. #downloads-indicator-progress-outer {
  687. border: 1.5px solid light-dark(#525252, #c9c9cb) !important;
  688. width: 17px !important;
  689. height: 17px !important;
  690. }
  691.  
  692. .webextension-browser-action {
  693. border-radius: 6px !important;
  694. margin-bottom: 8.5px !important;
  695. width: 30px !important;
  696. }
  697.  
  698. #nav-bar .toolbarbutton-1 {
  699. max-height: 30px !important;
  700. margin-top: 6.5px !important;
  701. }
  702.  
  703. #nav-bar .toolbarbutton-1 > .toolbarbutton-icon {
  704. height: 30px !important;
  705. width: 30px !important;
  706. padding: 6px !important;
  707. border-radius: 6px !important;
  708. }
  709.  
  710. #TabsToolbar .toolbarbutton-1 {
  711. max-height: 30px !important;
  712. margin: unset !important;
  713. margin-top: 4px !important;
  714. margin-bottom: 3px !important;
  715. }
  716.  
  717. #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
  718. height: 30px !important;
  719. width: 30px !important;
  720. padding: 6px !important;
  721. border-radius: 6px !important;
  722. }
  723.  
  724. #TabsToolbar #downloads-button > .toolbarbutton-badge-stack {
  725. height: 30px !important;
  726. width: 30px !important;
  727. border-radius: 6px !important;
  728. padding: 6.5px 5.5px 5.5px 6.5px !important;
  729. }
  730.  
  731. #PanelUI-menu-button > .toolbarbutton-badge-stack {
  732. height: 30px !important;
  733. width: 30px !important;
  734. border-radius: 6px !important;
  735. padding: 6px 5.5px 0 !important;
  736. }
  737.  
  738. #PanelUI-menu-button .toolbarbutton-icon {
  739. height: 19px !important;
  740. width: 19px !important;
  741. }
  742.  
  743. #nav-bar {
  744. #downloads-button > .toolbarbutton-badge-stack {
  745. height: 30px !important;
  746. width: 30px !important;
  747. border-radius: 6px !important;
  748. padding: 6.5px 5.5px 5.5px 6.5px !important;
  749. }
  750. }
  751.  
  752. #page-action-buttons {
  753. margin-right: 0 !important;
  754. margin-bottom: 0 !important;
  755. }
  756.  
  757. #identity-box {
  758. height: 28px !important;
  759. border-radius: 6px !important;
  760. }
  761.  
  762. #identity-box:hover {
  763. background: rgba(70, 70, 70, .1) !important;
  764. }
  765.  
  766. .identity-box-button {
  767. background: none !important;
  768. }
  769.  
  770. #notification-popup-box {
  771. margin-top: 0 !important;
  772. background: none !important;
  773. }
  774.  
  775. #tracking-protection-icon-container {
  776. height: 28px !important;
  777. border-radius: 6px !important;
  778. }
  779.  
  780. #star-button[starred], #translations-button-circle-arrows,
  781. #reader-mode-button[readeractive] > .urlbar-icon,
  782. #translations-button[translationsactive] > #translations-button-icon,
  783. #shopping-sidebar-button[shoppingsidebaropen] > .urlbar-icon {
  784. fill: light-dark(#525252, #c9c9cb) !important;
  785. }
  786.  
  787. :has(#star-button-box[open]) {
  788. #star-button[starred] {
  789. animation-name: urlbar-zoom-reset-pulse;
  790. animation-duration: 250ms;
  791. }
  792. }
  793.  
  794. #appMenu-fullscreen-button2 .toolbarbutton-icon {
  795. background: none !important;
  796. }
  797.  
  798. #appMenu-fullscreen-button2:hover {
  799. background: var(--button-hover-bgcolor) !important;
  800. }
  801.  
  802. #appMenu-fullscreen-button2:active {
  803. background: var(--button-active-bgcolor) !important;
  804. }
  805.  
  806. #appMenu-zoom-controls {
  807. border-top: 1px solid var(--bg3) !important;
  808. }
  809.  
  810. .checkbox-check:not([native]) {
  811. appearance: none !important;
  812. background-color: transparent !important;
  813. border-radius: 2px !important;
  814. border: 2px solid rgba(165, 165, 165, .8) !important;
  815. &[checked] {
  816. background-color: light-dark(#4481f2, #1280fd) !important;
  817. background-image: url("resources/check.svg") !important;
  818. border: none !important;
  819. &:hover:active { background-color: light-dark(#0a4eb8, #417bde) !important; }
  820. }
  821. }
  822.  
  823. /* tabs */
  824.  
  825. .tab-background {
  826. border: none !important;
  827. box-shadow: none !important;
  828. border-radius: 6px !important;
  829. #tabbrowser-tabs[movingtab-createGroup] & {
  830. outline: none !important;
  831. &[dragover-createGroup] {
  832. background-color: color-mix(in srgb, var(--dragover-tab-group-color) 38%, transparent) !important;
  833. }
  834. }
  835. }
  836.  
  837. tab > stack {
  838. margin: 0 1px !important;
  839. }
  840.  
  841. tab .tab-label {
  842. font-size: 13px !important;
  843. margin-bottom: 1px !important;
  844. }
  845.  
  846. #tabbrowser-tabs[orient="horizontal"]:not([overflow]) {
  847. margin-inline-start: 0 !important;
  848. padding-inline-start: 0 !important;
  849. }
  850.  
  851. #tabbrowser-tabs[orient="horizontal"][overflow] {
  852. padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) - 2px) !important;
  853. margin-inline-start: 0 !important;
  854. }
  855.  
  856. #tabbrowser-tabs[orient="horizontal"][overflow]:has([pinned]) {
  857. padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
  858. }
  859.  
  860. #tabbrowser-tabs {
  861. --tab-min-width: 88px !important;
  862. margin-bottom: -1px !important;
  863. border-inline-start: none !important;
  864. }
  865.  
  866. #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  867. margin-inline-start: 0 !important;
  868. }
  869.  
  870. #pinned-tabs-container[orient="horizontal"] {
  871. margin-inline-end: 0 !important;
  872. }
  873.  
  874. #tabbrowser-tabs[movingtab] {
  875. margin-bottom: -16px !important;
  876. }
  877.  
  878. #alltabs-button {
  879. list-style-image: url("resources/alltabs.svg") !important;
  880. > .toolbarbutton-badge-stack {
  881. height: 30px !important;
  882. width: 30px !important;
  883. padding: 6px 0 0 6px !important;
  884. border-radius: 6px !important;
  885. > .toolbarbutton-icon {
  886. height: 18px !important;
  887. width: 18px !important;
  888. margin: unset !important;
  889. }
  890. }
  891. }
  892.  
  893. .tabbrowser-tab:not([selected]) .tab-close-button {
  894. display: none;
  895. }
  896.  
  897. .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  898. display: flex !important;
  899. }
  900.  
  901. .tab-background:not([selected]) {
  902. background: var(--button-hover-bgcolor) !important;
  903. transition: background .5s !important;
  904. }
  905.  
  906. .tab-background[selected] {
  907. background: light-dark(rgba(70, 70, 70, .18), rgba(170, 170, 170, .4)) !important;
  908. }
  909.  
  910. .tabbrowser-tab:hover .tab-background {
  911. background: var(--button-active-bgcolor) !important;
  912. transition: background .5s !important;
  913. }
  914.  
  915. .tab-icon-overlay {
  916. scale: .7;
  917. &:hover { scale: .8; }
  918. &:is([soundplaying], [muted], [activemedia-blocked]) {
  919. background-color: transparent !important;
  920. border: none !important;
  921. &:not([pinned]) {
  922. background-size: 16px !important;
  923. }
  924. &:hover {
  925. background-color: var(--button-hover-bgcolor) !important;
  926. }
  927. &:active {
  928. background-color: var(--button-active-bgcolor) !important;
  929. }
  930. }
  931. :is(
  932. :root[uidensity=compact],
  933. #tabbrowser-tabs[secondarytext-unsupported],
  934. :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
  935. ) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
  936. :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
  937. opacity: 1 !important;
  938. }
  939. }
  940.  
  941. .tab-secondary-label {
  942. display: none !important;
  943. }
  944.  
  945. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  946. min-height: 18px !important;
  947. max-width: 2px !important;
  948. margin: 6px 0 0 0 !important;
  949. border-radius: 2px !important;
  950. }
  951.  
  952. #tab-preview-panel {
  953. --panel-padding: 0 !important;
  954. }
  955.  
  956. @media not -moz-pref("sidebar.verticalTabs") {
  957. .tabbrowser-tab[selected]:not([pinned]) {
  958. min-width: 138px !important;
  959. }
  960.  
  961. .tabbrowser-tab[pinned] .tab-icon-image {
  962. margin-right: 5.5px !important;
  963. }
  964.  
  965. .tab-content[pinned] {
  966. margin-right: 5px;
  967. padding-left: 8px !important;
  968. background-image: url("resources/pinned.svg");
  969. background-repeat: no-repeat;
  970. background-position: right bottom 10px;
  971. -moz-context-properties: fill, fill-opacity;
  972. fill: currentColor;
  973. fill-opacity: .6;
  974. & .tab-label-container {
  975. margin-right: 6px;
  976. mask-image: linear-gradient(to left, transparent, #fff 3ch);
  977. }
  978. }
  979.  
  980. .tab-background {
  981. max-height: 30px !important;
  982. min-height: 30px !important;
  983. }
  984.  
  985. #TabsToolbar #tabs-newtab-button > .toolbarbutton-icon,
  986. #TabsToolbar #new-tab-button > .toolbarbutton-icon {
  987. height: 32px !important;
  988. width: 32px !important;
  989. padding: 5px 7px !important;
  990. border-radius: 6px !important;
  991. background: none !important;
  992. }
  993.  
  994. #TabsToolbar #new-tab-button,
  995. #TabsToolbar #tabs-newtab-button {
  996. width: 30px;
  997. margin: 4px 3px -3px 3px !important;
  998. max-height: 30px !important;
  999. min-height: 30px !important;
  1000. border-radius: 6px !important;
  1001. }
  1002.  
  1003. #TabsToolbar #new-tab-button:hover,
  1004. #TabsToolbar #tabs-newtab-button:hover {
  1005. background: var(--button-hover-bgcolor) !important;
  1006. }
  1007.  
  1008. #TabsToolbar #new-tab-button:active,
  1009. #TabsToolbar #tabs-newtab-button:active {
  1010. background: var(--button-active-bgcolor) !important;
  1011. }
  1012.  
  1013. .tab-group-label {
  1014. color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
  1015. opacity: .9;
  1016. outline: none !important;
  1017. min-width: 5px !important;
  1018. font-weight: normal !important;
  1019. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 30%, transparent) !important;
  1020. }
  1021.  
  1022. .tab-group-label-container {
  1023. tab-group:not([collapsed]) > &::after {
  1024. background-color: transparent !important;
  1025. }
  1026. }
  1027.  
  1028. .tab-group-line {
  1029. margin: 5px !important;
  1030. border-radius: 50px !important;
  1031. width: 5px !important;
  1032. height: 5px !important;
  1033. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 60%, transparent) !important;
  1034. }
  1035. }
  1036.  
  1037. .tabbrowser-tab:active,
  1038. #tabs-newtab-button:active,
  1039. #vertical-tabs-newtab-button:active,
  1040. .tools-and-extensions > moz-button:active {
  1041. transform: scale(.98);
  1042. }
  1043.  
  1044. :has(.tab-icon-overlay:active, .tab-audio-button:active, .tab-close-button:active) {
  1045. .tabbrowser-tab {
  1046. transform: none;
  1047. }
  1048. }
  1049.  
  1050. /* popup */
  1051.  
  1052. menupopup, panel[type="arrow"] {
  1053. appearance: menupopup !important;
  1054. --panel-border-radius: 6px !important;
  1055. --panel-padding: 6px !important;
  1056. --panel-separator-color: var(--bg3) !important;
  1057. --arrowpanel-background: var(--bg2) !important;
  1058. --arrowpanel-border-color: transparent !important;
  1059. --arrowpanel-color: light-dark(#000, #fff) !important;
  1060. }
  1061.  
  1062. panel[type="arrow"] {
  1063. --panel-background: light-dark(rgba(255, 255, 255, .55), rgba(15, 15, 12, .55)) !important;
  1064. --arrowpanel-background: transparent !important;
  1065. --arrowpanel-border-radius: 0 !important;
  1066. }
  1067.  
  1068. @keyframes panel-grow {
  1069. 0% {
  1070. transform: scaleX(.96) scaleY(.95);
  1071. }
  1072. 100% {
  1073. transform: scale(1.0);
  1074. }
  1075. }
  1076.  
  1077. @keyframes slide-in {
  1078. 0%, 30% {
  1079. translate: 100%;
  1080. opacity: 0;
  1081. }
  1082. 100% {
  1083. translate: 0;
  1084. opacity: 1;
  1085. }
  1086. }
  1087.  
  1088. @keyframes slide-out {
  1089. 100% {
  1090. translate: 100%;
  1091. opacity: 0;
  1092. }
  1093. 0% {
  1094. translate: 0;
  1095. opacity: 1;
  1096. }
  1097. }
  1098.  
  1099. panelmultiview, popupnotification {
  1100. animation-name: panel-grow;
  1101. animation-duration: 250ms;
  1102. }
  1103.  
  1104. .panel-arrowcontent {
  1105. border: none !important;
  1106. }
  1107.  
  1108. .panel-arrow {
  1109. stroke: transparent !important;
  1110. }
  1111.  
  1112. .proton-zap {
  1113. border-image: none !important;
  1114. }
  1115.  
  1116. #toolbar-context-toggle-vertical-tabs + menuseparator,
  1117. .panel-footer toolbarseparator, .panel-header + toolbarseparator,
  1118. #identity-popup-mainView-panel-header + toolbarseparator,
  1119. #permission-popup-mainView-panel-header + toolbarseparator,
  1120. #protections-popup-mainView-panel-header-section + toolbarseparator {
  1121. display: none !important;
  1122. }
  1123.  
  1124. menupopup,
  1125. .popup-internal-box,
  1126. #PopupAutoComplete > .autocomplete-richlistbox,
  1127. .menupopup-arrowscrollbox {
  1128. background: light-dark(rgba(255, 255, 255, .55), rgba(15, 15, 12, .55)) !important;
  1129. }
  1130.  
  1131. #tabContextMenu .menu-icon,
  1132. #contentAreaContextMenu .menu-icon {
  1133. display: none;
  1134. }
  1135.  
  1136. menuitem, menu {
  1137. appearance: none !important;
  1138. border-radius: 4px !important;
  1139. height: 22px !important;
  1140. }
  1141.  
  1142. menu {
  1143. margin: 2px 0 !important;
  1144. }
  1145.  
  1146. menupopup > menuitem[selected] {
  1147. background: none !important;
  1148. color: inherit !important;
  1149. }
  1150.  
  1151. menupopup .bookmark-item {
  1152. margin: 2px 0 !important;
  1153. height: 22px !important;
  1154. }
  1155.  
  1156. menupopup menu:hover:not([disabled=true]),
  1157. menupopup menuitem:hover:not([disabled=true]),
  1158. menupopup menu[_moz-menuactive]:not([disabled=true]),
  1159. menupopup menuitem[_moz-menuactive]:not([disabled=true]),
  1160. .protections-popup-footer-button:not([disabled=true]):hover,
  1161. #protections-popup-show-report-stack:hover .protections-popup-footer-button,
  1162. .protections-popup-category:not([disabled=true]):hover,
  1163. .identity-popup-content-blocking-category:not([disabled=true]):hover,
  1164. #PlacesToolbar .bookmark-item:is(:hover, [open], [_moz-menuactive]),
  1165. #downloadsPanel-mainView .download-state:hover {
  1166. background: var(--button-hover-bgcolor) !important;
  1167. color: inherit !important;
  1168. }
  1169.  
  1170. toolbarseparator, menuseparator::before {
  1171. border-top: 1px solid var(--bg3) !important;
  1172. }
  1173.  
  1174. menupopup menuseparator {
  1175. border: none !important;
  1176. margin: 0 !important;
  1177. }
  1178.  
  1179. toolbarseparator[orient="vertical"] {
  1180. margin: 0 4px !important;
  1181. }
  1182.  
  1183. .dialogBox {
  1184. backdrop-filter: blur(30px) !important;
  1185. box-shadow: var(--bs1) !important;
  1186. animation-name: panel-grow;
  1187. animation-duration: 250ms;
  1188. #window-modal-dialog > .dialogOverlay > &:not(.spotlightBox) {
  1189. margin-top: 80px !important;
  1190. }
  1191. }
  1192.  
  1193. #window-modal-dialog::backdrop {
  1194. background: none !important;
  1195. }
  1196.  
  1197. window[role="dialog"] {
  1198. background-color: var(--bg4) !important;
  1199. }
  1200.  
  1201. #editBookmarkPanelContent > input,
  1202. #editBookmarkPanelContent > hbox > input {
  1203. appearance: none !important;
  1204. background-color: var(--button-hover-bgcolor) !important;
  1205. border: none !important;
  1206. box-shadow: none !important;
  1207. padding: 0 12px !important;
  1208. height: 20px !important;
  1209. border-radius: 2px !important;
  1210. margin-top: 2px !important;
  1211. margin-bottom: 2px !important;
  1212. }
  1213.  
  1214. #unified-extensions-view .panel-header,
  1215. #unified-extensions-view .panel-header + toolbarseparator,
  1216. #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton {
  1217. display:none !important;
  1218. }
  1219.  
  1220. #unified-extensions-view {
  1221. --uei-icon-size: 16px !important;
  1222. width: 22em !important;
  1223. }
  1224.  
  1225. @media -moz-pref("widget.macos.native-context-menus") {
  1226. panel[type="arrow"] {
  1227. --panel-background: transparent !important;
  1228. }
  1229.  
  1230. menupopup,
  1231. .popup-internal-box,
  1232. #PopupAutoComplete > .autocomplete-richlistbox,
  1233. .menupopup-arrowscrollbox {
  1234. background: transparent !important;
  1235. }
  1236.  
  1237. :root:not([chromehidden~="toolbar"]):has(#sidebar-main[hidden]) #sidebar-main,
  1238. window[role="dialog"], .findbar-container, #statuspanel-label,
  1239. #urlbar:is([breakout][breakout-extend], [usertyping]) #urlbar-background {
  1240. background-color: light-dark(rgba(255, 255, 255, .55), rgba(25, 25, 25, .65)) !important;
  1241. }
  1242. }
  1243.  
  1244. /* misc */
  1245.  
  1246. @-moz-document url("chrome://browser/content/browser.xhtml") {
  1247. :root:-moz-window-inactive body {background: var(--bg1) !important;}
  1248.  
  1249. tree {
  1250. background-color: var(--in-content-box-background) !important;
  1251. border: none !important;
  1252. }
  1253.  
  1254. #editBookmarkPanelContent > input,
  1255. #editBookmarkPanelContent > hbox > input {
  1256. height: 35px !important;
  1257. border-radius: 4px !important;
  1258. }
  1259.  
  1260. :root#main-window {
  1261. min-width: 1000px !important;
  1262. appearance: -moz-sidebar !important;
  1263. @media (-moz-platform: windows) {
  1264. appearance: unset !important;
  1265. }
  1266. }
  1267.  
  1268. :root#main-window[chromehidden~="toolbar"] {
  1269. min-width: unset !important;
  1270.  
  1271. .browser-toolbar {
  1272. display: none !important;
  1273. }
  1274.  
  1275. #tabbrowser-tabbox browser {
  1276. margin: 0 !important;
  1277. border-radius: 0 !important;
  1278. box-shadow: none !important;
  1279. }
  1280. }
  1281. }
  1282.  
  1283. @-moz-document url("chrome://browser/content/aboutDialog.xhtml") {
  1284. #aboutDialogContainer {
  1285. background: #282828 !important;
  1286. }
  1287.  
  1288. #bottomBox {
  1289. background: #333 !important;
  1290. }
  1291. }
  1292.  
  1293. treechildren::-moz-tree-row {
  1294. outline: none !important;
  1295. border-radius: 2px !important;
  1296. }
  1297.  
  1298. treechildren::-moz-tree-row(selected) {
  1299. background: var(--button-hover-bgcolor) !important;
  1300. }
  1301.  
  1302. .item.selected > .item-title-container {
  1303. background: var(--button-hover-bgcolor) !important;
  1304. color: light-dark(#000, #fff) !important;
  1305. border-radius: 2px !important;
  1306. }
  1307.  
  1308. treechildren::-moz-tree-image(selected),
  1309. treechildren::-moz-tree-twisty(selected),
  1310. treechildren::-moz-tree-cell-text(selected) {
  1311. color: light-dark(#000, #fff) !important;
  1312. }
  1313.  
  1314. .titleIcon {
  1315. background-color: transparent !important;
  1316. }
  1317.  
  1318. richlistbox {
  1319. border: none !important;
  1320. }
  1321.  
  1322. #customization-panelWrapper > .panel-arrowcontent,
  1323. #customization-container {
  1324. background-color: transparent !important;
  1325. }
  1326.  
  1327. #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
  1328. display: none !important;
  1329. }
  1330.  
  1331. #tab-notification-deck {
  1332. position: fixed;
  1333. top: 49px;
  1334. right: 6px;
  1335. z-index: 9;
  1336. }
  1337.  
  1338. #statuspanel-label {
  1339. border: none !important;
  1340. border-radius: 0 !important;
  1341. border-bottom-left-radius: 8px !important;
  1342. #statuspanel:not([mirror]) > &:-moz-locale-dir(rtl),
  1343. #statuspanel[mirror] > &:-moz-locale-dir(ltr) {
  1344. border-bottom-left-radius: 0 !important;
  1345. border-bottom-right-radius: 8px !important;
  1346. }
  1347. }
  1348.  
  1349. .findbar-container, #statuspanel-label {
  1350. background-color: var(--bg4) !important;
  1351. backdrop-filter: blur(30px) !important;
  1352. box-shadow: var(--bs1) !important;
  1353. @media (-moz-platform: windows) {
  1354. box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .15) !important;
  1355. }
  1356. }
  1357.  
  1358. @media (prefers-color-scheme: dark) {
  1359. :root:not([inDOMFullscreen]) {
  1360. #tabbrowser-tabbox browser {
  1361. box-shadow: 0 1.5px 6px #0000004d !important;
  1362. }
  1363. }
  1364.  
  1365. #urlbar[breakout][breakout-extend] #urlbar-background,
  1366. .dialogBox {
  1367. outline: 1px solid rgba(235, 235, 235, .2) !important;
  1368. outline-offset: -1px !important;
  1369. box-shadow: var(--bs2) !important;
  1370. }
  1371.  
  1372. .findbar-container, #statuspanel-label {
  1373. outline: 1px solid rgba(235, 235, 235, .2) !important;
  1374. outline-offset: -1px !important;
  1375. box-shadow: var(--bs2) !important;
  1376. @media (-moz-platform: windows) {
  1377. box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .5) !important;
  1378. }
  1379. }
  1380.  
  1381. #identity-box:hover {
  1382. background: rgba(170, 170, 170, .5) !important;
  1383. }
  1384.  
  1385. .swipe-nav-icon-circle-outline,
  1386. .swipe-nav-icon-arrow {
  1387. fill: #1280fd !important;
  1388. }
  1389.  
  1390. .swipe-nav-icon-circle {
  1391. fill: #2d2d2d !important;
  1392. }
  1393.  
  1394. .swipe-nav-icon.will-navigate {
  1395. > .swipe-nav-icon-circle-outline,
  1396. > .swipe-nav-icon-arrow {
  1397. fill: #2d2d2d !important;
  1398. }
  1399.  
  1400. > .swipe-nav-icon-circle {
  1401. fill: #1280fd !important;
  1402. }
  1403. }
  1404. }
  1405.  
  1406. findbar {
  1407. position: absolute !important;
  1408. top: 3px;
  1409. right: -8px;
  1410. width: calc(100% - 15px) !important;
  1411. height: 90px !important;
  1412. border: none !important;
  1413. background: none !important;
  1414. flex-direction: row-reverse;
  1415. white-space: nowrap;
  1416. animation-name: slide-in;
  1417. animation-duration: 250ms;
  1418. &:is([hidden="true"]) {
  1419. animation-name: slide-out;
  1420. }
  1421. }
  1422.  
  1423. findbar::after {
  1424. content: "";
  1425. display: flex;
  1426. flex-grow: 100;
  1427. }
  1428.  
  1429. .findbar-closebutton {
  1430. position: fixed;
  1431. right: 18px;
  1432. margin-top: 7px !important;
  1433. background: none !important;
  1434. z-index: 1;
  1435. }
  1436.  
  1437. .findbar-closebutton > image {
  1438. padding: 5px;
  1439. max-height: 24px !important;
  1440. max-width: 24px !important;
  1441. }
  1442.  
  1443. .findbar-closebutton:hover > image {
  1444. background: var(--button-hover-bgcolor);
  1445. border-radius: 5px;
  1446. }
  1447.  
  1448. .findbar-closebutton:active > image {
  1449. background: var(--button-active-bgcolor);
  1450. }
  1451.  
  1452. .findbar-container {
  1453. height: 42px !important;
  1454. margin-right: 25px;
  1455. overflow-inline: visible !important;
  1456. flex-direction: row-reverse;
  1457. border-radius: 8px !important;
  1458. }
  1459.  
  1460. .findbar-container > hbox {
  1461. margin-right: 30px;
  1462. }
  1463.  
  1464. .findbar-textbox, .findbar-textbox:-moz-window-inactive {
  1465. background: none !important;
  1466. width: 100px !important;
  1467. border: none !important;
  1468. }
  1469.  
  1470. .findbar-textbox {
  1471. outline-style: solid !important;
  1472. outline-color: transparent !important;
  1473. outline-width: 5px !important;
  1474. }
  1475.  
  1476. .findbar-textbox[focused],
  1477. .findbar-textbox:focus {
  1478. outline-color: var(--outline-color) !important;
  1479. outline-width: 3px !important;
  1480. transition: all .3s cubic-bezier(1, 0, 0, 1) !important;
  1481. box-shadow: none !important;
  1482. }
  1483.  
  1484. xul|search-textbox {
  1485. appearance: none !important;
  1486. border-bottom: 1px solid rgba(185, 185, 185, .1) !important;
  1487. border-radius: 6px !important;
  1488. height: 28px !important;
  1489. max-height: 28px !important;
  1490. padding: 6px !important;
  1491. background-color: light-dark(rgba(102, 105, 108, .1), rgba(165, 165, 165, .1)) !important;
  1492. }
  1493.  
  1494. xul|search-textbox[focused] {
  1495. outline: 3px solid var(--outline-color) !important;
  1496. outline-offset: -1px;
  1497. transition: outline 100ms ease-out;
  1498. }
  1499.  
  1500. input[type="search"] {
  1501. border: none !important;
  1502. border-bottom: 1px solid rgba(185, 185, 185, .1) !important;
  1503. border-radius: 6px !important;
  1504. height: 28px !important;
  1505. max-height: 28px !important;
  1506. background-color: light-dark(rgba(102, 105, 108, .1), rgba(165, 165, 165, .1)) !important;
  1507. }
  1508.  
  1509. #searchbar input[type="search"] {
  1510. background: none !important;
  1511. border: none !important;
  1512. outline: none !important;
  1513. }
  1514.  
  1515. #searchbar,
  1516. xul|search-textbox,
  1517. input[type="search"],
  1518. [type="text"] {
  1519. outline-style: solid !important;
  1520. outline-color: transparent !important;
  1521. outline-width: 18px !important;
  1522. }
  1523.  
  1524. #searchbar:focus-within,
  1525. xul|search-textbox[focused],
  1526. input[type="search"]:focus-within,
  1527. [type="text"]:focus-visible {
  1528. outline-color: var(--outline-color) !important;
  1529. outline-width: 3px !important;
  1530. outline-offset: -1px !important;
  1531. transition: all .3s cubic-bezier(.8, 0, 0, .8) !important;
  1532. }
  1533.  
  1534. @-moz-document url("chrome://browser/content/sidebar/sidebar-history.html"), url("chrome://browser/content/sidebar/sidebar-syncedtabs.html") {
  1535. input {
  1536. appearance: none !important;
  1537. min-height: 32px !important;
  1538. }
  1539. }
  1540.  
  1541. @-moz-document url("chrome://browser/content/sidebar/sidebar-customize.html") {
  1542. [data-l10n-id="sidebar-show-on-the-right"] {
  1543. display: none !important;
  1544. }
  1545. }
  1546.  
  1547. .sidebar-panel {
  1548. background-color: transparent !important;
  1549. }
  1550.  
  1551. #sidebar-main {
  1552. max-width: 221px !important;
  1553. }
  1554.  
  1555. #sidebar-box:-moz-window-inactive {
  1556. opacity: .5 !important;
  1557. }
  1558.  
  1559. :root[sidebar-expand-on-hover] {
  1560. #sidebar-main {
  1561. background-color: transparent !important;
  1562. }
  1563.  
  1564. #tabbrowser-tabbox {
  1565. clip-path: inset(-8px 0 0 -8px);
  1566. transition: clip-path 200ms;
  1567. }
  1568.  
  1569. :has(#tabbrowser-tabs[expanded]) {
  1570. #tabbrowser-tabbox {
  1571. clip-path: inset(-8px 0 0 168px);
  1572. }
  1573. }
  1574.  
  1575. :has(#sidebar-box:not([hidden])) {
  1576. #tabbrowser-tabbox {
  1577. clip-path: inset(-8px 0 0 -8px);
  1578. }
  1579. }
  1580.  
  1581. #sidebar-box {
  1582. &:not([sidebar-positionend]) {
  1583. &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
  1584. &[sidebar-ongoing-animations][sidebar-panel-open] {
  1585. margin-inline-start: 221px !important;
  1586. }
  1587. }
  1588. }
  1589. }
  1590.  
  1591. @media (-moz-platform: windows) {
  1592. :root:-moz-window-inactive {--sidebar-background-color: transparent !important;}
  1593.  
  1594. richlistitem[selected] {
  1595. background: none !important;
  1596. }
  1597.  
  1598. #downloadsListBox {
  1599. overflow-x: hidden;
  1600. border: 0 !important;
  1601. }
  1602.  
  1603. toolbarbutton:-moz-window-inactive {
  1604. opacity: 50% !important;
  1605. }
  1606.  
  1607. .urlbar-input-container > box {
  1608. -moz-window-dragging: no-drag !important;
  1609. }
  1610.  
  1611. menupopup, panel[type="arrow"] {
  1612. --panel-background: light-dark(rgba(255, 255, 255, .75), rgba(15, 15, 12, .75)) !important;
  1613. --panel-shadow-margin: 0px !important;
  1614. }
  1615.  
  1616. #context-navigation .menu-icon {
  1617. display: unset;
  1618. }
  1619.  
  1620. .findbar-container, #statuspanel-label {
  1621. box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .17) !important;
  1622. }
  1623.  
  1624. @media (prefers-color-scheme: dark) {
  1625. &:not(:-moz-window-inactive) {::selection { background: #416189 }}
  1626. * {
  1627. --organizer-pane-background: #2d2d2d !important;
  1628. --organizer-toolbar-background: #333 !important;
  1629. --organizer-content-background: #333 !important;
  1630. --organizer-hover-background: #2e2e2f !important;
  1631. --organizer-selected-background: #2e2e2f !important;
  1632. }
  1633.  
  1634. #urlbar[breakout][breakout-extend] #urlbar-background,
  1635. .findbar-container, .dialogBox, #statuspanel-label {
  1636. outline: none !important;
  1637. }
  1638.  
  1639. .findbar-container, #statuspanel-label {
  1640. box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .15) !important;
  1641. }
  1642.  
  1643. menupopup, panel[type="arrow"] {
  1644. --panel-border-color: rgba(255, 255, 255, .1) !important;
  1645. --arrowpanel-border-color: rgba(255, 255, 255, .1) !important;
  1646. }
  1647.  
  1648. .panel-arrowcontent {
  1649. border: 1px solid rgba(255, 255, 255, .1) !important;
  1650. }
  1651.  
  1652. treecol {
  1653. background-color: #333 !important;
  1654. }
  1655.  
  1656. richlistitem {
  1657. color: #fff !important;
  1658. }
  1659.  
  1660. #editBookmarkPanel .expander-up,
  1661. #editBookmarkPanel .expander-down {
  1662. border: none !important;
  1663. }
  1664. }
  1665. }
  1666.  
  1667. /* icons */
  1668.  
  1669. #back-button {
  1670. list-style-image: url("resources/left.svg") !important;
  1671. }
  1672.  
  1673. #forward-button {
  1674. list-style-image: url("resources/right.svg") !important;
  1675. }
  1676.  
  1677. #reload-button {
  1678. list-style-image: url("resources/reload.svg") !important;
  1679. }
  1680.  
  1681. #stop-button {
  1682. list-style-image: url("resources/stop.svg") !important;
  1683. }
  1684.  
  1685. #new-tab-button, #tabs-newtab-button {
  1686. list-style-image: url("resources/newtab.svg") !important;
  1687. }
  1688.  
  1689. #unified-extensions-button {
  1690. list-style-image: url("resources/extension.svg") !important;
  1691. }
  1692.  
  1693. #tracking-protection-icon {
  1694. list-style-image: url(chrome://browser/skin/tracking-protection.svg);
  1695. }
  1696.  
  1697. #sidebar-button {
  1698. list-style-image: url("resources/sidebars.svg") !important;
  1699. }
  1700.  
  1701. #sanitizeEverythingWarningIcon {
  1702. list-style-image: url("chrome://global/skin/icons/warning.svg") !important;
  1703. -moz-context-properties: fill;
  1704. fill: #f9c63b;
  1705. width: 48px !important;
  1706. height: 48px !important;
  1707. }
  1708.  
  1709. .tab-icon-image[src="chrome://branding/content/icon32.png"],
  1710. .tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] {
  1711. content: url("chrome://devtools/skin/images/browsers/firefox.svg");
  1712. }
  1713.  
  1714. #identity-box[pageproxystate="valid"].chromeUI #identity-icon {
  1715. list-style-image: url("chrome://devtools/skin/images/browsers/firefox.svg") !important;
  1716. }
  1717.  
  1718. .textbox-search-sign {
  1719. display: inherit !important;
  1720. width: 16px !important;
  1721. height: 16px !important;
  1722. opacity: .8 !important;
  1723. -moz-context-properties: fill;
  1724. fill: currentColor;
  1725. }
  1726.  
  1727. /* verticalTabs */
  1728.  
  1729. @media -moz-pref("sidebar.revamp") {
  1730. #sidebar {
  1731. box-shadow: none !important;
  1732. background-color: var(--button-bgcolor) !important;
  1733. }
  1734.  
  1735. #sidebar-main {
  1736. -moz-window-dragging: drag;
  1737. }
  1738.  
  1739. #sidebar-box {
  1740. -moz-window-dragging: no-drag;
  1741. max-width: 280px !important;
  1742. min-width: 280px !important;
  1743. &[sidebarcommand="viewGenaiChatSidebar"] {
  1744. max-width: 400px !important;
  1745. min-width: 400px !important;
  1746. }
  1747. }
  1748.  
  1749. .sidebar-splitter {
  1750. cursor: default !important;
  1751. }
  1752.  
  1753. .actions-list,
  1754. .tools-and-extensions {
  1755. -moz-window-dragging: no-drag;
  1756. &:-moz-window-inactive {
  1757. opacity: .5 !important;
  1758. }
  1759. }
  1760.  
  1761. span > img:is([src="chrome://browser/skin/history.svg"], [src="chrome://browser/skin/synced-tabs.svg"], [src="chrome://browser/skin/bookmark-hollow.svg"], [src="chrome://global/skin/icons/settings.svg"], [src="chrome://global/skin/icons/highlights.svg"]) {
  1762. fill: light-dark(#525252, #c9c9cb) !important;
  1763. }
  1764.  
  1765. span:active > img:is([src="chrome://browser/skin/history.svg"], [src="chrome://browser/skin/synced-tabs.svg"], [src="chrome://browser/skin/bookmark-hollow.svg"], [src="chrome://global/skin/icons/settings.svg"], [src="chrome://global/skin/icons/highlights.svg"]) {
  1766. fill: light-dark(#2d2d2d, #ececec) !important;
  1767. }
  1768. }
  1769.  
  1770. @media -moz-pref("sidebar.verticalTabs") {
  1771. .titlebar-buttonbox-container {
  1772. margin-top: -2px !important;
  1773. }
  1774.  
  1775. #back-button {
  1776. list-style-image: url("resources/back.svg") !important;
  1777. }
  1778.  
  1779. #forward-button {
  1780. list-style-image: url("resources/forward.svg") !important;
  1781. }
  1782.  
  1783. .tools-and-extensions {
  1784. margin-bottom: 6px !important;
  1785. }
  1786.  
  1787. .extensions, .customize-extensions-heading,
  1788. .tools-and-extensions > moz-button[extension],
  1789. button:has([src="chrome://global/skin/icons/settings.svg"]) {
  1790. display: none !important;
  1791. }
  1792.  
  1793. #sidebar-tools-and-extensions-splitter {
  1794. display: var(--display) !important;
  1795. background-color: transparent !important;
  1796. &:hover {
  1797. background-color: var(--outline-color) !important;
  1798. }
  1799. }
  1800.  
  1801. #vertical-pinned-tabs-splitter {
  1802. &:hover {
  1803. background-color: var(--outline-color) !important;
  1804. }
  1805. }
  1806.  
  1807. .tab-background {
  1808. border-radius: 8px !important;
  1809. }
  1810.  
  1811. .tabbrowser-tab:not([selected], [pinned], :hover) .tab-background {
  1812. background: transparent !important;
  1813. }
  1814.  
  1815. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  1816. margin: 6px 0 6px 0 !important;
  1817. }
  1818.  
  1819. .tab-group-label {
  1820. display: flex !important;
  1821. align-items: center;
  1822. font-weight: normal !important;
  1823. font-size: 13px !important;
  1824. color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
  1825. opacity: .9;
  1826. outline: none !important;
  1827. min-height: var(--tab-min-height) !important;
  1828. margin-block: 0 !important;
  1829. padding-block: 0 !important;
  1830. margin-left: 1px !important;
  1831. margin-right: 10px !important;
  1832. padding-left: 33px !important;
  1833. border-radius: 8px !important;
  1834. width: 100% !important;
  1835. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 30%, transparent) !important;
  1836. background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  1837. background-repeat: no-repeat;
  1838. background-position: left 10px bottom 10px;
  1839. -moz-context-properties: fill;
  1840. fill: currentColor;
  1841.  
  1842. tab-group[collapsed] > .tab-group-label-container > & {
  1843. background-image: url("chrome://global/skin/icons/folder.svg");
  1844. background-position: left 8px bottom 8px;
  1845. }
  1846.  
  1847. &::first-letter {
  1848. font: unset !important;
  1849. }
  1850. }
  1851.  
  1852. .tab-group-line {
  1853. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 60%, transparent) !important;
  1854.  
  1855. #tabbrowser-tabs & {
  1856. width: 1.5px !important;
  1857.  
  1858. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  1859. inset-block-start: 2px !important;
  1860. }
  1861.  
  1862. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  1863. inset-block-end: 2px !important;
  1864. }
  1865. }
  1866. }
  1867.  
  1868. .tab-group-label-container {
  1869. #tabbrowser-tabs & {
  1870. margin-block-start: 4px !important;
  1871. margin-block-end: 4px !important;
  1872. tab-group:not([collapsed]) > & {
  1873. padding-block-end: 0 !important;
  1874. }
  1875. }
  1876.  
  1877. #tabbrowser-tabs tab-group:not([collapsed]) > &::after {
  1878. width: 0 !important;
  1879. }
  1880. }
  1881.  
  1882. #tabbrowser-tabs {
  1883. tab-group > .tabbrowser-tab,
  1884. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  1885. margin-inline-start: 0 !important;
  1886. }
  1887. }
  1888.  
  1889. #urlbar[breakout][breakout-extend] {
  1890. left: 25vw !important;
  1891. }
  1892.  
  1893. :has(#urlbar[usertyping]) {
  1894. #urlbar {
  1895. left: 25vw !important;
  1896. }
  1897. }
  1898.  
  1899. :has(#tabbrowser-tabs:not([expanded])) {
  1900. .tab-group-line {
  1901. #tabbrowser-tabs & {
  1902. inset-inline: 0 !important;
  1903.  
  1904. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  1905. inset-block-start: 2px !important;
  1906. }
  1907.  
  1908. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  1909. inset-block-end: 2px !important;
  1910. }
  1911. }
  1912. }
  1913.  
  1914. .tab-group-label {
  1915. font-size: 0 !important;
  1916. margin-left: 10px !important;
  1917. padding: 0 !important;
  1918. width: 32px !important;
  1919. min-height: 32px !important;
  1920. max-width: 32px !important;
  1921. background-position: center;
  1922. }
  1923.  
  1924. .tab-close-button {
  1925. background-image: linear-gradient(var(--close-button-extra-background)),
  1926. linear-gradient(var(--bg2)) !important;
  1927.  
  1928. &:hover {
  1929. --close-button-extra-background: var(--button-background-color-ghost) !important;
  1930. }
  1931.  
  1932. &:hover:active {
  1933. --close-button-extra-background: var(--button-background-color-ghost-hover) !important;
  1934. }
  1935. }
  1936.  
  1937. #urlbar[breakout][breakout-extend] {
  1938. left: 20vw !important;
  1939. }
  1940.  
  1941. :has(#urlbar[usertyping]) {
  1942. #urlbar {
  1943. left: 20vw !important;
  1944. }
  1945. }
  1946. }
  1947. }
  1948.  
  1949. /* tweak */
  1950.  
  1951. @media -moz-pref("gwfox.plus") {
  1952. :root[sidebar-expand-on-hover] {
  1953. .tabbrowser-tab[pinned] .tab-icon-image {
  1954. margin-left: 6px;
  1955. }
  1956.  
  1957. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  1958. margin-left: unset;
  1959. }
  1960.  
  1961. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  1962. margin-left: 10.5px;
  1963. }
  1964.  
  1965. #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button,
  1966. .tabbrowser-tab[pinned] .tab-close-button {
  1967. display: none !important;
  1968. }
  1969.  
  1970. #tabbrowser-tabbox {
  1971. clip-path: inset(-50px 0 0 -8px);
  1972. transition: clip-path 200ms;
  1973. margin-left: 0 !important;
  1974. }
  1975.  
  1976. :has(#tabbrowser-tabs[expanded]) {
  1977. #tabbrowser-tabbox {
  1978. clip-path: inset(-50px 0 0 139px);
  1979. margin-left: 81px !important;
  1980. @media (-moz-platform: windows) {
  1981. margin-left: 81.5px !important;
  1982. }
  1983. }
  1984.  
  1985. #vertical-pinned-tabs-container {
  1986. .tab-content {
  1987. margin-left: -6px !important;
  1988. }
  1989.  
  1990. .tab-label-container {
  1991. margin-left: 1px !important;
  1992. }
  1993. }
  1994.  
  1995. :has(#sidebar-box:not([hidden])) {
  1996. #tabbrowser-tabbox {
  1997. margin-left: 0 !important;
  1998. }
  1999. }
  2000. }
  2001.  
  2002. :has(#sidebar-box:not([hidden])) {
  2003. #tabbrowser-tabbox {
  2004. clip-path: inset(-50px 0 0 -8px);
  2005. }
  2006. }
  2007. }
  2008.  
  2009. .tabbrowser-tab .tab-close-button {
  2010. margin-left: -5px;
  2011. order: 1;
  2012. }
  2013.  
  2014. .tabbrowser-tab .tab-label-container {
  2015. margin-left: 5px;
  2016. order: 3;
  2017. }
  2018.  
  2019. .tabbrowser-tab:not([pinned]):hover .tab-icon-image,
  2020. .tabbrowser-tab[selected]:not(:hover) .tab-close-button {
  2021. display: none;
  2022. }
  2023.  
  2024. .tabbrowser-tab:not([pinned]):hover .tab-label-container {
  2025. margin-left: 11.5px;
  2026. }
  2027.  
  2028. .tab-audio-button {
  2029. order: 10;
  2030. margin-right: -5px !important;
  2031. }
  2032.  
  2033. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2034. margin-left: 8.5px;
  2035. }
  2036.  
  2037. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2038. margin-left: 11.5px;
  2039. }
  2040.  
  2041. #PersonalToolbar {
  2042. position: fixed;
  2043. width: calc(100% - 16px);
  2044. margin: 0 8px 8px 8px !important;
  2045. height: 48px !important;
  2046. z-index: 1;
  2047. bottom: -32px;
  2048. opacity: 0;
  2049. transition: .25s;
  2050. padding-bottom: 0 !important;
  2051. background-color: var(--bg4) !important;
  2052. backdrop-filter: blur(30px) !important;
  2053. box-shadow: var(--bs1) !important;
  2054. border-bottom-left-radius: 8px !important;
  2055. border-bottom-right-radius: 8px !important;
  2056. overflow: initial !important;
  2057. }
  2058.  
  2059. #PersonalToolbar:hover {
  2060. bottom: 0;
  2061. opacity: 1;
  2062. transition: .25s;
  2063. }
  2064.  
  2065. #PersonalToolbar::before {
  2066. content: "";
  2067. position: absolute;
  2068. left: 0;
  2069. right: 0;
  2070. bottom: -8px;
  2071. height: 8px;
  2072. background-color: transparent;
  2073. }
  2074.  
  2075. toolbarbutton.bookmark-item:not(.subviewbutton) {
  2076. margin: 5px 0 !important;
  2077. }
  2078.  
  2079. #personal-toolbar-empty-description,
  2080. toolbarbutton.bookmark-item:not(.subviewbutton) {
  2081. padding: 4px 7px !important;
  2082. }
  2083.  
  2084. :root:-moz-window-inactive {
  2085. #PersonalToolbar {
  2086. background-color: var(--bg1) !important;
  2087. }
  2088. }
  2089.  
  2090. :root[customizing] {
  2091. #PersonalToolbar {
  2092. display: none !important;
  2093. }
  2094. }
  2095.  
  2096. @media (prefers-color-scheme: dark) {
  2097. #PersonalToolbar {
  2098. outline: 1px solid rgba(235, 235, 235, .2) !important;
  2099. outline-offset: -1px !important;
  2100. box-shadow: var(--bs2) !important;
  2101. @media (-moz-platform: windows) {
  2102. outline: none !important;
  2103. }
  2104. }
  2105. }
  2106.  
  2107. @media -moz-pref("widget.macos.native-context-menus") {
  2108. #PersonalToolbar {
  2109. background-color: light-dark(rgba(255, 255, 255, .55), rgba(25, 25, 25, .65)) !important;
  2110. }
  2111. }
  2112.  
  2113. @media -moz-pref("sidebar.revamp") {
  2114. :has(#sidebar-main:not([hidden])) {
  2115. #PersonalToolbar {
  2116. margin-left: 49.5px !important;
  2117. width: calc(100% - 57.5px);
  2118. @media (-moz-platform: windows) {
  2119. margin-left: 51px !important;
  2120. width: calc(100% - 59px);
  2121. }
  2122. }
  2123. }
  2124.  
  2125. :has(#sidebar-box:not([hidden])) {
  2126. #PersonalToolbar {
  2127. margin-left: 331px !important;
  2128. width: calc(100% - 339px);
  2129. @media (-moz-platform: windows) {
  2130. margin-left: 333px !important;
  2131. width: calc(100% - 341px);
  2132. }
  2133. }
  2134. }
  2135.  
  2136. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2137. #PersonalToolbar {
  2138. margin-left: 451px !important;
  2139. width: calc(100% - 459px);
  2140. @media (-moz-platform: windows) {
  2141. margin-left: 453px !important;
  2142. width: calc(100% - 461px);
  2143. }
  2144. }
  2145. }
  2146. }
  2147.  
  2148. @media -moz-pref("sidebar.verticalTabs") {
  2149. .titlebar-buttonbox-container {
  2150. position: absolute !important;
  2151. margin-top: unset !important;
  2152. left: 2px;
  2153. top: 15.5px;
  2154. }
  2155.  
  2156. .titlebar-buttonbox {
  2157. &::before {
  2158. content: "";
  2159. position: absolute;
  2160. top: -8px;
  2161. left: -16px;
  2162. width: 82px;
  2163. height: 200%;
  2164. }
  2165.  
  2166. &::after {
  2167. content: "";
  2168. }
  2169. }
  2170.  
  2171. #tab-notification-deck {
  2172. top: 6px;
  2173. }
  2174.  
  2175. .wrapper {
  2176. padding-top: 34px !important;
  2177. }
  2178.  
  2179. #sidebar-box {
  2180. margin-top: -39px !important;
  2181. margin-bottom: 2px !important;
  2182. @media (-moz-platform: windows) {
  2183. margin-top: -38px !important;
  2184. }
  2185. }
  2186.  
  2187. .tools-and-extensions > moz-button:not([extension]) {
  2188. padding-left: var(--padding) !important;
  2189. }
  2190.  
  2191. .extensions, .customize-extensions-heading,
  2192. .tools-and-extensions > moz-button[extension],
  2193. button:has([src="chrome://global/skin/icons/settings.svg"]) {
  2194. display: none !important;
  2195. }
  2196.  
  2197. .actions-list {
  2198. display: var(--display, inherit) !important;
  2199. &:has(.expanded-button) {
  2200. display: flex !important;
  2201. }
  2202. }
  2203.  
  2204. .webextension-browser-action {
  2205. margin-bottom: 9px !important;
  2206. }
  2207.  
  2208. #urlbar {
  2209. position: fixed !important;
  2210. left: 10px !important;
  2211. top: 47px !important;
  2212. max-width: 201px !important;
  2213. -moz-window-dragging: no-drag;
  2214. &::before {
  2215. content: "";
  2216. position: absolute;
  2217. top: -8px;
  2218. left: -9px;
  2219. width: 220px;
  2220. height: 48px;
  2221. }
  2222. }
  2223.  
  2224. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2225. .titlebar-buttonbox::after {
  2226. position: fixed;
  2227. top: 47px;
  2228. left: 10px;
  2229. width: 201px;
  2230. height: 32px;
  2231. border-radius: 8px;
  2232. background: var(--button-active-bgcolor);
  2233. pointer-events: none;
  2234. @media (-moz-platform: windows) {
  2235. background: light-dark(rgba(120, 120, 120, .1), rgba(155, 155, 155, .2));
  2236. }
  2237. }
  2238.  
  2239. #urlbar::before {
  2240. content: "";
  2241. position: fixed;
  2242. top: 37px;
  2243. left: 0;
  2244. }
  2245.  
  2246. #urlbar-container {
  2247. background: transparent;
  2248. }
  2249. }
  2250.  
  2251. :has(#sidebar-main:not([hidden])) {
  2252. :has(#urlbar[usertyping]) {
  2253. #urlbar {
  2254. left: 25vw !important;
  2255. }
  2256. }
  2257. }
  2258.  
  2259. #stop-reload-button {
  2260. &::before {
  2261. content: "";
  2262. position: absolute;
  2263. top: 0;
  2264. left: 0;
  2265. width: 226px;
  2266. height: 10px;
  2267. }
  2268.  
  2269. &::after {
  2270. content: "";
  2271. position: absolute;
  2272. top: 8px;
  2273. left: 213px;
  2274. width: 13px;
  2275. height: 100%;
  2276. }
  2277. }
  2278.  
  2279. #urlbar-background, .urlbar-input-container {
  2280. height: 32px !important;
  2281. border-radius: 8px !important;
  2282. }
  2283.  
  2284. #urlbar-search-mode-indicator {
  2285. margin-top: 4px !important;
  2286. }
  2287.  
  2288. #identity-box, #tracking-protection-icon-container {
  2289. margin-top: 1px !important;
  2290. }
  2291.  
  2292. #back-button {
  2293. list-style-image: url("resources/back.svg") !important;
  2294. }
  2295.  
  2296. #forward-button {
  2297. list-style-image: url("resources/forward.svg") !important;
  2298. }
  2299.  
  2300. #tabs-newtab-button {
  2301. margin-top: 5px !important;
  2302. }
  2303.  
  2304. #tabs-newtab-button,
  2305. #vertical-tabs-newtab-button {
  2306. font-size: 13px !important;
  2307. }
  2308.  
  2309. .tabbrowser-tab:-moz-window-inactive {
  2310. opacity: .5 !important;
  2311. }
  2312.  
  2313. .tabbrowser-tab .tab-label-container {
  2314. margin-left: 1px;
  2315. }
  2316.  
  2317. .tab-background {
  2318. border-radius: 8px !important;
  2319. }
  2320.  
  2321. .tabbrowser-tab:not([selected], [pinned], :hover) .tab-background {
  2322. background: transparent !important;
  2323. }
  2324.  
  2325. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2326. margin-left: 6.5px;
  2327. }
  2328.  
  2329. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  2330. margin: 6px 0 6px 0 !important;
  2331. }
  2332.  
  2333. :has(#sidebar-main:not([hidden])) {
  2334. #PersonalToolbar {
  2335. margin-left: 221px !important;
  2336. width: calc(100% - 229px);
  2337. }
  2338. }
  2339.  
  2340. :has(#sidebar-box:not([hidden])) {
  2341. #PersonalToolbar {
  2342. margin-left: 503px !important;
  2343. width: calc(100% - 511px);
  2344. }
  2345. }
  2346.  
  2347. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2348. #PersonalToolbar {
  2349. margin-left: 623px !important;
  2350. width: calc(100% - 631px);
  2351. }
  2352. }
  2353.  
  2354. :root:not([inDOMFullscreen]) {
  2355. #nav-bar {
  2356. padding-left: 71px !important;
  2357. }
  2358.  
  2359. #tabbrowser-tabpanels {
  2360. margin-top: -39px;
  2361. transition: .25s !important;
  2362. @media (-moz-platform: windows) {
  2363. margin-top: -38px;
  2364. }
  2365. }
  2366.  
  2367. :has(#nav-bar:hover) {
  2368. #tabbrowser-tabpanels {
  2369. margin-top: 0;
  2370. transition: .25s !important;
  2371. }
  2372. }
  2373. }
  2374.  
  2375. :has(#tabbrowser-tabs[expanded]) {
  2376. --padding: 0;
  2377. #sidebar-main {
  2378. min-width: 221px !important;
  2379. }
  2380.  
  2381. .tab-close-button {
  2382. margin-inline-end: calc(-1 * var(--tab-close-button-padding)) !important;
  2383. }
  2384.  
  2385. .tab-icon-overlay {
  2386. display: none !important;
  2387. }
  2388.  
  2389. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2390. display: block !important;
  2391. background-repeat: no-repeat;
  2392. background-position: center;
  2393. -moz-context-properties: fill, fill-opacity;
  2394. fill: currentColor;
  2395. fill-opacity: .6;
  2396. &[soundplaying] {
  2397. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2398. }
  2399. &[muted] {
  2400. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2401. }
  2402. &[activemedia-blocked] {
  2403. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2404. }
  2405. }
  2406.  
  2407. :has(.titlebar-buttonbox:hover, #urlbar:hover, #back-button:hover, #forward-button:hover, #stop-reload-button:hover, #sidebar-button:hover) {
  2408. #tabbrowser-tabpanels {
  2409. margin-top: -39px;
  2410. @media (-moz-platform: windows) {
  2411. margin-top: -38px;
  2412. }
  2413. }
  2414. }
  2415. }
  2416.  
  2417. :has(#tabbrowser-tabs:not([expanded])) {
  2418. --padding: 16px;
  2419. :has(#sidebar-main:not([hidden])) {
  2420. .sidebar-splitter {
  2421. cursor: col-resize !important;
  2422. }
  2423.  
  2424. #PersonalToolbar {
  2425. margin-left: 81px !important;
  2426. width: calc(100% - 89px);
  2427. @media (-moz-platform: windows) {
  2428. margin-left: 81.5px !important;
  2429. width: calc(100% - 89.5px);
  2430. }
  2431. }
  2432. }
  2433.  
  2434. :has(#sidebar-box:not([hidden])) {
  2435. .sidebar-splitter {
  2436. cursor: default !important;
  2437. }
  2438.  
  2439. #nav-bar {
  2440. padding-left: 352px !important;
  2441. }
  2442.  
  2443. #PersonalToolbar {
  2444. margin-left: 363px !important;
  2445. width: calc(100% - 371px);
  2446. @media (-moz-platform: windows) {
  2447. margin-left: 363.5px !important;
  2448. width: calc(100% - 371.5px);
  2449. }
  2450. }
  2451. }
  2452.  
  2453. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2454. #nav-bar {
  2455. padding-left: 472px !important;
  2456. }
  2457.  
  2458. #PersonalToolbar {
  2459. margin-left: 483px !important;
  2460. width: calc(100% - 491px);
  2461. @media (-moz-platform: windows) {
  2462. margin-left: 483.5px !important;
  2463. width: calc(100% - 491.5px);
  2464. }
  2465. }
  2466. }
  2467.  
  2468. .tab-group-line {
  2469. #tabbrowser-tabs & {
  2470. inset: -3px -9px -2px !important;
  2471.  
  2472. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  2473. inset-block-start: 2px !important;
  2474. }
  2475.  
  2476. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  2477. inset-block-end: 2px !important;
  2478. }
  2479. }
  2480. }
  2481.  
  2482. .tab-group-label {
  2483. font-size: 0 !important;
  2484. margin-left: 10px !important;
  2485. padding-left: 62px !important;
  2486. background-position: center;
  2487. }
  2488.  
  2489. .tabbrowser-tab[pinned] {
  2490. width: 74px !important;
  2491. }
  2492.  
  2493. .tabbrowser-tab {
  2494. padding-left: 9px !important;
  2495. }
  2496.  
  2497. .tab-background {
  2498. margin-inline: 0 !important;
  2499. width: 62px !important;
  2500. }
  2501.  
  2502. .tabbrowser-tab:not([pinned]) .tab-icon-image {
  2503. display: unset;
  2504. margin-left: 6px;
  2505. }
  2506.  
  2507. .tab-throbber {
  2508. margin-left: 6px !important;
  2509. }
  2510.  
  2511. #tabs-newtab-button,
  2512. #vertical-tabs-newtab-button {
  2513. min-width: 62px !important;
  2514. margin-left: 10px !important;
  2515. }
  2516.  
  2517. #urlbar::before {
  2518. width: 82px;
  2519. }
  2520.  
  2521. :has(#sidebar-main:not([hidden])) {
  2522. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2523. width: 62px !important;
  2524.  
  2525. #identity-box[pageproxystate="invalid"] #identity-icon {
  2526. margin-left: -5px !important;
  2527. }
  2528.  
  2529. #identity-box {
  2530. margin-right: 16px !important;
  2531. margin-left: 16px !important;
  2532. }
  2533.  
  2534. #identity-permission-box,
  2535. #notification-popup-box,
  2536. #tracking-protection-icon-container {
  2537. display: none !important;
  2538. }
  2539. }
  2540. }
  2541.  
  2542. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2543. .titlebar-buttonbox::after {
  2544. width: 62px;
  2545. }
  2546. }
  2547.  
  2548. :has(.titlebar-buttonbox:hover, #urlbar:hover) {
  2549. #tabbrowser-tabpanels {
  2550. margin-top: -39px;
  2551. @media (-moz-platform: windows) {
  2552. margin-top: -38px;
  2553. }
  2554. }
  2555. }
  2556.  
  2557. @media -moz-pref("sidebar.visibility", "expand-on-hover") {
  2558. :has(#back-button:hover, #forward-button:hover, #reload-button:hover, #stop-button:hover, #sidebar-button:hover, #urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-box > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-permission-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #notification-popup-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #tracking-protection-icon-container[open], #tab-group-name:focus) {
  2559. :has(#tabbrowser-tabs:not([expanded])) {
  2560. --display: block;
  2561. }
  2562.  
  2563. #urlbar::before {
  2564. width: 220px;
  2565. }
  2566.  
  2567. #tabbrowser-tabbox {
  2568. clip-path: inset(-50px 0 0 139px);
  2569. margin-left: -139px !important;
  2570. }
  2571.  
  2572. #tabbrowser-tabpanels {
  2573. margin-top: -39px !important;
  2574. @media (-moz-platform: windows) {
  2575. margin-top: -38px !important;
  2576. }
  2577. }
  2578.  
  2579. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2580. .titlebar-buttonbox::after {
  2581. width: 201px;
  2582. }
  2583. }
  2584.  
  2585. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2586. width: 221px !important;
  2587.  
  2588. #identity-box[pageproxystate="invalid"] #identity-icon {
  2589. margin-left: unset !important;
  2590. margin-right: 4px !important;
  2591. }
  2592.  
  2593. #identity-box {
  2594. margin-right: 28px !important;
  2595. margin-left: 0 !important;
  2596. }
  2597.  
  2598. #identity-permission-box[open=true],
  2599. #identity-permission-box[hasPermissions],
  2600. #identity-permission-box[hasSharingIcon],
  2601. #notification-popup-box,
  2602. #tracking-protection-icon-container {
  2603. display: flex !important;
  2604. }
  2605. }
  2606.  
  2607. #tabbrowser-tabs {
  2608. tab-group > .tabbrowser-tab,
  2609. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  2610. margin-inline-start: 0 !important;
  2611. }
  2612. }
  2613.  
  2614. tab-group {
  2615. .tab-group-label {
  2616. font-size: 13px !important;
  2617. background-position: left 9px bottom 11px;
  2618.  
  2619. #tabbrowser-tabs:not([expanded]) & {
  2620. width: 201px !important;
  2621. padding-left: 33px !important;
  2622. max-width: unset !important;
  2623. font-size-adjust: unset !important;
  2624. }
  2625.  
  2626. tab-group[collapsed] > .tab-group-label-container > & {
  2627. background-position: left 9px bottom 7.5px;
  2628. }
  2629. }
  2630. }
  2631.  
  2632. #tabbrowser-tabs,
  2633. #tabs-newtab-button,
  2634. #vertical-tabs-newtab-button {
  2635. width: 221px !important;
  2636. }
  2637.  
  2638. #tabs-newtab-button,
  2639. #vertical-tabs-newtab-button {
  2640. margin-left: 9px !important;
  2641. }
  2642.  
  2643. #tabbrowser-tabs .toolbarbutton-text {
  2644. margin-left: 2px !important;
  2645. }
  2646.  
  2647. #vertical-pinned-tabs-container {
  2648. .tab-icon-overlay {
  2649. margin-left: -15px;
  2650. }
  2651. }
  2652.  
  2653. .tabbrowser-tab[pinned] {
  2654. width: unset !important;
  2655. }
  2656.  
  2657. .tab-background {
  2658. width: 201px !important;
  2659. }
  2660.  
  2661. .tab-icon-image, .tab-throbber {
  2662. margin-left: -9px !important;
  2663. margin-right: 7.5px !important;
  2664. }
  2665.  
  2666. .tab-label-container,
  2667. #tabbrowser-tabs .toolbarbutton-text {
  2668. display: block !important;
  2669. }
  2670.  
  2671. .tab-icon-overlay {
  2672. display: none !important;
  2673. }
  2674.  
  2675. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2676. display: block !important;
  2677. background-repeat: no-repeat;
  2678. background-position: center;
  2679. -moz-context-properties: fill, fill-opacity;
  2680. fill: currentColor;
  2681. fill-opacity: .6;
  2682. &[soundplaying] {
  2683. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2684. }
  2685. &[muted] {
  2686. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2687. }
  2688. &[activemedia-blocked] {
  2689. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2690. }
  2691. }
  2692. }
  2693.  
  2694. :has(#urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *:hover) {
  2695. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2696. #identity-box {
  2697. margin-right: unset !important;
  2698. margin-left: unset !important;
  2699. }
  2700. }
  2701. }
  2702.  
  2703. :has(#tabbrowser-tabs[expanded], #tabbrowser-tabs:not([expanded])) {
  2704. #urlbar[breakout][breakout-extend] {
  2705. top: 20vh !important;
  2706. left: 25vw !important;
  2707. }
  2708.  
  2709. :has(#urlbar[usertyping]) {
  2710. #urlbar {
  2711. left: 25vw !important;
  2712. }
  2713. }
  2714. }
  2715.  
  2716. :has(#sidebar-box:not([hidden])) {
  2717. :has(#back-button:hover, #forward-button:hover, #reload-button:hover, #stop-button:hover, #sidebar-button:hover, #urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-box > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-permission-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #notification-popup-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #tracking-protection-icon-container[open]) {
  2718. #nav-bar {
  2719. padding-left: 71px !important;
  2720. }
  2721. }
  2722. }
  2723. }
  2724. }
  2725.  
  2726. :root:not([chromehidden~="toolbar"], [customizing]):has(#sidebar-main[hidden]) {
  2727. .titlebar-buttonbox-container {
  2728. position: fixed !important;
  2729. top: 25px !important;
  2730. left: -258px;
  2731. opacity: 0;
  2732. transition: left .25s !important;
  2733. @media (-moz-platform: windows) {
  2734. top: 24px !important;
  2735. }
  2736. }
  2737.  
  2738. .titlebar-buttonbox {
  2739. appearance: none !important;
  2740. }
  2741.  
  2742. .titlebar-close {
  2743. order: -1;
  2744. content: url("resources/titlebar-backdrop.svg") !important;
  2745. .titlebar-buttonbox:hover & {
  2746. content: url("resources/titlebar-close-hover.svg") !important;
  2747. &:active {
  2748. content: url("resources/titlebar-close-active.svg") !important;
  2749. @media (prefers-color-scheme: dark) {
  2750. content: url("resources/titlebar-close-active-dark.svg") !important;
  2751. }
  2752. }
  2753. }
  2754. }
  2755.  
  2756. .titlebar-min {
  2757. content: url("resources/titlebar-backdrop.svg") !important;
  2758. .titlebar-buttonbox:hover & {
  2759. content: url("resources/titlebar-min-hover.svg") !important;
  2760. &:active {
  2761. content: url("resources/titlebar-min-active.svg") !important;
  2762. @media (prefers-color-scheme: dark) {
  2763. content: url("resources/titlebar-min-active-dark.svg") !important;
  2764. }
  2765. }
  2766. }
  2767. }
  2768.  
  2769. .titlebar-max {
  2770. content: url("resources/titlebar-backdrop.svg") !important;
  2771. .titlebar-buttonbox:hover & {
  2772. content: url("resources/titlebar-max-hover.svg") !important;
  2773. &:active {
  2774. content: url("resources/titlebar-max-active.svg") !important;
  2775. @media (prefers-color-scheme: dark) {
  2776. content: url("resources/titlebar-max-active-dark.svg") !important;
  2777. }
  2778. }
  2779. }
  2780. }
  2781.  
  2782. .titlebar-restore {
  2783. content: url("resources/titlebar-backdrop.svg") !important;
  2784. .titlebar-buttonbox:hover & {
  2785. content: url("resources/titlebar-restore-hover.svg") !important;
  2786. &:active {
  2787. content: url("resources/titlebar-restore-active.svg") !important;
  2788. @media (prefers-color-scheme: dark) {
  2789. content: url("resources/titlebar-restore-active-dark.svg") !important;
  2790. }
  2791. }
  2792. }
  2793. }
  2794.  
  2795. @media (-moz-platform: macos) {
  2796. .titlebar-buttonbox {
  2797. &::before {
  2798. content: "";
  2799. position: absolute;
  2800. z-index: -1;
  2801. }
  2802. }
  2803.  
  2804. .titlebar-button {
  2805. appearance: none !important;
  2806. display: flex !important;
  2807. padding: 0 !important;
  2808. scale: .75;
  2809. margin-inline: 2px !important;
  2810. }
  2811.  
  2812. .titlebar-max, .titlebar-restore {
  2813. .titlebar-buttonbox:hover & {
  2814. content: url("resources/titlebar-max-hover-mac.svg") !important;
  2815. &:active {
  2816. content: url("resources/titlebar-max-active-mac.svg") !important;
  2817. @media (prefers-color-scheme: dark) {
  2818. content: url("resources/titlebar-max-active-dark-mac.svg") !important;
  2819. }
  2820. }
  2821. }
  2822. }
  2823. }
  2824.  
  2825. @media (prefers-color-scheme: dark) {
  2826. .titlebar-buttonbox:not(:hover, :active) {
  2827. opacity: .5;
  2828. }
  2829. }
  2830.  
  2831. #nav-bar {
  2832. z-index: 9;
  2833. margin-top: -39px !important;
  2834. @media (-moz-platform: windows) {
  2835. margin-top: -38px !important;
  2836. }
  2837. }
  2838.  
  2839. #reload-button,
  2840. #stop-button,
  2841. #back-button,
  2842. #forward-button,
  2843. #sidebar-button {
  2844. position: fixed !important;
  2845. top: 10px;
  2846. left: -258px;
  2847. opacity: 0;
  2848. transition: left .25s !important;
  2849. }
  2850.  
  2851. #downloads-button,
  2852. #PanelUI-menu-button,
  2853. #nav-bar-overflow-button,
  2854. #unified-extensions-button {
  2855. position: fixed !important;
  2856. bottom: 16px;
  2857. left: -258px;
  2858. opacity: 0;
  2859. transition: left .25s !important;
  2860. }
  2861.  
  2862. #downloads-button,
  2863. #nav-bar-overflow-button,
  2864. #unified-extensions-button {
  2865. display: flex !important;
  2866. }
  2867.  
  2868. #tabbrowser-tabs {
  2869. margin-top: 47px !important;
  2870. margin-bottom: 45px !important;
  2871.  
  2872. #tabbrowser-tabs {
  2873. tab-group > .tabbrowser-tab,
  2874. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  2875. margin-inline-start: 0 !important;
  2876. }
  2877. }
  2878.  
  2879. tab-group {
  2880. .tab-group-label {
  2881. font-size: 13px !important;
  2882. background-position: left 9px bottom 11px;
  2883.  
  2884. #tabbrowser-tabs:not([expanded]) & {
  2885. width: 201px !important;
  2886. padding-left: 33px !important;
  2887. max-width: unset !important;
  2888. font-size-adjust: unset !important;
  2889. }
  2890.  
  2891. tab-group[collapsed] > .tab-group-label-container > & {
  2892. background-position: left 9px bottom 7.5px;
  2893. }
  2894. }
  2895. }
  2896. }
  2897.  
  2898. #tabbrowser-tabs,
  2899. #tabs-newtab-button,
  2900. #vertical-tabs-newtab-button {
  2901. width: 221px !important;
  2902. }
  2903.  
  2904. #tabs-newtab-button,
  2905. #vertical-tabs-newtab-button {
  2906. margin-left: 9px !important;
  2907. }
  2908.  
  2909. #tabbrowser-tabs .toolbarbutton-text {
  2910. margin-left: 2px !important;
  2911. }
  2912.  
  2913. #vertical-pinned-tabs-container,
  2914. #pinned-tabs-container[orient="vertical"] {
  2915. margin-left: 5px !important;
  2916. margin-right: 5px !important;
  2917.  
  2918. .tab-background {
  2919. width: calc(100% - 10px) !important;
  2920. }
  2921.  
  2922. .tabbrowser-tab {
  2923. margin-left: -5px !important;
  2924. margin-right: -6px !important;
  2925. }
  2926.  
  2927. .tab-label-container {
  2928. display: none !important;
  2929. }
  2930.  
  2931. .tab-content {
  2932. justify-content: center !important;
  2933. margin-left: 7px !important;
  2934. }
  2935.  
  2936. .tab-icon-overlay {
  2937. margin-left: -15px;
  2938. }
  2939. }
  2940.  
  2941. #vertical-pinned-tabs-splitter {
  2942. border-top: none !important;
  2943. }
  2944.  
  2945. .tabbrowser-tab[pinned] {
  2946. width: unset !important;
  2947. }
  2948.  
  2949. .tab-background {
  2950. width: 201px !important;
  2951. }
  2952.  
  2953. .tab-icon-image, .tab-throbber {
  2954. margin-left: -9px !important;
  2955. margin-right: 7.5px !important;
  2956. }
  2957.  
  2958. .tab-label-container,
  2959. #tabbrowser-tabs .toolbarbutton-text {
  2960. display: block !important;
  2961. }
  2962.  
  2963. .tab-icon-overlay {
  2964. display: none !important;
  2965. }
  2966.  
  2967. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2968. display: block !important;
  2969. background-repeat: no-repeat;
  2970. background-position: center;
  2971. -moz-context-properties: fill, fill-opacity;
  2972. fill: currentColor;
  2973. fill-opacity: .6;
  2974. &[soundplaying] {
  2975. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2976. }
  2977. &[muted] {
  2978. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2979. }
  2980. &[activemedia-blocked] {
  2981. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2982. }
  2983. }
  2984.  
  2985. .tab-close-button {
  2986. -moz-context-properties: fill, fill-opacity !important;
  2987. margin-inline-end: calc(var(--tab-inline-padding) / -2) !important;
  2988. width: 24px !important;
  2989. height: 24px !important;
  2990. top: 6px !important;
  2991. left: 3px !important;
  2992. box-sizing: border-box !important;
  2993. padding: var(--tab-close-button-padding) !important;
  2994. border-radius: var(--tab-border-radius) !important;
  2995. list-style-image: url(chrome://global/skin/icons/close-12.svg), url(resource://content-accessible/close-12.svg) !important;
  2996. box-shadow: unset !important;
  2997. background-image: linear-gradient(var(--close-button-extra-background)) !important;
  2998.  
  2999. &:hover {
  3000. --close-button-extra-background: var(--button-background-color-ghost-hover) !important;
  3001. }
  3002.  
  3003. &:hover:active {
  3004. --close-button-extra-background: var(--button-background-color-ghost-active) !important;
  3005. }
  3006. }
  3007.  
  3008. .tabbrowser-tab:not([pinned]):hover .tab-icon-image {
  3009. opacity: 0;
  3010. }
  3011.  
  3012. .tabbrowser-tab:not([pinned]):hover .tab-label-container {
  3013. margin-left: 1px;
  3014. }
  3015.  
  3016. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  3017. margin-left: 1px;
  3018. }
  3019.  
  3020. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  3021. margin-left: 1px;
  3022. }
  3023.  
  3024. .tabbrowser-tab[pinned] .tab-audio-button {
  3025. display: none !important;
  3026. }
  3027.  
  3028. .tabbrowser-tab[pinned] .tab-icon-overlay {
  3029. display: flex !important;
  3030. }
  3031.  
  3032. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  3033. top: 55px !important;
  3034. left: -225px !important;
  3035. opacity: 0;
  3036. transition: left .25s !important;
  3037. }
  3038.  
  3039. #urlbar::before {
  3040. width: 218px;
  3041. }
  3042.  
  3043. #toolbar-context-customize-sidebar {
  3044. display: none !important;
  3045. }
  3046.  
  3047. #sidebar-main {
  3048. height: calc(100% - 16px) !important;
  3049. display: flex !important;
  3050. position: fixed;
  3051. top: 8px;
  3052. left: -225px;
  3053. opacity: 0;
  3054. transition: .25s;
  3055. z-index: 9;
  3056. border-radius: 8px !important;
  3057. background-color: var(--bg4);
  3058. backdrop-filter: blur(30px);
  3059. box-shadow: var(--bs1);
  3060. overflow: unset !important;
  3061. transition: .25s;
  3062. @media (-moz-platform: windows) {
  3063. top: 9px;
  3064. height: calc(100% - 17px) !important;
  3065. }
  3066. @media (prefers-color-scheme: dark) {
  3067. box-shadow: var(--bs2) !important;
  3068. @media (-moz-platform: macos) {
  3069. outline: 1px solid rgba(235, 235, 235, .2) !important;
  3070. outline-offset: -1px !important;
  3071. }
  3072. }
  3073. &::before {
  3074. content: "";
  3075. position: absolute;
  3076. top: 0;
  3077. left: -20px;
  3078. width: 25px;
  3079. height: 100%;
  3080. }
  3081. &::after {
  3082. content: "";
  3083. position: absolute;
  3084. top: 0;
  3085. right: -20px;
  3086. width: 25px;
  3087. height: 100%;
  3088. }
  3089. }
  3090.  
  3091. #sidebar-box {
  3092. margin-top: 0 !important;
  3093. margin-left: 2px !important;
  3094. margin-right: -6px !important;
  3095. }
  3096.  
  3097. #tabbrowser-tabpanels {
  3098. margin-top: 0;
  3099. }
  3100.  
  3101. :has(#sidebar-box:not([hidden])) {
  3102. #PersonalToolbar {
  3103. margin-left: 282px !important;
  3104. width: calc(100% - 290px);
  3105. }
  3106. }
  3107.  
  3108. :has(#urlbar:hover, .titlebar-buttonbox:hover) {
  3109. #tabbrowser-tabpanels {
  3110. margin-top: 0;
  3111. }
  3112. }
  3113.  
  3114. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3115. .titlebar-buttonbox::after {
  3116. content: none;
  3117. }
  3118. }
  3119.  
  3120. :has(#tabbrowser-tabs:not([expanded])) {
  3121. --display: none;
  3122. }
  3123.  
  3124. :has(#sidebar-main:hover, #urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-box > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-permission-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #notification-popup-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #tracking-protection-icon-container[open], .tab-throbber[busy], #tab-group-name:focus, .titlebar-buttonbox:hover, toolbarbutton:is(#sidebar-button, #reload-button, #stop-button, #back-button, #forward-button, #PanelUI-menu-button, #nav-bar-overflow-button, #unified-extensions-button, #downloads-button):hover, #PanelUI-menu-button[open], #nav-bar-overflow-button[open], #unified-extensions-button[open], #downloads-button[open]) {
  3125. .titlebar-buttonbox-container {
  3126. left: 7px;
  3127. opacity: 1;
  3128. transition: left .25s !important;
  3129. @media (-moz-platform: windows) {
  3130. left: 18px;
  3131. }
  3132. }
  3133.  
  3134. #reload-button,
  3135. #stop-button,
  3136. #back-button,
  3137. #forward-button,
  3138. #sidebar-button {
  3139. left: 80px;
  3140. opacity: 1;
  3141. transition: left .25s !important;
  3142. }
  3143.  
  3144. #back-button {
  3145. left: 119px;
  3146. }
  3147.  
  3148. #forward-button {
  3149. left: 153px;
  3150. }
  3151.  
  3152. #reload-button,
  3153. #stop-button {
  3154. left: 187px;
  3155. }
  3156.  
  3157. #downloads-button,
  3158. #PanelUI-menu-button,
  3159. #nav-bar-overflow-button,
  3160. #unified-extensions-button {
  3161. left: 20px;
  3162. opacity: 1;
  3163. transition: left .25s !important;
  3164. }
  3165.  
  3166. #nav-bar-overflow-button {
  3167. left: 72px;
  3168. }
  3169.  
  3170. #unified-extensions-button {
  3171. left: 123px;
  3172. }
  3173.  
  3174. #downloads-button {
  3175. left: 175px;
  3176. }
  3177.  
  3178. #sidebar-main {
  3179. left: 8px;
  3180. opacity: 1;
  3181. transition: .25s;
  3182. }
  3183.  
  3184. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  3185. left: 18px !important;
  3186. opacity: 1;
  3187. transition: left .25s !important;
  3188. }
  3189. }
  3190. }
  3191.  
  3192. :root[inFullscreen]:has(#tabbrowser-tabs:not([expanded])) {
  3193. :has(#sidebar-box:not([hidden])) {
  3194. #sidebar-button {
  3195. margin-left: -335px !important;
  3196. margin-right: 300px !important;
  3197. }
  3198. }
  3199. }
  3200.  
  3201. :root[inFullscreen]:has(#tabbrowser-tabs:not([expanded])) {
  3202. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  3203. #sidebar-button {
  3204. margin-left: -455px !important;
  3205. margin-right: 420px !important;
  3206. }
  3207. }
  3208. }
  3209.  
  3210. :root[inFullscreen] {
  3211. .browser-toolbox-background {
  3212. background: transparent !important;
  3213. }
  3214.  
  3215. #urlbar {
  3216. left: 10px !important;
  3217. }
  3218.  
  3219. #sidebar-button {
  3220. margin-left: -62px !important;
  3221. margin-right: 62px !important;
  3222. }
  3223.  
  3224. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3225. #back-button::before {
  3226. content: "";
  3227. position: fixed;
  3228. top: 45px;
  3229. left: 10px;
  3230. width: 201px;
  3231. height: 32px;
  3232. border-radius: 8px;
  3233. background: var(--button-active-bgcolor);
  3234. @media (-moz-platform: windows) {
  3235. background: light-dark(rgba(120, 120, 120, .1), rgba(155, 155, 155, .2));
  3236. }
  3237. }
  3238. }
  3239.  
  3240. :has(#tabbrowser-tabs:not([expanded])) {
  3241. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3242. #back-button::before {
  3243. width: 62px;
  3244. }
  3245. }
  3246.  
  3247. #sidebar-button {
  3248. margin-left: -52px !important;
  3249. margin-right: 22px !important;
  3250. }
  3251. }
  3252.  
  3253. :has(#sidebar-main[hidden]) {
  3254. #nav-bar {
  3255. padding-left: 55px !important;
  3256. }
  3257. }
  3258.  
  3259. @media -moz-pref("sidebar.visibility", "expand-on-hover") {
  3260. :has(#back-button:hover, #forward-button:hover, #reload-button:hover, #stop-button:hover, #sidebar-button:hover, #urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-box > *[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #identity-permission-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #notification-popup-box[open], #urlbar:not([breakout][breakout-extend], [usertyping]) #tracking-protection-icon-container[open]) {
  3261. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3262. #back-button::before {
  3263. width: 201px;
  3264. }
  3265. }
  3266. }
  3267. }
  3268. }
  3269.  
  3270. :root:not([sizemode="maximized"], [sizemode="fullscreen"]):has(#sidebar-main[hidden]) .titlebar-restore,
  3271. :root:is([sizemode="maximized"], [sizemode="fullscreen"]):has(#sidebar-main[hidden]) .titlebar-max {
  3272. display: none !important;
  3273. }
  3274.  
  3275. :root[customizing] {
  3276. #urlbar {
  3277. visibility: hidden;
  3278. }
  3279.  
  3280. #nav-bar [id^=wrapper-customizableui-special-spring] {
  3281. display: none !important;
  3282. }
  3283. }
  3284. }
  3285.  
  3286. @media (-moz-platform: windows) {
  3287. :root[inFullscreen] {
  3288. .titlebar-buttonbox-container {
  3289. display: none !important;
  3290. }
  3291.  
  3292. #PersonalToolbar {
  3293. visibility: unset !important;
  3294. }
  3295. }
  3296.  
  3297. .titlebar-buttonbox-container {
  3298. left: 15px;
  3299. top: 17.5px;
  3300. }
  3301.  
  3302. .titlebar-button {
  3303. padding: 0 2px !important;
  3304. scale: .78;
  3305. background-color: transparent !important;
  3306. &:-moz-window-inactive {
  3307. content: url("resources/titlebar-backdrop.svg") !important;
  3308. @media (prefers-color-scheme: dark) {
  3309. content: url("resources/titlebar-backdrop-dark.svg") !important;
  3310. }
  3311. }
  3312. }
  3313.  
  3314. .titlebar-close {
  3315. -moz-default-appearance: unset !important;
  3316. order: -1;
  3317. content: url("resources/titlebar-close.svg") !important;
  3318. .titlebar-buttonbox:hover & {
  3319. content: url("resources/titlebar-close-hover.svg") !important;
  3320. &:active {
  3321. content: url("resources/titlebar-close-active.svg") !important;
  3322. @media (prefers-color-scheme: dark) {
  3323. content: url("resources/titlebar-close-active-dark.svg") !important;
  3324. }
  3325. }
  3326. }
  3327. }
  3328.  
  3329. .titlebar-min {
  3330. -moz-default-appearance: unset !important;
  3331. content: url("resources/titlebar-min.svg") !important;
  3332. .titlebar-buttonbox:hover & {
  3333. content: url("resources/titlebar-min-hover.svg") !important;
  3334. &:active {
  3335. content: url("resources/titlebar-min-active.svg") !important;
  3336. @media (prefers-color-scheme: dark) {
  3337. content: url("resources/titlebar-min-active-dark.svg") !important;
  3338. }
  3339. }
  3340. }
  3341. }
  3342.  
  3343. .titlebar-max {
  3344. content: url("resources/titlebar-max.svg") !important;
  3345. .titlebar-buttonbox:hover & {
  3346. content: url("resources/titlebar-max-hover.svg") !important;
  3347. &:active {
  3348. content: url("resources/titlebar-max-active.svg") !important;
  3349. @media (prefers-color-scheme: dark) {
  3350. content: url("resources/titlebar-max-active-dark.svg") !important;
  3351. }
  3352. }
  3353. }
  3354. }
  3355.  
  3356. .titlebar-restore {
  3357. -moz-default-appearance: unset !important;
  3358. content: url("resources/titlebar-max.svg") !important;
  3359. .titlebar-buttonbox:hover & {
  3360. content: url("resources/titlebar-restore-hover.svg") !important;
  3361. &:active {
  3362. content: url("resources/titlebar-restore-active.svg") !important;
  3363. @media (prefers-color-scheme: dark) {
  3364. content: url("resources/titlebar-restore-active-dark.svg") !important;
  3365. }
  3366. }
  3367. }
  3368. }
  3369.  
  3370. @media -moz-pref("sidebar.verticalTabs") {
  3371. .titlebar-buttonbox-container {
  3372. left: 12px;
  3373. top: 16px;
  3374. }
  3375.  
  3376. .titlebar-buttonbox {
  3377. &::before {
  3378. z-index: -1;
  3379. }
  3380. }
  3381. }
  3382. }
  3383. }
  3384.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!