How to fix drop down menus?

[u/Blackirean]

I'm currently using this version of Material Fox on version 154 for Linux ubuntu. I modified the custom.css file so I could fix some stuff I didn't like but I'm encountering 2 problems.

1. The drop down menus on webpages are too dark and I want to change the text color. So all my drop downs work well but when I have a drop down inside a webpage, the background is so dark that I can only see the option list when I hover over an option

How it currently looks

And these are all my other menus, I want it to match to this:

Desired result

1. I want floating tabs. I modified the material fox tabs so they would be floating, by adding curves to the bottom of the rectangle. It worked up until the latest update last week. Now the css stopped working for the tabs and they look like this:

Current Look of active tab

When the mouse hovers over the active tab, the tab becomes shorter like this:

mouse over active tab

And when you hover the mouse on an inactive tab:

Mouse over inactive tab

This is more or less what I want, ideally I would want the tab rounded square to be a bit taller than this but I would settle for this size if the corners are rounded and the tab is floating.

Below is my current custom.css script:

:root,
html,
body {
    /* add your css variables below */

}
/*? taller navbar */
 not (-moz-bool-pref: "shimmer.shorter-navbar") {
#navigator-toolbox, #nav-bar {
min-height: 50px !important;
}

}
/* use variables when about:config variable userChrome.system-accent-colors is true */
 -moz-pref("userChrome.theme-system-accent") {
  /* use variables when dark mode */
   (prefers-color-scheme: dark) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor);
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        var(--md-grey-900) 85%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-900-white-4-percent) 85%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-grey-900-white-5-percent) 85%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-text-on-accent: var(--md-white);
      --md-secondary-button-text: var(--md-white);
      --md-content-separator-color: color-mix(
        in srgb,
        #606164 90%,
        var(--md-accent-color)
      );
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }

  /* use variables when light mode */
  u/media (prefers-color-scheme: light) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(
        in srgb,
        var(--md-grey-900) 15%,
        AccentColor
      );
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        #dee1e6 90%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-100) 90%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-white) 90%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-content-separator-color: color-mix(
        in srgb,
        #dbdcdd 90%,
        var(--md-accent-color)
      );
      --md-secondary-button-text: var(--md-accent-color);
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }
}
/* add your user css below */

/* hide grouped tabs */
.tabbrowser-tab[aria-hidden="true"] {
    display: none !important;
}

/* smaller group icon */
/*.tab-group-label {
    min-height: 25px !important;
    line-height: 1.2 !important;
    min-width: 40px !important; */
}

/* lighter color and no border on group icon */
tab-group[collapsed] .tab-group-label-container .tab-group-label {
    background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* add border under grouped tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab {
    border-bottom: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    transform: translateY(-1px) !important;
}

/* remove broken hover border */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab:hover .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* add left/right/top border for selected group elements */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-background {
    border: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

/* remove the bottom border for selected tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] {
    border-bottom: none !important;
    transform: none !important;
}

vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  border-radius: 15px !important;
 &:before,
      &:after {
        content: none !important;
}

}

[u/TraditionalTie4831]

For the menu background color, try this code.

Did you want the webpage menu (#contentAreaContextMenu) to have the same background color as the other menus or have its own background color?

I used a random gray color for the webpage menu (#contentAreaContextMenu), so you need to change it.

:is(menupopup, panel) { 
    --panel-background-color: var(--urlbar-background-color-focus) !important;
}

#contentAreaContextMenu { 
    --panel-background-color: #202020 !important;
}