Tabform

Mira_Belle

2002Andreas & Horstmann

Genau das ist es!

Das war aber auch schon bei früheren Versionen so!

Das komische aber ist, dass das eben bei den Änderungen, die ich am Code vorgenommen habe

nur noch dann auftritt, wenn man bei Multiselekt wieder zurückgeht, also einen den nicht aktiven Tab anklickt.

Misst, wie erkläre ich das?

Letzter Tab aktiv, viert oder fünf Tabs davor markieren (multiselekt) und dann einfach z.B. den zweiten oder dritten Tab

anklicken und dadurch zum Aktiven machen. Schon fehlt da die Grafik.

Horstmann

Zitat von 2002Andreas

Zitat von Mira_Belle

wenn der erste Tab aktiv ist, auch bei den nachfolgenden Tabs die rechte Grafik fehlt.

Der erst ist aktiv.
Der dritte:

Das ist in Fx 119, korrekt?

2002Andreas

Zitat von Horstmann

Das ist in Fx 119

Ja.

Horstmann

Zitat von Mira_Belle

Genau das ist es!
Das war aber auch schon bei früheren Versionen so!
Das komische aber ist, dass das eben bei den Änderungen, die ich am Code vorgenommen habe
nur noch dann auftritt, wenn man bei Multiselekt wieder zurückgeht, also einen den nicht aktiven Tab anklickt.
Misst, wie erkläre ich das?
Letzter Tab aktiv, viert oder fünf Tabs davor markieren (multiselekt) und dann einfach z.B. den zweiten oder dritten Tab
anklicken und dadurch zum Aktiven machen. Schon fehlt da die Grafik.

Alles anzeigen

Ich fürchte ich bin hier an die Grenzen dessen gestossen, was ich mit 115esr noch beitragen kann....

Ich denke Fx 119 lässt sich mit meinem auf 115 basierenden CSS Code nicht mehr komplett manipulieren, vermutlich braucht es nur ein paar mehr spezifische Selektoren, weil ein Teil ja funktioniert, aber das kann ich halt nicht testen...

Ganz grob geraten könnte ich nur noch sowas zu Testen für 119+ vorschlagen, aber das ist komplett ein Schuss ins Blaue (Grafik gleich, Dateipfade wieder anpassen):

CSS

/*** Curved tabs beta #1d ***/


/*** Allgemeine Anpassungen ***/

:root {

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

/* Ecken ohne Svg /  Radius */
    --ug-radius: 20px;

/* Rand Farben: Borders */

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

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

/*  Farben Tabs Hintergrund:  */
    --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
    --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */

/* Tab Leiste Kante unten Farbe */
    --ug-color3: hsla(0, 0%, 83%, 0.75);

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

 #TabsToolbar {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

/** Distance between tabs **/
.tabbrowser-tab:not([pinned]) {
    padding-inline: 2px !important;
    overflow: visible !important;
}

/*** Allgemeine Anpassungen Ende ***/


/* Tab Leiste Kante unten */

 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 2px, transparent 2px) !important;
} 

/* 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: 2px !important;
    padding-inline: 12px 11px !important;
}

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

.tab-close-button {
    border-radius: 50% !important;
    disply: 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;
}


/* Space for corner first/last tab, overflow bug fix */
/* Test #2 */
#TabsToolbar .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    padding-left: calc(var(--ug-corner-size) / 2) !important;
}
#TabsToolbar .tabbrowser-tab:not([pinned]):last-of-type {
    padding-right: calc(var(--ug-corner-size) / 2) !important;
}

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

/* Button rund, Icon Position Höhe angepasst */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    padding-block: 7px 9px !important;
}

/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery {
    margin-inline: -14px !important;
    z-index: 2 !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;*/
    box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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


/*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/

/*   basis   */
#TabsToolbar .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;
}

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

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

/* Tab nach selected tab komplett rund, ohne Ecken */
#TabsToolbar .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;
}
#TabsToolbar .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
    background-image: none !important;
}

