Tabs einfärben 89 und mehr

Zitronella

zu dem "mehr" komme ich später, aber erst einmal wäre mir wichtig die Tabs einzufärben.

Mein Code für ff89 ist momentan

CSS

/* aktiven Tab einfärben */
.tab-background[selected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #b60202 !important;}

/* Tabs einfärben wenn alle Tabs ausgewählt sind*/
.tab-background[multiselected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #b60202 !important;}

nun möchte ich in Privanten Fenstern aber eine andere Farbe haben also statt #b60202 möchte ich dort #610DAB haben.

Wie kann ich das bewerkstelligen?

2002Andreas

Zitat von Zitronella

Wie kann ich das bewerkstelligen?

Teste bitte mal:

CSS

/*nur privater Modus*/

/*Aktiver Tab Hintergrund*/
#main-window[privatebrowsingmode=temporary] .tab-background[selected] {
    background: indigo !important;
    padding-top: 6px !important;        
    }

/*Aktiver Tab weiße Schrift*/
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected] {
    color: white !important;
    }

/*Inaktiver Tab Hintergrund blasser*/
#main-window[privatebrowsingmode=temporary] .tab-background:not([selected]) {
     opacity: .3 !important;
     background: indigo !important;
    padding-top: 6px !important;        
    }

/*Inaktiver Tab weiße Schrift*/
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([selected]) {
     color: white !important;
    }

Alles anzeigen

Zitronella

Sieht dann leider so aus

oben zwei normale Tabs

unten zwei Tabs im privaten Fenster

Das rot soll im privaten Fenster ganz weg sein.

oh aber durch deinen Code kam ich trozdem auf die richtige Spur

CSS

/* aktiven Tab einfärben im privaten Modus */
#main-window[privatebrowsingmode=temporary] .tab-background[selected] {
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #610DAB !important;}

/* Tabs einfärben im privaten Modus wenn alle Tabs ausgewählt sind */
#main-window[privatebrowsingmode=temporary] .tab-background[multiselected] {
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #610DAB !important;}

Das ist was ich wollte. Danke schonmal. Später gehts hier noch weiter mit Fragen

2002Andreas

CSS

/* aktiven Tab einfärben */
.tab-background[selected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #b60202 !important;}

/* Tabs einfärben wenn alle Tabs ausgewählt sind*/
.tab-background[multiselected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 0px #b60202 !important;}


/*nur privater Modus*/

/*Aktiver Tab Hintergrund*/
#main-window[privatebrowsingmode=temporary] .tab-background[selected] {
    background: transparent !important;
    padding-top: 6px !important;  
    box-shadow: inset 0px 0px 40px 0px #610DAB  !important;}
    }

/*Aktiver Tab weiße Schrift*/
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected] {
    color: white !important;
    }

/*Inaktiver Tab Hintergrund blasser*/
#main-window[privatebrowsingmode=temporary] .tab-background:not([selected]) {
     opacity: .3 !important;
     background: indigo !important;
    padding-top: 6px !important;        
    }

/*Inaktiver Tab weiße Schrift*/
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([selected]) {
     color: white !important;
    }

Alles anzeigen

Besser so?

Ansonsten für die privaten Tabs einfach das vorne zusätzlich in den Code:

#main-window[privatebrowsingmode=temporary]

Zitronella

siehe oben, ich hab schon was ich wollte.

2002Andreas

Alles klar 😊

Zitronella

Nächste Baustelle:

Ich habe die Tableiste angepasst mit:

CSS

#TabsToolbar {
color:#fff!important;
background: #221B1C !important;
}

Nun hätte ich gerne auch diesen weißen Hintergrund weg beim Hovern von Neuer Tab/Alle Tabs auflisten/Pfeil nach rechts/Pfeil nach links. Also am liebsten so wie es ganz rechts aussieht bei Minimieren/Maximieren/Schließen Button.

Ich komme leider nicht weiter. Ideen wie ich das bewerkstelligen kann?

2002Andreas

Zitat von Zitronella

