Firefox 89: Farbe der Tabs ändern?

[ingo750]

@2002Andreas

Es wäre toll, wenn Du hier auch noch den Code zeigen könntest, damit die Tabs wieder ganz unten stehen (auf deinem Bild stehen sie ja zwischen (ich sag mal) Menü- und Navigationsleiste.
Habs nach googeln schon selber versucht, aber irgendwie funktioniert nur paste and copy der Zeilen aus CF nicht in meiner angepassten .css - und auf die hier vorgestellte würde ich gerne aufsetzen.

 

[2002Andreas]

auf deinem Bild stehen sie ja zwischen

Das ist auch Standard so.

Ansonsten, teste bitte:

#TabsToolbar {
    position: absolute !important;
    display: block !important;
    top: 85px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

.tabbrowser-tab {
    margin-top: 2px !important;
    max-height: 37px !important;
   }

#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
   min-width: 0px !important;
   width: 25px !important;
   margin-bottom: 0px !important;
   }

#tabbrowser-tabs {
   width: 100vw !important;
   }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 34px !important;
   }

Hinweis:
Eingeblendet sind für obigen Code die Lesezeichensymbolleiste und die Titelleiste.

Wenn das bei dir nicht der Fall sein sollte, dann musst du in Zeile 4 und 24 die Werte neu anpassen.

 

[ingo750]

Danke, mit Anpassung Zeile 4 läuft es fürs erste bei voller Fenstergrösse. Verkleinert man diese, passt die Skalierung allerdings nicht mehr ganz.

 

[cyberpirate]

Moin,

vielen Dank. Funktioniert mit dem neuen Script auch alles bisher.

die Mause over Funktion ist auch aktiv. TOP! Die Tabs waren auch ohne die Änderung in der about:config schon mittig und schmal. Funktioniert im Fenster und im Vollbild einwandfrei. Da habe ich ja jetzt unendliche Möglichkeiten meine Tabs zu konfiguriren. Echt super das Du uns das hier zeigst und Dir die Arbeit machst.

Noch einmal:

VIELEN DANK!

edit:

ok dann doch noch Fragen wenn es in Ordnung geht? Und zwar möchte Ich die Farbe des Text im aktiven Tab ändern. Die CSS reihe dazu wäre gleuabe Ich ja diese:

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

Nur ist die Textfarbe aber beim Mouse over schwarz. Ich vermute auch die Texte zwischen den /.... /sind nur Infos? Das gleiche bei den inaktiven. Hier mit grün versucht:

/Inaktiver Tab Text grün/
.tabbrowser-tab:not([visuallyselected="true"]):hover {
color: #00FF40 !important;
}

nur ändert sich die Farbe des Text beim Mouse over und nicht im normal Zustand. Was mache Ich falsch?

 

[cbtestarossa]

@2002Andreas

hast du vielleicht noch ne Ahnung wie ich die Lesezeichenzeile nach unten verschiebe und dann noch den Textinhalt darin auch noch?

 

[2002Andreas]

die Farbe des Text

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

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

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

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

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

/*Inaktiver Tab hover HG blau*/
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
    background: blue !important;   
}

/*Inaktiver Tab Text grün*/
.tabbrowser-tab:not([visuallyselected="true"]) {
  color: #00FF40 !important;
}

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

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

ich die Lesezeichenzeile nach unten verschiebe

Was genau meinst du mit unten?

 

[Twilight Hall]

Wie ändere ich denn den Hintergrund der Tab Bar ohne dass dabei die Icons für Minimieren Maximieren und Schließen verschwinden?

toolbar#TabsToolbar{
   background-color: #000000 !important;
}

Damit ändert sich zwar die Farbe, aber die Symbole sind zwar anklickbar aber nicht mehr sichtbar...

 

[2002Andreas]

den Hintergrund der Tab Bar

Meinst du das so?

toolbar#TabsToolbar {
   color: white !important;
   background-color: #000000 !important;
}

#TabsToolbar .toolbarbutton-1 {
  fill: white !important;
}

 

[Twilight Hall]

Meinst du das so?

toolbar#TabsToolbar {
   color: white !important;
   background-color: #000000 !important;
}

#TabsToolbar .toolbarbutton-1 {
  fill: white !important;
}