/* letzte tab Ecken beidseitig, ausser kommt nach selected tab */

#TabsToolbar .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    border-inline: none !important;
}
#TabsToolbar .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  ***/
/* Basis */

#TabsToolbar .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 */
#TabsToolbar .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 */
#TabsToolbar .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
    background-color: var(--ug-color2-multi) !important;
    fill: var(--ug-color2-multi) !important;
}

/* tabs multiselected hover */
#TabsToolbar .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 */
#TabsToolbar .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);
}

#TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::before, 
#TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::after {
    content: "";
    position: absolute;
    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  */
#TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: url(icons/tab_corner_ug.svg) !important;
}

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


#TabsToolbar .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Horstmann

Testen für 119+ vorschlagen

Ergibt hier:

Linke Tab ist aktiv.

Mira_Belle

Wenn ich wenigstens den "Krempel" ab Zeile 146 verstehen würde, ...

Im Code herumstochern bringt ja auch nicht wirklich was!

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

Testen für 119+ vorschlagen

Ergibt hier:
Linke Tab ist aktiv.

Danke nochmal.

Funktioniert also nicht...

Horstmann

Zitat von Mira_Belle

Wenn ich wenigstens den "Krempel" ab Zeile 146 verstehen würde, ...

Ich glaube die Lösung ist ziemlich einfach, nur kann ich sie ohne Fx119 nicht finden...

Vermutlich liegt das Problem eher in Zeile 232 abwärts, erstmal muss die rechte Ecke auftauchen, den Rest kann man dann regeln.

Bei Interesse müsste sich momentan jemand mit 119 der Sache annehmen, oder halt mit den anfangs erwähnten Codes von Mrotherguy oder Godie arbeiten.

Aris hat bestimmt auch etwas im Programm, der hat ja alles, nur wird mir dabei immer schwindlig.

Ich konnte in diesen Codes nichts finden das mit Transparenz und Outlines funktioniert, teils weil diese Codes nicht alle Tabs Varianten einzeln ansprechen, nur deshalb die ganze Übung.

Meine Entschuldigung für die Verwirrung; ich hätte nicht Codes rauswerfen sollen ohne eine aktuelle Version benutzen zu können.

Sören Hentzschel

Zitat von Horstmann

Die Frage speziell an dich ist aber eher die, ob svg.context-properties.content.enabled auf true zu setzen in Fx 119 ein Sicherheitsrisiko mit sich bringt.

Ich denke nicht. Der Grund, wieso es diese Option gibt und diese standardmäßig auf false steht, ist der, dass diese Funktionalität kein Teil eines Webstandards ist und daher nicht für Websites zur Verfügung stehen soll. Für den chrome-Prozess und damit auch für Aufrufe via chrome:// oder resource:// steht die Funktionalität immer zur Verfügung, unabhängig von dieser Option.

Horstmann

Zitat von Sören Hentzschel

Ich denke nicht. Der Grund, wieso es diese Option gibt und diese standardmäßig auf false steht, ist der, dass diese Funktionalität kein Teil eines Webstandards ist und daher nicht für Websites zur Verfügung stehen soll. Für den chrome-Prozess und damit auch für Aufrufe via chrome:// oder resource:// steht die Funktionalität immer zur Verfügung, unabhängig von dieser Option.

Danke!

Mira_Belle

Zitat von Horstmann

...
Meine Entschuldigung für die Verwirrung; ich hätte nicht Codes rauswerfen sollen ohne eine aktuelle Version benutzen zu können.

Quatsch.

Ein bisschen was muss doch zum Hirnschmalz anstrengen auch für andere übrigbleiben.

Und ich glaube, ich habe eine Lösung.

Muss noch ein paar Tests machen.

Hat geklappt!

Der Code muss nur wie folgt abgeändert werden:

Aus

CSS

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

wird

CSS

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

Verwendet habe ich den Code aus Beitrag #69

Mira_Belle

Nun bin ich auch in "meiner" Version diesen Bug los!

Ihr wisst schon, Multiselekt und dann einen anderen Tab als den zuletzt Aktiven anklicken.

