Aktiver Tab

  • Firefox-Version
    102.0 (64-Bit)
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1766)

    Mh.

    Hatte folgende Anpassung für den aktiven Tab.

    CSS
        .tab-background[selected="true"] {                                                                                            
            background:rgba(255, 148, 0, 0.4) !important;                        /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                        
            box-shadow: inset  0px 0px 5px 0px #ff9400 !important;                /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
            border: hidden !important;                                            /* Aktiver Tab: Rahmen ausblenden */ 
        }

    Tab wurde angezeigt wie gewünscht!

    Nach dem Update gab es einen feinen weißen Rahmen um den aktiven Tab.

    Auch das Symbol "X" im Schließenbutton war kaum mehr zu erkennen.

    Um das Symbol "X" wieder "sichtbar" zu machen, habe ich ...

    CSS
    .close-icon {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    ... hinzugefügt.

    Beeinflusst aber auch das Symbol "X" in anderen, nicht aktiven Tabs. (muss ich mir merken!)

    Für den Rahmen nachfolgenden Code genutzt.

    CSS
    .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
        color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) !important;
    }

    Diesen verstehe ich aber nicht!

    So war das Original

    color: var(--lwt-tab-text, var(--toolbar-color));

    Was hat es mit var(--lwt-tab-text auf sich?

    var(--toolbar-color)); war für die Farbe.

    Wie kann der Code anders geschrieben werden, ohne das "Text-Ding"?

    Ich habe es nicht hinbekommen.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Hallo,

    Du nutzt eine Beta-Version? Denn die finale Version Firefox 102 ist noch überhaupt nicht veröffentlicht worden. Veröffentlichungs-Tag für Major-Relases ist seit Jahren immer ein Dienstag.

    Nunja, mag sein, dennoch war, bzw. ist diese Version schon auf dem Server.

    Denkst Du, Mozilla könnte diese Versionen noch verändern oder zurückziehen?

    Wenn ja, stellen wir die Problemlösung hinten an und warten bis nach der offiziellen Veröffentlichung.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Nunja, mag sein, dennoch war, bzw. ist diese Version schon auf dem Server.

    Denkst Du, Mozilla könnte diese Versionen noch verändern oder zurückziehen?

    Und welchen Druck hast, dass du nicht einen Tag warten kannst? Das Update kommt so oder so automatisch, du musst Updates nie manuell installieren. Dass es mehrere sogenannte Release Candidates gibt, kommt andauernd vor. Neue Versionen gelten dann freigegeben, wenn sie über die Website, d.h. auf http://www.mozilla.org, und/oder via Update verteilt werden. Bis dahin befindet sich eine neue Version noch in der Test- und Vorbereitungsphase und kann immer noch verändert werden.

    So war das Original

    color: var(--lwt-tab-text, var(--toolbar-color));

    Was hat es mit var(--lwt-tab-text auf sich?

    var(--toolbar-color)); war für die Farbe.

    Der zweite Parameter einer var()-Funktion in CSS ist ein Fallback für den Fall, dass der Inhalt der im ersten Parameter angegebenen Variable ungültig ist. Die Variable --lwt-tab-text wird (optional) durch Themes gesetzt (das entspricht tab_text in einem Theme) und kann daher auch leer sein. Nur wenn das der Fall ist, greift in deinem Beispiel var(--toolbar-color).

  • Und welchen Druck hast, dass du nicht einen Tag warten kannst? Das Update kommt so oder so automatisch, du musst Updates nie manuell installieren. Dass es mehrere sogenannte Release Candidates gibt, kommt andauernd vor. Neue Versionen gelten dann freigegeben, wenn sie über die Website, d.h. auf http://www.mozilla.org, und/oder via Update verteilt werden. Bis dahin befindet sich eine neue Version noch in der Test- und Vorbereitungsphase und kann immer noch verändert werden.

    Keinen! War einfach nur etwas ungeduldig.

    Jetzt ist er halt drauf.

    Der zweite Parameter einer var()-Funktion in CSS ist ein Fallback für den Fall, dass der Inhalt der im ersten Parameter angegebenen Variable ungültig ist. Die Variable --lwt-tab-text wird (optional) durch Themes gesetzt (das entspricht tab_text in einem Theme) und kann daher auch leer sein. Nur wenn das der Fall ist, greift var(--toolbar-color).

    Ok, ich wiederhole.

    Die erste Anweisung ist für ein Theme und falls das Theme da nichts angibt, greift zweite Anweisung!

    Da ich im Code nun aber Weiß angegeben habe, ist da auch kein Parameter, bzw. halt eben "Weiß".

    Nur wie verändere ich den Code, dass erst gar nicht auf das Theme gewartet wird, sondern NUR auf meine Vorgaben reagiert wird?

    Das hat dann, so glaube ich etwas mit diesem Stück Code zu tun, oder?

    CSS
    .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Da ich im Code nun aber Weiß angegeben habe, ist da auch kein Parameter, bzw. halt eben "Weiß".

    Ist der Code jetzt anders als im Startbeitrag angegeben? Denn dort sehe ich für die angegebene Stelle Orange mit 20 Prozent Deckkraft und nicht Weiß.

    Nur wie verändere ich den Code, dass erst gar nicht auf das Theme gewartet wird, sondern NUR auf meine Vorgaben reagiert wird?

    Bezogen auf diese Code-Stelle: Ersetze color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) durch color: rgba(255, 148, 0, 0.2).

    Allerdings glaube ich nicht, dass das dein Problem lösen wird. Du hast nämlich geschrieben:

    Für den Rahmen nachfolgenden Code genutzt.

    Der Code, den du dann genannt hast, verändert aber keinen Rahmen, sondern die Textfarbe. Das übrigens durch :-moz-lwtheme auch nur bei Verwendung eines Themes, wovon im Startbeitrag nichts steht, weswegen ich mir auch hier nicht sicher bin, ob das klar ist.

    ---

    Zu einem möglichen Unterschied zwischen Firefox 101 und Firefox 102 kann ich aktuell nichts sagen, da an dem Computer, an dem ich aktuell bin, keine Beta-Version von Firefox installiert ist. Vielleicht kann jemand anderes eher helfen, ich werde das erst am Donnerstag prüfen können.

  • Ok, bin, war verwirrt!

    Nutze ich "Deinen" abgewandelten Code ...

    CSS
    .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
        color: rgba(255, 148, 0, 0.2)) !important;            /* Weißer Rahmen um aktiven Tab entfernen (Orange)    */    
    }

    ... habe ich einen weißen Rahmen!

    Nehme ich aber ...

    CSS
    .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
        color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) !important;            /* Weißer Rahmen um aktiven Tab entfernen    */    
    }

    ... ist der Rahmen "natürlich" orange!

    ACHTUNG!

    Verändere ich die Farbe ...

    CSS
    .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
        color: var(--lwt-tab-text, rgba(255, 0, 0, 0.8)) !important;            /* Weißer Rahmen um aktiven Tab entfernen    */    
    }

    so wie hier, Rot, fast keine Transparenz,

    habe ich klaro einen roten Rahmen.

    Mit <3lichem Gruß

    Mira

  • Kann ich Dir auch nicht erklären, ist aber so!

    ABER, ich habe mein Problem gelöst.

    CSS
        .tabbrowser-tab:-moz-lwtheme {
            color: rgba(255, 148, 0, 0.2) !important;                            /* Weißer Rahmen um aktiven Tab entfernen (Orange)    */
    }

    Bringt den erwünschten Effekt.

    Danke für Deine Mühe.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Kann nur was Spezielles bei dir sein, weil - aktiver Tab v101 <> v102_rc2, Systemtheme.

    Meine Anpassung an das dunkle Theme zeigt auch keine Veränderungen, optisch wie gewünscht.

    Da wäre es hilfreich, das gesamt CSS von dir einzusehen, nicht nur die Schnipsel.

  • Da wäre es hilfreich, das gesamt CSS von dir einzusehen, nicht nur die Schnipsel.

    Ohweh.

    Du hast es so gewollt!

    Die userChrome.css

    Hamburgermenü.css

    Lesezeichen.css

    Tabs.css

    und zu guter Letzt

    Adressleiste.css

    Ach nee halt

    aboutDialog.css

    gibt es auch noch.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (27. Juni 2022 um 20:53)

  • Habe es gerade mit einem neuen Profil ausprobiert!

    Allen Code in der Stilbearbeitung kopiert.

    Da gibt es keinen Rahmen, auch nicht, wenn ich die Farbe ändere.

    Bin der Meinung, dass es was mit dem Theme zu tun hat.

    Gruß

    Mira

    Nachtrag!

    Bin meinem Verdacht weiter nachgegangen.

    Habe verschiedene Themes ausprobiert und siehe da,

    einige generieren beim aktiven Tab einen Rahmen.

    Wie lässt sich das verhindern?

    Ich möchte, dass ein Theme lediglich nur das "Hintergrundbild" zur Verfügung stellt.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (27. Juni 2022 um 21:31)

  • Das Adressleiste.css ist extrem buggy

    pseudo und complex kannst du ignorieren, das ist Firefox-spezifisch, Stylus warnt nur.

    Aber fehlende Kommata, Farbangaben bei "box-shadow: transparent" sind zu beheben, scheint es nicht zu geben.


    dito "aboutDialog.css"

    Das Ergebnis hier, sicher?

    Du solltest dazuschreiben, dass du die Menüleiste brauchst, sieht trotzdem suboptimal aus. Welches Theme nutzt du? "Dark"?

    Ohne die Zeile 19, deine Änderung.

  • Bin meinem Verdacht weiter nachgegangen.

    Habe verschiedene Themes ausprobiert und siehe da,

    einige generieren beim aktiven Tab einen Rahmen.


    Wie lässt sich das verhindern?


    Ich möchte, dass ein Theme lediglich nur das "Hintergrundbild" zur Verfügung stellt.

    Entweder ein Theme nutzen, welches das nicht macht, oder eben, wie du es eh schon machst, das Design via userChrome.css überschreiben. Sich einfach bestimmte Teile eines Themes auszusuchen geht nicht.

  • Die Kommafehler sind behoben.

    Der Fehler mit "box-shadow: transparent" habe ich auch korrigiert! box-shadow:  1px 1px 10px rgba(0, 0, 0, 0) !important;

    Auch die Fehler in der "aboutDialog.css" sind, bis auf den Letzten beseitigt.

    Ich erkenne nicht, was da falsch sein sollte.

    Danke für die Hinweise.

    Ja, das mit der Menüleiste hätte ich erwähnen sollen, sorry, habs einfach vergessen.

    Als Theme kommt bei mir "abstract Orange-and-blue" von Valou zum Einsatz.

    Das Ganze schaut dann so aus:

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Der Fehler mit "box-shadow: transparent" habe ich auch korrigiert! box-shadow: 1px 1px 10px rgba(0, 0, 0, 0) !important;

    Ziemlich präzise Angaben für etwas, was du dann eh komplett unsichtbar machst. Vielleicht box-shadow: none !important;? ;)

    Auch die Fehler in der "aboutDialog.css" sind, bis auf den Letzten beseitigt.

    Ich erkenne nicht, was da falsch sein sollte.

    In der letzten Zeile steht }, was zu keiner öffnenden Klammer gehört. Das @-moz-document url-prefix("chrome://browser/content/aboutDialog.xhtml") { ganz am Anfang hast du schon wesentlich früher wieder geschlossen. Code ordentlich statt willkürlich einrücken hilft bei sowas. ;)

    PS: Bei Zeilen mit 0 als Wert darfst du die Einheit, z.B. px, gerne weglassen. Das ist kein Muss, wäre aber guter Code-Stil.

  • Danke Sören.

    Mir ist's jetzt auch wieder eingefallen!

    Die aboutDialog.csswar, ist mein allererstes Projekt,

    und dass da noch Fehler drin steckten, war mir damals bewusst,

    deshalb gab es dazu auch Kommentare.

    Das Ding funktionierte aber wie gewünscht und so vergaß ich,

    dass das noch eine Baustelle ist.

    Nun aber sollte der Code sauber sein.

    Hab die "falsche" Klammer gefunden und auch die 0px Werte geändert. ;)

    Ach ja, das mit den "präzise Angaben", da hätte ich echt auch selber kommen können.

    Habe sogar auf MDN Web Docs extra nachgeschlagen

    und

    wohl Tomaten auf den Augen gehabt.

    Da bin ich denn auch auf die Lösung mit den Werten gekommen,

    weil ja box-shadow: transparent !important; total falsch war.

    OK, nun ist auch dieser Fehler bereinigt und ich blende aus.

    box-shadow: none !important;

    Möchte mich nochmals ganz <3 lich bei Dir und .DeJaVu

    für Eure Hilfe bedanken.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Ich hatte jetzt nach dem Update auch wieder einen farbigen Rahmen, bei mir offensichtlicher da Ich die Tabs mit Marginwerten verschoben habe, dadurch die Linien durch den Tab.

    Dieser Rahmen ändert je nach Themes die Farbe. Beim Standardthema Dunkel ist dieser nicht da aber beim Themes Alpenglow und allen anderen bei mir zu sehen.

    Das gleiche Problem hatte Ich schon mal vor ca. einem Jahr und habe dann als Hilfsmittel die Bilddatei aus den Themes selektiert und mir nur diese anzeigen lassen.

    Irgendwann hatte Ich dann hier ein paar Zeilen gefunden die das Problem behoben hatten. Einige Zeit später hab Ich die CSS Dateien mal aufgeräumt und „unwirksames“ auskommentiert oder gelöscht.

    Seltsamer Weise löst jetzt wieder eine der auskommentierten Zeilen das Problem.

    Die letzte Zeile: outline: none! important hab Ich wieder aktiviert und die nicht erwünschte Linie ist wieder weg.


    /* Tab-Rahmen entfernen *******/

    #TabsToolbar
    .tabbrowser-tab[visuallyselected="true"],

    #TabsToolbar .tabbrowser-tab,

    #TabsToolbar .tabbrowser-tab
    .tab-background {

    background: unset !important;

    box-shadow: none !important; /**Rahmen in Tabs***/

    outline: none !important

    }

  • Ich hatte das gleiche Problem, ich glaube FF hat mit dem Update 102 eine Outline in die Tabs gemogelt .

    Auf Reddit gab's einige Beschwerden zu dem Thema, da hatte ich dann auch die grobe Lösung gepostet , wie Mira sie erwähnt hat .

    Soweit scheint's zu funktionieren, bei mir jedenfalls, hängt aber evtl. noch mit anderen Faktoren zusammen, die der einen oder anderen userChrome.css in die Quere kommen könnten .