Leider nein, da werden die Icons auch verdeckt.
So sieht das ganze im Ausgangszustand aus:

Ändere ich die background-color der TabsToolbar, dann sieht man die Icons nicht mehr.

Seit Firefox 89 wird die Tab Toolbar im Windows Design und nicht mehr im Design des Themes angezeigt....

 

[cbtestarossa]

Was genau meinst du mit unten?

Oben Menüleiste
Darunter Tableiste
Unterhalb Lesezeichenleiste.
So möchte ich das da ich die Lesezeichenleiste eh nicht benutze.
Problem: Der Textinhalt ist eben verschoben und wird von der Tableiste verdeckt.

 

[Kalibu]

Hi@all, ihr seit echt klasse und habt mir mit euren Änderungen der .css usw. sehr geholfen.

Danke

1 Frage habe ich noch, in der Version vorher also bis vers. 88 war an jedem Tab ein [X] dahinter, egal wie viele Tabs man offen hatte. Ab vers. 89 sind diese jetzt ab dem 6. geöffneten TAB weg. Also bis 6 geöffneten TABS bleiben die [X] ab dem 7. TAB verschwinden die überall bis auf das aktive TAB

Kann man das ändern? Ich arbeite immer mit vielen Tabs und will diese gleich schließen können, ohne erst darauf zu klicken oder mit der rechten Maustaste auf schließen bzw. beenden.

ALT

NEU

Gruß Kalibu, ich hoffe ich konnte es richtig erklären.

 

[2002Andreas]

Kann man das ändern?

.tab-close-button {
   display: block !important;
}

 

[Kalibu]

Danke @Andreas
Echt klasse

Der Inhalt aus meiner .css Datei dazu:

#urlbar-go-button { display: none !important; }

.tab-close-button {
display: block !important;
}

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

 

[2002Andreas]

wird von der Tableiste verdeckt.

Ich bin mir nichts sicher, aber hast du deine Tableiste per CSS verschoben?
Wenn ja, dann poste doch bitte mal deinen Code dazu.
Wahrscheinlich muss nur der Wert für den Abstand geändert werden.

Ergänzung (5. Juni 2021)

Echt klasse

Gern geschehen

 

[cbtestarossa]

@2002Andreas

ja ich habe die Tableiste per css verschoben
nun will ich eben auch die Lesezeichenleiste/Text per css verschieben

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: 30px !important;
}

#TabsToolbar {
position: absolute !important;
display: block !important;
top: 64px !important;
width: 100% !important;
}

.tabbrowser-tab {
margin-top: -4px !important;
max-height: 37px !important;
}

#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
min-width: 0px !important;
width: 25px !important;
margin-bottom: 0px !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}

 

[2002Andreas]

Teste bitte mal:

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {

    padding-bottom: 35px !important;

    }


    #TabsToolbar {

    position: absolute !important;

    display: block !important;

    top: 64px !important;

    width: 100% !important;

    }


    .tabbrowser-tab {

    margin-top: -4px !important;

    max-height: 37px !important;

    }

    #tabbrowser-tabs {

    width: 100vw !important;

    }

 

[cbtestarossa]

@2002Andreas

nö damit ist es das selbe.

teste einfach mal mit der Option Lesezeichensymbolleiste immer ein / immer aus dann siehst du was ich meine.

 

[2002Andreas]

damit ist es das selbe.

Siehe bitte meinen Screenshot, da passt es.

Wenn du zwischen anzeigen und ausblenden der Leiste wechselst, stimmen die Abstände nicht mehr.
Abstand wird in Zeile 14 verändert.

Du kannst also nur wählen..Leiste anzeigen oder nicht.

 

[cbtestarossa]

Ja die Abstände passen nicht, dass ist mir klar.
Wenn man die Lesezeichensymbolleiste verwenden will muss man diese eben noch weiter nach unten schieben.
Und die Frage ist eben ob das geht und mit welchem Code.
Mozilla ist leider so stur und baut die Funktion einfach aus/um ohne sich um einen Workaround zu kümmern.

 

[2002Andreas]

Und die Frage ist

Ich bin mir nicht sicher, ob sich das überhaupt per CSS lösen lässt.