schwarzer Rahmen um Tabs

Firefox_94.0.1

Ich nutze für die Tabs aktuell folgenden css-Code:

CSS

/*Form und Hintergrundfarbe*/
.tabbrowser-tab:not(image.tab-icon-overlay[role="presentation"]) {
     color: #fff !important;
}
.tab-background[selected]  {
 background: #2b2c86 !important;
 border-color: #2b2c86 !important;
}
.tab-background:not([selected])  {
 background: #00016e !important;
}
/*:hover Hintergrund von nicht aktiven Tabs*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
 background-color: #15167a !important;
 outline: 1px solid var(--tab-hover-outline-color);
 outline-offset: -1px;
 border-color: #15167a !important;
}

Alles anzeigen

Jetzt hat der aktive Tab aber seit heute? einen schwarzen Rahmen. Wie kann ich den entfernen? Die Ergänzung "background-color" mit der gleichen Farbe wie der Hintergrund hat nichts gebracht.

2002Andreas

Zitat von Firefox_94.0.1

einen schwarzen Rahmen

Teste bitte:

CSS

/*Form und Hintergrundfarbe*/
.tabbrowser-tab {
 color: #fff !important;
}
.tab-background[selected] {
 background-color: #2b2c86 !important;
 border-color: #2b2c86 !important;
 box-shadow: none !important;
}
.tab-background:not([selected]) {
 background-color: #00016e !important;
}
/*:hover Hintergrund von nicht aktiven Tabs*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
 background-color: #15167a !important;
}

Alles anzeigen

Zwecks besserer Erkennung der Hg mal in gelb:

2002Andreas

Zitat von Firefox_94.0.1

einen schwarzen Rahmen.

Nur mal so.

Zeile 7 in deinem Code funktioniert so nicht:

Wennn du einen Rahmen haben wollest, dann:

CSS

.tab-background[selected]  {
  border: 3px solid #2b2c86 !important;
}

Und Zeile 15 - 17 hatte hier keine Funktion.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

einen schwarzen Rahmen

Teste bitte:

CSS

/*Form und Hintergrundfarbe*/
.tabbrowser-tab {
 color: #fff !important;
}
.tab-background[selected] {
 background-color: #2b2c86 !important;
 border-color: #2b2c86 !important;
 box-shadow: none !important;
}
.tab-background:not([selected]) {
 background-color: #00016e !important;
}
/*:hover Hintergrund von nicht aktiven Tabs*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
 background-color: #15167a !important;
}

Alles anzeigen

Zwecks besserer Erkennung der Hg mal in gelb:

Der schwarze Rahmen ist immer noch da.

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

einen schwarzen Rahmen.

Nur mal so.
Zeile 7 in deinem Code funktioniert so nicht:

Wennn du einen Rahmen haben wollest, dann:
CSS
.tab-background[selected]  {
  border: 3px solid #2b2c86 !important;
}
Und Zeile 15 - 17 hatte hier keine Funktion.
Alles anzeigen

Das war mein Versuch, den Rahmen über die "border"-Eigenschaft zu überschreiben, welcher aber nichts bewirkt hat. Auch mit deiner Änderung bekomme ich diesen Rahmen nicht weg...

2002Andreas

Zitat von Firefox_94.0.1

Auch mit deiner Änderung bekomme ich diesen Rahmen nicht weg...

Nutzt du ein Theme, wenn ja, welches?

Ansonsten habe ich hier keinen Rahmen um den aktiven Tab

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Auch mit deiner Änderung bekomme ich diesen Rahmen nicht weg...

Nutzt du ein Theme, wenn ja, welches?
Ansonsten habe ich hier keinen Rahmen um den aktiven Tab

Nein. Alles Eigenkreationen mit Hilfe von diesem Forum. Hier ein Bild:

Mira_Belle

Zitat von Firefox_94.0.1

Nein. Alles Eigenkreationen mit Hilfe von diesem Forum. Hier ein Bild:

Dann her mit dem Code! Bitte.

Denn es ist anzunehmen, dass dieser schwarze Rahmen durch eine Deiner Eigenkreationen entsteht.

Du kannst das aber auch selber testen, kommentiere einzelne Abschnitte per /* .... */ aus

