Tabform

Horstmann

Zitat von Mira_Belle

Hi,
die Abbildungen von 2002Andreas, sowie die im zweiten Link von .DeJaVu
sind in etwa so, wie ich es mir vorgestellt habe.

Die Beispiele sind doch im Prinzip genau das was der CSS Code von MrOtherGuy erzeugt, was ist denn das Problem damit?

Mira_Belle

Zitat von Horstmann

Die Beispiele sind doch im Prinzip genau das was der CSS Code von MrOtherGuy erzeugt, was ist denn das Problem damit?

Nicht ganz!

1. Die Abgrenzung fehlt!

2. Funktioniert nur bei "Hell" oder "Dunkel", mit meinem Theme eben leider nicht!

Kann aber mal versuchen, den Hintergrund per CSS irgendwie einzubinden.

Versuche mal "NordOrange"! Der ist zwar einfarbig, aber hat feine Linien um die Tabs.

Nicht schön, mit diesem Code.

Ach und ich verwende "abstract Orange-and-blue", da sind die Darstellungsfehler, grrr.

Aber ja, bei der überwiegenden Mehrheit von den von mir getesteten Themes funktioniert es sehr gut.

Aber ist es denn nicht langweilig, immer von anderen fertigen Code zu übernehmen?

AH!

Die Darstellungsfehler resultieren aus der "Spiegelung" der Vektorgrafik!

Das müsste ja zu beheben sein

und die "Linie" bekomme ich auch irgendwie hin.

Beispiele gibt es ja jetzt zur Genüge.

Hat aber alles Zeit.

Horstmann

Zitat von Mira_Belle

Nicht ganz!
1. Die Abgrenzung fehlt!
2. Funktioniert nur bei "Hell" oder "Dunkel", mit meinem Theme eben leider nicht!
Kann aber mal versuchen, den Hintergrund per CSS irgendwie einzubinden.
Versuche mal "NordOrange"! Der ist zwar einfarbig, aber hat feine Linien um die Tabs.
Nicht schön, mit diesem Code.
Ach und ich verwende "abstract Orange-and-blue", da sind die Darstellungsfehler, grrr.
Aber ja, bei der überwiegenden Mehrheit von den von mir getesteten Themes funktioniert es sehr gut.
Aber ist es denn nicht langweilig, immer von anderen fertigen Code zu übernehmen?

Alles anzeigen

Unter anderem deswegen hab ich ja auch meinen eigenen Code gebastelt, s. oben.

Übrigens mit ziemlich aufwendigen Trennlinien, für die ich auch noch Varianten in petto hätte, die man aber halt anpassen muss je nach gewünschter Optik, zusammen mit dem Rest vom Code.

Die Trennlinien sind die grösste Schwierigkeit, gefolgt von transparenten Tab Hintergründen, ohne ist relativ einfach.

.

Mira_Belle

Oh mein Gott, was ich dieses Design vermisse!

https://www.clickonf5.org/wp-content/uploads/2009/10/Mockup40VistaTabsBottom.png

Sören Hentzschel

Das ist doch nur ein altes Mockup. So wurde das Firefox-Design nie umgesetzt.

Mira_Belle

Zitat von Sören Hentzschel

Das ist doch nur ein altes Mockup. So wurde das Firefox-Design nie umgesetzt.

Oh, sorry.

Das ist ein Missverständnis

Es ging mir um das Aero, Fenster mit Rahmen und dieser inkl. Titelleiste transparent.

Wie ich dieses Windows 10 Design hasse.

OK, ist aber ot, hier soll es um die Tabs gehen.

Also, ich habe meinen bisherigen Code etwas umgestellt und finde das Resultat auch einigermaßen annehmbar.

Was ich aber noch irgendwie umsetzen möchte, sind der "Anfang" und das "Ende" der Tabs.

Die "Formen" (umgesetzt mit Grafiken) bekommt man ja hin, aber dass die "Umrandung sich dann eben dem Design

anpasst, wird wohl eine Herausforderung!

Auch diese halbe Transparenz.

Horstmann

Zitat von Mira_Belle