diesen weißen Hintergrund weg

Meinst du das so?

CSS

#TabsToolbar {
color:#fff!important;
background: #221B1C !important;
}

#alltabs-button > stack {
  background: none !important;
}

#alltabs-button:hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
  background: #888888 !important;
  opacity: .5 !important;
}

#new-tab-button {
 filter: invert(7%) sepia(8%) saturate(0%)
   hue-rotate(161deg) brightness(52%) contrast(88%) !important;
}

Alles anzeigen

Zitronella

Ist leider immer noch weiß bei Hover

2002Andreas

Zitat von Zitronella

Ist leider immer noch weiß bei Hover

Das ist auch ein anderer Button als in deinem Screenshot oben

Teste bitte wieder:

CSS

#TabsToolbar {
color:#fff!important;
background: #221B1C !important;
}

#tabs-newtab-button,
#alltabs-button > stack {
  background: none !important;
}

#alltabs-button:hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
  background: #888888 !important;
  opacity: .5 !important;
}
#tabs-newtab-button,
#new-tab-button {
 filter: invert(7%) sepia(8%) saturate(0%)
   hue-rotate(161deg) brightness(52%) contrast(88%) !important;
}

Alles anzeigen

Zitronella

Irgendwie isses das noch nicht was ich möchte.

Bei < und > ist weiterhin ein weißer Hintergrund beim hovern

Außerdem hätte ich gerne die Symbole weiß (momentan sind < und > und + und v noch dunkel

Also eigentlich genau so als würde ich das dunkle Theme von Firefox nutzen.

dies ist die Darstellung vom dunklen Theme, was ich allerdings nicht nutzen möchte, sondern weiterhin das standard Theme aber halt das Aussehen vom dunklen Theme in der Tab-Leiste

Zitronella

So, einen großen Teil hab ich heute noch heraus gefunden.

Ob da Fehler drin sind, mag ich nicht zu beurteilen, oder ob was doppeltgemoppelt ist. Ich hab ja keine Ahnung von CSS und probiere nur wild drauf los. Bitte gerne Bescheid geben wenn was verbesserungswürdig ist.

Der Code ist

CSS

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !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;
}

Alles anzeigen

Jetzt möchte ich nur noch den Hintergrund beim hovern über diese 4 Symbole geändert haben.

Wäre toll wenn mir jemand helfen würde, den richtigen Eintrag dafür zu finden

Zitronella

irgendwie muss es etwas zu tun haben mit:

--button-hover-bgcolor: rgb(224,224,230);

--button-active-bgcolor: rgb(207,207,216);

Denn wenn ich diese beiden Einträge in den Browserwerkzeugen deaktiviere, ist es so wie ich es möchte.

NUR wie bekomme ich das in die userChrome.css?

2002Andreas

Zitat von Zitronella

nur noch den Hintergrund beim hovern

Teste bitte wieder:

CSS

:root:not(:-moz-lwtheme) {
  --button-hover-bgcolor: #888888 !important;
}

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !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;
}

Alles anzeigen

Zitronella

Hallo danke, das sieht auf den ersten Blick erstmal gut aus, allerdings wirkt es sich auch auf andere Butons aus wie das Hamburger Menü usw.

Das möchte ich nicht. Das beachtete ich nicht in meinem Beitrag #14

Vielleicht kommen wir dem Ganzen eher damit auf die Spur:

Entweder wirkt dieser Code, der die Buttons weiß einfärbt

CSS

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !important;
}

/* + Button für neuer Tab weiß eingefärbt */
#tabs-newtab-button,#new-tab-button {
fill: rgb(255, 255, 255)!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 */
#tabs-newtab-button,#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

Alles anzeigen

oder ich nehme diesen Code, der den Hintergrund der Buttons verändert.

CSS

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !important;
}

#tabs-newtab-button,#new-tab-button {
 filter: invert(7%) sepia(8%) saturate(0%)
   hue-rotate(161deg) brightness(52%) contrast(88%) !important;
}

