API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 30th, 2024
42
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 27.77 KB | None | 0 0
raw download clone embed print report
  1. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/fake_statusbar_w_bookmarksbar.css made available under Mozilla Public License v. 2.0
  2. See the above repository for updates as well as full license text. */
  3.  
  4. /* Creates a statusbar at the bottom of the window by using bookmarks toolbar */
  5.  
  6. /* Since it's really the bookmarks toolbar you should move bookmarks away from bookmarks toolbar - for example to menubar. You can do that with Customize Firefox mode */
  7.  
  8. /* If you want to show the page-loading status in the statusbar then put a single flexible space as the leftmost item in the bookmarks toolbar */
  9. /* By default this flex-space will take 50% window width to show the loading status bar */
  10.  
  11. /* Toolbar buttons/items will be aligned to the right edge of the loading bar. If you wish to align them to the right edge, then add another flex-space after the first one */
  12.  
  13. :root:not([inFullscreen]) > body{
  14.   --uc-statusbar-button-padding: 2px;
  15.   --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 16px + 4px);
  16.   --uc-statusbar-text-vertical-position: 1px;
  17. }
  18.  
  19. #PersonalToolbar .toolbarbutton-1{
  20.   --toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important;
  21. }
  22.  
  23. :root[uidensity="compact"]:not([inFullscreen]) > body{
  24.   --uc-statusbar-text-vertical-position: 1px;
  25. }
  26.  
  27. :root:not([inFullscreen]) > body::after{
  28.   content: "";
  29.   display: flex;
  30.   margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
  31. }
  32.  
  33. #PersonalToolbar{
  34.   position: fixed;
  35.   display: flex;
  36.   bottom: 0;
  37.   width: 100vw;
  38.   border-top: 1px solid var(--chrome-content-separator-color);
  39. }
  40.  
  41. #PersonalToolbar > toolbarspring:nth-child(5),
  42. #PersonalToolbar > :first-child + toolbarspring{
  43.   background-position: left var(--uc-statusbar-text-vertical-position) !important;
  44.   background-repeat: no-repeat;
  45.   background-image: -moz-element(#statuspanel);
  46.   max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
  47.   min-width: 60ch;
  48.   flex-grow: 10 !important;
  49. }
  50.  
  51. #personal-toolbar-empty{ visibility: hidden; }
  52. #PersonalToolbar .toolbarbutton-1{
  53.   align-items: center !important;
  54. }
  55.  
  56. #PersonalToolbar > toolbarspring{
  57.   flex-grow: 1;
  58.   max-width: none !important;
  59.   min-height: var(--uc-browser-base-padding) !important;
  60. }
  61.  
  62. /* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
  63. #PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
  64.  
  65. #statuspanel{
  66.   padding-top: 0 !important;
  67.   text-shadow: none !important;
  68. }
  69. #statuspanel-label{
  70.   height:3em;
  71.   min-width: 1000px;
  72.   background-color: transparent !important;
  73.   border: none !important;
  74.   font-size: 9;
  75.   color: inherit !important;
  76.   margin-inline: 0px !important;
  77.   padding-inline: 0px !important;
  78. }
  79. /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
  80. #statuspanel-inner{ background-color: var(--toolbar-accent-color) }
  81. /*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
  82.  
  83. #statuspanel[inactive] #statuspanel-label{ visibility: hidden }
  84.  
  85. .browserStack > #statuspanel[inactive]::before,
  86. #statuspanel[inactive] > #statuspanel-inner::before{
  87.   content: "Done";
  88.   display: flex;
  89.   margin-top: 2px;
  90.   color: var(--toolbar-field-color, black) !important;
  91. }
  92.  
  93. #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }
  94.  
  95. /* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */
  96. .browserContainer,
  97. .browserSidebarContainer{
  98.   background-color: inherit;
  99. }
  100.  
  101.  
  102.  
  103. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_proton.css made available under Mozilla Public License v. 2.0
  104. See the above repository for updates as well as full license text. */
  105.  
  106. /* Small changes to make proton roughly as compact as the old compact mode */
  107.  
  108. :root{
  109.   --toolbarbutton-inner-padding: 6px !important;
  110.   --tab-block-margin: 2px !important;
  111.   --tabs-shadow-size: 0px !important;
  112.   --arrowpanel-menuitem-padding-block: 5px !important;
  113.   --panel-font-size: inherit !important;
  114.   --arrowpanel-padding: 0.8em !important;
  115.   --inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */
  116. }
  117. .subviewbutton.bookmark-item{ padding-block: 4px !important; }
  118. .subview-subheader{ display: block }
  119. menupopup > menuitem,
  120. menupopup > menu{ padding-block: 0.3em !important; }
  121.  
  122. /* This is kinda weird, but it makes the horizontal line between tabs and nav-bar render "inside" nav-bar thus tabs are more visibily separated even if there is less space there */
  123. #nav-bar{
  124.   box-shadow: inset 0 var(--tabs-shadow-size) 0 var(--lwt-tabs-border-color) !important;
  125. }
  126.  
  127. .tab-close-button{
  128.   margin-inline-start: 0px !important;
  129.   width: 15px !important;
  130.   height: 15px !important;
  131.   padding: 3px !important;
  132. }
  133.  
  134. #tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
  135. #scrollbutton-up,
  136. #scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
  137.  
  138. /* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */
  139. /*
  140. .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: flex !important; margin-bottom: 1px }
  141. #TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; }
  142. #TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; }
  143. */
  144.  
  145.  
  146.  
  147. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
  148. See the above repository for updates as well as full license text. */
  149.  
  150. /* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions.
  151.  * You should set layout.css.color-mix.enabled to true in about:config to make colors apply properly.
  152.  * It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
  153.  
  154. :root[id]{
  155.   --tab-block-margin: 0px !important;
  156.   --tabs-shadow-size: 0px !important;
  157. }
  158.  
  159. #scrollbutton-up,
  160. #scrollbutton-down{
  161.   border-radius: 0 !important;
  162.   border-width: 0 !important;
  163.   padding-inline: 0px !important;
  164.   margin-bottom: var(--uc-compat-scrollbutton-margin,0px) !important; /* set in hide_tabs_scrollbuttons.css */
  165. }
  166.  
  167. /* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
  168. #tabbrowser-tabs[overflow]{
  169.   --uc-scrollbox-base-margin: -22px !important;
  170. }
  171.  
  172. /* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
  173. .tabbrowser-tab[selected]{
  174.   position: relative;
  175.   z-index: 1;
  176. }
  177.  
  178. /* tab shaping */
  179. .tabbrowser-tab{ padding-inline: 1px !important; padding-below: none !important; }
  180.  
  181. :root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{
  182.   min-height: calc(var(--tab-min-height) + 1px) !important;
  183. }
  184.  
  185. .tab-content[pinned]{ padding-inline: 2px !important; }
  186.  
  187. .tab-background{
  188.   border-radius: 0px !important;
  189.   box-shadow: 1 !important;
  190.   border-top: 0px !important;
  191.   outline: none !important;
  192. }
  193.  
  194. .tab-background:not([selected])[multiselected]{
  195.   background: color-mix(in srgb, currentColor 11%, transparent) !important;
  196.   margin-inline-start: -1px;
  197. }
  198.  
  199. /* Disable animation for selected and pinned tabs */
  200. .tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
  201.  
  202. /* moves context-line to the bottom */
  203. .tab-context-line{
  204.   -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
  205.   order: 2;
  206.   margin-inline: 1px !important;
  207. }
  208.  
  209.  
  210.  
  211. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
  212. See the above repository for updates as well as full license text. */
  213.  
  214. /* IMPORTANT
  215. Get window_control_placeholder_support.css
  216. Window controls will be all wrong without it.
  217. Additionally on Linux, you may need to get:
  218. linux_gtk_window_control_patch.css
  219.  
  220. Use tabs_on_bottom_menubar_on_top_patch.css if you
  221. have menubar permanently enabled and want it on top
  222. */
  223.  
  224. #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
  225. #TabsToolbar > .titlebar-buttonbox-container{
  226.   position: fixed;
  227.   display: block;
  228.   top: 0px;
  229.   right:0;
  230.   height: 10px;
  231. }
  232. @media (-moz-gtk-csd-reversed-placement),
  233.        (-moz-platform: macos){
  234.   .titlebar-buttonbox-container{ left:0; right: unset !important; }
  235. }
  236. @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
  237.   .titlebar-buttonbox-container( left:0; right: unset !important; )
  238. }
  239.  
  240.  
  241. :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
  242.  
  243. #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
  244.  
  245. .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
  246.  
  247. #titlebar{
  248.   -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
  249.   order: 2;
  250.   -moz-appearance: none !important;
  251.   --tabs-navbar-shadow-size: 0px;
  252.   --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
  253. }
  254. /* Re-order window and tab notification boxes */
  255. #navigator-toolbox > div{ display: contents }
  256. .global-notificationbox,
  257. #tab-notification-deck{
  258.   -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
  259.   order: 2;
  260. }
  261.  
  262. #TabsToolbar .titlebar-spacer{ display: none; }
  263. /* Also hide the toolbox bottom border which isn't at bottom with this setup */
  264. #navigator-toolbox::after{ display: none !important; }
  265.  
  266. @media (-moz-gtk-csd-close-button){
  267.   .titlebar-button{
  268.     -moz-box-orient: vertical; /* Fx <112 compatibility */
  269.     flex-direction: column;
  270.   }
  271. }
  272.  
  273. /* At Activated Menubar */
  274. :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
  275.   display: block !important;
  276. }
  277. #toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
  278.   visibility: hidden;
  279. }
  280.  
  281. /* These exist only for compatibility with autohide-tabstoolbar.css */
  282. toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
  283. #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
  284. #TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
  285. #navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }
  286.  
  287.  
  288.  
  289.  
  290. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
  291. See the above repository for updates as well as full license text. */
  292.  
  293. /* Menubar on top patch - use with tabs_on_bottom.css */
  294. /* Only really useful if menubar is ALWAYS visible */
  295.  
  296. :root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
  297.  
  298. :root{
  299.    /* height if native titlebar is enabled, assumes empty menubar */
  300.   --uc-menubar-height: 20px;
  301. }
  302. :root[tabsintitlebar]{
  303.   /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  304.   --uc-menubar-height: 29px;
  305. }
  306. :root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
  307.   --uc-menubar-height: 0px;
  308. }
  309. /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
  310. :root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }
  311.  
  312. #navigator-toolbox{
  313.   -moz-window-dragging: drag;
  314.   padding-top: var(--uc-menubar-height) !important;
  315. }
  316.  
  317. /* Remove window dragging from notification boxes */
  318. #tab-notification-deck,
  319. .global-notificationbox{
  320.   -moz-window-dragging: no-drag;
  321. }
  322.  
  323. :root:not([chromehidden~="menubar"]) #toolbar-menubar{
  324.   position: fixed;
  325.   display: flex;
  326.   top: 0px;
  327.   height: var(--uc-menubar-height);
  328.   width: 100%;
  329.   overflow: hidden;
  330. }
  331.  
  332. #toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
  333.  
  334. #toolbar-menubar > [flex]{ flex-grow: 100; }
  335. #toolbar-menubar > spacer[flex]{
  336.   order: 99;
  337.   flex-grow: 1;
  338.   min-width: var(--uc-window-drag-space-post,20px);
  339. }
  340.  
  341. #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
  342.  
  343. :root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
  344.   visibility: visible;
  345. }
  346. :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
  347.   display: none !important;
  348. }
  349.  
  350.  
  351.  
  352.  
  353. toolbarspring {
  354.     min-width: 10px !important;
  355.     max-width: 20px !important;
  356. }
  357.  
  358.  
  359.  
  360.  
  361.  
  362. /* show close button on hover */
  363. #tabbrowser-tabs[closebuttons="activetab"]
  364.   .tabbrowser-tab:not([selected]):not([pinned]):hover
  365.   .tab-close-button {
  366.   display: -moz-inline-box !important;
  367. }
  368.  
  369. /* make the close button more clearly visible on hover */
  370. .tab-close-button:hover {
  371.     background-image: linear-gradient(to top,rgba(176,0,33,1),rgba(222,85,88,1)) !important;
  372.     fill: white !important;
  373.         border-width: 2px;
  374.         border-color: rgba(176,0,33,1);
  375. }
  376.  
  377.  
  378. #tabbrowser-tabs {
  379. --uc-tabs-scrollbutton-border: 1px !important;
  380. }
  381. #scrollbutton-up, #scrollbutton-down {
  382. border-block-width: var(--uc-tabs-scrollbutton-border, 0px) !important;
  383. }
  384.  
  385.  
  386.  
  387.  
  388. /* Show active colors on main menu bar */
  389. #main-menubar{
  390.     background: rgba(94,108,117,1) !important;
  391.     color: AccentColorText;
  392.     fill: AccentColorText !important;
  393. }
  394.  
  395. #main-menubar:-moz-window-inactive {
  396.     background: rgba(192,195,197,1) !important;
  397. }
  398.  
  399. #toolbar-menubar {
  400.    background-color: rgba(94,108,117,1) !important;
  401. }
  402.  
  403. #toolbar-menubar:-moz-window-inactive {
  404.    background-color: rgba(192,195,197,1) !important;
  405. }
  406.  
  407. #main-menubar > menu[_moz-menuactive="true"] {
  408.     background-color: rgba(196,229,246,1) !important;
  409.     border-width: 2px;
  410.     border-color: rgba(44,98,139,1) !important;
  411. }
  412.  
  413. #nav-bar {
  414.     background: rgba(94, 108, 117, 1) !important;
  415.     color: AccentColorText;
  416.     fill: AccentColorText !important;
  417. }
  418.  
  419. #nav-bar:-moz-window-inactive {
  420.     background: rgba(192,195,197,1) !important;
  421. }
  422.  
  423.  
  424. /* My url bar fixes */
  425. #urlbar {
  426.     font-size: 10pt !important;
  427. }
  428.  
  429. #page-action-buttons {
  430.     max-height: 15px;
  431.     margin-top: 3px;
  432. }
  433.  
  434. #urlbar[pageproxystate="invalid"]  #identity-box image {
  435.     max-height: 15px;
  436. }
  437.  
  438.  
  439.  
  440. /* ---Tabs/Tab Bar height--- */
  441. #root {
  442.  --tab-min-height: 21px !important; /* adjust to suit your needs */
  443. }
  444.  
  445. #root #tabbrowser-tabs {
  446.  --tab-min-height: 21px !important; /* needs to be the same as above under :root */
  447. }
  448.  
  449. tabbrowser-tab:first-child {
  450.     padding-top: 0px !important;
  451.     padding-bottom: 0px !important;
  452. }
  453.  
  454.  
  455.  
  456.  
  457. #back-button {
  458. list-style-image: url("bf_ff3_strata_b.png") !important;
  459. }
  460.  
  461. #forward-button {
  462. list-style-image: url("bf_ff3_strata_f.png") !important;
  463. }
  464.  
  465. /* Firefox userChrome.css tweaks ********************************************************/
  466. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  467. /****************************************************************************************/
  468.  
  469.  
  470. /* override custom button shapes */
  471. #main-window:not([customizing]) #nav-bar :is(#back-button, #forward-button)[disabled=true]:is([open],[checked],:hover:active,:active) > .toolbarbutton-icon,
  472. #main-window:not([customizing]) #nav-bar :is(#back-button, #forward-button)[disabled=true]:is([open],[checked],:hover:active,:active) > .toolbarbutton-text,
  473. #main-window:not([customizing]) #nav-bar :is(#back-button, #forward-button)[disabled=true]:is([open],[checked],:hover:active,:active) > .toolbarbutton-badge-stack,
  474. #nav-bar :is(#back-button, #forward-button)[type="menu-button"] .toolbarbutton-icon,
  475. #nav-bar :is(#back-button, #forward-button) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
  476. #nav-bar :is(#back-button, #forward-button)[open] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
  477. #nav-bar :is(#back-button, #forward-button)[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
  478. #nav-bar :is(#back-button, #forward-button):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
  479. #nav-bar :is(#back-button, #forward-button):not([checked]):not([open]):not(:active) > .toolbarbutton-text,
  480. #nav-bar :is(#back-button, #forward-button):not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack,
  481. #nav-bar :is(#back-button, #forward-button):not([buttonover]):not([open]):not(:active) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
  482. #nav-bar :is(#back-button, #forward-button):not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
  483. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
  484. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
  485. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
  486. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
  487. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
  488. #nav-bar :is(#back-button, #forward-button):not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
  489. #nav-bar :is(#back-button, #forward-button)[type="menu"][open]:not([disabled]) .toolbarbutton-icon,
  490. #nav-bar :is(#back-button, #forward-button)[type="menu-button"]:not([open]):hover:not([disabled]):active .toolbarbutton-icon,
  491. #nav-bar :is(#back-button, #forward-button) > .toolbarbutton-menubutton-button:not([disabled=true]):is(:hover:active,:active, [open]) > .toolbarbutton-icon,
  492. #nav-bar :is(#back-button, #forward-button)[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
  493. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):is([open],[checked],:hover:active,:active) > .toolbarbutton-icon,
  494. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):is([open],[checked],:hover:active,:active) > .toolbarbutton-text,
  495. #nav-bar :is(#back-button, #forward-button):not([disabled=true]):is([open],[checked],:hover:active,:active) > .toolbarbutton-badge-stack  {
  496.   background: unset !important;
  497.   border-color: unset !important;
  498.   box-shadow: unset !important;
  499.   transition: unset !important;
  500.   fill: unset !important;
  501. }
  502.  
  503. /* custom large back-forward buttons */
  504. #main-window #navigator-toolbox #nav-bar :is(#back-button, #forward-button) .toolbarbutton-icon,
  505. #main-window:not([uidensity=compact]):not([uidensity=touch])  #navigator-toolbox #nav-bar :is(#back-button, #forward-button) .toolbarbutton-icon,
  506. #main-window[uidensity=compact]  #navigator-toolbox #nav-bar :is(#back-button, #forward-button) .toolbarbutton-icon,
  507. #main-window[uidensity=touch]  #navigator-toolbox #nav-bar :is(#back-button, #forward-button) .toolbarbutton-icon {
  508.   padding: 0 !important;
  509.   margin: 0 !important;
  510.   background: unset !important;
  511.   box-shadow: unset !important;
  512.   border: unset !important;
  513.   border-radius: unset !important;
  514. }
  515.  
  516. #main-window:not([uidensity=compact]):not([uidensity=touch]) #navigator-toolbox #nav-bar #back-button .toolbarbutton-icon,
  517. #main-window[uidensity=compact] #navigator-toolbox #nav-bar #back-button .toolbarbutton-icon,
  518. #main-window[uidensity=touch] #navigator-toolbox #nav-bar #back-button .toolbarbutton-icon,
  519. #main-window #navigator-toolbox #nav-bar #back-button .toolbarbutton-icon {
  520.   width: 36px !important;
  521.   height: 32px !important;
  522. }
  523.  
  524. #main-window:not([uidensity=compact]):not([uidensity=touch]) #navigator-toolbox #nav-bar #forward-button .toolbarbutton-icon,
  525. #main-window[uidensity=compact] #navigator-toolbox #nav-bar #forward-button .toolbarbutton-icon,
  526. #main-window[uidensity=touch] #navigator-toolbox #nav-bar #forward-button .toolbarbutton-icon,
  527. #main-window #navigator-toolbox #nav-bar #forward-button .toolbarbutton-icon {
  528.   width: 30px !important;
  529.   height: 32px !important;
  530. }
  531.  
  532. #main-window[uidensity=compact] #nav-bar #nav-bar-customization-target > :is(#back-button, #forward-button) {
  533.   margin: unset !important;
  534.   padding: unset !important;
  535. }
  536.  
  537. #main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #nav-bar-customization-target > #forward-button,
  538. #main-window[uidensity=touch] #nav-bar #nav-bar-customization-target > #forward-button {
  539.   margin-inline-start: -2px !important;
  540. }
  541.  
  542. #main-window #navigator-toolbox #nav-bar :is(#back-button, #forward-button):not([disabled]):hover .toolbarbutton-icon {
  543.   filter: brightness(1.3) !important;
  544. }
  545. #main-window #navigator-toolbox #nav-bar :is(#back-button, #forward-button):not([disabled]):is(:active,:hover:active,[open]) .toolbarbutton-icon {
  546.   filter: brightness(0.9) contrast(175%) !important;
  547. }
  548. #main-window #navigator-toolbox #nav-bar :is(#back-button, #forward-button)[disabled] .toolbarbutton-icon {
  549.   opacity: 1.0 !important;
  550.   filter: grayscale(75%) !important;
  551. }
  552. #main-window #navigator-toolbox #nav-bar :is(#back-button, #forward-button)[disabled] {
  553.   opacity: 1.0 !important;
  554. }
  555.  
  556. #main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #nav-bar-customization-target > #forward-button,
  557. #main-window[uidensity=touch] #nav-bar #nav-bar-customization-target > #forward-button {
  558.   margin-inline-start: -4px !important;
  559. }
  560.  
  561.  
  562.  
  563.  
  564. /* Firefox userChrome.css tweaks ********************************************************/
  565. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  566. /****************************************************************************************/
  567.  
  568.  
  569. @media (prefers-reduced-motion: reduce) {
  570.    
  571.     .tab-throbber[busy],
  572.     .tab-throbber[progress] {
  573.       width: 16px !important;
  574.       height: 16px !important;
  575.       animation: unset !important;
  576.       -moz-context-properties: unset !important;
  577.       fill: unset !important;
  578.       animation: unset !important;
  579.       opacity: unset !important;
  580.       animation: unset !important;
  581.     }
  582.  
  583.     .tab-throbber[busy] {
  584.       background-image: url("tabthrobber_fx56_connecting.png") !important;
  585.     }
  586.  
  587.     .tab-throbber-fallback[busy] {
  588.       list-style-image: url("tabthrobber_fx56_connecting.png") !important;
  589.     }
  590.  
  591.     .tab-throbber[progress]{
  592.       background-image: url("tabthrobber_loading-fx39.png") !important;
  593.     }
  594.  
  595.     .tab-throbber-fallback[progress] {
  596.       list-style-image: url("tabthrobber_loading-fx39.png") !important;
  597.     }
  598.    
  599. }
  600.  
  601. @media (prefers-reduced-motion: no-preference) {
  602.    
  603.     .tab-throbber[busy]::before,
  604.     .tab-throbber[progress]::before {
  605.       width: 16px !important;
  606.       height: 16px !important;
  607.       animation: unset !important;
  608.       -moz-context-properties: unset !important;
  609.       fill: unset !important;
  610.       animation: unset !important;
  611.       opacity: unset !important;
  612.       animation: unset !important;
  613.     }
  614.  
  615.     .tab-throbber[busy]::before {
  616.       background-image: url("tabthrobber_fx56_connecting.png") !important;
  617.     }
  618.  
  619.     .tab-throbber-fallback[busy] {
  620.       list-style-image: url("tabthrobber_fx56_connecting.png") !important;
  621.     }
  622.  
  623.     .tab-throbber[progress]::before{
  624.       background-image: url("tabthrobber_loading-fx39.png") !important;
  625.     }
  626.  
  627.     .tab-throbber-fallback[progress] {
  628.       list-style-image: url("tabthrobber_loading-fx39.png") !important;
  629.     }
  630.  
  631. }
  632.  
  633.  
  634.  
  635.  
  636. /* Firefox userChrome.css tweaks ********************************************************/
  637. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  638. /****************************************************************************************/
  639.  
  640.  
  641. /* old toolbar padding */
  642. #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
  643.   padding-left: 0px !important;
  644.   padding-right: 0px !important;
  645. }
  646.  
  647.  
  648.  
  649.  
  650. /* Firefox userChrome.css tweaks ********************************************************/
  651. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  652. /****************************************************************************************/
  653.  
  654.  
  655. /* This creates an empty space above tabs toolbar.
  656. */
  657.  
  658. #main-window:not([customizing="true"]) #tabbrowser-tabs {
  659.   padding-top: 22px !important;
  660. }
  661.  
  662.  
  663.  
  664.  
  665. /* Firefox userChrome.css tweaks ********************************************************/
  666. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  667. /****************************************************************************************/
  668.  
  669. /* There are no icon versions for HiDPI modes available, so icons
  670.    will look blurry in those modes.
  671. */
  672.  
  673.  
  674. #stop-reload-button .toolbarbutton-animatable-box {
  675.   display: none !important;
  676. }
  677.  
  678. #home-button {
  679.   list-style-image: url("home.png") !important;
  680. }
  681.  
  682. #stop-button {
  683.   list-style-image: url("stop.png") !important;
  684.   color: #E86110 !important;
  685. }
  686.  
  687. #reload-button {
  688.   list-style-image: url("reload.png") !important;
  689. }
  690.  
  691. #find-button {
  692.   list-style-image: url("find.png") !important;
  693. }
  694.  
  695. #downloads-indicator-anchor {
  696.   list-style-image: url("downloads.png") !important;
  697. }
  698.  
  699.  
  700.  
  701.  
  702. /* Firefox userChrome.css tweaks ********************************************************/
  703. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  704. /****************************************************************************************/
  705.  
  706.  
  707. #unified-extensions-button {
  708.   list-style-image: url("addons.png") !important;
  709. }
  710. #sidebar-button {
  711.   list-style-image: url("sidebar.png") !important;
  712. }
  713.  
  714.  
  715.  
  716.  
  717.  
  718. /* Disable Overflow Menu */
  719. #PanelUI-menu-button { display: none !important;}
  720.  
  721.  
  722.  
  723.  
  724. /* Show Both Reload and Stop Buttons */
  725. #reload-button, #stop-button {
  726. display: inherit !important;
  727. }
  728. #reload-button > .toolbarbutton-icon {
  729. -moz-appearance: none !important;
  730. }
  731.  
  732.  
  733.  
  734.  
  735. /* My Tab Bar Fixes */
  736. #tabbrowser-tabs .tabbrowser-tab:not([selected="true"]):not(:hover) .tab-background {
  737.     background-image: linear-gradient(to top,rgba(196,196,196,1),rgba(222,222,222,1)) !important;
  738.     border: 1px solid rgba(146,146,146,1) !important;
  739.     border-bottom: none !important;
  740.     position: relative;
  741. }
  742.  
  743. #tabbrowser-tabs .tabbrowser-tab:is([selected],[multiselected]) {
  744.     background-image: linear-gradient(to top,rgba(245,245,245,1),rgba(255,255,255,1)) !important;
  745.     border: 1px solid rgba(146,146,146,1) !important;
  746.     border-bottom: none !important;
  747.     position: relative;
  748.     z-index: 1;
  749. }
  750.  
  751. #tabbrowser-tabs .tabbrowser-tab:not([selected="true"])[pending],
  752. .tabbrowser-tab:not([selected="true"])[visited] {
  753.     background-image: linear-gradient(to top,rgba(254,245,254,1),rgba(255,255,255,1)) !important;
  754.     border: 1px solid rgba(146,146,146,1) !important;
  755.     border-bottom: none !important;
  756.     position: relative;
  757.     z-index: 1;
  758. }
  759.  
  760. #tabbrowser-tabs{
  761.     background-image: linear-gradient(to top,transparent,transparent) !important;
  762.     position: relative;
  763.     z-index: 1;
  764. }
  765.  
  766. #TabsToolbar {
  767.     background-image: linear-gradient(to top,rgba(223,223,223,1),rgba(234,234,234,1)) !important;
  768. }
  769.  
  770. #tabbrowser-tabs .tabbrowser-tab:not([selected="true"]):hover .tab-background {
  771.     background-image: linear-gradient(to top,rgba(206,206,206,1),rgba(240,240,240,1)) !important;
  772.     border: 1px solid rgba(146,146,146,1) !important;
  773.     border-bottom: none !important;
  774.     position: relative;
  775. }
  776.  
  777. #tabbrowser-tabs ~ #alltabs-button {
  778.     padding: 1px;
  779.     position: relative;
  780.     top: 10px;
  781. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!