Fenster unter Firefox-Suchfeld mit einer anderen Rahmenfarbe versehen und nicht mit so stark abgerundeten Ecken

Mr. Cutty

Tippe ich im Firefox-Suchfeld was ein, erscheint ja darunter, mit etwas Abstand, ein extra Fenster, entweder mit (bereits gesuchten) Vorschlägen oder einfach nur mit "Suchen mit Google" wenn noch nicht danach darüber gesucht wurde (bei mir jedenfalls).

Das extra Fenster unter dem Suchfeld möchte ich gerne auch mit einem blauen Rand versehen, statt dem gräulichen und die Ecken sollen nicht so stark abgerundet sein.

Was müsste ich da in der userChrome.css einfügen? Danke.

2002Andreas

Zitat von Mr. Cutty

Was müsste ich da in der userChrome.css einfügen?

Meinst du das so?

Wenn ja, dann teste bitte mal:

CSS

#urlbar:is([focused="true"], [open]) > #urlbar-background {
  border: 4px solid blue !important;
  border-radius: 0px !important;
}

Mr. Cutty

Nur halt nicht in der Urlbar. Sondern daneben in der Suche das extra erscheinende Fenster/Pop-Up darunter.

Dharkness

Zitat von Mr. Cutty

Sondern daneben in der Suche das extra erscheinende Fenster/Pop-Up darunter.

Das sollte dann das ↓ sein.

CSS

#PopupSearchAutoComplete {
  border-radius: 0 !important;
  border: 2px solid #0082FC !important;
}

2002Andreas

Oder auch so:

CSS

#PopupSearchAutoComplete {
  --panel-border-color: blue !important;
  --panel-border-radius: 0 !important;
}

Mr. Cutty

Zitat von Dharkness
Zitat von Mr. Cutty

Sondern daneben in der Suche das extra erscheinende Fenster/Pop-Up darunter.

Das sollte dann das ↓ sein.
CSS
#PopupSearchAutoComplete {
  border-radius: 0 !important;
  border: 2px solid #0082FC !important;
}

Das sieht dann so aus:

Zitat von 2002Andreas

Oder auch so:

CSS

#PopupSearchAutoComplete {
  --panel-border-color: blue !important;
  --panel-border-radius: 0 !important;
}

Und das so:

Dharkness

Zitat von Mr. Cutty

Das sieht dann so aus:

Ups,

füge bitte das ↓ dazu.

CSS

#PopupSearchAutoComplete .autocomplete-richlistbox.search-panel-tree {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

Mr. Cutty

Sieht dann aber immer noch so aus wie in #6.

Dharkness

Zitat von Mr. Cutty

Sieht dann aber immer noch so aus wie in #6.

Verwendest Du Javascripts?

2002Andreas

Zitat von Mr. Cutty

Sieht dann aber

CSS

#PopupSearchAutoComplete::part(content) {
    border: 3px solid blue!important;
    --panel-border-radius: 0 !important;
}

Der Code funktioniert nur in der shadow.css und nicht der userChrome.css.

Dharkness

Zitat von 2002Andreas

Der Code funktioniert nur in der shadow.css und nicht der userChrome.css.

Genau darauf wollte ich hinaus.

Mr. Cutty

shadow.css? Wo lege ich die an?

Ich verwende keine JavaScripts.

Ich hatte ja schon ein CSS-Schnipsel verwendet und bis vor ein paar Versionen, bis 103 denke ich war es, hat es ja funktioniert, bis dann wohl in Firefox was geändert wurde und es dann mit den weiten Außenrahmen wie in #6 gepostet, ausgesehen hat.

2002Andreas

Zitat von Mr. Cutty

Ich verwende keine JavaScripts.

Dann kannst du die shadow.css leider nicht nutzen.

Mr. Cutty

Es gibt wirklich keine reine css-Lösung mehr?

2002Andreas

Zitat von Mr. Cutty

Es gibt wirklich keine reine css-Lösung mehr?

Mir zumindest nicht bekannt.

Endor

Müsste es eigentlich nicht über die UserChromeShadow.css Datei

funktionieren? Oder braucht es dazu auch das entsprechende Script zum laden?

Was die Shadow.css betrifft blicke ich noch nicht ganz durch.

Mfg.
Endor

2002Andreas

Zitat von Endor

Oder braucht es dazu auch das entsprechende Script zum laden?

Ja.

Du brauchst das Script, und die Datei dazu.

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

Zitat von Mr. Cutty

bis vor ein paar Versionen, bis 103 denke ich

ESR 91, da hat es noch funktioniert:

Endor

Hallo 2002Andreas.

Vielen Dank.

Wieder etwas dazu gelernt.

Mfg.
Endor

Mr. Cutty

Habe jetzt das mit JavaScript versucht, wie in #17 verlinkt und die CSS wie in #10 in die userChromeShadow.css eingetragen. Aber keine Wirkung.

2002Andreas

Zitat von Mr. Cutty

Habe jetzt das mit JavaScript versucht

Du hast auch die allgemeinen Anpassungen zur Nutzung von Scripten gemacht?