Tabform

2002Andreas

Zitat von Horstmann

Wenn ich dich nochmal belästigen dürfte:

Na klar

Sören Hentzschel

Zitat von Mira_Belle

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

Muss nicht unbedingt, ist das Gleiche. Um bei der originalen Version zu bleiben:

CSS

.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after {
  /* CSS */
}

Das ist identisch zu:

CSS

.tabbrowser-tab {
  &[visuallyselected], &[pinned] {
    .tab-background::after {
      /* CSS */
    }
  }
}

oder:

CSS

.tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab[pinned] .tab-background::after {
  /* CSS */
}

Wenn du jetzt den Selektor mit [pinned] rausnimmst, bleibt:

CSS

.tabbrowser-tab[visuallyselected] .tab-background::after {
  /* CSS */
}

Kurz gesagt: Wenn innerhalb von :is() nur ein einziger Selektor steht, ist das nicht notwendig. Die Pseudoklasse :is() dient nur der Vereinfachung, wenn man mehr als einen Selektor ansprechen möchte.

Ein Extrem-Beispiel aus den MDN Web Docs:

CSS

ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

Alles anzeigen

Ist das Gleiche wie:

CSS

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

Horstmann

Zitat von Mira_Belle

Ich bin mal so frei!
Funktioniert,
wenn man den kleinen Fehler in Zeile 93 korrigiert.

Ouuups; muss ich gleich mal korrigieren.

Danke!

Zitat von 2002Andreas

Na klar

Prima, danke!

Mira_Belle

Zitat von Horstmann

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

Wie sollten angeheftete Tabs genau aussehen?

So wie in den Bildern, die Du hier gezeigt hast?

Wenn ja, dann sind sie so!

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

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

Wie sollten angeheftete Tabs genau aussehen?
So wie in den Bildern, die Du hier gezeigt hast?
Wenn ja, dann sind sie so!

Sind wie?

Die sollten keine unteren Ecken haben, sondern so wie hier aussehen:

Mira_Belle

Horstmann

Ok, tun sie.

Horstmann

Danke an alle für die Mithilfe.

Das Bessere ist ja des Guten Feind, also eine neue Version.

Ein paar Bugs beseitigt, aber ein Problem kann ich auf Teufel komm raus nicht in den Griff bekommen: wenn die Tabs überlaufen, werden die angesetzten Tab-Ecken abgeschnitten am Anfang und Ende des "Scrollfensters" mit Ausnahme des ersten und letzten Tabs, wenn diese nicht versteckt sind in Overflow.

Diese beiden sind aber ja auch im Code schon mit Abstand nach aussen versehen.

Alle anderen Tabs an den extremen Enden werden nicht komplett angezeigt.

Ich habe jeden möglichen und unmöglichen Selektor und alle umgebenden Elemente probiert, um dieses "Fenster" im Overflow etwas breiter zu bekommen, bzw. die Tabs am Anfang und Ende anders abgeschnitten zu bekommen - nix hat funktioniert...

Wenn dazu jemand eine Idee hätte, das wäre prima.

Hier erstmal der mit Spannung erwartete , zart aktualisierte Code mit den erwähnten Bug Korrekturen, Grafik wie gehabt.

CSS

/*** Curved tabs beta #2 ***/


/*** 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%, 43%, 1);

    /*--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 {
    border-image: linear-gradient(to top, 
        var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !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: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}


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

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

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

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

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

/* Button rund, Icon Position Höhe angepasst */
#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;
    /*box-shadow: inset 0 0px 2px 1px var(--ug-color-border) !important;*/
}


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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

/* Space for corner first/last tab, overflow bug fix */
/* Test #3 */

