Tabs farbig hervorheben bei nightly UX australis

2002Andreas

dann bitte auch wieder testen:

CSS

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


#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected="true"]{
color: #ffffff !important;
text-shadow:  0px 0px 0px !important;
box-shadow: inset 5px 5px 10px 10px  #610DAB !important;
}

Alles anzeigen

oder gleich kompl.:

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}


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


#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected="true"]{
color: #ffffff !important;
text-shadow:  0px 0px 0px !important;
box-shadow: inset 5px 5px 10px 10px  #610DAB !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

[attachment=0]Screenshot (102).png[/attachment]

Zitronella

hey, wie cool ist das denn! Vielen Dank für deine Mühe :klasse:
Firefox 57 kann kommen

2002Andreas

Freut mich wenn du damit zufrieden bist, war gern geschehen

Und wie schon gesagt, es ändert sich noch so einiges, darum fange ich erst an wenn Fx 57 aktuell ist. :wink:

Zitronella

Das stimmt schon, ich denke jedoch, dass sich an den Tabs nicht mehr groß was ändern wird.
Ich habe den Code noch ein wenig abgeändert, für die ungelesenen Tabs im normal und privaten Modus

CSS

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


#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#911be1!important;}
.tabbrowser-tab{color:#fff!important}

2002Andreas

Zitat von Zitronella

Ich habe den Code noch ein wenig abgeändert

:klasse:

Sören Hentzschel

Zitat von Zitronella

Das stimmt schon, ich denke jedoch, dass sich an den Tabs nicht mehr groß was ändern wird.

Es könnte noch eine Änderung notwendig werden, da die neue Lade-Anzeige im Tab noch nicht implementiert ist. Das betrifft die volle Breite des Tabs. Vielleicht bedeutet das für deinen Code sowieso nichts und alles kann bleiben, wie es ist. Das hängt halt davon ab, was sich am Firefox-Code dafür ändert. Ich wollte nur schonmal darauf hinweisen, dass wenigstens eine Änderung an den Tabs noch ausstehend ist. Alles weitere wirst du dann eh sehen, wenn es soweit ist.

Zitronella

Ich komme mal wieder nicht weiter :-??? habe schon einiges probiert und auch die mögliche Stelle gefunden aber ich schaffs nicht. Und zwar möchte ich dass die Trennstriche zwischen den Tabs immer angezeigt werden auch wenn über einen Tab drüber gehovert wird.
Im Original heißt es:

Code

/* Also show separators beside the selected tab when dragging it. */
#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 {
  content: "";
  display: -moz-box;
}

könnt ihr mir helfen?
EDIT: erledigt mit Code aus Beitrag #54

Zitronella

och nööööö, jetzt hab ich die neue nightly drüber gebügelt und der Hintergrund im default Theme ist plötzlich dunkelblau und somit sieht mein Code doof aus.
Wie kann ich das ändern?

2002Andreas

Zitat von Zitronella

im default Theme ist plötzlich dunkelblau

Mit dem Code aus Beitrag 41 sieht das hier so aus:

[attachment=0]Screenshot (284).png[/attachment]

Oder meinst du etwas anderes?

Zitronella · Bild_2017-09-22---16-09-16.png

ja so soll es auch aussehen. Was hab ich nur gemacht? hab sogar im portablen nightly extra das Profil gelöscht und auch der freie Platz ganz links neben den Tabs stört mich
[attachment=0]Bild_2017-09-22---16-09-16.png[/attachment]
Warum ist das bei mir so merkwürdig? :-??

Zitronella

aarg Windows10 (es dauert wohl noch eine Weile bis ich mich daran gewöhne)

Einstellungen--> Personalisierung-->Farben--> hab Haken raus bei "Titelleisten" und will das auch so belassen, deshalb habe ich es nur in der userChrome.css geändert mit

Code

[tabsintitlebar]:root:not(:-moz-lwtheme) {
    background-color: hsla(0, 0%, 0%, 0.8)!important}

dieser Abstand links bei den Tabs besteht wohl nur wenn Fx nicht maximiert ist

Sören Hentzschel

Zitat von Zitronella

dieser Abstand links bei den Tabs besteht wohl nur wenn Fx nicht maximiert ist

