Advertisement
Gigsoll

Firefox css that feels like Safari 15

Mar 24th, 2023
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.40 KB | None | 0 0
  1. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/click_selected_tab_to_focus_urlbar.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. /* Clicking selected tab selects focuses urlbar */
  5. /* Selected tab cannot be normally clicked (right-,middle- or left-clicked) EXCEPT from the tab icon */
  6.  
  7. /* Clicking selected pinned tab doesn't focus urlbar by default since I expect you might not want to change pinned tab address - see below */
  8.  
  9.  
  10. /* Make selected tab unclickable so click goes to the capture box, obviously it can't be clicked at all anymore */
  11. /* remove the :not([pinned]) bit to make clicking pinned tab AROUND the tab-icon focus urlbar*/
  12.  
  13. .tabbrowser-tab:not([pinned])[selected]{ pointer-events: none }
  14.  
  15. /* Add back pointer-events to several elements so UI remains usable */
  16. /* The selected tab can be clicked normally from the icon */
  17. #TabsToolbar toolbarbutton,
  18. #TabsToolbar toolbaritem,
  19. .tabbrowser-tab,
  20. .tab-close-button,
  21. .tab-icon-stack{
  22.   pointer-events: auto
  23. }
  24.  
  25. /* Invisible capture box behind tabs*/
  26. :root:not([customizing]) #urlbar-input-container::before{
  27.   position: fixed;
  28.   display: block;
  29.   top: 0;
  30.   left: 0;
  31.   width: calc(100vw - 138px);
  32.   height: calc(var(--tab-min-height) + 2*var(--tab-block-margin));
  33.   content: "";
  34.   pointer-events: auto;
  35. }
  36. :root[sizemode="normal"]:not([customizing]) #urlbar-input-container::before{ left: 40px; width: calc(100vw - 138px -80px) }
  37.  
  38. #urlbar-input-container:focus-within::before{ display: none !important; }
  39.  
  40. /* Make tabs appear over the invisible box */
  41. :root:not([customizing]) #TabsToolbar-customization-target{
  42.   position: relative;
  43.   z-index: 1;
  44.   pointer-events: none
  45. }
  46.  
  47. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/selected_tab_as_urlbar.css made available under Mozilla Public License v. 2.0
  48. See the above repository for updates as well as full license text. */
  49.  
  50. /* This is a horrible hack and absolutely requires click_selected_tab_to_focus_urlbar.css to work. In general it's pertty bad, but meh */
  51.  
  52. /* Also hides the nav-bar and shows main menu button next to window controls. And makes the selected tab expand a whole bunch  */
  53.  
  54. /* Whole bunch of z-indexing */
  55. #main-window > body > box{ position: relative; z-index: 1 }
  56. .urlbar-input-box{ z-index: -1 !important; }
  57. #urlbar{ z-index: auto !important; }
  58. #alltabs-button,
  59. #PanelUI-button,
  60. #nav-bar-overflow-button{ z-index: 2; position: relative }
  61.  
  62. :root[sizemode="normal"] #urlbar-container{ margin-inline: 40px !important; }
  63.  
  64. #urlbar-input-container > :not(.urlbar-input-box){ opacity: 0 }
  65.  
  66. #urlbar-background{
  67.   background: transparent !important;
  68.   border: none !important;
  69.   box-shadow: none !important;
  70.   outline: none !important;
  71. }
  72. .urlbarView{
  73.   background: var(--toolbar-field-focus-background-color);
  74.   border: 0px solid var(--toolbar-field-focus-border-color) !important;
  75.   z-index: 1;
  76.   padding: 6px;
  77.   border-radius: 6px;
  78.   box-shadow: 0 0 26px #000;
  79.   left: 50vw;
  80.   margin-left: -50% !important;
  81. }
  82.  
  83. .tabbrowser-tab[selected][fadein]{ max-width: 100vw !important; min-width: 200px !important }
  84.  
  85. #navigator-toolbox:focus-within .tabbrowser-tab[selected] .tab-content{
  86.   opacity: 0;
  87. }
  88. #navigator-toolbox:focus-within .tab-background[selected]{
  89.   background-image: -moz-element(#urlbar-input) !important;
  90.   background-position: calc(var(--tab-inline-padding,4px) + 6px) 3px !important;
  91.   background-color: var(--toolbar-field-focus-background-color) !important;
  92.   background-size: auto !important;
  93. }
  94.  
  95. :root:not([customizing]) #titlebar{ margin-bottom: -40px }
  96.  
  97. /* Oh and! also hide other buttons from the nav-bar because why not */
  98. #nav-bar-customization-target > :not(#urlbar-container){ visibility: collapse }
  99. #TabsToolbar > .toolbar-items{ margin-right: 40px !important; }
  100.  
  101. #nav-bar{
  102.   padding-right: 138px;
  103.   box-shadow: none !important;
  104.   background-color: transparent !important;
  105. }
  106.  
  107. /* Back button */
  108. #back-button {
  109.   -moz-box-ordinal-group: 0 !important;
  110. }
  111.  
  112. /* Forward button */
  113. #forward-button {
  114.   -moz-box-ordinal-group: 1 !important;
  115. }
  116.  
  117. /* Reload button */
  118. #reload-button {
  119.   -moz-box-ordinal-group: 2 !important;
  120. }
  121.  
  122. /* Stop button */
  123. #stop-button {
  124.   -moz-box-ordinal-group: 3 !important;
  125. }
  126.  
  127. .titlebar-buttonbox-container{ display:none }
  128. #nav-bar-overflow-button { display: none !important;}
  129.  
Tags: Firefox css
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement