Beiträge von Horstmann

Horstmann

Zitat von gumbl

Das habe ich versucht, aber es ist keine Änderung feststellbar.
Habe auch nochmal alles gecheckt, Datei liegt in
C:\Users\Rae\AppData\Roaming\Mozilla\Firefox\Profiles\jxov5t.default-release\chrome\userChrome.css

Hmm, du könntest mal versuchen, deine userChrome.css mit der angehängten Datei zu ersetzen.

Das ist der Code von Andreas, plus noch 2 grelle Hintergrundfarben zum Testen.

userChrome.css.zip

Das sollte dann so aussehen:

Horstmann

Zitat von FFmic

So, ich habe die Tableiste nun doch wieder nach unten gesetzt.
Aber: Auch Minimieren/Maximieren/Schließen sind mit nach unten gewandert. Das ist seltsam.
Oben erscheint das Trio nur, wenn ich per F10 die Menüleiste aktiviere.

Ist doch normal so, oder ist das wieder ein Mac Ding?

Die Window Buttons sind generell in der Titelleiste, hier zumindest.

Ist die Titelleiste "deaktiviert", werden Titelleiste und Tableiste quasi zusammengefasst, und die Window Buttons sind dann Teil dieser kombinierten Titel/Tableiste.

Wenn du die Tableiste bei deaktivierter Titelleiste verschiebst, wandern die Buttons mit.

Verschieben kannst du die Dinger danach schon, mit etwas CSS, je nachdem wo sie hinsollen.

Horstmann

Zitat von 2002Andreas

Auch der funktioniert einwandfrei.

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

auch in 119+ klappt.

Im Anpassenfenster

Danke für's Testen!

Ich habe den Code nochmal gerafft bekommen, das war mir doch zu unhübsch und umständlich .

CSS

/* Text sichtbar machen / optional nach links vom Icon verschieben */
toolbar #bookmarks-menu-button  label.toolbarbutton-text {
    display: flex !important;
    /*order: -1 !important;*/
}

/* Text ändern */
#bookmarks-menu-button label.toolbarbutton-text::before, 
toolbarpaletteitem[place="palette"]#wrapper-bookmarks-menu-button::after {
    content: "Eigener Text" !important;
}

Alles anzeigen

Horstmann

Ich weiss man sollte keine alten Themen ausgraben , aber das hier fand ich generell ganz interessant.

Die meisten Buttons in Fx haben ja Text, der ist nur nicht sichtbar.

Dieser Text sitzt in einem ::before Element zu label, und - man kann ihn sich anpassen!

Diesen Text zu beutzen ist um einiges einfacher als ein neues Pseudoelement zu basteln, wie wir es hier gemacht hatten; weniger Code, und alle nötigen Maße, Farben etc. werden von Fx bereitgestellt.

Das Prinzip sollte bei den meisten Buttons funktionieren; der eine zusätzliche Aufwand ist für das Anpassen Fenster, da fällt mir gerade nichts eleganteres ein.

Wer Lust hat kann das hier mal testen; ich bin auf Fx115esr, würd mich interessieren ob das auch in 119+ klappt.

CSS

/* Text sichtbar machen / optional nach links vom Icon verschieben */
#bookmarks-menu-button  label.toolbarbutton-text {
    display: flex !important;
    /*order: -1 !important;*/
}

/* Text ändern */
#bookmarks-menu-button label.toolbarbutton-text::before {
    content: "Eigener Text" !important;
}

/* Anpassen Fenster */

toolbarpaletteitem[place="palette"]#wrapper-bookmarks-menu-button::after {
    content: "Eigener Test" !important;
}

toolbarpaletteitem[place="palette"] label.toolbarbutton-text::before {
    display: none !important;
}

Alles anzeigen

Horstmann

Zitat von xyzdef

Sicherlich finde ich zu Haufe Beispielcodes im Netz. Wo befinden sich gute Seiten?

Gibt ne Menge, aber dieses Forum ist schon mal prima, eine Menge Info und Code findet sich auch auf Reddit (muss man sich halt teils durchquälen), und die beste Anfänger-freundliche CSS Code Sammlung für Fx - die ich kenne - ist diese.

Gute Quellen für Basiswissen und sehr nützlich als Nachschlagewerke zu einzelnen Themenbereichen sind MDN oder W3schhools; eine gute Übersicht über aktuellen Fx Code gibt es bei searchfox.

MDN Artikel gibt es teils auch in Deutsch, aber Englisch ist schon gut zu können, der Code selber ist ja auch in Englisch.

Horstmann

Zitat von Mira_Belle

Horstmann

Danke auch für diesen Code!

CSS

    #navigator-toolbox { 
        background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
    }

Gerne doch, war eine meiner leichteren Übungen. ...

Kleiner Scherz, der Code ist nicht von mir.

Sieht aus wie ein Verlauf über die ganze Toolbox, das geht im Prinzip.

Horstmann

Zitat von Sören Hentzschel

Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor.

Stimmt schon; lesen bzw. verstehen kann ich den "neuen" Code halbwegs, und nach meiner kurzen Recherche ist es tatsächlich nicht so komplex, bringt aber wie gesagt interessante neue Möglichkeiten mit sich.

Mal schauen.

Wo ich mir nicht ganz sicher bin: ist Komma-Regeln die korrekte Schreibweise, oder sollte das nicht eher Kommaregeln sein?

Kleiner Scherz; bitte nicht nochmal eine Rechtschreibdebatte, oder - ... Rechtschreib-Debatte?

Horstmann

Zitat von Mira_Belle

Meine Frage, so ungenau gestellt, sollte aber was anderes klären.
Ich kann doch das Ergebnis einer Formel berechnen,
Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!
OK, mir gehen dann aber die Variablen verloren!
Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen
addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher
und besser nachvollziehbar, als so manche kryptische Originalformel.
Das Ergebnis muss doch nur stimmen!

Zitat von Horstmann

...
Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?
Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

Da treten keine Ungereimtheiten auf, also alles Bestens!

Alles anzeigen

Das Gute an Variablen, und den Berechnungsformeln, ist dass man nur einen oder einige wenige Werte ändern muss, um den gesamten Code auf einmal anzupassen.

Vorrausgesetzt natürlich dass man alles korrekt aufgebaut hat; und ich bin da nicht gerade Experte drin.

Neu gibt es noch dazu das Nesting und (bald) den :has Selector in Fx, was noch mehr Möglichkeiten eröffnet.

Aber ob ich dass noch dazulernen will...

Unser Code hier ist ziemlich einfach, ich hab selber zum Testen meist nur absolute Werte benutzt, wegen der Übersichtlichkeit.

Für die Anwendung ist dann eine mehr automatisierte Form sinnvoller, weil man nur als Author noch dahintersteigt, welcher Wert warum wo steht.

Dann schau dir mal die Codes von Aris an, oder auch andere wie der erwähnte von Godie etc., das ist eine komplett andere Welt.

An sowas kann ich nicht mal kratzen, die Komplexität an sich und der benutzten Variablen ist fantastisch.

