Frage zu Optik der Tabs: Hintergrund und Text

genetic

Hallo,

aktuell nutze ich folg. Script für die Optik der Tabs:

CSS

/*Menüleiste eingefärbt*/
#TabsToolbar {
color:#fff!important;
background: #0078D7 !important;
}

/*Abgerundete Tabs*/
.tab-background {
  border-radius: 80px !important;
}

/*Abgerundeter Schließen Button*/
.tab-close-button {
  border-radius: 80px !important;
}

/*Aktiver Tab hover*/
.tabbrowser-tab:is([visuallyselected="true"]:hover, [multiselected]) > .tab-stack > .tab-background {
  background: #CFCFD8 !important;
}

/*Inaktiver Tab hover*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
    background: #005A9E !important;    
}

/*Inaktiver Tab*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  background: #3896E0 !important   
}

/*Tab schließen X hover*/
.tab-content > .tab-close-button:hover {
  background: #E81123 !important;
opacity: .7!important;
}

/*Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird */
.tabbrowser-tab:hover .tab-close-button {
display: block !important; 
}

/* < und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt */
#toolbarbutton, #scrollbutton-down,#scrollbutton-up, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
fill: rgb(255, 255, 255)!important;
}

/*v-Button für Alle Tabs auflisten (wenn Tableiste sehr voll) weiß eingefärbt */
#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

/* + Button für neuer Tab weiß eingefärbt */
#tabs-newtab-button, #TabsToolbar #new-tab-button {
fill: rgb(255, 255, 255)!important;
}

#tabs-newtab-button, #TabsToolbar #new-tab-button:hover {
fill: white!important;
}

/*Runder Neuer Tab Button*/
#TabsToolbar #tabs-newtab-button > image {
  border-radius: 80px !important;
}

/*Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken */
#TabsToolbar {
--toolbarbutton-hover-background:  #005A9E !important
}

Alles anzeigen

Was mir jetzt noch fehlt:

1. Aktiver Tab (Farbe Hintergrund)

2. Aktiver Tab (Farbe Text)

Danke vorab für Hilfe.

Grüße

genetic

2002Andreas

Zitat von genetic

Was mir jetzt noch fehlt:

Teste bitte:

CSS

/*Menüleiste eingefärbt*/
#TabsToolbar {
color:#fff!important;
background: #0078D7 !important;
}

/*Abgerundete Tabs*/
.tab-background {
  border-radius: 80px !important;
}

/*Abgerundeter Schließen Button*/
.tab-close-button {
  border-radius: 80px !important;
}

/*Aktiver Tab rot*/
.tabbrowser-tab[visuallyselected]  > .tab-stack > .tab-background {
    background: red !important;   
}

/*Aktiver Tab Schrift gelb*/
.tabbrowser-tab[visuallyselected] {
    color: yellow !important;
}

/*Aktiver Tab hover*/
.tabbrowser-tab:is([visuallyselected]:hover, [multiselected]) > .tab-stack > .tab-background {
  background: #CFCFD8 !important;
}

/*Inaktiver Tab hover*/
.tabbrowser-tab:not([visuallyselected]):hover  > .tab-stack > .tab-background {
    background: #005A9E !important;    
}

/*Inaktiver Tab*/
.tabbrowser-tab:not([visuallyselected]) > .tab-stack > .tab-background {
  background: #3896E0 !important   
}

/*Tab schließen X hover*/
.tab-content > .tab-close-button:hover {
  background: #E81123 !important;
opacity: .7!important;
}

/*Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird */
.tabbrowser-tab:hover .tab-close-button {
display: block !important; 
}

/* < und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt */
#toolbarbutton, #scrollbutton-down,#scrollbutton-up, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
fill: rgb(255, 255, 255)!important;
}

/*v-Button für Alle Tabs auflisten (wenn Tableiste sehr voll) weiß eingefärbt */
#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

/* + Button für neuer Tab weiß eingefärbt */
#tabs-newtab-button, #TabsToolbar #new-tab-button {
fill: rgb(255, 255, 255)!important;
}

#tabs-newtab-button, #TabsToolbar #new-tab-button:hover {
fill: white!important;
}

/*Runder Neuer Tab Button*/
#TabsToolbar #tabs-newtab-button > image {
  border-radius: 80px !important;
}

/*Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken */
#TabsToolbar {
--toolbarbutton-hover-background:  #005A9E !important
}

Alles anzeigen

Die Farben musst du dir anpassen.

BrokenHeart

Zitat von 2002Andreas

