API tools faq
paste
loctranp

userChrome.css

loctranp
Aug 13th, 2022
1,285
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 30.46 KB | None | 0 0
raw download clone embed print report
  1. * {
  2.   --color1: #131a1c;
  3.   --color2: #181f21;
  4.   --color3: #22292b;
  5.   --color4: #3b4244;
  6. }
  7.  
  8.  
  9. /* ----- Remove tab bar spacer ----- */
  10. .titlebar-spacer { display: none !important;}
  11.  
  12. /* ----- Avoids white flash ----- */
  13. #tabbrowser-tabpanels {background-color: var(--uc-light-bkgnd-color, var(--color1)) !important;}
  14.  
  15. /* ----- bookmarks items centering ----- */
  16. #PlacesToolbarItems {
  17.   display: flex !important;
  18.   justify-content: center !important;
  19. }
  20.  
  21. /* order of bars */
  22. #navigator-toolbox #nav-bar {
  23.   -moz-box-ordinal-group: 0 !important;
  24.   background-color: transparent !important;
  25. }
  26. #navigator-toolbox #toolbar-menubar {
  27.   -moz-box-ordinal-group: 1 !important;
  28. }
  29. #titlebar {
  30.   -moz-box-ordinal-group: 2 !important;
  31. }
  32. #PersonalToolbar {
  33.   -moz-box-ordinal-group: 3 !important;
  34. }
  35.  
  36. /* fullscreen nav errors */
  37. :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox {
  38.   -moz-appearance: none !important;
  39.   padding-top: 8px !important;
  40. }
  41.  
  42. /* fullscreen padding */
  43. :root[tabsintitlebar][sizemode="maximized"] #titlebar {
  44.  -moz-appearance: none !important;
  45.  
  46. }
  47.  
  48. #navigator-toolbox {
  49.   padding-top: 0px !important;
  50.   padding-bottom: 0px !important;
  51. }
  52.  
  53. /* height fixes */
  54.  
  55. /* tabs height */
  56. :root {--tab-min-height: 28px !important;}
  57. :root #tabbrowser-tabs {--tab-min-height: 28px !important; height: 45px !important;}
  58.  
  59. /* menu bar height */
  60. #toolbar-menubar {
  61.   margin-top: 0px !important;
  62.   margin-bottom: 0px !important;
  63.   padding-top: 0px !important;
  64.   padding-bottom: 0px !important;
  65.   line-height: 22px !important;
  66.   max-height: 22px !important;
  67. }
  68.  
  69. /* close/min/max fix */
  70. #toolbar-menubar .titlebar-button{ padding-block: 0px !important; }
  71.  
  72. /* non active tabs have darker text */
  73. .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) {
  74.   color: #ffffffa8 !important;
  75. }
  76.  
  77. /* icons */
  78. #PanelUI-menu-button {
  79.   list-style-image: url(image/firefox.svg) !important;
  80. }
  81.  
  82. #back-button > .toolbarbutton-icon {
  83.    border: none !important;
  84.   border-radius: 0 !important;
  85.   background: none !important;
  86.   width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  87.   height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  88.   padding: var(--toolbarbutton-inner-padding) !important;
  89.   border-radius: var(--toolbarbutton-border-radius) !important;
  90. }
  91.  
  92. #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  93.   box-shadow: none !important;
  94.   background-color: var(--toolbarbutton-hover-background) !important;
  95. }
  96.  
  97. #nav-bar #PanelUI-button .toolbarbutton-icon {
  98.     opacity:  0.8 !important;
  99. }
  100.  
  101. #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
  102.     background-color: var(--toolbarbutton-active-background) !important;   
  103. }
  104.  
  105. /* url bar */
  106. #urlbar-background {
  107.   display: none !important;
  108. }
  109.  
  110. #nav-bar:not([customizing="true"])
  111.   > #nav-bar-customization-target
  112.   > #urlbar-container:not(:hover)
  113.   > #urlbar:not([focused])
  114.   > #urlbar-input-container
  115.   > #page-action-buttons {
  116.   opacity: 0;
  117. }
  118. #page-action-buttons {
  119.   transition: opacity 0.15s ease;
  120. }
  121. #nav-bar:not([customizing="true"])
  122.   > #nav-bar-customization-target
  123.   > #urlbar-container:not(:hover)
  124.   > #urlbar:not([focused])
  125.   > #urlbar-input-container
  126.   > #identity-box {
  127.   opacity: 0;
  128. }
  129.  
  130. #nav-bar:not([customizing="true"])
  131.   > #nav-bar-customization-target
  132.   > #urlbar-container:not(:hover)
  133.   > #urlbar:not([focused])
  134.   > #urlbar-input-container
  135.   > #tracking-protection-icon-container {
  136.   opacity: 0;
  137. }
  138. #tracking-protection-icon-container {
  139.   transition: opacity 0.15s ease;
  140. }
  141.  
  142. /* url bar */
  143. #urlbar {
  144.   --autocomplete-popup-highlight-background: transparent !important;
  145. }
  146.  
  147. #urlbar-container {
  148.   border-radius: 10px 10px 10px 10px !important;
  149. }
  150. #urlbar-input-container,
  151. #searchbar {
  152.   border-radius: 10px 10px 10px 10px !important;
  153. }
  154.  
  155. .urlbarView-body-inner {
  156.   border-top: 0px !important;
  157. }
  158.  
  159. #urlbar-input-container {
  160.   padding-left: 7px;
  161.   padding-right: 7px;
  162. }
  163. #navigator-toolbox {
  164.   --lwt-toolbar-field-border-color: transparent !important;
  165.   --lwt-toolbar-field-focus: transparent !important;
  166.   --toolbar-field-focus-border-color: #77777773 !important;
  167. }
  168.  
  169. #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme,
  170. #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme:hover {
  171.   border-color: transparent;
  172. }
  173. #urlbar {
  174.   border: 0 !important;
  175.   border-radius: 10px 10px 10px 10px !important;
  176.   background-color: var(--color3);
  177. }
  178.  
  179. #urlbar {
  180.   box-shadow: none !important;
  181. }
  182. #urlbar[breakout] {
  183.   height: auto !important;
  184. }
  185.  
  186. #tracking-protection-icon-container {
  187.   border-inline-end: none !important;
  188.   border-image: none !important;
  189. }
  190.  
  191. /* megabar */
  192. #urlbar[breakout][breakout-extend][open] {
  193.   background-color: #22292b !important;
  194.  -webkit-backdrop-filter: blur(32px) !important;
  195.   backdrop-filter: blur(32px) !important;
  196. }
  197.  
  198. #urlbar[breakout][breakout-extend] > #urlbar-input-container,
  199. #urlbar-input-container {
  200.   height: var(--urlbar-height) !important;
  201.   padding-block: 0px !important;
  202.   padding-inline: 0px !important;
  203.   transition: none !important;
  204. }
  205. #urlbar[breakout][breakout-extend] {
  206.   top: calc(
  207.     (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  208.   ) !important;
  209.   left: 0 !important;
  210.   width: 100% !important;
  211. }
  212. #urlbar .urlbar-input-box {
  213.     text-align: center;
  214. }
  215. * {
  216.   --color1: #131a1c;
  217.   --color2: #181f21;
  218.   --color3: #22292b;
  219.   --color4: #3b4244;
  220. }
  221.  
  222.  
  223. /* ----- Remove tab bar spacer ----- */
  224. .titlebar-spacer { display: none !important;}
  225.  
  226. /* ----- Avoids white flash ----- */
  227. #tabbrowser-tabpanels {background-color: var(--uc-light-bkgnd-color, var(--color1)) !important;}
  228.  
  229. /* ----- bookmarks items centering ----- */
  230. #PlacesToolbarItems {
  231.   display: flex !important;
  232.   justify-content: center !important;
  233. }
  234.  
  235. /* order of bars */
  236. #navigator-toolbox #nav-bar {
  237.   -moz-box-ordinal-group: 0 !important;
  238.   background-color: transparent !important;
  239. }
  240. #navigator-toolbox #toolbar-menubar {
  241.   -moz-box-ordinal-group: 1 !important;
  242. }
  243. #titlebar {
  244.   -moz-box-ordinal-group: 2 !important;
  245. }
  246. #PersonalToolbar {
  247.   -moz-box-ordinal-group: 3 !important;
  248. }
  249.  
  250. /* fullscreen nav errors */
  251. :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox {
  252.   -moz-appearance: none !important;
  253.   padding-top: 8px !important;
  254. }
  255.  
  256. /* fullscreen padding */
  257. :root[tabsintitlebar][sizemode="maximized"] #titlebar {
  258.  -moz-appearance: none !important;
  259.  
  260. }
  261.  
  262. #navigator-toolbox {
  263.   padding-top: 0px !important;
  264.   padding-bottom: 0px !important;
  265. }
  266.  
  267. /* height fixes */
  268.  
  269. /* tabs height */
  270. :root {--tab-min-height: 28px !important;}
  271. :root #tabbrowser-tabs {--tab-min-height: 28px !important; height: 45px !important;}
  272.  
  273. /* menu bar height */
  274. #toolbar-menubar {
  275.   margin-top: 0px !important;
  276.   margin-bottom: 0px !important;
  277.   padding-top: 0px !important;
  278.   padding-bottom: 0px !important;
  279.   line-height: 22px !important;
  280.   max-height: 22px !important;
  281. }
  282.  
  283. /* close/min/max fix */
  284. #toolbar-menubar .titlebar-button{ padding-block: 0px !important; }
  285.  
  286. /* non active tabs have darker text */
  287. .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) {
  288.   color: #ffffffa8 !important;
  289. }
  290.  
  291. /* icons */
  292. #PanelUI-menu-button {
  293.   list-style-image: url(image/firefox.svg) !important;
  294. }
  295.  
  296. #back-button > .toolbarbutton-icon {
  297.    border: none !important;
  298.   border-radius: 0 !important;
  299.   background: none !important;
  300.   width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  301.   height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  302.   padding: var(--toolbarbutton-inner-padding) !important;
  303.   border-radius: var(--toolbarbutton-border-radius) !important;
  304. }
  305.  
  306. #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  307.   box-shadow: none !important;
  308.   background-color: var(--toolbarbutton-hover-background) !important;
  309. }
  310.  
  311. #nav-bar #PanelUI-button .toolbarbutton-icon {
  312.     opacity:  0.8 !important;
  313. }
  314.  
  315. #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
  316.     background-color: var(--toolbarbutton-active-background) !important;   
  317. }
  318.  
  319. /* url bar */
  320. #urlbar-background {
  321.   display: none !important;
  322. }
  323.  
  324. #nav-bar:not([customizing="true"])
  325.   > #nav-bar-customization-target
  326.   > #urlbar-container:not(:hover)
  327.   > #urlbar:not([focused])
  328.   > #urlbar-input-container
  329.   > #page-action-buttons {
  330.   opacity: 0;
  331. }
  332. #page-action-buttons {
  333.   transition: opacity 0.15s ease;
  334. }
  335. #nav-bar:not([customizing="true"])
  336.   > #nav-bar-customization-target
  337.   > #urlbar-container:not(:hover)
  338.   > #urlbar:not([focused])
  339.   > #urlbar-input-container
  340.   > #identity-box {
  341.   opacity: 0;
  342. }
  343.  
  344. #nav-bar:not([customizing="true"])
  345.   > #nav-bar-customization-target
  346.   > #urlbar-container:not(:hover)
  347.   > #urlbar:not([focused])
  348.   > #urlbar-input-container
  349.   > #tracking-protection-icon-container {
  350.   opacity: 0;
  351. }
  352. #tracking-protection-icon-container {
  353.   transition: opacity 0.15s ease;
  354. }
  355.  
  356. /* url bar */
  357. #urlbar {
  358.   --autocomplete-popup-highlight-background: transparent !important;
  359. }
  360.  
  361. #urlbar-container {
  362.   border-radius: 10px 10px 10px 10px !important;
  363. }
  364. #urlbar-input-container,
  365. #searchbar {
  366.   border-radius: 10px 10px 10px 10px !important;
  367. }
  368.  
  369. .urlbarView-body-inner {
  370.   border-top: 0px !important;
  371. }
  372.  
  373. #urlbar-input-container {
  374.   padding-left: 7px;
  375.   padding-right: 7px;
  376. }
  377. #navigator-toolbox {
  378.   --lwt-toolbar-field-border-color: transparent !important;
  379.   --lwt-toolbar-field-focus: transparent !important;
  380.   --toolbar-field-focus-border-color: #77777773 !important;
  381. }
  382.  
  383. #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme,
  384. #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme:hover {
  385.   border-color: transparent;
  386. }
  387. #urlbar {
  388.   border: 0 !important;
  389.   border-radius: 10px 10px 10px 10px !important;
  390.   background-color: var(--color3);
  391. }
  392.  
  393. #urlbar {
  394.   box-shadow: none !important;
  395. }
  396. #urlbar[breakout] {
  397.   height: auto !important;
  398. }
  399.  
  400. #tracking-protection-icon-container {
  401.   border-inline-end: none !important;
  402.   border-image: none !important;
  403. }
  404.  
  405. /* megabar */
  406. #urlbar[breakout][breakout-extend][open] {
  407.   background-color: #22292b !important;
  408.  -webkit-backdrop-filter: blur(32px) !important;
  409.   backdrop-filter: blur(32px) !important;
  410. }
  411.  
  412. #urlbar[breakout][breakout-extend] > #urlbar-input-container,
  413. #urlbar-input-container {
  414.   height: var(--urlbar-height) !important;
  415.   padding-block: 0px !important;
  416.   padding-inline: 0px !important;
  417.   transition: none !important;
  418. }
  419. #urlbar[breakout][breakout-extend] {
  420.   top: calc(
  421.     (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  422.   ) !important;
  423.   left: 0 !important;
  424.   width: 100% !important;
  425. }
  426. #urlbar .urlbar-input-box {
  427.     text-align: center;
  428. }
  429.  
  430. #wrapper-urlbar-container #urlbar{
  431.     height: var(--urlbar-height) !important;
  432. }
  433.  
  434. /* new tab icon 16 */
  435. #tabs-newtab-button .toolbarbutton-icon,
  436. #new-tab-button .toolbarbutton-icon {
  437.   width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
  438.   height: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
  439. }
  440.  
  441. /* plus/newtab button */
  442. toolbar
  443.   #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  444.   > .toolbarbutton-icon,
  445. toolbar
  446.   #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  447.   > .toolbarbutton-icon {
  448.   border: 0 !important;
  449.   border-radius: 20px 20px 20px 20px !important;
  450.   background-image: none !important;
  451.   background-color: #404040d9 !important;
  452. }
  453.  
  454. toolbar
  455.   #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  456.   > .toolbarbutton-icon,
  457. toolbar
  458.   #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  459.   > .toolbarbutton-icon {
  460.   border: 0 !important;
  461.   border-radius: 20px 20px 20px 20px !important;
  462.   background-image: none !important;
  463.   background-color: #181f21 !important;
  464. }
  465.  
  466. /* main bar */
  467. #navigator-toolbox {
  468.   background-color: #181f21 !important;
  469.   --tabs-border-color: none !important;
  470.   --my-tab-min-width: 100px !important;
  471.   --tabs-navbar-shadow-size: 0px !important;
  472. }
  473.  
  474. #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  475.     margin-inline-start: 2px !important;
  476. }
  477.  
  478. /* remove fill when loading on the tab which isnt formated for different border radius */
  479. #tabbrowser-tabs {
  480.   --tab-loading-fill: transparent !important;
  481.   margin-left: 2px !important;
  482. }
  483.  
  484. /* width of the tabs. */
  485. .tabbrowser-tab[fadein]:not([pinned]) {
  486.   min-width: var(--my-tab-min-width) !important;
  487. }
  488.  
  489. .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover)
  490.   .tab-icon-image {
  491.   opacity: 0.8 !important;
  492. }
  493.  
  494. /* fix the height of a tab because if you change --tab-min-height it doesnt work for fullcreen */
  495. #TabsToolbar {
  496.   padding-top: 0px !important;
  497.   padding-bottom: 2px !important;
  498. }
  499.  
  500. /* remove line between the tabs / seperators */
  501. #tabbrowser-tabs .tabbrowser-tab::before,
  502. #tabbrowser-tabs .tabbrowser-tab::after {
  503.   border: 0 !important;
  504. }
  505.  
  506. /* select tabs */
  507. .tabbrowser-tab .tab-background[selected="true"] {
  508.   border: 0px !important;
  509.   border-radius: 10px 10px 10px 10px !important;
  510.   background-image: none !important;
  511.   background-color: #232a2d !important;
  512. }
  513.  
  514. .tabbrowser-tab .tab-background:not([selected]) {
  515.   border: 0 !important;
  516.   border-radius: 10px 10px 10px 10px !important;
  517.   background-image: none !important;
  518.   background-color: var(--color2) !important;
  519. }
  520.  
  521. /* tabs on hover */
  522. #tabbrowser-tabs
  523.   .tabbrowser-tab:hover
  524.   > .tab-stack
  525.   > .tab-background:not([selected="true"]) {
  526.   border: 0 !important;
  527.   border-radius: 10px 10px 10px 10px !important;
  528.   background-image: none !important;
  529.   background-color: var(--color3) !important;
  530. }
  531.  
  532. /* multiselect tabs on hover */
  533. #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] {
  534.   border: 0 !important;
  535.   border-radius: 10px 10px 10px 10px !important;
  536.   background-image: none !important;
  537.   background-color: var(--color3) !important;
  538. }
  539. /* fixing multiselect */
  540. .tab-background[multiselected="true"]:not([selected="true"])
  541.   > .tab-background-inner {
  542.   background: none !important;
  543. }
  544.  
  545.  
  546. /* tab close button on hover */
  547. .tabbrowser-tab:not([pinned]) .tab-close-button {
  548.   display: -moz-box !important;
  549.   opacity: 0;
  550.   visibility: collapse !important;
  551.   transition: opacity 0.25s, visibility 0.25s ease-in !important;
  552. }
  553. .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  554.   opacity: 1;
  555.   visibility: visible !important;
  556.   border-radius: 20px 20px 20px 20px !important;
  557. }
  558.  
  559. #titlebar #TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-background {
  560.     margin-block: 2px !important;
  561. }
  562.  
  563. /* bookmark menu >:( */
  564. #PersonalToolbar {
  565.   --uc-bm-height: 24px;
  566.   --uc-bm-padding: 6px;
  567.   padding: 1px 6px !important;
  568.   position: absolute;
  569. }
  570.  
  571. #PlacesToolbarItems > .bookmark-item {
  572.   padding-block: var(--uc-bm-padding) !important;
  573.   padding-left: 6px !important;
  574.   padding-right: 6px !important;
  575. }
  576.  
  577. /* to use blur enable layout.css.backdrop-filter.enabled */
  578. #PersonalToolbar {
  579.   background-color: #181f21 !important;
  580.   -webkit-backdrop-filter: blur(32px) !important;
  581.   backdrop-filter: blur(32px) !important;
  582. }
  583.  
  584.  
  585. :root:-moz-lwtheme-brighttext {
  586.     --arrowpanel-background:  var(--color3) !important;
  587.     --panel-separator-zap-gradient: linear-gradient(90deg, rgba(11,11,11,1) 0%, rgba(193,118,40,1) 39%, rgba(52,12,48,1) 100%) !important;
  588.     --button-hover-bgcolor: #e06e6e !important;
  589.     --button-active-bgcolor: #131a1c !important;
  590.     --button-bgcolor: #181f21 !important;
  591.     --toolbarbutton-icon-fill-opacity: 0.8 !important;
  592. }
  593.  
  594. #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
  595.     background-color: var(--toolbarbutton-active-background) !important;
  596.    
  597. }
  598.  
  599. :root:-moz-lwtheme-brighttext menupopup  {
  600.     --dark-menu-background-color: #131a1c !important;
  601. }
  602.  
  603. /* move left close/min/max buttons */
  604.  
  605. .titlebar-buttonbox-container { -moz-box-ordinal-group: 0 !important;
  606. }
  607.  
  608. #nav-bar {
  609.     padding-left: 105px;
  610. }
  611.  
  612. #TabsToolbar .titlebar-buttonbox-container {
  613.     visibility: visible !important;
  614.     position: absolute !important;
  615.     top: 5px;
  616.     left: 0;
  617. }
  618. .titlebar-buttonbox-container {
  619.     display: block;
  620. }
  621.  
  622. #TabsToolbar .titlebar-buttonbox-container .titlebar-button{
  623.     border-radius: 4px !important;
  624. }
  625.  
  626. .titlebar-button > .toolbarbutton-icon {
  627.     height: 13x !important;
  628.     min-height: 13px !important;
  629.     width: 13px !important;
  630.     min-width: 13px !important;
  631. }
  632.  
  633. .titlebar-button {
  634.     padding-left: 8px !important;
  635.     padding-right: 8px !important;
  636.     margin-left: 4px !important;
  637. }
  638.  
  639. :root[sizemode="maximized"] .titlebar-buttonbox-container{
  640.     padding-top: 8px !important;
  641. }
  642.  
  643.  
  644. .titlebar-min {
  645.    -moz-box-ordinal-group:2 !important;
  646. }
  647.  
  648. .titlebar-max, .titlebar-restore {
  649.     -moz-box-ordinal-group:1 !important;
  650. }
  651.  
  652. .titlebar-close {
  653.    -moz-box-ordinal-group:0 !important;
  654. }
  655.  
  656. /*  Move left close/min/max buttons - COMMENT THIS ALL OF THE WAY DOWN TO GET RID OF MACOS ICONS */
  657. #nav-bar {padding-left: 90px;}
  658.  
  659. #TabsToolbar .titlebar-buttonbox-container, :root[inFullscreen="true"] #window-controls {
  660.     -moz-box-ordinal-group: 0 !important;
  661.     position: absolute !important;
  662.     top: 12px;
  663.     left: 0;
  664. }
  665.  
  666. :root[inFullscreen="true"] #window-controls {
  667.     display: -webkit-box;
  668. }
  669.  
  670. .titlebar-buttonbox-container {
  671.     display: block;
  672. }
  673.  
  674. :root[sizemode="maximized"] .titlebar-buttonbox-container{
  675.     padding-top: 8px !important;
  676. }
  677.  
  678. :root:-moz-window-inactive:not([customizing])
  679.     :is(.titlebar-buttonbox, #window-controls)
  680.     > toolbarbutton:not(:hover) {
  681.     opacity: 0.65 !important;
  682.     list-style-image: url(window/inactive.svg) !important;
  683. }
  684.  
  685. :is(.titlebar-buttonbox, #window-controls) .toolbarbutton-icon {
  686.     opacity: 1 !important;
  687.     appearance: none !important;
  688. }
  689.  
  690. .titlebar-button > .toolbarbutton-icon,
  691. #window-controls > toolbarbutton > .toolbarbutton-icon {
  692.     width: 14px !important;
  693.     min-width: 14px !important;
  694.     min-height: 14px !important;
  695.     height: 14px !important;
  696.     stroke: none !important;
  697. }
  698.  
  699. .titlebar-buttonbox, #window-controls {
  700.     margin-right: 6x !important;
  701.     margin-left: 0 !important;
  702. }
  703.  
  704. .titlebar-close,
  705. #close-button {
  706.     appearance: none !important;
  707.     padding: 0px !important;
  708.     padding-left: 8px !important;
  709.     padding-right: 8px !important;
  710.     margin: 0px !important;
  711.     background-color: transparent !important;
  712.     -moz-box-ordinal-group: 0 !important;
  713. }
  714.  
  715. .titlebar-min,
  716. #minimize-button {
  717.     appearance: none !important;
  718.     padding: 0px !important;
  719.     padding-left: 8px !important;
  720.     padding-right: 8px !important;
  721.     margin: 0px !important;
  722.     background-color: transparent !important;
  723.     -moz-box-ordinal-group:1 !important;
  724. }
  725.  
  726. .titlebar-max,
  727. .titlebar-restore,
  728. #restore-button {
  729.     appearance: none !important;
  730.     padding: 0px !important;
  731.     padding-left: 8px !important;
  732.     padding-right: 8px !important;
  733.     margin: 0px !important;
  734.     background-color: transparent !important;
  735.     -moz-box-ordinal-group: 2 !important;
  736. }
  737.  
  738. #TabsToolbar #window-controls > toolbarbutton,
  739. #TabsToolbar .titlebar-buttonbox .titlebar-button {
  740.     list-style-image: url(window/inactive.svg) !important;
  741. }
  742.  
  743. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-close,
  744. #TabsToolbar #window-controls:hover #close-button {
  745.     list-style-image: url(window/close.svg) !important;
  746.  
  747. }
  748.  
  749. #TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover,
  750. #TabsToolbar #window-controls #close-button:hover {
  751.     list-style-image: url(window/close-hover.svg) !important;
  752. }
  753.  
  754.  
  755. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-min,
  756. #TabsToolbar #window-controls:hover #minimize-button {
  757.     list-style-image: url(window/minimize.svg) !important; 
  758. }
  759.  
  760. #TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover,
  761. #TabsToolbar #window-controls #minimize-button:hover {
  762.     list-style-image: url(window/minimize-hover.svg) !important;
  763. }
  764.  
  765. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-max,
  766. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-restore,
  767. #TabsToolbar #window-controls:hover  #restore-button {
  768.     list-style-image: url(window/maximize.svg) !important;
  769. }
  770.  
  771. #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover {
  772.     list-style-image: url(window/maximize-hover.svg) !important;
  773. }
  774.  
  775. :root[sizemode="maximized"] #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover,
  776. #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover,
  777. #TabsToolbar #window-controls #restore-button:hover {
  778.     list-style-image: url(window/maximize-restore.svg) !important;
  779. }
  780.  
  781. #wrapper-urlbar-container #urlbar{
  782.     height: var(--urlbar-height) !important;
  783. }
  784.  
  785. /* new tab icon 16 */
  786. #tabs-newtab-button .toolbarbutton-icon,
  787. #new-tab-button .toolbarbutton-icon {
  788.   width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
  789.   height: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
  790. }
  791.  
  792. /* plus/newtab button */
  793. toolbar
  794.   #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  795.   > .toolbarbutton-icon,
  796. toolbar
  797.   #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  798.   > .toolbarbutton-icon {
  799.   border: 0 !important;
  800.   border-radius: 20px 20px 20px 20px !important;
  801.   background-image: none !important;
  802.   background-color: #404040d9 !important;
  803. }
  804.  
  805. toolbar
  806.   #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  807.   > .toolbarbutton-icon,
  808. toolbar
  809.   #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  810.   > .toolbarbutton-icon {
  811.   border: 0 !important;
  812.   border-radius: 20px 20px 20px 20px !important;
  813.   background-image: none !important;
  814.   background-color: #181f21 !important;
  815. }
  816.  
  817. /* main bar */
  818. #navigator-toolbox {
  819.   background-color: #181f21 !important;
  820.   --tabs-border-color: none !important;
  821.   --my-tab-min-width: 100px !important;
  822.   --tabs-navbar-shadow-size: 0px !important;
  823. }
  824.  
  825. #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  826.     margin-inline-start: 2px !important;
  827. }
  828.  
  829. /* remove fill when loading on the tab which isnt formated for different border radius */
  830. #tabbrowser-tabs {
  831.   --tab-loading-fill: transparent !important;
  832.   margin-left: 2px !important;
  833. }
  834.  
  835. /* width of the tabs. */
  836. .tabbrowser-tab[fadein]:not([pinned]) {
  837.   min-width: var(--my-tab-min-width) !important;
  838. }
  839.  
  840. .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover)
  841.   .tab-icon-image {
  842.   opacity: 0.8 !important;
  843. }
  844.  
  845. /* fix the height of a tab because if you change --tab-min-height it doesnt work for fullcreen */
  846. #TabsToolbar {
  847.   padding-top: 0px !important;
  848.   padding-bottom: 2px !important;
  849. }
  850.  
  851. /* remove line between the tabs / seperators */
  852. #tabbrowser-tabs .tabbrowser-tab::before,
  853. #tabbrowser-tabs .tabbrowser-tab::after {
  854.   border: 0 !important;
  855. }
  856.  
  857. /* select tabs */
  858. .tabbrowser-tab .tab-background[selected="true"] {
  859.   border: 0px !important;
  860.   border-radius: 10px 10px 10px 10px !important;
  861.   background-image: none !important;
  862.   background-color: #232a2d !important;
  863. }
  864.  
  865. .tabbrowser-tab .tab-background:not([selected]) {
  866.   border: 0 !important;
  867.   border-radius: 10px 10px 10px 10px !important;
  868.   background-image: none !important;
  869.   background-color: var(--color2) !important;
  870. }
  871.  
  872. /* tabs on hover */
  873. #tabbrowser-tabs
  874.   .tabbrowser-tab:hover
  875.   > .tab-stack
  876.   > .tab-background:not([selected="true"]) {
  877.   border: 0 !important;
  878.   border-radius: 10px 10px 10px 10px !important;
  879.   background-image: none !important;
  880.   background-color: var(--color3) !important;
  881. }
  882.  
  883. /* multiselect tabs on hover */
  884. #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] {
  885.   border: 0 !important;
  886.   border-radius: 10px 10px 10px 10px !important;
  887.   background-image: none !important;
  888.   background-color: var(--color3) !important;
  889. }
  890. /* fixing multiselect */
  891. .tab-background[multiselected="true"]:not([selected="true"])
  892.   > .tab-background-inner {
  893.   background: none !important;
  894. }
  895.  
  896.  
  897. /* tab close button on hover */
  898. .tabbrowser-tab:not([pinned]) .tab-close-button {
  899.   display: -moz-box !important;
  900.   opacity: 0;
  901.   visibility: collapse !important;
  902.   transition: opacity 0.25s, visibility 0.25s ease-in !important;
  903. }
  904. .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  905.   opacity: 1;
  906.   visibility: visible !important;
  907.   border-radius: 20px 20px 20px 20px !important;
  908. }
  909.  
  910. #titlebar #TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-background {
  911.     margin-block: 2px !important;
  912. }
  913.  
  914. /* bookmark menu >:( */
  915. #PersonalToolbar {
  916.   --uc-bm-height: 24px;
  917.   --uc-bm-padding: 6px;
  918.   padding: 1px 6px !important;
  919.   position: absolute;
  920. }
  921.  
  922. #PlacesToolbarItems > .bookmark-item {
  923.   padding-block: var(--uc-bm-padding) !important;
  924.   padding-left: 6px !important;
  925.   padding-right: 6px !important;
  926. }
  927.  
  928. /* to use blur enable layout.css.backdrop-filter.enabled */
  929. #PersonalToolbar {
  930.   background-color: #181f21 !important;
  931.   -webkit-backdrop-filter: blur(32px) !important;
  932.   backdrop-filter: blur(32px) !important;
  933. }
  934.  
  935.  
  936. :root:-moz-lwtheme-brighttext {
  937.     --arrowpanel-background:  var(--color3) !important;
  938.     --panel-separator-zap-gradient: linear-gradient(90deg, rgba(11,11,11,1) 0%, rgba(193,118,40,1) 39%, rgba(52,12,48,1) 100%) !important;
  939.     --button-hover-bgcolor: #e06e6e !important;
  940.     --button-active-bgcolor: #131a1c !important;
  941.     --button-bgcolor: #181f21 !important;
  942.     --toolbarbutton-icon-fill-opacity: 0.8 !important;
  943. }
  944.  
  945. #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
  946.     background-color: var(--toolbarbutton-active-background) !important;
  947.    
  948. }
  949.  
  950. :root:-moz-lwtheme-brighttext menupopup  {
  951.     --dark-menu-background-color: #131a1c !important;
  952. }
  953.  
  954. /* move left close/min/max buttons */
  955.  
  956. .titlebar-buttonbox-container { -moz-box-ordinal-group: 0 !important;
  957. }
  958.  
  959. #nav-bar {
  960.     padding-left: 105px;
  961. }
  962.  
  963. #TabsToolbar .titlebar-buttonbox-container {
  964.     visibility: visible !important;
  965.     position: absolute !important;
  966.     top: 5px;
  967.     left: 0;
  968. }
  969. .titlebar-buttonbox-container {
  970.     display: block;
  971. }
  972.  
  973. #TabsToolbar .titlebar-buttonbox-container .titlebar-button{
  974.     border-radius: 4px !important;
  975. }
  976.  
  977. .titlebar-button > .toolbarbutton-icon {
  978.     height: 13x !important;
  979.     min-height: 13px !important;
  980.     width: 13px !important;
  981.     min-width: 13px !important;
  982. }
  983.  
  984. .titlebar-button {
  985.     padding-left: 8px !important;
  986.     padding-right: 8px !important;
  987.     margin-left: 4px !important;
  988. }
  989.  
  990. :root[sizemode="maximized"] .titlebar-buttonbox-container{
  991.     padding-top: 8px !important;
  992. }
  993.  
  994.  
  995. .titlebar-min {
  996.    -moz-box-ordinal-group:2 !important;
  997. }
  998.  
  999. .titlebar-max, .titlebar-restore {
  1000.     -moz-box-ordinal-group:1 !important;
  1001. }
  1002.  
  1003. .titlebar-close {
  1004.    -moz-box-ordinal-group:0 !important;
  1005. }
  1006.  
  1007. /*  Move left close/min/max buttons - COMMENT THIS ALL OF THE WAY DOWN TO GET RID OF MACOS ICONS */
  1008. #nav-bar {padding-left: 90px;}
  1009.  
  1010. #TabsToolbar .titlebar-buttonbox-container, :root[inFullscreen="true"] #window-controls {
  1011.     -moz-box-ordinal-group: 0 !important;
  1012.     position: absolute !important;
  1013.     top: 12px;
  1014.     left: 0;
  1015. }
  1016.  
  1017. :root[inFullscreen="true"] #window-controls {
  1018.     display: -webkit-box;
  1019. }
  1020.  
  1021. .titlebar-buttonbox-container {
  1022.     display: block;
  1023. }
  1024.  
  1025. :root[sizemode="maximized"] .titlebar-buttonbox-container{
  1026.     padding-top: 8px !important;
  1027. }
  1028.  
  1029. :root:-moz-window-inactive:not([customizing])
  1030.     :is(.titlebar-buttonbox, #window-controls)
  1031.     > toolbarbutton:not(:hover) {
  1032.     opacity: 0.65 !important;
  1033.     list-style-image: url(window/inactive.svg) !important;
  1034. }
  1035.  
  1036. :is(.titlebar-buttonbox, #window-controls) .toolbarbutton-icon {
  1037.     opacity: 1 !important;
  1038.     appearance: none !important;
  1039. }
  1040.  
  1041. .titlebar-button > .toolbarbutton-icon,
  1042. #window-controls > toolbarbutton > .toolbarbutton-icon {
  1043.     width: 14px !important;
  1044.     min-width: 14px !important;
  1045.     min-height: 14px !important;
  1046.     height: 14px !important;
  1047.     stroke: none !important;
  1048. }
  1049.  
  1050. .titlebar-buttonbox, #window-controls {
  1051.     margin-right: 6x !important;
  1052.     margin-left: 0 !important;
  1053. }
  1054.  
  1055. .titlebar-close,
  1056. #close-button {
  1057.     appearance: none !important;
  1058.     padding: 0px !important;
  1059.     padding-left: 8px !important;
  1060.     padding-right: 8px !important;
  1061.     margin: 0px !important;
  1062.     background-color: transparent !important;
  1063.     -moz-box-ordinal-group: 0 !important;
  1064. }
  1065.  
  1066. .titlebar-min,
  1067. #minimize-button {
  1068.     appearance: none !important;
  1069.     padding: 0px !important;
  1070.     padding-left: 8px !important;
  1071.     padding-right: 8px !important;
  1072.     margin: 0px !important;
  1073.     background-color: transparent !important;
  1074.     -moz-box-ordinal-group:1 !important;
  1075. }
  1076.  
  1077. .titlebar-max,
  1078. .titlebar-restore,
  1079. #restore-button {
  1080.     appearance: none !important;
  1081.     padding: 0px !important;
  1082.     padding-left: 8px !important;
  1083.     padding-right: 8px !important;
  1084.     margin: 0px !important;
  1085.     background-color: transparent !important;
  1086.     -moz-box-ordinal-group: 2 !important;
  1087. }
  1088.  
  1089. #TabsToolbar #window-controls > toolbarbutton,
  1090. #TabsToolbar .titlebar-buttonbox .titlebar-button {
  1091.     list-style-image: url(window/inactive.svg) !important;
  1092. }
  1093.  
  1094. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-close,
  1095. #TabsToolbar #window-controls:hover #close-button {
  1096.     list-style-image: url(window/close.svg) !important;
  1097.  
  1098. }
  1099.  
  1100. #TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover,
  1101. #TabsToolbar #window-controls #close-button:hover {
  1102.     list-style-image: url(window/close-hover.svg) !important;
  1103. }
  1104.  
  1105.  
  1106. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-min,
  1107. #TabsToolbar #window-controls:hover #minimize-button {
  1108.     list-style-image: url(window/minimize.svg) !important; 
  1109. }
  1110.  
  1111. #TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover,
  1112. #TabsToolbar #window-controls #minimize-button:hover {
  1113.     list-style-image: url(window/minimize-hover.svg) !important;
  1114. }
  1115.  
  1116. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-max,
  1117. #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-restore,
  1118. #TabsToolbar #window-controls:hover  #restore-button {
  1119.     list-style-image: url(window/maximize.svg) !important;
  1120. }
  1121.  
  1122. #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover {
  1123.     list-style-image: url(window/maximize-hover.svg) !important;
  1124. }
  1125.  
  1126. :root[sizemode="maximized"] #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover,
  1127. #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover,
  1128. #TabsToolbar #window-controls #restore-button:hover {
  1129.     list-style-image: url(window/maximize-restore.svg) !important;
  1130. }
  1131.  
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!