Unterschiedliche Hoverfarben Maus und Tastatur URL- und Searchbar Dropdown

testerer

Hallo,

ich habe mittlerweile so viel Code in meiner userChrome.css, dass ich nicht mehr so recht durchblicke.
Mein Problem ist, dass ich in der URL Dropdown Bar und außerdem in der Search Dropdownbar mit vorherigen Suchergebnissen für den Hovereffekt bei Maus und Tastatur unterschiedliche Farben habe (siehe Bild).

Wie kann ich die angleichen? Kann jemand die Färbebefehle für den Hovereffekt sowohl für Maus als auch Tastatur für das URL Dropdown Bar und Search Dropdownbar posten?

Ich benutze bislang auf jeden Fall diesen Code für den Hovereffekt mit der Maus im URL Dropdown Menü:

CSS

#PopupAutoCompleteRichResult .autocomplete-richlistitem:hover{-moz-appearance: none !important; background: #f2f2f2 !important; }
#PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]:hover { -moz-appearance: none !important; border: none !important; background: #f2f2f2 !important;}
#PopupAutoCompleteRichResult .autocomplete-richlistitem[type="tag"]:hover { -moz-appearance: none !important; border: none !important; background: #f2f2f2 !important;}

Bei der Searchbar habe ich nur einen Hovereffekt mit Tastatur gefunden, Maus habe ich gar keinen (siehe Bild).

Im ersten Bild bin ich mit der Pfeiltaste nach unten auf den ersten Eintrag und mit der Maus auf den zweiten (weiß).
Im zweiten Bild bin ich mit der Pfeiltaste nach unten auf den zweiten Eintrag (weiß) und mit der Maus auf den ersten.

AngelOfDarkness

Zitat von testerer

ich habe mittlerweile so viel Code in meiner userChrome.css, dass ich nicht mehr so recht durchblicke.

Dann lagerte die einzelnen Codes doch als jeweils eigene .css-Dateien aus, mit einem bezeichnenden Namen. Dann einfach nur in der userChrome.css den jeweiligen @import Befehl nutzen für die .css-Dateien.

Boersenfeger

Ergänzend:
Es geht auch noch anders...
Im Ordner chrome kommen die uc.js-Scripte, darunter auch eine userChrome.js mit folgendem Inhalt:

Code

// userChrome.js
userChrome.ignoreCache = true;
userChrome.import("*", "UChrm");

Ferner ein Ordner "CSS", dort hinein kommen alle .css-Dateien.
Zusätzlich zu evtl. anderen uc.js-Scripte empfehle ich das Script
UserCSSLoader.uc.js
https://github.com/ardiman/userCh…r/usercssloader
Damit kann dann die Auswirkung geänderter CSS-Codes sofort ohne Neustart überprüft werden...
Eine userChrome.css ist so nicht mehr notwendig.

milupo

Zum Auslagern von CSS-Dateien siehe diesen Beitrag https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=127243. Und dort unter 3. Verbesserungsvorschlag: CSS-Code in andere CSS-Dateien auslagern

Boersenfeger

// ui, tolle Anleitung.. :klasse:
Allerdings benötige ich weder eine userChrome.css noch eine userContent.css-Datei...
Alle CSS-Codes sind einzeln, wie erwähnt, im Chrome-Unterordner "CSS" abgelegt und werden auch ordnungsgemäß geladen...
[attachment=1]Chrome-Ordner.JPG[/attachment]
[attachment=0]CSS-Unterordner.JPG[/attachment]

milupo

Zitat von Boersenfeger

// ui, tolle Anleitung.. :klasse:

Hast du die nicht gekannt? Und wie lässt sich dann dieser Beitrag von dir erklären?

Zitat

Allerdings benötige ich weder eine userChrome.css noch eine userContent.css-Datei...
Alle CSS-Codes sind einzeln, wie erwähnt, im Chrome-Unterordner "CSS" abgelegt und werden auch ordnungsgemäß geladen...

Dafür muss er dann aber die Vorbereitung für die Verwendung von Skripten treffen. Wenn er das bereits getan hat, ist das dann natürlich kein Problem.

2002Andreas

Zitat von milupo

Dafür muss er dann aber die Vorbereitung für die Verwendung von Skripten treffen.

Und hat keine Garantie bis wann Scripte im Fx überhaupt genutzt werden können. :wink:

Und ist abhängig davon, dass das Script immer funktioniert.

macko

Zitat von testerer

Ich benutze bislang auf jeden Fall diesen Code für den Hovereffekt mit der Maus im URL Dropdown Menü:

