Tabform

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.

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.

Mira_Belle

Horstmann

Hey, jetzt mach aber mal 'nen Punkt.

Du hast großartiges geleistet und ich bezweifle, dass dieses Problem so ganz ohne Javascript zu lösen ist.

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

der meinigen machen. Da sind ja noch ein Kuddelmuddel, das hast Du in Deine späteren Versionen

viel, viel schöner umgesetzt und daran werde ich mich orientieren.

Vielen lieben Dank noch mal.

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

Mira_Belle

Zitat von Horstmann

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

Werde ich machen, danke.

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

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:

CSS

/*** Curved tabs beta D2b sauber - dunkles Theme ***/
/* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */

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

/*** General adjustments ***/
/*** Allgemeine Anpassunge ***/

:root {

    /* Tabs bar height adjust */
    /* Tabbar Höhe einstellen */
        /*--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 */
    /* Kanten ohne Ecken (svg / Radien */
        /*--ug-radius: 20px;*/
        --ug-radius: 19px;
    
    
    /* Edges (borders, outlines) colors */
    /* Farben für Ränder (Umrandungen, Konturen) */
    
    /* Edges not selected */
    /* Ränder nicht ausgewählt */
/*        --ug-color-border: hsla(0, 0%, 83%, 0.5);                   /* hellgrau unselected Kante Tab */
        --ug-color-border: var(--uc-color-grey-light);
        --ug-stroke: var(--ug-color-border);                          /* unselected Kante Svg */
/*        --ug-kante_hova: hsla(0, 0%, 93%, 0.65);                    /* mittelgrau unselected alle Kanten hover */
        --ug-kante_hova: var(--ug-color-border);
    
    /* Edges selected , multiselected */
    /* Kanten ausgewählt, mehrfach ausgewählt */
/*        --ug-color-border_select: hsla(0, 0%, 93%, 0.75);           /* mittelgrau hell+ selected Kante Tab */
        --ug-color-border_select: var(--uc-color-orange-normal);
        --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 */
        --ug-kante_hova_select: var(--uc-color-orange-normal);
    
    /* 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 */

        --ug-color1: rgba(225, 225, 225, 0.2);
        --ug-color2: rgba(255, 148, 0, 0.4);
        --ug-color2-multi: rgba(255, 148, 0, 0.3);
        --ug-color_hova: rgba(225, 225, 225, 0.3); 
        --ug-color_multi_hova: rgba(255, 148, 0, 0.5);


    /* Tab bar unten, border bottom color */
/*        --ug-color_bottom: hsla(0, 0%, 93%, 1);                   /* hellgrau nicht transparent, Kante unten */
        --ug-color_bottom: var(--uc-color-orange-normal);
    }
    
    /*** 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;
    }

    /* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        border-color: var(--uc-color-orange-normal) !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;
        border-bottom: none !important;   /* Muss zusätzlich, da unten ja keine Kante sein soll !  */
    }
    
    /*  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.svg") !important;
    }
    
    .tabbrowser-tab .tab-background::before, 
    .tabbrowser-tab .tab-background::after {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        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;
        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;
    }

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

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


    /*-----------------------------------------------*/
    /****     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: 6px !important;       /* Leiste etwas angehoben */
        left: 0px;
        right: 0px;

        /* Trennlinie zwischen Inhalt und Tableiste */
        background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
        margin-bottom: -7px !important;
        padding-bottom: 7px !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  ***************/
    /*---------------------------------------------------*/

    .tabbrowser-tab:not([pinned]) .tab-close-button {                   /* Button rund */
        border-radius: 50% !important;
        display: flex !important;
    }

    .tab-content > .tab-close-button:hover {
        /*outline: none !important;*/
        outline: 1px solid rgba(255, 0, 0, 0.3) !important;
        outline-offset: -1px !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;
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !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;
    }