.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;
}
.tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 0px !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 {
    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

tab_corner_ug.svg.zip

Mira_Belle

Horstmann

Ach, das ist der "Overflow" Ich Dummerchen, habe mich nicht getraut nachzufragen.

Das ist in allen Versionen des CSS so, schon ab der Ersten.

Daran habe ich mich auch schon versucht, ohne bisher eine Lösung dafür zu haben.

Horstmann

Zitat von Mira_Belle

Das ist in allen Versionen des CSS so, schon ab der Ersten.
Daran habe ich mich auch schon versucht, ohne bisher eine Lösung dafür zu haben.

Ich hab mal beim Chef nachgefragt, der freundlicherweise prompt geantwortet hat.

Das Problem ist tatsächlich dass die Ecken eigentlich innerhalb der Tabs an sich sein müssten, nicht aussen angehängt.

Hatte ich auch schon probiert, aber hatte nicht geklappt, muss ich evtl. nochmal ran.

Ich weiss nicht ob der eingebaute svg code, den ich für diesen schnellen Test benutzt habe, auf Windows funktioniert, aber hier wäre ein ganz grober erster Versuch nur mit Abständen.

Die neuen Anpassungen sind zum Grossteil ganz unten.

CSS

/*** Curved tabs beta #2B ***/


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

/* Edges (borders, outlines) colors */

/* Edges 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 */

/* Edges 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 */


/* Tabs backgrounds:  */

    --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 bar border bottom color */
    --ug-color3: hsla(0, 0%, 43%, 1);

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

/*** General adjustments end ***/


/* Tab bar border bottom */

#TabsToolbar {
    border-image: linear-gradient(to top, 
        var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !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: 3px !important;
}
.tabbrowser-tab:not([pinned]) .tab-content {
    padding-inline: 12px 10px !important;
}

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

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

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

/* Position, closer to last tab */

.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
    /*margin-inline: -11px !important;*/
    margin-left: 8px !important;
    z-index: 2 !important;
}


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

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

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


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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

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

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

.tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 0px !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;
}

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






/*   margins test   */

.tabbrowser-tab .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
}

                                                                                                               /* basis TEST */
.tabbrowser-tab:not([pinned]) {
    padding-left: 20px !important;
}

                                                                                                       /* Tab selected  TEST */

.tabbrowser-tab[visuallyselected]:not([pinned]) {
    padding-inline: 20px !important;
}


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

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) {
    margin-inline: -36px -18px !important;
}

/*
.tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:is([visuallyselected]) {
    margin-left: -18px !important;
}
*/

/*
.tabbrowser-tab:not([visuallyselected], [pinned]) + .tabbrowser-tab:not([visuallyselected]) {
    margin-right: -18px !important;
}
*/

.tabbrowser-tab:not([visuallyselected], [pinned]) {
    margin-right: -18px !important;
}

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

.tabbrowser-tab:not([pinned]):last-of-type {
    padding-inline: 20px !important;
}

.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
    padding-inline: 2px 20px !important;
    margin-left: -18px !important;
}

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:is([visuallyselected]):not([pinned]):last-of-type {
    padding-right: 0px !important;
}

Alles anzeigen

2002Andreas

Zitat von Horstmann

auf Windows funktioniert

Sieht hier so aus:

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

auf Windows funktioniert

Sieht hier so aus:

Danke für den Test, scheint zu klappen.

~~An die erste Tab muss ich wohl nochmal ran...~~

Jetzt hoffentlich korrigiert im Code oben.

Mitleser

Mir ist aufgefallen. dass du nicht:

#tabbrowser-tabs[haspinnedtabs]

#tabbrowser-tabs[positionpinnedtabs]

#tabbrowser-arrowscrollbox[overflowing]

nutzt.

Ein Beisp. wäre:

CSS

#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 
    margin-inline-start: .... !important;
}

Horstmann

Zitat von Mitleser
Mir ist aufgefallen. dass du nicht:
#tabbrowser-tabs[haspinnedtabs]
#tabbrowser-tabs[positionpinnedtabs]
#tabbrowser-arrowscrollbox[overflowing]
nutzt.
Ein Beisp. wäre:
CSS
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 
    margin-inline-start: .... !important;
}
Alles anzeigen