Das ist, weil du sonst nicht mehr in der Lage wärst, das Fenster zu verschieben, weil die Tabs ja nun ganz oben anschließen.

Zitronella

Huch, stimmt. Das ist natürlich ein Argument.

Wie bekomme ich es hin dass beim hovern über die Tabs diese etwas "milchig" werden wie beim original?

meine userChrome.css sieht momentan so aus:

CSS

[tabsintitlebar]:root:not(:-moz-lwtheme) {
    background-color: hsla(0, 0%, 0%, 0.8)!important}


/* Weiße Schrift in allen Tabs, hellrot/kursiv in ungelesenen Tabs und lila/kursiv im privaten ungelesenen Tabs */
#main-window .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
.tabbrowser-tab{color:#fff!important}
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#911be1!important;}
.tabbrowser-tab{color:#fff!important}

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


#main-window .tabbrowser-tab[selected="true"]{
box-shadow: inset 0px 0px 40px 0px  #b60202 !important;}


/* aktiven Tab einfärben im privaten Modus */
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected="true"]{
box-shadow: inset 0px 0px 40px 0px  #610DAB !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; }




/*rote Linie über Tab wenn ausgewählt und gehovert wird, lila beim privaten Tab*/


.tab-line[selected=true] {
  background-color: #b60202!important;}
.tab-line:not([selected=true]) {
  background-color: #b60202!important;}


#main-window[privatebrowsingmode=temporary] .tab-line[selected=true] {
  background-color: #610DAB!important;}
#main-window[privatebrowsingmode=temporary] .tab-line:not([selected=true]) {
  background-color: #610DAB!important;}


/* Suchenbar oben links*/
findbar {-moz-box-ordinal-group: 0}


#downloads-button,
#downloads-indicator-icon{
fill:red!important;}

Alles anzeigen

Bitte zum ansehen auf das Bild klicken
[attachment=0]nightly-tab-hover.gif[/attachment]

Zitronella

Das allgemeine

Zitat von Zitronella

Code

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

war das Problem
Code nochmal umgewandelt in

CSS

/* Tableiste grau/schwarz */
[tabsintitlebar]:root:not(:-moz-lwtheme) {
    background-color: hsla(0, 0%, 0%, 0.8)!important}


/* Weiße Schrift in allen Tabs, hellrot/kursiv in ungelesenen Tabs und lila/kursiv im privaten ungelesenen Tabs */
#main-window .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
.tabbrowser-tab{color:#fff!important}
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#911be1!important;}
.tabbrowser-tab{color:#fff!important}

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


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


/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" (nicht nötig bei mir bei Win10) 
#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; }*/


/*rote Linie über Tab wenn ausgewählt und gehovert wird, lila beim privaten Tab*/
.tab-line[selected=true] {
  background-color: #b60202!important;}
.tab-line:not([selected=true]) {
  background-color: #b60202!important;}


#main-window[privatebrowsingmode=temporary] .tab-line[selected=true] {
  background-color: #610DAB!important;}
#main-window[privatebrowsingmode=temporary] .tab-line:not([selected=true]) {
  background-color: #610DAB!important;}


/* Suchenbar oben */
findbar {-moz-box-ordinal-group: 0}

Alles anzeigen

Somit Problem gelöst und meine Anfrage aus #47 hat sich damit auch erledigt weil die Trennstriche jetzt nicht mehr nötig sind wenn beim hovern der Tab nun wieder etwas milchig hervor gehoben wird.

2002Andreas

Bin mir nicht sicher ob ich das richtig verstanden habe, aber teste bitte mal:

CSS

#main-window .tabbrowser-tab[selected="true"]:hover{
opacity:.5!important;
box-shadow: inset 50px 50px 50px lightgrey !important;}


#main-window .tabbrowser-tab:not([selected="true"]):hover{
opacity:.8!important;
box-shadow: inset 50px 50px 50px lightgrey !important;}








[tabsintitlebar]:root:not(:-moz-lwtheme) {
    background-color: hsla(0, 0%, 0%, 0.8)!important}


/* Weiße Schrift in allen Tabs, hellrot/kursiv in ungelesenen Tabs und lila/kursiv im privaten ungelesenen Tabs */


#main-window .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {
font-style: italic; color:#db0101!important;}


.tabbrowser-tab{
color:#fff!important}


#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {
font-style: italic; color:#911be1!important;}


.tabbrowser-tab{
color:#fff!important}

/* aktiven Tab einfärben */


.tab-background{
background-color:transparent!important}


#main-window .tabbrowser-tab[selected="true"]{
box-shadow: inset 0px 0px 40px 0px  #b60202 !important;}


/* aktiven Tab einfärben im privaten Modus */


#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected="true"]{
box-shadow: inset 0px 0px 40px 0px  #610DAB !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; }


/*rote Linie über Tab wenn ausgewählt und gehovert wird, lila beim privaten Tab*/


.tab-line[selected=true] {
  background-color: #b60202!important;}

.tab-line:not([selected=true]) {
  background-color: #b60202!important;}


#main-window[privatebrowsingmode=temporary] .tab-line[selected=true] {
  background-color: #610DAB!important;}

#main-window[privatebrowsingmode=temporary] .tab-line:not([selected=true]) {
  background-color: #610DAB!important;}


/* Suchenbar oben links*/


findbar {
-moz-box-ordinal-group: 0}


#downloads-button,
#downloads-indicator-icon{
fill:red!important;}

Alles anzeigen

Zitronella

ups sorry, irgendwie habe ich deinen Eintrag übersehen Andreas.
Glaub du hast schon richtig verstanden, allerdings siehts mit meinem Code aus #54 besser aus für meinen Geschmack. Mit deinem Code wird das so merkwürdig weißlich/milchig/blass lila und passt nicht zum Gesamtbild
Grafik:
1. Teil Code aus #54
2. Teil Code aus #55
[attachment=0]userChrome-ff-nightly.gif[/attachment]
Bitte auf die Grafik klicken um sie zu sehen.

Für mich passt eigentlich jetzt alles was ich für Firefox 57 benötige bezüglich dieses Aussehens. Danke für die Hilfe

Zitronella

Ich bin mal wieder mit meinem Latein am Ende und bräuchte dringend Hilfe, ich komme einfach nicht weiter. Und zwar habe ich einen Fehler bzw ungewollte Auswirkung im Code entdeckt in diesem Teil

CSS

#main-window .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
#main-window[privatebrowsingmode] .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#911be1!important;}

Erste Zeile bewirkt in ungelesene Tabs und Tabs bei denen sich der Tabtitel ändert die Schrift rot/kursiv dargestellt wird
Zweite Zeile bewirkt in ungelesene Tabs und Tabs bei denen sich der Tabtitel ändert im privaten Fenster die Schrift lila/kursiv dargestellt wird.

Nun ist es aber so, dass manche Tabs obwohl sie nicht im Privaten Fenster sind, trotzdem die Schrift lila/kursiv wird
und zwar bei diesen URLs
https://widget01.mibbit.com/
https://twitter.com/search?q=trump (ich hab dies nicht aus Interesse gewählt, sondern weil es sich recht oft aktualisiert)
Hingegen bei dieser Seite http://noip.magix.net/5sek.html bleibt es richtig (also rot/kursiv)

Im privaten Fenstern wird es immer bei allen richtig dargestellt.

Was muss ich ändern, damits auch im normalen Fenstern richtig dargestellt wird? Ich hab mittlerweile schon so viel rumgetüftelt aber nichts hat wirklich was gebracht.

2002Andreas

Ich bin mir nicht sicher, aber teste doch bitte mal:

CSS

#main-window .tabbrowser-tab[unread], .tabbrowser-tab[titlechanged] {font-style: italic; color:#db0101!important;}
#main-window[privatebrowsingmode] .tabbrowser-tab[unread],#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {font-style: italic; color:#911be1!important;}

Zitronella

boah Andreas, ich fass es nicht. Ich hab damit jetzt schon 1,5h rum experimentiert und du haust innerhalb von 4min den richtigen Code raus :shock:
Vielen vielen Dank, es funktioniert jetzt alles perfekt :klasse:

2002Andreas

Freut mich, war gern geschehen

Du hattest in beiden Codes:
.tabbrowser-tab[titlechanged]

aber einmal sollte ja für den privaten Modus sein, ergo musste noch:
[privatebrowsingmode]
hinzugefügt werden.