#toolbarbutton,#scrollbutton-down,#scrollbutton-up,#tabbrowser-arrowscrollbox::part(scrollbutton-up),#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
 filter: invert(7%) sepia(8%) saturate(0%)
   hue-rotate(161deg) brightness(52%) contrast(88%) !important;
}

#tabs-newtab-button,#alltabs-button {
 filter: invert(7%) sepia(8%) saturate(0%)
   hue-rotate(161deg) brightness(52%) contrast(88%) !important;
}

Alles anzeigen

Wie kann man quasi beide vereinigen? Denn wenn ich beide in die userChrome.css einfüge, hat der letztere Code wohl Vorrang und die Buttons sind nicht mehr weiß.

2002Andreas

Zitat von Zitronella

Wie kann man

Noch ein Versuch.

Die Farbe habe ich nur zwecks besserer Erkennung mal genommen.

So wie ich das sehe, wirkt der Code auch nur in der Tableiste.

CSS

#TabsToolbar {
--toolbarbutton-hover-background:  rgb(0, 97, 224) !important;
}

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !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;
}

Alles anzeigen

Zitronella

WOW, sieht genau so aus wie ich es haben möchte.

Vielen lieben Dank

Ich habe den Code noch etwas ergänzt und die beiden Farben abgeändert in

CSS

#TabsToolbar {
--toolbarbutton-hover-background:  rgb(83, 77, 78) !important;
--toolbarbutton-active-background:  rgb(105, 100, 101) !important;
}

/*Tab-Leiste Hintergrundfarbe geändert und weiße Schrift */
#TabsToolbar {
color:#fff!important;
background: #221B1C !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;
}

Alles anzeigen

Verrätst du mir noch wie du letztendlich darauf gekommen bist. Ich hab mich seit 3 Tagen dumm und dusselig gesucht danach.

2002Andreas

Zitat von Zitronella

wie du letztendlich darauf gekommen bist.

Durch ausprobieren, darum hat es auch eine Weile gedauert

Ich weiß, dass man statt root auch die genaue Bezeichnung nehmen kann, also hier #TabsToolbar.

(Manche root Bezeichnung soll in Zukunft auch wegfallen.)

Dann hatte ich Probleme mit der Farbbezeichnung, erst mit rgb Farben hatte es dauerhaft funktioniert.

Freut mich aber, dass ich dir damit helfen konnte, war wie immer gern geschehen

Zitronella

Wahnsinn, wenn du schon länger brauchtest, wie soll ich dann darauf kommen

Eigentlich sollte das "mehr" im Threadtitel auch beeinhalten, dass ich die Icons wieder haben wollte im Menü und Kontextmenü.

Jetzt sind 3 Tage vergangen und ich habe mich dran gewöhnt, da die Menüs doch deutlich aufgeräumter sind. Somit entfällt das.

Jetzt bin ich wieder vollauf zufrieden mit meinem angepassten Firefox und das hauptsächlich durch dich 2002Andreas

Ich model meinen Firefox zwar immer etwas um, wenn es größere Design Änderungen gab, aber letztendlich passe ich mich auch den Neuheiten an, bleibe aber meinen Vorlieben treu.

Mein Firefox im Wandel der Zeit

Firefox 20-? (Apr. 2013)

Firefox 29- ? (Jun 2015)

Firefox 57-88 (Nov 2017-Mai 2021)

Firefox 89-? (Juni 2021)

2002Andreas

Zitat von Zitronella

das hauptsächlich durch dich

Danke für das Kompliment

Tabs einfärben 89 und mehr

Ähnliche Themen

...und eine weitere Bitte um userChrome.css-Anpassung für FX 89

Selected Tab, Hintergrundfarbe ändern, FF 89 Beta

Symbolleiste AddOn-Button einfärben

Tabs verschieben in mehrzeiliger Tableiste

bekomme mehrzeilige Tableisten (auch gerne mehrzeilige persönliche Leiste) nicht hin...

Einige Tabs nach aufgerufenen Websites einfärben.