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

SuperDAU#0815

Hallo,

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

CSS

/* Tab schließen-Button ändern*/

#TabsToolbar .tab-close-button[selected="true"] {
    display: -moz-box !important;
    margin-right: -5px !important;
    fill:red!important;
    opacity: .9!important; }
/*#TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon {
      background-color: white !important;
}*/
/*#TabsToolbar .tab-close-button[selected="true"]:hover .toolbarbutton-icon {
      background-color: #3a2e18 !important;
    border-radius: 3px !important;
}*/
.tabbrowser-tab[selected="true"] .tab-close-button.close-icon:hover{
list-style-image: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAECSURBVDhPpdHLTsJAGIbh/wYpoawE4mGFJsI1kLAw8YKUloPMtJ0STurGeAUmRjmMNyAfDCHTH2JkSJ40na/zrkpv75PRRKaD3lGQIKThWLAP/4SQ1KDrjFTadUZJ2nHG41n9ZnFVYSMsLsuf9002UqI6Nlz6JdLFvD3++B7GWf3aHoFi1Wb05qouepmjvz3aKEra+3b9rmQXjMMxmOyPEhCHB2k/Z8X8q0EyDvfpwrrE07wsfY9dMEhGAbM0QSGXOaLPXgMezy9KdmmY/rtWtUcgEQW2r9vq/PyMjYDx467BRhKy5Yz6suXstFjGQV88Olj/5+lLEsXhk3g4CsrnV7UCVFZdVYzVsbwAAAAASUVORK5CYII=") !important; 
-moz-image-region: rect(0px 20px 20px 0px) !important;
}
#TabsToolbar .tab-close-button{
    display: -moz-box !important;
    margin-right: -5px !important;
    fill:grey!important }
#closetab_fmarin_com-browser-action{
    filter: none !important;
    fill:grey!important;
list-style-image: url("chrome://browser/skin/stop.svg") !important;}

Alles anzeigen

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

grisu2099

Zitat von SuperDAU#0815

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;
    }

SuperDAU#0815

grisu2099

der Text geht damit bis an das "x" heran. "Scharf", ja, aber ich hätte gern etwas Abstand dazwischen. Etwa in der Größe wie beim "hover" der Schaltfläche um das "x".

grisu2099

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.

2002Andreas

Zitat von SuperDAU#0815

ohne den helleren "Schatten" um das kleine "x".

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

CSS

/* Tab schließen-Button ändern*/

#TabsToolbar .tab-close-button[selected="true"] {
    display: -moz-box !important;
    margin-right: -5px !important;   
    opacity: .9!important; }


 .tab-close-button[fadein]:hover{
      fill:white!important;
    background: red!important;
}

#TabsToolbar .tab-close-button{
    display: -moz-box !important;
    margin-right: -5px !important;
}

#closetab_fmarin_com-browser-action{
    filter: none !important;
    fill:grey!important;
list-style-image: url("chrome://browser/skin/stop.svg") !important;}

Alles anzeigen

Mr. Cutty

2002Andreas

Gewisse Änderungen passieren da nur im aktiven Tab. Was muss für den inaktiven Tab hinzugefügt werden?

2002Andreas

Zitat von Mr. Cutty

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.

SuperDAU#0815

@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

Mr. Cutty

Zitat von 2002Andreas

Zitat von Mr. Cutty

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:

CSS

/* --------------------------- */
/* Tab schließen-Button ändern */
/* --------------------------- */

#TabsToolbar .tab-close-button[selected="true"] {
display: -moz-box !important;
margin-right: 0px !important;
margin-left: 8px !important;
opacity: .9!important;
}

.tab-close-button[fadein]:hover{
fill: white !important;
background: red !important;
}

#TabsToolbar .tab-close-button{
display: -moz-box !important;
margin-right: -5px !important;
}

#closetab_fmarin_com-browser-action{
filter: none !important;
fill: white !important;
list-style-image: url("chrome://browser/skin/stop.svg") !important;
}

Alles anzeigen

SuperDAU#0815

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

SuperDAU#0815

@ #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

.DeJaVu

Danke euch, habs für mich übernommen.

SuperDAU#0815

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:

CSS

/* Tab schließen-Button ändern*/

#TabsToolbar .tab-close-button[selected="true"] {
    display: -moz-box !important;
    margin-right: -5px !important; 
   fill:red!important; 
    opacity: .9!important; 

}


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



#TabsToolbar .tab-close-button{
    display: -moz-box !important;
    margin-right: -5px !important;

}

#closetab_fmarin_com-browser-action{
    filter: none !important;
    fill: #c0c1b7 !important;
list-style-image: url("chrome://browser/skin/stop.svg") !important;}

/*******************************************************************************************/

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


/*******************************************************************************************/

#TabsToolbar .tab-close-button[selected="true"]:hover{
      fill:#1e81b0!important;
    background: #6dc2df!important; {
    display: -moz-box !important;
    margin-right: -5px !important;
opacity: .5!important;  
   

}

Alles anzeigen

Lernen durch Machen, fetzt uhrst ein.

mfg

supi

.DeJaVu

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

CSS

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: #A3A3A3 !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    border-top: 2px solid transparent !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
    background-color: #909090 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: #F9F9FA !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}



/* dark theme */

toolbar[brighttext]:-moz-lwtheme .tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: #686868 !important;
}

toolbar[brighttext]:-moz-lwtheme .tabbrowser-tab:not([visuallyselected="true"]):hover
{
    background-color: #ff5400c0 !important;
}


/* close button */

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

toolbar[brighttext]:-moz-lwtheme .tab-close-button[fadein]:hover
{
    background: #007bffc0 !important;
}

toolbar[brighttext]:-moz-lwtheme .tabbrowser-tab[selected="true"] .tab-close-button[fadein]:hover
{
    background: #ff5400 !important;
}

Alles anzeigen

SuperDAU#0815

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...

SuperDAU#0815

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:

CSS

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: #bdc0af!important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    border-top: 2px solid transparent !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover  /*inaktiv + hover - obere Linie*/
{
    border-top: 2px solid grey !important;
    background-color: #bdc0af!important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: #F9F9FA !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}

/*****************************************************************************************************/
/* Höhe und Abstand der Tableiste*/
#TabsToolbar {
    height: 36px !important;
}

/*Tab Inhalt Abstände*/
:root {
   --proton-tab-radius: 0px !important;
   --proton-tab-block-margin: 0px !important;
   --inline-tab-padding: 10px !important;
}

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 36px !important;
   max-height: 36px !important;
   box-shadow: none !important; 
}



/*Tabinhalt auf ganze Tabbreite*/
.tab-label-container {
   margin: auto !important;
}

Alles anzeigen

und

CSS

/* Tab schließen-Button ändern*/

#TabsToolbar .tab-close-button[selected="true"] {
    display: -moz-box !important;
    margin-right: -5px !important; 
   fill:red!important; 
    opacity: .9!important; 

}


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



#TabsToolbar .tab-close-button{
    display: -moz-box !important;
    margin-right: -5px !important;

}

#closetab_fmarin_com-browser-action{                          /*  "X"  in Symbolleiste   */
    filter: none !important;
    fill: grey!important;
list-style-image: url("chrome://browser/skin/stop.svg") !important;}
/*******************************************************************************************/

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


/*******************************************************************************************/

#TabsToolbar .tab-close-button[selected="true"]:hover{
      fill:#1e81b0!important;
    background: #6dc2df!important; {
    display: -moz-box !important;
    margin-right: -5px !important;
opacity: .5!important;  
   

}

Alles anzeigen