API tools faq
paste
alvinrium

userchrome.css

alvinrium
Jun 25th, 2025
13
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.97 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: 8px !important;
  162. }
  163.  
  164. #nav-bar, #PersonalToolbar, #TabsToolbar {
  165. background: transparent !important;
  166. }
  167.  
  168. :root[inDOMFullscreen] {
  169. #tabbrowser-tabbox {
  170. margin: 0 !important;
  171. }
  172. }
  173.  
  174. :root[inFullscreen] {
  175. #nav-bar {
  176. padding-left: 0 !important;
  177. }
  178. }
  179.  
  180. :root[customizing] {
  181. #urlbar {
  182. top: -3px !important;
  183. @media -moz-pref("sidebar.verticalTabs") {
  184. top: 0px !important;
  185. }
  186. }
  187.  
  188. #PersonalToolbar {
  189. outline: 1px dashed var(--button-active-bgcolor) !important;
  190. }
  191. }
  192.  
  193. @media not -moz-pref("sidebar.verticalTabs") {
  194. .titlebar-buttonbox-container {
  195. position: absolute !important;
  196. left: 7px;
  197. top: 16px;
  198. @media (-moz-platform: windows) {
  199. @media not -moz-pref("gwfox.plus") {
  200. left: unset;
  201. right: 0;
  202. top: 1px;
  203.  
  204. .titlebar-button {
  205. padding-top: 17px !important;
  206. padding-bottom: 18px !important;
  207. }
  208. }
  209. }
  210. }
  211.  
  212. .titlebar-spacer {
  213. display: none !important
  214. }
  215.  
  216. #navigator-toolbox {
  217. display: grid;
  218. grid-template-columns: minmax(auto, 0) auto;
  219. }
  220.  
  221. #nav-bar {
  222. width: fit-content !important;
  223. grid-area: 2 / 1 / auto / auto;
  224. padding-left: 76px !important;
  225. @media (-moz-platform: windows) {
  226. @media not -moz-pref("gwfox.plus") {
  227. padding-left: 0 !important;
  228. }
  229. }
  230.  
  231. toolbarspring {
  232. display: none;
  233. }
  234. }
  235.  
  236. #urlbar-container {
  237. max-width: 219px !important;
  238. }
  239.  
  240. #TabsToolbar {
  241. grid-area: 2 / 2 / auto / auto;
  242. padding-inline-end: 77px !important;
  243. margin-bottom: 6px !important;
  244. @media (-moz-platform: windows) {
  245. @media not -moz-pref("gwfox.plus") {
  246. padding-inline-end: 212px !important;
  247. }
  248. }
  249.  
  250. :has(#nav-bar-overflow-button:not(#nav-bar:not([overflowing], [nonemptyoverflow], [customizing]) > #nav-bar-overflow-button)) & {
  251. padding-inline-end: 111px !important;
  252. @media (-moz-platform: windows) {
  253. @media not -moz-pref("gwfox.plus") {
  254. padding-inline-end: 246px !important;
  255. }
  256. }
  257. }
  258. }
  259.  
  260. #navigator-toolbox > *:not(#TabsToolbar, #nav-bar) {
  261. grid-column: 1 / span 2 !important;
  262. }
  263.  
  264. #PanelUI-menu-button {
  265. position: fixed;
  266. inset-inline-end: 3px;
  267. @media (-moz-platform: windows) {
  268. @media not -moz-pref("gwfox.plus") {
  269. inset-inline-end: 138px;
  270. }
  271. }
  272. }
  273.  
  274. #nav-bar-overflow-button {
  275. position: fixed;
  276. inset-inline-end: 43px;
  277. @media (-moz-platform: windows) {
  278. @media not -moz-pref("gwfox.plus") {
  279. inset-inline-end: 178px;
  280. }
  281. }
  282. }
  283.  
  284. #unified-extensions-button {
  285. position: fixed;
  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. top: 9px !important;
  309. margin-top: 0 !important;
  310. transition: margin-top .25s !important;
  311. }
  312.  
  313. #urlbar-container {
  314. -moz-window-dragging: drag;
  315. }
  316.  
  317. #urlbar-search-mode-indicator {
  318. margin-top: 3px !important;
  319. height: 22px !important;
  320. }
  321.  
  322. #urlbar-searchmode-switcher {
  323. background-color: transparent !important;
  324. }
  325.  
  326. #searchmode-switcher-dropmarker,
  327. #searchmode-switcher-close,
  328. #searchmode-switcher-title {
  329. display: none !important;
  330. }
  331.  
  332. #urlbar-background {
  333. height: 30px !important;
  334. border: none !important;
  335. border-radius: 6px !important;
  336. background: var(--button-hover-bgcolor) !important;
  337. transition: background .5s !important;
  338. }
  339.  
  340. #urlbar:hover #urlbar-background {
  341. background: var(--button-active-bgcolor) !important;
  342. box-shadow: none !important;
  343. transition: background .5s !important;
  344. }
  345.  
  346. #urlbar[open] #urlbar-background {
  347. transition: none !important;
  348. }
  349.  
  350. .urlbar-input-container {
  351. padding: 0 !important;
  352. height: 30px !important;
  353. border-radius: 6px !important;
  354. }
  355.  
  356. #urlbar-input::placeholder,
  357. .searchbar-textbox::placeholder {
  358. font-size: 12.5px !important;
  359. text-align: left !important;
  360. }
  361.  
  362. #urlbar-input {
  363. text-align: center !important;
  364. margin-bottom: 1px !important;
  365. }
  366.  
  367. .urlbar-input-container[pageproxystate=invalid] .urlbar-input {
  368. mask-image: linear-gradient(to left, transparent, #fff 10ch);
  369. }
  370.  
  371. #urlbar[focused] > .urlbar-input-container {
  372. outline: none !important;
  373. }
  374.  
  375. #urlbar > #urlbar-background {
  376. outline-style: solid !important;
  377. outline-color: transparent !important;
  378. outline-width: 18px !important;
  379. }
  380.  
  381. #urlbar[focused]:not([suppress-focus-border]) > #urlbar-background {
  382. outline-color: var(--outline-color) !important;
  383. outline-width: 3px !important;
  384. outline-offset: -1px !important;
  385. transition: all .3s cubic-bezier(.8, 0, 0, .8) !important;
  386. }
  387.  
  388. #urlbar:not([breakout][breakout-extend]) {
  389. transform: none !important;
  390. }
  391.  
  392. #urlbar:not([breakout][breakout-extend]) #identity-icon-label {
  393. display: none !important;
  394. }
  395.  
  396. #urlbar[breakout][breakout-extend] {
  397. position: fixed !important;
  398. top: 20vh !important;
  399. left: 18vw !important;
  400. width: 65vw !important;
  401. max-width: unset !important;
  402. animation-name: panel-grow;
  403. animation-duration: 250ms;
  404. margin-top: 25px !important;
  405. transition: none !important;
  406.  
  407. #urlbar-input,
  408. #urlbar-input::placeholder {
  409. font-size: 21px !important;
  410. }
  411.  
  412. .urlbar-input-container {
  413. height: 50px !important;
  414. padding-inline-start: 15px !important;
  415. padding-inline-end: 15px !important;
  416. & > :is(box, image) {
  417. margin-top: 10px !important;
  418. }
  419. }
  420.  
  421. .urlbarView-row-inner {
  422. flex-wrap: nowrap !important;
  423. }
  424.  
  425. .urlbarView-no-wrap {
  426. max-width: 50% !important;
  427. flex-basis: 0 !important;
  428. }
  429.  
  430. .urlbarView-row[has-url] .urlbarView-url {
  431. margin-left: 0 !important;
  432. }
  433.  
  434. .urlbarView-row[has-url] .urlbarView-title-separator {
  435. display: block !important;
  436. }
  437.  
  438. #urlbar-search-mode-indicator {
  439. margin-top: 13px !important;
  440. }
  441. }
  442.  
  443. #urlbar[breakout][breakout-extend] #urlbar-background {
  444. background-color: var(--bg4) !important;
  445. backdrop-filter: blur(30px) !important;
  446. box-shadow: var(--bs1) !important;
  447. }
  448.  
  449. :has(#urlbar[breakout][breakout-extend]) {
  450. #urlbar-background {
  451. height: unset !important;
  452. }
  453. }
  454.  
  455. :has(#urlbar[usertyping]) {
  456. #urlbar {
  457. position: fixed !important;
  458. top: 20vh !important;
  459. left: 18vw !important;
  460. width: 65vw !important;
  461. max-width: unset !important;
  462. margin-top: 25px !important;
  463. }
  464.  
  465. #urlbar-background {
  466. background-color: var(--bg4) !important;
  467. backdrop-filter: blur(30px) !important;
  468. box-shadow: var(--bs1) !important;
  469. height: 50px !important;
  470. }
  471.  
  472. .urlbar-input-container {
  473. height: 50px !important;
  474. & > :is(box, image) {
  475. margin-top: 10px !important;
  476. }
  477. }
  478.  
  479. #urlbar-input {
  480. font-size: 21px !important;
  481. }
  482.  
  483. #urlbar[focused] #urlbar-background {
  484. box-shadow: var(--bs1) !important;
  485. }
  486.  
  487. .urlbar-revert-button {
  488. margin-top: 10px !important;
  489. margin-right: 5px !important;
  490. }
  491.  
  492. #urlbar-search-mode-indicator {
  493. margin-top: 13px !important;
  494. }
  495.  
  496. #tabbrowser-tabs[orient="horizontal"] {
  497. margin-top: 0 !important;
  498. }
  499. }
  500.  
  501. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  502. #urlbar-container {
  503. max-height: 30px !important;
  504. min-height: 30px !important;
  505. margin-top: 1px !important;
  506. margin-bottom: 9px !important;
  507. border-radius: 8px;
  508. background: var(--button-active-bgcolor);
  509. }
  510. }
  511.  
  512. .urlbarView-body-outer {
  513. padding: 0 8px !important;
  514. }
  515.  
  516. .urlbarView-body-inner {
  517. border: 0 !important;
  518. border-top: 1px solid rgba(105, 105, 105, .2) !important;
  519. }
  520.  
  521. .search-one-offs {
  522. background: transparent !important;
  523. border: none !important;
  524. padding: 8px !important;
  525. }
  526.  
  527. .urlbar-page-action {
  528. height: 28px !important;
  529. border-radius: 6px !important;
  530. padding: 6px !important;
  531. -moz-window-dragging: no-drag;
  532. }
  533.  
  534. @media -moz-pref("gwfox.plus") or (not -moz-pref("sidebar.verticalTabs")) {
  535. .urlbar-page-action:not(#star-button-box) {
  536. margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding));
  537. opacity: 0;
  538. transition: .2s;
  539. }
  540.  
  541. #urlbar[open] .urlbar-page-action,
  542. #urlbar:hover .urlbar-page-action,
  543. .urlbar-page-action[open] {
  544. opacity: 1;
  545. margin-inline-end: 0 !important;
  546. }
  547.  
  548. :has(#page-action-buttons > *[open]) {
  549. .urlbar-page-action {
  550. opacity: 1;
  551. margin-inline-end: 0 !important;
  552. }
  553. }
  554.  
  555. :has(#identity-permission-box > *[open]) {
  556. #identity-permission-box {
  557. opacity: 1;
  558. margin-inline-start: 0 !important;
  559. }
  560. }
  561.  
  562. #identity-permission-box, #notification-popup-box, #tracking-protection-icon-container {
  563. margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
  564. opacity: 0;
  565. transition: .2s;
  566. }
  567.  
  568. #urlbar[open] #tracking-protection-icon-container,
  569. #urlbar:hover #tracking-protection-icon-container,
  570. #tracking-protection-icon-container[open] {
  571. opacity: 1;
  572. margin-inline-start: 0 !important;
  573. }
  574.  
  575. #urlbar[open] #identity-permission-box,
  576. #urlbar[open] #notification-popup-box,
  577. #urlbar:hover #identity-permission-box,
  578. #urlbar:hover #notification-popup-box,
  579. #identity-permission-box[open],
  580. #notification-popup-box[open] {
  581. opacity: 1;
  582. margin-inline-start: 0 !important;
  583. }
  584.  
  585. .urlbar-page-action:active,
  586. #identity-permission-box:active,
  587. #notification-popup-box:active,
  588. #tracking-protection-icon-container:active {
  589. opacity: unset;
  590. }
  591.  
  592. #urlbar:-moz-window-inactive .urlbar-page-action:not(#star-button-box),
  593. #urlbar:-moz-window-inactive #identity-permission-box,
  594. #urlbar:-moz-window-inactive #notification-popup-box {
  595. opacity: 0 !important;
  596. }
  597.  
  598. #urlbar:-moz-window-inactive:hover .urlbar-page-action:not(#star-button-box),
  599. #urlbar:-moz-window-inactive:hover #identity-permission-box,
  600. #urlbar:-moz-window-inactive:hover #notification-popup-box {
  601. opacity: unset !important;
  602. }
  603. }
  604.  
  605. #urlbar-zoom-button {
  606. background: var(--button-hover-bgcolor) !important;
  607. }
  608.  
  609. #urlbar:-moz-window-inactive {
  610. * { opacity: 78%; }
  611. }
  612.  
  613. #urlbar[focused] > #urlbar-background,
  614. #searchbar:focus-within {
  615. box-shadow: none !important;
  616. }
  617.  
  618. .urlbarView-row:is([type=bookmark], [pinned]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  619. display: none !important;
  620. }
  621.  
  622. #searchbar {
  623. min-height: 28px !important;
  624. background: var(--button-hover-bgcolor) !important;
  625. border-radius: 6px !important;
  626. border: none !important;
  627. }
  628.  
  629. .search-go-button, .search-panel-header, .searchbar-separator {
  630. display: none !important;
  631. }
  632.  
  633. #PopupSearchAutoComplete {
  634. --panel-background: var(--bg2) !important;
  635. --panel-border-color: transparent !important;
  636. }
  637.  
  638. /* button */
  639.  
  640. .toggle-button { --toggle-dot-background-color-on-pressed: #fff !important; }
  641. #blocked-permissions-container, #picture-in-picture-button,
  642. #urlbar-go-button, .private-browsing-indicator-with-label,
  643. #reset-pbm-toolbar-button,
  644. #firefox-view-button, #fxa-toolbar-menu-button,
  645. #userContext-icons, #userContext-label,
  646. #scrollbutton-up, #scrollbutton-down,
  647. .sharing-icon, #save-to-pocket-button {
  648. display: none !important;
  649. }
  650.  
  651. .tab-close-button, .tab-icon-overlay, .tab-icon-image, span[part="button"],
  652. .toolbarbutton-1, #identity-permission-box,
  653. #notification-popup-box, #star-button,
  654. #translations-button-circle-arrows,
  655. #reader-mode-button > .urlbar-icon,
  656. #translations-button > #translations-button-icon,
  657. #shopping-sidebar-button > .urlbar-icon , #identity-box,
  658. #tracking-protection-icon-container {
  659. fill: light-dark(#525252, #c9c9cb) !important;
  660. fill-opacity: 1 !important;
  661. }
  662.  
  663. .tab-close-button:active, .tab-icon-overlay:active, span[part="button"]:active,
  664. .toolbarbutton-1:active, #identity-permission-box:active,
  665. #notification-popup-box:active, #star-button:active,
  666. #translations-button-circle-arrows:active,
  667. #reader-mode-button:active > .urlbar-icon,
  668. #translations-button:active > #translations-button-icon,
  669. #shopping-sidebar-button:active > .urlbar-icon , #identity-box:active,
  670. #tracking-protection-icon-container:active {
  671. fill: light-dark(#2d2d2d, #ececec) !important;
  672. }
  673.  
  674. #viewButton {
  675. border: none !important;
  676. background: none !important;
  677. border-radius: 4px !important;
  678. }
  679.  
  680. #viewButton:hover {
  681. background-color: var(--button-hover-bgcolor) !important;
  682. }
  683.  
  684. #viewButton[open] {
  685. background-color: var(--button-active-bgcolor) !important;
  686. }
  687.  
  688. #downloads-indicator-progress-outer {
  689. border: 1.5px solid light-dark(#525252, #c9c9cb) !important;
  690. width: 17px !important;
  691. height: 17px !important;
  692. }
  693.  
  694. .webextension-browser-action {
  695. border-radius: 6px !important;
  696. margin-bottom: 9px !important;
  697. width: 30px !important;
  698. }
  699.  
  700. #nav-bar .toolbarbutton-1 {
  701. max-height: 30px !important;
  702. margin-top: 1px !important;
  703. }
  704.  
  705. #nav-bar .toolbarbutton-1 > .toolbarbutton-icon {
  706. height: 30px !important;
  707. width: 30px !important;
  708. padding: 6px !important;
  709. border-radius: 6px !important;
  710. }
  711.  
  712. #TabsToolbar .toolbarbutton-1 {
  713. max-height: 30px !important;
  714. margin: unset !important;
  715. margin-top: 4px !important;
  716. margin-bottom: 3px !important;
  717. }
  718.  
  719. #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
  720. height: 30px !important;
  721. width: 30px !important;
  722. padding: 6px !important;
  723. border-radius: 6px !important;
  724. }
  725.  
  726. #TabsToolbar #downloads-button > .toolbarbutton-badge-stack {
  727. height: 30px !important;
  728. width: 30px !important;
  729. border-radius: 6px !important;
  730. padding: 6.5px 5.5px 5.5px 6.5px !important;
  731. }
  732.  
  733. #PanelUI-menu-button > .toolbarbutton-badge-stack {
  734. height: 30px !important;
  735. width: 30px !important;
  736. border-radius: 6px !important;
  737. padding: 6px 5.5px 0 !important;
  738. }
  739.  
  740. #PanelUI-menu-button .toolbarbutton-icon {
  741. height: 19px !important;
  742. width: 19px !important;
  743. }
  744.  
  745. #nav-bar {
  746. #downloads-button > .toolbarbutton-badge-stack {
  747. height: 30px !important;
  748. width: 30px !important;
  749. border-radius: 6px !important;
  750. padding: 6.5px 5.5px 5.5px 6.5px !important;
  751. }
  752. }
  753.  
  754. #page-action-buttons {
  755. margin-right: 0 !important;
  756. margin-bottom: 0 !important;
  757. }
  758.  
  759. #identity-box {
  760. height: 28px !important;
  761. border-radius: 6px !important;
  762. }
  763.  
  764. #identity-box:hover {
  765. background: rgba(70, 70, 70, .1) !important;
  766. }
  767.  
  768. .identity-box-button {
  769. background: none !important;
  770. }
  771.  
  772. #notification-popup-box {
  773. margin-top: 0 !important;
  774. background: none !important;
  775. }
  776.  
  777. #tracking-protection-icon-container {
  778. height: 28px !important;
  779. border-radius: 6px !important;
  780. }
  781.  
  782. #star-button[starred], #translations-button-circle-arrows,
  783. #reader-mode-button[readeractive] > .urlbar-icon,
  784. #translations-button[translationsactive] > #translations-button-icon,
  785. #shopping-sidebar-button[shoppingsidebaropen] > .urlbar-icon {
  786. fill: light-dark(#525252, #c9c9cb) !important;
  787. }
  788.  
  789. :has(#star-button-box[open]) {
  790. #star-button[starred] {
  791. animation-name: urlbar-zoom-reset-pulse;
  792. animation-duration: 250ms;
  793. }
  794. }
  795.  
  796. #appMenu-fullscreen-button2 .toolbarbutton-icon {
  797. background: none !important;
  798. }
  799.  
  800. #appMenu-fullscreen-button2:hover {
  801. background: var(--button-hover-bgcolor) !important;
  802. }
  803.  
  804. #appMenu-fullscreen-button2:active {
  805. background: var(--button-active-bgcolor) !important;
  806. }
  807.  
  808. #appMenu-zoom-controls {
  809. border-top: 1px solid var(--bg3) !important;
  810. }
  811.  
  812. .checkbox-check:not([native]) {
  813. appearance: none !important;
  814. background-color: transparent !important;
  815. border-radius: 2px !important;
  816. border: 2px solid rgba(165, 165, 165, .8) !important;
  817. &[checked] {
  818. background-color: light-dark(#4481f2, #1280fd) !important;
  819. background-image: url("resources/check.svg") !important;
  820. border: none !important;
  821. &:hover:active { background-color: light-dark(#0a4eb8, #417bde) !important; }
  822. }
  823. }
  824.  
  825. /* tabs */
  826.  
  827. .tab-background {
  828. border: none !important;
  829. box-shadow: none !important;
  830. border-radius: 6px !important;
  831. #tabbrowser-tabs[movingtab-createGroup] & {
  832. outline: none !important;
  833. &[dragover-createGroup] {
  834. background-color: color-mix(in srgb, var(--dragover-tab-group-color) 38%, transparent) !important;
  835. }
  836. }
  837. }
  838.  
  839. tab > stack {
  840. margin: 0 1px !important;
  841. }
  842.  
  843. tab .tab-label {
  844. font-size: 13px !important;
  845. margin-bottom: 1px !important;
  846. }
  847.  
  848. #tabbrowser-tabs[orient="horizontal"]:not([overflow]) {
  849. margin-inline-start: 0 !important;
  850. padding-inline-start: 0 !important;
  851. }
  852.  
  853. #tabbrowser-tabs[orient="horizontal"][overflow] {
  854. padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) - 2px) !important;
  855. margin-inline-start: 0 !important;
  856. }
  857.  
  858. #tabbrowser-tabs[orient="horizontal"][overflow]:has([pinned]) {
  859. padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
  860. }
  861.  
  862. #tabbrowser-tabs {
  863. --tab-min-width: 88px !important;
  864. margin-bottom: -1px !important;
  865. border-inline-start: none !important;
  866. }
  867.  
  868. #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  869. margin-inline-start: 0 !important;
  870. }
  871.  
  872. #pinned-tabs-container[orient="horizontal"] {
  873. margin-inline-end: 0 !important;
  874. }
  875.  
  876. #tabbrowser-tabs[movingtab] {
  877. margin-bottom: -16px !important;
  878. }
  879.  
  880. #alltabs-button {
  881. list-style-image: url("resources/alltabs.svg") !important;
  882. > .toolbarbutton-badge-stack {
  883. height: 30px !important;
  884. width: 30px !important;
  885. padding: 6px 0 0 6px !important;
  886. border-radius: 6px !important;
  887. > .toolbarbutton-icon {
  888. height: 18px !important;
  889. width: 18px !important;
  890. margin: unset !important;
  891. }
  892. }
  893. }
  894.  
  895. .tabbrowser-tab:not([selected]) .tab-close-button {
  896. display: none;
  897. }
  898.  
  899. .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  900. display: flex !important;
  901. }
  902.  
  903. .tab-background:not([selected]) {
  904. background: var(--button-hover-bgcolor) !important;
  905. transition: background .5s !important;
  906. }
  907.  
  908. .tab-background[selected] {
  909. background: light-dark(rgba(70, 70, 70, .18), rgba(170, 170, 170, .4)) !important;
  910. }
  911.  
  912. .tabbrowser-tab:hover .tab-background {
  913. background: var(--button-active-bgcolor) !important;
  914. transition: background .5s !important;
  915. }
  916.  
  917. .tab-icon-overlay {
  918. scale: .7;
  919. &:hover { scale: .8; }
  920. &:is([soundplaying], [muted], [activemedia-blocked]) {
  921. background-color: transparent !important;
  922. border: none !important;
  923. &:not([pinned]) {
  924. background-size: 16px !important;
  925. }
  926. &:hover {
  927. background-color: var(--button-hover-bgcolor) !important;
  928. }
  929. &:active {
  930. background-color: var(--button-active-bgcolor) !important;
  931. }
  932. }
  933. :is(
  934. :root[uidensity=compact],
  935. #tabbrowser-tabs[secondarytext-unsupported],
  936. :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
  937. ) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
  938. :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
  939. opacity: 1 !important;
  940. }
  941. }
  942.  
  943. .tab-secondary-label {
  944. display: none !important;
  945. }
  946.  
  947. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  948. min-height: 18px !important;
  949. max-width: 2px !important;
  950. margin: 6px 0 0 0 !important;
  951. border-radius: 2px !important;
  952. }
  953.  
  954. #tab-preview-panel {
  955. --panel-padding: 0 !important;
  956. }
  957.  
  958. @media not -moz-pref("sidebar.verticalTabs") {
  959. .tabbrowser-tab[selected]:not([pinned]) {
  960. min-width: 138px !important;
  961. }
  962.  
  963. .tabbrowser-tab[pinned] .tab-icon-image {
  964. margin-right: 5.5px !important;
  965. }
  966.  
  967. .tab-content[pinned] {
  968. margin-right: 5px;
  969. padding-left: 8px !important;
  970. background-image: url("resources/pinned.svg");
  971. background-repeat: no-repeat;
  972. background-position: right bottom 10px;
  973. -moz-context-properties: fill, fill-opacity;
  974. fill: currentColor;
  975. fill-opacity: .6;
  976. & .tab-label-container {
  977. margin-right: 6px;
  978. mask-image: linear-gradient(to left, transparent, #fff 3ch);
  979. }
  980. }
  981.  
  982. .tab-background {
  983. max-height: 30px !important;
  984. min-height: 30px !important;
  985. }
  986.  
  987. #TabsToolbar #tabs-newtab-button > .toolbarbutton-icon,
  988. #TabsToolbar #new-tab-button > .toolbarbutton-icon {
  989. height: 32px !important;
  990. width: 32px !important;
  991. padding: 5px 7px !important;
  992. border-radius: 6px !important;
  993. background: none !important;
  994. }
  995.  
  996. #TabsToolbar #new-tab-button,
  997. #TabsToolbar #tabs-newtab-button {
  998. width: 30px;
  999. margin: 4px 3px -3px 3px !important;
  1000. max-height: 30px !important;
  1001. min-height: 30px !important;
  1002. border-radius: 6px !important;
  1003. }
  1004.  
  1005. #TabsToolbar #new-tab-button:hover,
  1006. #TabsToolbar #tabs-newtab-button:hover {
  1007. background: var(--button-hover-bgcolor) !important;
  1008. }
  1009.  
  1010. #TabsToolbar #new-tab-button:active,
  1011. #TabsToolbar #tabs-newtab-button:active {
  1012. background: var(--button-active-bgcolor) !important;
  1013. }
  1014.  
  1015. .tab-group-label {
  1016. color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
  1017. opacity: .9;
  1018. outline: none !important;
  1019. min-width: 5px !important;
  1020. font-weight: normal !important;
  1021. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 30%, transparent) !important;
  1022. }
  1023.  
  1024. .tab-group-label-container {
  1025. tab-group:not([collapsed]) > &::after {
  1026. background-color: transparent !important;
  1027. }
  1028. }
  1029.  
  1030. .tab-group-line {
  1031. margin: 5px !important;
  1032. border-radius: 50px !important;
  1033. width: 5px !important;
  1034. height: 5px !important;
  1035. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 60%, transparent) !important;
  1036. }
  1037. }
  1038.  
  1039. .tabbrowser-tab:active,
  1040. #tabs-newtab-button:active,
  1041. #vertical-tabs-newtab-button:active,
  1042. .tools-and-extensions > moz-button:active {
  1043. transform: scale(.98);
  1044. }
  1045.  
  1046. :has(.tab-icon-overlay:active, .tab-audio-button:active, .tab-close-button:active) {
  1047. .tabbrowser-tab {
  1048. transform: none;
  1049. }
  1050. }
  1051.  
  1052. /* popup */
  1053.  
  1054. menupopup, panel[type="arrow"] {
  1055. appearance: menupopup !important;
  1056. --panel-border-radius: 6px !important;
  1057. --panel-padding: 6px !important;
  1058. --panel-separator-color: var(--bg3) !important;
  1059. --arrowpanel-background: var(--bg2) !important;
  1060. --arrowpanel-border-color: transparent !important;
  1061. --arrowpanel-color: light-dark(#000, #fff) !important;
  1062. }
  1063.  
  1064. panel[type="arrow"] {
  1065. --panel-background: light-dark(rgba(255, 255, 255, .55), rgba(15, 15, 12, .55)) !important;
  1066. --arrowpanel-background: transparent !important;
  1067. --arrowpanel-border-radius: 0 !important;
  1068. }
  1069.  
  1070. @keyframes panel-grow {
  1071. 0% {
  1072. transform: scaleX(.96) scaleY(.95);
  1073. }
  1074. 100% {
  1075. transform: scale(1.0);
  1076. }
  1077. }
  1078.  
  1079. @keyframes slide-in {
  1080. 0%, 30% {
  1081. translate: 100%;
  1082. opacity: 0;
  1083. }
  1084. 100% {
  1085. translate: 0;
  1086. opacity: 1;
  1087. }
  1088. }
  1089.  
  1090. @keyframes slide-out {
  1091. 100% {
  1092. translate: 100%;
  1093. opacity: 0;
  1094. }
  1095. 0% {
  1096. translate: 0;
  1097. opacity: 1;
  1098. }
  1099. }
  1100.  
  1101. panelmultiview, popupnotification {
  1102. animation-name: panel-grow;
  1103. animation-duration: 250ms;
  1104. }
  1105.  
  1106. .panel-arrowcontent {
  1107. border: none !important;
  1108. }
  1109.  
  1110. .panel-arrow {
  1111. stroke: transparent !important;
  1112. }
  1113.  
  1114. .proton-zap {
  1115. border-image: none !important;
  1116. }
  1117.  
  1118. #toolbar-context-toggle-vertical-tabs + menuseparator,
  1119. .panel-footer toolbarseparator, .panel-header + toolbarseparator,
  1120. #identity-popup-mainView-panel-header + toolbarseparator,
  1121. #permission-popup-mainView-panel-header + toolbarseparator,
  1122. #protections-popup-mainView-panel-header-section + toolbarseparator {
  1123. display: none !important;
  1124. }
  1125.  
  1126. menupopup,
  1127. .popup-internal-box,
  1128. #PopupAutoComplete > .autocomplete-richlistbox,
  1129. .menupopup-arrowscrollbox {
  1130. background: light-dark(rgba(255, 255, 255, .55), rgba(15, 15, 12, .55)) !important;
  1131. }
  1132.  
  1133. #tabContextMenu .menu-icon,
  1134. #contentAreaContextMenu .menu-icon {
  1135. display: none;
  1136. }
  1137.  
  1138. menuitem, menu {
  1139. appearance: none !important;
  1140. border-radius: 4px !important;
  1141. height: 22px !important;
  1142. }
  1143.  
  1144. menu {
  1145. margin: 2px 0 !important;
  1146. }
  1147.  
  1148. menupopup > menuitem[selected] {
  1149. background: none !important;
  1150. color: inherit !important;
  1151. }
  1152.  
  1153. menupopup .bookmark-item {
  1154. margin: 2px 0 !important;
  1155. height: 22px !important;
  1156. }
  1157.  
  1158. menupopup menu:hover:not([disabled=true]),
  1159. menupopup menuitem:hover:not([disabled=true]),
  1160. menupopup menu[_moz-menuactive]:not([disabled=true]),
  1161. menupopup menuitem[_moz-menuactive]:not([disabled=true]),
  1162. .protections-popup-footer-button:not([disabled=true]):hover,
  1163. #protections-popup-show-report-stack:hover .protections-popup-footer-button,
  1164. .protections-popup-category:not([disabled=true]):hover,
  1165. .identity-popup-content-blocking-category:not([disabled=true]):hover,
  1166. #PlacesToolbar .bookmark-item:is(:hover, [open], [_moz-menuactive]),
  1167. #downloadsPanel-mainView .download-state:hover {
  1168. background: var(--button-hover-bgcolor) !important;
  1169. color: inherit !important;
  1170. }
  1171.  
  1172. toolbarseparator, menuseparator::before {
  1173. border-top: 1px solid var(--bg3) !important;
  1174. }
  1175.  
  1176. menupopup menuseparator {
  1177. border: none !important;
  1178. margin: 0 !important;
  1179. }
  1180.  
  1181. toolbarseparator[orient="vertical"] {
  1182. margin: 0 4px !important;
  1183. }
  1184.  
  1185. .dialogBox {
  1186. margin-top: 80px !important;
  1187. backdrop-filter: blur(30px) !important;
  1188. box-shadow: var(--bs1) !important;
  1189. animation-name: panel-grow;
  1190. animation-duration: 250ms;
  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: -8px !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. .tab-background {
  1794. border-radius: 8px !important;
  1795. }
  1796.  
  1797. .tabbrowser-tab:not([selected], [pinned], :hover) .tab-background {
  1798. background: transparent !important;
  1799. }
  1800.  
  1801. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  1802. margin: 6px 0 6px 0 !important;
  1803. }
  1804.  
  1805. .tab-group-label {
  1806. display: flex !important;
  1807. align-items: center;
  1808. font-weight: normal !important;
  1809. font-size: 13px !important;
  1810. color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
  1811. opacity: .9;
  1812. outline: none !important;
  1813. min-height: var(--tab-min-height) !important;
  1814. margin-block: 0 !important;
  1815. padding-block: 0 !important;
  1816. margin-left: 1px !important;
  1817. margin-right: 10px !important;
  1818. padding-left: 33px !important;
  1819. border-radius: 8px !important;
  1820. width: 100% !important;
  1821. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 30%, transparent) !important;
  1822. background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  1823. background-repeat: no-repeat;
  1824. background-position: left 10px bottom 10px;
  1825. -moz-context-properties: fill;
  1826. fill: currentColor;
  1827.  
  1828. tab-group[collapsed] > .tab-group-label-container > & {
  1829. background-image: url("chrome://global/skin/icons/folder.svg");
  1830. background-position: left 8px bottom 8px;
  1831. }
  1832.  
  1833. &::first-letter {
  1834. font: unset !important;
  1835. }
  1836. }
  1837.  
  1838. .tab-group-line {
  1839. background-color: color-mix(in srgb, light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 60%, transparent) !important;
  1840.  
  1841. #tabbrowser-tabs & {
  1842. width: 1.5px !important;
  1843.  
  1844. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  1845. inset-block-start: 2px !important;
  1846. }
  1847.  
  1848. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  1849. inset-block-end: 2px !important;
  1850. }
  1851. }
  1852. }
  1853.  
  1854. .tab-group-label-container {
  1855. #tabbrowser-tabs & {
  1856. margin-block-start: 4px !important;
  1857. margin-block-end: 4px !important;
  1858. tab-group:not([collapsed]) > & {
  1859. padding-block-end: 0 !important;
  1860. }
  1861. }
  1862.  
  1863. #tabbrowser-tabs tab-group:not([collapsed]) > &::after {
  1864. width: 0 !important;
  1865. }
  1866. }
  1867.  
  1868. #tabbrowser-tabs {
  1869. tab-group > .tabbrowser-tab,
  1870. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  1871. margin-inline-start: 0 !important;
  1872. }
  1873. }
  1874.  
  1875. #urlbar[breakout][breakout-extend] {
  1876. left: 25vw !important;
  1877. }
  1878.  
  1879. :has(#urlbar[usertyping]) {
  1880. #urlbar {
  1881. left: 25vw !important;
  1882. }
  1883. }
  1884.  
  1885. :has(#tabbrowser-tabs:not([expanded])) {
  1886. .tab-group-line {
  1887. #tabbrowser-tabs & {
  1888. inset-inline: 0 !important;
  1889.  
  1890. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  1891. inset-block-start: 2px !important;
  1892. }
  1893.  
  1894. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  1895. inset-block-end: 2px !important;
  1896. }
  1897. }
  1898. }
  1899.  
  1900. .tab-group-label {
  1901. font-size: 0 !important;
  1902. margin-left: 10px !important;
  1903. padding: 0 !important;
  1904. width: 32px !important;
  1905. min-height: 32px !important;
  1906. max-width: 32px !important;
  1907. background-position: center;
  1908. }
  1909.  
  1910. .tab-close-button {
  1911. background-image: linear-gradient(var(--close-button-extra-background)),
  1912. linear-gradient(var(--bg2)) !important;
  1913.  
  1914. &:hover {
  1915. --close-button-extra-background: var(--button-background-color-ghost) !important;
  1916. }
  1917.  
  1918. &:hover:active {
  1919. --close-button-extra-background: var(--button-background-color-ghost-hover) !important;
  1920. }
  1921. }
  1922.  
  1923. #urlbar[breakout][breakout-extend] {
  1924. left: 20vw !important;
  1925. }
  1926.  
  1927. :has(#urlbar[usertyping]) {
  1928. #urlbar {
  1929. left: 20vw !important;
  1930. }
  1931. }
  1932. }
  1933. }
  1934.  
  1935. /* tweak */
  1936.  
  1937. @media -moz-pref("gwfox.plus") {
  1938. :root[sidebar-expand-on-hover] {
  1939. .tabbrowser-tab[pinned] .tab-icon-image {
  1940. margin-left: 6px;
  1941. }
  1942.  
  1943. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  1944. margin-left: unset;
  1945. }
  1946.  
  1947. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  1948. margin-left: 10.5px;
  1949. }
  1950.  
  1951. #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button,
  1952. .tabbrowser-tab[pinned] .tab-close-button {
  1953. display: none !important;
  1954. }
  1955.  
  1956. #tabbrowser-tabbox {
  1957. clip-path: inset(-50px 0 0 -8px);
  1958. transition: clip-path 200ms;
  1959. margin-left: 0 !important;
  1960. }
  1961.  
  1962. :has(#tabbrowser-tabs[expanded]) {
  1963. #tabbrowser-tabbox {
  1964. clip-path: inset(-50px 0 0 139px);
  1965. margin-left: 81px !important;
  1966. @media (-moz-platform: windows) {
  1967. margin-left: 81.5px !important;
  1968. }
  1969. }
  1970.  
  1971. #vertical-pinned-tabs-container {
  1972. .tab-content {
  1973. margin-left: -6px !important;
  1974. }
  1975.  
  1976. .tab-label-container {
  1977. margin-left: 1px !important;
  1978. }
  1979. }
  1980.  
  1981. :has(#sidebar-box:not([hidden])) {
  1982. #tabbrowser-tabbox {
  1983. margin-left: 0 !important;
  1984. }
  1985. }
  1986. }
  1987.  
  1988. :has(#sidebar-box:not([hidden])) {
  1989. #tabbrowser-tabbox {
  1990. clip-path: inset(-50px 0 0 -8px);
  1991. }
  1992. }
  1993. }
  1994.  
  1995. .tabbrowser-tab .tab-close-button {
  1996. margin-left: -5px;
  1997. order: 1;
  1998. }
  1999.  
  2000. .tabbrowser-tab .tab-label-container {
  2001. margin-left: 5px;
  2002. order: 3;
  2003. }
  2004.  
  2005. .tabbrowser-tab:not([pinned]):hover .tab-icon-image,
  2006. .tabbrowser-tab[selected]:not(:hover) .tab-close-button {
  2007. display: none;
  2008. }
  2009.  
  2010. .tabbrowser-tab:not([pinned]):hover .tab-label-container {
  2011. margin-left: 11.5px;
  2012. }
  2013.  
  2014. .tab-audio-button {
  2015. order: 10;
  2016. margin-right: -5px !important;
  2017. }
  2018.  
  2019. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2020. margin-left: 8.5px;
  2021. }
  2022.  
  2023. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2024. margin-left: 11.5px;
  2025. }
  2026.  
  2027. #PersonalToolbar {
  2028. position: fixed;
  2029. width: calc(100% - 16px);
  2030. margin: 0 8px 8px 8px !important;
  2031. height: 48px !important;
  2032. z-index: 1;
  2033. bottom: -32px;
  2034. opacity: 0;
  2035. transition: .25s;
  2036. padding-bottom: 0 !important;
  2037. background-color: var(--bg4) !important;
  2038. backdrop-filter: blur(30px) !important;
  2039. box-shadow: var(--bs1) !important;
  2040. border-bottom-left-radius: 8px !important;
  2041. border-bottom-right-radius: 8px !important;
  2042. overflow: initial !important;
  2043. }
  2044.  
  2045. #PersonalToolbar:hover {
  2046. bottom: 0;
  2047. opacity: 1;
  2048. transition: .25s;
  2049. }
  2050.  
  2051. #PersonalToolbar::before {
  2052. content: "";
  2053. position: absolute;
  2054. left: 0;
  2055. right: 0;
  2056. bottom: -8px;
  2057. height: 8px;
  2058. background-color: transparent;
  2059. }
  2060.  
  2061. toolbarbutton.bookmark-item:not(.subviewbutton) {
  2062. margin: 5px 0 !important;
  2063. }
  2064.  
  2065. #personal-toolbar-empty-description,
  2066. toolbarbutton.bookmark-item:not(.subviewbutton) {
  2067. padding: 4px 7px !important;
  2068. }
  2069.  
  2070. :root:-moz-window-inactive {
  2071. #PersonalToolbar {
  2072. background-color: var(--bg1) !important;
  2073. }
  2074. }
  2075.  
  2076. :root[customizing] {
  2077. #PersonalToolbar {
  2078. display: none !important;
  2079. }
  2080. }
  2081.  
  2082. @media (prefers-color-scheme: dark) {
  2083. #PersonalToolbar {
  2084. outline: 1px solid rgba(235, 235, 235, .2) !important;
  2085. outline-offset: -1px !important;
  2086. box-shadow: var(--bs2) !important;
  2087. @media (-moz-platform: windows) {
  2088. outline: none !important;
  2089. }
  2090. }
  2091. }
  2092.  
  2093. @media -moz-pref("widget.macos.native-context-menus") {
  2094. #PersonalToolbar {
  2095. background-color: light-dark(rgba(255, 255, 255, .55), rgba(25, 25, 25, .65)) !important;
  2096. }
  2097. }
  2098.  
  2099. @media -moz-pref("sidebar.revamp") {
  2100. :has(#sidebar-main:not([hidden])) {
  2101. #PersonalToolbar {
  2102. margin-left: 49.5px !important;
  2103. width: calc(100% - 57.5px);
  2104. @media (-moz-platform: windows) {
  2105. margin-left: 51px !important;
  2106. width: calc(100% - 59px);
  2107. }
  2108. }
  2109. }
  2110.  
  2111. :has(#sidebar-box:not([hidden])) {
  2112. #PersonalToolbar {
  2113. margin-left: 331px !important;
  2114. width: calc(100% - 339px);
  2115. @media (-moz-platform: windows) {
  2116. margin-left: 333px !important;
  2117. width: calc(100% - 341px);
  2118. }
  2119. }
  2120. }
  2121.  
  2122. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2123. #PersonalToolbar {
  2124. margin-left: 451px !important;
  2125. width: calc(100% - 459px);
  2126. @media (-moz-platform: windows) {
  2127. margin-left: 453px !important;
  2128. width: calc(100% - 461px);
  2129. }
  2130. }
  2131. }
  2132. }
  2133.  
  2134. @media -moz-pref("sidebar.verticalTabs") {
  2135. .titlebar-buttonbox-container {
  2136. position: absolute !important;
  2137. margin-top: unset !important;
  2138. left: 2px;
  2139. top: 14.5px;
  2140. }
  2141.  
  2142. .titlebar-buttonbox {
  2143. &::before {
  2144. content: "";
  2145. position: absolute;
  2146. top: -8px;
  2147. left: -16px;
  2148. width: 82px;
  2149. height: 200%;
  2150. }
  2151.  
  2152. &::after {
  2153. content: "";
  2154. }
  2155. }
  2156.  
  2157. #tab-notification-deck {
  2158. top: 6px;
  2159. }
  2160.  
  2161. .wrapper {
  2162. padding-top: 25.5px !important;
  2163. }
  2164.  
  2165. #sidebar-box {
  2166. margin-top: -45.5px !important;
  2167. margin-bottom: 2px !important;
  2168. }
  2169.  
  2170. .tools-and-extensions > moz-button:not([extension]) {
  2171. padding-left: var(--padding) !important;
  2172. }
  2173.  
  2174. .extensions, .customize-extensions-heading,
  2175. .tools-and-extensions > moz-button[extension],
  2176. button:has([src="chrome://global/skin/icons/settings.svg"]) {
  2177. display: none !important;
  2178. }
  2179.  
  2180. .actions-list {
  2181. display: var(--display, inherit) !important;
  2182. &:has(.expanded-button) {
  2183. display: flex !important;
  2184. }
  2185. }
  2186.  
  2187. #sidebar-tools-and-extensions-splitter {
  2188. display: var(--display) !important;
  2189. }
  2190.  
  2191. .webextension-browser-action {
  2192. margin-bottom: 11px !important;
  2193. }
  2194.  
  2195. #urlbar {
  2196. left: 10px !important;
  2197. top: 45px !important;
  2198. max-width: 201px !important;
  2199. -moz-window-dragging: no-drag;
  2200. &::before {
  2201. content: "";
  2202. position: absolute;
  2203. top: -8px;
  2204. left: -9px;
  2205. width: 220px;
  2206. height: 48px;
  2207. }
  2208. }
  2209.  
  2210. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2211. .titlebar-buttonbox::after {
  2212. position: fixed;
  2213. top: 45px;
  2214. left: 10px;
  2215. width: 201px;
  2216. height: 32px;
  2217. border-radius: 8px;
  2218. background: var(--button-active-bgcolor);
  2219. }
  2220.  
  2221. #urlbar::before {
  2222. content: "";
  2223. position: fixed;
  2224. top: 37px;
  2225. left: 0;
  2226. }
  2227. }
  2228.  
  2229. :has(#sidebar-main:not([hidden])) {
  2230. :has(#urlbar[usertyping]) {
  2231. #urlbar {
  2232. left: 25vw !important;
  2233. }
  2234. }
  2235. }
  2236.  
  2237. #stop-reload-button {
  2238. &::before {
  2239. content: "";
  2240. position: absolute;
  2241. top: 0;
  2242. left: 0;
  2243. width: 226px;
  2244. height: 10px;
  2245. }
  2246.  
  2247. &::after {
  2248. content: "";
  2249. position: absolute;
  2250. top: 8px;
  2251. left: 213px;
  2252. width: 13px;
  2253. height: 100%;
  2254. }
  2255. }
  2256.  
  2257. #urlbar-background, .urlbar-input-container {
  2258. height: 32px !important;
  2259. border-radius: 8px !important;
  2260. }
  2261.  
  2262. #urlbar-search-mode-indicator {
  2263. margin-top: 4px !important;
  2264. }
  2265.  
  2266. #identity-box, #tracking-protection-icon-container {
  2267. margin-top: 1px !important;
  2268. }
  2269.  
  2270. #back-button {
  2271. list-style-image: url("resources/back.svg") !important;
  2272. }
  2273.  
  2274. #forward-button {
  2275. list-style-image: url("resources/forward.svg") !important;
  2276. }
  2277.  
  2278. #tabs-newtab-button {
  2279. margin-top: 5px !important;
  2280. }
  2281.  
  2282. #tabs-newtab-button,
  2283. #vertical-tabs-newtab-button {
  2284. font-size: 13px !important;
  2285. }
  2286.  
  2287. .tabbrowser-tab:-moz-window-inactive {
  2288. opacity: .5 !important;
  2289. }
  2290.  
  2291. .tabbrowser-tab .tab-label-container {
  2292. margin-left: 1px;
  2293. }
  2294.  
  2295. .tab-background {
  2296. border-radius: 8px !important;
  2297. }
  2298.  
  2299. .tabbrowser-tab:not([selected], [pinned], :hover) .tab-background {
  2300. background: transparent !important;
  2301. }
  2302.  
  2303. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2304. margin-left: 6.5px;
  2305. }
  2306.  
  2307. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  2308. margin: 6px 0 6px 0 !important;
  2309. }
  2310.  
  2311. :has(#sidebar-main:not([hidden])) {
  2312. #PersonalToolbar {
  2313. margin-left: 221px !important;
  2314. width: calc(100% - 229px);
  2315. }
  2316. }
  2317.  
  2318. :has(#sidebar-box:not([hidden])) {
  2319. #PersonalToolbar {
  2320. margin-left: 503px !important;
  2321. width: calc(100% - 511px);
  2322. }
  2323. }
  2324.  
  2325. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2326. #PersonalToolbar {
  2327. margin-left: 623px !important;
  2328. width: calc(100% - 631px);
  2329. }
  2330. }
  2331.  
  2332. :root:not([inDOMFullscreen]) {
  2333. #nav-bar {
  2334. padding-top: 6.5px !important;
  2335. padding-bottom: 7px !important;
  2336. padding-left: 71px !important;
  2337. height: 53.5px !important;
  2338. }
  2339.  
  2340. #tabbrowser-tabpanels {
  2341. margin-top: -45.5px;
  2342. transition: .25s !important;
  2343. }
  2344.  
  2345. :has(#nav-bar:hover) {
  2346. #tabbrowser-tabpanels {
  2347. margin-top: -8.5px;
  2348. transition: .25s !important;
  2349. }
  2350. }
  2351. }
  2352.  
  2353. :has(#tabbrowser-tabs[expanded]) {
  2354. --padding: 0;
  2355. #sidebar-main {
  2356. min-width: 221px !important;
  2357. }
  2358.  
  2359. .tab-close-button {
  2360. margin-inline-end: calc(-1 * var(--tab-close-button-padding)) !important;
  2361. }
  2362.  
  2363. .tab-icon-overlay {
  2364. display: none !important;
  2365. }
  2366.  
  2367. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2368. display: block !important;
  2369. background-repeat: no-repeat;
  2370. background-position: center;
  2371. -moz-context-properties: fill, fill-opacity;
  2372. fill: currentColor;
  2373. fill-opacity: .6;
  2374. &[soundplaying] {
  2375. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2376. }
  2377. &[muted] {
  2378. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2379. }
  2380. &[activemedia-blocked] {
  2381. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2382. }
  2383. }
  2384.  
  2385. :has(.titlebar-buttonbox:hover, #urlbar:hover, #back-button:hover, #forward-button:hover, #stop-reload-button:hover, #sidebar-button:hover) {
  2386. #tabbrowser-tabpanels {
  2387. margin-top: -45.5px;
  2388. }
  2389. }
  2390. }
  2391.  
  2392. :has(#tabbrowser-tabs:not([expanded])) {
  2393. --padding: 16px;
  2394. :has(#sidebar-main:not([hidden])) {
  2395. .sidebar-splitter {
  2396. cursor: col-resize !important;
  2397. }
  2398.  
  2399. #PersonalToolbar {
  2400. margin-left: 81px !important;
  2401. width: calc(100% - 89px);
  2402. @media (-moz-platform: windows) {
  2403. margin-left: 81.5px !important;
  2404. width: calc(100% - 89.5px);
  2405. }
  2406. }
  2407. }
  2408.  
  2409. :has(#sidebar-box:not([hidden])) {
  2410. .sidebar-splitter {
  2411. cursor: default !important;
  2412. }
  2413.  
  2414. #nav-bar {
  2415. padding-left: 352px !important;
  2416. }
  2417.  
  2418. #PersonalToolbar {
  2419. margin-left: 363px !important;
  2420. width: calc(100% - 371px);
  2421. @media (-moz-platform: windows) {
  2422. margin-left: 363.5px !important;
  2423. width: calc(100% - 371.5px);
  2424. }
  2425. }
  2426. }
  2427.  
  2428. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  2429. #nav-bar {
  2430. padding-left: 472px !important;
  2431. }
  2432.  
  2433. #PersonalToolbar {
  2434. margin-left: 483px !important;
  2435. width: calc(100% - 491px);
  2436. @media (-moz-platform: windows) {
  2437. margin-left: 483.5px !important;
  2438. width: calc(100% - 491.5px);
  2439. }
  2440. }
  2441. }
  2442.  
  2443. .tab-group-line {
  2444. #tabbrowser-tabs & {
  2445. inset: -3px -9px -2px !important;
  2446.  
  2447. .tabbrowser-tab:first-of-type > .tab-stack > .tab-background > & {
  2448. inset-block-start: 2px !important;
  2449. }
  2450.  
  2451. .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
  2452. inset-block-end: 2px !important;
  2453. }
  2454. }
  2455. }
  2456.  
  2457. .tab-group-label {
  2458. font-size: 0 !important;
  2459. margin-left: 10px !important;
  2460. padding-left: 62px !important;
  2461. background-position: center;
  2462. }
  2463.  
  2464. .tabbrowser-tab[pinned] {
  2465. width: 74px !important;
  2466. }
  2467.  
  2468. .tabbrowser-tab {
  2469. padding-left: 9px !important;
  2470. }
  2471.  
  2472. .tab-background {
  2473. margin-inline: 0 !important;
  2474. width: 62px !important;
  2475. }
  2476.  
  2477. .tabbrowser-tab:not([pinned]) .tab-icon-image {
  2478. display: unset;
  2479. margin-left: 6px;
  2480. }
  2481.  
  2482. .tab-throbber {
  2483. margin-left: 6px !important;
  2484. }
  2485.  
  2486. #tabs-newtab-button,
  2487. #vertical-tabs-newtab-button {
  2488. min-width: 62px !important;
  2489. margin-left: 10px !important;
  2490. }
  2491.  
  2492. #urlbar::before {
  2493. width: 82px;
  2494. }
  2495.  
  2496. :has(#sidebar-main:not([hidden])) {
  2497. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2498. width: 62px !important;
  2499.  
  2500. #identity-box[pageproxystate="invalid"] #identity-icon {
  2501. margin-left: -5px !important;
  2502. }
  2503.  
  2504. #identity-box {
  2505. margin-right: 16px !important;
  2506. margin-left: 16px !important;
  2507. }
  2508.  
  2509. #identity-permission-box,
  2510. #notification-popup-box,
  2511. #tracking-protection-icon-container {
  2512. display: none !important;
  2513. }
  2514. }
  2515. }
  2516.  
  2517. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2518. .titlebar-buttonbox::after {
  2519. width: 62px;
  2520. }
  2521. }
  2522.  
  2523. :has(.titlebar-buttonbox:hover, #urlbar:hover) {
  2524. #tabbrowser-tabpanels {
  2525. margin-top: -45.5px;
  2526. }
  2527. }
  2528.  
  2529. @media -moz-pref("sidebar.visibility", "expand-on-hover") {
  2530. :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) {
  2531. :has(#tabbrowser-tabs:not([expanded])) {
  2532. --display: block;
  2533. }
  2534.  
  2535. #urlbar::before {
  2536. width: 220px;
  2537. }
  2538.  
  2539. #tabbrowser-tabbox {
  2540. clip-path: inset(-50px 0 0 139px);
  2541. margin-left: -139px !important;
  2542. }
  2543.  
  2544. #tabbrowser-tabpanels {
  2545. margin-top: -45.5px !important;
  2546. @media (-moz-platform: windows) {
  2547. margin-top: -44.5px !important;
  2548. }
  2549. }
  2550.  
  2551. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  2552. .titlebar-buttonbox::after {
  2553. width: 201px;
  2554. }
  2555. }
  2556.  
  2557. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2558. width: 221px !important;
  2559.  
  2560. #identity-box[pageproxystate="invalid"] #identity-icon {
  2561. margin-left: unset !important;
  2562. margin-right: 4px !important;
  2563. }
  2564.  
  2565. #identity-box {
  2566. margin-right: 28px !important;
  2567. margin-left: 0 !important;
  2568. }
  2569.  
  2570. #identity-permission-box[open=true],
  2571. #identity-permission-box[hasPermissions],
  2572. #identity-permission-box[hasSharingIcon],
  2573. #notification-popup-box,
  2574. #tracking-protection-icon-container {
  2575. display: flex !important;
  2576. }
  2577. }
  2578.  
  2579. #tabbrowser-tabs {
  2580. tab-group > .tabbrowser-tab,
  2581. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  2582. margin-inline-start: 0 !important;
  2583. }
  2584. }
  2585.  
  2586. tab-group {
  2587. .tab-group-label {
  2588. font-size: 13px !important;
  2589. background-position: left 9px bottom 11px;
  2590.  
  2591. #tabbrowser-tabs:not([expanded]) & {
  2592. width: 201px !important;
  2593. padding-left: 33px !important;
  2594. max-width: unset !important;
  2595. font-size-adjust: unset !important;
  2596. }
  2597.  
  2598. tab-group[collapsed] > .tab-group-label-container > & {
  2599. background-position: left 9px bottom 7.5px;
  2600. }
  2601. }
  2602. }
  2603.  
  2604. #tabbrowser-tabs,
  2605. #tabs-newtab-button,
  2606. #vertical-tabs-newtab-button {
  2607. width: 221px !important;
  2608. }
  2609.  
  2610. #tabs-newtab-button,
  2611. #vertical-tabs-newtab-button {
  2612. margin-left: 9px !important;
  2613. }
  2614.  
  2615. #tabbrowser-tabs .toolbarbutton-text {
  2616. margin-left: 2px !important;
  2617. }
  2618.  
  2619. #vertical-pinned-tabs-container {
  2620. .tab-icon-overlay {
  2621. margin-left: -15px;
  2622. }
  2623. }
  2624.  
  2625. .tabbrowser-tab[pinned] {
  2626. width: unset !important;
  2627. }
  2628.  
  2629. .tab-background {
  2630. width: 201px !important;
  2631. }
  2632.  
  2633. .tab-icon-image, .tab-throbber {
  2634. margin-left: -9px !important;
  2635. margin-right: 7.5px !important;
  2636. }
  2637.  
  2638. .tab-label-container,
  2639. #tabbrowser-tabs .toolbarbutton-text {
  2640. display: block !important;
  2641. }
  2642.  
  2643. .tab-icon-overlay {
  2644. display: none !important;
  2645. }
  2646.  
  2647. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2648. display: block !important;
  2649. background-repeat: no-repeat;
  2650. background-position: center;
  2651. -moz-context-properties: fill, fill-opacity;
  2652. fill: currentColor;
  2653. fill-opacity: .6;
  2654. &[soundplaying] {
  2655. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2656. }
  2657. &[muted] {
  2658. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2659. }
  2660. &[activemedia-blocked] {
  2661. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2662. }
  2663. }
  2664. }
  2665.  
  2666. :has(#urlbar:not([breakout][breakout-extend], [usertyping]):hover, #urlbar:not([breakout][breakout-extend], [usertyping]) #page-action-buttons > *:hover) {
  2667. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  2668. #identity-box {
  2669. margin-right: unset !important;
  2670. margin-left: unset !important;
  2671. }
  2672. }
  2673. }
  2674.  
  2675. :has(#tabbrowser-tabs[expanded], #tabbrowser-tabs:not([expanded])) {
  2676. #urlbar[breakout][breakout-extend] {
  2677. top: 20vh !important;
  2678. left: 25vw !important;
  2679. }
  2680.  
  2681. :has(#urlbar[usertyping]) {
  2682. #urlbar {
  2683. left: 25vw !important;
  2684. }
  2685. }
  2686. }
  2687.  
  2688. :has(#sidebar-box:not([hidden])) {
  2689. :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]) {
  2690. #nav-bar {
  2691. padding-left: 71px !important;
  2692. }
  2693. }
  2694. }
  2695. }
  2696. }
  2697.  
  2698. :root:not([chromehidden~="toolbar"], [customizing]):has(#sidebar-main[hidden]) {
  2699. .titlebar-buttonbox-container {
  2700. position: fixed !important;
  2701. top: 22px !important;
  2702. left: -258px;
  2703. opacity: 0;
  2704. transition: left .25s !important;
  2705. @media (-moz-platform: windows) {
  2706. top: 24px !important;
  2707. }
  2708. }
  2709.  
  2710. .titlebar-close {
  2711. order: -1;
  2712. list-style-image: url("resources/titlebar-backdrop.svg") !important;
  2713. .titlebar-buttonbox:hover & {
  2714. list-style-image: url("resources/titlebar-close-hover.svg") !important;
  2715. &:active {
  2716. list-style-image: url("resources/titlebar-close-active.svg") !important;
  2717. @media (prefers-color-scheme: dark) {
  2718. list-style-image: url("resources/titlebar-close-active-dark.svg") !important;
  2719. }
  2720. }
  2721. }
  2722. }
  2723.  
  2724. .titlebar-min {
  2725. list-style-image: url("resources/titlebar-backdrop.svg") !important;
  2726. .titlebar-buttonbox:hover & {
  2727. list-style-image: url("resources/titlebar-min-hover.svg") !important;
  2728. &:active {
  2729. list-style-image: url("resources/titlebar-min-active.svg") !important;
  2730. @media (prefers-color-scheme: dark) {
  2731. list-style-image: url("resources/titlebar-min-active-dark.svg") !important;
  2732. }
  2733. }
  2734. }
  2735. }
  2736.  
  2737. .titlebar-max {
  2738. list-style-image: url("resources/titlebar-backdrop.svg") !important;
  2739. .titlebar-buttonbox:hover & {
  2740. list-style-image: url("resources/titlebar-max-hover.svg") !important;
  2741. &:active {
  2742. list-style-image: url("resources/titlebar-max-active.svg") !important;
  2743. @media (prefers-color-scheme: dark) {
  2744. list-style-image: url("resources/titlebar-max-active-dark.svg") !important;
  2745. }
  2746. }
  2747. }
  2748. }
  2749.  
  2750. .titlebar-restore {
  2751. list-style-image: url("resources/titlebar-backdrop.svg") !important;
  2752. .titlebar-buttonbox:hover & {
  2753. list-style-image: url("resources/titlebar-restore-hover.svg") !important;
  2754. &:active {
  2755. list-style-image: url("resources/titlebar-restore-active.svg") !important;
  2756. @media (prefers-color-scheme: dark) {
  2757. list-style-image: url("resources/titlebar-restore-active-dark.svg") !important;
  2758. }
  2759. }
  2760. }
  2761. }
  2762.  
  2763. @media (-moz-platform: macos) {
  2764. .titlebar-buttonbox {
  2765. appearance: none !important;
  2766. &::before {
  2767. content: "";
  2768. position: absolute;
  2769. z-index: -1;
  2770. }
  2771. }
  2772.  
  2773. .titlebar-button {
  2774. appearance: none !important;
  2775. display: flex !important;
  2776. padding: 0 !important;
  2777. scale: .75;
  2778. margin-inline: 2px !important;
  2779. }
  2780.  
  2781. .titlebar-max, .titlebar-restore {
  2782. .titlebar-buttonbox:hover & {
  2783. list-style-image: url("resources/titlebar-max-hover-mac.svg") !important;
  2784. &:active {
  2785. list-style-image: url("resources/titlebar-max-active-mac.svg") !important;
  2786. @media (prefers-color-scheme: dark) {
  2787. list-style-image: url("resources/titlebar-max-active-dark-mac.svg") !important;
  2788. }
  2789. }
  2790. }
  2791. }
  2792. }
  2793.  
  2794. @media (prefers-color-scheme: dark) {
  2795. .titlebar-buttonbox:not(:hover, :active) {
  2796. opacity: .5;
  2797. }
  2798. }
  2799.  
  2800. #nav-bar {
  2801. z-index: 9;
  2802. margin-top: -45.5px !important;
  2803. @media (-moz-platform: windows) {
  2804. margin-top: -44.5px !important;
  2805. }
  2806. }
  2807.  
  2808. #reload-button,
  2809. #stop-button,
  2810. #back-button,
  2811. #forward-button,
  2812. #sidebar-button {
  2813. position: fixed !important;
  2814. top: 15px;
  2815. left: -258px;
  2816. opacity: 0;
  2817. transition: left .25s !important;
  2818. }
  2819.  
  2820. #downloads-button,
  2821. #PanelUI-menu-button,
  2822. #nav-bar-overflow-button,
  2823. #unified-extensions-button {
  2824. position: fixed !important;
  2825. bottom: 16px;
  2826. left: -258px;
  2827. opacity: 0;
  2828. transition: left .25s !important;
  2829. }
  2830.  
  2831. #downloads-button,
  2832. #nav-bar-overflow-button {
  2833. display: flex !important;
  2834. }
  2835.  
  2836. #tabbrowser-tabs {
  2837. margin-top: 52.5px !important;
  2838. margin-bottom: 45px !important;
  2839.  
  2840. #tabbrowser-tabs {
  2841. tab-group > .tabbrowser-tab,
  2842. &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
  2843. margin-inline-start: 0 !important;
  2844. }
  2845. }
  2846.  
  2847. tab-group {
  2848. .tab-group-label {
  2849. font-size: 13px !important;
  2850. background-position: left 9px bottom 11px;
  2851.  
  2852. #tabbrowser-tabs:not([expanded]) & {
  2853. width: 201px !important;
  2854. padding-left: 33px !important;
  2855. max-width: unset !important;
  2856. font-size-adjust: unset !important;
  2857. }
  2858.  
  2859. tab-group[collapsed] > .tab-group-label-container > & {
  2860. background-position: left 9px bottom 7.5px;
  2861. }
  2862. }
  2863. }
  2864. }
  2865.  
  2866. #tabbrowser-tabs,
  2867. #tabs-newtab-button,
  2868. #vertical-tabs-newtab-button {
  2869. width: 221px !important;
  2870. }
  2871.  
  2872. #tabs-newtab-button,
  2873. #vertical-tabs-newtab-button {
  2874. margin-left: 9px !important;
  2875. }
  2876.  
  2877. #tabbrowser-tabs .toolbarbutton-text {
  2878. margin-left: 2px !important;
  2879. }
  2880.  
  2881. #vertical-pinned-tabs-container,
  2882. #pinned-tabs-container[orient="vertical"] {
  2883. margin-left: 5px !important;
  2884. margin-right: 5px !important;
  2885.  
  2886. .tab-background {
  2887. width: calc(100% - 10px) !important;
  2888. }
  2889.  
  2890. .tabbrowser-tab {
  2891. margin-left: -5px !important;
  2892. margin-right: -6px !important;
  2893. }
  2894.  
  2895. .tab-label-container {
  2896. display: none !important;
  2897. }
  2898.  
  2899. .tab-content {
  2900. justify-content: center !important;
  2901. margin-left: 7px !important;
  2902. }
  2903.  
  2904. .tab-icon-overlay {
  2905. margin-left: -15px;
  2906. }
  2907. }
  2908.  
  2909. #vertical-pinned-tabs-splitter,
  2910. #vertical-pinned-tabs-container-separator {
  2911. display: none !important;
  2912. }
  2913.  
  2914. .tabbrowser-tab[pinned] {
  2915. width: unset !important;
  2916. }
  2917.  
  2918. .tab-background {
  2919. width: 201px !important;
  2920. }
  2921.  
  2922. .tab-icon-image, .tab-throbber {
  2923. margin-left: -9px !important;
  2924. margin-right: 7.5px !important;
  2925. }
  2926.  
  2927. .tab-label-container,
  2928. #tabbrowser-tabs .toolbarbutton-text {
  2929. display: block !important;
  2930. }
  2931.  
  2932. .tab-icon-overlay {
  2933. display: none !important;
  2934. }
  2935.  
  2936. .tab-audio-button:is([soundplaying], [muted], [activemedia-blocked]) {
  2937. display: block !important;
  2938. background-repeat: no-repeat;
  2939. background-position: center;
  2940. -moz-context-properties: fill, fill-opacity;
  2941. fill: currentColor;
  2942. fill-opacity: .6;
  2943. &[soundplaying] {
  2944. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  2945. }
  2946. &[muted] {
  2947. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  2948. }
  2949. &[activemedia-blocked] {
  2950. background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  2951. }
  2952. }
  2953.  
  2954. .tab-close-button {
  2955. -moz-context-properties: fill, fill-opacity !important;
  2956. margin-inline-end: calc(var(--tab-inline-padding) / -2) !important;
  2957. width: 24px !important;
  2958. height: 24px !important;
  2959. top: 6px !important;
  2960. left: 3px !important;
  2961. box-sizing: border-box !important;
  2962. padding: var(--tab-close-button-padding) !important;
  2963. border-radius: var(--tab-border-radius) !important;
  2964. list-style-image: url(chrome://global/skin/icons/close-12.svg), url(resource://content-accessible/close-12.svg) !important;
  2965. box-shadow: unset !important;
  2966. background-image: linear-gradient(var(--close-button-extra-background)) !important;
  2967.  
  2968. &:hover {
  2969. --close-button-extra-background: var(--button-background-color-ghost-hover) !important;
  2970. }
  2971.  
  2972. &:hover:active {
  2973. --close-button-extra-background: var(--button-background-color-ghost-active) !important;
  2974. }
  2975. }
  2976.  
  2977. .tabbrowser-tab:not([pinned]):hover .tab-icon-image {
  2978. opacity: 0;
  2979. }
  2980.  
  2981. .tabbrowser-tab:not([pinned]):hover .tab-label-container {
  2982. margin-left: 1px;
  2983. }
  2984.  
  2985. .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2986. margin-left: 1px;
  2987. }
  2988.  
  2989. .tabbrowser-tab:hover:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container {
  2990. margin-left: 1px;
  2991. }
  2992.  
  2993. .tabbrowser-tab[pinned] .tab-audio-button {
  2994. display: none !important;
  2995. }
  2996.  
  2997. .tabbrowser-tab[pinned] .tab-icon-overlay {
  2998. display: flex !important;
  2999. }
  3000.  
  3001. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  3002. top: 52px !important;
  3003. left: -225px !important;
  3004. opacity: 0;
  3005. transition: left .25s !important;
  3006. }
  3007.  
  3008. #urlbar::before {
  3009. width: 218px;
  3010. }
  3011.  
  3012. #toolbar-context-customize-sidebar {
  3013. display: none !important;
  3014. }
  3015.  
  3016. #sidebar-main {
  3017. height: calc(100% - 16px) !important;
  3018. display: flex !important;
  3019. position: fixed;
  3020. top: 8px;
  3021. left: -225px;
  3022. opacity: 0;
  3023. transition: .25s;
  3024. z-index: 9;
  3025. border-radius: 8px !important;
  3026. background-color: var(--bg4);
  3027. backdrop-filter: blur(30px);
  3028. box-shadow: var(--bs1);
  3029. overflow: unset !important;
  3030. transition: .25s;
  3031. @media (prefers-color-scheme: dark) {
  3032. box-shadow: var(--bs2) !important;
  3033. @media (-moz-platform: macos) {
  3034. outline: 1px solid rgba(235, 235, 235, .2) !important;
  3035. outline-offset: -1px !important;
  3036. }
  3037. }
  3038. &::before {
  3039. content: "";
  3040. position: absolute;
  3041. top: 0;
  3042. left: -20px;
  3043. width: 25px;
  3044. height: 100%;
  3045. }
  3046. &::after {
  3047. content: "";
  3048. position: absolute;
  3049. top: 0;
  3050. right: -20px;
  3051. width: 25px;
  3052. height: 100%;
  3053. }
  3054. }
  3055.  
  3056. #sidebar-box {
  3057. margin-top: 0 !important;
  3058. margin-left: 2px !important;
  3059. margin-right: -6px !important;
  3060. }
  3061.  
  3062. #tabbrowser-tabpanels {
  3063. margin-top: 0;
  3064. }
  3065.  
  3066. :has(#sidebar-box:not([hidden])) {
  3067. #PersonalToolbar {
  3068. margin-left: 282px !important;
  3069. width: calc(100% - 290px);
  3070. }
  3071. }
  3072.  
  3073. :has(#urlbar:hover, .titlebar-buttonbox:hover) {
  3074. #tabbrowser-tabpanels {
  3075. margin-top: 0;
  3076. }
  3077. }
  3078.  
  3079. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3080. .titlebar-buttonbox::after {
  3081. content: none;
  3082. }
  3083. }
  3084.  
  3085. :has(#tabbrowser-tabs:not([expanded])) {
  3086. --display: none;
  3087. }
  3088.  
  3089. :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]) {
  3090. .titlebar-buttonbox-container {
  3091. left: 7px;
  3092. opacity: 1;
  3093. transition: left .25s !important;
  3094. @media (-moz-platform: windows) {
  3095. left: 18px;
  3096. }
  3097. }
  3098.  
  3099. #reload-button,
  3100. #stop-button,
  3101. #back-button,
  3102. #forward-button,
  3103. #sidebar-button {
  3104. left: 80px;
  3105. opacity: 1;
  3106. transition: left .25s !important;
  3107. }
  3108.  
  3109. #back-button {
  3110. left: 119px;
  3111. }
  3112.  
  3113. #forward-button {
  3114. left: 153px;
  3115. }
  3116.  
  3117. #reload-button,
  3118. #stop-button {
  3119. left: 187px;
  3120. }
  3121.  
  3122. #downloads-button,
  3123. #PanelUI-menu-button,
  3124. #nav-bar-overflow-button,
  3125. #unified-extensions-button {
  3126. left: 20px;
  3127. opacity: 1;
  3128. transition: left .25s !important;
  3129. }
  3130.  
  3131. #nav-bar-overflow-button {
  3132. left: 72px;
  3133. }
  3134.  
  3135. #unified-extensions-button {
  3136. left: 123px;
  3137. }
  3138.  
  3139. #downloads-button {
  3140. left: 175px;
  3141. }
  3142.  
  3143. #sidebar-main {
  3144. left: 8px;
  3145. opacity: 1;
  3146. transition: .25s;
  3147. }
  3148.  
  3149. #urlbar:not([breakout][breakout-extend], [usertyping]) {
  3150. left: 18px !important;
  3151. opacity: 1;
  3152. transition: left .25s !important;
  3153. }
  3154. }
  3155. }
  3156.  
  3157. :root[inFullscreen]:has(#tabbrowser-tabs:not([expanded])) {
  3158. :has(#sidebar-box:not([hidden])) {
  3159. #sidebar-button {
  3160. margin-left: -335px !important;
  3161. margin-right: 300px !important;
  3162. }
  3163. }
  3164. }
  3165.  
  3166. :root[inFullscreen]:has(#tabbrowser-tabs:not([expanded])) {
  3167. :has(#sidebar-box[sidebarcommand="viewGenaiChatSidebar"]:not([hidden])) {
  3168. #sidebar-button {
  3169. margin-left: -455px !important;
  3170. margin-right: 420px !important;
  3171. }
  3172. }
  3173. }
  3174.  
  3175. :root[inFullscreen] {
  3176. .browser-toolbox-background {
  3177. background: transparent !important;
  3178. }
  3179.  
  3180. #urlbar {
  3181. left: 10px !important;
  3182. }
  3183.  
  3184. #sidebar-button {
  3185. margin-left: -62px !important;
  3186. margin-right: 62px !important;
  3187. }
  3188.  
  3189. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3190. #back-button::before {
  3191. content: "";
  3192. position: fixed;
  3193. top: 45px;
  3194. left: 10px;
  3195. width: 201px;
  3196. height: 32px;
  3197. border-radius: 8px;
  3198. background: var(--button-active-bgcolor);
  3199. }
  3200. }
  3201.  
  3202. :has(#tabbrowser-tabs:not([expanded])) {
  3203. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3204. #back-button::before {
  3205. width: 62px;
  3206. }
  3207. }
  3208.  
  3209. #sidebar-button {
  3210. margin-left: -52px !important;
  3211. margin-right: 22px !important;
  3212. }
  3213. }
  3214.  
  3215. :has(#sidebar-main[hidden]) {
  3216. #nav-bar {
  3217. padding-left: 55px !important;
  3218. }
  3219. }
  3220.  
  3221. @media -moz-pref("sidebar.visibility", "expand-on-hover") {
  3222. :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]) {
  3223. :has(#urlbar[breakout][breakout-extend], [usertyping]) {
  3224. #back-button::before {
  3225. width: 201px;
  3226. }
  3227. }
  3228. }
  3229. }
  3230. }
  3231.  
  3232. :root:not([sizemode="maximized"], [sizemode="fullscreen"]):has(#sidebar-main[hidden]) .titlebar-restore,
  3233. :root:is([sizemode="maximized"], [sizemode="fullscreen"]):has(#sidebar-main[hidden]) .titlebar-max {
  3234. display: none !important;
  3235. }
  3236.  
  3237. :root[customizing] {
  3238. #urlbar {
  3239. visibility: hidden;
  3240. }
  3241. }
  3242. }
  3243.  
  3244. @media (-moz-platform: windows) {
  3245. :root[inFullscreen] {
  3246. .titlebar-buttonbox-container {
  3247. display: none !important;
  3248. }
  3249.  
  3250. #PersonalToolbar {
  3251. visibility: unset !important;
  3252. }
  3253. }
  3254.  
  3255. .titlebar-buttonbox-container {
  3256. left: 15px;
  3257. top: 19.5px;
  3258. }
  3259.  
  3260. .titlebar-button {
  3261. padding: 0 4px !important;
  3262. background-color: transparent !important;
  3263. &:-moz-window-inactive {
  3264. list-style-image: url("resources/titlebar-backdrop.svg") !important;
  3265. @media (prefers-color-scheme: dark) {
  3266. list-style-image: url("resources/titlebar-backdrop-dark.svg") !important;
  3267. }
  3268. }
  3269. }
  3270.  
  3271. .titlebar-close {
  3272. order: -1;
  3273. list-style-image: url("resources/titlebar-close.svg") !important;
  3274. .titlebar-buttonbox:hover & {
  3275. list-style-image: url("resources/titlebar-close-hover.svg") !important;
  3276. &:active {
  3277. list-style-image: url("resources/titlebar-close-active.svg") !important;
  3278. @media (prefers-color-scheme: dark) {
  3279. list-style-image: url("resources/titlebar-close-active-dark.svg") !important;
  3280. }
  3281. }
  3282. }
  3283. }
  3284.  
  3285. .titlebar-min {
  3286. list-style-image: url("resources/titlebar-min.svg") !important;
  3287. .titlebar-buttonbox:hover & {
  3288. list-style-image: url("resources/titlebar-min-hover.svg") !important;
  3289. &:active {
  3290. list-style-image: url("resources/titlebar-min-active.svg") !important;
  3291. @media (prefers-color-scheme: dark) {
  3292. list-style-image: url("resources/titlebar-min-active-dark.svg") !important;
  3293. }
  3294. }
  3295. }
  3296. }
  3297.  
  3298. .titlebar-max {
  3299. list-style-image: url("resources/titlebar-max.svg") !important;
  3300. .titlebar-buttonbox:hover & {
  3301. list-style-image: url("resources/titlebar-max-hover.svg") !important;
  3302. &:active {
  3303. list-style-image: url("resources/titlebar-max-active.svg") !important;
  3304. @media (prefers-color-scheme: dark) {
  3305. list-style-image: url("resources/titlebar-max-active-dark.svg") !important;
  3306. }
  3307. }
  3308. }
  3309. }
  3310.  
  3311. .titlebar-restore {
  3312. list-style-image: url("resources/titlebar-max.svg") !important;
  3313. .titlebar-buttonbox:hover & {
  3314. list-style-image: url("resources/titlebar-restore-hover.svg") !important;
  3315. &:active {
  3316. list-style-image: url("resources/titlebar-restore-active.svg") !important;
  3317. @media (prefers-color-scheme: dark) {
  3318. list-style-image: url("resources/titlebar-restore-active-dark.svg") !important;
  3319. }
  3320. }
  3321. }
  3322. }
  3323.  
  3324. @media -moz-pref("sidebar.verticalTabs") {
  3325. .titlebar-buttonbox-container {
  3326. left: 12px;
  3327. top: 17px;
  3328. }
  3329.  
  3330. .titlebar-buttonbox {
  3331. &::before {
  3332. content: "";
  3333. position: absolute;
  3334. top: 12px;
  3335. left: -16px;
  3336. width: 82px;
  3337. height: 15px;
  3338. }
  3339.  
  3340. &::after {
  3341. content: "";
  3342. position: absolute;
  3343. top: -15px;
  3344. left: -16px;
  3345. width: 82px;
  3346. height: 15px;
  3347. }
  3348. }
  3349.  
  3350. .titlebar-close::before {
  3351. content: "";
  3352. position: absolute;
  3353. top: -15px;
  3354. left: -15px;
  3355. width: 15px;
  3356. height: 30px;
  3357. }
  3358.  
  3359. #sidebar-box {
  3360. margin-top: -44.5px !important;
  3361. }
  3362.  
  3363. :root:not([inDOMFullscreen]) {
  3364. #tabbrowser-tabpanels {
  3365. margin-top: -44.5px;
  3366. }
  3367. }
  3368.  
  3369. :has(#tabbrowser-tabs[expanded]) {
  3370. :has(.titlebar-buttonbox:hover, #urlbar:hover, #back-button:hover, #forward-button:hover, #stop-reload-button:hover, #sidebar-button:hover) {
  3371. #tabbrowser-tabpanels {
  3372. margin-top: -44.5px;
  3373. }
  3374. }
  3375. }
  3376.  
  3377. :has(#tabbrowser-tabs:not([expanded])) {
  3378. :has(.titlebar-buttonbox:hover, #urlbar:hover) {
  3379. #tabbrowser-tabpanels {
  3380. margin-top: -44.5px;
  3381. }
  3382. }
  3383. }
  3384. }
  3385. }
  3386. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!