Was bei mir noch nicht so ganz hinhaut, bei Multiselekt die Rahmen des Tabs direkt nach dem Aktiven!

Der Selektor dafür ist auch so ein "Monster" und ich bin noch nicht dahintergekommen,

wie der zu zerlegen ist.

Es ist vollbracht!

Was für eine Geburt

Die Selektoren musste ich mir erarbeiten.

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background

Der erste Tab direkt nach dem aktiven Tab bei Multi

Dann musste ich ja auch noch die unteren "Bögen" der nachfolgenden Tabs anpassen,

hier der Selektor dafür:

.tabbrowser-tab:is([selected], [multiselected]) .tab-background

Himmel war das schwer.

/*************************************************************************/

Korrektur!

Wenn auch der letzt Tab im Mult ausgewäht wird (wurde), war da ein kleiner Strich (Rahmen)

am Ende vor der Grafik zu sehen. Da gehört aber nichts hin!

CSS

    .tabbrowser-tab:is( [multiselected]):last-of-type .tab-background {
        border-right: none !important;
    }

Habe ich nach getragen

/*************************************************************************/

Hier nun der komplette Code basierend auf eine ältere Version von Horstmanns Vorlagen.

(Beitrag #56)

CSS

 /* Farben ---------------------------------------------------*/

 :root {
    --uc-color-black-light: #2B2B2B !important;          /*    var(--uc-color-black-light)        */
    --uc-color-grey-light: #A9A9A9 !important;            /*    var(--uc-color-grey-light)        */
    --uc-color-grey-lighter: #D4D4D4 !important;       /*    var(--uc-color-grey-lighter)    */
    --uc-color-white-normal: #FFFFFF !important;        /*    var(--uc-color-white-normal)    */
    --uc-color-orange-normal: #FFAA00 !important;        /*    var(--uc-color-orange-normal)    */
    --uc-color-red-normal: #FF0000 !important;            /*    var(--uc-color-red-normal)      */
    --ug-color1: rgba(225, 225, 225, 0.2);
    --ug-color2:  rgba(255, 148, 0, 0.4);
    --ug-color_hova: rgba(225, 225, 225, 0.4);
    --ug-color2-multi:  rgba(255, 148, 0, 0.5);
}

/* Abstände -------------------------------------------------*/

:root {
    --tab-block-margin: 2px !important;
    --tab-min-height: 36px !important;
}

/* ENDE -----------------------------------------------------*/



    /*---------------------------------------------------*/
    /********** Position der Buttons einstellen **********/
    /*---------------------------------------------------*/

    /* kleiner by -x , 10px default normal */
    #TabsToolbar {
        /*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }

    /* Abstände der Tabs voneinander */
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }

    /* Abstand des ersten Tabs vom linken Rand */
    .tabbrowser-tab:not([pinned]):first-of-type {
        margin-inline-start: 9px !important;
    }

    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    /* Lästiger Fix, der verhindert, dass das Hovering des letzten Tabs einen Tab-Overflow auslöst, bessere Lösung gesucht */
    /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css */

    :root:not([customizing]) .tabbrowser-tab:last-of-type {
    /*    margin-inline-end: 18px !important; */
        margin-inline-end: 11px !important;
    }
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
        margin-left: -8px !important;
    }

                    /*** tabs base ***/
    /*---------------------------------------------------*/
    /************* Tabs Grundeinstellungen  **************/
    /*---------------------------------------------------*/

    /* tabs connected bottom, tab bar height reduced ?  */
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }

    .tabbrowser-tab .tab-background {
        outline: none !important;
        background-color: var(--ug-color1) !important;
        box-shadow: none !important;
        /*box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
        background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
    }

    /* tabs selected */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        box-shadow: inset  0px 0px 0px 0px transparent !important;            /* Aktiver Tab: Schatten Breite, Art und Farbe */
    }

    /* tabs multiselected */
    .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        border-top: 1px solid var(--uc-color-orange-normal) !important;
    }

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

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

                /*** Tabs Radien, borders ***/
    /*---------------------------------------------------*/
    /************** Tabs Radien & Rahmen  ****************/
    /*---------------------------------------------------*/

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

    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
        border-top: 1px solid var(--uc-color-grey-light) !important;
        border-right: 1px solid var(--uc-color-grey-light) !important;
    }

    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--uc-color-orange-normal) !important;
    }

    /*   selected  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }

    /*   not selected -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-top: 1px solid var(--uc-color-grey-light) !important;
        border-left: 1px solid var(--uc-color-grey-light) !important;
    }

    /*   not selected last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
        border-top: 1px solid var(--uc-color-grey-light) !important;
    }

    .tabbrowser-tab:last-of-type:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
        border-top: 1px solid var(--uc-color-orange-normal) !important;        
    }

    /*   not selected last -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]) + .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;
        border-top: 1px solid var(--uc-color-grey-light) !important;
    }
                      
                /***  tabs corners  ***/
    /*---------------------------------------------------*/
    /************ Tabs Ecken (Vektorgrafik) **************/
    /*---------------------------------------------------*/

    /*  base 38px height */
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        content: "";
        position: absolute;
        --ug-corner-size: calc(var(--tab-min-height) + 0px);
        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;
        stroke: var(--uc-color-grey-light) !important;
        fill: var(--ug-color1) !important;
        mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    }

    /*  left  */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: url("../tabs_4/tab_corner_doppel_Test-1W2.svg") !important;
    }

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

    /* 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], [multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
        fill: var(--ug-color_hova) !important;
    }

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


    #TabsToolbar {
        position: absolute !important;
        display: block !important;
    /*    bottom: 6px !important;       /* Leiste etwas angehoben */
        bottom: 3px !important;
        /* Trennlinie zwischen Inhalt und Tableiste */
    /*    background-image: linear-gradient(to top, var(--uc-color-orange-normal) 1px, transparent 10px) !important; */
        background-image: linear-gradient(to top, var(--uc-color-orange-normal) 7px, transparent 1px) !important; 
        margin-bottom: -7px !important;
        padding-bottom: 7px !important;
    }

    /*-----------------------------------------------*/
    /****     Tabtext nicht verkürzt bei hover    ****/
    /*-----------------------------------------------*/

    /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
    /* Diese Verkürzung bei hover hätte ich gerne verhindert. */

    .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
        padding-inline-start: 7px !important;
        width: 24px !important;
    }
  
    .tabbrowser-tab[visuallyselected=true]:not(:hover),
    #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
        --tab-label-mask-size: 1em !important;
    }
    
    /* Tabtext wird nicht ausgeblendet */    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
        mask-image: none !important;
    }
    /*-------------------------------------------*/
    /****     Tabbar nach unten verschoben    ****/
    /*-------------------------------------------*/
    
    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
    }