und merke Dir, welcher Code wofür zuständig ist!

milupo

Firefox_94.0.1 Bitte mache keine Vollzitate mehr! Markiere den zu zitierenden Text mit der Maus, dann erscheint ein kleines Popup-Fenster und dort klickst du auf „Zitat einfügen“.

Horstmann

Zitat von Firefox_94.0.1

Jetzt hat der aktive Tab aber seit heute? einen schwarzen Rahmen. Wie kann ich den entfernen? Die Ergänzung "background-color" mit der gleichen Farbe wie der Hintergrund hat nichts gebracht.

Falls das oben dein einziger Tabs Code ist (?), könntest du mal das hier testen; die selektierten Tabs haben eigentlich keine Border, sondern eine Outline:

CSS

.tab-background:is([selected], [multiselected]) { 
    outline-color: red !important;
    /*--tab-selected-outline-color: transparent !important;*/
}

Weitere Variablen und Code dazu hier und hier; evtl. hilft ja sowas --tab-selected-outline-color: transparent !important;.

Mira_Belle

Versuche es mal mit diesem Schnipsel.

CSS

    .tabbrowser-tab .tab-background {
      box-shadow: none !important;
}

Alles zusammen:

CSS

  /*Form und Hintergrundfarbe*/
  .tabbrowser-tab:not(image.tab-icon-overlay[role="presentation"]) {
      color: #fff !important;
  }
  .tab-background[selected]  {
      background: #2b2c86 !important;
      border-color: #2b2c86 !important;
  }
  .tab-background:not([selected])  {
      background: #00016e !important;
  }
  /*:hover Hintergrund von nicht aktiven Tabs*/
  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
      background-color: #15167a !important;
      outline: 1px solid var(--tab-hover-outline-color);
      outline-offset: -1px;
      border-color: #15167a !important;
  }
  .tabbrowser-tab .tab-background {
       box-shadow: none !important;
  }

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

Versuche es mal

Besser wäre doch erstmal zu klären, woher der Rahmen bei ihm überhaupt kommt. Standard ist der nämlich nicht. Und dazu müsste er mal seinen kompl. Code hier posten.

Zitat von Mira_Belle

Alles zusammen:

Auch hier wieder:

Zeile 7 ebenso wie Zeile 17 funktionieren so nicht.

Horstmann

Zitat von 2002Andreas

Besser wäre doch erstmal zu klären, woher der Rahmen bei ihm überhaupt kommt. Standard ist der nämlich nicht. Und dazu müsste er mal seinen kompl. Code hier posten.

Hier am Mac erscheint die Outline, wenn man in seinen OS Einstellungen Kontrast erhöhen einstellt.
Im oben verlinkten searchfox Code sieht man noch weitere Variablen für nicht transparente Outlines bei selektierten Tabs.
Ist zwar etwas anders aufgebaut als in meinem alten 115esr , aber das Prinzip scheint noch das Gleiche zu sein.

Weshalb bei Firefox_94.0.1 der Rahmen erst nach einem Update aufgetaucht ist - keine Ahnung; der Code dafür ist allerdings generell in Fx vorhanden.

Kann tatsächlich sein dass ein anderer CSS Code für Outlines dazwischenfunkt, oder evtl. ein nicht aktuelles Theme benutzt wird.

Mira_Belle

Bei mir ist es so, dass ein aktiver Tab diesen Schatten hat!

Was zum Basteln:

CSS

  /*Form und Hintergrundfarbe*/
  .tabbrowser-tab:not(image.tab-icon-overlay[role="presentation"]) {
      color: #fff !important;
  }
  .tab-background[selected]  {
      background: yellow !important;
      border: 2px solid lime !important;
  }
  .tabbrowser-tab:hover > .tab-stack > .tab-background[selected] {
      background: red !important;
  }
  .tab-background:not([selected])  {
      background: green !important;
  }
  /*:hover Hintergrund von nicht aktiven Tabs*/
  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
      background-color: brown !important;
      border: 2px solid lime !important;
  }
  .tabbrowser-tab .tab-background {
       box-shadow: none !important;
  }

