Tabform

Mira_Belle

Da mir gerade danach war und ich mich etwas beschäftigen wollte,

kam ich auf die glorreiche Idee, auch weil hier z.Z. es andauernd um die Tabs ging,

die Form der Tabs zu verändern.

Jedoch, habe ich absolut keine Ahnung, wie ich das so hinbekommen soll.

Vorweg, bei mir sind die Tabs direkt über dem Fenster!

Und in etwa so, so habe ich mir das in etwas vorgestellt, hätte ich gerne die Tabs.

Nur, wie könnte das, wenn es denn überhaupt geht, funktionieren?

Z.Z. nutze ich das:

CSS

    .tab-background {
        border-radius: 8px !important;
    }

Mit dem Selektor bekomme ich es nicht hin.

Hat jemand eine Idee?

Horstmann

Ein Ansatz wäre das hier.

Es gibt verschiedene Styles die ähnliches CSS benutzen, ist aber immer etwas kompliziert wegen der unteren, nach aussen gerichteten Rundung der Tabs.

Auch gut ist generell der CSS Code von Godie, der hat sowas in Extras, aber das müsstest du dir raussuchen und zusammenbasteln.

2002Andreas

Zitat von Mira_Belle

Mit dem Selektor bekomme ich es nicht hin.

Diese Kurven werden/wurden durch einzelne Bilder erstellt.

Code

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+

Mira_Belle

Horstmann & 2002Andreas

Danke für Eure Hinweise und Tipps.

Meine bisherige "Arbeit":