Also, ich habe meinen bisherigen Code etwas umgestellt und finde das Resultat auch einigermaßen annehmbar.
Was ich aber noch irgendwie umsetzen möchte, sind der "Anfang" und das "Ende" der Tabs.
Die "Formen" (umgesetzt mit Grafiken) bekommt man ja hin, aber dass die "Umrandung sich dann eben dem Design
anpasst, wird wohl eine Herausforderung!
Auch diese halbe Transparenz.

Alles anzeigen

Also jetzt plötzlich keine Rundungen mehr unten?

Was soll's denn nun werden?

2002Andreas

Zitat von Horstmann

jetzt plötzlich keine Rundungen mehr unten?

Sie ist eine Frau, das wollte sie gestern

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

jetzt plötzlich keine Rundungen mehr unten?

Sie ist eine Frau, das wollte sie gestern

Heheheee...

Mira_Belle

Horstmann & 2002Andreas

Ihr seid doof.

Macht Euch nur lustig über mich, aber das macht mir gar nichts aus.

2002Andreas

Zitat von Mira_Belle

Macht Euch nur lustig über mich

Das würde ich niemals machen.

Zitat von Mira_Belle

aber das macht mir gar nichts aus.

Horstmann

Zitat von Mira_Belle

Horstmann & 2002Andreas
Ihr seid doof.
Macht Euch nur lustig über mich, aber das macht mir gar nichts aus.

Andreas hat angefangen!

Was die Tabs angeht, ich würde dabei gerne helfen wenn ich kann, aber du müsstest dich halt für einen Look entscheiden.

Wie erwähnt, die nach aussen gehenden Rundungen unten sind die grösste Herrausvorderung, aber machbar; danach kommt Rundungen mit zusätzlicher Tab Hintergrund Transparenz, das ist ziemlich fies.

Wenn die unteren Rundungen wegfallen, dann sollte es eigentlich nicht so schwer sein den Rest nach Belieben anzupassen - du musst nur klar sagen was du möchtest, es gibt so viele mögliche Varianten.

Am besten wäre ein Mockup oder ein Screenshot mit Kommentaren.

2002Andreas

Zitat von Horstmann

Andreas hat angefangen!

Ich doch nicht, und womit denn überhaupt

Mira_Belle

Zitat von Horstmann

...
Was die Tabs angeht, ich würde dabei gerne helfen wenn ich kann, aber du müsstest dich halt für einen Look entscheiden.
...

Wenn ich das nur so genau wüsste.

Bleiben wir, ICH, bei dem Design.

Ich schrieb ja schon, dass ich das irgendwie, also die Rundungen, mit Grafiken machen möchte.

Die Frage, mach ich das dann mit "Bildchen" (*.png) oder besser doch mit Vektorgrafiken.

Was auf jeden Fall ausgeschlossen sein sollte, ist das "Spiegeln"!

Es verursacht bei "Hintergründen" mit Farbverlauf Bildfehler.

Bei Vektorgrafiken kann man ja nur eine ca. 3px- breite Linie definieren

und per CSS dann die Farbe, die diese haben soll.

Zum Verständnis, bei den hier zur Verfügung stehenden Vektorgrafiken handelt es sich um zwei Flächen!

Was ich mich nun frage, ist es möglich auch innerhalb des SVG-Codes Farbverläufe zu definieren?

Wobei min. eine Farbe von außen per CSS festgelegt werden sollte. Die hardcodet soll dann transparent sein,

damit die Linie in etwa so ausschaut.

Im Übrigen kann man in meinem Code die linke und rechte senkrechte "Begrenzung" des Tabs dann ausblenden,

damit sich die Grafik besser einfügen lässt.

OK, die Grafik ist hier mein Problem.

Nicht besonders gut, aber ich hoffe man kann erkennen wohin es gehen soll.

Horstmann

Zitat von Mira_Belle

Ich schrieb ja schon, dass ich das irgendwie, also die Rundungen, mit Grafiken machen möchte.
Die Frage, mach ich das dann mit "Bildchen" (*.png) oder besser doch mit Vektorgrafiken.
......
Was ich mich nun frage, ist es möglich auch innerhalb des SVG-Codes Farbverläufe zu definieren?
Wobei min. eine Farbe von außen per CSS festgelegt werden sollte.

