veränderte Tab-Leisten Hintergrundfarbe ab 122 wenn Firefox nicht im Fokus

Zitronella

Hallo, gerade Firefox 122 installiert und gemerkt dass sich die Tableiste farblich ändert wenn Firefox nicht fokussiert ist (also irgend eine andere Anwendung in Windows im Fokus ist).

Der relevante Teil des Codes meiner userChrome.css ist

CSS

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

Was muss ich ändern, damit es auch in Firefox 122 wieder so aussieht wie davor (also so wie es auch bei fokusiertem Firefox aussieht)

Mitleser

Nur ein Versuch ohne Test:

#TabsToolbar:-moz-window-inactive {
color:#fff!important;
background: #221B1C !important;
}

Zitronella

Danke, aber das funktioniert leider gar nicht.

2002Andreas

Zitat von Zitronella

das funktioniert leider gar nicht.

Auch bitte mal testen:

CSS

#main-window :not([focus]) {
opacity: 1 !important;
}

Zitronella

ahh zusätzlich zu meinem Code, das sieht gut aus und funktioniert. Vielen Dank Andreas

2002Andreas

Zitat von Zitronella

Vielen Dank Andreas

Gerne wie immer

Ich bin damit aber noch nicht ganz zufrieden, bei mir verändert das die Tabhintergründe

Zitronella

Zitat von 2002Andreas

bei mir verändert das die Tabhintergründe

bei mir nicht, ich kann bei Bedarf gerne meinen gesamten Code posten.

2002Andreas

Zitat von Zitronella

ich kann bei Bedarf gerne

Danke.

Kann ich dann aber erst morgen hier testen.

Mitleser

Einen Versuch ist es wert...

CSS

#TabsToolbar:-moz-window-inactive {
opacity: 1 !important;
}

.DeJaVu

browser-shared.css

Code

#navigator-toolbox {
  appearance: none;

  /* Toolbar / content area border */
  border-bottom: 1px solid var(--chrome-content-separator-color);

  background-color: var(--toolbox-non-lwt-bgcolor);
  color: var(--toolbox-non-lwt-textcolor);

  &:-moz-window-inactive {
    background-color: var(--toolbox-non-lwt-bgcolor-inactive);
    color: var(--toolbox-non-lwt-textcolor-inactive);
  }

  :root[customizing] & {
    border-bottom-style: none;
  }

  &:-moz-lwtheme {
    background-image: var(--lwt-additional-images);
    background-repeat: var(--lwt-background-tiling);
    background-position: var(--lwt-background-alignment);
    background-color: var(--lwt-accent-color);
    color: inherit;

    &:-moz-window-inactive {
      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
    }
  }

  /* When a theme defines both theme_frame and additional_backgrounds, show
     the latter atop the former. */
  :root[lwtheme-image] & {
    background-image: var(--lwt-header-image), var(--lwt-additional-images);
    background-repeat: no-repeat, var(--lwt-background-tiling);
    background-position: right top, var(--lwt-background-alignment);
  }
}

Alles anzeigen

Zitronella

ich habe vieles (altes) auskommentiert, aber das dürfte nicht stören

Hier mein (fast) gesamter Code, da sich der Rest auf Einfärbungen von best. Lesezeichen usw. bezieht.

CSS

/* Tableiste grau/schwarz mit weißer Schrift */
/* [tabsintitlebar]:root:not(:-moz-lwtheme){background-color: hsla(0, 0%, 0%, 0.8)!important}
[tabsintitlebar]:root:not(:-moz-lwtheme){background-color: #221B1C!important} */

/* Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken */
#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;
}
/* ab ff 122 braucht es zusätzlich folgendes damit es auch bei unfokussiertem ff Fenster funktioniert */
#main-window :not([focus]) {
opacity: 1 !important;
}

/* < und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt  
-> Code in Datei "userChromeShadow.css" 
dafür ist Datei "userChromeShadow.uc.js" nötig, damit es funktioniert
Alternative:  */
#tabbrowser-arrowscrollbox {
    --ug-scrollbutton_fill: rgb(255, 255, 255); 
}
#scrollbutton-up, #scrollbutton-down {
    fill: var(--ug-scrollbutton_fill, initial) !important;
}
/* Scrollbutton ^ und v in Lesezeichen- Verwalten-Leiste  eingefärbt
	.menupopup-arrowscrollbox {
    --ug-scrollbutton_fill: red; 
}  */