/*
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
        bottom: 10px !important;       
    }
*/
    #tabbrowser-tabs {
        width: 95vw !important;
    }

    /*---------------------------------------------*/
    /****     Symbole für about:xxx anpassen    ****/
    /*---------------------------------------------*/

    .tab-icon-image {
        -moz-context-properties: fill !important;
    /*    fill: #FFAA00 !important;    */
        fill: #FF0000 !important;
    }

    /*-----------------------------------------------------------------------*/
    /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
    /*-----------------------------------------------------------------------*/

    #context_reopenInContainer {
        display: none !important;
      }
      
    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

    .tab-content > .tab-close-button:hover {
        outline: none !important;
        background-color: rgba(255, 0, 0, 0.4) !important;              /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;            /* Rot, glow */
    }
    
    /*---------------------------------------------------*/
    /*************** New Tab Button hover  ***************/
    /*---------------------------------------------------*/

    /* Button rund, Icon Höhe angepasst */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
        padding-block: 7px 9px !important;
    }
    /* minimaler Abstand zu Tabs, weniger -> Bug! */
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
    /*    border-radius: 50% !important; */
        padding-left: 0px !important;
    }

    /* Rahmen um den Button */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
    box-shadow: inset 0px 0px 0px 1px var(--uc-color-orange-normal) !important;
    }

    /* Farbe des "+" */
 /* #tabs-newtab-button {
        fill: var(--uc-color-grey-light) !important;
    }   */
    #tabs-newtab-button:hover {
        fill: var(--uc-color-orange-normal) !important;
    }

    /* Hintergrundfarbe des Buttons bei hover */
 /* toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon {
        background-color: var(--ug-color_hova) !important; 
    }   */  

    /*-------------------------------------------------*/
    /*************** Schrift in den Tabs ***************/
    /*-------------------------------------------------*/

    .tab-label {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    /*    text-overflow: " " !important;    */
    /*    text-overflow: " …" !important;   */
        white-space: nowrap !important;
        max-width: 95% !important; 
        text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
    }
    .tab-label[selected]  {
        color: var(--uc-color-white-normal) !important;                        /* Aktiver Tab: Schriftfarbe (Orange) */
    }
    .tab-label:not([selected])  {
        color: var(--uc-color-grey-lighter) !important;                        /* Aktiver Tab: Schriftfarbe (Hellgrau) */
    }
    
    /* Move tab content */
    .tab-content {
        margin-top: 1px !important;
    }





