Tab-Schließen "X" mittels CSS an FF89 anpassen

  • Firefox-Version
    89
    Betriebssystem
    Win 10

    Hallo,

    ich benutze folgenden Code um ein rotes "x" rechts im aktiven Tab zum Schließen zu verwenden:

    Neuerdings zeigt "Hover" folgendes Verhalten:

    Es soll aber so aussehen:

    Also das"x" in rot, nicht verkleinert und ohne den helleren "Schatten" um das kleine "x".

    In dem Zusammenhang würde mich noch interessieren, ob man die Beschriftung des Tabs so einstellen kann, dass sie nicht so unter den Schließen-Butten kriecht, wie hier bei nicht-Hover:

    Bitte um Hilfestellung bei der Anpassung.

    Dank und Gruß

    supi

  • In dem Zusammenhang würde mich noch interessieren, ob man die Beschriftung des Tabs so einstellen kann, dass sie nicht so unter den Schließen-Butten kriecht, wie hier bei nicht-Hover:

    wenn du damit die Unschärfe des Textes meinst, versuch das:

    CSS
    .tab-label-container[textoverflow]:not([pinned]) {
        mask-image: unset !important;
        }
  • ohne den helleren "Schatten" um das kleine "x".

    Evtl. kannst du damit ja etwas anfangen, und für dich dann genauer anpassen.

  • @2002Andreas

    Danke, das für den aktiven Tab passt sehr gut.

    Für die inaktiven Tabs würde ich bei Hover gerne eine separate Lösung verwenden.

    Also das "x" bei Hover in einer anderen Farbe.

    Sieht jetzt so aus:

    Der helle Tab ist der aktive. Links ist inaktiv bei Hover. Dort hätte ich gern das "x" in einer anderen Farbe, damit der inaktive Tab auch bei Hover als inaktiv erkennbar bleibt.

    Dank und Gruß

    supi

  • Gewisse Änderungen passieren da nur im aktiven Tab.

    Welche genau meinst du denn?

    Mein Beitrag bezog sich ja nur auf das X zum Schließen vom Tab.

    Das wird auch im aktiven + inaktiven Tab übernommen. Ich habe aber die Entfernung zum rechten Tab-Rand noch vergrößert und links den Abstand zum Seitentitel der dann so leicht verschwindet, vergrößert. Dies wird im inaktiven Tab nicht übernommen.

    Mein Code:

  • @grisu2099

    Danke, #4 tut was es soll.

    Jetzt würde mich noch interessieren, ob als Tüpfelchen auf dem "i" der Text so "ausfadebar" ist wie im Original, nur eben jetzt an der mit #4 definierten Stelle.

    Edit:

    Gefunden: "un" ist das Zauberwort. (unset oder set)

    CSS
    .tab-label-container[textoverflow]:not([pinned]) {
        mask-image: set !important;
        margin-right: 10px !important;
        }

    Danke.

    Supi!

    Einmal editiert, zuletzt von SuperDAU#0815 (8. Juni 2021 um 14:31)

  • Hab noch was beizutragen:

    Für unabhängige Farben bei Hover ob aktiver Tab oder inaktiv.

    mein gesamter Code für den Tabschließen-Button:

    Lernen durch Machen, fetzt uhrst ein.

    mfg

    supi

  • Also bei mir sieht es inzwischen so aus (inkl. eckiger Tabs und Dark/Bright Theme hover)

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 93.

  • haha, da krieg ich ja glatt ein ... "Nickname des Verfassers von #14"

    Hatte mich gerade mühevoll versucht, an die glubschigen Schaltflächen zu gewöhnen und jetzt das...

    Tolle Arbeit @.DeJaVu

    Muss mal sehen... wenn ichs mit meinen Farben zusammenbringe, vielleicht gibts ja auch für mein Füchslein ein visuelles Downgrade, so voll retro und so...

  • Hallo, evtl. speziell @grisu2099, aber gern auch alle anderen:

    Habe jetzt die eckigen Tabs von .DeJaVu aus #14 mit Teilen von 2002Andreas Anpassungen kombiniert. Sieht recht alt-schulisch aus, also Pre-Proton ;-).

    Problem: Es beißt sich mit dem, was wir hier erarbeitet haben und sieht wieder aus wie in #1.

    Gibts da noch nen Dreh?

    mfg

    supi.

    PS: Ohne Daten kann man nur raten - haha:

    und