API tools faq
paste
Advertisement
Guest User

shooting_airplanes Firefox CSS

a guest
Apr 9th, 2025
67
0
115 days
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.58 KB | None | 0 0
raw download clone embed print report
  1. /* REDUCE FINDBAR HEIGHT START */
  2. .browserContainer > findbar {
  3.     padding-block: 0px !important;
  4. }
  5. .findbar-textbox {
  6.   min-width: 18em !important;
  7.   width: 22em !important;
  8. }
  9. /* REDUCE FINDBAR HEIGHT END */
  10.  
  11. /* BOOKMARK BAR HEIGHT START - DOESN'T DO ANYTHING NOW, 22px IS DEFAULT */
  12. #PersonalToolbar.browser-toolbar.chromeclass-directories.instant.customization-target {
  13.   height: 22px !important;
  14. }
  15. /* BOOKMARK BAR HEIGHT END */
  16.  
  17. /* REMOVE NEW TAB AND SHARE FROM TAB CONTEXT MENU START */
  18. #context_openANewTab,  menuitem.share-tab-url-item {
  19.     display: none !important;
  20. }
  21. #context_openANewTab + menuseparator {
  22.     display: none !important;
  23. }
  24. /* REMOVE NEW TAB AND SHARE FROM TAB CONTEXT MENU END */
  25.  
  26. /* DISABLE TAB BAR DIMMING START */
  27. #TabsToolbar:-moz-window-inactive {
  28.     opacity: 1 !important;
  29.     color: rgba(255, 255, 255, 0.6) !important;
  30. }
  31. .tabbrowser-tab:-moz-window-inactive:is([selected], [multiselected]) {
  32.   color: rgba(0, 0, 0, 0.6) !important;
  33. }
  34. /* DISABLE TAB BAR DIMMING END */
  35.  
  36. /* PROTON TABS */
  37. /*@media not(-moz-bool-pref: "sidebar.verticalTabs") { */
  38.   :root {
  39.     /* --tab-min-height: 32px !important; #not needed since v134.0 */
  40.     --tab-block-margin: 0px !important;
  41.   }
  42.   #TabsToolbar {
  43.     color: white !important;
  44.     background: #202340 !important;
  45.   }
  46.   #tabbrowser-tabs .tab-background {
  47.     margin-block: unset !important;
  48.     border-radius: unset !important;
  49.   }
  50.   .tabbrowser-tab {
  51.     padding-inline: 0px !important;
  52.   }
  53.  
  54.   .tabbrowser-tab:hover {
  55.     background: linear-gradient(#5f6175 2px, transparent 0), radial-gradient(circle at 17px, #f9f9fa 0px, transparent 15px) !important;
  56.   }
  57. /* } ### @media not(-moz-bool-pref: "sidebar.verticalTabs")
  58. doesn't seem to disable the code just for vertical tabs,
  59. but for normal tabs as well */
  60.  
  61. /* moves context-line (container indicator) to the bottom - no longer works in v113+ */
  62. /* .tab-context-line {
  63.   -moz-box-ordinal-group: 2;
  64.   margin-inline: 10px !important;
  65. } */
  66.  
  67. /* Move container color bar to bottom of tab */
  68. .tab-context-line {
  69.   margin: var(--tab-min-height) 4px 0 4px !important;
  70. }
  71.  
  72. /* PINNED TAB START IHAVENOIDEAWHATIMDOINGHERE */
  73. /* minimum 34px needed for some notification dots, 36px is optimal to see the full dot */
  74. /*.tabbrowser-tab[pinned] {
  75.   min-height: 36px !important;
  76. }*/
  77. .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
  78.   background-position: center bottom 1px !important;
  79. }
  80. .tab-background:is([selected], [multiselected]){
  81.   box-shadow: none !important;
  82. }
  83.  
  84. /* ACTIVE TAB START */
  85.   /* .tabbrowser-tab[selected="true"] {
  86.   /* font-style: italic !important;
  87.   /* color: orange !important;
  88.   /* background-color: #333866 !important;
  89.   /* background-color: #f9f9fa !important;
  90.   /* background-image: linear-gradient(-135deg, rgb(204,0,0) 6px, transparent 0) !important;
  91. } */
  92.  
  93. /* Blue line on active tab start */
  94. .tab-background[selected] {
  95.   background-color: var(--toolbar-bgcolor) !important;
  96.   background-image: linear-gradient(#0a84ff 2px, transparent 0) !important;
  97. }
  98. /* Blue line on active tab end */
  99. /* ACTIVE TAB END */
  100.  
  101. /* UNLOADED TAB BG COLOR START */
  102. .tabbrowser-tab[pending="true"] {
  103.   font-style: italic !important;
  104.   /* color: orange !important; */
  105.   background-color: #333866 !important;
  106.   /* background-image: linear-gradient(-135deg, rgba(204,0,0, 0.6) 6px, transparent 0) !important; */
  107. }
  108. /* UNLOADED TAB BG COLOR END */
  109.  
  110. /* FAVICON BG COLOR START *
  111.  .tabbrowser-tab:not([selected="true"]):not([pending="true"]):not([pinned]){
  112.   background-image: radial-gradient(circle at 16px, #f9f9fa 1px, transparent 16px);
  113. }
  114. /* FAVICON BG COLOR END */
  115.  
  116. /* New tab button color */
  117. #new-tab-button, #alltabs-button {
  118.     fill: currentColor !important;
  119. }
  120.  
  121. /* hide favicon when audio is playing (like FF 135) *
  122. #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  123.  
  124.     .tab-audio-button {
  125.             display: flex !important;
  126.             justify-self: flex-start !important;
  127.             align-self: center !important;
  128.        
  129.     }
  130.     .tab-icon-stack > :not(.tab-icon-overlay)
  131.         {
  132.             mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
  133.             mask-size: 16px 16px !important;
  134.             mask-position: center center !important;
  135.             mask-repeat: no-repeat !important;
  136.             mask-composite: exclude !important;
  137.             mask-mode: alpha !important;
  138.  
  139.             :root:-moz-locale-dir(rtl) &
  140.             {
  141.                 mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
  142.             }
  143.         }
  144. }
  145. /* Remove unwanted extra tab width when audio is playing *
  146. .tabbrowser-tab {
  147.     &:is([muted], [soundplaying], [activemedia-blocked]) {
  148.         #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
  149.             min-width: max(var(--tab-min-width-pref, var(--tab-min-width))) !important;
  150.         }
  151.     }
  152. }*/
  153.  
  154. /* -------------------- Media Icons -------------------- */
  155.  
  156. /* Pinned Tabs */
  157.  
  158. .tabbrowser-tab[pinned]:not([crashed])
  159. {
  160.     .tab-icon-overlay
  161.     {
  162.         background-color: transparent !important;
  163.         background-image: none !important;
  164.         fill: currentColor !important;
  165.         border-radius: 50px !important;
  166.         top: -8px !important;
  167.         inset-inline-end: -8px !important;
  168.        
  169.         &:hover
  170.         {
  171.             background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
  172.         }
  173.        
  174.         &:hover:active
  175.         {
  176.             background-color: color-mix(in srgb, currentColor 30%, transparent) !important;
  177.         }
  178.     }
  179.        
  180.     &:where([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack > :not(.tab-icon-overlay)
  181.     {
  182.         mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
  183.         mask-size: 16px 16px !important;
  184.         mask-position: center center !important;
  185.         mask-repeat: no-repeat !important;
  186.         mask-composite: exclude !important;
  187.         mask-mode: alpha !important;
  188.            
  189.         :root:-moz-locale-dir(rtl) &
  190.         {
  191.             mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
  192.         }
  193.     }
  194. }
  195.  
  196. /* Regular Tabs */
  197.  
  198. .tabbrowser-tab:not([pinned], [crashed])
  199. {
  200.     .tab-audio-button
  201.     {
  202.         position: relative !important;
  203.         transform: translate(-1px, 1px);
  204.         margin-inline-end: 8px !important;
  205.         --icon-size-default: 10px !important;
  206.         --button-size-icon-small: 16px !important;
  207.         --button-min-height-small: 16px !important;
  208.         --button-background-color-ghost: transparent !important;
  209.         --button-background-color-ghost-hover: color-mix(in srgb, currentColor 15%, transparent) !important;
  210.         --button-background-color-ghost-active: color-mix(in srgb, currentColor 30%, transparent) !important;
  211.         --button-border-radius: 50px !important;
  212.         --button-text-color-ghost: currentColor !important;
  213.         --button-text-color-ghost-hover: currentColor !important;
  214.         --button-text-color-ghost-active: currentColor !important;
  215.         --button-icon-fill: currentColor !important;
  216.         --button-text-color: currentColor !important;
  217.         --button-border: none !important;
  218.         --button-icon-stroke: none !important;
  219.         transform: translate(-1px, 2px);
  220.     }
  221.    
  222.     &:where([busy], [image], [sharing], [pictureinpicture]) .tab-audio-button
  223.     {
  224.         top: -8px !important;
  225.         inset-inline-end: -8px !important;
  226.     }
  227.    
  228.     &:where([soundplaying], [muted], [activemedia-blocked])
  229.     {
  230.         .tab-audio-button
  231.         {
  232.             display: flex !important;
  233.             justify-self: flex-start !important;
  234.             align-self: center !important;
  235.         }
  236.        
  237.         .tab-icon-stack > :not(.tab-icon-overlay)
  238.         {
  239.             mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
  240.             mask-size: 16px 16px !important;
  241.             mask-position: center center !important;
  242.             mask-repeat: no-repeat !important;
  243.             mask-composite: exclude !important;
  244.             mask-mode: alpha !important;
  245.  
  246.             :root:-moz-locale-dir(rtl) &
  247.             {
  248.                 mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
  249.             }
  250.         }
  251.     }
  252. }
  253.  
  254. .tabbrowser-tab:not([pinned])
  255. {
  256.     --tab-min-width: inherit !important;
  257.  
  258.     &[fadein]
  259.     {
  260.         min-width: var(--tab-min-width) !important;
  261.     }
  262.  
  263.     .tab-icon-stack > *
  264.     {
  265.         margin-inline-end: 8px !important;
  266.     }
  267.    
  268.     .tab-content
  269.     {
  270.         display: grid !important;
  271.         grid-template-rows: auto !important;
  272.         grid-template-columns: auto minmax(0px, 100%) auto !important;
  273.        
  274.         .tab-icon-stack,
  275.         .tab-audio-button
  276.         {
  277.             grid-area: 1 / 1 / auto / auto !important;
  278.         }
  279.     }
  280. }
  281.  
  282. /* ---------- Picture-In-Picture ---------- */
  283.  
  284. .tabbrowser-tab[pictureinpicture]:not([crashed], [busy])
  285. {
  286.     .tab-icon-stack::before
  287.     {
  288.         content: "";
  289.         display: block;
  290.         position: absolute;
  291.         width: 16px;
  292.         height: 16px;
  293.         background-color: currentColor;
  294.         mask-size: 16px 16px;
  295.         mask-position: center center;
  296.         mask-repeat: no-repeat;
  297.         mask-mode: alpha;
  298.        
  299.         :root:-moz-locale-dir(rtl) &
  300.         {
  301.             transform: rotateY(180deg);
  302.         }
  303.     }
  304.    
  305.     .tab-icon-stack > :not(.tab-icon-overlay)
  306.     {
  307.         position: relative !important;
  308.         padding: 2px !important;
  309.         inset-inline-start: 8px !important;
  310.         top: 8px !important;
  311.         mask-image: none !important;
  312.         box-sizing: border-box !important;
  313.         z-index: 1 !important;
  314.     }
  315.    
  316.     &:not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
  317.     {
  318.         mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
  319.         mask-size: 8px 8px, 8px 8px, 16px 16px;
  320.         mask-position: right bottom, right bottom, center center;
  321.         mask-repeat: no-repeat;
  322.         mask-composite: exclude, add;
  323.     }
  324.    
  325.     &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
  326.     {
  327.         mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
  328.         mask-size: 8px 16px, 8px 16px, 16px 16px;
  329.         mask-position: right bottom, right bottom, center center;
  330.         mask-repeat: no-repeat;
  331.         mask-composite: exclude, add;
  332.     }
  333. }
  334.  
  335. /* -------------------- Tab Text -------------------- */
  336.  
  337. .tab-label-container
  338. {
  339.     height: auto !important;
  340.     font-size: clamp(0px, 1em, 16px) !important;
  341.     mask-image: none !important;
  342. }
  343.  
  344. .tab-label
  345. {
  346.     width: 100% !important;
  347.     height: auto !important;
  348.     line-height: normal !important;
  349.     overflow: hidden !important;
  350.     white-space: nowrap !important;
  351.     text-overflow: ellipsis !important;
  352.     margin-block: 0px !important;
  353. }
  354.  
  355. .tab-secondary-label
  356. {
  357.     display: none !important;
  358. }
  359.  
  360. /* -------------------- Media Icons (Backup option) -------------------- */
  361.  
  362. /* Regular Tabs */
  363. /*
  364. .tabbrowser-tab:not([pinned], [crashed])
  365. {
  366.     .tab-icon-overlay
  367.     {
  368.         background-color: currentColor !important;
  369.         border-radius: 50px !important;
  370.         top: 0px !important;
  371.         inset-inline-end: 0px !important;
  372.         mask-image: var(--mask-overlay-background, none), var(--mask-overlay-image, none) !important;
  373.         mask-size: 16px 16px, 12px 12px !important;
  374.         mask-position: center center !important;
  375.         mask-repeat: no-repeat !important;
  376.         mask-mode: alpha !important;
  377.        
  378.         &:hover
  379.         {
  380.             --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
  381.         }
  382.  
  383.         &:hover:active
  384.         {
  385.             --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
  386.         }
  387.     }
  388.    
  389.     &[soundplaying] .tab-icon-overlay
  390.     {
  391.         --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  392.     }
  393.  
  394.     &[muted] .tab-icon-overlay
  395.     {
  396.         --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  397.     }
  398.  
  399.     &[activemedia-blocked] .tab-icon-overlay
  400.     {
  401.         --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
  402.     }
  403.    
  404.     &:where([busy], [image], [sharing], [pictureinpicture]) .tab-icon-overlay
  405.     {
  406.         top: -8px !important;
  407.         inset-inline-end: -8px !important;
  408.     }
  409.    
  410.     &:where([soundplaying], [muted], [activemedia-blocked])
  411.     {
  412.         .tab-icon-stack > :not(.tab-icon-overlay)
  413.         {
  414.             mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
  415.             mask-size: 16px 16px !important;
  416.             mask-position: center center !important;
  417.             mask-repeat: no-repeat !important;
  418.             mask-composite: exclude !important;
  419.             mask-mode: alpha !important;
  420.  
  421.             :root:-moz-locale-dir(rtl) &
  422.             {
  423.                 mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
  424.             }
  425.         }
  426.  
  427.         .tab-icon-overlay
  428.         {
  429.             display: revert !important;
  430.         }
  431.     }
  432. }
  433.  
  434. .tabbrowser-tab:not([pinned])
  435. {
  436.     --tab-min-width: inherit !important;
  437.  
  438.     &[fadein]
  439.     {
  440.         min-width: var(--tab-min-width) !important;
  441.     }
  442.  
  443.     .tab-icon-stack > *
  444.     {
  445.         margin-inline-end: 8px !important;
  446.     }
  447.    
  448.     .tab-audio-button
  449.     {
  450.         display: none !important;
  451.     }
  452. }
  453. */
  454. /* -------------------- Media Icons End -------------------- */
  455.  
  456. /*** Tighten up vertical drop-down(bookmark)/context/popup menu spacing ***/
  457. menupopup > menuitem, menupopup > menu {
  458.   padding-block: 2px !important;
  459. }
  460. :root {
  461.   --arrowpanel-menuitem-padding: 1px 2px !important; /* wtf is this? */
  462. }
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!