Also doch wieder rund untenrum?

Bzgl. Farbveräufen in .svgs, weiss ich nicht, mit .pngs oder jpgs kannst du's natürlich machen, aber dann kannst du mit CSS nicht den Farbinhalt einzelner Bestandteile steuern.

Ich wollte nochmal auf Godie verweisen; hier gibt's eine CSS für Tab Shapes und Hinweise für about:config Änderungen, und hier eine Menge .svg Icons für alle möglichen Rundungen.

Geht erstmal ganz ok mit deinem Theme, du müsstest aber noch rausfinden wie Umrandungen und Hintergründe für hover/unselektierte und multiselektierte Tabs klappen, evtl. braucht's dafür noch mehr von seinem Style als nur die Tab Shapes CSS Datei - ich hab nur die kurz getestet.

Das Ding ist, die runden Ecken sind ja nur der Anfang, dann muss das Ganze auch noch zusammenarbeiten, und sich sauber ineinander fügen und überlappen.

Horstmann

Zitat von Mira_Belle

OK, die Grafik ist hier mein Problem.

Hmm, die Sucht war wieder stärker...

Die Rundungen passen noch nicht ganz, und die Kanten bzw. Trennlinien links/rechts sind wirklich eine Pest, aber kannst ja mal probieren.

CSS

:root {

    --ug-height: calc(var(--tab-min-height) / 2);

    --ug-radius: 18px;

    --ug-fill: cyan;


    --ug-stroke: hsla(0, 100%, 50%, 0.5);
    --ug-color-border: hsla(0, 100%, 50%, 0.5);

    --ug-color1: hsla(0, 0%, 83%, 0.5);
    --ug-color2:  hsla(35, 80%, 60%, 0.5);
    --ug-color3: hsla(0, 0%, 83%, 1);
    --ug-color_hova: hsla(0, 0%, 63%, 0.5);

    /*--ug-color_test_text: hsla(0, 0%, 13%, 1) !important;*/
}



 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 5px, transparent 5px) !important;
    /*outline: 1px solid grey !important;
    outline-offset: -1px !important;*/
    -moz-context-properties: fill, stroke, stroke-opacity !important;
} 

.tab-label, .tab-close-button {
    color: var(--ug-color_test_text) !important;
    text-shadow: none  !important;
}

#TabsToolbar toolbarbutton {
    margin-top: -4px !important;
}

#tabbrowser-tabs {
    --ug_margin_plus: -2px 2px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}

#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    /*margin-left: 8px !important;*/
    border-radius: 50% !important;
}



.tabbrowser-tab:is([visuallyselected], [multiselected]) {
   z-index: 2 !important;
}


/* tabs distance */

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

/*
.tab-stack {
    overflow: hidden !important;
    background-clip: padding-box;
}*/


                                                           /*** tabs base ***/

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


/* tabs selected */

.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    fill: var(--ug-color2, transparent) !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;
}

                                                           /*** tabs Radien ***/

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

.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}

.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
    border-radius: var(--ug-radius) !important;
}

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

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

                                                           /* tabs bottom corners */

.tabbrowser-tab:not([pinned]) .tab-background::before, 
.tabbrowser-tab:not([pinned]) .tab-background::after {
    content: "";
    width: 36px !important;
    height: 36px !important;
    position: absolute;
    bottom: 5px;
    /*outline: 1px solid white !important;
    outline-offset: -1px !important;*/
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    stroke: var(--ug-stroke) !important;
}


.tabbrowser-tab:not([pinned]) .tab-background::before {
    left: -18px;
    background-image: url(icons/Tab-corner-left.svg) !important;
    background-size: 18px !important;
}

.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
    right: -18px;
    background-image: url(icons/Tab-corner-left.svg) !important;
    background-size: 18px !important;
    transform: scaleX(-1) !important;
}


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







/*  TEST Tabs Ellipsis  */
  
.tab-label-container {
    mask-image: none !important;
}

.tab-label {
    overflow: hidden !important;
    /*text-overflow: ellipsis !important;*/
    text-overflow: " ..." !important;
    white-space: nowrap !important;
    max-width: 100% !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;
    }


    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