*/
    /* New Tab (+) button hover outline */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        outline: 1px solid var(--uc-color-orange-normal) !important;
        outline-offset: -1px !important;
        background-color: var(--ug-color1) !important;
    }

    /* New Tab (+) button hover color */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
        fill: var(--uc-color-orange-normal) !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;
    }

    /*-------------------------------------------------*/
    /*************** 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: 75px !important;
        --tab-loading-fill: lime !important;      
        --tab-overflow-pinned-tabs-width: 0px !important;
      
    }

Alles anzeigen

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.

Mira_Belle

Zitat von Horstmann

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.

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

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.

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?

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.

Mira_Belle

Zitat von Horstmann

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.

Hast Du eine bessere Lösung?

Bin immer offen für Verbesserungen.

CSS

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

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

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

CSS

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

CSS

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

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!

Die Tableiste nach untenverschieben.

Den Code für das verschieben der Tabbar habe ich ursprünglich von 2002Andreas,

deshalb rufen ich ihn mal zur Hilfe.

2002Andreas, kannst Du bitte mal über den Codeschnipsel schauen,

der dafür sorgt, dass die Tableiste nach unten verschoben wird.

Hast Du dafür eventuell eine neuere, schönere Version?

CSS

    /*-------------------------------------------*/
    /****     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: 6px !important;       /* Leiste etwas angehoben */
        left: 0px !important;
        right: 0px !important;
        /* Trennlinie zwischen Inhalt und Tableiste */
        background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
        margin-bottom: -7px !important;
        padding-bottom: 7px !important;
    }
    #tabbrowser-tabs {
        width: 95vw !important;
    }

Alles anzeigen

Und das,

soll dabei rauskommen.

Zu beachten ist, dass normalerweise die Tableiste NICHT über die ganze breite geht.

somit normalerweise auch der dicke, oragene Balken nicht.

Deshalb left & right = 0px. Mir ist leider nichts besseres eingefallen, bzw. habe nichts besseres gefunden.

Des weiteren habe ich die Tabs ein wenig nach oben verschoben (6px),

damit eben dieser "Balken" darunter passt und nicht die schönen Vektorgrafiken verdeckt.

Und auch dieser "Balken", bzw. die Tabs mussten eben mit margin-bottom & padding-bottom noch richtig gerückt werden.

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.

Habe nun, nur noch einmal aus interresse die Zeilen raus genommen.

Ergebnis:

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

Und nun mit dem Code zum Verschieben.

Nun mit meinem Fix.

Mira_Belle

Okey, Horstmann Deine Kritik hat mir keine Ruhe gelassen!

Was sagst Du dazu?

CSS

    /*-------------------------------------------*/
    /****     Tabbar nach unten verschoben    ****/
    /*-------------------------------------------*/
   
    #navigator-toolbox {
        position: relative;
        padding-bottom: calc( var(--tab-min-height) + 8px );
    }
   
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
        bottom: 6px !important;
        width: 100vw !important;
        /* Trennlinie zwischen Inhalt und Tableiste */
        background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
        margin-bottom: -7px !important;
        padding-bottom: 7px !important;
    }

Alles anzeigen

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

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

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.

Mira_Belle

Zitat von Horstmann

...

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

Ah, daher weht der Wind!

Ja, stimmt schon, schaut schöner aus und ist wohl auch pflegeleichter.

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.

2002Andreas

Zitat von Mira_Belle

Hast Du dafür eventuell eine neuere, schönere Version?

Hallo Mira, nein, habe ich nicht.

Aber teste doch mal mit einem Skript statt per CSS.

JavaScript

/*Tableiste unten. 
Die zusätzliche Titlebar Buttonbox wird bei deaktivierter Titelleiste in der Tableiste entfernt*/

(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
var css = '\
#TabsToolbar > .titlebar-buttonbox-container { \
display: none !important;\
}\
}';
var cssUri = Services.io.newURI('data:text/css,' + encodeURIComponent(css), null, null);
var SSS = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
SSS.loadAndRegisterSheet(cssUri, SSS.AGENT_SHEET);
})();

Alles anzeigen

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.

Zitat von 2002Andreas

Zitat von Mira_Belle

Hast Du dafür eventuell eine neuere, schönere Version?

Hallo Mira, nein, habe ich nicht.
Aber teste doch mal mit einem Skript statt per CSS.

Funktioniert im Testprofil bestens!

Danke.

Werde ich wahrscheinlich ins Hauptprofil übernehmen UND

mal schauen, ob ich da noch etwas CSS mit hineinpacken werde.

2002Andreas

Zitat von Mira_Belle

Funktioniert im Testprofil bestens!
Danke.

Freut mich, gern geschehen

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.