Tabs farbig hervorheben bei nightly UX australis

Road-Runner

Zitat von Zitronella

und lande immer auf meinen Beitrag #197 von Thread "Versionsinfo: Welche Erweiterungen/Themes/Plugins nutzt Ihr?" auf Seite 14 :-??

Ich ebenfalls.

Fox2Fox

Zitat von Boersenfeger

lande ich nicht bei dir, sondern bei Etymotic.

Wie ist es hiermit?
https://www.camp-firefox.de/forum/viewtopi…=843786#p843786

Boersenfeger

Das klappt...
:idea:
Das ist bestimmt wieder meine anscheinend außergewöhnliche Einstellung der Reihenfolge..

Zitronella

Ich glaube ich belasse es jetzt dabei. Ich habe nach langem rumprobieren jetzt doch noch heraus bekommen wie der Code geht, damit die Schrift in den Tabs weiß ist und in ungelesenen Tabs rötlich/kursiv. Auch im privaten Tab ist es rötlich/kursiv, aber das stört mich nicht wirklich, denn wenn ich den Tab anwähle, sehe ich ja dass er lila (also privat) ist.
Der Code dazu war folgender:

CSS

/* Weiße Schrift in allen Tabs und rot/kursiv in ungelesenen Tabs (auch im privaten Modus) */
.tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#b60202!important;}
.tabbrowser-tab{color:#fff!important}

Ich bin nun ziemlich zufrieden und kann mich so nach einem Jahr auch mit Firefox Australis anfreunden :mrgreen: und finde es mittlerweile sogar schöner als vorher [Blockierte Grafik: http://www.smilies.4-user.de/include/Verleg…ie_verl_049.gif]

Hier nochmal eine Grafik wie es nun aussieht

Wenn noch jemand Verbesserungsvorschläge hat, immer her damit. (gerade bezüglich private Browsen ohne die Erweiterung PrivateTab)

Zitronella

kleines Update: ich wollte das gleiche Aussehen natürlich auch für mein Linux (Manjaro) Netbook haben und habe festgestellt dass dort einige Grafiken (wie zb. das Plus+ Zeichen für neuen Tab) nicht angezeigt werden. Keine Info im Netz gefunden wo das Äquivalent z.B. zu "chrome://browser/skin/tabbrowser/newtab-inverted.png" ist. Also umständlich im Installationsverzeichnis unter Linux die omni.ja raus kopiert und entpackt und darin gesucht. Wurde endlich fündig
Hier der Code für Linux (Arch) Benutzer:

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Tableiste komplett transparent */
@-moz-document url(chrome://browser/content/browser.xul){
	#TabsToolbar:not(:-moz-lwtheme)::after,
	#TabsToolbar:not(:-moz-lwtheme)::before {
	  box-shadow: none !important;
	}
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-start-indicator,
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-end-indicator {
	  background-image: none !important;
	}


/* Tabs immer anzeigen */
    .tabbrowser-tab > .tab-stack > .tab-background{
      background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-end.png);
      background-position: left bottom, 30px bottom, right bottom!important;
      background-repeat: no-repeat;
      background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%!important;


    }


        #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
        .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
        #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
        background-image:none!important;


    }         



/* Weiße Schrift in allen Tabs und rot/kursiv in ungelesenen Tabs (auch im privaten Modus) */
.tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#b60202!important;}
.tabbrowser-tab{color:#fff!important}


/* aktiven Tab einfärben */
.tab-background,.tab-background-middle{
background-color:transparent!important}


.tab-background .tab-background-middle[selected=true]{
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
linear-gradient(transparent,transparent 2px,#b60202 2px,transparent)!important;
background-size:auto 100%!important}


.tab-background-start[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start)!important}


.tab-background-end[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end)!important}