.tab-content > .tab-close-button:hover {

    color: var(--ug-color_test_text) !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 */
   outline: none !important;
    /*  background: #E81123 !important;                         */          /* Kirschrot rgb(232, 17, 35) */
    /*  box-shadow: inset 0px 0px 4px 0px #ff0000 !important;   */          /* Hellrot rgb(255, 0, 0) */
}

Alles anzeigen

Horstmann

Nochmal etwas verfeinert, Rundungen und Trennlinien noch Baustelle:

CSS

:root {

    --ug-height: calc(var(--tab-min-height) / 2);

    --ug-radius: 18px;

    --ug-fill: cyan;


/* Rand  Farben */

    /*--ug-stroke: hsla(0, 100%, 50%, 0.5);
    --ug-stroke: var(--ug-color3);*/

    --ug-color-border: var(--ug-stroke);

    --ug-stroke: hsla(0, 0%, 83%, 0.5);


    --ug-color1: hsla(0, 0%, 83%, 0.25);
    --ug-color2:  hsla(35, 80%, 60%, 0.25);
    --ug-color_hova: hsla(0, 0%, 63%, 0.25);

/* tab bar rand unten Farbe */
    --ug-color3: hsla(0, 0%, 83%, 1);

    /*--ug-color_test_text: hsla(0, 0%, 13%, 1) !important;*/
}



 #TabsToolbar {
    background-image: linear-gradient(to top, 
        var(--ug-color3) 5px, transparent 5px) !important;
    /*outline: 1px solid grey !important;
    outline-offset: -1px !important;*/
    -moz-context-properties: fill, stroke, stroke-opacity !important;
} 

.tab-label, .tab-close-button {
    color: var(--ug-color_test_text) !important;
    text-shadow: none  !important;
}

#TabsToolbar toolbarbutton {
    margin-top: -4px !important;
}

#tabbrowser-tabs {
    --ug_margin_plus: -2px 2px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
    margin-block:  var(--ug_margin_plus) !important;
}

#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
    /*margin-left: 8px !important;*/
    border-radius: 50% !important;
}



.tabbrowser-tab:is([visuallyselected], [multiselected]) {
   z-index: 2 !important;
}


/* tabs distance */

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

/*
.tab-stack {
    overflow: hidden !important;
    background-clip: padding-box;
}*/


                                                           /*** tabs base ***/

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


/* tabs selected */

.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
    background-image: none !important;
    background-color: var(--ug-color2) !important;
    fill: var(--ug-color2, transparent) !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;
}

                                                           /*** tabs Radien, borders ***/

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

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

/*   select , pinned  */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}

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

/*   not select -> nach select  */

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

/*   not select last */
.tabbrowser-tab:last-of-type .tab-background {
    border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    border-inline: none !important;
}

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

                                                           /* tabs bottom corners */

.tabbrowser-tab:not([pinned]) .tab-background::before, 
.tabbrowser-tab:not([pinned]) .tab-background::after {
    content: "";
    width: 36px !important;
    height: 36px !important;
    position: absolute;
    bottom: 5px;
    /*outline: 1px solid white !important;
    outline-offset: -1px !important;*/
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    stroke: var(--ug-stroke) !important;
}


.tabbrowser-tab:not([pinned]) .tab-background::before {
    left: -18px;
    background-image: url(icons/Tab-corner-left.svg) !important;
    background-size: 18px !important;
}

.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
    right: -18px;
    background-image: url(icons/Tab-corner-left.svg) !important;
    background-size: 18px !important;
    transform: scaleX(-1) !important;
}


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






    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

.tab-content > .tab-close-button:hover {

    color: var(--ug-color_test_text) !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 */
   outline: none !important;
    /*  background: #E81123 !important;                         */          /* Kirschrot rgb(232, 17, 35) */
    /*  box-shadow: inset 0px 0px 4px 0px #ff0000 !important;   */          /* Hellrot rgb(255, 0, 0) */
}

Alles anzeigen

Das .svg dazu ist das gleiche wie hier.

Mira_Belle

Zwischenstopp

Meine Tabs sehen z.Z. so aus.

Die Farben werden so nicht bleiben!

Woran ich gerade ab verzweifele, die Höhe der Vektorgrafiken!