/*************** Tests ***************/


    #tabbrowser-tabs {
    /*    --tab-min-width: 76px !important; */
        --tab-min-width: 45px !important;
      
    /*    --tab-loading-fill: #0A84FF !important; */
        --tab-loading-fill: lime !important;
      
        --tab-overflow-pinned-tabs-width: 0px !important;
      
    }

/*    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background { */
/*    .tabbrowser-tab:is([visuallyselected], [multiselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected], [multiselected]) .tab-background { */

    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
    /*    border-color: red !important; */
        border-color: var(--uc-color-orange-normal) !important;
    }

    .tabbrowser-tab:is([selected], [multiselected]) .tab-background {
    /*    border-right: 1px solid lime !important; */
        border-right: 1px solid var(--uc-color-orange-normal) !important;
    }
    .tabbrowser-tab:is( [multiselected]):last-of-type .tab-background {        border-right: none !important;    }

Alles anzeigen

Sorry, ist noch am Ende nicht bereinigt, bzw, die Selektoren noch nicht richtig plaziert.

Und die Vektorgrafik ist im Beitrag #56 zu finden.

Mira_Belle

Ich möchte mich mal ganz, ganz lich bei Horstmann bedanken.

Nicht nur, dass er recht oft am Code herumgefeilt hat, ohne ihn hätte ich das nie geschafft!

Auch einen großen Dank an 2002Andreas , hat er sich doch die Zeit genommen und diverse Tests durchgeführt.

lichen Dank.

Ja und ohne Sören Hentzschel wäre das alles sowieso nicht möglich, denn dann gäbe es dieses Forum gar nicht.

Auch Dir ein ganz fetter Dank.

2002Andreas

Zitat von Mira_Belle

hat er sich doch die Zeit genommen

Hallo Mira, wenn ich dir damit geholfen habe, dann freut es mich

War gern geschehen.

Horstmann

Ich hätte noch einen anderen Vorschlag, ich glaube es braucht nur eine kleine Änderung; bitte kurz testen wenn's passt.

Nachdem ich ein altes Laptop gehackt habe um Fx119 zum Laufen zu bekommen, scheint sowas halbwegs zu funktionieren.

Das gehackte System läuft auf einer externen USB 2.0 Platte, daher läuft alles etwas zäh und die Anpassungen sind mangels Geduld vermutlich suboptimal.

Dateipfade wieder anpassen, Grafik wie zuvor, häng ich auch nochmal an; Randfarben hier jetzt für ein helles Theme eingestellt.

svg.context-properties.content.enabled auf true setzen für die volle Funktion.

CSS

/*** Curved tabs beta #1d5 ***/


/*** Allgemeine Anpassungen ***/