.tab-background .tab-background-start[selected=true]::before,.tab-background .tab-background-end[selected=true]::before{
content:""!important;
display:-moz-box!important;
background-color:transparent!important;
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),linear-gradient(#b60202 0px,transparent)!important} 


/* privates, aktives Fenster/Tab einfärben */
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-start[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-end[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),linear-gradient(transparent 2px,#6913A3 2px,#6913A3 2px,transparent 3px,transparent 3px,#6913A3 4px,#6913A3 4px,transparent)!important
}


/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button {
	  list-style-image: url(chrome://browser/skin/devtools/newtab-inverted.png) !important;
	  -moz-image-region: rect(0, 16px, 18px, 0) !important;
	}


	#main-window #TabsToolbar > #alltabs-button {
	  list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-inverted.png) !important;
	  -moz-image-region: rect(0, 9px, 18px, 0) !important;
	}
	#main-window .scrollbutton-up,#main-window .scrollbutton-down
	{list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png") !important; }

Alles anzeigen

Zitronella

Es ist mal wieder so weit und ich bräuchte Hilfe.
Ich habe nightly firefox-57.0a1 ausprobiert und meine alte chrome.css

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Tableiste komplett transparent */
@-moz-document url(chrome://browser/content/browser.xul){
	#TabsToolbar:not(:-moz-lwtheme)::after,
	#TabsToolbar:not(:-moz-lwtheme)::before {
	  box-shadow: none !important;
	}
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-start-indicator,
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-end-indicator {
	  background-image: none !important;
	}


/* Tabs immer anzeigen */
    .tabbrowser-tab > .tab-stack > .tab-background{
      background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-end.png);
      background-position: left bottom, 30px bottom, right bottom!important;
      background-repeat: no-repeat;
      background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%!important;


    }


        #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
        .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
        #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
        background-image:none!important;


    }         



/* Weiße Schrift in allen Tabs und hellrot/kursiv in ungelesenen Tabs (auch im privaten Modus) */
.tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
.tabbrowser-tab{color:#fff!important}


/* aktiven Tab einfärben */
.tab-background,.tab-background-middle{
background-color:transparent!important}


.tab-background .tab-background-middle[selected=true]{
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
linear-gradient(transparent,transparent 2px,#b60202 2px,transparent)!important;
background-size:auto 100%!important}


.tab-background-start[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start)!important}


.tab-background-end[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end)!important}


.tab-background .tab-background-start[selected=true]::before,.tab-background .tab-background-end[selected=true]::before{
content:""!important;
display:-moz-box!important;
background-color:transparent!important;
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),linear-gradient(#b60202 0px,transparent)!important} 


/* privates, aktives Fenster/Tab einfärben */
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-start[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-end[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),linear-gradient(transparent 2px,#6913A3 2px,#6913A3 2px,transparent 3px,transparent 3px,#6913A3 4px,#6913A3 4px,transparent)!important
}


/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button {
	  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg) !important;
	  -moz-image-region: rect(0, 16px, 18px, 0) !important;
	}


	#main-window #TabsToolbar > #alltabs-button {
	  list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.png) !important;
	  -moz-image-region: rect(0, 9px, 18px, 0) !important;
	}
	#main-window .scrollbutton-up,#main-window .scrollbutton-down
	{list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png") !important; }

Alles anzeigen

eingefügt.
Funktioniert natürlich nicht mehr.

Wie müsste ich den Code abändern, damit die Tabs wieder so schön wie vorher transparent/farbig eingefärbt werden? Das sie nun wieder eckig sind und nicht mehr rund finde ich zwar mittlerweile schade, aber könnte damit leben.

Zitronella

Habe jetzt schon einiges selbst hin bekommen.
ganzer Code

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Tableiste komplett transparent */
@-moz-document url(chrome://browser/content/browser.xul){
	#TabsToolbar:not(:-moz-lwtheme)::after,
	#TabsToolbar:not(:-moz-lwtheme)::before {
	  box-shadow: none !important;
	}
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-start-indicator,
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-end-indicator {
	  background-image: none !important;
	}


/* Tabs immer anzeigen */
    .tabbrowser-tab > .tab-stack > .tab-background


        #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
        .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
        #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
        background-image:none!important;


    }         



