Der Online-Übersetzer https://translate.google.com/ bietet 133 Sprachen zur Übersetzung über ein Dropdown-Menü an. Wie kann ich css verwenden, um nicht verwendete Sprachen auszublenden, außer z. B. English (Amerikan) und German?
Da es viele Sprachen gibt, ist hier unbedingt das Prinzip „Alle Sprachen ausblenden“ und dann „Gewünschte Sprachen anzeigen“ erforderlich.
Ähnliches Thread.
Danke
um nicht verwendete Sprachen auszublenden
So?
Wenn ja, dann teste bitte mal:
@-moz-document domain(translate.google.com) {
[data-language-code] {
display: none !important;
}
[data-language-code="de"],
[data-language-code="en"] {
display: block !important;
}
.qSb8Pe {
min-height: 45px !important;
max-width: 70px !important;
}
}Wenn ja, dann teste bitte mal:
Perfekt 
Obwohl mir die anfängliche Fülle an Sprachen zunächst Angst machte 
Ist es möglich, die Schaltfläche „Detect language“ sichtbar zu machen, ohne ausgeblendet zu werden?
Ist es möglich
Teste bitte wieder:
@-moz-document domain(translate.google.com) {
.j33Gae [data-language-code] {
display: none !important;
}
.j33Gae [data-language-code="de"],
.j33Gae [data-language-code="en"] {
display: block !important;
}
.qSb8Pe {
min-height: 45px !important;
max-width: 70px !important;
}
}Alternativ für Zeile 7 -8 kannst du es auch so schreiben:
.j33Gae :is([data-language-code="de"], [data-language-code="en"]) {
display: block !important;
}Teste bitte wieder:
Wunderbar, Danke!
Wunderbar, Danke!
Freut mich, war gern geschehen
Alternativ für Zeile 7 -8 kannst du es auch so schreiben:
CSS.j33Gae :is([data-language-code="de"], [data-language-code="en"]) { display: block !important; }
Der Standard für die Anzeige ist inline-flex, dann sollte man auch ohne Vorgabe von Mindest- und Maximalhöhe auskommen. Und in meinen Augen besser als diese kryptische Klasse .j33Gae ist die übergeordnete div mit dem Attribut data-auto-open-search="true":
@-moz-document domain(translate.google.com) {
[data-auto-open-search] [data-language-code] {
display: none;
}
[data-auto-open-search] :is(
[data-language-code="auto"],
[data-language-code="de"],
[data-language-code="en"]
) {
display: inline-flex;
}
}Ich hab mal das !important weggelassen. Das benötigt man oft gar nicht, wenn man sowieso schon spezifischer ist als der seiteneigene Stil. Ich setze das nur noch, wenn ich nichts besseres herausfinde.
Zum allerersten Code von 2002Andreas fügte die Zeile hinzu [data-language-code="auto"] von Speravir aus dem Beitrag oben. Das Ergebnis war die optimale Variante, kurze Tests ergaben keine Mängel.
Bitte fügen Sie eine Änderung der Hintergrundfarbe der runden Schaltfläche hinzu, wenn Sie mit der Maus darüber fahren, und eine Änderung der Farbe des Chevrons.
Danke!
mit der Maus darüber fahren
Da kommt sicherlich ein besserer Code:
button[aria-label="Weitere Quellsprachen"]:hover {
background: red;
color: white;
border-radius: 90px;
}Da kommt sicherlich ein besserer Code:
Hmm, ich habe nicht verstanden, wie man diesen Code anwendet, ich habe verschiedene Optionen ausprobiert 
wie man diesen Code anwendet
Teste bitte:
@-moz-document domain(translate.google.com) {
button[aria-label="Weitere Quellsprachen"]:hover {
background: red !important;
color: white !important;
border-radius: 90px;
}
}oder auch:
.aCQag > c-wiz button:hover {
background: red;
color: white;
border-radius: 90px;
}Hmm, ich habe nicht verstanden, wie man diesen Code anwendet, ich habe verschiedene Optionen ausprobiert
Was genau hast du nicht verstanden? Der Code macht das, was du hier geschrieben hast:
Bitte fügen Sie eine Änderung der Hintergrundfarbe der runden Schaltfläche hinzu, wenn Sie mit der Maus darüber fahren, und eine Änderung der Farbe des Chevrons.
Du fährst auch mit dem Mauszeiger über die Schaltfläche? Nur dann werden die Codes angewendet (erkennbar an :hover im Code).
Teste bitte:
Ich füge diesen hover-Code, entweder den folgenden oder den vorherigen, zum Hauptcode aus Beitrag Nr. 2, userContent.css, hinzu. Ich starte den Browser neu, der Hauptcode funktioniert, aber es gibt keinen Hover-Effekt. Neues Profil, andere Stile funktionieren.
/* https://www.camp-firefox.de/forum/thema/137330/?postID=1241028#post1241028 */
@-moz-document domain(translate.google.com) {
[data-language-code] {
display: none !important;
}
[data-language-code="auto"],
[data-language-code="de"],
[data-language-code="en"] {
display: block !important;
}
.qSb8Pe {
min-height: 45px !important;
max-width: 70px !important;
}
button[aria-label="Weitere Quellsprachen"]:hover {
background: red !important;
color: white !important;
border-radius: 90px;
}
}Ich habe auch userChrome.css ausprobiert, auch keine Wirkung.
es gibt keinen Hover-Effekt.
Auch damit nicht?
.aCQag > c-wiz button:hover {
background: red;
color: white;
border-radius: 90px;
}Auch damit nicht?
Auch hier gibt es keinen Hover-Effekt. Ich habe v121.0beta9, ich hatte die Idee, es in v120.0.1 zu überprüfen, und ich werde es jetzt tun.
v120.0.1 hat auch keinen Hover-Effekt.
Das kann man ertragen, Hover ist so eine Laune des Benutzers, aber die Hauptfunktionalität funktioniert stabil
Ich danke Ihnen für Ihre Hilfe!
Verstehe ich nicht
Es scheint, dass der Grund in der Browserlokalisierung liegt. Ich habe den Browser von en-US auf DE umgestellt und der Hover funktionierte, aber nur auf der linken Schaltfläche. Anstelle von „Weitere Quellsprachen“ müssen Sie also einen Namen auf Englisch eingeben, den ich nicht kenne. Und bringen Sie den Hover mit der rechten Taste zum Laufen.
aber nur auf der linken Schaltfläche. A
[aria-label="More source languages"]:hover,
[aria-label="More target languages"]:hover {
background: red;
color: white;
border-radius: 90px;
}Es scheint, dass der Grund in der Browserlokalisierung liegt. Ich habe den Browser von en-US auf DE umgestellt und der Hover funktionierte, aber nur auf der linken Schaltfläche.
So ist es. Sobald du Firefox in einer anderen Sprache verwendest, musst du die Texte in der entsprechenden Sprache verwenden. Solche Strings werden meist als Werte von label-Attributen angegeben, oder wie oben in aria-label-Attributen. Aria-Attribute werden für die Barrierefreiheit angegeben.
