API tools faq
paste
Advertisement
GodieGun

ogx_hamburger-menu.css

GodieGun
Jul 5th, 2025
251
0
4 days
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 30.67 KB | None | 0 0
raw download clone embed print report
  1. /* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text.
  2.    https://github.com/Godiesc/firefox-gx */
  3.  
  4. :root {
  5.     --margin-left-icons-personal: 10px !important;
  6.     --margin-right-icons-personal: 1px !important;/**/
  7.     --label-color: color-mix(in srgb, var(--arrowpanel-color, var(--tab-selected-textcolor))86%, transparent);
  8.     --my-menu-button-height: calc(var(--menubar-height-personal, var(--tab-height-personal)) - 1px) !important;
  9. }
  10.  
  11. /* New font for 'Menu' label */
  12.  
  13. @font-face {
  14.     font-family: 'gamer';
  15.     src: url('../icons/Underwave-Bold.ttf');
  16. }
  17.  
  18. /* Menu size when 'open' in non-maximized window */
  19.  
  20. #appMenu-popup panelview {
  21.     width: 25.5em !important;
  22. }
  23.  
  24. /* Color of icons and labels */
  25.  
  26. .subviewbutton:not([disabled]), #appMenu-popup toolbarbutton:not([disabled]) .toolbarbutton-text label {
  27.     -moz-context-properties: fill;
  28.     fill: var(--label-color) !important;
  29.     color: var(--label-color) !important;
  30. }
  31.  
  32. /* Login Button */
  33.  
  34. #appMenu-fxa-status2:not([fxastatus]) {
  35.     padding-top: 4px !important;
  36.     & > #appMenu-fxa-label2 {
  37.         border-radius: 4px !important;
  38.     }}
  39.  
  40. #appMenu-fxa-status2:not([fxastatus]) #appMenu-fxa-label2:hover {
  41.     background-color: var(--button-hover-bgcolor) !important;
  42. }
  43.  
  44. /* Right margin of the shortcuts Ctrl + */
  45.  
  46. #appMenu-popup .subviewbutton[shortcut]::after {
  47.     --text-color-deemphasized: color-mix(in srgb, currentColor 96%, transparent) !important;
  48.     padding-inline: 3px 18px;
  49. }
  50.  
  51. /* 'Update Available' banner */
  52.  
  53. #appMenu-popup .panel-banner-item:not([disabled]):hover, #appMenu-popup .addon-banner-item:not([disabled]):hover {
  54.     background: var(--button-active-bgcolor) !important;
  55. }
  56.  
  57. /* __________________________________________________ Menu 'disabled' and Sidebar is ON __________________________________________________ */
  58.  
  59. @media -moz-pref("firefoxgx.menu-disabled") {
  60.     @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always') {
  61.  
  62.         :root {
  63.             --padding-left-tab: calc(var(--my-vertical-toolbar-width) - 1px) !important;            /* New size of the 'menu' button */
  64.             --my-vertical-elements-width: calc(var(--my-vertical-toolbar-width) - 1px) !important;
  65.             --my-elements-left-margin: var(--my-vertical-elements-width) !important;
  66.         }
  67.  
  68.         /* margin to the left of 'menubar-tabsbar-navbar' when new menu is disabled */
  69.  
  70.         :root:not([chromehidden~="toolbar"]):has(#PersonalToolbar[collapsed="false"]) {
  71.             & #toolbar-menubar{
  72.                 padding-inline-start: var(--padding-left-tab) !important;
  73.             }
  74.             & #TabsToolbar {
  75.                 padding-inline-start: var(--padding-left-tab) !important;
  76.             }        
  77.             & #nav-bar{
  78.                 margin-inline-start: var(--my-vertical-toolbar-width) !important;
  79.             }
  80.         }
  81.     }
  82.    
  83.     @media -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") and (not -moz-pref("firefoxgx.left-sidebar")) {
  84.        
  85.         :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]):not(:has(#sidebar-main[hidden="true"],sidebar-main[hidden])) {
  86.             --my-vertical-elements-width: calc(var(--my-vertical-toolbar-width) - 1px) !important;
  87.             --my-elements-left-margin: var(--my-vertical-elements-width) !important;
  88.         }
  89.        
  90.         #toolbar-menubar{
  91.             padding-inline-start: var(--my-elements-left-margin, 0px) !important;
  92.         }
  93.        
  94.         & #TabsToolbar, #nav-bar {
  95.             margin-inline-start: var(--my-elements-left-margin, 0px) !important;
  96.         }
  97.     }
  98. }
  99.  
  100. /* __________________________________________________ Menu on left-top __________________________________________________
  101.    ______________________________________________________________________________________________________________________ */
  102.  
  103. @media not -moz-pref("firefoxgx.menu-disabled") {
  104.    
  105.     /* New margin right for the latest button of the navbar */
  106.    
  107.     @media not (-moz-pref("firefoxgx.tree-tabs") or -moz-pref("sidebar.verticalTabs") or -moz-pref("firefoxgx.oneline")) {
  108.  
  109.         #nav-bar-overflow-button {
  110.             padding-inline-end: var(--toolbar-start-end-padding) !important;
  111.         }
  112.  
  113.         /* When extension button is hidden from toolbar / overflow empty */
  114.         :root:has(#appMenu-unified-extensions-button[hidden])
  115.         #nav-bar:not([nonemptyoverflow="true"], [customizing])
  116.         #nav-bar-customization-target > :last-child {
  117.             padding-inline-end: var(--toolbar-start-end-padding) !important;
  118.         }
  119.  
  120.         :root:has(#appMenu-unified-extensions-button:not([hidden]))
  121.         #nav-bar:not([nonemptyoverflow="true"], [customizing])
  122.         #nav-bar-customization-target {
  123.             padding-inline-end: var(--toolbar-start-end-padding) !important;
  124.         }
  125.     }
  126.    
  127.     /* _______________________ Menu style when menu-bar is always active _______________________ */
  128.    
  129.     @media (not -moz-pref("firefoxgx.left-sidebar")) and (not -moz-pref("sidebar.revamp")) and (not -moz-pref("firefoxgx.tree-tabs")) {
  130.  
  131.         @media (-moz-platform: windows), (-moz-platform: linux) {
  132.  
  133.             :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]):has(#toolbar-menubar[autohide="false"]) {
  134.  
  135.                 & #PanelUI-button,
  136.                 & #appMenu-popup {
  137.                     --toolbarbutton-hover-personal: var(--button-active-bgcolor) !important;
  138.                     --my-menu-button-height: calc(var(--menubar-height-personal) - 2px) !important;
  139.                 }
  140.  
  141.                 /* Smaller background size */
  142.                 & #PanelUI-menu-button>.toolbarbutton-badge-stack {
  143.                     clip-path: xywh(4px 4px calc(100% - 8px) calc(100% - 8px) round 2px);
  144.                 }
  145.                
  146.                 /* Logo color change on 'hover' and 'open' */
  147.                 & #PanelUI-menu-button:is(:hover,[open]) .toolbarbutton-badge-stack {
  148.                     fill: var(--label-color) !important;
  149.                 }
  150.  
  151.                 /* Smaller Logo */
  152.                 & #PanelUI-menu-button>.toolbarbutton-badge-stack>.toolbarbutton-icon {
  153.                     list-style-image: url("../icons/foxfill.svg") !important;
  154.                     transform: scale(1) !important;
  155.                 }
  156.             }
  157.         }
  158.     }
  159.    
  160.     /*_______________________ Menu button Styles for windows and linux _______________________ */
  161.    
  162.     @media (-moz-platform: windows), (-moz-platform: linux) {
  163.        
  164.         /* left margin of menubar */
  165.  
  166.         #toolbar-menubar[autohide="false"]>toolbaritem>menubar {
  167.             padding-inline-start: calc(var(--padding-left-tab) + 2px) !important;
  168.         }
  169.        
  170.         /* left margin of tabs-bar */
  171.        
  172.         #toolbar-menubar[autohide="true"]+#TabsToolbar,
  173.         :root:is([sizemode="fullscreen"]) #toolbar-menubar[autohide="false"]+#TabsToolbar {
  174.             padding-inline-start: var(--padding-left-tab, var(--my-vertical-toolbar-width)) !important;
  175.         }
  176.  
  177.         :root:not([chromehidden~="toolbar"]) {
  178.            
  179.             /* Menu button style and margins */
  180.            
  181.             & #PanelUI-menu-button {
  182.                 --toolbarbutton-hover-background: var(--toolbarbutton-hover-personal) !important;
  183.                 --toolbarbutton-border-radius: 0px !important;
  184.                 --toolbarbutton-outer-padding: 0px !important;
  185.                 --toolbar-start-end-padding: 0px !important;
  186.                 padding-block-start: var(--my-tab-margin-top, 0px) !important;
  187.             }
  188.            
  189.             /* Position */
  190.            
  191.             & #PanelUI-button {
  192.                 --toolbarbutton-active-background: color-mix(in srgb,var(--toolbarbutton-hover-personal)70%, transparent) !important;
  193.                 position: absolute;
  194.                 top: calc(0px - var(--tab-height-personal) - var(--menubar-height-personal, 0px)) !important;
  195.                 inset-inline-start: calc(-1*var(--my-elements-left-margin, 0px)) !important; /* not left for RTL languages */
  196.                 z-index: 5 !important;
  197.  
  198.                 /* Logo size */
  199.                 & .toolbarbutton-icon {
  200.                     transform: scale(1.2) !important;
  201.                 }
  202.                
  203.                 /* Logo image */
  204.                 & .toolbarbutton-badge-stack {
  205.                     list-style-image: url("../icons/foxmenu.svg") !important;
  206.                     display: inline-flex !important;
  207.                     height: var(--my-menu-button-height) !important;
  208.                     width: var(--my-menu-button-width, var(--padding-left-tab)) !important;
  209.                     fill: var(--general-color) !important;
  210.                     justify-content: center !important;
  211.                     align-items: center !important;
  212.                    
  213.                     /* Menú Label */
  214.                     &::after {
  215.                         content: var(--menu-label);
  216.                         font: menu !important;
  217.                         padding-inline-start: 8px;
  218.                         color: initial !important;
  219.                         text-shadow: none !important;
  220.                     }
  221.                 }
  222.             }    
  223.  
  224.             /* ___________ Rules for aligning icons in the hamburger menu */
  225.  
  226.             /* Margen nuevo solo al menu hamburguesa maximizado */
  227.  
  228.             &:not([sizemode="normal"]) #appMenu-popup {
  229.                 & :not(.panel-header, .toolbaritem-combined-buttons)>.subviewbutton>.toolbarbutton-icon {
  230.                     margin-inline: calc(var(--margin-left-icons-personal) - 4px) var(--margin-right-icons-personal) !important;
  231.                 }
  232.  
  233.                 & #appMenu-fxa-status2[fxastatus="signedin"] #appMenu-fxa-label2,
  234.                 & #fxa-manage-account-button,
  235.                 & #appMenu-zoom-controls,
  236.                 & #PanelUI-fxa-menu-syncnow-button{
  237.                     padding-inline-start: calc(var(--margin-left-icons-personal) + 4px) !important;
  238.                 }
  239.             }
  240.         }
  241.  
  242.         /* Update notification point */
  243.  
  244.         #PanelUI-menu-button>.toolbarbutton-badge-stack>.toolbarbutton-badge {
  245.             margin: -7px -3px 0px !important;
  246.             margin-inline-end: -9px !important;
  247.         }
  248.    
  249.         /* _______________________ Styles Menu[open] Popup _______________________ */
  250.  
  251.         :root:not([chromehidden~="toolbar"],[sizemode="normal"]) {
  252.            
  253.             /* Space for 'logo + menuLabel' inside popup */
  254.  
  255.             & #appMenu-popup panelview {
  256.                 padding-block-start: 40px !important;
  257.                 background: var(--my-popup-gradient-background) !important;
  258.             }
  259.  
  260.             /* Margins used to move up the menu dropdown when is 'open' */
  261.  
  262.             & #appMenu-popup {
  263.                 --my-menu-button-width: var(--padding-left-tab) !important;
  264.                 --panel-shadow-margin: 1px !important;
  265.                 --arrowpanel-border-radius: 0 8px 8px 8px !important;
  266.                 --panel-shadow: 0 0 0 1px var(--contrast-color) !important;
  267.                 --panel-border-color: var(--arrowpanel-border-color) !important;
  268.                
  269.                 /* Logo & Label 'menu' inside popup */
  270.                 &::before {
  271.                     content: url("../icons/fox-menu-open.svg") ' ' var(--menu-label);
  272.                     position: absolute;
  273.                     top: 24px;
  274.                     background: linear-gradient(to right, transparent calc(var(--padding-left-tab) + 20px), transparent calc(var(--padding-left-tab) + 20px), var(--button-hover-bgcolor) 85%);
  275.                     background-size: calc(100% - 8px) 1px;
  276.                     background-repeat: no-repeat !important;
  277.                     width: -moz-available;
  278.                     height: 1px !important;
  279.                     display: inline-flex !important;
  280.                     white-space: pre !important;                    
  281.                     -moz-context-properties: fill;
  282.                     fill: var(--general-color);                    
  283.                     inset-inline-start: calc(var(--margin-left-icons-personal) + 0px);
  284.                     color: var(--general-color);
  285.                     font-size: 1.8rem;
  286.                     text-transform: uppercase;
  287.                     font-family: "gamer";
  288.                     align-items: center !important;
  289.                 }
  290.  
  291.                 &:dir(rtl) {
  292.                     --arrowpanel-border-radius: 8px 0px 8px 8px !important;
  293.                     &::before {
  294.                         background: linear-gradient(to left, transparent calc(var(--padding-left-tab) + 50px), transparent calc(var(--padding-left-tab) + 50px), var(--button-hover-bgcolor) 100%);
  295.                         inset-inline-end: 8px !important;
  296.                     }
  297.                 }
  298.             }
  299.            
  300.             &:not([tabsintitlebar]) #appMenu-popup {
  301.                 margin-top: calc(0px - var(--my-menu-button-height) + var(--tab-block-margin)) !important;
  302.             }
  303.            
  304.             /* Menu popup width - maximized window */
  305.            
  306.             &:not([sizemode="normal"]) #appMenu-popup panelview {
  307.                 width: 28.5em !important;
  308.             }
  309.  
  310.             /* Gradient line over Account label only in maximized window */
  311.  
  312.             & #appMenu-fxa-status2 {
  313.                 padding-top: 4px !important;
  314.                 margin-inline-start: var(--margin-left-icons-personal) !important;
  315.                 border-top: 1px solid var(--panel-separator-color) !important;
  316.                 border-image: var(--panel-separator-zap-gradient5) 1 !important;
  317.             }
  318.  
  319.             & #appMenu-fxa-status2[fxastatus="signedin"] {
  320.                 padding-top: var(--panel-separator-margin-vertical) !important;
  321.                 margin-inline-start: 0px !important;
  322.             }
  323.            
  324.              & #appMenu-fxa-status2:not([fxastatus="signedin"]) {
  325.                 padding-inline-start: calc(var(--margin-left-icons-personal) + 2px) !important;
  326.                 margin-inline-start: 0px !important;
  327.             }
  328.         }
  329.     }
  330.    
  331.     /* Remove unwanted margin of menupopup just in linux */
  332.    
  333.     @media (-moz-platform: linux) {
  334.         :root:not([chromehidden~="toolbar"],[sizemode="normal"]) {
  335.             & #appMenu-popup {
  336.                 --removed-panel-shadow-margin: 0px !important;
  337.             }
  338.         }
  339.     }
  340.  
  341.     /* ____________________________________ margin left of 'Nav-bar' when using 'Left-Sidebar' or 'Firefox Sidebar' ______________________________________
  342.        ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ */
  343.  
  344.     /* 'Left-sidebar' without 'Sidebar revamp' */
  345.  
  346.     @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always') {
  347.  
  348.         :root:not([chromehidden~="toolbar"]) {
  349.            
  350.             /* New Menu height */
  351.            
  352.             --my-menu-button-height: var(--menubar-height-personal, var(--toolbar-height-personal)) !important;
  353.             --my-elements-left-margin: var(--padding-left-tab, var(--my-vertical-toolbar-width)) !important;
  354.         }
  355.        
  356.         /* Move tabsbar to the right */
  357.        
  358.         #toolbar-menubar[autohide="false"]+#TabsToolbar {
  359.             padding-inline-start: var(--my-elements-left-margin, 0px) !important;
  360.         }
  361.        
  362.         /* Move nav-bar buttons to the right */
  363.  
  364.         #nav-bar {
  365.             margin-inline-start: var(--my-elements-left-margin, 0px) !important;
  366.         }
  367.     }
  368.    
  369.     /* 'Sidebar revamp' without 'Left-sidebar' */
  370.    
  371.     @media (not -moz-pref("firefoxgx.left-sidebar")) and (-moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start")) {
  372.        
  373.         :root:not([chromehidden~="toolbar"],[customizing]):not(:has(#sidebar-main[hidden="true"],sidebar-main[hidden])) {
  374.             --my-menu-button-height: var(--menubar-height-personal, var(--toolbar-height-personal)) !important;     /* New Menu height */
  375.             --my-elements-left-margin: var(--padding-left-tab, var(--my-vertical-toolbar-width)) !important;
  376.         }
  377.        
  378.         /* Move nav-bar buttons to the right */
  379.  
  380.         #nav-bar {
  381.             margin-inline-start: var(--my-elements-left-margin, 0px) !important;
  382.         }
  383.     }
  384.  
  385. /* __________________________________________ Hamburger menu when using 'Left-sidebar' or 'Firefox Sidebar' __________________________________________
  386.    ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ */
  387.  
  388.     @media (-moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always')),
  389.            (-moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start")),
  390.            (-moz-pref("sidebar.verticalTabs") and -moz-pref("sidebar.position_start")) {
  391.        
  392.         :root:not([chromehidden~="toolbar"]) {
  393.             --padding-left-tab: calc(var(--my-vertical-toolbar-width) - 1px) !important;                        /* New size of the 'menu' button */
  394.             --margin-left-icons-personal: calc(var(--my-vertical-toolbar-width) / 2 - 14px) !important;         /* New margin-left for menu items */
  395.             --margin-right-icons-personal: 2px !important;                                                      /* New margin-right for menu items */
  396.         }
  397.        
  398.         @media (-moz-platform: windows), (-moz-platform: linux) {
  399.  
  400.             :root:not([chromehidden~="toolbar"]) {
  401.                
  402.                 /* Menu button when 'hover' */
  403.  
  404.                 & #PanelUI-menu-button {
  405.                     --toolbarbutton-hover-background: var(--button-smaller-bgcolor) !important;
  406.                 }
  407.  
  408.                 /* Remove 'menu' label */
  409.  
  410.                 & #PanelUI-menu-button .toolbarbutton-badge-stack::after {
  411.                     content: none !important;
  412.                 }
  413.  
  414.                 /* Centered and larger logo when the menu bar is not always active */
  415.  
  416.                 & #PanelUI-button .toolbarbutton-icon {
  417.                         transform: scale(1.5) !important;
  418.                     }
  419.                 }
  420.             }
  421.     }
  422.    
  423. /* ______________________________________________________ New menu style for 'oneline' config ______________________________________________________
  424.    _________________________________________________________________________________________________________________________________________________ */
  425.  
  426.     /*___________ Oneline general styles */
  427.  
  428.     @media -moz-pref("firefoxgx.oneline") {
  429.  
  430.         :root {
  431.             --margin-left-icons-personal: 6px !important;
  432.         }
  433.  
  434.         @media (-moz-platform: windows), (-moz-platform: linux) {
  435.  
  436.             @media screen and (min-width: 1000px) {
  437.                
  438.                 /* Remove menu label */
  439.                
  440.                 & #PanelUI-menu-button .toolbarbutton-badge-stack::after {
  441.                     content: none !important;
  442.                 }
  443.  
  444.                 /* left margin of menubar */
  445.  
  446.                 #toolbar-menubar[autohide="true"] {
  447.                     padding-inline-start: calc(var(--padding-left-tab) + 2px) !important;
  448.                     padding-top: var(--windowed-top-padding, 0px) !important;
  449.                 }
  450.  
  451.                 :root:not([chromehidden~="toolbar"]) {
  452.  
  453.                    /* position when: [normal] + small window width */
  454.  
  455.                     & #PanelUI-button {
  456.                         top: var(--windowed-top-padding, unset) !important;
  457.                         position: fixed !important;
  458.                         inset-inline-start: 0px !important;
  459.                     }
  460.                 }
  461.             }
  462.         }
  463.     }
  464.    
  465. /* ____________________________________________ Menu button in 'Firefox Vertical tabs' - 'Position start' ___________________________________________
  466.    __________________________________________________________________________________________________________________________________________________ */
  467.    
  468.    
  469.     @media -moz-pref("sidebar.verticalTabs") and -moz-pref("sidebar.position_start") {
  470.        
  471.         @media (-moz-platform: windows), (-moz-platform: linux) {
  472.            
  473.             :root:not([chromehidden~="toolbar"]) {
  474.  
  475.                 --my-menu-button-height: var(--toolbar-height-personal) !important;                                 /* New Menu height */
  476.                 --padding-left-tab: var(--my-vertical-elements-width) !important;                                   /* Menu with smaller */
  477.                 --margin-left-icons-personal: calc(var(--my-vertical-toolbar-width) / 2 - 14px) !important;         /* New margin-left for menu items */
  478.             }
  479.  
  480.             :root:not([chromehidden~="toolbar"]) {
  481.                
  482.                 /* Menubar margin left */
  483.                 #toolbar-menubar[autohide="true"]>toolbaritem>menubar {
  484.                     margin-inline-start: calc(var(--my-vertical-toolbar-width) + 2px) !important;
  485.                 }
  486.  
  487.                 & #PanelUI-button, #appMenu-popup  {
  488.                     top: calc(0px - var(--menubar-height-personal, 0px)) !important;
  489.                 }
  490.                
  491.                 & #PanelUI-button,
  492.                 & #appMenu-popup {
  493.                     --toolbarbutton-hover-personal: var(--button-bgcolor) !important;
  494.                     --my-menu-button-height: var(--toolbar-height-personal) !important;
  495.                 }
  496.             }
  497.            
  498.             /* Vertical-tabs hidden */
  499.            
  500.             :root:not([chromehidden~="toolbar"]):has(#sidebar-main[hidden="true"],sidebar-main[hidden]) {
  501.                
  502.                 #toolbar-menubar[autohide="true"] ~ #nav-bar {
  503.                     padding-inline-start: var(--my-vertical-elements-width) !important;
  504.                    
  505.                     @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always') {
  506.                         padding-inline-start: 0px !important;
  507.                     }
  508.                 }
  509.                
  510.                 #PanelUI-button,
  511.                 #appMenu-popup {
  512.                     --my-menu-button-height: var(--menubar-height-personal, var(--toolbar-height-personal)) !important;
  513.                 }
  514.             }
  515.         }
  516.  
  517.         /* 'Vertical tabs' + 'Left-sidebar' */
  518.  
  519.         @media -moz-pref("firefoxgx.left-sidebar") {
  520.  
  521.             @media (-moz-platform: windows), (-moz-platform: linux) {
  522.                
  523.                 @media not -moz-pref("browser.toolbars.bookmarks.visibility", 'always') {
  524.                    
  525.                     :root:not([chromehidden~="toolbar"]) {
  526.                        
  527.                         /* Navbar left-margin */
  528.                         #toolbar-menubar[autohide="true"] ~ #nav-bar {
  529.                             margin-inline-start: 0 !important;
  530.                             padding-inline-start: var(--padding-left-tab) !important;
  531.                         }
  532.  
  533.                         #PanelUI-button, #appMenu-popup  {
  534.                             --my-menu-button-height: var(--menubar-height-personal, var(--toolbar-height-personal)) !important;
  535.                         }
  536.                     }
  537.                 }
  538.             }
  539.         }
  540.     }
  541.    
  542. /* ________________________________________________________ 'Firefox vertical tabs' on right _______________________________________________________
  543.    _________________________________________________________________________________________________________________________________________________ */
  544.    
  545.     @media -moz-pref("sidebar.verticalTabs") and (not -moz-pref("sidebar.position_start")) {
  546.        
  547.         :root:not([chromehidden~="toolbar"]) {
  548.             --my-menu-button-height: var(--toolbar-height-personal) !important;                                 /* New Menu height */
  549.         }
  550.        
  551.         /* Menu space in the nav-bar */
  552.            
  553.         :root:not([chromehidden~="toolbar"]) #toolbar-menubar[autohide="true"] ~ #nav-bar {
  554.             --my-elements-left-margin: calc(var(--padding-left-tab,0px) + var(--uc-window-drag-space-pre, 0px)) !important;
  555.         }
  556.        
  557.         #nav-bar {
  558.             margin-inline-start: 0px !important;
  559.             padding-inline-start: var(--my-elements-left-margin) !important;
  560.            
  561.             @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always') {
  562.                 margin-inline-start: var(--my-elements-left-margin) !important;
  563.                 padding-inline-start: 0px !important;
  564.             }
  565.         }
  566.        
  567.         @media (-moz-platform: windows), (-moz-platform: linux) {
  568.             :root:not([chromehidden~="toolbar"]) {
  569.                
  570.                 /* Menu button display into nav-bar */
  571.                 #PanelUI-button {
  572.                     top: var(--windowed-top-padding, unset) !important;
  573.                     position: fixed !important;
  574.                     inset-inline-start: 0px !important;
  575.                 }
  576.             }
  577.         }
  578.     }
  579.  
  580.     /* ___________________________________________________ Menu when using 'tree-tabs' extensions ____________________________________________________
  581.        _______________________________________________________________________________________________________________________________________________ */
  582.  
  583.    
  584.     @media -moz-pref("firefoxgx.tree-tabs") {
  585.  
  586.         @media (-moz-platform: windows), (-moz-platform: linux) {
  587.  
  588.             :root:not([chromehidden~="toolbar"]) {
  589.  
  590.                 --my-menu-button-height: var(--menubar-height-personal, var(--toolbar-height-personal)) !important;     /* New Menu height */
  591.  
  592.                 /* Menubar on auto-hide */
  593.                 #toolbar-menubar[autohide="true"] {
  594.                     padding-inline-start: calc(var(--padding-left-tab) + 2px) !important;
  595.                    
  596.                     /* navbar margin when menu is on auto-hide */
  597.                     & ~ #nav-bar {
  598.                         padding-inline-start: var(--padding-left-tab) !important;
  599.  
  600.                        
  601.                         @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always'),
  602.                                -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  603.                             padding-inline-start: 0px !important;
  604.                         }
  605.                        
  606.                         /* 'Left-sidebar' on but hidden + 'Sidebar-revamp' */
  607.                         @media -moz-pref("firefoxgx.left-sidebar") and (not -moz-pref("browser.toolbars.bookmarks.visibility", 'always')) and
  608.                                -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  609.                             padding-inline-start: var(--my-vertical-elements-width, 41px) !important;
  610.                         }
  611.                     }
  612.                 }
  613.  
  614.                 /* Menu position */
  615.                 #PanelUI-button {
  616.                     top: 0px !important;
  617.                     position: fixed !important;
  618.                    
  619.                     /* Menu button when using 'Left-sidebar' */
  620.                     @media -moz-pref("firefoxgx.left-sidebar"), -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  621.                         top: calc(0px - var(--menubar-height-personal)) !important;
  622.                         position: absolute !important;
  623.                     }
  624.                    
  625.                     /* menu button when using 'expand-on-hover' */
  626.                     @media -moz-pref("firefoxgx.verticalTabs-expandOnHover") {
  627.                         inset-inline-start: 0 !important;
  628.                        
  629.                         /* Larger menu icon */
  630.                         .toolbarbutton-icon {
  631.                             transform: scale(1.5) !important;
  632.                         }
  633.                     }
  634.                 }
  635.                
  636.                 /* Tree-tabs with 'expand-on-hover' */
  637.                
  638.                 @media -moz-pref("firefoxgx.verticalTabs-expandOnHover") {
  639.                    
  640.                     --my-menu-button-width: var(--my-vertical-elements-width) !important;  
  641.                     --padding-left-tab: var(--my-menu-button-width) !important;
  642.                        
  643.                    
  644.                     & #PanelUI-menu-button .toolbarbutton-badge-stack::after {
  645.                         content: none !important;
  646.                     }
  647.                    
  648.                     #PanelUI-button {
  649.                        
  650.                         /* Menu button when 'expand-on-hover' + 'left-sidebar' */
  651.                         @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always'),
  652.                         -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  653.                             position: absolute !important;
  654.                             inset-inline-start: calc(0px - var(--my-elements-left-magin, var(--padding-left-tab))) !important;
  655.                         }
  656.                        
  657.                         /* Menu button when 'left-sidebar' on but hidden + 'sidebar-revamp' */
  658.                         @media -moz-pref("firefoxgx.left-sidebar") and (not -moz-pref("browser.toolbars.bookmarks.visibility", 'always')) and
  659.                         -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  660.                             inset-inline-start: 0 !important;
  661.                         }
  662.                     }
  663.                    
  664.                     /* Menubar when is always active */
  665.                     #toolbar-menubar[autohide="false"] {
  666.  
  667.                         /* navbar margin when menu is always visible */
  668.                         & ~ #nav-bar {
  669.                             padding-inline-start: var(--padding-left-tab) !important;
  670.  
  671.                             @media -moz-pref("firefoxgx.left-sidebar") and -moz-pref("browser.toolbars.bookmarks.visibility", 'always'),
  672.                                    -moz-pref("sidebar.revamp") and -moz-pref("sidebar.position_start") {
  673.                                 padding-inline-start: 0px !important;
  674.                             }
  675.                         }
  676.                     }
  677.                 }
  678.             }
  679.         }
  680.     }
  681. }
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!