/* Weiße Schrift in allen Tabs und hellrot/kursiv in ungelesenen Tabs (auch im privaten Modus) */
.tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
.tabbrowser-tab{color:#fff!important}


/* aktiven Tab einfärben */
.tab-background{
background-color:transparent!important}


.tabbrowser-tab[selected="true"]{
background: transparent !important;
color: #ffffff !important;
text-shadow:  0px 0px 0px !important;
box-shadow: inset 5px 5px 10px 10px  #b60202 !important;
}




/* privates, aktives Fenster/Tab einfärben*/
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-start[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-end[selected=true]:not(:-moz-lwtheme)::before,
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),linear-gradient(transparent 2px,#6913A3 2px,#6913A3 2px,transparent 3px,transparent 3px,#6913A3 4px,#6913A3 4px,transparent)!important
}  


/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button {
	  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg) !important;
	  -moz-image-region: rect(0, 16px, 18px, 0) !important;
	}


	#main-window #TabsToolbar > #alltabs-button {
	  list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.png) !important;
	  -moz-image-region: rect(0, 9px, 18px, 0) !important;
	}
	#main-window .scrollbutton-up,#main-window .scrollbutton-down
	{list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png") !important; }

Alles anzeigen

-Wobei jetzt nur das + für den neuen Tab chrome://browser/skin/tabbrowser/newtab.svg noch schwarz ist und ich nicht weiß wie ich ihn weiß bekomme
-genauso wie den Down Pfeil chrome://browser/skin/toolbarbutton-dropdown-arrow.png

-Außerdem ist der Code für "/* privates, aktives Fenster/Tab einfärben*/" deaktiviert, weil das nur für die Erweiterung Private Tab funktioniert. Vielleicht lässt sich da in Zukunft mit Incognito This Tab was machen :-?? Hat ja noch Zeit.

Sören Hentzschel

Zitat von Zitronella

-Wobei jetzt nur das + für den neuen Tab chrome://browser/skin/tabbrowser/newtab.svg noch schwarz ist und ich nicht weiß wie ich ihn weiß bekomme

#main-window #TabsToolbar > #new-tab-button { fill: red; }

Zitat von Zitronella

-genauso wie den Down Pfeil chrome://browser/skin/toolbarbutton-dropdown-arrow.png

Da das eine PNG-Datei ist: ersetzen gegen eine neue Grafik.

Zitronella

Ich habe nun aus den Teil

CSS

/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button {
	  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg) !important;
	  -moz-image-region: rect(0, 16px, 18px, 0) !important;
	}

geändert in:

Code

/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button { fill: white; }
	}

aber es ändert sich das [+] für einen neuen Tab nicht in weiß :-?? Was mache ich falsch?

Sören Hentzschel

Wahrscheinlich brauchst du auch noch ein !important. Aber grundsätzlich sollte der Code funktionieren, siehe Screenshot. Bei mir fehlt es eben, weil das nie notwendig ist, wenn man mit den Entwickler-Werkzeugen testet. Da du es sonst überall dabei stehen hast, vermute ich mal, dass es notwendig ist.

Zitronella

Zitat von Sören Hentzschel

Wahrscheinlich brauchst du auch noch ein !important.

genau das wars, wenn man weiß wo dieses !important hin gehört. Ich hab jetzt 20min gebraucht mit Trial and Error um heraus zu finden wo diese genau hin gehört. menno, ich kenn mich doch mit so code Zeugs überhaupt nicht aus. :traurig:

CSS

/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button { fill: white!important; }

funktioniert :klasse: danke

kannst du mir noch erklären wie du genau zu dieser Entwickler Konsole kommst, in der dann chrome://browser/content/browser.xml in der oberen Zeile drin steht, wie auf deinem Bild? (devtools.chrome.enabled habe ich auf true gesetzt in about:config ... falls das dafür nötig ist)

Sören Hentzschel

Zitat von Zitronella