/* 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;
}

/* Fette Schrift in URL Bar und/oder Hintergrund leicht grau */
/*#urlbar{
font-weight: bold !important;
background-color: #e7e8ea !important}*/

/* .urlbar-input {
font-weight: 600 !important;
color: var(--uc-grad-1) !important;
} */

/* Weitere Lesezeichen aus Lesezeichen-Symbolleiste entfernen (ab ff 85 nicht mehr nötig, da es dann per Rechtsklick geht)
#PlacesToolbar hbox toolbarbutton#OtherBookmarks.bookmark-item {
  display: none !important;
} */

/* Fette Schrift in URL-Bar */
#urlbar{
font-weight: 600 !important
}

/* Weiße Schrift in allen Tabs, hellrot/kursiv in ungelesenen Tabs und lila/kursiv im privaten ungelesenen Tabs 
Nötig ist Erweiterung https://addons.mozilla.org/de/firefox/addon/tab-flag/ Bei Options ▶ eingestellt */
#main-window .tabbrowser-tab { color:#fff!important;
}

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

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

/* Adressleiste ab Firefox 75 nicht mehr vergrößern (geht auch via about:config "browser.urlbar.update1" auf false , aber dieser Wert verschwindet ab Firefox 77) 

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}*/

/* aktiven Tab einfärben (ab ff 89) */
#main-window .tab-background[selected]{
background-color:transparent!important;
box-shadow: inset 0px 0px 30px 0px #ee0909 !important;
}

/*Inaktiver Tab Hintergrund eingefärbt (ab ff 89) */
#main-window .tabbrowser-tab:not([hover]) .tab-background:not([selected]):not([multiselected]) {
box-shadow: inset 0px 0px 30px 0px #909090 !important;
opacity: .6 !important;
}
/*Inaktiver Tab Hintergrund eingefärbt aber  bei Hover etwas stärker(ab ff 89) */
#main-window .tabbrowser-tab:hover .tab-background:not([selected]):not([multiselected]) {
box-shadow: inset 0px 0px 30px 0px #909090 !important;
opacity: .9 !important;
}

/* Tabs einfärben wenn alle Tabs ausgewählt sind (ab ff 89) */
#main-window .tab-background[multiselected]:not([selected]) {
background-color:transparent!important;
box-shadow: inset 0px 0px 30px 0px #ee0909 !important;
}

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

/*im privaten Modus:Inaktiver Tab Hintergrund eingefärbt (ab ff 89) */
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([hover]) .tab-background:not([selected]):not([multiselected]) {
box-shadow: inset 0px 0px 30px 0px #909090 !important;
opacity: .6 !important;
}

/*im privaten Modus:Inaktiver Tab Hintergrund eingefärbt aber  bei Hover etwas stärker(ab ff 89) */
#main-window[privatebrowsingmode=temporary] .tabbrowser-tab:hover .tab-background:not([selected]):not([multiselected]) {
box-shadow: inset 0px 0px 30px 0px #909090 !important;
opacity: .9 !important;
}

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

/*Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird */
.tabbrowser-tab:hover .tab-close-button {
display: block !important; 
}

/* Lautsprecher Symbol im Tab größer */
.tab-icon-overlay {
transform: scale(1.5, 1.5) !important;
}

/* Anzeige von Suchmaschinen bei Eingabe in Adressleiste verhindern, da es ab ff77 der about:config-Wert " browser.urlbar.oneOffSearches" nicht mehr gibt*/ 
#urlbar .search-one-offs:not([hidden]) {
  display: none !important;
}

/*Lesezeichen Sidebar Ordnerfarbe ändern */
treechildren::-moz-tree-image(container) {
fill:orange !important;}
/*Lesezeichen Ordnerfarbe ändern */
.bookmark-item[container="true"]{
fill:orange !important;}

/*Weltkugel Icon einfärben*/
#cookiesChildren::-moz-tree-image(domainCol, leaf),
.alltabs-item > .menu-iconic-left > .menu-iconic-icon,
#page-proxy-favicon:not([src]),
treechildren::-moz-tree-image(title, leaf),
.bookmark-item:not([container]),
#PlacesToolbarItems > toolbarbutton[class="bookmark-item"][scheme="javascript"]:not([src]),
.sidebar-placesTreechildren::-moz-tree-image(leaf){
  fill:orange!important;
}

/* Suchvorschläge in der Adresszeile ausblenden
#PopupAutoCompleteRichResult{
  display: none !important;
} */

Alles anzeigen

Horstmann

Zitat von Zitronella

Zitat von 2002Andreas