Und gut zu hören dass multiselected klappt - da würde ich nur ungern nochmal drangehen.

Horstmann

Zitat von Mira_Belle

Aber weißt Du, ich wollte mir die Spielerei aufheben, mit dem Farbverlauf und so.
So was vergesse ich doch sonst, wenn ich es "lösche" und nicht hin und wieder ausprobiere!!
"Für was war das nochmal so? Muss ich testen. Achja, jetzt weiß ich es wieder!" Selbstgespräch Ende.

Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt?

Für Verläufe gibt's zig Möglichkeiten; kuck mal:

Horstmann

/*-------------------------------------------*/

Zitat von Mira_Belle
--tab-block-margin ist eine von 2 internen Fx Variablen, die Inhalte und Höhe der Tableiste massgeblich bestimmen; die andere ist --tab-min-height.
Schau dir hier mal die Codes hier an, und such jeweils nach den beiden Variablen im CSS.
Einfach ausgedrückt: .tab-background ist der sichtbare Teil einer Tab; die Höhe dieses Teils ist bestimmt durch --tab-min-height, der Abstand (margin) oben und unten durch --tab-block-margin.
In diesem Beispiel wird --tab-block-margin doppelt oben angewendet, und ist unten 0 --> .tab-background ist unten angeheftet.
Wieso doppelt? Weil die Tab an sich über die gesamte Höhe der Tableiste geht (quasi, und kommt drauf an ), und die Höhe der Tab ist --tab-min-height plus 2 x --tab-block-margin (block margin, also oben + unten).
Das ist dann auch die Höhe der Tableiste! (wieder quasi, und kommt drauf an )
CSS
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
Geht's hier um --ug-corner-size?
Das ist eine eigene Variable die die Grösse der Eckgrafiken definiert, und alle Berechnungen in dem Zusammenhang.
Sie wird definiert direkt unter /*** tabs corners ***/ im Code, und ist --ug-corner-size: var(--tab-min-height);.
In dem Code also 36px, was etwas weiter unten als ein 36px Quadrat für die Grösse der Grafik eingestellt wird, was der Höhe des .tab-background entspricht.
Mit left/right wird die Grafik dann zur Hälfte in die Tab reingerückt, um sich dann mit den oberen Rundungen (border-radius) des .tab-background zu treffen.
Für einen besseren Übergang ist dann noch ein mask-image eingebaut.
CSS
    .tabbrowser-tab .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: var(--ug-corner-image) !important;
    }
CSS
    /*  right  */
    .tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: var(--ug-corner-image) !important;
        transform: scaleX(-1) !important;
    }
Werte sind hier nach Gefühl und visuell bestimmt; das padding --ug-tab_Pad legt die "physische" Gesamtbreite der Tab fest, die erweitert wird um die zusätzlichen Eckgrafiken in die Tab hinein zu legen, statt dass sie herausragen.
--ug-tab_Marge rückt dann einige Tabs wieder näher aneinander, damit die Tabs mit Eckgrafiken und die ohne eng zusammenstehen, durch überlappen der Tabs.
CSS
    /* Base values ; tab padding, margin */
    #tabbrowser-tabs {
        --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                    /* 26px */
        --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);          /* -48px */
        /*--tab-min-width:  120px !important;*/
    }
Macht die Buttons kleiner in der Tableiste um die 2px am Ende der Kalkulation.
Fx berechnet so die sichtbare Buttongrösse; sehr umfangreiches Thema, am besten wieder auf searchfox oder in den Toolsdie CSS Dateien danach durchschauen.
CSS
    /* Buttons smaller by 2px */
    #TabsToolbar {
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
Die sind in dem CSS aus Beitrag #130.
Und ich hätte gerne gewusst, wo diese Formeln herkommen.
Wieso werden diese Werte berechnet, bzw, so?
Ginge doch auch anders!
Alles anzeigen

Um zu wissen dass es anders geht, musst du eigentlich erstmal wissen wie es anders geht, und was der Code macht.

Aber natürlich geht's anders, wie immer.

Anmerkungen schreib ich oben rein zu den einzelnen Blöcken, hoffe das macht halbwegs Sinn.

Zitat von Mira_Belle

Zitat von Horstmann

...
Kapier ich nicht, da fehlt die rechte Ecke in der selektierten Tab, in der letzten Tab ist sie da - bei mir aber nicht.
Hast du das mal in einem Testprofil probiert - ohne das ganze andere CSS und Scripts?
In dem Screenshot ist noch eine Menge anderes CSS etc. beteiligt.
...

Gerade eben!
Leider ...
... auch da, und wirklich ohne andere Anpassungen

Alles anzeigen

Danke für den Test!

Hmm, das ist wirklich seltsam.

Ich hatte das auch auf meinem Fx 119 Frankencomputer getestet, ohne Probleme; sonst hätte ich gesagt wegen meinem normalen 115esr Testumfeld sind die Selektoren nicht aktuell.

Aber dann war es eine gute Idee, fill/stroke direkt in die before/after Elemente zu schreiben.

Ich hatte das eigentlich nur weiter nach oben verlegt, damit alle Farbeinstellungen im gleichen Block liegen, was aber funktionell schnuppe ist. Bzw. in deinem Fall gar nicht klappt.

Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?

Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

Horstmann

Zitat von Mira_Belle

Irgendwie komme ich mir blöd vor, Dir all diese Codeschnipsel raus suchen zu müssen.
Die sind in dem CSS aus Beitrag #130.
Und ich hätte gerne gewusst, wo diese Formeln herkommen.
Wieso werden diese Werte berechnet, bzw, so?
Ginge doch auch anders!

Einige deiner Codebeispiele von vorher (#133) waren aber so nicht in meinem Code, daher die Frage; raus suchen musst du sie nicht, ich hab sie ja reingeschrieben, die find ich inzwischen im Schlaf.

Zu den Formeln später mehr.

Zitat von Mira_Belle

Zitat von Horstmann

Zitat von Mira_Belle

Bugs.

Wieder die fehlenden Vektorgrafiken.

Korrektur:

CSS

/* -------------------------------------------------------------------------------------------------------------- */
    /* fill colors selected / unselected hover */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
        fill: var(--ug-color2) !important;       
        stroke: var(--uc-color-orange-normal) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
        fill: var(--ug-color2-multi) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
        fill: var(--ug-color_multi_hova) !important;
    }

    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
/* -------------------------------------------------------------------------------------------------------------- */

Alles anzeigen

Da kann entweder die Grafik komplett fehlen, und dann macht dieser geänderte CSS Code gar keinen Unterschied, weil er nur die Kanten der Grafik betrifft.

Und gleich noch mal ein Test vom Original ohne Veränderungen.

Alles anzeigen

Kapier ich nicht, da fehlt die rechte Ecke in der selektierten Tab, in der letzten Tab ist sie da - bei mir aber nicht.

Hast du das mal in einem Testprofil probiert - ohne das ganze andere CSS und Scripts?

In dem Screenshot ist noch eine Menge anderes CSS etc. beteiligt.