CSS

    #tabbrowser-tabs{
    --uc-tab-curve-size: 17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
    --tab-block-margin: 0px;
    --tab-min-height: 34px;
    }
    .tabbrowser-tab{
    padding-inline: 15px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
    }
    #TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
    .titlebar-spacer[type="pre-tabs"],
    .tabbrowser-tab::after{ border: none !important; }
    /*.tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after,*/
    .tabbrowser-tab[selected] > .tab-stack::before,
    .tabbrowser-tab[selected] > .tab-stack::after{
    width: var(--uc-tab-curve-size);
    height: 100%;
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-orange.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -1px;
    background-position-x: 0,0;
    }
    /*
    .tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after{
    width: var(--uc-tab-curve-size);
    height: 100%;
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-grey.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -1px;
    background-position-x: 0,0;
    }
    */
    .tabbrowser-tab[selected] > .tab-stack::after,
    .tabbrowser-tab:hover > .tab-stack::after{
    left: auto;
    right: calc(0px - var(--uc-tab-curve-size));
    transform: scaleX(-1);
    }
    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/
    .tab-background[selected] {                                                                                        
        background:rgba(255, 148, 0, 0.3) !important;                           /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                    
        box-shadow: inset  0px 0px 25px 0px var(--uc-color-orange-normal) !important;                   /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
        border: hidden !important;                                               /* Aktiver Tab: Rahmen ausblenden */
    /*  border: 1px solid #D4D4D4 !important;   */                               /* Aktiver Tab: Rahmen Breite, Art und Farbe */
        border-radius: 18px 18px 0px 0px !important;
    }
    .tab-label[selected] {
        color: var(--uc-color-white-dark) !important;                                               /* Aktiver Tab: Schriftfarbe (Weiß) */
    }
   
    .tabbrowser-tab:-moz-lwtheme {
        color: rgba(255, 165, 0, 0.1) !important;                               /* Weißer Rahmen um aktiven Tab entfernen (Orange)  */
    }
    /* --------------------------------------------------*/
    /************* passiven Tab einfärben ****************/
    /* --------------------------------------------------*/
    /*  .tab-background:not([selected]) { */
        .tabbrowser-tab:hover > stack > .tab-background:not([selected]) {
            background:rgba(225, 225, 225, 0.2) !important;                     /* Inaktiver Tab: Hintergrundfarbe (Hellgrau) */
            box-shadow: inset 0px 0px 5px 0px var(--uc-color-white-dark) !important;                    /* Inaktiver Tab: Schatten Breite, Art und Farbe (Hellgrau) */
            border: hidden !important;                                               /* Inaktiver Tab: Rahmen ausblenden */
        /*  border: 1px solid #D4D4D4 !important;   */                                  /* Inaktiver Tab: Rahmen Breite, Art und Farbe */
            border-radius: 18px 18px 0px 0px !important;
        }
   
        .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, 0.7) !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 Hafern 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: rgba(255, 255, 255, 0.9) !important;                             /* Weiß, nur leicht tranzparent, für ALLE   */
    }
    /*---------------------------------------------------*/
    /***************** 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;
        -moz-image-region: rect(2px, 15px, 16px, 1px) !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;    
    }

Alles anzeigen

Bin aber noch nicht so wirklich zu frieden!

Die verwendeten Symbole sind eingefärbt!

Wenn ich "Hovern" aktiviere, werden leider auch die Sybole des aktiven Tabs "ausgetauscht".

Und was mir vorher nie so aufgefallen war,

der Schließenbutten, der verändert die Größe, ...

Da ist also noch der Wurm drin.

Horstmann

Zitat von Mira_Belle

Meine bisherige "Arbeit":

Bin aber noch nicht so wirklich zu frieden!
Die verwendeten Symbole sind eingefärbt!
Wenn ich "Hovern" aktiviere, werden leider auch die Sybole des aktiven Tabs "ausgetauscht".
Und was mir vorher nie so aufgefallen war,
der Schließenbutten, der verändert die Größe, ...
Da ist also noch der Wurm drin.

Alles anzeigen

Ähem - dein CSS sieht bei mir in 115esr einfach nur verhunzt aus.

Nicht mal die unteren Bögen sind noch da, was ja irgendwie der Sinn der Übung ist.

Ausgehend vom originalen CSS Code, was willst du denn ändern und wie?

Am besten mit Screenshots.

Dharkness

Zitat von Mira_Belle

Meine bisherige "Arbeit":

Um das testen zu können, solltest Du aber auch die Grafiken mitliefern.

Mira_Belle

Zitat von Dharkness

Um das testen zu können, solltest Du aber auch die Grafiken mitliefern.

Ö, ja, sorry.

icons.zip

2002Andreas

Zitat von Mira_Belle

werden leider auch die Sybole des aktiven Tabs "ausgetauscht".

Zitat von Mira_Belle

der Schließenbutten, der verändert die Größe, ...

Für den aktiven Tab habe ich nur die andere orange Ecke in den Code mal eingefügt.

Oder habe ich dich/das falsch verstanden, dann sorry,

Mira_Belle

Du hast "meinen" Code genutzt?

Egal, äh, nein, muss ich wissen, damit ich die richtigen Rückschlüsse daraus ziehen kann.

Was mich aber viel mehr stört, dass ich nicht weiß, wie ich das Hovern beim Aktiven Tab verhindern kann,

damit sich die "Rundungen" nicht verändern.

Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

Aber auch wenn das Resultat dem "Original" recht nahe kommt, es gefällt mir nicht.

Es fehlt die durchgängige Linie.

Auch ist der Tab im Grunde mit dem Fenster verbunden.

Zieht sich über die gesamte Breite quasi die komplette "Tableiste".

Selbst wenn ich die nicht aktiven Tabs transparent lasse, sieht das alles andere als gut aus.

Ich habe noch einmal an diversen Werten "geschraubt",

sieht, wie ich finde, nun etwas besser aus.

Aber wie bekomme ich eine 2px dicke Linie über die komplette Breite da hin?

Mira_Belle

Besser bekomme ich es nicht hin.

Irgendwie gefällt es mir nicht.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
    #tabbrowser-tabs{
    --uc-tab-curve-size: 30px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
    --tab-block-margin: 0px;
    --tab-min-height: 34px;
    }
    .tabbrowser-tab{
    padding-inline: 20px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
    }
    #TabsToolbar {
        border-bottom: 3px solid var(--uc-color-grey-light);
    }  
    #TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
    .titlebar-spacer[type="pre-tabs"],
    .tabbrowser-tab::after{ border: none !important; }
    /*.tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after,*/
    .tabbrowser-tab[selected] > .tab-stack::before,
    .tabbrowser-tab[selected] > .tab-stack::after{
    width: var(--uc-tab-curve-size);
/*  height: 100%; */
    height: calc(65px - var(--uc-tab-curve-size));
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-grey.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -1px;
    background-position-x: 0,0;
    }
    /*
    .tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after{
    width: var(--uc-tab-curve-size);
    height: 100%;
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-grey.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -1px;
    background-position-x: 0,0;
    }
    */
    .tabbrowser-tab[selected] > .tab-stack::after,
    .tabbrowser-tab:hover > .tab-stack::after{
    left: auto;
    right: calc(0px - var(--uc-tab-curve-size));
    transform: scaleX(-1);
    }
    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/
    .tab-background[selected] {
        background:rgba(255, 148, 0, 0.0) !important;                                                                                      
    /*  background:rgba(255, 148, 0, 0.3) !important;                           /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                    
    /*  box-shadow: inset  0px 0px 25px 0px var(--uc-color-orange-normal) !important;                   /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
    /*  box-shadow: inset 0px 0px 25px 0px var(--uc-color-grey-dark) !important; */
        box-shadow: hidden !important;
        /*  border: hidden !important;                                               /* Aktiver Tab: Rahmen ausblenden */
        border-top: 3px solid var(--uc-color-grey-light) !important;
        border-right: 3px solid var(--uc-color-grey-light) !important;
        border-left: 3px solid var(--uc-color-grey-light) !important;
        border-bottom: 3px solid var(--uc-color-grey-light) !important;
        /*  border: 1px solid #D4D4D4 !important;   */                               /* Aktiver Tab: Rahmen Breite, Art und Farbe */
        border-radius: 10px 10px 0px 0px !important;
    }
    .tab-label[selected] {
        color: var(--uc-color-white-dark) !important;                                               /* Aktiver Tab: Schriftfarbe (Weiß) */
    }
   
    .tabbrowser-tab:-moz-lwtheme {
        color: rgba(255, 165, 0, 0.1) !important;                               /* Weißer Rahmen um aktiven Tab entfernen (Orange)  */
    }
    /* --------------------------------------------------*/
    /************* passiven Tab einfärben ****************/
    /* --------------------------------------------------*/
    /*  .tab-background:not([selected]) { */
        .tabbrowser-tab:hover > stack > .tab-background:not([selected]) {
            background:rgba(225, 225, 225, 0.2) !important;                     /* Inaktiver Tab: Hintergrundfarbe (Hellgrau) */
            box-shadow: inset 0px 0px 5px 0px var(--uc-color-white-dark) !important;                    /* Inaktiver Tab: Schatten Breite, Art und Farbe (Hellgrau) */
            border: hidden !important;                                               /* Inaktiver Tab: Rahmen ausblenden */
        /*  border: 1px solid #D4D4D4 !important;   */                                  /* Inaktiver Tab: Rahmen Breite, Art und Farbe */
            border-radius: 18px 18px 0px 0px !important;
        }
   
        .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, 0.7) !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 Hafern 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: rgba(255, 255, 255, 0.9) !important;                             /* Weiß, nur leicht tranzparent, für ALLE   */
    }
    /*---------------------------------------------------*/
    /***************** 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;
        -moz-image-region: rect(2px, 15px, 16px, 1px) !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;    
    }
}

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

Du hast "meinen" Code genutzt?

Ja.

Zitat von Mira_Belle

Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

Siehe mein .gif.

2002Andreas

Zitat von Mira_Belle

Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

So?

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
    #tabbrowser-tabs{
    --uc-tab-curve-size: 30px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
    --tab-block-margin: 0px;
    --tab-min-height: 34px;
    }
    .tabbrowser-tab{
    padding-inline: 20px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
    }
    #TabsToolbar {
        border-bottom: 3px solid var(--uc-color-grey-light);
    }  
    #TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
    .titlebar-spacer[type="pre-tabs"],
    .tabbrowser-tab::after{ border: none !important; }
    /*.tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after,*/
    .tabbrowser-tab[selected] > .tab-stack::before,
    .tabbrowser-tab[selected] > .tab-stack::after{
    width: var(--uc-tab-curve-size);
/*  height: 100%; */
    height: calc(67px - var(--uc-tab-curve-size));
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-orange.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -7px!important;
    background-position-x: 0,0;
    }
    
    .tabbrowser-tab:hover > .tab-stack::before,
    .tabbrowser-tab:hover > .tab-stack::after{
    width: var(--uc-tab-curve-size);
  /*   height: 100%; */
    display: block;
    position: absolute;
    content: "";
    left: calc(0px - var(--uc-tab-curve-size));
    background-image: url("../icons/Tab-corner-orange.svg");
    background-size: var(--uc-tab-curve-size),0;
    background-repeat: no-repeat,no-repeat;
    background-position-y: bottom, bottom -4px!important;
    background-position-x: 0,0;
    }
   
    .tabbrowser-tab[selected] > .tab-stack::after,
    .tabbrowser-tab:hover > .tab-stack::after{
    left: auto;
    right: calc(0px - var(--uc-tab-curve-size));
    transform: scaleX(-1);
    }
    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/
    .tab-background[selected] {
        background:rgba(255, 148, 0, 0.0) !important;                                                                                      
    /*  background:rgba(255, 148, 0, 0.3) !important;                           /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                    
    /*  box-shadow: inset  0px 0px 25px 0px var(--uc-color-orange-normal) !important;                   /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
    /*  box-shadow: inset 0px 0px 25px 0px var(--uc-color-grey-dark) !important; */
        box-shadow: hidden !important;
        /*  border: hidden !important;                                               /* Aktiver Tab: Rahmen ausblenden */
        border-top: 3px solid var(--uc-color-grey-light) !important;
        border-right: 3px solid var(--uc-color-grey-light) !important;
        border-left: 3px solid var(--uc-color-grey-light) !important;
        border-bottom: 3px solid var(--uc-color-grey-light) !important;
        /*  border: 1px solid #D4D4D4 !important;   */                               /* Aktiver Tab: Rahmen Breite, Art und Farbe */
        border-radius: 10px 10px 0px 0px !important;
    }
    .tab-label[selected] {
        color: var(--uc-color-white-dark) !important;                                               /* Aktiver Tab: Schriftfarbe (Weiß) */
    }
   
    .tabbrowser-tab:-moz-lwtheme {
        color: rgba(255, 165, 0, 0.1) !important;                               /* Weißer Rahmen um aktiven Tab entfernen (Orange)  */
    }
    /* --------------------------------------------------*/
    /************* passiven Tab einfärben ****************/
    /* --------------------------------------------------*/
    /*  .tab-background:not([selected]) { */
        .tabbrowser-tab:hover > stack > .tab-background:not([selected]) {
            background:rgba(225, 225, 225, 0.2) !important;                     /* Inaktiver Tab: Hintergrundfarbe (Hellgrau) */
            box-shadow: inset 0px 0px 5px 0px var(--uc-color-white-dark) !important;                    /* Inaktiver Tab: Schatten Breite, Art und Farbe (Hellgrau) */
            border: hidden !important;                                               /* Inaktiver Tab: Rahmen ausblenden */
        /*  border: 1px solid #D4D4D4 !important;   */                                  /* Inaktiver Tab: Rahmen Breite, Art und Farbe */
            border-radius: 18px 18px 0px 0px !important;
        }
   
        .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, 0.7) !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 Hafern 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: rgba(255, 255, 255, 0.9) !important;                             /* Weiß, nur leicht tranzparent, für ALLE   */
    }
    /*---------------------------------------------------*/
    /***************** 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;
        -moz-image-region: rect(2px, 15px, 16px, 1px) !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;    
    }
}

Alles anzeigen

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

So?

Andreas! Was denkst Du von mir?

Nein, so hatte ich es mir nicht vorgestellt!

"Hovern" soll ja schon sein, "grau", bei allen anderen Tabs, nur eben nicht beim Aktiven!

ABER, was mich viel mehr stört, dieser Schatten der Tabs!

Siehst Du das in Deinem Clip?

Den bekomme ich einfach nicht weg und das sieht so, na ja, bescheiden aus.

Horstmann

Zitat von Mira_Belle

Besser bekomme ich es nicht hin.
....
Irgendwie gefällt es mir nicht.

Es ist wirklich schwer zu sagen wie man es machen sollte, ohne zu wissen was für eine Optik du am Ende haben möchtest.

Aber hier ist etwas das du mal probieren könntest; den oberen Teil (ERSETZEN) müsstest du dir anpassen, der Rest ist dann halt Geschmackssache.

Sieht nicht dolle aus im Moment, ist nur ein Test, aber man kann es unendlich anpassen, man muss halt wie gesagt wissen wie das Ergebnis aussehen soll.

Das benötigte .svg für die unteren Ecken häng ich als Code unten an, das geht hier nicht mit dem Format.

CSS

/*  ERSETZEN */

:root {
    --toolbar-bgcolor: transparent !important;
}

#navigator-toolbox {
    background-image: url("icons/golder2.jpg") !important;
    background-position: top -270px center  !important;
    background-repeat: no-repeat !important;
}

#titlebar {
    order: 1 !important;
} 

/*  ERSETZEN ENDE  */



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

    --ug-radius: 22px;

    --ug-color-border: slategrey;

    --ug-color1: lightgrey;
    --ug-color_grad1: linear-gradient(to top, lightgrey 8px, white);

    --ug-color2: hsla(35, 100%, 75%, 1);
    --ug-color_grad2: linear-gradient(to top, hsla(35, 100%, 75%, 1) 8px, hsla(35, 100%, 100%, 1));

    --ug-color3: lightgrey;

    /*--ug-color_hova: linear-gradient(to top, lightgrey 4px, transparent 26px);*/

    --ug-color_hova: linear-gradient(to top, lightgrey 8px, white);

}



 #TabsToolbar {
    background-image: linear-gradient(to top, 
      var(--ug-color3) 5px, var(--ug-color-border) 5px 6px, transparent 6px) !important;
    /*outline: 1px solid grey !important;
    outline-offset: -1px !important;*/
} 

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

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


/* tabs base */

.tabbrowser-tab .tab-background {
    /*background: var(--ug-color_grad1) !important;*/
    /*stroke: var(--ug-color-border) !important;*/
    /*fill: var(--ug-color1) !important;*/
    fill: transparent !important;
}