Danke, hab ich aber alles schon (zumindest kurz) probiert, leider ohne Erfolg.

Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast - nur zu!

Mitleser

Zitat von Horstmann

Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast

Nö, habe ich nicht. Damit habe und werde ich mich auch nicht beschäftigen, 'form follows funktion' ist bei diesem Thema auch nicht Programm, sondern eher 'mir ist gerade langweilig'. Entschuldigung für den vorherigen Beitrag.

Mira_Belle

Zitat von Horstmann

...
Ich weiss nicht ob der eingebaute svg code, den ich für diesen schnellen Test benutzt habe, auf Windows funktioniert, aber hier wäre ein ganz grober erster Versuch nur mit Abständen.
Die neuen Anpassungen sind zum Grossteil ganz unten.
...

Scheint zu funktionieren!

Habe auch eine Deiner älteren Vektorgrafik benutzt,

scheint auch damit zu klappen.

Werde aber erst zum Samstag oder gar Sonntag dazu kommen, Deinen neuen Code wieder zu zerlegen.

Auch werde ich mich erst dann wieder da reinknien, wenn der Code dann von Dir als Final bezeichnet wird.

Die vielen Optimierungen und Änderungen machen mir zu schaffen und ich habe den Uberblick verloren.

DAS liegt aber nicht an Dir!! Also nicht falsch verstehen.

Apropos, Du hast zwar --ug-color3 definiert, aber diese "Farbe" kommt gar nicht zur Anwendung!

Die soll wohl für die Linie zwischen den Tabs und dem Fensterinhalt sein, richtig?

Was mir aber gerade aufgefallen ist,

die Tabbreite ändert sich, je nachdem welcher Tab gerade aktiv ist.

Das fand ich vorher irgendwie schöner und besser.

Da veränderten sich nur die "Bögen".

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast

Nö, habe ich nicht. Damit habe und werde ich mich auch nicht beschäftigen, 'form follows funktion' ist bei diesem Thema auch nicht Programm, sondern eher 'mir ist gerade langweilig'. Entschuldigung für den vorherigen Beitrag.

Also mal kurz vorbeigeschaut um über unser nutzloses Getue die Nase zu rümpfen, hmm?

Vielleicht nicht ganz im Geiste dieses Unter-Forums, aber was weiss ich schon.

Zitat von Mira_Belle

Apropos, Du hast zwar --ug-color3 definiert, aber diese "Farbe" kommt gar nicht zur Anwendung!
Die soll wohl für die Linie zwischen den Tabs und dem Fensterinhalt sein, richtig?

Richtig; einiges an Einträgen wird nicht benutzt, ist aber noch da als eventuelle Option und weil es halt immer noch ein Test ist, kein fertiger Code.

Sorry dass es so kompliziert ist und sich dauernd ändert, aber es hängt halt so vieles zusammen und voneinander ab...

Wenn es denn je fertig wird...

Der Overflow ist die ultimative Hürde; das nervt wirklich.

Ich bin momentan dabei die Tabs komplett neu aufzubauen, mit den Rundungen innerhalb vom Tab selber, aber erst mal schauen ob was geht damit.

Der letzte Code sollte eigentlich fast funktionieren im Overflow, mit wenigen Ausnahmen, aber ist halt wirklich übles Gehacke; das muss besser gehen.

Mira_Belle

Hi, ein kleines Résumé!

Ich hatte mir gestern Abend kurz die Zeit genommen und ALLE Variationen erneut durchprobiert!

Mh, , wie sage ich es jetzt?

Also, ich bin der Meinung, der von mir modifizierte Code, basierend auf den aus Beitrag #56,

glaube ich, am besten funktioniert.