Du kannst aber fill/stroke auf jeden Fall in die before/after Elemente schreiben (und mit den Variablen von oben), hatte ich ursprünglich auch so, sollte aber eigentlich keinen Unterschied machen.

Horstmann

Zitat von Mira_Belle

Noch besser bekomme ich es jetzt wirklich nicht mehr hin!

CSS

    /*--------------------------------------------*/
    /****     Tabbar nach unten verschieben    ****/
    /*--------------------------------------------*/
   
    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 8px );
    }
   
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
    }

    /*--------------------------------------------------*/
    /****  Trennlinie zwischen Inhalt und Tableiste  ****/
    /*--------------------------------------------------*/
    #TabsToolbar {
        bottom: 6px !important;         /* Tableiste etwas angehoben */
        width: 100vw !important;        /* Tableistenbreite festgelegt */
        background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
        margin-bottom: -7px !important; /* Trennlinie nach unten verschoben */
        padding-bottom: 7px !important; /* Tabs etwas angehoben */
    }

Alles anzeigen

Das Problem ist, bei mir auf dem Mac ist das alles anders aufgebaut; hier funktioniert #titlebar { order: 1 !important; }, Fensterbuttons noch bei Bedarf verschieben oder ausblenden, und fertig.

Andreas hat erwähnt dass das in Windows mit aktuellem Fx wohl nicht mehr klappt, kann ich aber halt nichts zu sagen; dein Code klappt am Mac so nicht.

Es gibt wie immer was von MrOtherGuy, das sieht aktuell aus (benutzt auch order?); den von 2002Andreas finde ich gerade nicht.

Für eine dicke Kante würde ich sowas probieren, ohne das ganze Padding und Margin unten und Verschieben (Ausnahme:

#navigator-toolbox padding erhöht um Borderbreite), das geht auch bei mir im groben Schnelltest (aber: am Mac !):

CSS

#TabsToolbar {
    border-bottom: 7px solid red !important; 
}

.titlebar-buttonbox-container {
    display: none !important;
}

    /*--------------------------------------------*/
    /****     Tabbar nach unten verschieben    ****/
    /*--------------------------------------------*/
   
    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 7px + 2 * var(--tab-block-margin));
    }
   
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
    }

    /*--------------------------------------------------*/
    /****  Trennlinie zwischen Inhalt und Tableiste  ****/
    /*--------------------------------------------------*/
    #TabsToolbar {
        bottom: 0px !important;         /* Tableiste etwas angehoben */
        width: 100% !important;        /* Tableistenbreite festgelegt */
    }

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Bugs.

Wieder die fehlenden Vektorgrafiken.

Korrektur:

CSS

/* -------------------------------------------------------------------------------------------------------------- */
    /* fill colors selected / unselected hover */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
        fill: var(--ug-color2) !important;       
        stroke: var(--uc-color-orange-normal) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
        fill: var(--ug-color2-multi) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
        fill: var(--ug-color_multi_hova) !important;
    }

    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
/* -------------------------------------------------------------------------------------------------------------- */

Alles anzeigen

Da kann entweder die Grafik komplett fehlen, und dann macht dieser geänderte CSS Code gar keinen Unterschied, weil er nur die Kanten der Grafik betrifft.

Oder du hast evtl. die Farben verändert bevor du den Code unverändert probiert hast, und in einem Profil ohne andere CSS; die Farben sind sonst eigentlich festgemeisselt.

Zitat von Mira_Belle

Code für Tabs unten
Da habe ich lange für gebraucht, dass das Ergebnis gut ausschaut.
Bei allen anderen Ideen, die ich hatte, war nie das Ergebnis zufriedenstellend.

Andere Baustelle, aber der Code ist ... Müll. Sorry.

Zitat von Mira_Belle

Kommen wir zu guterletzt noch zu einer Sache, die mir Kopfschmerzen bereitet!
Es gib an mehreren Stellen im Code eine Formel.
z.B.
calc( var(--tab-min-height) + 10px );
calc(0px - var(--ug-corner-size) / 2);
calc(-10px + var(--ug-corner-size) / 2);
calc(38px - var(--ug-corner-size) - 12px);
und auch
calc((var(--tab-min-height) - 16px) / 2 - 2px);
Wo kommen die her und wie leiten sie sich ab?

Alles anzeigen

Zuerst mal, calc( var(--tab-min-height) + 10px ); kommt aus deinem Tabs unten Code, nicht von mir - damit will ich nichts zu tun haben.

Generell ist --tab-min-height eine interne Firefox Variable, mit der man eine Menge Sinn und Unsinn anrichten kann, genauso wie mit --tab-block-margin.

Die var(--ug-corner-size) Regeln in dem Beispiel kommen mir teilweise auch unbekannt vor - hast du daran selber was gedreht, oder von alten Versionen übernommen?

Falls ja - keine gute Idee.

--ug-corner-size ist schlicht eine selber gemachte Variable für die Höhe und Breite der Eckengrafik, und gleich mit --tab-min-height, die ganz oben neu definiert wird.

Und eigentlich nur deshalb um den schwachsinnigen Kompaktmodus mit zu bedienen.

Der Code ist eigentlich nur dafür gedacht die Farben im oberen Bereich zu ändern und ein evtl. paar Kleinigkeiten für Buttons etc., und sieht keine anderweitige CSS vor die eingreift oder manche Teile überschreibt - wofür man auch nicht planen kann.

Wenn also der Code in einem sonst unveränderten Testprofil nicht funktioniert, kann ich mir das gerne anschauen.

Andernfalls eben nicht.

Horstmann

Zitat von Mira_Belle

Horstmann

Die letzte, neue Version gefiel mir sehr gut, vielen Dank.
Ich habe noch ein paar Kleinigkeiten verändert, klitzekleine Bugs beseitigt und Farben angepasst.

Hier das komplette CSS

Prima!

Was für Bugs hast du denn selber noch gefunden/geändert, gibt ja bestimmt noch einige?

Die Border unten war in meinem Setup aber so gewollt, macht die seitlichen runden Kanten sauberer, aber das hängt von den anderen Farben etc. ab.

Sonst hab ich auf den ersten Blick nichts gesehen, ausser dass dein Code für Tabs unten bei mir gar nicht funktioniert, aber das ist nur weil ich auf einem Mac bin.

Trotzdem sieht der Code dafür nicht dolle aus, würd ich bei Gelegenheit nochmal rangehen.

Horstmann

Zitat von Mira_Belle

Werde ich machen, danke.

Aufgeräumt und besser kommentiert, eine Version für dein dunkles Theme, ist evtl. einfacher zu arbeiten mit.

Edit: mehr Overflow Bug Fixes.

CSS

/*** Curved tabs beta D2c sauber - dunkles Theme ***/


/*** General adjustments ***/