bei mir verändert das die Tabhintergründe

bei mir nicht, ich kann bei Bedarf gerne meinen gesamten Code posten.

Wenn die HG Farbe der Tableiste etc. in deinem eigenen CSS Code mit !important; markiert sind, sollte das eigentlich auch :-moz-window-inactive übertrumpfen, genauso wie bei opacity für Elemente.

Die Frage ist, hatte sich bei dir die Farbe verändert, oder die Deckkraft (opacity) einzelner Leisten oder Elemente, bzw. eben der Tableiste?
Das letztere wäre meine Vermutung.

Und sollen dabei Elemente wie Buttons gleichgeblieben wenn Fx inaktiv ist, oder verblassen?

Deshalb sind vergleichende Screenshots immer sehr sinnvoll, ...

Einigen originalen Code für inaktive HG Farben hatte .DeJaVu schon gepostet, für Tableiste gibt's ua noch das hier.

Für nur die Tableiste würde ich evtl. sowas vorschlagen, die Farben sollten sich mit deinem Code eigentlich nicht geändert haben:

CSS

:root[tabsintitlebar] #titlebar:-moz-window-inactive {
    opacity: 1 !important;
}

Ps: Die neue Foren Textformatierung, kann da nochmal jemand drüberschauen?

Zitronella

ohne dem Code von Andreas sah es so aus ab FF 122

Zitronella

Zitat von Horstmann

Für nur die Tableiste würde ich evtl. sowas vorschlagen,

den habe ich jetzt auch genommen, da mir auffiel, dass mit Andreas Code unter dem Lautsprechersymbol, wenn ein Video lief das Icon der Website darunter sichtbar war und das ist nicht gewollt. Habe nämlich den doppelzeiligen Tabtext bei Medienwiedergabe abgeschaltet indem ich den Wert browser.tabs.secondaryTextUnsupportedLocale um den Eintrag ,de ergänzt habe..

Danke dir und .DeJaVu für den Code

2002Andreas

Zitat von Zitronella

den habe ich jetzt auch genommen

Hallo Zitronella.

Ich war gestern dann offline, darum erst jetzt meine Antwort

Du könntest auch mal in about:config den Wert:

focusmanager.testmode

auf true setzen, statt dem CSS Code.

Zitronella

ja, das würde auch gehen, allerdings möchte ich das nicht so gerne, da diese about:config Änderung sich auch auf Seiten auswirkt und mit dem CSS-Code von Horstmann bin ich zufrieden, denn das wirkt sich wohl nur auf die Tableiste aus.

Beispiel an dem man das schön sehen kann, dass es sich auf Seiten auswirken kann https://www.codingwithjesse.com/demo/2007-05-1…r-window-focus/

2002Andreas

Zitat von Zitronella

möchte ich das nicht so gerne

Alles klar, du hast freie Auswahl

Zitat von Zitronella

dass es sich auf Seiten auswirken kann

Oder habe ich das jetzt falsch verstanden

Zitronella

Das Fenster müsste schwarz werden wenn nicht fokussiert, es bleibt bei dir aber weiß, da du wahrscheinlich focusmanager.testmode auf true hast.

Ich hatte dazu auch mal einen anderen Test erstellt https://mozhelp.ddnss.de/dateien/onfocus-onblur/test1.html

2002Andreas

Zitat von Zitronella

focusmanager.testmode auf true hast.

Habe ich, ja.

Ohne ist es so wie von dir beschrieben.

Danke auf jeden Fall für den Hinweis, ich werde das hier dann mal beobachten, und evtl. dann auch auf den CSS Code wechseln

2002Andreas

Evtl. kann uns ja Sören Hentzschel etwas genaueres dazu sagen.

Welche Änderung Mozilla diesbezüglich gemacht hat mit dem jetzt blassen HG bei nicht Focus, und was genau die von mir vorgeschlagene Änderung in der config bei dem Wert focusmanager.testmode auf true, noch alles verändert.

Bzw. ob in diesem Fall der CSS Code besser wäre.

Vorweg, danke dafür

veränderte Tab-Leisten Hintergrundfarbe ab 122 wenn Firefox nicht im Fokus

Zitronella 23. Januar 2024 um 22:14

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Keine Hervorhebung der Tabs, wieso?

Größere Abstände zwischen den Menüsymbolen und dem Menütext

Unveränderbares Profil mit Voreinstellungen für Deployment auf vielen PCs

Mehrzeilige Tableiste CSS Code

Firefox 113 Probleme mit TABs und Kontext Menü