/* tabs selected */

.tabbrowser-tab:is([selected], [multiselected]) .tab-background {
    background: var(--ug-color_grad2) !important;
    fill: var(--ug-color2) !important;
    stroke: var(--ug-color-border) !important;
    box-shadow: 1px -1px var(--ug-color-border),
                        -1px -1px var(--ug-color-border) !important;
}

/* tabs unselected hover */

.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background {
    background: var(--ug-color_hova) !important;
    fill: var(--ug-color1) !important;
    stroke: var(--ug-color-border) !important;
    box-shadow: 1px -1px var(--ug-color-border),
                        -1px -1px var(--ug-color-border) !important;
}


/* tabs bottom corners */

.tabbrowser-tab:not([pinned]) .tab-background::before {
    -moz-context-properties: fill, stroke, stroke-opacity !important;
    content: url(icons/Tab-corner-left.svg);
    width: 16px !important;
    height: 16px !important;
    position: relative;
    top: 19px;
    right: 16px;
}

.tabbrowser-tab:not([pinned]) .tab-background::after {
    -moz-context-properties: fill, stroke, stroke-opacity !important;
    content: url(icons/Tab-corner-left.svg);
    width: 16px !important;
    height: 16px !important;
    position: relative;
    top: -1px;
    left: 100%;
    transform: scaleX(-1) !important;
}