:root {

/* Tabs bar height adjust */
    /*--tabs-navbar-shadow-size: 0 !important;*/
    /*--tab-block-margin: 4px !important;*/
    --tab-block-margin: 2px !important;
    --tab-min-height: 36px !important;

/* Edges without corner Svg /  Radius */
    /*--ug-radius: 20px;*/
    --ug-radius: 19px;


/* Edges (borders, outlines) colors */

/* Edges not selected */
    --ug-color-border: hsla(0, 0%, 83%, 0.5);                       /* hellgrau unselected Kante Tab */
    --ug-stroke: var(--ug-color-border);                                              /* unselected Kante Svg */
    --ug-kante_hova: hsla(0, 0%, 93%, 0.65);        /* mittelgrau unselected alle Kanten hover */

/* Edges selected , multiselected */
    --ug-color-border_select: hsla(0, 0%, 93%, 0.75);                     /* mittelgrau hell+ selected Kante Tab */
    --ug-stroke_select:  var(--ug-color-border_select);                                              /* selected Kante Svg */
    --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);  /* mittelgrau hell++ multiselected alle Kanten hover */


/* Tabs background colors:  */

    --ug-color1: hsla(0, 0%, 83%, 0.25);                                               /* hellgrau basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                                    /* zart orange selected */
    --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                        /*zart orange dunkel+ multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);   /* zart orange dunkel++ multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                                  /* mittelgrau#2 unselected hover */

/* Tab bar unten, border bottom color */
    --ug-color_bottom: hsla(0, 0%, 93%, 1);                   /* hellgrau nicht transparent, Kante unten */
}

/* Tab bar border bottom */

#TabsToolbar {
    box-shadow: inset 0px -1px var(--ug-color_bottom) !important;
}

/*** General adjustments end ***/


                                                           /*** Tabs base ***/

/* tabs connected bottom */

.tab-background {
    margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}

/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/

/*  Basis alle Tabs  */

.tabbrowser-tab .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
    border: 1px solid !important;
    /*border-bottom: none !important;*/
}

.tabbrowser-tab:not([pinned]) .tab-background {
    border-left: none !important;
}

/*  Zusatzregeln, überschreiben Basis alle Tabs  */

/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
    border-radius: var(--ug-radius) !important;
    border-left: 1px solid var(--ug-color-border) !important;
}

/* Last tab dual corners, unless it comes after selected tab */
.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
    border-right: none !important;
}

                                                          /***  COLORS  ***/

/**  In about:config set svg.context-properties.content.enabled to true  **/

/*  Basis alle Tabs  */

.tabbrowser-tab .tab-background {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--ug-color1) !important;
    border-color: var(--ug-color-border) !important;
    stroke: var(--ug-stroke) !important;
    fill: var(--ug-color1) !important;
}

/*  Zusatzregeln, überschreiben Basis alle Tabs  */

/* Colors, outlines: selected / multiselected / hover */

/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    stroke: var(--ug-stroke_select) !important;
    border-color: var(--ug-color-border_select) !important;
    fill: var(--ug-color2) !important;
}

/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
    background-color: var(--ug-color2-multi) !important;
    fill: var(--ug-color2-multi) !important;
}

/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
    background-color: var(--ug-color_multi_hova) !important;
    fill: var(--ug-color_multi_hova) !important;
    stroke: var(--ug-kante_hova_select) !important;
    border-color: var(--ug-kante_hova_select) !important;
}

/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
    background-color: var(--ug-color_hova) !important;
    fill: var(--ug-color_hova) !important;
    stroke: var(--ug-kante_hova) !important;
    border-color: var(--ug-kante_hova) !important;
}

                                                      /***  tabs corners  ***/
/*  base  */

#TabsToolbar {
    --ug-corner-size: var(--tab-min-height);
    /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
    --ug-corner-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 32 32'%3E%3Cpath d='M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z' fill='context-fill'/%3E%3Cpath d='M3 32.5 A16 16 0 0 0 15.5 16' fill='rgba(155,122,0,0)' stroke='context-stroke' stroke-width='1px'/%3E%3Cpath d='M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z' fill='rgba(155,122,0,0)'/%3E%3Cpath d='M15.5 16 A18.5 18 0 0 1 35.5 -0.5' fill='transparent' stroke='context-stroke' stroke-width='1px' /%3E%3C/svg%3E%0A");
}

.tabbrowser-tab .tab-background::before, 
.tabbrowser-tab .tab-background::after {
    content: "";
    position: absolute;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    width: var(--ug-corner-size) !important;
    height: var(--ug-corner-size) !important;
    background-size: var(--ug-corner-size) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    pointer-events: none !important;
}

/*  left  */
.tabbrowser-tab .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
}

/*  right  */
.tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
    background-image: none !important;
}

/*  pinned no corners  */
.tabbrowser-tab[pinned] .tab-background::before, 
.tabbrowser-tab[pinned] .tab-background::after {
    display: none !important;
}

                                        /****   Margins etc. overflow fix   ****/
/*
.tabbrowser-tab:not([pinned]) {
    outline: 1px solid hsla(135, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;
}
*/

/* Base values ; tab padding, margin */
#tabbrowser-tabs {
    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                    /* 26px */
    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);          /* -48px */
    /*--tab-min-width:  120px !important;*/
}

/* Basis all Tabs */
.tabbrowser-tab:not([pinned]) {
    overflow: visible !important;
    padding-inline: var(--ug-tab_Pad) !important;
}

/* Tab before any tab */
.tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}

/* Tab after selected */
.tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}

/* Tab selected  */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
    margin-inline: 0px !important;
}

/* Last tab after selected tab */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
    margin-inline: var(--ug-tab_Marge) 0px !important;
}


/***  Space for corner left/right - first/last tab, overflow bugs fix  ***/
/* Test #6 */

#tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
}
#tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
    margin-inline-end: 0px !important;
}

#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: -12px !important;
}
#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
    margin-inline-end: -12px !important;
}


/**  Diverses  **/

/* Adjust tab content position */
.tab-content {
    margin-top: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}

.tab-label, .tab-close-button {
    text-shadow: none  !important;
}

/** Buttons adjust size, position **/

/* Buttons smaller by 2px */
#TabsToolbar {
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}

/* New Tab (+) button, not overflow (+) button */

/* Button rund, smaller */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
    padding-block: 6px 8px !important;
}
/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
    outline: 1px solid var(--ug-color-border) !important;
    outline-offset: -1px !important;
}
/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
    margin: 0 !important;
    margin-top: 2px !important;
    padding-inline: 0px !important;
}
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    margin-left: -16px !important;
    z-index: 2 !important;
}

/* Close button */
.tabbrowser-tab:not([pinned]) .tab-close-button {
    border-radius: 50% !important;
    display: flex !important;
}
.tab-close-button:hover {
    /*outline: none !important;*/
    outline: 1px solid var(--button-active-bgcolor) !important;
    outline-offset: -1px !important;
    background-color: var(--button-hover-bgcolor) !important;
}


/* Move buttons up/down, optional, OFF */
/*
#TabsToolbar toolbarbutton {
    margin-top: -1px !important;
}
#tabbrowser-tabs {
    --ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}
*/