genau das wars, wenn man weiß wo dieses !important hin gehört. Ich hab jetzt 20min gebraucht mit Trial and Error um heraus zu finden wo diese genau hin gehört. menno, ich kenn mich doch mit so code Zeugs überhaupt nicht aus. :traurig:

Im Prinzip gehört das einfach nur an die gleiche Stelle, wo du es sonst auch überall hast.

In "Pseudo-CSS":

CSS

<selektor> {
  <eigenschaft>: <wert> !important;
  <eigenschaft>: <wert> !important;
}

Vielleicht hilft dir diese Darstellung für das nächste Mal.

Zitat von Zitronella

kannst du mir noch erklären wie du genau zu dieser Entwickler Konsole kommst, in der dann chrome://browser/content/browser.xml in der oberen Zeile drin steht, wie auf deinem Bild? (devtools.chrome.enabled habe ich auf true gesetzt in about:config ... falls das dafür nötig ist)

Klar. Und ja, das ist dafür notwendig. Das wäre auch ohne about:config gegangen. Und da es sowieso noch eine zweite Einstellung braucht, sage ich dir den anderen Weg, weil das beides an der gleichen Stelle geht.

Öffne die Entwickler-Werkzeuge, z.B. mit der Taste F12. Relativ weit rechts hast du ein Zahnrad-Symbol, da klickst du drauf. In der ganz rechten Spalte unten müssen die beiden Optionen "Debugging-Optionen für Browser-Chrome" und "Externes Debuggin" aktiviert sein.

Ist diese Voraussetzung erfüllt, findest du im Menü der Entwickler-Werkzeuge (Symbol im Hauptmenü oder auch klassische Menüleiste) den Punkt "Browser-Werkzeuge". Der Reiter Inspektor hilft dabei Elemente zu finden. In meinem Screenshot ist der Reiter "Stilbearbeitung" aktiviert. Ich hatte dort auf das Plus-Symbol geklickt, um ein leeres Stylesheet zu erstellen, und habe dort einfach alle deine Regeln reinkopiert und die zusätzliche Zeile dazu geschrieben, nachdem ich mittels Inspektor geschaut hatte, welches Element ich ansprechen muss.

AdminFox

Sören Hentzschel Woher hast du das Theme her ist das Photon?. Weil es sehr gut aus sieht.

Zitronella

@Sören: ahh danke, cool. Da muss ich wenigstens nicht immer den Browser neu starten wenn ich etwas teste in der userChrome.css

Noch eine kleine Frage: kann ich damit auch heraus bekommen, welcher Button wo genau liegt und womöglich noch, welcher Eintrag für das Aussehen verantwotlich ist?

Ich stelle nämlich fest, dass in der nightly der Button chrome://browser/skin/toolbarbutton-dropdown-arrow.png für die Auflistung aller Tabs wenn Tableiste voll, gar nicht verwendet wird, sondern wohl eher chrome://browser/skin/arrow-dropdown-12.svg oder chrome://browser/skin/arrow-dropdown-16.svg

Und ich mache das bestimmt immer total umständlich um an die möglichen Dateien heran zu kommen, nämlich indem ich den Firefox installer entpacke, dann im Hauptverzeichnis und im Hauptverzeichnis/browser jeweils die omn.ja entpacke und dann händisch dort nach den Dateien suche :o das geht zwar irgendwie, aber ist doch recht aufwändig und nicht immer zielführend und mit viel Trial und Error verbunden. :roll:

Sören Hentzschel

Zitat von AdminFox

Sören Hentzschel Woher hast du das Theme her ist das Photon?. Weil es sehr gut aus sieht.

Ja, das ist das Photon-Design. Ich nutze eine Nightly-Version von Firefox.

Zitat von Zitronella

Noch eine kleine Frage: kann ich damit auch heraus bekommen, welcher Button wo genau liegt und womöglich noch, welcher Eintrag für das Aussehen verantwotlich ist?

Antwort kommt gleich in Form eines Videos, hoffe ich.

Nachtrag: Video ist fertig, aber ich habe keine Zeit mehr für den Upload, es ist schon so spät. Ich werde nun essen gehen. Sobald ich wieder zuhause bin, lade ich es hoch.

Sören Hentzschel

Externer Inhalt youtu.be

Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Zitronella

Vielen Dank, ich guck es mir gleich an, auch wenn ich den Code gerade mit meiner umstädlichen Methode hin bekommen habe

CSS

/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button { fill: white!important; }


	#main-window .alltabs-button,
	#main-window #TabsToolbar > #alltabs-button { fill: white!important; }

	#main-window .tabbrowser-arrowscrollbox > .scrollbutton-up,
	#main-window #TabsToolbar > #scrollbutton-up { fill: white!important; }
	#main-window .tabbrowser-arrowscrollbox > .scrollbutton-down,
	#main-window #TabsToolbar > #scrollbutton-down { fill: white!important; }
	}

Alles anzeigen

Zitronella

uii, das ist toll. Ich habe mir das Video gleich mal herunter geladen und konnte das was du vorführtest nach machen. Vielen Dank.

Jetzt noch eine Fage: Als ich ein privates Fenster öffnete, konnte ich dort nichts anwählen, erst als ich im neuen privaten fenster dort wieder die Browser Werkzeuge öffnete ging es.
Ich fand aber leider nicht wie ich die Tabs im privaten Fenster anders farbig machen kann als im normalen Fenster. Ich schätze das liegt daran,dass sie "geerbt" wurden? Oder gibt es doch eine Möglichkeit?

2002Andreas

Zitat von Zitronella

wie ich die Tabs im privaten Fenster anders farbig machen kann als im normalen Fenster.

Hallo Zitronella..

teste das doch bitte mal, damit wäre der" Neuer Tab Button" nur im privaten Modus rot:

CSS

#main-window[privatebrowsingmode=temporary] .tabs-newtab-button,
#main-window[privatebrowsingmode=temporary] #TabsToolbar > #new-tab-button { 
fill: red!important; }

Für den privaten Modus einfach das zusätzlich einfügen:

[privatebrowsingmode=temporary]

Zitronella

Hallo Andreas, danke, das klappt. Allerdings wollte ich nicht den Button "Neuer Tab" rot haben, sondern den aktiven Tab an sich im privaten Modus andersfarbig als im Normalmodus haben. Mit meinem Code ist es momentan so, dass egal ob im Privatmodus oder Normalmodus der aktive Tab immer rot ist. Im Privatmodus soll er aber nicht rot sondern lila sein.
Mein momentaner gesamter Code sieht so aus:

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Tableiste komplett transparent */
@-moz-document url(chrome://browser/content/browser.xul){
	#TabsToolbar:not(:-moz-lwtheme)::after,
	#TabsToolbar:not(:-moz-lwtheme)::before {
	  box-shadow: none !important;
	}
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-start-indicator,
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-end-indicator {
	  background-image: none !important;
	}


/* Tabs immer anzeigen */
    .tabbrowser-tab > .tab-stack > .tab-background


        #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
        .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
        #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
        background-image:none!important;


    }         



/* Weiße Schrift in allen Tabs und hellrot/kursiv in ungelesenen Tabs (auch im privaten Modus) */
.tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
.tabbrowser-tab{color:#fff!important}


/* aktiven Tab einfärben */
.tab-background{
background-color:transparent!important}


.tabbrowser-tab[selected="true"]{
background: transparent !important;
color: #ffffff !important;
text-shadow:  0px 0px 0px !important;
box-shadow: inset 5px 5px 10px 10px  #b60202 !important;
}


/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button { fill: white!important; }


	#main-window .alltabs-button,
	#main-window #TabsToolbar > #alltabs-button { fill: white!important; }

	#main-window .tabbrowser-arrowscrollbox > .scrollbutton-up,
	#main-window #TabsToolbar > #scrollbutton-up { fill: white!important; }
	#main-window .tabbrowser-arrowscrollbox > .scrollbutton-down,
	#main-window #TabsToolbar > #scrollbutton-down { fill: white!important; }
	}

Alles anzeigen