CSS Help after Proton Changes

[meeshymee]

It took years to customize my CSS and as soon as Proton 92 came the bookmarks and context menus look one way and the menu for bookmark folders in toolbar look another and I'm not sure why because they used to look the same and I haven't changed the code.

Can anyone help? I'm not very skilled with HTML or any coding and that's why I was upset because it took a long time to get it the way I wanted but I'm not skilled enough to really make changes.

After Proton 92 I added code to remove floating tabs and condense the bookmark lists but the rest remained the same.

*The context menu and menu for bookmarks has a hairline white border around it (unintentional but I like it) and the toolbar menu doesn't.

*The context menu and menu for bookmarks have white separator lines (This is how it looked before Proton 92 also) but the toolbar menu separator lines are grey.

*The arrows in the bookmark menu are filled-in tiny triangles and the arrows in toolbar menu are not (I never put code for either but prefer the bookmark menu version).

*I added code to condense the bookmarks as they were before proton 92 but it seems to only work for the toolbar menu.

I basically want everything to look the way the context and bookmark menu looks except the condensing which isn't working on those.

ANY help would be appreciated!

My current CSS sheet looks like this:

/* panel background */
*|*:root{
--arrowpanel-background: #e9dcb4 !important;
}


/* menu background */
menupopup{
--panel-background: #e9dcb4 !important;
}

menupopup > menu, menupopup > menuitem {
padding-block: 2px !important;
min-height: 0px !important;
}

:root {
--arrowpanel-menuitem-padding: 2px !important;
}


@import url(userChrome_Fx56_bookmark_icons.css);

/* Standard folder -- on Toolbar and Menus */
#PlacesToolbarItems toolbarbutton[container="true"] > .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
:-moz-any(
#PlacesToolbarItems,
#PlacesChevronPopup,
#BMB_bookmarksPopup,
#bookmarksMenu) menu[container="true"]:not([tagContainer="true"]) > .menu-iconic-left,
/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */
:-moz-any(
#bookmarks-view,
#editBMPanel_folderTree,
#placesList) treechildren::-moz-tree-image(container),
#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
#editBMPanel_folderMenuList menupopup menuitem {
list-style-image: url(Fx56-yellow-folder.png) !important;
}
.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;

width: 100% !important;
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: unset !important;
padding-inline: unset !important;
transition: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
animation: none !important;
}
/* REMOVE MEGABAR END */

[DSperber]

Look at this other thread. See if it addresses at least some/most of your requests.

[limp]

The code below will give your menus a consistent dark appearance in Firefox 89+. Change the property values to suit yourself.

Code: Select all

/* MENUS */

/* Menu background color */

   .menupopup-arrowscrollbox
     { background-color: #111 !important; }

/* Menu text color */

   menupopup:not(.in-menulist) > menu,
   menupopup:not(.in-menulist) > menuitem
     { color: #eee !important; }

/* Menu group separators */

   menuseparator, toolbarseparator
     { border-width: 1px !important;
       border-color: #666 !important; }

/* Vertical distance between menu items */

   menupopup > menu, menupopup > menuitem,
   .subviewbutton, .subviewbutton-nav
     { padding-top: 2.5px !important;
       padding-bottom: 2.5px !important; }

/* Menu mouseover behavior */

   menupopup:not(.in-menulist) > menu:hover,
   menupopup:not(.in-menulist) > menuitem:hover,
   .subviewbutton:hover,
   .subviewbutton-nav:hover
     { background-color: #42414d !important;
       font-weight: bold !important; }

/* DOWNLOADS MENU */

/* Downloads menu background and text color */

   #downloadsPanel-mainView
     { background-color: #111 !important;
       color: #eee !important; }

/* Downloads menu items background */

   #downloadsPanel-mainView .download-state
     { background: transparent !important; }

/* Mouseover behavior */

   #downloadsPanel-mainView .download-state:hover,
   #downloadsHistory:hover
     { background-color: #42414d !important;
       font-weight: bold !important ; }

/* HAMBURGER MENU */

/* Background and text color */

   #appMenu-multiView panelview
     { background-color: #111 !important;
       color: #eee !important; }

/* Separators */

   #appMenu-fxa-separator
     { filter: grayscale(100%) brightness(75%); }

   #appmenu-moreTools toolbarseparator
     { margin: 0 !important; }

/* SIDEBAR MENU */

/* Sidebar menu background and text color */

   .panel-arrowcontainer slot
     { background-color: #111 !important;
       color: #eee !important; }

/* Sidebar menu mouseover behavior */

   #sidebarMenu-popup toolbarbutton:hover
     { background-color: #42414d !important;
       font-weight: bold !important; }

[dickvl]

Note that there are also CSS variables that can possibly be used in case of Shadow DOM.
https://searchfox.org/mozilla-release/s ... ound&path=
https://searchfox.org/mozilla-release/s ... lor:&path=
https://searchfox.org/mozilla-release/s ... ound&path=
https://searchfox.org/mozilla-release/s ... olor&path=

[meeshymee]

limp: can you explain what you mean with the suggestions? I'm confused because I see things for text (which I don;t have a problem with) and background colour (which I have set to be a colour I chose) and mouseover.. I'd like to understand what these will do..

I do see code for separator but what I don't understand is if I don't currently have code related to separator, why it's two diff. colours.. but if I add that part will they all be white?

I appreciate the replies but am not very CSS skilled so I want to understand.

Thank you.

[limp]

The easiest way to understand what these suggestions mean is to try 'em out. Enclose your code in comment marks (/* ... */) and paste the code above into your userChrome.css file. Your menus will be near-black with white text, the separators will be gray, and the color of each menu item when the mouse hovers over it will be dark blue-gray. You can change all of these colors by changing the property values.

[meeshymee]

Hello,

Thank you for the help. Someone kindly gave me code that worked to make the toolbar menu separators the same white as the bookmark menu (though I never had code to make the separator white in the first place so I'm not sure why this happened after only the newest proton update) but everyone seems baffled as to how I have solid traingle arrows on one menu and mot the other but I can live with it.

Thank you so much.