/***  Tab left higher z index / Vorrang vor Tab rechts  ***/
/*
.tabbrowser-tab:not([pinned]) .tab-content {
    z-index: 1 !important;
}*/

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Da nun an dieser Stelle die Entwicklung eingestellt wird, kann ich mich ja beruhigt an eine verbesserte Version
der meinigen machen.

Bevor ich den dringend nötigen Termin bei der Suchtberatung mache - einen könntest du vielleicht noch testen.

Der hier sollte kaum noch Auffälligkeiten im Overflow haben, und sollte besser als der ältere Code sein den du benutzt...
Farben kann man wieder komplett oben anpassen, ist hier zum Testen auf ein helles Profil eingestellt.

CSS

/*** Curved tabs beta D2 für hell ***/


/*** General adjustments ***/

:root {

/* Tabs bar height adjust */
    /*--tab-block-margin: 4px !important;*/
    --tab-block-margin: 2px !important;
    --tab-min-height: 36px !important;

/* Edges without Svg /  Radius */
    /*--ug-radius: 20px;*/
    --ug-radius: 19px;

/* Edges (borders, outlines) colors */

/* Edges not selected */
    --ug-color-border: hsla(0, 0%, 33%, 0.5);                  /* dunkelgrau unselected Kante Tab 83 */
    --ug-stroke: var(--ug-color-border);                                                   /* unselected Kante Svg */
    --ug-kante_hova: hsla(0, 0%, 43%, 0.65);        /* mittelgrau unselected alle Kanten hover 93 */

/* Edges selected , multiselected */
    --ug-color-border_select: hsla(0, 0%, 43%, 0.75);        /* mittelgrau hell+ selected Kante Tab */
    --ug-stroke_select:  var(--ug-color-border_select);                                /* selected Kante Svg */
    --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8);  /* mittelgrau hell++ multiselected alle Kanten hover 100 */


/* Tabs backgrounds:  */

    --ug-color1: hsla(0, 0%, 83%, 0.25);                                               /* hellgrau basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                                    /* zart orange selected */
    --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                        /*zart orange dunkel+ multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);   /* zart orange dunkel++ multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                                  /* mittelgrau#2 unselected hover */

/* Tab bar unten, border bottom color */
    --ug-color3: hsla(0, 0%, 43%, 1);                   /* dunkelgrau nicht transparent, Kante zu Website  */

    /*--tabs-navbar-shadow-size: 0 !important;*/
}

/* Tab bar unten, border bottom mit NavToolbox */
/*
#TabsToolbar {
    border-image: linear-gradient(to top, 
        var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !important;
}
*/
#navigator-toolbox {
    /*border-bottom: 1px solid var(--ug-color-border) !important;*/
    border-bottom: none !important;
    box-shadow: inset 0px -1px var(--ug-color3) !important;
}


/*** General adjustments end ***/


/* buttons adjust size, position */

/* Buttons smaller by 2px */
#TabsToolbar {
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}

/* Move buttons up/down, optional, OFF */
/*
#TabsToolbar toolbarbutton {
    margin-top: -1px !important;
}
#tabbrowser-tabs {
    --ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}
*/

/* adjust tab content */
.tab-content {
    margin-top: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}

.tab-label, .tab-close-button {
    text-shadow: none  !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
    border-radius: 50% !important;
    display: flex !important;
}
.tab-close-button:hover {
    /*outline: none !important;*/
    outline: 1px solid var(--button-active-bgcolor) !important;
    outline-offset: -1px !important;
    background-color: var(--button-hover-bgcolor) !important;
}

                                                           /*** Tabs base ***/

/* tabs connected bottom */

.tab-background {
    margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}

/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/

/*   basis   */
.tabbrowser-tab .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
    border: 1px solid !important;
    /*border-bottom: none !important;*/
}

.tabbrowser-tab:not([pinned]) .tab-background {
    border-left: none !important;
}

/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
    border-radius: var(--ug-radius) !important;
    border-left: 1px solid var(--ug-color-border) !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
    background-image: none !important;
}

/* Last tab dual corners, unless it comes after selected tab */

.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
    border-right: none !important;
}

                                                          /***  COLORS  ***/

/**  In about:config set svg.context-properties.content.enabled to true  **/


/* Basis */

.tabbrowser-tab .tab-background {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--ug-color1) !important;
    border-color: var(--ug-color-border) !important;
    stroke: var(--ug-stroke) !important;
    fill: var(--ug-color1) !important;
}

/* Colors, outlines: selected / multiselected / hover */

/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    stroke: var(--ug-stroke_select) !important;
    border-color: var(--ug-color-border_select) !important;
    fill: var(--ug-color2) !important;
}

/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
    background-color: var(--ug-color2-multi) !important;
    fill: var(--ug-color2-multi) !important;
}

/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
    background-color: var(--ug-color_multi_hova) !important;
    fill: var(--ug-color_multi_hova) !important;
    stroke: var(--ug-kante_hova_select) !important;
    border-color: var(--ug-kante_hova_select) !important;
}

/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
    background-color: var(--ug-color_hova) !important;
    fill: var(--ug-color_hova) !important;
    /*stroke: var(--ug-stroke_select) !important;*/
    stroke: var(--ug-kante_hova) !important;
    border-color: var(--ug-kante_hova) !important;
}

                                                      /***  tabs corners  ***/
/*  base  */

#TabsToolbar {
    --ug-corner-size: var(--tab-min-height);
    /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
    --ug-corner-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 32 32'%3E%3Cpath d='M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z' fill='context-fill'/%3E%3Cpath d='M3 32.5 A16 16 0 0 0 15.5 16' fill='rgba(155,122,0,0)' stroke='context-stroke' stroke-width='1px'/%3E%3Cpath d='M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z' fill='rgba(155,122,0,0)'/%3E%3Cpath d='M15.5 16 A18.5 18 0 0 1 35.5 -0.5' fill='transparent' stroke='context-stroke' stroke-width='1px' /%3E%3C/svg%3E%0A");
}

.tabbrowser-tab .tab-background::before, 
.tabbrowser-tab .tab-background::after {
    content: "";
    position: absolute;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    width: var(--ug-corner-size) !important;
    height: var(--ug-corner-size) !important;
    background-size: var(--ug-corner-size) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    mask-image: linear-gradient(215deg, transparent, black 18px) !important;
}

/*  left  */
.tabbrowser-tab .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
}

/*  right  */
.tabbrowser-tab[visuallyselected] .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

.tabbrowser-tab:last-of-type .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

/*  pinned no corners  */
.tabbrowser-tab[pinned] .tab-background::before, 
.tabbrowser-tab[pinned] .tab-background::after {
    display: none !important;
}




                                        /****   TEST margins etc overflow    ****/
/*
.tabbrowser-tab:not([pinned]) {
    outline: 1px solid hsla(135, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;
}
*/


                                           /*  TEST base -> 36px/2 + 2px padding Abstand    */

