Farbe aktive und inaktive Tabs funktionieren in FF 119 nicht mehr

seipe

CSS

* Hintergrundfarbe aktives Tab */
.tab-background[selected="true"] {
background: #FF8000 !important; }

/* Hintergrundfarbe inaktive Tabs */
tab:not([selected="true"]) {
background: #D8D8D8 !important; }

Vielleicht kann jemand von euch das mal anschauen. Danke.

Horstmann

Ich habe leider nur 115esr hier, aber vielleicht funktioniert der Tip hier.

2002Andreas

Zitat von seipe

jemand von euch das mal anschauen.

Hab ich

CSS

/* Hintergrundfarbe aktives Tab */
.tab-background[selected="true"] {
background: #FF8000 !important; }

/* Hintergrundfarbe inaktive Tabs */
.tab-background:not([selected="true"]) {
background: #D8D8D8 !important; }

Sören Hentzschel

2002Andreas Du hast richtig erkannt, dass seipe für aktive und inaktive Tabs jeweils einen unterschiedlichen Selektor verwendet (tab vs. .tab-background), was zu einem inkonsistenten Ergebnis führt. Aber der Hinweis von Horstmann ist wichtig: [selected="true"] funktioniert in Firefox 119 nicht mehr. Dein Code hebt in Firefox 119 den aktiven Tab nicht mehr hervor.

So sieht der korrekte Code aus:

CSS

/* Hintergrundfarbe aktiver Tab */
.tab-background[selected] {
  background: #f80 !important;
}

/* Hintergrundfarbe inaktive Tabs */
.tab-background:not([selected]) {
  background: #d8d8d8 !important;
}

Kontext:

1849904 - Convert a bunch of pseudo-boolean tab strip attributes to be standard boolean attributes

RESOLVED (dao+bmo) in Firefox - Tabbed Browser. Last updated 2023-08-30.

bugzilla.mozilla.org

Teil dieses übergeordneten Projekts:

1849905 - [meta] 2023 tabbrowser cleanup initiative

NEW (nobody) in Firefox - Tabbed Browser. Last updated 2023-08-31.

bugzilla.mozilla.org

2002Andreas

Zitat von Sören Hentzschel

funktioniert in Firefox 119 nicht mehr.

Hallo Sören, danke für den Hinweis.

Ich hatte nicht auf Version 119 geachtet, sorry.

Zitat von Sören Hentzschel

So sieht der korrekte Code aus:

seipe

Sören, herzlichen Dank. So funktionierts wie gewünscht.

heiko

Hallo,

ich würde gern diesen Code noch erweitern.

Und zwar soll die Schriftgröße, Schriftfarbe und in fett angezeigt werden.

Cool wäre auch, wenn ungelesene Tabs eine extra Hintergrundfarbe, sowie Schriftgröße, Schriftfarbe und in fett angezeigt wird.

Was mir noch aufgefallen ist...im privaten Fenster ist der aktive Tab nicht in der Farbe wie im normalen Fenster. Kann man da noch einen Extracode für basteln?

Besten Dank

2002Andreas

Zitat von heiko

ich würde gern diesen Code noch erweitern.

Hier sind div. Vorschläge dazu, evtl. ist es ja schon dabei:

Beitrag

Tabs farbig - zentriert - hover - schmaler - abgerundet und einiges mehr

Ich habe hier mal diverse Codes erstellt, die die Tabs und diverse Icons in der Tableiste optisch verändern.

Evtl. kann der eine oder andere daraus ja etwas gebrauchen.

Über jedem Code steht ein Hinweis wofür er ist.

Alles was nicht erwünscht ist, einfach löschen oder auskommentieren.

Farben können beliebig verändert werden.

Die Werte können/müssen evtl. auch individuell noch etwas angepasst werden.

Hinweis!

Bitte nicht den kompletten Code verwenden, da sich einige Einträge überschneiden bezüglich…

2002Andreas

10. Juni 2021 um 14:16

2002Andreas

Zitat von heiko

im privaten Fenster ist der aktive Tab nicht in der Farbe wie im normalen Fenster.

Hier schon mit deinem Code

Oben normaler, unten Privater Modus im eigenen Fenster.

heiko

Hallo Andreas,

danke dir erstmal für die schnelle Hilfe. Eine schöne Sammlung hast du da zusammengestellt.

Ich habe jetzt einen aktuellen Code, wo jetzt sicher noch das Problem mit der Farbe des aktiven Tabs im privaten Fenster enthalten ist.

Ein ungelesener Tab hat immerhin schon eine rote Umrandung, aber die Farbe selbst ist vom inaktiven Tab weiter vorhanden.

Die Eigenschaften wie eben Hintergrundfarbe des Tabs geht, aber die Schriftfarbe sowie Schriftgröße hat keinen Effekt.

CSS

Vielleicht kannst du mal drüber schauen   
/* Inaktiver Tab */

.tab-background:not([selected]) {
font-weight:bold; !important;
font-size: 12px !important;
color: #000000 !important;
background-color: #ffff00 !important;
}

/* Aktiver Tab */

.tab-background[selected] {
font-weight:bold; !important;
font-size: 12px !important;
color: #000000 !important;
background-color: #60F205 !important;
}

/* Ungelesener Tab */

#main-window .tabbrowser-tab[titlechanged] {
font-weight:bold; !important;
font-size: 12px !important;
color: #ffffff !important;
background-color: red !important;
}

Alles anzeigen

2002Andreas

Zitat von heiko

Eine schöne Sammlung hast du da zusammengestellt.

Danke

Zitat von heiko

die Schriftfarbe sowie Schriftgröße hat keinen Effekt.

Teste bitte mal:

CSS

/*Aktiver Tab Schrift*/
tab.tabbrowser-tab[selected] {
 font-size: 12px !important;
 color: #000000 !important;
 font-weight: bold !important;
}

/*Aktiver Tab HG*/
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: #60F205 !important;
  box-shadow: none !important;
}

/*Inaktiver Tab Schrift*/
tab.tabbrowser-tab:not([selected]) {
  font-size: 12px !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/*Inaktiver Tab HG*/
tab.tabbrowser-tab:not([selected])  stack.tab-stack vbox.tab-background {
  background: #ffff00 !important;        
}

/* Ungelesener Tab */
#main-window .tabbrowser-tab[titlechanged] {
font-weight:bold; !important;
font-size: 12px !important;
color: #ffffff !important;
background-color: red !important;
}

Alles anzeigen

heiko

Es geht voran

Nun klappt auch der private Modus und Schrifteigenschaften.

Jetzt wäre nur noch der ungelesene Tab. Geht das überhaupt, den in einer 3. Hintergrundfarbe + Schrifteigenschaften anzupassen?

2002Andreas

Zitat von heiko

Es geht voran

Zitat von heiko

Jetzt wäre nur noch der ungelesene Tab. Geht das überhaupt

Da bin ich im Moment zumidest leider auch überfragt

Evtl. kann dir ein anderer User etwas dazu sagen, gedulde dich also bitte etwas.

heiko

Besten Dank schon mal bis hier her. Echt tolle Arbeit.

Bisher ging der Code "ungelesener Tab" in Verbindung mit der Erweiterung "Tab Flag". Es wäre echt toll, wenn man das noch irgendwie eleganter lösen könnte.

Danke

2002Andreas

Zitat von heiko

Besten Dank schon mal bis hier her.

Gern geschehen.

Zitat von heiko

Echt tolle Arbeit.

Danke

Mitleser

Zitat von heiko

Jetzt wäre nur noch der ungelesene Tab. Geht das überhaupt, den in einer 3. Hintergrundfarbe + Schrifteigenschaften anzupassen?

Ich nutze dieses Script:

uc.css.js/JS/unreadTabMods.uc.js at master · aminomancer/uc.css.js

A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is…

github.com

2002Andreas

Neuer Versuch

Aktiv = grün

Inaktiv = blau

Ungelesen = rot

Diesen CSS Code dafür:

CSS

/*Ungelesener Tab HG*/
.tabbrowser-tab[notselectedsinceload] stack.tab-stack vbox.tab-background:not([pending]),
.tabbrowser-tab[notselectedsinceload][pending][busy] {
  background: red !important;
}

/*Ungelesener Tab Schrift*/
.tabbrowser-tab[notselectedsinceload]:not([pending]),
.tabbrowser-tab[notselectedsinceload][pending][busy] {
  font-style: italic !important;
}

/*Aktiver Tab Schrift*/
tab.tabbrowser-tab[selected] {
 font-size: 12px !important;
 color: yellow !important;
 font-weight: bold !important;
}

/*Aktiver Tab HG*/
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: green !important;
  box-shadow: none !important;
}

/*Inaktiver Tab Schrift*/
tab.tabbrowser-tab:not([selected]) {
  font-size: 12px !important;
  color: white !important;
  font-weight: bold !important;
}

/*Inaktiver Tab HG*/
tab.tabbrowser-tab:not([selected]) stack.tab-stack vbox.tab-background {
  background: blue !important;    
}

Alles anzeigen

Und das Skript aus Beitrag Nr. 16 dazu.

heiko

Sehr gut. Genau so passt es . Besten Dank für die wundervolle Arbeit und die Mühe.

Weiter so! Euch allen ein schönes Wochenende.

2002Andreas

Zitat von heiko

Besten Dank für die wundervolle Arbeit und die Mühe.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Zitat von heiko

Euch allen ein schönes Wochenende.

Danke, dir auch

cazador

Hi,

ich habe versucht das Visulisierungsproblem der Tab´s selbst zu lösen.

Hat leider nur teilweise funktioniert. Die blonde Haarfarbe ist sicher schuld.

Zusätzlich wollte ich den aktiven Tab mit einem roten Außennebel von 2 px verfeinern.

Ich bitte um eure Hilfe.

Nachfolgend meine alten Einstellungen.

CSS

/************ Abstand zur Menüleiste ************/
#TabsToolbar {
   margin-top: -12px !important;
}

/************* aktiven Tab einfärben ****************/
/* aktiven Tab einfärben */
.tab-background[selected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 1px mistyrose !important;
}
/********** Umrandung Tab Aktiv **********/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  border: 1px solid red !important;
}

/**********Umrandung Tab Inaktiv **********/
.tabbrowser-tab .tab-background:not([selected]):not([multiselected]) {
   border:1px solid black!important;
}

/************* Tab-Schließen-Button *************
* Rechts weniger Abstand zum TAB-Rand, etwas größer,
* Textfarbe (Kreuz)
* Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
*/
#TabsToolbar .tab-close-button {
margin-right: -4px !important;
margin-bottom: 0px !important;
padding: 0 !important;
color: white !important;
}
#TabsToolbar .tab-close-button {
height: 14px !important;
width: 14px !important;
background-color: red !important;
border-radius: 4px !important;
}

/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
* Hintergrundfarbe.
*/
#TabsToolbar .tab-close-button[selected="true"],
#TabsToolbar .tab-close-button:not([selected="true"]) {
background-color: red !important;
}


/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}

Alles anzeigen