Links-rechts ist kein Problem, auch die Größe der Grafiken nicht,

aber eben hoch oder tief.

Was ich auch nicht hinbekomme, was wahrscheinlich auch nicht funktionieren wird,

z.B. den "Closebutton" weiter nach rechts zu bekommen.

Auch der Anfang des Labels, also das Icon weiter nach links.

Hier mal mein "Bastelcode".

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {

    /* -------------------------------------------------------------------------- */
    /************** Trennlinie zwischen Fensterinhalt und Tableiste ***************/
    /* -------------------------------------------------------------------------- */

    #TabsToolbar {
        background-image: linear-gradient(to top, 
    /*    hsla(35, 80%, 60%, 0.55) 1px, hsla(35, 80%, 60%, 0.25) 4px 1px, transparent 6px) !important; */
        orange 2px, hsla(35, 80%, 60%, 0.5) 1px 5px, transparent 1px) !important;
    } 

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

    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/





    /* --------------------------------------------------*/
    /************* passiven Tab einfärben ****************/
    /* --------------------------------------------------*/    



    .tab-label:not([selected]):not([multiselected]) {
        color: var(--uc-color-grey-lighter) !important;                                /* Inaktiver Tab: Schriftfarbe (Hellgrau) */
        
    }

    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

    .tab-content > .tab-close-button:hover {
        background:rgba(255, 0, 0, 0.4) !important;                                   /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 1) !important;                               /* Rot, glow */
    /*    background: #E81123 !important;                                                 /* Kirschrot rgb(232, 17, 35) */
    /*    box-shadow: inset 0px 0px 4px 0px #ff0000 !important;                         /* Hellrot rgb(255, 0, 0) */
    }
    
    /*Tab Schließenbutton verschoben*/
/*    
    .tab-close-button{
        flex-shrink: 0 !important;
        margin-right: -6px !important;
    }
*/
    /*Tab Schließenbutton auch beim Hovern sichtbar */
/*
    .tabbrowser-tab:hover > .tab-stack > .tab-content > .tab-close-button
    {
        display: block !important;
    }
*/
    /*Symbol für Schließen (X) wieder sichtbar gemacht*/

    .close-icon {
        color: var(--uc-color-white-dark) !important;
    /*    color: rgba(255, 255, 255, 0.9) !important;                                    /* Weiß, nur leicht tranzparent, für ALLE    */


    list-style-image: url(chrome://global/skin/icons/close.svg) !important;
    height: 24px !important;
    padding: 7px !important;


    }


    /*---------------------------------------------------*/
    /***************** New Tab Icon  *********************/
    /*---------------------------------------------------*/
 
    /* Dies ist das Pluszeichen um einen neuen Tab zuöffnen */
 
    :is(.tabs-newtab-button,#tabs-newtab-button) {
    /*    list-style-image: url("../image/newtab-inverted.png") !important; */
        list-style-image: url("../icons/zoom-in.svg") !important;
        fill: var(--uc-color-white-dark) !important;
        -moz-image-region: rect(2px, 15px, 16px, 1px) !important;
    }
    :is(.tabs-newtab-button,#tabs-newtab-button):hover {
        fill: var(--uc-color-orange-normal) !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: 0 !important;
    }

    #tabbrowser-tabs {
        width: 95vw !important;
    }

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

    .tab-icon-image {
        -moz-context-properties: fill !important;
    /*    fill: #FFAA00 !important;    */
        fill: var(--uc-color-red-normal) !important;
    }

    /*---------------------------------------------------*/
    /****     Icon und Tabtext mittig ausgerichtet    ****/
    /*---------------------------------------------------*/
    /*    
    .tab-content:not([pinned])::before{
        display: -moz-box;
        content: "";
        -moz-box-flex: 1;
    }
    */    
    /*-----------------------------------------------------------------------*/
    /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
    /*-----------------------------------------------------------------------*/

    #context_reopenInContainer {
        display: none !important;
      }    
      
    /*------------------------------------------------------*/
    /**** Ausblenden des Meüs "Add Tab to..."  im Popoup ****/
    /*------------------------------------------------------*/
    /*      
    #tabContextMenu > menuseparator:nth-child(31) {
    display: none !important;
    }
    #_fbcbdc47-ebd2-42f0-b2bb-7cc902ec2f40_-menuitem-_add-current-tab-menu {
    display: none !important;
    }      
    */      
    
    /*  TEST Tabs Ellipsis  */

    .tab-label {
        overflow: hidden !important;
        /*text-overflow: ellipsis !important;*/
        text-overflow: " …" !important;
        white-space: nowrap !important;
        max-width: 95% !important;    
    }


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