#tabbrowser-tabs {
    /*--ug-tab_Pad: calc(2px + var(--ug-corner-size) / 2);*/                /* 20px */
    /*--ug-tab_Marge: calc(0px - var(--ug-corner-size));*/                /* -36px */

    /*--ug-tab_Pad: calc(6px + var(--ug-corner-size) / 2);*/                /* 24px */
    /*--ug-tab_Marge: calc(0px - var(--ug-corner-size) - 8px);*/        /* -44px */

    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                    /* 26px */
    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);          /* -48px */

    /*--tab-min-width:  120px !important;*/
}
                                                                                                   /* basis TEST */

.tabbrowser-tab:not([pinned]) {
    overflow: visible !important;
    padding-inline: var(--ug-tab_Pad) !important;
}

                                                  /* Tab before any tab TEST */

.tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}
                                                  /* Tab after selected TEST */

.tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}

                                                                                                       /* Tab selected  TEST */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
    margin-inline: 0px !important;
}
                                                                                 /* Last tab after selected tab TEST */

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
    margin-inline: var(--ug-tab_Marge) 0px !important;
}

                                                 /* divers TEST */

/* Space for corner left/right - first/last tab, overflow bug fix ? */
/* Test #5 */

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
}
/*
#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: -12px !important;
}
*/

/*
#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-last-child(1 of [pinned]) {
    margin-inline-start: 40px !important;
    outline: 1px solid hsla(35, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;
}
*/

/* New Tab (+) button, not overflow (+) button */

/* Button rund, smaller */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
    padding-block: 6px 8px !important;
}

/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
    outline: 1px solid var(--ug-color-border) !important;
    outline-offset: -1px !important;
}

#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
    margin: 0 !important;
    margin-top: 3px !important;
    padding-inline: 0px !important;
}

/* Position, closer to last tab */
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    margin-left: -16px !important;
    z-index: 2 !important;
}

/*  tab left higher z index / Vorrang vor tab rechts */
.tabbrowser-tab:not([pinned]) .tab-content {
    z-index: 1 !important;
}

Alles anzeigen

Für dein Theme wie du es benutzt, könnte sowas evtl. ein Anfang sein:

CSS

/*** Curved tabs beta D2 für Dunkel ***/


/*** General adjustments ***/

:root {

/* Tabs bar height adjust */
    /*--tab-block-margin: 4px !important;*/
    --tab-block-margin: 2px !important;
    --tab-min-height: 36px !important;

/* Edges without Svg /  Radius */
    /*--ug-radius: 20px;*/
    --ug-radius: 19px;

/* Edges (borders, outlines) colors */

/* Edges not selected */
    --ug-color-border: hsla(0, 0%, 83%, 0.5);                  /* hellgrau unselected Kante Tab */
    --ug-stroke: var(--ug-color-border);                                                   /* unselected Kante Svg */
    --ug-kante_hova: hsla(0, 0%, 93%, 0.65);        /* mittelgrau unselected alle Kanten hover */

/* Edges selected , multiselected */
    --ug-color-border_select: hsla(0, 0%, 93%, 0.75);        /* mittelgrau hell+ selected Kante Tab */
    --ug-stroke_select:  var(--ug-color-border_select);                                /* selected Kante Svg */
    --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);  /* mittelgrau hell++ multiselected alle Kanten hover */


/* Tabs backgrounds:  */

    --ug-color1: hsla(0, 0%, 83%, 0.25);                                               /* hellgrau basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                                    /* zart orange selected */
    --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                        /*zart orange dunkel+ multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);   /* zart orange dunkel++ multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                                  /* mittelgrau#2 unselected hover */

/* Tab bar unten, border bottom color */
    --ug-color3: hsla(0, 0%, 93%, 1);                   /* hellgrau nicht transparent, Kante unten */

    /*--tabs-navbar-shadow-size: 0 !important;*/
}

/* Tab bar unten, borders bottom mit NavToolbox */
/*
#TabsToolbar {
    border-image: linear-gradient(to top, 
        var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !important;
}
*/
#navigator-toolbox {
    /*border-bottom: 1px solid var(--ug-color-border) !important;*/
    /*border-bottom: none !important;*/
    box-shadow: inset 0px -1px var(--ug-color3) !important;
}


/*** General adjustments end ***/


/* buttons adjust size, position */

/* Buttons smaller by 2px */
#TabsToolbar {
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}

/* Move buttons up/down, optional, OFF */
/*
#TabsToolbar toolbarbutton {
    margin-top: -1px !important;
}
#tabbrowser-tabs {
    --ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}
*/

/* adjust tab content */
.tab-content {
    margin-top: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}

.tab-label, .tab-close-button {
    text-shadow: none  !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
    border-radius: 50% !important;
    display: flex !important;
}
.tab-close-button:hover {
    /*outline: none !important;*/
    outline: 1px solid var(--button-active-bgcolor) !important;
    outline-offset: -1px !important;
    background-color: var(--button-hover-bgcolor) !important;
}

                                                           /*** Tabs base ***/

/* tabs connected bottom */

.tab-background {
    margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}

/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/

/*   basis   */
.tabbrowser-tab .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
    border: 1px solid !important;
    /*border-bottom: none !important;*/
}

.tabbrowser-tab:not([pinned]) .tab-background {
    border-left: none !important;
}

/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
    border-radius: var(--ug-radius) !important;
    border-left: 1px solid var(--ug-color-border) !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
    background-image: none !important;
}

/* Last tab dual corners, unless it comes after selected tab */

.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
    border-right: none !important;
}

                                                          /***  COLORS  ***/

/**  In about:config set svg.context-properties.content.enabled to true  **/


/* Basis */

.tabbrowser-tab .tab-background {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--ug-color1) !important;
    border-color: var(--ug-color-border) !important;
    stroke: var(--ug-stroke) !important;
    fill: var(--ug-color1) !important;
}

/* Colors, outlines: selected / multiselected / hover */

/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    stroke: var(--ug-stroke_select) !important;
    border-color: var(--ug-color-border_select) !important;
    fill: var(--ug-color2) !important;
}

/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
    background-color: var(--ug-color2-multi) !important;
    fill: var(--ug-color2-multi) !important;
}

/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
    background-color: var(--ug-color_multi_hova) !important;
    fill: var(--ug-color_multi_hova) !important;
    stroke: var(--ug-kante_hova_select) !important;
    border-color: var(--ug-kante_hova_select) !important;
}

/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
    background-color: var(--ug-color_hova) !important;
    fill: var(--ug-color_hova) !important;
    /*stroke: var(--ug-stroke_select) !important;*/
    stroke: var(--ug-kante_hova) !important;
    border-color: var(--ug-kante_hova) !important;
}

                                                      /***  tabs corners  ***/
/*  base  */

#TabsToolbar {
    --ug-corner-size: var(--tab-min-height);
    /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
    --ug-corner-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 32 32'%3E%3Cpath d='M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z' fill='context-fill'/%3E%3Cpath d='M3 32.5 A16 16 0 0 0 15.5 16' fill='rgba(155,122,0,0)' stroke='context-stroke' stroke-width='1px'/%3E%3Cpath d='M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z' fill='rgba(155,122,0,0)'/%3E%3Cpath d='M15.5 16 A18.5 18 0 0 1 35.5 -0.5' fill='transparent' stroke='context-stroke' stroke-width='1px' /%3E%3C/svg%3E%0A");
}

.tabbrowser-tab .tab-background::before, 
.tabbrowser-tab .tab-background::after {
    content: "";
    position: absolute;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    width: var(--ug-corner-size) !important;
    height: var(--ug-corner-size) !important;
    background-size: var(--ug-corner-size) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    mask-image: linear-gradient(215deg, transparent, black 18px) !important;
}

/*  left  */
.tabbrowser-tab .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
}

/*  right  */
.tabbrowser-tab[visuallyselected] .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

.tabbrowser-tab:last-of-type .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

/*  pinned no corners  */
.tabbrowser-tab[pinned] .tab-background::before, 
.tabbrowser-tab[pinned] .tab-background::after {
    display: none !important;
}




                                        /****   TEST margins etc overflow    ****/
/*
.tabbrowser-tab:not([pinned]) {
    outline: 1px solid hsla(135, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;
}
*/


                                           /*  TEST base -> 36px/2 + 2px padding Abstand    */

#tabbrowser-tabs {
    /*--ug-tab_Pad: calc(2px + var(--ug-corner-size) / 2);*/                /* 20px */
    /*--ug-tab_Marge: calc(0px - var(--ug-corner-size));*/                /* -36px */

    /*--ug-tab_Pad: calc(6px + var(--ug-corner-size) / 2);*/                /* 24px */
    /*--ug-tab_Marge: calc(0px - var(--ug-corner-size) - 8px);*/        /* -44px */

    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                    /* 26px */
    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);          /* -48px */

    /*--tab-min-width:  120px !important;*/
}
                                                                                                   /* basis TEST */

.tabbrowser-tab:not([pinned]) {
    overflow: visible !important;
    padding-inline: var(--ug-tab_Pad) !important;
}

/*
.tabbrowser-tab:not([pinned]):last-of-type {
    padding-inline: var(--ug-tab_Pad) 18px !important;
}
*/

                                                  /* Tab before any tab TEST */

.tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}
                                                  /* Tab after selected TEST */

.tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
    margin-inline: var(--ug-tab_Marge) 0 !important;
}

                                                                                                       /* Tab selected  TEST */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
    margin-inline: 0px !important;
}
                                                                                 /* Last tab after selected tab TEST */

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
    margin-inline: var(--ug-tab_Marge) 0px !important;
}

                                                 /* divers TEST */

/* Space for corner left/right - first/last tab, overflow bug fix ? */
/* Test #5 */

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
}

/*
#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: -12px !important;
}
*/
/*
#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-last-child(1 of [pinned]) {
    margin-inline-start: 40px !important;
    outline: 1px solid hsla(35, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;
}
*/

/* New Tab (+) button, not overflow (+) button */

/* Button rund, smaller */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
    padding-block: 6px 8px !important;
}

/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
    outline: 1px solid var(--ug-color-border) !important;
    outline-offset: -1px !important;
}

#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
    margin: 0 !important;
    margin-top: 2px !important;
    padding-inline: 0px !important;
}

/* Position, closer to last tab */
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    margin-left: -16px !important;
    z-index: 2 !important;
}

/*  tab left higher z index / Vorrang vor tab rechts */
.tabbrowser-tab:not([pinned]) .tab-content {
    z-index: 1 !important;
}

Alles anzeigen

Horstmann

Zitat von Nikolaus2001at

Kurz und knackig, so gefällt mir das.

Prima dass es klappt.

Es geht auch noch etwas einfacher; da gibt es verschiedene Wege.

CSS

#TabsToolbar, #nav-bar {
    outline: 2px solid #00bbff !important;
    outline-offset: -2px !important;
}

Horstmann

Zitat von Mira_Belle

Und was genau hast Du geändert?
Denn rein von der Optik sehe ich keinen Unterschied
und auch das Überlaufproblem besteht noch.
Wobei, wenn ich genau hinschaue, es ist nicht mehr gar so krass.

Hmm, stimmt leider.

Ich denke ich lass es jetzt lieber bleiben; da sind zu viele Anpassungen in Firefox involviert in dem Bereich, mit dem Overflow und angehefteten Tabs, das krieg ich einfach nicht sauber hin.

Horstmann

Zitat von Mira_Belle

Na da bin ich aber mal gespannt. Kann es kaum erwarten.
Und betrifft es wieder den kompletten Code,
oder nur einen bestimmten Teil, bestimmte Selektoren?

Ich habe am Rest natürlich auch wieder rumgefummelt , aber generell ist der Code in der Basis der selbe.

Du solltest eigentlich - ohne irgendwo unten reinzugehen - alle Farben im oberen General adjustments Block einstellen können.

Die unter Tableisten Kante hab ich mal rausgeworfen und mit was Anderem ersetzt, es geht ja nur um Abrenzung, oder?

Aber das kann man aufbauen wie man will, da gibt es zig Möglichkeiten.

Hier ist mein momentaner Testcode; den hab ich nur kurz in Fx119 getestet, ist immer ein Akt das System anzuwerfen, aber sah ok aus.

Die Grafik ist hier auch wieder eingebunden.

CSS

/*** Curved tabs beta #3 ***/


/*** General adjustments ***/

:root {

/* Tabs bar height adjust */
    /*--tab-block-margin: 4px !important;*/
    --tab-block-margin: 2px !important;
    --tab-min-height: 36px !important;

/* Edges without Svg /  Radius */
    /*--ug-radius: 20px;*/
    --ug-radius: 19px;

/* Edges (borders, outlines) colors */

/* Edges not selected */
    --ug-color-border: hsla(0, 0%, 33%, 0.5);                  /* dunkelgrau unselected Kante Tab 83 */
    --ug-stroke: var(--ug-color-border);                                                   /* unselected Kante Svg */
    --ug-kante_hova: hsla(0, 0%, 43%, 0.65);        /* mittelgrau unselected alle Kanten hover 93 */

/* Edges selected , multiselected */
    --ug-color-border_select: hsla(0, 0%, 43%, 0.75);        /* mittelgrau hell+ selected Kante Tab */
    --ug-stroke_select:  var(--ug-color-border_select);                                /* selected Kante Svg */
    --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8);  /* mittelgrau hell++ multiselected alle Kanten hover 100 */


/* Tabs backgrounds:  */

    --ug-color1: hsla(0, 0%, 83%, 0.25);                                               /* hellgrau basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                                    /* zart orange selected */
    --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                        /*zart orange dunkel+ multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);   /* zart orange dunkel++ multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                                  /* mittelgrau#2 unselected hover */

/* Tab bar unten, border bottom color */
    --ug-color3: hsla(0, 0%, 43%, 1);                   /* dunkelgrau nicht transparent, Kante zu Website  */

    /*--tabs-navbar-shadow-size: 0 !important;*/
}

