störender Rand in Popup-Menü

gabinski

Hallo zusammen,

ich habe mal wieder ein optisches Problem nach dem letzten Update. Die Popup-Menüs stellen sich bei mir mit einem merkwürdigen Rand dar.

Kann mir jemand beim Aufhübschen behilflich sein? Ich würde diesen Rand gerne mit der Hintergrundfarbe des Popups füllen.

Mein bisheriger css.Code für die Popups:

CSS

#context-navigation {
  margin-bottom: -4px !important;
}

menuseparator {
   margin: 0px 0em !important;  
}

menupopup {
  --panel-background: none !important;
  --panel-padding: 1px 0 !important;
}

menupopup >  menu,
menupopup menuitem {
  color: #000000 !important;
  background: #f0f0f0!important;
}

menupopup menuitem:hover,
menupopup menu:hover {
  background: #c6e2ff !important;
  color: #000000 !important;
}

Alles anzeigen

Mira_Belle

Zitat von gabinski

Mein bisheriger css.Code für die Popups:
...

Das kann aber nicht Dein ganzer Code sein!

Denn das ...

CSS

#context-navigation {
margin-bottom: -4px !important;
}


menuseparator {
margin: 0px 0em !important;
}


menupopup {
--panel-background: none !important;
--panel-padding: 1px 0 !important;
}


menupopup >  menu,
menupopup menuitem {
color: red !important;
background: blueviolet!important;
}


menupopup menuitem:hover,
menupopup menu:hover {
background: green !important;
color: yellow !important;
}

Alles anzeigen

... wird bei mir so ...

... dargestellt.

gabinski

Es geht nur um die Lesezeichen-Symbolleiste und dort um die von mir angelegten Ordner.

Wenn ich einen anklicke und das entsprechende Popup sich öffnet, ist dieser Rand zu sehen - wie im Bild oben.

Mit dem Code (war ursprünglich von 2002Andreas) hat meine Hintergrundfarbe bisher das ganze Popup gefüllt, jetzt offensichtlich nicht mehr. Leider bin ich überhaupt nicht fit im Erstellen/Verändern der css Codes , sonst würde ich es selbst probieren.

grisu2099

Trotzdem immer den kompletten Code einstellen - wer weiß, was da sonst noch mit reinspielt...

2002Andreas

Zitat von gabinski

das entsprechende Popup sich öffnet, ist dieser Rand zu sehen

Du brauchst erstmal diesen Code in der userChrome.css

CSS

menupopup {
   --panel-border-color: none !important;
}

Dann brauchst du noch diesen Code:

CSS

menupopup::part(arrowscrollbox) {
  background-color: #f0f0f0 !important;
}

Der kommt aber nicht in die userChrome.css Datei.

Dafür musst du erst eine Vorbereitung treffen, die hier beschrieben wird:

Beitrag

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie @aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und @2002Andreas , @Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!

Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

Bei diesen Elementen…

BrokenHeart

18. Juni 2021 um 09:36

Nutzt du schon .uc.js Skripte?

Wenn nicht, dann musst du vorher noch das machen:

Beitrag

Funktionelle Änderungen am Firefox durch Skripte

Als Ersatz für einige Erweiterungen bzw. Funktionen daraus kann man auch diverse Skripte benutzen.

( damit sind nicht optische Änderungen am Firefox gemeint)

Diese werden mit einer userChrome.css Datei erstellt.

Skripte werden als .uc.js Datei im Unterordner chrome gespeichert.

Hinweis:

Alle Skripte müssen in der Kodierung UTF-8 gespeichert werden.

Bei Notepad++ sieht das dann so aus:

camp-firefox.de/attachment/32977/

Und so im Texteditor von Windows:

camp-firefox.de/attachment/32978/

Besonderer Dank…

2002Andreas

15. November 2017 um 16:49

Und wenn du das alles gemacht hast, dann sieht das Popup so aus:

gabinski

Zitat von 2002Andreas

Nutzt du schon .uc.js Skripte?

Ja, nutze ich. Ich setz das gleich mal um und schau, was passiert

2002Andreas

Zitat von gabinski

und schau, was passiert

Ich hoffe, es ist dann so wie von dir gewünscht.

gabinski

Zitat
Du brauchst erstmal diesen Code in der userChrome.css

CSS
CSS
menupopup {   --panel-border-color: none !important;
}
Den kann ich aber in meine css zusätzlich einfügen, oder?

2002Andreas

Der kann da ganz normal mit rein.

gabinski

Zitat von 2002Andreas

Ich hoffe, es ist dann so wie von dir gewünscht.

Fast! Was mich irritiert, sind die Einkerbungen am Ende der jeweiligen Zeile - die waren in meinem Bild oben auch schon zu sehen.

Kann man da noch was machen?

2002Andreas

Zitat von gabinski

Mein bisheriger css.Code für die Popups:

Teste bitte mal diesen ganz normalen kompl. CSS Code in deiner userChrome.css Datei.

Evtl. brauchst du das andere Skript dann nicht.

CSS

#context-navigation {
  margin-bottom: -4px !important;
}

menuseparator {
   margin: 0px 0em !important;  
}

menupopup {
  --panel-background: #f0f0f0 !important;
  --panel-border-color: #f0f0f0 !important;
  --panel-padding: 1px 0 !important;
}

menupopup >  menu,
menupopup menuitem {
  color: #000000 !important;
  background: #f0f0f0!important;
}

menupopup menuitem:hover,
menupopup menu:hover {
  background: #c6e2ff !important;
  color: #000000 !important;
}

Alles anzeigen

Zitat von gabinski

Kann man da noch was machen?

Die habe ich hier nicht.

Evtl. funkt dir da ein anderer Code dazwischen

So sieht das hier mit dem normalen CSS Code aus:

Du kannst natürlich den Shadowcode auch nutzen dafür.

gabinski

Zitat von 2002Andreas

Teste bitte mal diesen ganz normalen kompl. CSS Code in deiner userChrome.css Datei.
Evtl. brauchst du das andere Skript dann nicht.

Genau das wars, jetzt ist alles schick und ohne die Einkerbungen am Ende!

Du bist ein Engel, danke Dir!!

2002Andreas

Zitat von gabinski

Du bist ein Engel, danke Dir!!

Danke

Freut mich wenn ich dir damit helfen konnte, war gern geschehen.