/* --------------------------- Ab hier volgen Tests --------------------------- */

/* ---------------------------------------------------------------------------- */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: -28px;
        background-image: url("../tab/tab-bottom-corner-left-australis.svg") !important;
        background-size: 28px !important;
    /*    background-size: 18px !important; */
    }

    .tabbrowser-tab:not([pinned]) .tab-background::after {
        right: -36px;
        background-image: url("../tab/tab-bottom-corner-right-australis.svg") !important;
        background-size: 28px !important;
    /*    background-size: 18px !important; */
    }









    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        width: 36px !important;
        height: 36px !important;
        position: absolute;
        bottom: 5px;
        /*outline: 1px solid white !important;
        outline-offset: -1px !important;*/
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
        stroke: orange !important;
    }

    /* By default, proton tabs have 2px + 2px = 4px space between them */
/*    .tabbrowser-tab{
    padding-inline: 15px !important;
    } */

    :root {
        --ug-height: calc(var(--tab-min-height) / 2);
        --ug-radius: 18px;
    
    
    
    /* Rand  Farben */
    

    --ug-color-border: hsla(0, 0%, 83%, 0.5);
    --ug-stroke: hsla(0, 0%, 83%, 0.5);
    --ug-color1: hsla(0, 0%, 83%, 0.25);
/*    --ug-color1: transparent; */
    --ug-color2:  hsla(35, 80%, 60%, 0.25);
/*    --ug-color2: transparent; */
    --ug-color_hova: hsla(0, 0%, 63%, 0.25);
/*    --ug-color_hova: transparent; */
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 1);
    
        /*--ug-color_test_text: hsla(0, 0%, 13%, 1) !important;*/
    }
    /*
    :root {
        --ug-stroke: hsla(0, 100%, 50%, 0.5);
        --ug-color-border: hsla(0, 100%, 50%, 0.5);
    }
    */
    
    /* Neuer Tabbuttin rund */ 
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        /*margin-left: 8px !important;*/
        border-radius: 50% !important;
    }    

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

       /*** tabs base ***/

       .tabbrowser-tab .tab-background {
        background-color: var(--ug-color1) !important;
        box-shadow: none !important;
        color: var(--ug-color_test_text) !important;
        /*border-image: linear-gradient(to top, 
                               var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0  !important;*/
        border-image-outset: 0 1px !important;
        fill: var(--ug-color1, transparent) !important;
        /*stroke: var(--ug-stroke) !important;*/
        outline: none !important;
        
        /*box-shadow:  inset 0px 1px var(--ug-color-border) !important;*/
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        fill: var(--ug-color2, transparent) !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;
    }
                                                        
    
    /* Macht die Grafiken "durchsichtig" */    
    #TabsToolbar {
        -moz-context-properties: fill, stroke, stroke-opacity !important;
    }    



    /*** tabs Radien, borders ***/

    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: 0px 0px 0  0 !important;
        border-top: 1px solid orange !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;      
    }

    /*   Tabbeschriftung, breite höhe   */
    .tab-content {
        padding: 0px 0px;      
    }



 
}

Alles anzeigen

Die Grafiken: icons.zip

2002Andreas

Zitat von Mira_Belle

Was ich auch nicht hinbekomme,

Auch damit nicht?

CSS

  .tab-content > .tab-close-button {
    margin-right: -14px !important;
  }
  
  .tab-icon-image{
    margin-left: -9px !important;
  }

Ansonsten:

Zeile 102 und 103:

.tabbrowser-tab[visuallyselected=true]

muss jetzt so sein:

.tabbrowser-tab[visuallyselected]

2002Andreas

Dein Code aus Beitrag Nr. 38 sieht hier so aus:

Mit meinem Zusatz im Code so: