.css für neues Erweiterungsmenü

Hallo,

ich habe folgenden Code für das Hamburger Menü in Verwendung:

/********************* Hamburger Menü********************************************/


/*Größe des Panels*/


/*Abstände in Einstellungsmenüleiste verringern*/


.subviewbutton:not(#appMenu-fxa-status2) {
--arrowpanel-menuitem-padding: 0 !important;
--arrowpanel-menuitem-margin: 0 !important;
padding-left: 10px!important;
font-size: 12px !important;
min-height: 22px !important;
max-height: 22px !important;
}


#appMenu-fxa-status2 {
font-size: 12px !important;
}
#appMenu-protonMainView > vbox:nth-child(1) > toolbarseparator:nth-child(n+1) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}


/*Schrift- und Hintergrundfarbe*/




/*Schrift und Hintergrund*/


#appMenu-mainView toolbarbutton,
#appMenu-mainView .toolbaritem-combined-buttons,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
background-color: #00016E !important;
color: white !important;
}




/*Schriftfarbe von Einträgen mittig in Untermenüs*/


.subview-subheader {
font-size: inherit;
font-weight: inherit;
color: white !important;
}




/*Farbe in header und footer*/


#appMenu-popup panelview, #PanelUI-fxa {
width: 22.5em;
background-color: #00016E !important;
color: white !important;
}


/*Hover*/


/* Hover Schrift und Hintergrund Hamburger Menü */


#appMenu-mainView toolbarbutton:hover,
#appMenu-mainView .toolbaritem-combined-buttons:hover,
.subviewbutton:hover,
.widget-overflow-list .toolbarbutton-1:hover {
background-color: #F0F0F0 !important;
color: black !important;
}

Jetzt habe ich das Problem, dass sich dieser Code auch auf das neue Erweiterungsmenü auswirkt. Besonders nervig ist hierbei, dass ich die Zeilenabstände im Hamburger Menü verkleinert habe und bei mir nun auch das Erweiterungsmenü "zusammengestaucht" ist. D.h. ich sehe dort nicht mehr alles. Wie bekomme ich das (=neues Erweiterungsmenü) wieder auf Normalgröße?

2. Für das Erweiterungsmenü habe ich folgenden Code zusammengebastelt:

/* Erweiterungsmenü */


#unified-extensions-view .panel-header {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--arrowpanel-menuitem-margin-inline);
min-height: var(--arrowpanel-header-height);
background-color: #00016e !important;
border-color: #00016e !important;
color: #fff !important;
}


.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton {
border: 0;
margin: 0;
-moz-box-flex: 1;
padding-block: var(--arrowpanel-menuitem-padding-block);
-moz-box-orient: horizontal;
color: #fff !important;
background-color: #00016e !important;
}


.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:hover {
border: 0;
margin: 0;
-moz-box-flex: 1;
padding-block: var(--arrowpanel-menuitem-padding-block);
-moz-box-orient: horizontal;
color: #fff !important;
background-color: #1f2080 !important;
}


#newtaboverride_agenedia_com-browser-action #wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls, #wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
margin: var(--arrowpanel-menuitem-margin);
color: #fff !important;
background-color: #00016e !important;
}


.cui-widget-panelview {
-moz-box-orient: vertical;
background: #00016e !important;
padding: 0;
color: #fff !important;
}

Was muss ich hier ändern, damit auch die Schrift, die aktuell noch Schwarz ist, auch noch weiß wird?

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Was muss ich hier ändern

Meinst du das so?

dann habe ich das Hamburger-Menü mal verändert.

Teste bitte mal.

CSS

/********************* Hamburger Menü********************************************/


/*Größe des Panels*/


/*Abstände in Einstellungsmenüleiste verringern*/


#appMenu-popup .subviewbutton:not(#appMenu-fxa-status2) {
--arrowpanel-menuitem-padding: 0 !important;
--arrowpanel-menuitem-margin: 0 !important;
padding-left: 10px!important;
font-size: 12px !important;
min-height: 22px !important;
max-height: 22px !important;
}


#appMenu-fxa-status2 {
font-size: 12px !important;
}
#appMenu-protonMainView > vbox:nth-child(1) > toolbarseparator:nth-child(n+1) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}


/*Schrift- und Hintergrundfarbe*/




/*Schrift und Hintergrund*/


#appMenu-popup toolbarbutton,
#appMenu-popup .toolbaritem-combined-buttons,
#appMenu-popup .subviewbutton,
#appMenu-popup .widget-overflow-list .toolbarbutton-1 {
background-color: #00016E !important;
color: white !important;
}




/*Schriftfarbe von Einträgen mittig in Untermenüs*/


#appMenu-popup .subview-subheader {
font-size: inherit;
font-weight: inherit;
color: white !important;
}




/*Farbe in header und footer*/


#appMenu-popup panelview, #PanelUI-fxa {
width: 22.5em;
background-color: #00016E !important;
color: white !important;
}


/*Hover*/


/* Hover Schrift und Hintergrund Hamburger Menü */


#appMenu-mainView toolbarbutton:hover,
#appMenu-mainView .toolbaritem-combined-buttons:hover,
#appMenu-multiView .subviewbutton:hover,
#appMenu-multiView .widget-overflow-list .toolbarbutton-1:hover {
background-color: #F0F0F0 !important;
color: black !important;
}

Alles anzeigen

Danke, das passt. Punkt 1 meiner Frage ist nun erledigt. Was hast du in dem Code jetzt geändert?

Im Erweiterungsmenü ist bei dir nur der Name der Erweiterung in weißer Schrift. Hast du eine Idee, wie man den Text darunter auch weiß bekommt? So ist er nur schwer zu lesen.

Zitat von Sören Hentzschel

Zitat von 2002Andreas

Teilweise braucht es 2 Einträge dafür:

Es gibt insgesamt sieben: origin-controls-state-no-access, origin-controls-state-always-on, origin-controls-state-when-clicked, origin-controls-state-hover-run-visit-only, origin-controls-state-runnable-hover-run, origin-controls-state-runnable-hover-open, origin-controls-state-temporary-access.

Wieso nicht einfach die CSS-Klasse ansprechen?

CSS

.unified-extensions-item-message {
  color: orange !important;
}

Danke. Jetzt passt das auch.