/* Tab bar unten, border bottom mit NavToolbox */
/*
#TabsToolbar {
    border-image: linear-gradient(to top, 
        var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !important;
}
*/
#navigator-toolbox {
    /*border-bottom: 1px solid var(--ug-color-border) !important;*/
    border-bottom: none !important;
    box-shadow: inset 0px -1px var(--ug-color3) !important;
}


/*** General adjustments end ***/


/* buttons adjust size, position */

/* Buttons smaller by 2px */
#TabsToolbar {
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}

/* Move buttons up/down, optional, OFF */
/*
#TabsToolbar toolbarbutton {
    margin-top: -1px !important;
}
#tabbrowser-tabs {
    --ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}
*/

/* adjust tab content */
.tab-content {
    margin-top: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}

.tab-label, .tab-close-button {
    text-shadow: none  !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
    border-radius: 50% !important;
    display: flex !important;
}
.tab-close-button:hover {
    /*outline: none !important;*/
    outline: 1px solid var(--button-active-bgcolor) !important;
    outline-offset: -1px !important;
    background-color: var(--button-hover-bgcolor) !important;
}

/* New Tab (+) button, not overflow (+) button */

/* Button rund, icon position adjusted */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
    padding-block: 6px 8px !important;
}

/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
    outline: 1px solid var(--ug-color-border) !important;
    outline-offset: -1px !important;
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

.tab-background {
    margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}


/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/

/*   basis   */
.tabbrowser-tab .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
    border: 1px solid !important;
    /*border-bottom: none !important;*/
}

.tabbrowser-tab:not([pinned]) .tab-background {
    border-left: none !important;
}

/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], :last-of-type, [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab:is([visuallyselected], :last-of-type):not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
    border-radius: var(--ug-radius) !important;
    border-left: 1px solid var(--ug-color-border) !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
    background-image: none !important;
}

/* Last tab dual corners, unless it comes after selected tab */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
    border-right: none !important;
}

                                                          /***  COLORS  ***/

/**  In about:config set svg.context-properties.content.enabled to true  **/


/* Basis */

.tabbrowser-tab .tab-background {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--ug-color1) !important;
    border-color: var(--ug-color-border) !important;
    stroke: var(--ug-stroke) !important;
    fill: var(--ug-color1) !important;
}

/* Colors, outlines: selected / multiselected / hover */

/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    stroke: var(--ug-stroke_select) !important;
    border-color: var(--ug-color-border_select) !important;
    fill: var(--ug-color2) !important;
}

/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
    background-color: var(--ug-color2-multi) !important;
    fill: var(--ug-color2-multi) !important;
}

/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
    background-color: var(--ug-color_multi_hova) !important;
    fill: var(--ug-color_multi_hova) !important;
    stroke: var(--ug-kante_hova_select) !important;
    border-color: var(--ug-kante_hova_select) !important;
}

/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
    background-color: var(--ug-color_hova) !important;
    fill: var(--ug-color_hova) !important;
    /*stroke: var(--ug-stroke_select) !important;*/
    stroke: var(--ug-kante_hova) !important;
    border-color: var(--ug-kante_hova) !important;
}

                                                      /***  tabs corners  ***/
/*  base  */

#TabsToolbar {
    --ug-corner-size: var(--tab-min-height);
    /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
    --ug-corner-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 32 32'%3E%3Cpath d='M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z' fill='context-fill'/%3E%3Cpath d='M3 32.5 A16 16 0 0 0 15.5 16' fill='rgba(155,122,0,0)' stroke='context-stroke' stroke-width='1px'/%3E%3Cpath d='M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z' fill='rgba(155,122,0,0)'/%3E%3Cpath d='M15.5 16 A18.5 18 0 0 1 35.5 -0.5' fill='transparent' stroke='context-stroke' stroke-width='1px' /%3E%3C/svg%3E%0A");
}

.tabbrowser-tab .tab-background::before, 
.tabbrowser-tab .tab-background::after {
    content: "";
    position: absolute;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    width: var(--ug-corner-size) !important;
    height: var(--ug-corner-size) !important;
    background-size: var(--ug-corner-size) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    /*outline: 1px solid hsla(35, 80%, 50%, 0.75) !important;
    outline-offset: -1px !important;*/
}

/*  left  */
.tabbrowser-tab .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
}

/*  right  */
.tabbrowser-tab[visuallyselected] .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

.tabbrowser-tab:last-of-type .tab-background::after {
    right: calc(0px - var(--ug-corner-size) / 2);
    background-image: var(--ug-corner-image) !important;
    transform: scaleX(-1) !important;
}

/*  pinned no corners  */
.tabbrowser-tab[pinned] .tab-background::before, 
.tabbrowser-tab[pinned] .tab-background::after {
    display: none !important;
}


/*  TEST margins etc overflow  */

/*  TEST outlines  */
.tabbrowser-tab:not([pinned]) {
    /*background-color: hsla(135, 80%, 50%, 0.5) !important;
    outline: 1px solid hsla(135, 80%, 50%, 0.5) !important;
    outline-offset: -1px !important;*/
}

                                                  /*  TEST base -> 36px/2 + 2px padding Abstand    */

#tabbrowser-tabs {
    --ug-tab_Pad: calc(2px + var(--ug-corner-size) / 2);
    --ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2);
    --tab-min-width:  120px !important;
}
                                                                                                               /* basis TEST */

.tabbrowser-tab:not([pinned]) {
    overflow: visible !important;
    z-index: 3 !important;
    padding-inline: var(--ug-tab_Pad) !important;
    margin-inline: var(--ug-tab_Marge) !important;
}

                                                  /* Tab after selected tab completely round, no corners TEST */

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected], :last-of-type) {
    z-index: 1 !important;
}

                                                                                                                /* Tab selected  TEST */
.tabbrowser-tab:not([pinned]):is([visuallyselected], , :last-of-type) {
    z-index: 2 !important;
}

                                       /* Last tab dual corners, unless it comes after selected tab TEST OFF */
/*
.tabbrowser-tab[visuallyselected]:not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
}
*/

                                                 /* divers TEST */

/* Space for corner left/right - first/last tab, overflow bug fix ? */
/* Test #4 */

/*#tabbrowser-tabs:not([overflow])*/ .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
}

#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
    margin-block: 1px -1px !important;
    /*padding-inline: 0px !important;*/
}

/* Position, closer to last tab */
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    /*margin-inline: -16px !important;*/
    z-index: 5 !important;
}

Alles anzeigen

Beiträge von Horstmann

Höhe der Leisten einstellen: Lesezeichenleiste, Menüleiste, Tableiste, Eingabeleiste

Tableiste GANZ unten Script funktioniert nicht mehr?

Bookmark-Button und Bezeichnung

Bookmark-Button und Bezeichnung

Bookmark-Button und Bezeichnung

userChrome.css bearbeiten

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Tabform

Blauer Rahmen um Tabbar oder Titlebar

Tabform

Tabform