.tabbrowser-tab:not([visuallyselected=]) > .tab-stack > .tab-background {

Da ist noch ein Fehler in Zeile 38...

2002Andreas

Zitat von BrokenHeart

Da ist noch ein Fehler in Zeile 38..

Danke für den Hinweis, hatte ich übersehen

Habe ich gleich mal geändert.

Dharkness

Zitat von BrokenHeart

Da ist noch ein Fehler in Zeile 38...

Und auch noch einer in Zeile 1, wobei der keine Auswirkung auf das CSS hat, aber das ist nicht wirklich die Menüleiste.

2002Andreas

Zitat von Dharkness

das ist nicht wirklich die Menüleiste.

Jetzt aber

CSS

/*Tableiste eingefärbt*/
#TabsToolbar {
color:#fff!important;
background: #0078D7 !important;
}


/*Abgerundete Tabs*/
.tab-background {
border-radius: 80px !important;
}


/*Abgerundeter Schließen Button*/
.tab-close-button {
border-radius: 80px !important;
}

/*Aktiver Tab rot*/
.tabbrowser-tab[visuallyselected]  > .tab-stack > .tab-background {
background: red !important;
}

/*Aktiver Tab Schrift gelb*/
.tabbrowser-tab[visuallyselected] {
color: yellow !important;
}

/*Aktiver Tab hover*/
.tabbrowser-tab:is([visuallyselected]:hover, [multiselected]) > .tab-stack > .tab-background {
background: #CFCFD8 !important;
}

/*Inaktiver Tab hover*/
.tabbrowser-tab:not([visuallyselected]):hover  > .tab-stack > .tab-background {
background: #005A9E !important;
}

/*Inaktiver Tab*/
.tabbrowser-tab:not([visuallyselected]) > .tab-stack > .tab-background {
background: #3896E0 !important
}

/*Tab schließen X hover*/
.tab-content > .tab-close-button:hover {
background: #E81123 !important;
opacity: .7!important;
}

/*Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird */
.tabbrowser-tab:hover .tab-close-button {
display: block !important;
}

/* < und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt */
#toolbarbutton, #scrollbutton-down,#scrollbutton-up, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
fill: rgb(255, 255, 255)!important;
}

/*v-Button für Alle Tabs auflisten (wenn Tableiste sehr voll) weiß eingefärbt */
#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

/* + Button für neuer Tab weiß eingefärbt */
#tabs-newtab-button, #TabsToolbar #new-tab-button {
fill: rgb(255, 255, 255)!important;
}

#tabs-newtab-button, #TabsToolbar #new-tab-button:hover {
fill: white!important;
}

/*Runder Neuer Tab Button*/
#TabsToolbar #tabs-newtab-button > image {
border-radius: 80px !important;
}

/*Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken */
#TabsToolbar {
--toolbarbutton-hover-background:  #005A9E !important
}

Alles anzeigen

genetic

2002Andreas

Perfekt, danke.

BrokenHeart

ebenfalls danke.

Dharkness

...sondern?

2002Andreas

Zitat von genetic

...sondern?

Die Tableiste, nicht die Menüleiste

Zitat von genetic

Perfekt, danke.

Gerne doch

genetic

Zitat von 2002Andreas

Die Tableiste, nicht die Menüleiste

Öhm - ich hab's geändert und es sieht alles aus wie vorher!?

Edit: Achso - euch ging's nur um's Wording

2002Andreas

Zitat von genetic

es sieht alles aus wie vorher!?

Das wäre die Menüleiste:

Also die über der Tableiste.

Es ging dabei nur um deine Beschreibung, nicht um den Code.

Dharkness

Zitat von genetic

Öhm - ich hab's geändert und es sieht alles aus wie vorher!?

Sprich Du hast den Code von 2002Andreas aus Beitrag #6 verwendet statt Deinem?

genetic

Zitat von Dharkness

Zitat von genetic

Öhm - ich hab's geändert und es sieht alles aus wie vorher!?

Sprich Du hast den Code von 2002Andreas aus Beitrag #6 verwendet statt Deinem?

Ja und die Farben angepasst und alles funktioniert - ich hatte lediglich einen "Fehler" in der Beschreibung, aber der Code war richtig - siehe #10.

2002Andreas

Zitat von genetic

ich hatte lediglich einen "Fehler" in der Beschreibung

So war es.

Zitat von genetic

alles funktioniert

Dharkness

Zitat von genetic

Ja und die Farben angepasst und alles funktioniert

Hm, für mich war das etwas missverständlich formuliert, aber wenn alles gut ist, ist es ja fein.

Frage zu Optik der Tabs: Hintergrund und Text

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Firefox 117 Tabs mal wieder unten

Firefox 113 Probleme mit TABs und Kontext Menü

Tab mit Plus-Zeichen ganz rechts in Firefox 112

nach FF 107: Tableiste unter der Lesezeichensymbolleiste wird zu hoch dargestellt

Probleme mit TABs verschieben in Leiste