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

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
    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;
        }
  • Teste bitte:

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

    Den Wert verändern, bis es für dich paßt.

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

  • @ #8


    Hab auch das gefunden:


    CSS
     .tab-close-button[fadein]:hover{
         
        background: #c0c1b7!important;
    }

    Einfach die Farbe weglassen oder eine andere vergeben.

    Danke an alle. Für mich hier erledigt.

    mfg

    supi

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

  • 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