(Mit meinen Modifikationen #93) + (Modifikation #99)

Zwar ist da der "Bug" mit dem "Überlauf" vorhanden, aber es braucht min. zwei Dutzend Tabs,

bis der Overflow überhaupt einsetzt.

Dann sind die ganzen Tabs eh schon auf Erbsengröße geschrumpft.

Ich habe den Beitrag und die Erklärung vom Chef gelesen, verstanden und kann es nun,

anhand meiner Beobachtungen bestätigen.

Die angehängten Vektorgrafiken werden von der Overflow-Funktion nicht berücksichtigt,

daher sieht es so aus, als ob der Tab abgeschnitten wird.

Was die anderen Versionen angeht, so haben diese alle irgendwelche "Ungereimtheiten", die ich nicht so schön finde.

Mal verändert sich die Tabbreite, wenn man einen Tab aktiviert, mal ist es was anderes.

(Da war noch etwas, komme nur gerade nicht drauf, sorry)

Das mit dem "Überlauf" scheint wohl eine ganz besonders harte Nuss zu sein!

Horstmann

Zitat von Mira_Belle

Hi, ein kleines Résumé!
Ich hatte mir gestern Abend kurz die Zeit genommen und ALLE Variationen erneut durchprobiert!
Mh, , wie sage ich es jetzt?
Also, ich bin der Meinung, der von mir modifizierte Code, basierend auf den aus Beitrag #56,
glaube ich, am besten funktioniert.
(Mit meinen Modifikationen #93) + (Modifikation #99)
Zwar ist da der "Bug" mit dem "Überlauf" vorhanden, aber es braucht min. zwei Dutzend Tabs,
bis der Overflow überhaupt einsetzt.
Dann sind die ganzen Tabs eh schon auf Erbsengröße geschrumpft.
Ich habe den Beitrag und die Erklärung vom Chef gelesen, verstanden und kann es nun,
anhand meiner Beobachtungen bestätigen.
Die angehängten Vektorgrafiken werden von der Overflow-Funktion nicht berücksichtigt,
daher sieht es so aus, als ob der Tab abgeschnitten wird.
Was die anderen Versionen angeht, so haben diese alle irgendwelche "Ungereimtheiten", die ich nicht so schön finde.
Mal verändert sich die Tabbreite, wenn man einen Tab aktiviert, mal ist es was anderes.
(Da war noch etwas, komme nur gerade nicht drauf, sorry)
Das mit dem "Überlauf" scheint wohl eine ganz besonders harte Nuss zu sein!

Alles anzeigen

Auf den Punkt getroffen!

Ich habe eine Lösung für den Überlauf, aber dann verändern sich die Breiten je nach gewählter/nicht gewählter etc. Tab.

Dafür hab ich im Prinzip auch eine Lösung - aber die hat noch einen massiven Bug...

Mira_Belle

Zitat von Horstmann

...
Ich habe eine Lösung für den Überlauf, aber dann verändern sich die Breiten je nach gewählter/nicht gewählter etc. Tab.
Dafür hab ich im Prinzip auch eine Lösung - aber die hat noch einen massiven Bug...

Na da bin ich aber mal gespannt. Kann es kaum erwarten.

Und betrifft es wieder den kompletten Code,

oder nur einen bestimmten Teil, bestimmte Selektoren?

Horstmann

Zitat von Mira_Belle

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

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

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

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

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

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

Die Grafik ist hier auch wieder eingebunden.

CSS

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


/*** General adjustments ***/

:root {

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

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

/* Edges (borders, outlines) colors */

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

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


/* Tabs backgrounds:  */

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

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

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

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


/*** General adjustments end ***/


/* buttons adjust size, position */

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

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

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

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

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

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

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

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


                                                           /*** Tabs base ***/

/* tabs connected bottom */

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


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

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

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

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

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

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

                                                          /***  COLORS  ***/

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


/* Basis */

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

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

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

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

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

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

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

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

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

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

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

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

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


/*  TEST margins etc overflow  */

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

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

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

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

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

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

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

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

                                                 /* divers TEST */

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

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

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

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

Alles anzeigen