Alles anzeigen

Firefox_94.0.1 Es wäre wirklich schön, wenn Du Deinen kompletten Code posten würdest!

2002Andreas

Zitat von Mira_Belle

dass ein aktiver Tab diesen Schatten hat!

Das ist auch Standard so.

box-shadow

Dem TE geht es aber um einen Rahmen um den aktiven Tab.

Und Zeile 21 aus deinem Code könntest du auch nach Zeile 7 einfügen.

Denn der inaktive Tab hat keinen Schatten.

Mira_Belle

2002Andreas Bis jetzt ist der Code von mir ja nur eine Spielerei!

Und auf dem Bildchen von Firefox_94.0.1in Beitrag #6 ist ja auch nur ein Tab zusehen!
Ist halt jetzt die große Preisfrage, ist der Schatten bei allen Tabs da, oder doch nur beim Aktiven.

Wir werden jetzt abwarten müssen, wie sich Firefox_94.0.1 zu dem Ganzen äußert
und er hoffentlich seinen ganzen Code offenlegt.

2002Andreas

Zitat von Mira_Belle

oder doch nur beim Aktiven.

Starte doch einfach mal ein neues Profil, und öffne mehrere Tabs, dann siehst du es

Nur der aktive Tab rechts hat den Schatten.

Mira_Belle

2002Andreas Habe ich etwas anderes behauptet? Oder habe ich mich missverständlich ausgedrückt?

Auf dem Bild #6 ist nur ein Tab, und der dürfte ja ohne Frage aktiv sein, zu sehen.

Wobei, man kann aber auch, wenn man genau hinschaut, einen Rahmen erkennen.
Möge Firefox_94.0.1 doch bitte die Tabfarbe mal in Gelb "verstellen" und dann noch einmal einen Screenshot machen.

2002Andreas

Zitat von Mira_Belle

Oder habe ich mich missverständlich ausgedrückt?

Zitat von Mira_Belle

ist der Schatten bei allen Tabs da

Zitat von Firefox_94.0.1

hat der aktive Tab aber seit heute? einen schwarzen Rahmen.

Ohne seinen kompl. Code ist alles Weitere sinnlos.

Firefox_94.0.1 · Screenshot 2024-10-15 181152.png

2002Andreas Mira_Belle

Für die Tabs nutze ich nur den oben geposteten Code. Den Hintergrund habe ich hiermit angepasst:

CSS

/********************* Tabs ********************************************/

/*Form und Hintergrundfarbe*/
.tabbrowser-tab:not(image.tab-icon-overlay[role="presentation"]) {
     color: #fff !important;
}
.tab-background[selected]  {
 background: #2b2c86 !important;
}
.tab-background:not([selected])  {
 background: #00016e !important;
}
/*:hover Hintergrund von nicht aktiven Tabs*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
 background-color: #15167a !important;
 outline: 1px solid var(--tab-hover-outline-color);
 outline-offset: -1px;
}

/*Lautsprecher (Medienwiedergabe)*/
image.tab-icon-overlay[role="presentation"]{
 background-color: #fff !important;
 color: #00016e !important;
 margin-left: 25px !important;
}
/*Tab schließen*/
.tab-close-button[fadein]:focus-visible {
fill: white !important;
background: #E81123 !important;
}

Alles anzeigen

Ansonsten habe ich mal alles, was css heißt auskommentiert und der Rahmen ist trotzdem da:

2002Andreas

Zitat von Firefox_94.0.1

der Rahmen ist trotzdem da:

Standard gibt es den nicht.

Also muss es einen anderen Grund dafür geben.

Wie sieht es im Fehlerbehebungsmodus vom Firefox aus?

Welches Theme nutzt du?

Beispiel hier:

schwarzer Rahmen um Tabs

Ähnliche Themen

Tabform

Blauer Rahmen um Tabbar oder Titlebar