Unterschiedliche Hoverfarben Maus und Tastatur URL- und Searchbar Dropdown

  • 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ü:


    Code
    1. #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover{-moz-appearance: none !important; background: #f2f2f2 !important; }
    2. #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]:hover { -moz-appearance: none !important; border: none !important; background: #f2f2f2 !important;}
    3. #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.


  • 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.

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

    Code
    1. // userChrome.js
    2. userChrome.ignoreCache = true;
    3. 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/use…tree/master/usercssloader
    Damit kann dann die Auswirkung geänderter CSS-Codes sofort ohne Neustart überprüft werden...
    Eine userChrome.css ist so nicht mehr notwendig.

  • // 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]


  • // 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.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress


  • 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):

    Code
    1. .autocomplete-richlistitem:hover,
    2. .autocomplete-richlistitem[selected] {
    3. background-color: #d1cdc8 !important;
    4. }


    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)



    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.)



    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.


  • 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..


  • Mit Alzheimer... :(


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

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • 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:


    Code
    1. #PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-action-text{
    2. color:black!important;
    3. }
  • 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.