UserChrome.css zum anpassen des Aussehens: Tab mit laufendem Video

Piccolo1986

Seit Proton mitgeliefert wird bin ich etwas zwiegespalten. Einerseits gefällt mir das neue Design, andererseits gibt es einiges, was meiner Meinung nach visuell verschlechtert wurde.

Dazu gehört auch das unterscheiden von Tabs, mittelgrau, hellgrau, anthrazit,.....

Auf jeden Fall habe ich jetzt die UserChrome.css für mich entdeckt und gemerkt dass man da echt viel anpassen kann.

Gibt es eine Möglichkeit, einen Tab mit einem laufenden Video (vor allem Youtube), anders einzufärben?

Ich habe oft massig Tabs offen, und ich würde gerne schneller den Tab entdecken in dem das Video läuft, und dazu reicht mir irgendwie nicht Das nette kleine Icon.

Bisher färbe ich meine Tabs so ein:

CSS

/*Tabs abgerundet*/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background,
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  border-radius: 5px!important;
}

/*Aktiver Tab Text schwarz*/
.tabbrowser-tab[visuallyselected="true"] {
  color: black !important;
}

/*Aktiver Tab Hover Text weiß*/
.tabbrowser-tab[visuallyselected="true"]:hover {
  color: white !important;
}

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

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

/*Inaktiver Tab Hover Hintergrund grau*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
    background: grey !important;   
}

/*Inaktiver Tab Text weiß*/
.tabbrowser-tab:not([visuallyselected="true"]):hover {
  color: white !important;
}

/*Inaktiver Tab Hintergrund schwarz*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
    background: black !important;   
}

Alles anzeigen

grisu2099

Aktualisiere bitte zunächst auf Version 92...

Dann teste:

CSS

.tab-background[selected] {
    background: rgb(0,150,0) !important;
    }

Die Farbe kannst/mußt du dir nach deinen Wünschen anpassen.

Zitronella

hm, ist es wirklich das was der TO meint. Es geht doch darum nur den Tab einzufärben in dem ein Ton zu hören ist, oder?

Piccolo1986

Zitat von Zitronella

hm, ist es wirklich das was der TO meint. Es geht doch darum nur den Tab einzufärben in dem ein Ton zu hören ist, oder?

Right. Ich hätte gerne dass der Tab, in dem ein Video trällert eine andere Farbe bekommt.

grisu2099

Upps, nachdem meine Brille wieder geputzt ist, neuer Versuch:

CSS

.tabbrowser-tab:is([soundplaying], [muted]) {
    background: red !important;
    }

2002Andreas

Zitat von Piccolo1986

in dem ein Video trällert eine andere Farbe bekommt.

Oder auch:

CSS

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] {
  color: white !important;
  background: red !important;
}

Zitronella

Also ich wüsste nicht, wie das geht.

Was ich allerdings anbieten könnte wäre das hier.

Sprich, dauerhaft das Play Symbol anzeigen und dessen Hintergrund eingefärbt. In dem Fall grün (kann natürlich geändert werden)

Voraussetzung wäre in about:config den Eintrag browser.tabs.secondaryTextUnsupportedLocales den Wert um ,de ergänzen also ar,bn,bo,ckb,fa,gu,he,hi,ja,km,kn,ko,lo,mr,my,ne,pa,si,ta,te,th,ur,zh,de

Und in der userChrome.css

CSS

.tab-icon-overlay {
transform: scale(1.5, 1.5) !important;
background: rgb(0,150,0) !important;
}

EDIT: es wurden schon weitere Lösungen gepostet, während ich hier noch schrieb.

2002Andreas

Zitat von Zitronella

Also ich wüsste nicht, wie das geht.

Hast du meinen Code mal getestet?

Ich denke, es macht genau das was gewünscht wird

Tab aktiv...alles Standard:

YT inaktiv...HG rot

grisu2099

Ich stelle fest, daß 2002Andreas (natürlich mal wieder) die bessere Lösung hat...

2002Andreas

Zitat von grisu2099

natürlich mal wieder

Ob besser weiß ich nicht, nur eben anders

grisu2099

Doch, besser! Bei einem erneuten Test mit meinen sonstigen Anpassungen paßte da mit meiner Version so einiges nicht...

2002Andreas

Zitat von grisu2099

Doch, besser!

Na gut

grisu2099

Zitat von 2002Andreas

Na gut

Geht doch!

Zitronella

Zitat von 2002Andreas

Hast du meinen Code mal getestet?

jaja, hab oben auch ein EDIT eingefügt. Mensch, ich bin halt nicht so schnell wie ihr und es hat sich überschnitten.

Aber ich hätte noch eine kleine Änderung von Andreas Code, damit weiterhin nur die Tabs und nicht noch die Umrandungen eingefärbt sind

CSS

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] .tab-stack > .tab-background {
  color: white !important;
  background: red !important;
}

2002Andreas

Zitat von Zitronella

ich bin halt nicht so schnell wie ihr

Alles ist gut

Zitat von Zitronella

ich hätte noch eine kleine Änderung

2002Andreas

Zitat von Zitronella

ich hätte noch eine kleine Änderung

Ganz passt dein Code leider so nicht.

Die Textfarbe ändert sich so nicht auf weiß.

Darum:

CSS

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] {
    color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] .tab-stack > .tab-background {
  background: red !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[muted] {
    color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[muted] .tab-stack > .tab-background {
  background: green !important;
}

Alles anzeigen

So wäre zusätzlich ein stummgeschalteter Tab in grün, und auch schneller zu finden.

Piccolo1986

Super, da hab ich ja eine klasse Diskussion angeworfen und es ist genau das rausgekommen was ich gesucht habe. Vielen Dank.

Hier mein aktuelles Design, vielleicht kanns ja jemand brauchen:

CSS

/*Tabs abgerundet*/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background,
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  border-radius: 5px!important;
}

/* ######### aktiver Tab ######### */
/*selected Text weiß*/
.tabbrowser-tab[visuallyselected="true"] {
  color: white !important;
}

/*hover Text schwarz*/
.tabbrowser-tab[visuallyselected="true"]:hover {
  color: black !important;
}

/*selected Hintergrund dunkelblau*/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  background: #0853C3 !important;
}

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

/* ######### inaktiver Tab ######### */
/*Hintergrund dunkelgrau*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
    background: #2B2A33 !important;   
}

/*hover Hintergrund hellgrau*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
    background: #52525E !important;   
}

/*Text weiß*/
.tabbrowser-tab:not([visuallyselected="true"]) {
  color: white !important;
}

/*hover Text schwarz*/
.tabbrowser-tab:not([visuallyselected="true"]):hover {
  color: black !important;
}

/*inaktiv mit Videoplayback, Hintergrund rot*/
.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] .tab-stack > .tab-background {
  background: #C60000 !important;
}

/*inaktiv mit Videoplayback, Text weiß*/
.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] .tab-stack > .tab-background {
  color: white !important;
}



/* Infos
Farbangabe:
#7fff00
orange
rgb(255,69,0)
*/

Alles anzeigen

2002Andreas

Zitat von Piccolo1986

und es ist genau das rausgekommen was ich gesucht habe. Vielen Dank.

So sollte es ja auch sein

UserChrome.css zum anpassen des Aussehens: Tab mit laufendem Video

2002Andreas 10. September 2021 um 16:49

Ähnliche Themen

Tableiste unten per CSS-Code, oder per Skript.

Anpassungen wegen Proton

Weitere CSS-Ordner einbinden

Multirow-Tableiste mit userChrome.css anpassen für FF 89.0

extra_config_menu