:root {

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

/* Ecken ohne Svg /  Radius */
    --ug-radius: 20px;

/* Rand Farben: Borders */

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

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

/*  Farben Tabs Hintergrund:  */
    --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
    --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */

/* Tab Leiste Kante unten Farbe */
    --ug-color3: hsla(0, 0%, 83%, 0.75);

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

 #TabsToolbar {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

/** Distance between tabs **/
.tabbrowser-tab:not([pinned]) {
    padding-inline: 2px !important;
    overflow: visible !important;
}

/*** Allgemeine Anpassungen Ende ***/


/* Tab Leiste Kante unten */

 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 2px, transparent 2px) !important;
} 

/* 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: 2px !important;
    padding-inline: 12px 11px !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;
}


/* Space for corner first/last tab, overflow bug fix */
/* Test #2 */
.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    padding-left: calc(var(--ug-corner-size) / 2) !important;
}
.tabbrowser-tab:not([pinned]):last-of-type {
    padding-right: calc(var(--ug-corner-size) / 2) !important;
}

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

/* Button rund, Icon Position Höhe angepasst */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    padding-block: 7px 9px !important;
}

/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery {
    margin-inline: -14px !important;
    z-index: 2 !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;*/
    box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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


/*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/

/*   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 seitliche border weg  */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab nach selected tab komplett rund, ohne Ecken */
.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;
}

/* letzte tab Ecken beidseitig, ausser kommt nach 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  ***/
/* Basis */

.tabbrowser-tab .tab-background {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    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);
}

.tabbrowser-tab:not([pinned]) .tab-background::before, 
.tabbrowser-tab:not([pinned]) .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:not([pinned]) .tab-background::before {
    left: calc(0px - var(--ug-corner-size) / 2);
    background-image: url(icons/tab_corner_ug.svg) !important;
}

/*  right  */

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

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

Alles anzeigen

tab_corner_ug.svg.zip

2002Andreas

Zitat von Horstmann

bitte kurz testen

Ergibt hier:

Aktiv ist der letzte Tab.

So wenn alle ausgewählt sind:

Mira_Belle

Ich habe in "meinem" Code einfach mal die Selektoren

Zeile 185

CSS

.tabbrowser-tab:not([pinned]):last-of-type .tab-background::after,
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after

gegen

CSS

.tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab:last-of-type .tab-background::after

getauscht.

Funktioniert

Aber, müsste es nicht .tabbrowser-tab:is([visuallyselected]) .tab-background::after heißen?

Funktioniert auch.

Horstmann

Zitat von 2002Andreas

Ergibt hier:

Vielen Dank für's Testen - dann fällt mir aber nichts mehr dazu ein.

Die oben genannten Probleme habe ich alle gesehen in Fx119 nachdem es hier lief, und der letzte Code hat das auf meiner Seite repariert.

Wenn jetzt der linke statt der rechte Bogen fehlt, dann bin ich ratlos.

Oder es ist ein OS Ding?

Wenn ich dich nochmal belästigen dürfte:

CSS

/*** Curved tabs beta #1d5 ***/


/*** Allgemeine Anpassungen ***/

:root {

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

/* Ecken ohne Svg /  Radius */
    --ug-radius: 20px;

/* Rand Farben: Borders */

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

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

/*  Farben Tabs Hintergrund:  */
    --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
    --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */

/* Tab Leiste Kante unten Farbe */
    --ug-color3: hsla(0, 0%, 83%, 0.75);

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

 #TabsToolbar {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

/** Distance between tabs **/
.tabbrowser-tab:not([pinned]) {
    padding-inline: 2px !important;
    overflow: visible !important;
}

/*** Allgemeine Anpassungen Ende ***/


/* Tab Leiste Kante unten */

 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 2px, transparent 2px) !important;
} 

/* 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: 2px !important;
    padding-inline: 12px 11px !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;
}


/* Space for corner first/last tab, overflow bug fix */
/* Test #2 */
.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    padding-left: calc(var(--ug-corner-size) / 2) !important;
}
.tabbrowser-tab:not([pinned]):last-of-type {
    padding-right: calc(var(--ug-corner-size) / 2) !important;
}

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

