API tools faq
paste
Advertisement
Guest User

FireFox CSS margin issue

a guest
Jul 8th, 2025
17
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.38 KB | Help | 0 0
raw download clone embed print report
  1. /*  ,-----. ,-----. ,--.  ,--.,------.,--. ,----.    
  2.  * '  .--./'  .-.  '|  ,'.|  ||  .---'|  |'  .-./    
  3.  * |  |    |  | |  ||  |' '  ||  `--, |  ||  | .---.
  4.  * '  '--'\'  '-'  '|  | `   ||  |`   |  |'  '--'  |
  5.  *  `-----' `-----' `--'  `--'`--'    `--' `------'  
  6.  */
  7.  
  8. :root {
  9.   /* Show/hide reload button
  10.    * show: flex
  11.    * hide: none
  12.    */
  13.   --show-reload: flex;
  14.  
  15.   /* Navigation toolbar width
  16.    * max width is applied when url bar is expanded
  17.    */
  18.   --navbar-width: max(35vw, 500px);
  19.   --navbar-max-width: max(35vw, 500px);
  20.  
  21.   /* Dynamic tab width */
  22.   --active-tab-width: clamp(100px, 18vw, 180px);  
  23.   --inactive-tab-width: clamp(100px, 18vw, 180px);
  24.  
  25.   /* Preferred find bar width
  26.    * set to 0px for minimum width
  27.    */
  28.   --findbar-width: calc(var(--findbar-min-width-expanded) + (100vw - 2 * var(--findbar-right) - var(--findbar-min-width-expanded)) * 0.12);
  29.  
  30.   /* Find bar distance from window corners */
  31.   --findbar-top: 12px;
  32.   --findbar-right: max(2vw, 30px); /* scrollbar is 18px */
  33.  
  34.   /* Find bar transition duration
  35.    * changes the duraction of the find bar open/close transition animation
  36.    */
  37.   --findbar-transition-duration: 100ms;
  38.  
  39.   /* Find bar transition distance
  40.    * changes how far the find bar travels down/up during the open/close transition animation
  41.    */
  42.   --findbar-transition-distance: 20px;
  43.  
  44.   /* Show/hide find bar options
  45.    * show: 1
  46.    * hide: 0
  47.    */
  48.   --show-highlight-all:    1;
  49.   --show-match-case:       1;
  50.   --show-match-diacritics: 1;
  51.   --show-whole-words:      1;
  52.  
  53.   /* Find bar options position */
  54.   --highlight-all-position:    0;
  55.   --match-case-position:       1;
  56.   --match-diacritics-position: 2;
  57.   --whole-words-position:      3;
  58. }
  59.  
  60.  
  61.  
  62. /* ,--.     ,---.,--.   ,--.,-----. ,--. ,--.,--------.
  63.  * |  |    /  O  \\  `.'  /'  .-.  '|  | |  |'--.  .--'
  64.  * |  |   |  .-.  |'.    / |  | |  ||  | |  |   |  |    
  65.  * |  '--.|  | |  |  |  |  '  '-'  ''  '-'  '   |  |    
  66.  * `-----'`--' `--'  `--'   `-----'  `-----'    `--'    
  67.  */
  68.  
  69. @media (min-width: 1200px) {
  70.   #navigator-toolbox {
  71.     display: flex !important;
  72.     flex-wrap: wrap !important;
  73.     flex-direction: row !important;
  74.   }
  75.  
  76.   #toolbar-menubar {
  77.     order: 0;
  78.     width: 100% !important;
  79.   }
  80.  
  81.   #nav-bar {
  82.     order: 1;
  83.     width: var(--navbar-width) !important;
  84.   }
  85.   #nav-bar:has(#urlbar[open]) {
  86.     width: var(--navbar-max-width) !important;
  87.   }
  88.  
  89.   #TabsToolbar {
  90.     order: 2;
  91.     width: auto !important;
  92.   }
  93.   #navigator-toolbox:has(#urlbar[open]) #TabsToolbar {
  94.     margin-left: calc(var(--navbar-width) - var(--navbar-max-width)) !important;
  95.   }
  96.  
  97.   #PersonalToolbar {
  98.     order: 3;
  99.     width: 100% !important;
  100.   }
  101. }
  102.  
  103. :root {
  104.   /* hide panel borders */
  105.   --arrowpanel-border-color: transparent !important;
  106.  
  107.   /* hide focus borders */
  108.   --toolbar-field-focus-border-color: transparent !important;
  109. }
  110.  
  111. /* hide navigator toolbox border */
  112. #navigator-toolbox {
  113.   border: none !important;
  114. }
  115.  
  116. /* hide context menu border */
  117. .menupopup-arrowscrollbox {
  118.   border: none !important;
  119. }
  120.  
  121. /* hide notifications toolbar */
  122. #notifications-toolbar {
  123.   display: none !important;
  124. }
  125.  
  126. /* hide spacers */
  127. .titlebar-spacer {
  128.   display: none !important;
  129. }
  130.  
  131.  
  132.  
  133. /* ,--.  ,--.  ,---.,--.   ,--.      ,-----.    ,---.  ,------.  
  134.  * |  ,'.|  | /  O  \\  `.'  /,-----.|  |) /_  /  O  \ |  .--. '
  135.  * |  |' '  ||  .-.  |\     / '-----'|  .-.  \|  .-.  ||  '--'.'
  136.  * |  | `   ||  | |  | \   /         |  '--' /|  | |  ||  |\  \  
  137.  * `--'  `--'`--' `--'  `-'          `------' `--' `--'`--' '--'
  138.  */
  139.  
  140. /* hide nav bar background */
  141. #nav-bar {
  142.   background: none !important;
  143. }
  144.  
  145. /* hamburger menu */
  146. #PanelUI-button {
  147.   order: -2 !important;
  148. }
  149. #PanelUI-menu-button {
  150.   padding-inline-start: var(--toolbar-start-end-padding) !important;
  151.   padding-inline-end: var(--toolbarbutton-outer-padding) !important;
  152. }
  153.  
  154. /* dynamic extensions button */
  155. #unified-extensions-button {
  156.   order: -1 !important;
  157.   width: 0px !important;
  158.   padding: 0px !important;
  159.   box-sizing: content-box !important;
  160.   justify-content: flex-start !important;
  161.   overflow: hidden !important;
  162.   transition: width 100ms ease-out, padding 100ms ease-out !important;
  163. }
  164.  
  165. /* show extensions button when hamburger menu is hovered */
  166. #nav-bar:has(#PanelUI-menu-button:not([open]):hover) #unified-extensions-button {
  167.   width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  168.   padding: 0px var(--toolbarbutton-outer-padding) !important;
  169.   transition-delay: 450ms !important;
  170. }
  171. /* show on interaction */
  172. #unified-extensions-button:is(:hover, [open], :has(.toolbarbutton-icon[showing])) {
  173.   width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  174.   padding: 0px var(--toolbarbutton-outer-padding) !important;
  175. }
  176.  
  177. /* dynamic forward/back button */
  178. #forward-button, #back-button {
  179.   width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  180.   box-sizing: content-box !important;
  181.   overflow: hidden !important;
  182.   justify-content: flex-start !important;
  183.   transition: width 100ms ease-out, padding 100ms ease-out !important;
  184. }
  185. #forward-button[disabled], #back-button[disabled] {
  186.   width: 0px !important;
  187.   padding: 0px !important;
  188. }
  189.  
  190. /* show/hide reload button */
  191. #stop-reload-button {
  192.   display: var(--show-reload) !important;
  193. }
  194.  
  195. /* fix reload button padding */
  196. #stop-reload-button {
  197.   padding: 0px calc(var(--toolbarbutton-outer-padding)) !important;
  198. }
  199. #stop-reload-button > * {
  200.   padding: 0px !important;
  201. }
  202.  
  203. /* remove margins from extension buttons*/
  204. .toolbaritem-combined-buttons {
  205.   margin-inline: 0px !important;
  206. }
  207.  
  208. /* override default first item padding */
  209. #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):not([disabled], #urlbar-container):first-child {
  210.   padding-inline-start: var(--toolbarbutton-outer-padding) !important;
  211. }
  212.  
  213. /* pad last visible item */
  214. @media (max-width: 1200px) {
  215.   /* need to be explicit about hbox else FireFox crashes on dialog box popup for some reason */
  216.   hbox#nav-bar-customization-target > :nth-last-child(1 of :is(toolbarbutton, toolbaritem):not([disabled], #unified-extensions-button)):not(#urlbar-container) {
  217.     padding-inline-end: var(--toolbar-start-end-padding) !important;
  218.   }
  219.   hbox#nav-bar-customization-target > :nth-last-child(1 of :is(toolbarbutton, toolbaritem):not([disabled], #unified-extensions-button)):is(#urlbar-container) {
  220.     margin-inline-end: var(--toolbar-start-end-padding) !important;
  221.   }
  222. }
  223.  
  224.  
  225.  
  226. /* ,--. ,--.,------. ,--.       ,-----.    ,---.  ,------.  
  227.  * |  | |  ||  .--. '|  |,-----.|  |) /_  /  O  \ |  .--. '
  228.  * |  | |  ||  '--'.'|  |'-----'|  .-.  \|  .-.  ||  '--'.'
  229.  * '  '-'  '|  |\  \ |  '--.    |  '--' /|  | |  ||  |\  \  
  230.  *  `-----' `--' '--'`-----'    `------' `--' `--'`--' '--'
  231.  */
  232.  
  233. /* make url bar grow/shrink correctly in responce to dynamics buttons */
  234. #urlbar-container {
  235.   flex: 1 !important
  236. }
  237.  
  238. #urlbar:not(:hover, [focused]) #urlbar-background {
  239.   background: none !important;
  240. }
  241.  
  242. /* pad url bar text */
  243. #urlbar:not([focused]) .urlbar-input-box {
  244.   padding-left: var(--urlbar-icon-padding) !important;
  245. }
  246.  
  247. /* hide identity box and "shield" buttons */
  248. #urlbar:not([focused]):not(:has(:is(#tracking-protection-icon-container, #identity-box > *):is(:hover, [open]))) :is(#tracking-protection-icon-container, #identity-box) {
  249.   display: none !important
  250. }
  251.  
  252. /* hide all page action buttons except zoom */
  253. #urlbar:not(:hover, [focused]) #page-action-buttons > *:not([open], #urlbar-zoom-button) {
  254.   display: none !important
  255. }
  256.  
  257.  
  258.  
  259. /* ,--------. ,---.  ,-----.   ,---.  
  260.  * '--.  .--'/  O  \ |  |) /_ '   .-'  
  261.  *    |  |  |  .-.  ||  .-.  \`.  `-.  
  262.  *    |  |  |  | |  ||  '--' /.-'    |
  263.  *    `--'  `--' `--'`------' `-----'  
  264.  */
  265.  
  266. /* always positions tabs first */
  267. #tabbrowser-tabs {
  268.   order: -1 !important;
  269. }
  270.  
  271. /* hide default border, padding, and margin left of tabs when first tabs toolbar element isn't tabs */
  272. #tabbrowser-tabs {
  273.   border-inline-start: none !important;
  274.   padding-inline-start: 0px !important;
  275.   margin-inline-start: 0px !important;
  276.   margin-bottom: 1px !important;
  277. }
  278.  
  279. /* add margin left of tabs toolbar if last nav bar element isn't url bar*/
  280. @media (min-width: 1200px) {
  281.   #navigator-toolbox:has(#urlbar-container ~:not(#unified-extensions-button)) #TabsToolbar {
  282.     margin-left: calc(var(--urlbar-margin-inline) - var(--tab-overflow-clip-margin)) !important;
  283.   }
  284. }
  285.  
  286. /* add margin right of tabs so that there is always a draggable area */
  287. #tabbrowser-tabs:not(:has(+ #new-tab-button)),
  288. #TabsToolbar-customization-target:has(#tabbrowser-tabs + #new-tab-button) :is(#new-tab-button, #tabs-newtab-button) {
  289.   margin-right: 40px !important;
  290. }
  291.  
  292. /* remove gap after pinned tabs */
  293. #tabbrowser-tabs[haspinnedtabs] .tabbrowser-tab:nth-child(1 of :not([pinned])) {
  294.   margin-inline-start: 0px !important;
  295. }
  296.  
  297. /* hide tab shadow & outline */
  298. .tabbrowser-tab .tab-background {
  299.   box-shadow: none !important;
  300.   outline: none !important;
  301. }
  302.  
  303. /* hide tab close button */
  304. .tabbrowser-tab:not([pinned]) .tab-close-button {
  305.   display: none !important;
  306. }
  307. .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  308.   display: none !important;
  309. }
  310.  
  311. /* dynamic tab width */
  312. .tabbrowser-tab[selected]:not([pinned]) {
  313.   max-width: var(--active-tab-width) !important;
  314. }
  315. .tabbrowser-tab[fadein]:not([selected], [pinned]) {
  316.   max-width: var(--inactive-tab-width) !important;
  317. }
  318.  
  319.  
  320.  
  321. /* ,--------. ,-----.  ,-----. ,--.   ,-----.    ,---.  ,------.  
  322.  * '--.  .--''  .-.  ''  .-.  '|  |   |  |) /_  /  O  \ |  .--. '
  323.  *    |  |   |  | |  ||  | |  ||  |   |  .-.  \|  .-.  ||  '--'.'
  324.  *    |  |   '  '-'  ''  '-'  '|  '--.|  '--' /|  | |  ||  |\  \  
  325.  *    `--'    `-----'  `-----' `-----'`------' `--' `--'`--' '--'
  326.  */
  327.  
  328. /* rounded toolbar corners */
  329. #PersonalToolbar {
  330.   border-top-left-radius: var(--tab-border-radius) !important;
  331.   border-top-right-radius: var(--tab-border-radius) !important;
  332. }
  333.  
  334. /* toolbar button margins */
  335. #PersonalToolbar toolbarbutton {
  336.   margin-top: 4px !important;
  337.   margin-bottom: 4px !important;
  338. }
  339.  
  340. /* make bookmark button padding uniform */
  341. #PlacesToolbarItems toolbarbutton {
  342.   padding: var(--bookmark-block-padding) !important;
  343. }
  344.  
  345. /* match chevron button size to bookmark button size */
  346. #PlacesChevron .toolbarbutton-icon {
  347.   width: calc(2 * var(--bookmark-block-padding) + 16px) !important;
  348.   height: calc(2 * var(--bookmark-block-padding) + 16px) !important;
  349.   padding: var(--bookmark-block-padding) !important;
  350. }
  351.  
  352.  
  353.  
  354.                                                            
  355. /* ,------.,--.,--.  ,--.,------.         ,-----.    ,---.  ,------.  
  356.  * |  .---'|  ||  ,'.|  ||  .-.  \ ,-----.|  |) /_  /  O  \ |  .--. '
  357.  * |  `--, |  ||  |' '  ||  |  \  :'-----'|  .-.  \|  .-.  ||  '--'.'
  358.  * |  |`   |  ||  | `   ||  '--'  /       |  '--' /|  | |  ||  |\  \  
  359.  * `--'    `--'`--'  `--'`-------'        `------' `--' `--'`--' '--'
  360.  *  __________________________________________________________________________________
  361.  * |  ————————————————————————————————————————————————————————————   ———— ————   ———  |
  362.  * | | Find in page                                               | | /\ | \/ | | X | |
  363.  * |  ————————————————————————————————————————————————————————————   ———— ————   ———  |
  364.  *  ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
  365.  *  8                        {textboxWidth}                        8  30   30  8  24 8                                  = 116px + {textboxWidth}
  366.  *  ______________________________________________________________________________________________________________
  367.  * |  ————————————————————————————————————————————————————————————   ———— ————   ————   ————   ————   ————   ———  |
  368.  * | | Find in page                                               | | /\ | \/ | | HL | | Aa | | a̲b̲ | | àë | | X | |
  369.  * |  ————————————————————————————————————————————————————————————   ———— ————   ————   ————   ————   ————   ———  |
  370.  *  ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
  371.  *  8                        {textboxWidth}                        8  30   30  8       {optionsWidth}         24 8      = 116px + {optionsWidth} + {textboxWidth}
  372.  */
  373.  
  374. :root {
  375.   --show-margin: round(up, calc((var(--show-highlight-all) + var(--show-match-case) + var(--show-match-diacritics) + var(--show-whole-words)) / 4));
  376.   --options-width: calc(34px*var(--show-highlight-all) + 34px*var(--show-match-case) + 34px*var(--show-match-diacritics) + 34px*var(--show-whole-words) + 4px*var(--show-margin));
  377.  
  378.   --findbar-min-width: calc(450px - 2 * var(--findbar-right)); /* minimum browser width = 450px */
  379.   --findbar-min-width-expanded: calc(var(--findbar-min-width) + var(--options-width));
  380.   --findbar-max-width: calc(100vw - 2 * var(--findbar-right));
  381.   --findbar-width-use: clamp(var(--findbar-min-width-expanded), var(--findbar-width), var(--findbar-max-width));
  382.  
  383.   --textbox-min-width: calc(var(--findbar-min-width) - 116px);
  384.   --textbox-width: calc(var(--findbar-width-use) - 116px - var(--options-width));
  385. }
  386.  
  387. /* floating find bar */
  388. findbar {
  389.   position: absolute !important;
  390.   top: var(--findbar-top) !important;
  391.   left: var(--findbar-right) !important;
  392.   right: var(--findbar-right) !important;
  393.   width: var(--findbar-width-use) !important;
  394.   min-width: var(--findbar-min-width) !important;
  395.   max-width: var(--findbar-max-width) !important;
  396.   margin-left: auto !important;
  397.   border: none !important;
  398.   border-radius: var(--tab-border-radius) !important;
  399.   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) !important;
  400. }
  401.  
  402. /* find bar transiton */
  403. findbar {
  404.   height: 40px !important;
  405.   overflow-y: hidden !important;
  406.   transition-property: top, height, padding-block, visibility !important;
  407.   transition-duration: var(--findbar-transition-duration), var(--findbar-transition-duration), var(--findbar-transition-duration), 0s !important;
  408.   transition-timing-function: ease-in-out, ease-in-out, ease-in-out, linear !important;
  409.   transition-delay: 0s, 0s, 0s, 0s !important;
  410. }
  411. findbar[hidden="true"] {
  412.   top: calc(var(--findbar-top) - var(--findbar-transition-distance)) !important;
  413.   height: 0px !important;
  414.   padding-block: 0px !important;
  415.   transition-delay: 0s, 0s, 0s, var(--findbar-transition-duration) !important;
  416. }
  417. findbar > * {
  418.   transition-duration: calc(var(--findbar-transition-duration) / 2) !important;
  419.   transition-delay: calc(var(--findbar-transition-duration) / 2) !important;
  420. }
  421. findbar[hidden="true"] > * {
  422.   transition-delay: 0s !important;
  423. }
  424.  
  425. /* allow textbox to grow */
  426. hbox[anonid="findbar-textbox-wrapper"], .findbar-textbox {
  427.   flex: 1 !important;
  428. }
  429.  
  430. /* format textbox */
  431. .findbar-textbox {
  432.   min-width: var(--textbox-min-width) !important;
  433.   border: none !important;
  434.   outline: none !important;
  435.   box-shadow: none !important;
  436. }
  437. .findbar-textbox:not([status]) {
  438.   background-color: transparent !important;
  439. }
  440. .findbar-textbox:not(:focus, [status]):hover {
  441.   background-color: var(--toolbar-field-background-color) !important;
  442. }
  443.  
  444. /* position found matches label */
  445. label.found-matches {
  446.   position: absolute !important;
  447.   right: calc(100% - var(--textbox-width)) !important;
  448.   text-align: right !important;
  449.   margin: 0px !important;
  450. }
  451.  
  452. /* hide other labels */
  453. .findbar-label:not(.found-matches) {
  454.   display: none !important;
  455. }
  456.  
  457. /* simplify checkboxes */
  458. .findbar-container > checkbox {
  459.   margin-left: 0px !important;
  460.   justify-content: center !important;
  461.   overflow: hidden !important;
  462. }
  463. .findbar-container > checkbox *{
  464.   display: none !important;
  465. }
  466.  
  467. /* format checkboxes */
  468. .findbar-highlight {
  469.   order: var(--highlight-all-position) !important;
  470.   width: calc(30px * var(--show-highlight-all)) !important;
  471.   height: calc(24px * var(--show-highlight-all)) !important;
  472.   margin-right: calc(4px * var(--show-highlight-all)) !important;
  473. }
  474. .findbar-case-sensitive {
  475.   order: var(--match-case-position) !important;
  476.   width: calc(30px * var(--show-match-case)) !important;
  477.   height: calc(24px * var(--show-match-case)) !important;
  478.   margin-right: calc(4px * var(--show-match-case)) !important;
  479. }
  480. .findbar-match-diacritics {
  481.   order: var(--match-diacritics-position) !important;
  482.   width: calc(30px * var(--show-match-diacritics)) !important;
  483.   height: calc(24px * var(--show-match-diacritics)) !important;
  484.   margin-right: calc(4px * var(--show-match-diacritics)) !important;
  485. }
  486. .findbar-entire-word {
  487.   order: var(--whole-words-position) !important;
  488.   width: calc(30px * var(--show-whole-words)) !important;
  489.   height: calc(24px * var(--show-whole-words)) !important;
  490.   margin-right: calc(4px * var(--show-whole-words)) !important;
  491. }
  492. .findbar-highlight::after {
  493.   content: "HL";
  494.   font-weight: bold;
  495. }
  496. .findbar-case-sensitive::after {
  497.   content: "Aa";
  498.   font-weight: bold;
  499.   color: var(--toolbar-color);
  500. }
  501. .findbar-match-diacritics::after {
  502.   content: "àë";
  503.   font-weight: bold;
  504. }
  505. .findbar-entire-word::after {
  506.   content: "ab";
  507.   font-weight: bold;
  508.   text-decoration: underline;
  509.   color: var(--toolbar-color);
  510. }
  511.  
  512. /* checkbox hover/active background */
  513. .findbar-container > checkbox:not([checked]):hover {
  514.   background-color: var(--toolbarbutton-hover-background) !important;
  515.   border-radius: 4px !important;
  516. }
  517. .findbar-container > checkbox[checked] {
  518.   background-color: var(--toolbarbutton-active-background) !important;
  519.   border-radius: 4px !important;
  520. }
  521.  
  522. /* format close button */
  523. .findbar-closebutton {
  524.   margin-left: calc(4px * var(--show-margin)) !important;
  525. }
  526.  
Tags: firefox
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!