Advertisement
GodieGun

ogx_hamburger-menu.css

Jul 5th, 2025
252
0
4 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 30.67 KB | None | 0 0
  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