Ersetze bitte einmal deinen Code mit folgendem CSS-Code, welches beide Dropdown-Hervorhebungsfarben abdeckt (auch die, die mittels der Tastatur ausgewählt):

CSS

.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected] {
  background-color: #d1cdc8 !important;
}

Hab hier einen anderen Farbcode als #f2f2f2 gewählt, da dieser Farbwert im eigentlichen deiner Hintergrundfarbe des Autovervollständigungspopups entsprechen würde. (kannst ja deine gewünschte Farbe einsetzen)

Zitat von testerer

Im ersten Bild bin ich mit der Pfeiltaste nach unten auf den ersten Eintrag und mit der Maus auf den zweiten (weiß).

Als kleine Nebenbemerkung: Bei deinem Screenshot wird augenscheinlich deine gesetzte Hoverfarbe nicht angewendet, denn der Farbwert #f2f2f2 würde ja der Hintergrundfarbe (sehr helles Grau) von der Zeile "Mit Google suchen" entsprechen.
Ich nehme einmal an, dies hat mit deinem verwendeten Theme zu tun, welche unter anderem auch die Autovervollständigungspopups farblich anpassen. (mein geposteter Code sollte die Hoverfarben aber dennoch überschreiben.)

Zitat von Boersenfeger

Damit kann dann die Auswirkung geänderter CSS-Codes sofort ohne Neustart überprüft werden...

Dies ist auch mittels den Entwicklerwerkzeugen/Browser-Werkzeuge und deren Stilbearbeitung möglich.

Boersenfeger

Zitat von milupo

Und wie lässt sich dann dieser Beitrag von dir erklären?

Mit Alzheimer...
@ 2002Andreas: Das mag stimmen...
@ macko: Damit bin ich überfordert... ich nutze die Anregungen, die ich hier im Forum finde..... wenn ich die genannten Werkzeuge einschalte, steh ich davor wie ein Blinder vorm Paradies..

testerer

Danke! Läuft jetzt wie gewünscht.

milupo

Zitat von Boersenfeger

Mit Alzheimer...

Nimms nicht so tragisch. Dadurch kann ich dein Lob doppelt genießen ...

Boersenfeger

:klasse:

testerer

Mit Firefox 68 ist die Hintergrundfarbe im Adressfenster nicht mehr aktiv, also wenn man es aufklappt und der Hovercode geht auch nicht. Hier mein Code und ein Bild, was ich meine. "Zum Tab Wechseln" in der Adressleiste wird auch nicht mehr gefärbt, also das hier geht auch nicht. Da muss bestimmt irgendeine Bezeichnung geändert werden:

CSS

#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-action-text{
color:black!important;
}

CSS

.autocomplete-richlistitem {
height: 30px;
min-height: 30px;
font: message-box;
border-radius: 2px;
border: 1px solid transparent;
}

.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
background-color: #a39c92;
border-color: hsla(0, 0%, 0%, 0.1);
}

.autocomplete-richlistitem[selected],
treechildren.searchbar-treebody::-moz-tree-row(selected) {
background-color: #a39c92 !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistitem[selected=true] {
color: #eee !important;
background-color: #a39c92 !important;
}

.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected] {
background-color: #d1cdc8 !important;
}

.autocomplete-richlistitem {
background-color: #d1cdc8 !important;
color: black !important;
padding: 5px 2px !important;
}

.autocomplete-richlistitem[selected="true"] {
background: #f2f2f2 !important;
color: black !important;
}

.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected] {
background-color: #f2f2f2 !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistitem, #PopupAutoCompleteRichResult .scrollbox-innerbox, #PopupAutoCompleteRichResult > richlistbox{ margin-left:0!important; padding:0 0 0 0!important; }

Alles anzeigen

2002Andreas

Teste bitte mal, ob du damit etwas anfangen kannst:

CSS

.urlbarView-row {
   color: black !important;
    }

.urlbarView-row:hover {
    color: white !important;
    background: red !important;
    }

.urlbarView-url:hover {
    color: yellow !important;
    }

Alles anzeigen

Weitere Bezeichnungen findest du hier:

URLbar scrollen...

testerer

Funktioniert soweit, nur das Abschneiden des überrstehenden weißen Randes fehlt noch und vielleicht auch der Code zum Andern der Farbe von "zum Tab wechseln".

Außerdem funktioniert der Hover nur mit der Maus, mit der Tastatur ändert sich die Farbe nicht, also die Hintergrundfarbe der Adresse, die Schrift der Adresse jedoch schon.