1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Horstmann

Beiträge von Horstmann

  • Tabform

    • Horstmann
    • 9. November 2023 um 20:58
    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! :thumbup: :)

  • Tabform

    • Horstmann
    • 9. November 2023 um 17:19
    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.

    ;)

  • Tabform

    • Horstmann
    • 9. November 2023 um 16:51
    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
  • Tabform

    • Horstmann
    • 8. November 2023 um 23:14

    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

  • Tabform

    • Horstmann
    • 8. November 2023 um 15:45
    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:

  • Tabform

    • Horstmann
    • 8. November 2023 um 15:20
    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! :)

  • Tabform

    • Horstmann
    • 8. November 2023 um 15:17
    Zitat von Mira_Belle

    Ich habe in "meinem" Code einfach mal die Selektoren

    Zeile 185

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

    gegen

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

    getauscht.

    Funktioniert :!:

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

    Funktioniert auch.

    Alles anzeigen

    Ahh, danke für die Rückmeldung! :)

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

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

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

  • Tabform

    • Horstmann
    • 8. November 2023 um 15:07
    Zitat von 2002Andreas

    Ergibt hier:

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

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

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

    Oder es ist ein OS Ding? :/

    Wenn ich dich nochmal belästigen dürfte: ;)

    CSS
    /*** Curved tabs beta #1d5 ***/
    
    
    /*** Allgemeine Anpassungen ***/
    
    :root {
    
    /* Tabs bar height adjust */
        /*--tab-block-margin: 4px !important;*/
        --tab-block-margin: 2px !important;
        --tab-min-height: 36px !important;
    
    /* Ecken ohne Svg /  Radius */
        --ug-radius: 20px;
    
    /* Rand Farben: Borders */
    
    /* Rand not selected */
        --ug-color-border: hsla(0, 0%, 33%, 0.5);                                    /* unselected Kante Tab 83 */
        --ug-stroke: var(--ug-color-border);                                             /* unselected Kante Svg */
        --ug-kante_hova: hsla(0, 0%, 43%, 0.65);                        /* unselected alle Kanten hover 93 */
    
    /* Rand selected , multiselected */
        --ug-color-border_select: hsla(0, 0%, 43%, 0.75);                            /* selected Kante Tab */
        --ug-stroke_select:  var(--ug-color-border_select);                           /* selected Kante Svg */
        --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8);           /* multiselected alle Kanten hover 100 */
    
    /*  Farben Tabs Hintergrund:  */
        --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
        --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
        --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */
    
    /* Tab Leiste Kante unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    
        /*--tabs-navbar-shadow-size: 0 !important;*/
    }
    
     #TabsToolbar {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    }
    
    /** Distance between tabs **/
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    /*** Allgemeine Anpassungen Ende ***/
    
    
    /* Tab Leiste Kante unten */
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 2px, transparent 2px) !important;
    } 
    
    /* buttons adjust size, position */
    
    /* Buttons smaller by 2px */
    #TabsToolbar {
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    /* Move buttons up/down, optional, OFF */
    /*
    #TabsToolbar toolbarbutton {
        margin-top: -1px !important;
    }
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    /* adjust tab content */
    .tab-content {
        margin-top: 2px !important;
        padding-inline: 12px 11px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-close-button {
        border-radius: 50% !important;
        display: flex !important;
    }
    .tab-close-button:hover {
        /*outline: none !important;*/
        outline: 1px solid var(--button-active-bgcolor) !important;
        outline-offset: -1px !important;
        background-color: var(--button-hover-bgcolor) !important;
    }
    
    
    /* Space for corner first/last tab, overflow bug fix */
    /* Test #2 */
    .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        padding-left: calc(var(--ug-corner-size) / 2) !important;
    }
    .tabbrowser-tab:not([pinned]):last-of-type {
        padding-right: calc(var(--ug-corner-size) / 2) !important;
    }
    
    /* New Tab (+) button, not overflow (+) button */
    
    /* Button rund, Icon Position Höhe angepasst */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
        padding-block: 7px 9px !important;
    }
    
    /* Position, closer to last tab */
    .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
        margin-inline: -14px !important;
        z-index: 2 !important;
    }
    
    /* New Tab (+) button hover outline */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        /*outline: 1px solid var(--ug-color-border) !important;
        outline-offset: -1px !important;*/
        box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
    }
    
    
                                                               /*** Tabs base ***/
    
    /* tabs connected bottom */
    
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    
    /*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /* selected , pinned tabs */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    /* Tab selected seitliche border weg  */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /* Tab nach selected tab komplett rund, ohne Ecken */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    /* letzte tab Ecken beidseitig, ausser kommt nach selected tab */
    
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
                                                              /***  COLORS  ***/
    /* Basis */
    
    .tabbrowser-tab .tab-background {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        outline: none !important;
        box-shadow: none !important;
        background-color: var(--ug-color1) !important;
        border-color: var(--ug-color-border) !important;
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1) !important;
    }
    
    /* Colors, outlines: selected / multiselected / hover */
    
    /* tabs selected base */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        stroke: var(--ug-stroke_select) !important;
        border-color: var(--ug-color-border_select) !important;
        fill: var(--ug-color2) !important;
    }
    
    /* tabs multiselected */
    .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        background-color: var(--ug-color2-multi) !important;
        fill: var(--ug-color2-multi) !important;
    }
    
    /* tabs multiselected hover */
    .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
        background-color: var(--ug-color_multi_hova) !important;
        fill: var(--ug-color_multi_hova) !important;
        stroke: var(--ug-kante_hova_select) !important;
        border-color: var(--ug-kante_hova_select) !important;
    }
    
    /* tabs unselected hover */
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
        /*stroke: var(--ug-stroke_select) !important;*/
        stroke: var(--ug-kante_hova) !important;
        border-color: var(--ug-kante_hova) !important;
    }
    
    
                                                          /***  tabs corners  ***/
    
    /*  base  */
    
    #TabsToolbar {
        --ug-corner-size: var(--tab-min-height);
    }
    
    .tabbrowser-tab .tab-background::before, 
    .tabbrowser-tab .tab-background::after {
        content: "";
        position: absolute;
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        width: var(--ug-corner-size) !important;
        height: var(--ug-corner-size) !important;
        background-size: var(--ug-corner-size) !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    }
    
    /*  left  */
    .tabbrowser-tab .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
    }
    
    /*  right  */
    
    .tabbrowser-tab[visuallyselected] .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
        transform: scaleX(-1) !important;
    }
    
    .tabbrowser-tab:last-of-type .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
        transform: scaleX(-1) !important;
    }
    
    
    .tabbrowser-tab[pinned] .tab-background::before, 
    .tabbrowser-tab[pinned] .tab-background::after {
        display: none !important;
    }
    Alles anzeigen
  • Tabform

    • Horstmann
    • 8. November 2023 um 14:34

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

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

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

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

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

    CSS
    /*** Curved tabs beta #1d5 ***/
    
    
    /*** Allgemeine Anpassungen ***/
    
    :root {
    
    /* Tabs bar height adjust */
        /*--tab-block-margin: 4px !important;*/
        --tab-block-margin: 2px !important;
        --tab-min-height: 36px !important;
    
    /* Ecken ohne Svg /  Radius */
        --ug-radius: 20px;
    
    /* Rand Farben: Borders */
    
    /* Rand not selected */
        --ug-color-border: hsla(0, 0%, 33%, 0.5);                                    /* unselected Kante Tab 83 */
        --ug-stroke: var(--ug-color-border);                                             /* unselected Kante Svg */
        --ug-kante_hova: hsla(0, 0%, 43%, 0.65);                        /* unselected alle Kanten hover 93 */
    
    /* Rand selected , multiselected */
        --ug-color-border_select: hsla(0, 0%, 43%, 0.75);                            /* selected Kante Tab */
        --ug-stroke_select:  var(--ug-color-border_select);                           /* selected Kante Svg */
        --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8);           /* multiselected alle Kanten hover 100 */
    
    /*  Farben Tabs Hintergrund:  */
        --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
        --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
        --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */
    
    /* Tab Leiste Kante unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    
        /*--tabs-navbar-shadow-size: 0 !important;*/
    }
    
     #TabsToolbar {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    }
    
    /** Distance between tabs **/
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    /*** Allgemeine Anpassungen Ende ***/
    
    
    /* Tab Leiste Kante unten */
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 2px, transparent 2px) !important;
    } 
    
    /* buttons adjust size, position */
    
    /* Buttons smaller by 2px */
    #TabsToolbar {
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    /* Move buttons up/down, optional, OFF */
    /*
    #TabsToolbar toolbarbutton {
        margin-top: -1px !important;
    }
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    /* adjust tab content */
    .tab-content {
        margin-top: 2px !important;
        padding-inline: 12px 11px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-close-button {
        border-radius: 50% !important;
        display: flex !important;
    }
    .tab-close-button:hover {
        /*outline: none !important;*/
        outline: 1px solid var(--button-active-bgcolor) !important;
        outline-offset: -1px !important;
        background-color: var(--button-hover-bgcolor) !important;
    }
    
    
    /* Space for corner first/last tab, overflow bug fix */
    /* Test #2 */
    .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        padding-left: calc(var(--ug-corner-size) / 2) !important;
    }
    .tabbrowser-tab:not([pinned]):last-of-type {
        padding-right: calc(var(--ug-corner-size) / 2) !important;
    }
    
    /* New Tab (+) button, not overflow (+) button */
    
    /* Button rund, Icon Position Höhe angepasst */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
        padding-block: 7px 9px !important;
    }
    
    /* Position, closer to last tab */
    #tabbrowser-arrowscrollbox-periphery {
        margin-inline: -14px !important;
        z-index: 2 !important;
    }
    
    /* New Tab (+) button hover outline */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        /*outline: 1px solid var(--ug-color-border) !important;
        outline-offset: -1px !important;*/
        box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
    }
    
    
                                                               /*** Tabs base ***/
    
    /* tabs connected bottom */
    
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    
    /*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /* selected , pinned tabs */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    /* Tab selected seitliche border weg  */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /* Tab nach selected tab komplett rund, ohne Ecken */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    /* letzte tab Ecken beidseitig, ausser kommt nach selected tab */
    
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
                                                              /***  COLORS  ***/
    /* Basis */
    
    .tabbrowser-tab .tab-background {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        outline: none !important;
        box-shadow: none !important;
        background-color: var(--ug-color1) !important;
        border-color: var(--ug-color-border) !important;
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1) !important;
    }
    
    /* Colors, outlines: selected / multiselected / hover */
    
    /* tabs selected base */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        stroke: var(--ug-stroke_select) !important;
        border-color: var(--ug-color-border_select) !important;
        fill: var(--ug-color2) !important;
    }
    
    /* tabs multiselected */
    .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        background-color: var(--ug-color2-multi) !important;
        fill: var(--ug-color2-multi) !important;
    }
    
    /* tabs multiselected hover */
    .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
        background-color: var(--ug-color_multi_hova) !important;
        fill: var(--ug-color_multi_hova) !important;
        stroke: var(--ug-kante_hova_select) !important;
        border-color: var(--ug-kante_hova_select) !important;
    }
    
    /* tabs unselected hover */
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
        /*stroke: var(--ug-stroke_select) !important;*/
        stroke: var(--ug-kante_hova) !important;
        border-color: var(--ug-kante_hova) !important;
    }
    
    
                                                          /***  tabs corners  ***/
    
    /*  base  */
    
    #TabsToolbar {
        --ug-corner-size: var(--tab-min-height);
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        position: absolute;
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        width: var(--ug-corner-size) !important;
        height: var(--ug-corner-size) !important;
        background-size: var(--ug-corner-size) !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    }
    
    /*  left  */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
    }
    
    /*  right  */
    
    .tabbrowser-tab[visuallyselected] .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
        transform: scaleX(-1) !important;
    }
    
    .tabbrowser-tab:last-of-type .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
        transform: scaleX(-1) !important;
    }
    Alles anzeigen

    tab_corner_ug.svg.zip

  • Tabform

    • Horstmann
    • 8. November 2023 um 06:28
    Zitat von Sören Hentzschel

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

    Danke! :)

  • Tabform

    • Horstmann
    • 7. November 2023 um 20:17
    Zitat von Mira_Belle

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

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

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

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

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

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

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

  • Tabform

    • Horstmann
    • 7. November 2023 um 19:56
    Zitat von 2002Andreas
    Zitat von Horstmann

    Testen für 119+ vorschlagen

    Ergibt hier:

    Linke Tab ist aktiv.

    Danke nochmal.

    Funktioniert also nicht...

  • Tabform

    • Horstmann
    • 7. November 2023 um 18:23
    Zitat von Mira_Belle

    Genau das ist es!

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

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

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

    Misst, wie erkläre ich das?

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

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

    Alles anzeigen

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

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

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

    CSS
    /*** Curved tabs beta #1d ***/
    
    
    /*** Allgemeine Anpassungen ***/
    
    :root {
    
    /* Tabs bar height adjust */
        /*--tab-block-margin: 4px !important;*/
        --tab-block-margin: 2px !important;
        --tab-min-height: 36px !important;
    
    /* Ecken ohne Svg /  Radius */
        --ug-radius: 20px;
    
    /* Rand Farben: Borders */
    
    /* Rand not selected */
        --ug-color-border: hsla(0, 0%, 83%, 0.5);                                    /* unselected Kante Tab */
        --ug-stroke: var(--ug-color-border);                                             /* unselected Kante Svg */
        --ug-kante_hova: hsla(0, 0%, 93%, 0.65);                        /* unselected alle Kanten hover */
    
    /* Rand selected , multiselected */
        --ug-color-border_select: hsla(0, 0%, 93%, 0.75);                            /* selected Kante Tab */
        --ug-stroke_select:  var(--ug-color-border_select);                           /* selected Kante Svg */
        --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);           /* multiselected alle Kanten hover */
    
    /*  Farben Tabs Hintergrund:  */
        --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
        --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
        --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */
    
    /* Tab Leiste Kante unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    
        /*--tabs-navbar-shadow-size: 0 !important;*/
    }
    
     #TabsToolbar {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    }
    
    /** Distance between tabs **/
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    /*** Allgemeine Anpassungen Ende ***/
    
    
    /* Tab Leiste Kante unten */
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 2px, transparent 2px) !important;
    } 
    
    /* buttons adjust size, position */
    
    /* Buttons smaller by 2px */
    #TabsToolbar {
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    /* Move buttons up/down, optional, OFF */
    /*
    #TabsToolbar toolbarbutton {
        margin-top: -1px !important;
    }
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    /* adjust tab content */
    .tab-content {
        margin-top: 2px !important;
        padding-inline: 12px 11px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    .tab-close-button {
        border-radius: 50% !important;
        disply: flex !important;
    }
    .tab-close-button:hover {
        /*outline: none !important;*/
        outline: 1px solid var(--button-active-bgcolor) !important;
        outline-offset: -1px !important;
        background-color: var(--button-hover-bgcolor) !important;
    }
    
    
    /* Space for corner first/last tab, overflow bug fix */
    /* Test #2 */
    #TabsToolbar .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        padding-left: calc(var(--ug-corner-size) / 2) !important;
    }
    #TabsToolbar .tabbrowser-tab:not([pinned]):last-of-type {
        padding-right: calc(var(--ug-corner-size) / 2) !important;
    }
    
    /* New Tab (+) button, not overflow (+) button */
    
    /* Button rund, Icon Position Höhe angepasst */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
        padding-block: 7px 9px !important;
    }
    
    /* Position, closer to last tab */
    #tabbrowser-arrowscrollbox-periphery {
        margin-inline: -14px !important;
        z-index: 2 !important;
    }
    
    /* New Tab (+) button hover outline */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        /*outline: 1px solid var(--ug-color-border) !important;
        outline-offset: -1px !important;*/
        box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
    }
    
    
                                                               /*** Tabs base ***/
    
    /* tabs connected bottom */
    
    #TabsToolbar .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    
    /*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/
    
    /*   basis   */
    #TabsToolbar .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid !important;
        border-bottom: none !important;
    }
    
    #TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /* selected , pinned tabs */
    #TabsToolbar .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    /* Tab selected seitliche border weg  */
    #TabsToolbar .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /* Tab nach selected tab komplett rund, ohne Ecken */
    #TabsToolbar .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    #TabsToolbar .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    /* letzte tab Ecken beidseitig, ausser kommt nach selected tab */
    
    #TabsToolbar .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    #TabsToolbar .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
                                                              /***  COLORS  ***/
    /* Basis */
    
    #TabsToolbar .tabbrowser-tab .tab-background {
        outline: none !important;
        box-shadow: none !important;
        background-color: var(--ug-color1) !important;
        border-color: var(--ug-color-border) !important;
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1) !important;
    }
    
    /* Colors, outlines: selected / multiselected / hover */
    
    /* tabs selected base */
    #TabsToolbar .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        stroke: var(--ug-stroke_select) !important;
        border-color: var(--ug-color-border_select) !important;
        fill: var(--ug-color2) !important;
    }
    
    /* tabs multiselected */
    #TabsToolbar .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        background-color: var(--ug-color2-multi) !important;
        fill: var(--ug-color2-multi) !important;
    }
    
    /* tabs multiselected hover */
    #TabsToolbar .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
        background-color: var(--ug-color_multi_hova) !important;
        fill: var(--ug-color_multi_hova) !important;
        stroke: var(--ug-kante_hova_select) !important;
        border-color: var(--ug-kante_hova_select) !important;
    }
    
    /* tabs unselected hover */
    #TabsToolbar .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
        /*stroke: var(--ug-stroke_select) !important;*/
        stroke: var(--ug-kante_hova) !important;
        border-color: var(--ug-kante_hova) !important;
    }
    
    
                                                          /***  tabs corners  ***/
    
    /*  base  */
    
    #TabsToolbar {
        --ug-corner-size: var(--tab-min-height);
    }
    
    #TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::before, 
    #TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        position: absolute;
        width: var(--ug-corner-size) !important;
        height: var(--ug-corner-size) !important;
        background-size: var(--ug-corner-size) !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        mask-image: linear-gradient(215deg, transparent, black 18px) !important;
    }
    
    /*  left  */
    #TabsToolbar .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
    }
    
    /*  right  */
    #TabsToolbar .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/tab_corner_ug.svg) !important;
        transform: scaleX(-1) !important;
    }
    
    
    #TabsToolbar .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
    }
    Alles anzeigen
  • Tabform

    • Horstmann
    • 7. November 2023 um 18:08
    Zitat von 2002Andreas
    Zitat von Mira_Belle

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

    Der erst ist aktiv.

    Der dritte:

    Das ist in Fx 119, korrekt? :/

  • Tabform

    • Horstmann
    • 7. November 2023 um 16:55
    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Bei mir in der 115esr funktionieren die .svgs auch ohne svg.context-properties.content.enabled auf true zu setzen; anscheinend benötigt man diese Option aber für 119. :/


    Was Mist ist, weil ich mich vage daran erinnere, dass dadurch möglicherweise Sicherheitsrisiken entstehen können. X/

    Womit uns vielleicht Sören Hentzschel weiterhelfen könnte? ;)

    Wenn ich dazu etwas sagen soll, bitte ein einfaches Test-Szenario bereitstellen, welches ich prüfen kann. Ich möchte mich nicht durch vier Seiten durcharbeiten, bis ich weiß, worum es bei dem Problem geht. Und wenn da noch ganz viele andere Änderungen dran hängen, die mit dem Problem nichts zu tun haben, hilft mir das auch nicht, den Überblick zu behalten. Danke. ;)

    Der Code und die Grafik, finden sich hier.

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

    Und nur falls ja, ob du einen anderen Weg kennst, .svg Properties (context-fill, context-stroke etc.) von eigenen .svg Grafik mit CSS zu steuern, ohne diese Option zu aktivieren.

    In meinem 115esr sind .svg Properties erlaubt für eigene .svg Grafiken für den Grossteil des UI, ohne svg.context-properties.content.enabled zu benutzen, aber nicht für externe .svg Grafiken, falls ich das richtig interpretiere.

    Die Frage stellt sich deshalb, weil ohne die Benutzung von .svg Properties wie eben context-fill oder context-strok , eigene .svg Grafiken nur eingeschränkt nutzbar wären.


    Zitat von Mira_Belle

    Neu getestet! Ich habe nun nur noch den Fehler mit der fehlenden Grafik bei aktivem Tab,

    wenn dieser nicht der Letzte ist!

    Ich sehe das auch bei den Screenshots von Andreas - ausser in denen von 115esr ... :/

    Jede selektierte Tab muss rechts und links die Grafik haben, egal wo sie positioniert ist, hat es bei mir auch...

    Hat es mit früheren Code Versionen bei dir funktioniert, oder gab es das gleiche Problem?

    Hmm, schau ich mir an...

  • Tabform

    • Horstmann
    • 7. November 2023 um 15:36
    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Wärst Du mal so lieb und könntest Du auch mal testen?

    Na klar ;)

    Vielen Dank für den Test! :)

    Bei mir in der 115esr funktionieren die .svgs auch ohne svg.context-properties.content.enabled auf true zu setzen, das hatte ich schon am Anfang getestet; anscheinend benötigt man diese Option aber für 119. :/

    Was Mist ist, weil ich mich vage daran erinnere, dass dadurch möglicherweise Sicherheitsrisiken entstehen können. X/

    Womit uns vielleicht Sören Hentzschel weiterhelfen könnte? ;)

    Zitat von Mira_Belle

    Im Hauptprofil sowie in dessen Kopie funktioniert es ja auch.

    Ich meine mich erinnern zu können, dass da eine Einstellung unter about:conig gemacht werden musste.

    Bin mir da aber nicht so sicher.

    Ist aber auch erst einmal Wurscht, es soll ja um den Code gehen und die Ungereimtheiten die damit auftreten.

    Kann ja sein, wie Du schon vermutest, dass da die Firefoxversionen einen Unterschied machen.

    Und das könnte dann auch des Rätsels Lösung sein, in dem von mir angesprochenen Bug, der ja vielleicht gar keiner ist. ;)

    Alles anzeigen

    Danke für die Erläuterung :) - schaut von meiner Seite so aus, als ob Code und Grafik ok wären, aber eben die erwähnte Option aktiviert sein muss für Fx119.

    Ich bin u.a. dadurch auf die mögliche Problematik aufmerksam geworden.

    Weil ich momentan auf meinem alten Mac nur 115esr benutzen kann, kann ich das Problem leider nicht weiter verfolgen... X/

  • Tabform

    • Horstmann
    • 7. November 2023 um 14:38
    Zitat von Mira_Belle

    Habe ich ein neues cleanes Profil erstellt und für CSS fit gemacht.

    Ich habe einen hellen Hintergrund gewählt, damit man besser sehen kann, dass da die Vektorgrafiken

    nicht transparent werden.

    Denke aber, dass es daran liegen könnte, dass in about:config eine Einstellung dafür getätigt werden muss.

    Aber darum soll es gar nicht gehen!

    Zum Bild.

    Erste "Zeile", erster Tab aktiv, rechte Grafik fehlt.

    Zweite "Zeile", zweiter Tab aktiv, rechte Grafik fehlt.

    Dritte "Zeile", letzter Tab aktiv.

    Alles anzeigen

    Danke für's Testen! :)

    In deinem Testprofil, könntest mal probieren in about:config die Option svg.context-properties.content.enabled auf true zu setzen?

    Bei mir funktioniert der Code prima mit allen Themes, allerdings auf Mac mit 115esr.

    Ich habe schon Kommentare gesehen, die nahelegen dass es bei Fx 119 Unterschiede zum Verhalten von eigenen .svg Bilder kommen kann, kann es aber hier leider nicht testen.

    Allerdings haben die anderen .svgs doch vorher bei dir funktioniert, korrekt?

    Die Grafik in der letzten Version ist eigentlich identisch mit der direkt davor, nur umbenannt.

  • USB-Stick Aufnahmegeschwindigkeit

    • Horstmann
    • 6. November 2023 um 22:06
    Zitat von Boersenfeger

    Hier spart es mir dann Platz auf dem Schreibtisch!

    Schnellen Stick finde ich gut

    Ein kurzes Kabel ist zu viel?

    Wie klein ist dein Schreibtisch? ;)

  • USB-Stick Aufnahmegeschwindigkeit

    • Horstmann
    • 6. November 2023 um 22:05
    Zitat von .DeJaVu

    Was meinst, evtl sowas?

    https://www.elefacts.de/test-schneller…ick_mit_m.2_ssd

    Sowas hatte Andreas ja schon, nur eben "lahm". Aber die Raten sind ähnlich beim jetzigen Stick, nur der Stick ist nicht so teuer wie die Konstruktion.

    Irgenwann sollte man sich evtl. auch Gedanken über die mechanische Verletzbarkeit des Anschlusses machen.

    Ein Stick ist ja nur eine Festplatte ohne Kabel am Stecker; je grösser das Ding wird, desto leichter ist es abzubrechen.

    Die als Vergleich abgebildeten herkömmlichen USB Sticks in dem Artikel sind schon zu groß um am mobilen Laptop sicher benutzt zu werden (und gibt es in der Klasse dieser Sticks um einiges kleiner), das M.2 Ding ist riesig für die Anwendung.

    Ich würde persönlich eher eine Variante mit Kabel nehmen, sicherer und flexibler.

    Ich muss aber zugeben, mein Hauptspeicher extern ist ein 5 Kilo Klotz mit 5 HDDs drinnen, der auch nicht auf dem Schreibtisch steht. ;)

    Der Rest läuft über einen Hub.

  • USB-Stick Aufnahmegeschwindigkeit

    • Horstmann
    • 6. November 2023 um 20:09

    Falls die Frage noch nicht aufgekommen ist - muss es denn ein Stick sein? :/

    Es gibt ja viele externe Festplatten in jeder möglichen Konfiguration, oder Festplattengehäuse die man selber bestücken kann.

    Nicht so billig wie USB Sticks, aber vermutlich generell mit besserem - und schnellerem - USB Interface und Festplattenrarchitektur.

    USB Sticks gibt's ja eigentlich nur weil sie klein sind, nicht als Hochleistungsalternative.

    Selber habe ich hier eine Ladung externer Festplattengehäuse, meist sogar nur für/mit 2,5" SATA SSDs, die laufen wie Schmitzkatz. ;)

Unterstütze uns!

Jährlich (2025)

101,9 %

101,9% (662,48 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon