einige Proton-Änderungen abmildern

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    89.0
    Betriebssystem
    Win10

    Hallo,


    ich würde gerne einige der Änderungen von Proton abmildern. Es sieht durchaus gefällig aus, aber einige Details erscheinen mir wenig durchdacht bzw. da wurden einige Zielgruppen glatt vergessen (*).


    Eine UserChrome.css habe ich bereits, sie enthält lediglich eine Anpassung für die "neuer Tab"-Seite, um deren (m.E.!) sinnfrei breite Ränder zu reduzieren und den verfügbaren Platz besser zu nutzen:

    CSS
    /* Neuer Tab Seite mehr Einträge nebeneinander */
     
    @-moz-document url(about:home), url(about:newtab) {
        
    .collapsible-section .section-body {
        width: 115% !important;
        margin-left: -80px !important;
        }
    }


    Fx 89 mit Proton drängt mich seit sehr vielen Jahren erstmals dazu, noch einige weitere Sachen anzupassen:

    1. aktiver Tab im System-Theme nur schwer erkennbar

    2. Schriftgrößen sowohl in den Menüs wie auch im Hamburger-Menü zu zierlich

    3. Inhalt der Kacheln auf der New-Tab-Seite etwas klein geraten bzw. viel zu breite Ränder auf jeder Kachel.


    Zu 1.: Ich habe kurz die vier Themes ausprobiert.

    Hell bzw. dunkel: zu erwartendes Ergebnis, alle Elemente hell bzw. dark, geringe Unterschiede zwischen aktivem und inaktiven Tab(s)

    Alpenglow bringt zwar diesen Unterschied, aber bringt mir eine Bonbon-bunte Leiste oben. Nicht meins.

    also System-Theme: ja denkste, im Gegensatz zu allen anderen Programmen greift das Theme die Systemfarben nicht auf, der aktive Tab schwebt irgendwo, kaum hervorgehoben, zwischen den inaktiven herum.

    Vorerst habe ich daher Proton wieder deaktiviert in den Einstellungen (browser.proton.enabled -> false). Der Unterschied ist offenkundig:


    Die scheinbar schwebenden Buttons statt vernünftiger Tabs schrecken mich nicht ab, aber der aktive Tab sollte deutlich auffälliger und schneller erkennbar sein. Die neue Lösung finde ich völlig unbefriedigend.

    Daher meine Frage 1: Gibt es eine Möglichkeit, vielleicht für den Hintergrund der ganzen Leiste eine Transparenz einzustellen, damit dort die im System gewählte Kontrastfarbe (bei mir momentan das im zweiten Bild zu sehende Blau) für die inaktiven Tabs durchscheint und sich der hellere, aktive Tab dadurch wieder klar abhebt? In so einem Fäll müsste man auch nix mehr anfassen, wenn man die Systemfarben ändert, ich beispielsweise dunkelgrün oder weinrot als Kontrastfarbe wählen würde.

    Oder wenn das nicht so flexibel geht und man sich auf konkrete Farbwerte festlegen muss, wo kann ich die Hintergrundfarben der inaktiven Tabs abdunkeln und wie und wo ggf. dafür die Schriftfarbe aufhellen?


    zu 2.: Zumindest subjektiv scheinen die Schriften im Hamburgermenü etwas zierlicher geworden zu sein.

    Oder wirkt es nur so, weil die Abstände etwas größer sind?

    Jedenfalls finde ich das schwerer bzw. anstrengender zu lesen. Bin halt keine Dreißig mehr und trage die Brille gewiss nicht nur, um schlauer auszusehen. Für Webseiten habe ich den Standard-Zoom längst auf 110% erhöht, aber bei Menüs hilft das nichts.

    Resultierend meine Frage 2: Wo und wie kann ich die Schriftgröße auch für Hamburger- und normales Menü leicht vergrößern?

    Und Frage 2a: Passt sich dann auch die Menübreite an oder wird größerer Text dann abgeschnitten oder wie muss ich ggf. auch noch die "Kästen" vergrößern?


    Zu 3: Die Icons auf der NewTab-Seite haben ihre jeweiligen Kacheln bisher einigermaßen ausgefüllt. Neuerdings nehmen sie aber nur noch grob geschätzte 60% der Fläche ein:

    Hat man nun eine größere Anzahl davon auf der Seite, weil man diese Seite auch sozusagen als Ersatz und Ergänzung für die am häufigsten genutzten und immer wieder besuchten Seiten nutzt, erschweren die nun deutlich kleineren Inhalte das schnelle Erfassen und, da die Grundfarben doch häufig dieselben sind, das Unterscheiden ähnlicher Icons.

    Frage 3: Lassen sich die breiten Ränder jeder dieser Kacheln wieder reduzieren bzw. das Icon (oder die Vorschau) innerhalb jeder Kachel wieder vergrößern? Rand an sich kann ja gerne sein, aber der Rand sollte doch bitte den Inhalt nicht dominieren!


    Vielen lieben Dank vorab für hilfreiche Hinweise :-)

    Drachen



    *) Die Zielgruppe der Älteren, die eben bei Weitem keine 100%ige Sehstärke mehr haben, wird von den sog. "Designern" leider regelmäßig vergessen. Ton in Ton und zierlich ist natürlich schick, aber kräftige Kontraste und auf Anhieb auffindbare aktive Tabs sowie bei diesen Kacheln ein Fokus auf den Inhalt statt den für alle Kacheln gleichen fetten breiten Rand gehören halt auch zu einen guten Design. In westlichen Staaten machen die Älteren einen zunehmend dominanten Anteil der Bevölkerung aus, aber zumindest hier bei Proton haben die GUI-Designer meinem subjektiven Endruck nach wohl nur die 13- bis 30-Jährigen im Blick :-(

  • Hi Drachen,

    ich habe ähnliche Probleme.


    zu 1. aktiver Tab im System-Theme nur schwer erkennbar


    Das habe ich folgendermaßen gelöst:


    CSS
    /* aktiven Tab einfärben */
    
    .tab-background[selected="true"]{{
        background-color:transparent!important;
        box-shadow: inset 0px 0px 40px 0px #d35401 !important;}
    }

    zu 2. Schriftgrößen

    &

    zu 3. Inhalt der Kacheln auf der New-Tab-Seite


    habe ich (noch) nichts beizutragen.


    Gruß

    Mira

  • // Mira_Belle dein Code enthält Fehler, da zwei Klammern zu viel sind funktioniert er nicht es muss heißen

    CSS
    /* aktiven Tab einfärben */
    
    .tab-background[selected="true"]{
        background-color:transparent!important;
        box-shadow: inset 0px 0px 40px 0px #d35401 !important;
    }

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • // Mira_Belle dein Code enthält Fehler, da zwei Klammern zu viel sind funktioniert er nicht es muss heißen

    CSS
    /* aktiven Tab einfärben */
    
    .tab-background[selected="true"]{
        background-color:transparent!important;
        box-shadow: inset 0px 0px 40px 0px #d35401 !important;
    }

    Upsy, mein erster versuch mit dem Eingeben von CSS-Code.

  • Was bewirkt das

    Da das im Bild nicht gut genug zu sehen ist, hier ausführlicher erklärt

    Bezogen auf den Tab-Hintergrund = tab-background

    background-color =Hintergrundfarbe ist hier transparent

    #d35401= ist die Farbe siehe https://www.color-hex.com/color/d35401

    box-shadow = Der Schatten der Tabbox, wie diese mit Farbe ausgefüllt wird

    inset 0px 0px 40px 0px = wird von allen Seiten vom Rand her eingefärbt mit der angegebenen Anzahl von Pixeln (hier 40)


    Nimmt man nur 9 (statt 40) Pixel also inset 0px 0px 9px 0px sähe es so aus

    bei inset 9px 0px 0px 0px sähe es so aus


    Bei inset 0px 9px 0px 0px

    Bei inset 0px 0px 0px 9px


    So kann man individuell eine Box (hier einen Tab) gestalten. Mit der Anzhl von Pixeln, der Farbe, von welcher Seite aus usw.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • danke Zitronella - besonders wegen der guten Erklärung samt Illustration von inset. :thumbup:


    Nachdem es offenbar keine Option gibt, die inaktiven Tabs wieder "dynamisch" in Richtung der System-Akzentfarbe anzupassen, werde ich wohl als Plan B die Umrandung des aktiven Tabs kräftig hervorheben.

  • Farben ggf. anpassen...

  • Sorry, falls mein Text blödsinn ist, bin nur Anwender ohne viel IT-Kenntnis

    ~~~~~~~~~~~~~

    vielen Dank für die tollen Tips, kämpfe gerade mit dem neuen Design*.


    Hier noch ein Punkt (nicht von mir, nur gefunden) um geringfügig Platz für den Inhalt zu sparen.

    > Den "Kompaktmodus" u.a. zurückerhalten:

    https://github.com/black7375/Firefox-UI-Fix (dort findet sich der Code)

    und wer, wie ich, eine Erklärung dazu hilfreich findet:

    https://www.deskmodder.de/blog…i-fix-wieder-korrigieren/


    *) mit Brille +Zoom ;) geht bei mir 'Kleines' zwar mit Konzentration meist zu lesen, fehlender Kontrast ist für mich nicht ausgleichbar, bremst aus und ehöht die Fehl-Klicks.

  • Nachdem es offenbar keine Option gibt, die inaktiven Tabs wieder "dynamisch" in Richtung der System-Akzentfarbe anzupassen


    Ich hab's jetzt nicht getestet, da ich gerade keinen Windows-Computer griffbereit habe, aber funktioniert -moz-accent-color als Farbe? Auf macOS funktioniert's.


    > Den "Kompaktmodus" u.a. zurückerhalten:

    https://github.com/black7375/Firefox-UI-Fix (dort findet sich der Code)


    Dafür benötigt man überhaupt keinen Code, das ist eine Option von Firefox, siehe https://www.camp-firefox.de/ar…#f40a43e1-kompakter-modus.

  • Ich komme nicht klar mit dem ganzen Kram :-(


    sowas wie aus Zitronellas Beispiel würde ich gern erreichen (der oben erwähnte Plan B):

    Aber ich komme nur bis zu

    ... und dies mit:

    CSS
    /* aktiven Tab einfärben */
    background-color: transparent !important;
    box-shadow: inset 0px 0px 15px 1px #ff0000 !important;
    }

    Einige andere Varianten hatte ich auch probiert, aber was genau was bewirkt oder ändert, ist mir nicht klar geworden.


    Dass der Code nicht in meine schon früher vorhandene UserContent.css, sondern in eine UserChrome.css gehört, habe ich einigermaßen fix bemerkt.


    Aber die Vielzahl der Schreibweisen aus zahlreichen freundlichen Tipps überfordert mich und ich komme inzwischen mit den Kombinationen derselben durcheinander.

    .tab-background[selected="true"] { oder

      .tabbrowser-tab[selected="true"] { und beides mal mit #TabsToolbar direkt davor und mal ohne - außerdem für die Hintergrundfarbe mal nur background und mal background-color und mal backgrundcolor ....

    Sehr verwirrend das alles :-(


    funktioniert -moz-accent-color als Farbe?

    Teste ich sehr gern aus für den Hintergrund der inaktiven Tabs, aber wohin gehört das?

    Bereits versucht hatte ich

    CSS
    :root {
    --lwt-accent-color: blue;
    }
    
    /* inaktive Tabs */
    #TabsToolbar .tabbrowser-tab {
    background: var(--lwt-accent-color) !important;
    }

    .... klappt aber auch nicht.


    Parallel schlage ich mich noch mit der Anpassung der newtab-Seite herum, was auch nicht eben zufriedenstellend verläuft; dafür werde ich noch einen eigenen Thread anfangen - ich bin mir nur nie sicher, was denn konkret in welche der beiden css-Dateien gehört.


    MfG

    Drachen

  • CSS
    /* aktiven Tab einfärben */
    background-color: transparent !important;
    box-shadow: inset 0px 0px 15px 1px #ff0000 !important;
    }

    Das ist auch kein gültiger Code

    Wenn dann

    CSS
    /* aktiven Tab einfärben */
    .tab-background[selected="true"]{
    background-color:transparent!important;
    box-shadow: inset 0px 0px 15px 1px #ff0000 !important;
    }

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Zitronella exakt so stehts bei mir drin, die eine zeile ist beim Kopieren abhanden gekommen.


    Sören Hentzschel danke :) - hat auf Anhieb funktioniert :)


    Nochmal Zitronella - nachdem ich Sörens Zeilen für die inaktiven Tabs vor den schon vorhandenen Zeilen für aktive Tabs eingefügt habe, klappt es. Offenbar hat der vorherige falsche und zudem fehlerhafte Code für inaktive Zeilen auch die korrekte Interpretation der folgenden Zeilen behindert.


    Nun sieht es so aus:

    (mit dem dritten Pixelwert des inset von 15 auf 7px verringert)


    Danke euch beiden und auch allen Anderen: der aktive Tab ist nun wieder auf Anhieb erkennbar und beim Durchscrollen leicht zu finden :-)

    👌