vurtomatic

Untitled

Jun 6th, 2021
1,055
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /****Reduce height of tab bar********************************************************************************************************/
  2. :root { --tab-min-height: 26px !important;}
  3.  
  4.  
  5.  
  6. /****Remove line above tab bar********************************************************************************************************/
  7. #navigator-toolbox {
  8.   margin-top: -1px !important;
  9. }
  10.  
  11. #main-window:not([sizemode="maximized"]) #navigator-toolbox {
  12.   margin-top: -2px !important;
  13. }
  14.  
  15.  
  16.  
  17. /****Show tab close button on hover********************************************************************************************************/
  18. .tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button {
  19.         visibility: hidden !important;
  20.         margin-left: -16px !important;
  21. }
  22.  
  23. .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
  24.         visibility: visible !important;
  25.         margin-left: 0px !important;
  26.         display: -moz-box !important;
  27. }
  28.  
  29.  
  30.  
  31. /****Remove thin line between tabs and page************************************************************************************************/
  32. /*https://www.reddit.com/r/FirefoxCSS/comments/e78abm/remove_border_under_tabs_in_ff71/*/
  33. #main-window #navigator-toolbox { border: none !important; }
  34.  
  35.  
  36.  
  37. /****Remove thin line between tabs and nav bar*********************************************************************************************/
  38. /*https://www.reddit.com/r/FirefoxCSS/comments/edkv8r/remove_line_between_tab_browser_and_nav_bar/*/
  39. #navigator-toolbox { --tabs-border-color: transparent !important; }
  40.  
  41.  
  42.  
  43. /****Remove empty space between window buttons and tabs************************************************************************************/
  44. /*https://www.reddit.com/r/FirefoxCSS/comments/jquup2/remove_empty_space_between_window_controls_and/*/
  45. #TabsToolbar .titlebar-spacer[type="pre-tabs"],
  46. #TabsToolbar .titlebar-spacer[type="post-tabs"] {
  47.   display: none !important;
  48. }
  49.  
  50.  
  51.  
  52. /****Hide blue stripe on active tab********************************************************************************************************/
  53. .tab-line[selected="true"] {
  54.   opacity: 0 !important;
  55. }
  56.  
  57.  
  58.  
  59. /****More spacing between extension icons**************************************************************************************************/
  60. .toolbarbutton-icon
  61. {
  62. /*  padding-right: 1px !important;
  63.   padding-left: 1px !important;*/
  64.   margin-right: 2px !important;
  65.   margin-left: 2px !important;
  66. }
  67.  
  68.  
  69.  
  70. /****Floating find bar********************************************************************************************************************/
  71. findbar{
  72.   -moz-box-ordinal-group: 0;
  73.   margin-bottom: calc(0px - 2 * var(--toolbarbutton-inner-padding) -  25px);
  74.   position: relative;
  75.   border-top: none !important;
  76.   transition: transform 82ms linear, opacity 82ms linear 32ms !important;
  77.   background: none !important;
  78.   pointer-events: none;
  79.   z-index: 1;
  80. }
  81.  
  82. .findbar-container > .findbar-find-fast{
  83.   padding: var(--toolbarbutton-inner-padding) 1px;
  84.   margin: 0 !important;
  85. }
  86.  
  87. findbar[hidden]{ transform: translateY(-30px);}
  88.  
  89. findbar > .findbar-container,
  90. findbar > .close-icon{
  91.   border: 1px solid var(--chrome-content-separator-color);
  92.   border-width: 0 0 1px 0px;
  93.   background: var(--uc-light-bkgnd-color,var(--toolbar-bgcolor)) !important;
  94.   pointer-events: auto;
  95. }
  96. findbar > .findbar-container{
  97.   -moz-box-direction: reverse;
  98.   border-left-width: 1px;
  99. }
  100.  
  101. findbar > .findbar-container > hbox{ margin: 0 5px }
  102.  
  103. findbar::before{
  104.   content:"";
  105.   display: -moz-box;
  106.   -moz-box-flex: 100;
  107. }
  108.  
  109. /*
  110. Move findbar so it isn't over the scrollbar
  111. Delete if you want findbar to begin from right window edge
  112. */
  113. findbar{
  114.   margin-right: 16px;
  115.   border-right: 1px solid var(--chrome-content-separator-color);
  116. }
  117.  
  118.  
  119.  
  120. /****URL Bar Aesthetics********************************************************************************************************************/
  121. #urlbar-background { border-radius: 0 !important; border: none !important; background: #333333 !important;}
  122.  
  123.  
  124.  
  125. /****Monochrome addon icons****************************************************************************************************************/
  126. toolbarbutton { filter: grayscale(100%); }
  127.  
  128.  
  129.  
  130. /****Get rid of white flash when opening new tab*******************************************************************************************/
  131. @-moz-document url(chrome://browser/content/browser.xul)
  132. {
  133.    #browser vbox#appcontent tabbrowser,
  134.    #tabbrowser-tabpanels,
  135.    #main-window,
  136.    browser[type="content-primary"],
  137.    browser[type="content"],
  138.    tabbrowser#content,
  139.    #content,
  140.    browser[type="content"] > html
  141.    {
  142.       background: #323234 !important;
  143.    }
  144. }
  145.  
  146.  
  147.  
  148. /****Dark context menu*********************************************************************************************************************/
  149. menupopup, popup,
  150. popup > menu > menupopup,
  151. menupopup > menu > menupopup {
  152.     -moz-appearance: none !important;
  153.     background: #262A33 !important;
  154.   /*background: var(--url-and-searchbar-background-color) !important;*/
  155.     /*border: 1px solid #525A6D !important;*/
  156.     padding: 2px 0px 2px 0px  !important;}
  157.  
  158. menupopup menuseparator {
  159.     -moz-appearance: none !important;
  160.     background: #525A6D !important;
  161.     margin: 2px 0px 2px 0px !important;
  162.     padding: 0 !important;
  163.     border-top: none !important;
  164.     border-color: transparent !important;}
  165.  
  166. menupopup menu, menuitem{
  167.     -moz-appearance: none !important;
  168.     color: #C4C4C4!important;
  169.   /*color: var(--lwt-text-color) !important;*/
  170. }
  171.  
  172.  
  173. menupopup menu:hover, menuitem:hover {
  174.     -moz-appearance: none !important;
  175.     color:#C4C4C4 !important;
  176.   /*color: var(--lwt-text-color) !important;*/
  177.     background-color:#5555FF !important;
  178. }
  179.  
  180. #extension_icon_id {
  181. -webkit-filter: grayscale(100%);
  182. filter: grayscale(100%);
  183. }
  184.  
  185. :root:-moz-lwtheme-brighttext #extension_icon_id {
  186. -webkit-filter: grayscale(100%) invert(100%);
  187. filter: grayscale(100%) invert(100%);
  188. }
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195. /****Auto-hide everything******************************************************************************************************************/
  196. /*https://www.reddit.com/r/FirefoxCSS/comments/m16gil/autohide_almost_everything/*/
  197. /*
  198. # Tabs expand when leaved
  199. */
  200.  
  201. :root {
  202.     --Tabs-transition-time: 0.3s;
  203.     --Tabs-transition-delay: 3s;
  204. }
  205.  
  206. #main-window:not(:hover) .tabbrowser-tab:not([visuallyselected=true],
  207. [multiselected]) {
  208.     max-width: 35px!important;
  209.     min-width: 0px!important;
  210.     overflow: hidden;
  211.     transition: ease-out var(--Tabs-transition-time);
  212.     transition-delay: var(--Tabs-transition-delay)!important;
  213. }
  214.  
  215. #main-window:not(:hover) .tabbrowser-tab[visuallyselected=true] {
  216.     max-width: 65vw !important;
  217.     min-width: 0px!important;
  218.     overflow: hidden;
  219.     transition: ease-out var(--Tabs-transition-time);
  220.     transition-delay: var(--Tabs-transition-delay)!important;
  221. }
  222.  
  223.  
  224. /*
  225. # Auto-hide Navigation bar
  226. Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
  227. See the above repository for updates as well as full license text.
  228. */
  229.  
  230. :root {
  231.     --navbar-transition-delay: 0.5s;
  232.     --navbar-transition-duartion: 135ms;
  233. }
  234.  
  235. :root[uidensity="compact"] {
  236.     --nav-bar-margin: -29px;
  237.     --bookmark-bar-margin: -22px;
  238. }
  239.  
  240. :root:not([uidensity]) {
  241.     --nav-bar-margin: -41px;
  242.     --bookmark-bar-margin: -28px;
  243. }
  244.  
  245. :root[uidensity=touch] {
  246.     --nav-bar-margin: -41px;
  247.     --bookmark-bar-margin: -34px;
  248. }
  249.  
  250.  
  251. /*Auto-hide url-bar*/
  252.  
  253. :root:not([customizing])[sizemode="normal"] #nav-bar,
  254. :root:not([customizing])[sizemode="maximized"] #nav-bar {
  255.     position: relative;
  256.     padding-top: 1px;
  257.     margin-bottom: var(--nav-bar-margin);
  258.     transform: rotateX(90deg);
  259.     transform-origin: top;
  260.     transition: transform var(--navbar-transition-duartion) linear var(--navbar-transition-delay) !important;
  261.     z-index: 101;
  262. }
  263.  
  264.  
  265. /* show nav-bar on navigator-toolbox hover/focus */
  266.  
  267. :root:not([customizing])[sizemode="normal"] #navigator-toolbox:hover #nav-bar,
  268. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover #nav-bar,
  269. :root:not([customizing])[sizemode="normal"] #navigator-toolbox:focus-within #nav-bar,
  270. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox:focus-within #nav-bar {
  271.     transform: rotateX(0deg);
  272.     transition: all var(--navbar-transition-duartion) ease 0s !important;
  273.     z-index: 100;
  274. }
  275.  
  276.  
  277. /* Auto-hide bookmark bar */
  278.  
  279. #PersonalToolbar {
  280.     --uc-autohide-toolbar-delay: 600ms;
  281.     /* The toolbar is hidden after 0.6s */
  282. }
  283.  
  284. :root:not([customizing])[sizemode="normal"] #PersonalToolbar,
  285. :root:not([customizing])[sizemode="maximized"] #PersonalToolbar {
  286.     position: relative;
  287.     margin-bottom: var(--bookmark-bar-margin);
  288.     transform: rotateX(90deg) translate(0px, calc(-1 * var(--bookmark-bar-margin)));
  289.     transform-origin: top;
  290.     transition: transform var(--navbar-transition-duartion) linear var(--navbar-transition-delay) !important;
  291.     z-index: 99;
  292. }
  293.  
  294.  
  295. /* show bookmark bar when navigator-toolbox hover*/
  296.  
  297. :root:not([customizing])[sizemode="normal"] #navigator-toolbox:hover #PersonalToolbar,
  298. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover #PersonalToolbar {
  299.     transition-delay: var(--navbar-transition-duration) !important;
  300.     transform: rotateX(0) translate(0px, calc(-1 * var(--nav-bar-margin)));
  301. }
  302.  
  303.  
  304. /*Auto-hide-tab-bar*/
  305. /*Uncomment this to enable
  306. :root:not([customizing])[sizemode="normal"] #navigator-toolbox {
  307.     border-bottom: none!important;
  308.     margin-top:calc(-1 * var(--tab-min-height) - 2px);
  309.     transition-delay: 0.5s!important;
  310.     opacity:0;
  311.     transition: 0.5s;
  312.     z-index: 99;
  313. }
  314. :root:not([customizing])[sizemode="normal"][extradragspace] #navigator-toolbox {
  315.     margin-top:calc(-1 * var(--tab-min-height) - 8px);
  316. }
  317. :root:not([customizing])[sizemode="normal"]#main-window:hover #navigator-toolbox,
  318. :root:not([customizing])[sizemode="normal"]#main-window:focus-within #navigator-toolbox {
  319.     margin-top:0px;
  320.     transition-delay: 0s!important;
  321.     opacity:1;
  322.     z-index: 99;
  323. }
  324. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox {
  325.     background:hsl(234, 33%, 19%);
  326.     margin-top:calc(-1 * var(--tab-min-height));
  327.     transition-delay: var(--navbar-transition-delay);
  328.     opacity:0;
  329.     z-index: 99;
  330. }
  331. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover,
  332. :root:not([customizing])[sizemode="maximized"] #navigator-toolbox:focus-within {
  333.     transform: translate(0px, var(--tab-min-height));
  334.     transition-delay: 0s;
  335.     opacity:1;
  336.     z-index: 99;
  337. }
  338.  
  339.  
  340. /*Enable to drop tabs in whole page, very useful when tab-bar is hided*/
  341. /*Uncomment this to enable
  342. :root:not([customizing])[sizemode="normal"] arrowscrollbox{
  343.     block-size:var(--tab-min-height);
  344. }
  345. :root:not([customizing])[sizemode="normal"]#main-window:hover arrowscrollbox,
  346. :root:not([customizing])[sizemode="normal"]#main-window:focus-within arrowscrollbox{
  347.     block-size:auto;
  348. }
  349.  
  350. spacer,
  351. #scrollbutton-up,
  352. #scrollbutton-down{
  353.     display:none;
  354. }
  355.  
  356. :root:not([customizing])[sizemode="normal"] #tabbrowser-tabs{
  357.     max-height: 100vh;
  358.     margin-right:-250px;
  359.     margin-left:-40px;
  360.     margin-bottom:-100vh;
  361.     padding-top:2px;
  362.     transition: margin-left var(--navbar-transition-duartion) linear!important;
  363.     position: relative;
  364.     z-index: 99;
  365. }
  366.  
  367. :root:not([customizing])[sizemode="normal"]#main-window:hover #tabbrowser-tabs,
  368. :root:not([customizing])[sizemode="normal"]#main-window:focus-within #tabbrowser-tabs
  369. {
  370.  
  371.     min-width:unset;
  372.     transform:none;
  373.     margin-right:0vw;
  374.     margin-bottom: 0px;
  375.     margin-left: 0px;
  376.     transition-delay: 0s;
  377.     opacity:1;
  378. }
  379.  
  380. :root:not([customizing])[sizemode="normal"] tab{
  381.      max-height: var(--tab-min-height);
  382.     --tabs-border-color:transparent!important;
  383. }
  384. :root:not([customizing])[sizemode="normal"]#main-window:hover tab,
  385. :root:not([customizing])[sizemode="normal"]#main-window:focus-within tab{
  386.     --tabs-border-color:rgba(0,0,0,.3);
  387. }
  388.  
  389. /* Uncomment to enable compatibility for multi-row_bookmarks.css */
  390.  
  391.  
  392. /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */
  393.  
  394.  
  395. /*
  396. #PersonalToolbar:not([customizing]){
  397.   position: fixed;
  398.   display: block;
  399.   margin-bottom: 0px !important;
  400. }
  401. */
  402.  
  403.  
  404. /*
  405. # Urlbar lager when active
  406. */
  407.  
  408. :root:not([customizing])[sizemode="normal"] #urlbar-container:focus-within #urlbar {
  409.     position: fixed!important;
  410.     width: 90%!important;
  411.     margin-left: 5%;
  412. }
  413.  
  414.  
  415. /*
  416. # Sidebar Auto Hide
  417. # https://github.com/Getulio-Mendes/.dotFiles/tree/master/Firefox/chrome
  418. */
  419.  
  420. :root {
  421.     --sidebar-button-size: 15px;
  422.     --sidebar-width: 400px;
  423.     --sidebar-button-distance: 40px;
  424.     --sidebar-toolbar-height: 0px;
  425.     --sidebar-menubar-height: 0px;
  426.     --sidebar-transition-time: 0.2s;
  427.     --sidebar-transition-delay: 0.8s;
  428.     --sidebar-shadow-color: #28282F;
  429.     --sidebar-button-color: #000;
  430. }
  431.  
  432. #sidebar-switcher-arrow,
  433. #sidebar-switcher-target,
  434. #sidebar-switcher-target:active,
  435. #sidebar-close,
  436. #sidebar-close:active {
  437.     padding-bottom: 10px!important;
  438.     outline: none!important;
  439.     background: none!important;
  440. }
  441.  
  442. #sidebar-box {
  443.     z-index: 2 !important;
  444.     position: relative !important;
  445.     padding-top: calc(-1 * var(--menubar-height));
  446.     min-width: var(--sidebar-width) !important;
  447.     max-width: var(--sidebar-width) !important;
  448.     transition: all var(--sidebar-transition-time) ease-in-out;
  449.     margin-top: var(--menubar-height) !important;
  450. }
  451.  
  452. #sidebar {
  453.     border-right: none !important;
  454.     max-width: var(--sidebar-width)!important;
  455. }
  456.  
  457. #sidebar-header {
  458.     display: -webkit-box!important;
  459.     position: fixed!important;
  460.     -webkit-box-pack: justify;
  461.     border-bottom: none!important;
  462.     color: var(--sidebar-button-color);
  463.     height: calc(10px + var(--sidebar-button-size));
  464. }
  465.  
  466. #sidebar-switcher-target {
  467.     z-index: 1;
  468. }
  469.  
  470. #sidebar-switcher-arrow,
  471. #sidebar-title {
  472.     display: none;
  473. }
  474.  
  475. #sidebar-icon,
  476. #sidebar-close image {
  477.     padding: 4px;
  478.     block-size: calc(10px + var(--sidebar-button-size))!important;
  479.     width: calc(10px + var(--sidebar-button-size))!important;
  480.     transform: rotate(-90deg);
  481.     background-color: rgba(241, 241, 241, 0.4);
  482.     border-radius: 5px 5px 5px 5px;
  483. }
  484.  
  485.  
  486. /*When sidebar is move to left */
  487.  
  488.  
  489. /*sidebar-button-distance*/
  490.  
  491. #sidebar-box[style*="-moz-box-ordinal-group: 1"] #sidebar-header {
  492.     transform: translate(calc(var(--sidebar-width) + var(--sidebar-button-distance) - 70px), 50vh) rotate(90deg);
  493. }
  494.  
  495.  
  496. /* inner width = expanded width & move inner to only show initial-width long section */
  497.  
  498. #sidebar-box[style*="-moz-box-ordinal-group: 1"] {
  499.     margin-left: calc(-1 * var(--sidebar-width));
  500. }
  501.  
  502.  
  503. /* move inner to show entire sidebar */
  504.  
  505. #sidebar-box[style*="-moz-box-ordinal-group: 1"]:hover {
  506.     margin-left: 0px;
  507.     margin-right: calc(-1 * var(--sidebar-width));
  508.     box-shadow: 2px 0 100px var(--sidebar-shadow-color);
  509.     transition-delay: var(--sidebar-transition-delay);
  510. }
  511.  
  512.  
  513. /* When sidebar is move to right */
  514.  
  515. #sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-header {
  516.     transform: translate(calc(-1 * (var(--sidebar-width) + var(--sidebar-button-distance)) + var(--sidebar-width) - 20px), 50vh) rotate(90deg);
  517. }
  518.  
  519. #sidebar-box[style*="-moz-box-ordinal-group: 3"] {
  520.     margin-right: calc(-1 * var(--sidebar-width));
  521.     margin-left: 0px;
  522. }
  523.  
  524. #sidebar-box[style*="-moz-box-ordinal-group: 3"]:hover {
  525.     margin-right: 0px;
  526.     margin-left: calc(-1 * var(--sidebar-width));
  527.     box-shadow: 2px 0 200px var(--sidebar-shadow-color);
  528.     transition-delay: var(--sidebar-transition-delay);
  529. }
  530.  
  531. #sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-switcher-target,
  532. #sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-close {
  533.     margin-top: var(--sidebar-button-distance)!important;
  534. }
  535.  
  536.  
  537. /* fix urlbar being too high in ff 74 */
  538.  
  539. #urlbar {
  540.     --urlbar-toolbar-height: calc(var(--tab-min-height) - 1px)!important;
  541.     --urlbar-height: calc(var(--tab-min-height) - 1px)!important;
  542. }
  543.  
  544.  
RAW Paste Data