/* Button rund, Icon Position Höhe angepasst */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    padding-block: 7px 9px !important;
}

/* Position, closer to last tab */
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    margin-inline: -14px !important;
    z-index: 2 !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;*/
    box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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


/*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/

/*   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 seitliche border weg  */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab nach selected tab komplett rund, ohne Ecken */
.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;
}

/* letzte tab Ecken beidseitig, ausser kommt nach 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  ***/
/* Basis */

.tabbrowser-tab .tab-background {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    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);
}

.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: url(icons/tab_corner_ug.svg) !important;
}

/*  right  */

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

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


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

Alles anzeigen

Mira_Belle

Zitat von Horstmann

...

Wenn ich dich nochmal belästigen dürfte:

CSS

/*** Curved tabs beta #1d5 ***/


/*** Allgemeine Anpassungen ***/

:root {

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

/* Ecken ohne Svg /  Radius */
    --ug-radius: 20px;

/* Rand Farben: Borders */

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

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

/*  Farben Tabs Hintergrund:  */
    --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
    --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
    --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
    --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
    --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */

/* Tab Leiste Kante unten Farbe */
    --ug-color3: hsla(0, 0%, 83%, 0.75);

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

 #TabsToolbar {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

/** Distance between tabs **/
.tabbrowser-tab:not([pinned]) {
    padding-inline: 2px !important;
    overflow: visible !important;
}

/*** Allgemeine Anpassungen Ende ***/


/* Tab Leiste Kante unten */

 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 2px, transparent 2px) !important;
} 

/* 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: 2px !important;
    padding-inline: 12px 11px !important;
}

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

.tab-close-button {
    border-radius: 50% !important;
    disply: 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;
}


/* Space for corner first/last tab, overflow bug fix */
/* Test #2 */
.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    padding-left: calc(var(--ug-corner-size) / 2) !important;
}
.tabbrowser-tab:not([pinned]):last-of-type {
    padding-right: calc(var(--ug-corner-size) / 2) !important;
}

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

/* Button rund, Icon Position Höhe angepasst */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    border-radius: 50% !important;
    padding-block: 7px 9px !important;
}

/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery {
    margin-inline: -14px !important;
    z-index: 2 !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;*/
    box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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


/*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/

/*   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 seitliche border weg  */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
    border-inline: none !important;
}

/* Tab nach selected tab komplett rund, ohne Ecken */
.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;
}

/* letzte tab Ecken beidseitig, ausser kommt nach 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  ***/
/* Basis */

.tabbrowser-tab .tab-background {
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    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);
}

.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: url(icons/tab_corner_ug.svg) !important;
}

/*  right  */

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

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


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

Alles anzeigen

Ich bin mal so frei!

Funktioniert,

wenn man den kleinen Fehler in Zeile 93 korrigiert.

Horstmann

Zitat von Mira_Belle
Ich habe in "meinem" Code einfach mal die Selektoren
Zeile 185
CSS
.tabbrowser-tab:not([pinned]):last-of-type .tab-background::after,
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after
gegen
CSS
.tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab:last-of-type .tab-background::after
getauscht.
Funktioniert
Aber, müsste es nicht .tabbrowser-tab:is([visuallyselected]) .tab-background::after heißen?
Funktioniert auch.
Alles anzeigen

Ahh, danke für die Rückmeldung!

Ich bin mir zu 99% sicher dass das Problem bei [pinned] liegt, das ist glaube ich in Fx119 anders eingebunden.

.tabbrowser-tab:is([visuallyselected]) ist im Prinzip das gleiche wie .tabbrowser-tab[visuallyselected], nur mit höherer Priorität und eigentlich für andere Zwecke gedacht, die wir hier aber nicht brauchen.

Was du nochmal schauen könntest, ist ob angeheftete Tab sauber aussehen oder plötzlich auch untere Ecken haben.