/* tabs distance */

.tabbrowser-tab:not([pinned]) {
    padding-inline: 16px !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 {
    background: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

Tab-corner-left.svg :

Code

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"/>
  <path d="M0 16 A16 16 0 0 0 16 0" fill="transparent" stroke="context-stroke" stroke-width="1"/>

</svg>

Oder du kannst es hier runterladen (nettes Tool auch), und dann halt zu Tab-corner-left.svg umbenennen.

.DeJaVu

Wie oben bereits geschrieben, wurden die Ecken mit Grafiken erstellt, rechts, links, dazwischen, also mindestens drei. Wie genau, dazu müsstest du dir einen alten Firefox damit herunterladen und analysieren. Was du da machst, sind lediglich runde Ecken erstellen, die aber keine Überlappung wie früher erstellen. Firefox hatte auch unterschiedlich runde Tabs. Mal wie Chrome, dann wieder leicht gerundet oben und unten

First Look Firefox 4.0 - Tabs are Looking Like Google Chrome

Firefox 4.0 is coming next year but here is the screenshot of firefox 4.0 on windows 7 and vista. It is looking similar to google chrome browser with tabs and…

www.clickonf5.org

Firefox Rolls Out Biggest Design Overhaul in 3 Years

mashable.com

Proton hatte alle Ecken abgerundet, das ist heute noch so. Hier ist das eckig dank ArisCSS.

Horstmann

Zitat von .DeJaVu

Wie oben bereits geschrieben, wurden die Ecken mit Grafiken erstellt, rechts, links, dazwischen, also mindestens drei.

Danke für die Links.

Als Grafik braucht man generell eigentlich nur eine; das einzige Problem sind abgerundete Umrandungen, die sind recht kompliziert zu bauen, und rendern evtl. nicht sauber wenn man es nicht komplett mit Grafiken macht.

2002Andreas

So sah das mal aus:

Mit diesen Grafiken:

Code

background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
                            url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
                            url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);

Und so der Code dazu:

Code

 #tabbrowser-tabs::before {
    background-image:
      url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
      url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
      url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
  }

Horstmann

Zitat von 2002Andreas

So sah das mal aus:
...
Mit diesen Grafiken: ...
Und so der Code dazu: ...

2002Andreas

Und hier die 3 Grafiken dafür von damals:

Grafiken.zip

Mira_Belle

Hi,

die Abbildungen von 2002Andreas, sowie die im zweiten Link von .DeJaVu

sind in etwa so, wie ich es mir vorgestellt habe.

Mit "Bildchen" bekomme ich es einfach nicht hin.

Nun werde ich versuchen, die Vektorgrafiken entsprechend zu bearbeiten.

Das Problem ist, dass sich immer irgendwelche "Elemente" überschneiden und das schaut dann wirklich grauenhaft aus.

Werde also noch etwas herumbasteln, sofern mir das z.Z. möglich ist.

Hat ja Zeit.