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
    • 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. ;)

  • Tabform

    • Horstmann
    • 6. November 2023 um 18:09

    Falls es jemand mal testen möchte, hier eine aktuellere Version.

    Die Farbanpassungen sind erweitert, und komplett anpassbar; wie es momentan eingestellt ist funktioniert es am besten mit einem dunklen Theme.

    Kann man aber beliebig ändern über die Variablen oben im :root Block.

    Die Grafik hängt unten an, der Dateipfad dafür sieht hier einen Ordner icons im Ordner mit der CSS Datei vor, in der dieser Code enthalten ist; kann man ebenfalls nach Belieben ändern.

    Das Overflow Verhalten ist noch suboptimal, aber nur visuell.

    CSS
    /*** Curved tabs beta #1c ***/
    
    
    /*** 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%, 40%, 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 */
    .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 {
        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;
        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: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;
    }
    Alles anzeigen

    tab_corner_ug.svg.zip

  • Tabform

    • Horstmann
    • 5. November 2023 um 01:23

    Alles gut, ist ja nur eine Hobbyspielerei. :)

  • Tabform

    • Horstmann
    • 4. November 2023 um 23:12
    Zitat von Mira_Belle
    ...

    und der Bug, den ich schon weiter oben beschrieb, ist auch vorhanden


    Und dass ich unten die Variablen "wild verändert" habe, hat einen einfachen Grund.

    Die Rahmen wurden im originalen Code oft zweimal gebildet.

    Wurden jedoch die Farben der verschiedenen Variablen unterschiedlich definiert,

    sah das irgendwie nicht so dolle aus!

    Zuerst fiel mir das beim aktiven Tab auf, dann aber auch bei anderen Tabs.

    So kam es zu den Veränderungen.

    Alles anzeigen

    Welcher Bug, und die Doppeldarstellung - was immer das heissen mag - Probleme gibt's auch in einem Profil mit unverändertem Originalcode, und ohne anderes CSS/ Scripts mit CSS? :/

    Die Aussenkanten der Grafik und die der teils überlappenden Tabs an sich passen nicht aufeinander, wenn man zu grob an den Maßen dreht - oder an den Farben. ;)

    Hätte man sich anschauen können wenn man was davon gewusst und Screenshots gesehen hätte; aber da ausser uns sonst niemand das Ding getestet und kommentiert hat, ist es eh schwierig an möglichen Bugs zu schrauben.

    Egal, nochmal viel Spass mit dem Code, alles deins jetzt. :)

  • Tabform

    • Horstmann
    • 4. November 2023 um 16:30
    Zitat von Mira_Belle

    Selbstverständlich sollst Du meinen angepassten Code des Deinen nicht überarbeiten!

    Was die "Einstellung" angeht, zwecks Tableiste nach unten, das passt so.

    Habe ich in einem "jungfräulichen" Profil nochmals überprüft.

    In meiner Version Deines Codes sind noch ein paar kleine Bugs betreffend des Multiselect vorhanden.

    Stört mich jetzt weniger, aber wenn es mich überkommt, gehe ich da auch noch mal ran.

    Wenn ich jetzt nichts übersehen habe, war putzen, sollten alle Farben über Variablen definiert sein.

    Meine Variablen werden "global" in einer eigenen Datei festgelegt!

    Alles anzeigen

    Ok, gut dass es zumindest halbwegs klappt. 8)

    Was die Benutzung von Variablen angeht, mehr als reden kann ich nicht...

    Du hast sie wieder unten wild verändert, oben im :root Block fehlt die Hälfte meiner Variablen, das kann vermutlich so nicht sauber klappen, kein Wunder wenn es Probleme gibt. ?(

    Mein Hobbycode ist alles andere als perfekt, aber es gibt schon gute Gründe dafür dass er so geschrieben ist... :|

    Variablen ändern: oben hui, unten pfui! ;)

  • Tabform

    • Horstmann
    • 4. November 2023 um 13:37
    Zitat von Mira_Belle

    4:30 Uhr, wach, Gedanken kreisen, kann nicht mehr einschlafen!

    ABER ich habe ja diese Ablenkung. Danke.

    Der neue Code ist wirklich fein und ich habe ihn meinen Vorstellungen angepasst.

    Auch habe ich Neues entdeckt, eine Funktion, die ich nie nutzte!

    " Multiselekt" !

    Für was braucht man sowas? Egal!

    Leider ist da aber der Wurm drin.

    Denn wenn mehrere Tabs ausgewählt wurden und man dann auf einen Tab,

    aber eben nicht der aktive Tab, klickt, fehlt da eine Vektorgrafik.

    Und hier mal meine Version.

    CSS
    ........
    Alles anzeigen

    Wenn ich deinen Code bei mir benutze, nur die Dateipfade geändert, und im Kompaktmodus, sieht das hier so aus:

    Irgendwas scheinst du an anderer Stelle zu benutzen das querschlägt; es passt nicht, deine Farben habe ich teils auch nicht, aber multiselect funktioniert scheinbar, ist auch so eingebaut in meinem Code.

    Wäre auch gut jeweils einen Screenshot zu sehen, Bild/ 1000 Worte etc.. ;)

    Was ich nicht machen kann oder werde, ist deine Version von meinem Code anzupassen, schon gar nicht deine anderen CSS Codes die ich nicht kenne; du müsstest schon einigermassen dem was ich gebastelt habe folgen. ;)

    Aber - gute und schlechte Nachricht - teils schlechte vielleicht für dich, der Code ist komplett umgeschrieben, aber strukturell der gleiche.

    Gute Nachricht: der Code ist deutlich gerafft und viel übersichtlicher, und etwas besser kommentiert.

    Ein paar Bugs bin ich auch losgeworden; die Farben sind etwas umfangreicher - vor allem für Multiselect. :)

    Separat anpassbare Outlines für selektiert/unselektiert sind auch drin, und die hover Outline für den Plus Button.

    Ich benutze Multiselect auch selten, genauso wie angepinnte Tabs, aber man muss es berücksichten bei so einem Ding, wie auch das Overflow Gedöns (das noch etwas hakt...).

    Farben würde ich nur oben im Block mit den ganzen :root Einstellungen ändern, und nix dazu unten reinschreiben.

    Dafür hat man Variablen - nur die Quelle ändern, nie die Anwendung.

    Wenn da oben zB steht --ug-color1: hsla(270, 60%, 70%, 1);, dann mach daraus --ug-color1: var(--uc-color-orange-normal); oder so, um eine deiner anderen Farbe zu übernehmen, damit auch überall wo die Variable --ug-color1 benutzt wird das durchgehend angepasst wird.

    Zusätzliche Verläufe/ Schatten etc. kann man dann teils weiter unten einpflegen, aber das ist ein Thema für sich; kann ich gerne dabei helfen, aber das solltest du möglichst genau beschreiben und bebildern.

    Falls du einen Verlauf nach innen generell und in den Svgs möchtest, wie du mal erwähnt hattest und ich fast befürchte, gäb's hier 2 Links Links ; viel Spass ;) .

    Mein Bedarf an svg basteln ist mit der Eckengrafik schon bedient worden. :whistling:

    Geht auch anders mit Masken, Clipping etc., ein grobes Beispiel war in einem früheren Code schon drin, ist aber nichts für schwache Nerven.


    Hier denn nun der neue Code; bitte wie immer komplett übernehmen, Dateipfade bitte wieder anpassen und deine eigenen Zusätze ganz unten nach Bedarf hinzufügen; die Grafik ist die gleiche wie zuvor.

    (Code erneuert)

    CSS
    /*** Curved tabs test 5/11/2023***/
    
    
    /*** 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 / Svg Outlines */
    
    /* 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-stroke: hsla(0, 0%, 83%, 0.5);*/             /* unselected Kante Svg different, optional */
        --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-stroke_select:  hsla(0, 0%, 93%, 0.75);*/   /* selected Kante Svg different, optional  */
        --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%, 40%, 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;
    }
    .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;
    }
    
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css */
    
    :root:not([customizing]) .tabbrowser-tab:not([pinned]):last-of-type {
        /*margin-inline-end: 18px !important;
        margin-inline-end: 14px !important;*/
        margin-right: 11px !important;
    }
    
    /* Space for left corner first tab */
    .tabbrowser-tab:not([pinned]):first-of-type {
        margin-left: 9px !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;
    }
    /* minimaler Abstand zu Tabs, weniger = Bug! */
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
        padding-left: 0px !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;
    }
    
    /* weniger Abstand zu Tabs --> Bug!!! OFF!!! */
     /*
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
        margin-left: -8px !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 {
        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 aussen  ***/
    
    /*  base  */
    
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        position: absolute;
        --ug-corner-size: var(--tab-min-height);
        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_doppel_Test-1W2.svg) !important;
    }
    
    /*  right  */
    .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_doppel_Test-1W2.svg) !important;
        transform: scaleX(-1) !important;
    }
    Alles anzeigen

    tab_corner_doppel_Test-1W2.svg.zip

  • Tabform

    • Horstmann
    • 3. November 2023 um 23:12
    Zitat von Mira_Belle

    Hey Horstmann ,

    bist Du denn kirre?

    Weißt Du wie lange ich an Deinem Code gesessen habe, um auch nur zu erahnen, wie das alles funktioniert?

    Irgendwie habe ich es geschafft, ihn meinen Vorstellungen anzupassen

    und jetzt kommst Du mit einer noch geileren Version :!: :D

    Keine Sorge, der Code ist generell noch der gleiche in der Struktur, nur etwas aufgeräumter, und die Grafik ist hoffentlich besser. ;)

    Für den Neuer Tab (+) Button kannst du sowas probieren, das wäre dann nur für den Button ohne Tab Overflow; bei Overflow ist es ein anderer Button, auch wenn er genauso aussieht.

    Es gibt verschiedene Möglichkeiten das zu regeln; Farbe wäre dann wie der Rest der Umrandungen:

    CSS
    #tabbrowser-arrowscrollbox-periphery #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;
        padding-block: 7px 9px !important;
    }
  • Tabform

    • Horstmann
    • 3. November 2023 um 19:51

    So, einer geht noch; die Grafik hatte noch nicht sauber gepasst, ist jetzt ein einziges Bild und justiert, sollte jetzt hoffentlich besser aussehen.

    Noch ein paar Bugs beseitigt, Tableiste zart niedriger, was imo besser zu Kompaktmodus passt, und ein wenig aufgeräumt.

    Immer noch Testkram drin, aber alles auskommentiert.

    Das . svg hängt wieder unten dran, Dateipfade bitte anpassen, und viel Spass damit. :)

    CSS
    :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: Schatten, Borders / svgs */
        --ug-color-border: hsla(0, 0%, 83%, 0.5);
        --ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
        --ug-stroke: hsla(0, 0%, 83%, 0.5);
    
    
    /*  Farben tab hg:  basic / selected / multiselected / hover */
        --ug-color1: hsla(0, 0%, 83%, 0.25);
        --ug-color2:  hsla(35, 80%, 60%, 0.25);
        --ug-color2-multi:  hsla(35, 80%, 40%, 0.25);
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    }
    
    /* Tab Leiste Kante unten */
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 2px, transparent 2px) !important;
    } 
    
    
    /* buttons adjust position */
    
    /* kleiner by -x , 10px default normal */
    #TabsToolbar {
        /*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    /* Move buttons up/down, OFF */
    /*
    #TabsToolbar toolbarbutton {
        margin-top: -0px !important;
    }
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    /* Move tab content */
    .tab-content {
        margin-top: 1px !important;
    }
    
    
    /* tabs distance */
    
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    .tabbrowser-tab:not([pinned]):first-of-type {
        margin-inline-start: 9px !important;
    }
    
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css */
    
    :root:not([customizing]) .tabbrowser-tab:last-of-type {
        /*margin-inline-end: 18px !important;
        margin-inline-end: 14px !important;*/
        margin-inline-end: 11px !important;
    }
    
    /* close button, not overflow */
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
    }
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
        border-radius: 50% !important;
        padding-left: 0px !important;
    }
    /*
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
        margin-left: -8px !important;
    }
    */
    
                                                               /*** tabs base ***/
    
    /* tabs connected bottom, tab bar height reduced ?  */
    
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    .tabbrowser-tab .tab-background {
        outline: none !important;
        background-color: var(--ug-color1) !important;
        box-shadow: none !important;
        /*box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
        background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
    }
    .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        background-color: var(--ug-color2-multi) !important;
    }
    
    /* tabs unselected hover */
    
    .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
    }
    
                                                               /*** Tabs Radien, borders ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid var(--ug-color-border) !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    
    /*   selected  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /*   not selected -> nach selected  */
    
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /*   not selected last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    
    /*   not selected last -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
    
    
                                                               /***  tabs corners  ***/
    
    /*  base 38px height */
    
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        content: "";
        position: absolute;
    
        --ug-corner-size: calc(var(--tab-min-height) + 0px);
        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;
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1) !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_doppel_Test-1W2.svg) !important;
    }
    
    /*  right  */
    .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_doppel_Test-1W2.svg) !important;
        transform: scaleX(-1) !important;
    }
    
    
    /* fill colors selected / unselected hover */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
        fill: var(--ug-color2) !important;
    }
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
        fill: var(--ug-color_hova) !important;
    }
    
    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    
    
    
    
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
    .tab-content > .tab-close-button:hover {
        outline: none !important;
        background-color: rgba(255, 0, 0, 0.4) !important;                    /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;               /* Rot, glow */
    }
    Alles anzeigen

    Dateien

    tab_corner_doppel_Test-1W2.svg.zip 1,11 kB – 105 Downloads
  • Tabform

    • Horstmann
    • 2. November 2023 um 22:11
    Zitat von Mira_Belle

    Dein letzter Code funktioniert hervorragend und das auch im Kompaktmodus.

    Zitat von Mira_Belle

    Nun kann ich daran machen diesen Code auseinander zu pflücken, damit ich dahinterkomme,

    wie das alles zusammen hängt und funktioniert.

    Danach werde ich mir die Farbeinstellungen vornehmen.

    Prima, freut mich zu hören! :)

    War so ein Test aus Neugier, und ist mal wieder ausgeartet... ^^

    Du findest bestimmt noch einige viele Bugs, und wie gesagt kann ich die Leiste bestimmt noch etwas schmaler zimmern, aber ist halt wie so oft alles miteinander verbunden, und Fx hat auch noch seine Meinung dazu. ;) .

    Die Farben sind alle ganz oben als Variablen; kannst ja einfach mal für jede was Wildes eingeben, um zu schauen was die machen im Einzelnen.

    Ich muss eh nochmal ran um ein paar Sachen zu verschlanken, ist ja noch sehr testartig, und die Kompaktmodus Anpassung ist ziemlich grob; würde aber vorher lieber etwas Feedback haben.

    Selber benutze ich das Ganze nämlich nicht im Hauptprofil, das hab ich mir vor langem schon gemacht wie ich's mag, und bin so langsam etwas testmüde.

    Vielleicht hat ja sogar noch jemand anderes Lust das mal zu testen. :whistling:

  • Tabform

    • Horstmann
    • 2. November 2023 um 21:20
    Zitat von Mira_Belle

    Dein Code, OHNE Veränderung,

    OK, den Pfad angepasst!

    Deine Vektorgrafiken.

    Hier noch mal der Code, aus Beitrag #43, mit neuen Pfadangaben!

    Moment mal, ich sehe gerade du hast einen alten Code genommen, und evtl. die dalschen Grafiken dazu?

    Mein Verdacht ist immer noch dass du heimlich Kompaktmodus benutzt ;) , dafür passt natürlich nicht viel.

    Oder ähnliche CSS Modifikationen für Tabs, die ich ja nicht kennen kann; meines baut alles auf reguläres Fx in einem Testprofil auf.

    Ausser vielleicht das hier - bitte wieder komplett übernehmen, auch die neuen Grafiken von ganz unten; die Leiste kann ich dir noch uU schmaler machen, aber komplett für den seltsamen Kompaktmodus neu aufbauen bring ich nicht; evtl. geht's ja aber auch so schon halbwegs.

    Tableiste unten musst du selber einfügen, das werf ich komplett raus, und die Dateipfade wieder anpassen.

    CSS
    :root {
    
        --tab-block-margin: 4px !important;
        --tab-min-height: 36px !important;
    
    /* Ecken ohne svg/  Radius */
        /*--ug-radius: 18px;*/
        --ug-radius: 20px;
    
    /* Rand Farben: Schatten, Borders / svgs */
        --ug-color-border: hsla(0, 0%, 83%, 0.5);
        --ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
        --ug-stroke: hsla(0, 0%, 83%, 0.5);
    
    
    /*  Farben tab hg:  basic / selected / hover */
        --ug-color1: hsla(0, 0%, 83%, 0.25);
        --ug-color2:  hsla(35, 80%, 60%, 0.25);
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    }
    
    /* Tab Leiste Kante unten */
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 2px, transparent 2px) !important;
    } 
    
    
    /* buttons adjust position */
    
    /* kleiner by -x , 10px default normal */
    #TabsToolbar {
        /*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    #TabsToolbar toolbarbutton {
        margin-top: -0px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    /*
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    .tab-content {
        margin-top: 6px !important;
    }
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) {
       z-index: 2 !important;
    }
    
    
    /* tabs distance */
    
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    .tabbrowser-tab:not([pinned]):first-of-type {
        margin-inline-start: 9px !important;
    }
    
    
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    
    :root:not([customizing]) .tabbrowser-tab:last-of-type {
        /*margin-inline-end: 18px !important;
        margin-inline-end: 14px !important;*/
        margin-inline-end: 11px !important;
    }
    
    /* close button, not overflow */
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
    }
    
    /*
    :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
        margin-left: -8px !important;
    }
    */
                                                               /*** tabs base ***/
    
    
    /* tabs connected bottom, tab bar height reduced ?  */
    
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    .tabbrowser-tab .tab-background {
        background-color: var(--ug-color1) !important;
    
        /*box-shadow: none !important;*/
        box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
        /*background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
    
        outline: none !important;
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
    }
    
    /* tabs unselected hover */
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
    }
    
                                                               /*** tabs Radien, borders ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid var(--ug-color-border) !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    
    /*   selected  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /*   not selected -> nach selected  */
    
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /*   not selected last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    
    /*   not selected last -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
                                                               /***  tabs corners  ***/
    
    /*  base 38px height */
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        content: "";
    
        --ug-corner-size: calc(var(--tab-min-height) + 2px);
        width: var(--ug-corner-size) !important;
        height: var(--ug-corner-size) !important;
    
        position: absolute;
        bottom: -2px;
        background-size: calc(var(--ug-corner-size) / 2), calc(var(--ug-corner-size) / 2) !important;
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
    
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1, transparent) !important;
    }
    
    /*  left  */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: url(icons/Tab-corner-left2aTestB.svg),
                                        url(icons/Tab-corner-top2TestB.svg) !important;
        background-position: bottom left, top right 1px !important;
    }
    
    /*  right  */
    .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-left2aTestB.svg),
                                        url(icons/Tab-corner-top2TestB.svg) !important;
        background-position: bottom left, top right 1px !important;
        transform: scaleX(-1) !important;
    }
    
    
    /* fill colors selected / unselected hover */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
        fill: var(--ug-color2, transparent) !important;
    }
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
        fill: var(--ug-color_hova) !important;
    }
    
    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    
    
    
    
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
    .tab-content > .tab-close-button:hover {
        outline: none !important;
        background-color: rgba(255, 0, 0, 0.4) !important;                    /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;               /* Rot, glow */
    }
    Alles anzeigen

    icons.zip

  • Tabform

    • Horstmann
    • 2. November 2023 um 18:01
    Zitat von Mira_Belle

    8| :/ ||

    Dein Code, OHNE Veränderung,

    OK, den Pfad angepasst!

    Deine Vektorgrafiken.

    Hier noch mal der Code, aus Beitrag #43, mit neuen Pfadangaben!

    CSS
    /*  ERSETZEN  */
    
    #titlebar {
        order: 1 !important;
    } 
    
    /*  ERSETZEN ENDE  */

    Warum klappt das nicht?

    Wo mache ich was nicht richtig?

    Und warum ist bei diesem Code die Tableiste zwar "unten" aber dafür die "Nav-bar" ganz oben,

    wo doch die "toolbar-menubar" ganz oben und nicht in der Mitte stehen sollte.

    Ich brauche Zeit!

    Viel Zeit um alles auseinander zu plücken, sonst verstehe ich das nie.

    Alles anzeigen

    Schmeiss das raus was bei Ersetzen steht, das funktioniert bei dir nicht, benutz deinen eigenen Code für Tabs unten.

    Wo die Menüleiste ist geht aus dem Screenshot auch nicht hervor, und vermutlich benutzt du anderes CSS für Tabs das die Höhe manupuliert, oder evtl. sogar Kompakt Modus - das ginge gar nicht momentan.

  • Tabform

    • Horstmann
    • 2. November 2023 um 16:11
    Zitat von Mira_Belle

    Gib mir doch bitte mal Deine Vektorgrafiken.

    Tab-corner-left2a.svg & Tab-corner-top2.svg

    Die Grafiken sind ganz unten hier anghängt, hast du die benutzt?

    Gehören dann in den Ordner Icons im Profilordner, bzw den Ordener in dem die zugehörige CSS Datei ist.

    Was den Code angeht, ich denke nicht dass du nur einen Teil benutzen kannst, falls du das probiert hast.

    Zumindest für diesen Test ist das meiste miteinander verbunden, also alles oder nix. ;)

    Abgesehen von deinem Code für Tabs unten, wobei da auch nichts drin sein darf was die Tab Höhe etc. beeinflusst, sonst passt es nicht.

    In meinem Beispiel wird die Höhe der Tableiste auch etwas verringert; das kann ich rauseditieren und anderen Einträge universeller machen, aber erstmal ist es so im Testcode.

    Ich hätte hier noch einen leicht variierten Code, mit neuen .svgs; immer noch in der Testphase und etwas wirr; die Icons hänge ich als zip ganz unten an.

    CSS
    /*  ERSETZEN mit eigenem Code für Tabs unten  */ 
    
    #titlebar {
        order: 1 !important;
    } 
    
    /*  ERSETZEN ENDE  */
    
    
    /* only test outline for button position */
    
    /*
    :is(#scrollbutton-up, #scrollbutton-down) {
        outline: 1px solid white !important;
        outline-offset: -5px !important;
    }
    
    #TabsToolbar toolbarbutton > .toolbarbutton-icon, 
    #TabsToolbar toolbarbutton > .toolbarbutton-badge-stack {
        outline: 1px solid yellow !important;
        outline-offset: -1px !important;
    }
    
     #TabsToolbar {
        outline: 1px solid hsla(0, 0%, 100%, 0.75) !important;
        outline-offset: -13px !important;
    } 
    */
    
    
    :root {
    
    /* Ecken ohne svg/  Radius */
        /*--ug-radius: 18px;*/
        --ug-radius: 20px;
    
    /* Rand Farben: Schatten, Borders / svgs */
        --ug-color-border: hsla(0, 0%, 83%, 0.5);
        --ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
        --ug-stroke: hsla(0, 0%, 83%, 0.5);
    
    
    /*  Farben tab hg:  basic / selected / hover */
        --ug-color1: hsla(0, 0%, 83%, 0.25);
        --ug-color2:  hsla(35, 80%, 60%, 0.25);
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    }
    
    
    
    
     #TabsToolbar {
        -moz-context-properties: fill, stroke, stroke-opacity !important;
        background-image: linear-gradient(to top, 
            var(--ug-color3) 1px, transparent 1px) !important;
    } 
    
    
    /* buttons adjust position */
    
    
    /* kleiner by -x , 10px default normal */
    #TabsToolbar {
        /*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    
    #TabsToolbar toolbarbutton {
        margin-top: -0px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    /*
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */
    
    .tab-content {
        margin-top: 3px !important;
    }
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) {
       z-index: 2 !important;
    }
    
    
    /* tabs distance */
    
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    
    .tabbrowser-tab:last-of-type {
        /*margin-inline-end: 18px !important;*/
        margin-inline-end: 11px !important;
    }
    
    /* close button, not overflow */
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        /*margin-left: -14px !important;*/
        border-radius: 50% !important;
    }
    
    
                                                               /*** tabs base ***/
    
    
    /* tabs connected bottom, tab bar height reduced ?  */
    
    .tab-background {
        margin-block: 4px 0px !important;
        /*margin-block: 8px 0px !important;
        min-height: 40px !important;*/
    }
    
    .tabbrowser-tab .tab-background {
        background-color: var(--ug-color1) !important;
    
        /*box-shadow: none !important;*/
        box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
        /*background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
    
        /*border-image: linear-gradient(to top, 
                               var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0  !important;
        border-image-outset: 0 1px !important;*/
        fill: var(--ug-color1, transparent) !important;
        /*stroke: var(--ug-stroke) !important;*/
        outline: none !important;
        /*min-height: calc(var(--tab-min-height) - 1px) !important;*/
        /*box-shadow:  inset 0px 1px var(--ug-color-border) !important;*/
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        fill: var(--ug-color2, transparent) !important;
    }
    
    /* tabs unselected hover */
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
    }
    
                                                               /*** tabs Radien, borders ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid var(--ug-color-border) !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    
    /*   selected  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
        /*border: none !important;*/
    }
    
    /*   not selected -> nach selected  */
    
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /*   not selected last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    
    /*   not selected last -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
    
    
                                                               /***  tabs corners  ***/
    
    /*  base  */
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        width: 38px !important;
        height: 38px !important;
        position: absolute;
        bottom: -2px;
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
        stroke: var(--ug-stroke) !important;
    }
    
    /*  left  */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: -19px;
        background-image: url(icons/Tab-corner-left2aTest.svg),
                                        url(icons/Tab-corner-top2Test.svg) !important;
        background-position: bottom -0px left, top 0px right 1px !important;
        background-size: 19px, 19px !important;
    
        /*right: -298px;
        stroke-width: 6px !important;
        stroke: red !important;*/
    }
    
    /*  right  */
    .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
        right: -19px;
        background-image: url(icons/Tab-corner-left2aTest.svg),
                                        url(icons/Tab-corner-top2.svgTest) !important;
        background-position: bottom -0px left, top 0px right 1px !important;
        background-size: 19px, 19px !important;
        transform: scaleX(-1) !important;
    }
    
    
    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    
    
    
    
    /**   test  radial gradient  2d  soft outline / top / left / right / unten alles   **/
    
    /*
    .tabbrowser-tab:not([pinned])[selected] .tab-stack {
        background-image: linear-gradient(to bottom, var(--ug-stroke), transparent 10px) !important;
        background-repeat: no-repeat !important;
        background-size: calc(100% - 38px) 100% !important;
        background-position: top 4px center !important;
    }
    
    .tabbrowser-tab:not([pinned])[selected] .tab-stack::before {
        content: "";
        width: 72px !important;
        height: 36px !important;
        position: absolute;
        bottom: 4px;
        left: calc(-36px + 18px);
        background-image: 
            radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
            radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
        background-repeat: no-repeat !important;
        background-size: 72px 18px !important;
        background-position: bottom left, top left -35px !important;
    }
    
    .tabbrowser-tab:not([pinned])[selected] .tab-stack::after {
        content: "";
        width: 72px !important;
        height: 36px !important;
        position: absolute;
        bottom: 4px;
        right: calc(-36px + 18px);
        background-image: 
            radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
            radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
        background-repeat: no-repeat !important;
        background-size: 72px 18px !important;
        background-position: bottom left, top left -35px !important;
        transform: scaleX(-1) !important;
    }
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 4px, transparent 12px) !important;
    } 
    */
    
    
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
    .tab-content > .tab-close-button:hover {
        outline: none !important;
        background-color: rgba(255, 0, 0, 0.4) !important;                    /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;               /* Rot, glow */
    }
    Alles anzeigen

    icons.zip

  • Tabform

    • Horstmann
    • 1. November 2023 um 18:26
    Zitat von Mira_Belle

    Das ist das Hintergrundbild des Themes!

    Ist echt nicht schön, aber ich nutze ja den Firefox nie im Vollformat.

    Super getestet, das Theme. ;)

    Kannst das hier probieren (eine oder beide der Regeln), kommt aber bestimmt einigen anderen Themes in die Quere, und ich weisst nicht wie man es auf nur das eine Theme eingrenzen kann.

    CSS
    #navigator-toolbox {
        background-image: url(icons/orange-blue-images_fix.jpg) !important;
        /*background-position: right top -380px, var(--lwt-background-alignment) !important;*/
    }


    Für den anderen CSS Code habe ich noch das hier eingefügt, aber das ist generell ja nur ein grober Test:

    CSS
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    /* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css  */
    
    .tabbrowser-tab:last-of-type {
        margin-inline-end: 11px !important;
    }
  • Tabform

    • Horstmann
    • 1. November 2023 um 16:46
    Zitat von Mira_Belle

    Horstmann

    Du bist, was CSS angeht, wirklich richtig fit geworden. Super.

    Und es schaut richtig gut aus.

    So wie ich das derzeit sehe, habe ich noch so einige Schwierigkeiten.

    Denn so wie Dein Design, so soll das Meinige auch zum Schluss werden.

    OK, so ähnlich.

    Alles anzeigen

    Nicht doch, ich hacke hier nur rum. :| Aber Danke. ;)

    Es spielt hier alles zusammen - wie meistens - und wird wie erwähnt schnell komplex wenn man sehr dünne Trennlinien, nach aussen zeigende runde Ecken, Transparenz und Überlappungen zusammenbringt.

    Und dann wird alles noch verschieden gerendert...

    Natürlich will man auch noch die Buttons mit anpassen, alles soll sauber passen, etc..

    Viel Spass damit, ich hab mir schon den Wolf gebastelt um wenigstens so weit zu kommen. ;)

    Aber wieder Einiges dazugelernt.

    Übrigens - bekommst du auch einen seltsamen schrägen Strich mit deinem Theme, oben links, und nur in Vollformat oder maximierter Ansicht?

    Ich hab's auch ohne CSS probiert, gleiches Spiel. :/

  • Tabform

    • Horstmann
    • 1. November 2023 um 15:51
    Zitat von Mira_Belle

    Zwischenstopp :!:

    Meine Tabs sehen z.Z. so aus.

    Ich finde ja der Charme liegt in dem Zusammenspiel von seitlich komplett abgerundeten Tabs mit den teils unten ausgestellten Tabs.

    Was auch die Herausforderung ist...

    Zitat von Mira_Belle

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

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

    aber eben hoch oder tief.

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

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

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

    Alles anzeigen

    Kannst ja mal in meinen CSS Code schauen (nicht dass er dolle wäre), mit background size und position , sowie height/width und Positionierung der gesamten before/after Elemente kann man da rumschieben und anpassen.

    Mit den Close buttons und dem Icon hat dir Andreas ja schon geholfen; ist in meinem CSS aber etwas anders.

    Es kommt daher dass deine Rundungen zusätzlich an den Seiten zu den Tabs angestückkelt werden.

    Hier wäre mein momentaner Code, ungefähr wie ich es nach meinem Geschmack machen würde; dazu braucht es wie üblich noch die .svgs im Ordner  /icons.

    Sogar eine auskommentierte Soft Version ist dabei ;) , aber nur grob angefangen.

    CSS
    /*  ERSETZEN  */
    
    #titlebar {
        order: 1 !important;
    } 
    
    /*  ERSETZEN ENDE  */
    
    
    
    :root {
    
        /*--tab-min-height: 68px !important;*/
        /*--ug-height: calc(var(--tab-min-height) / 2);*/
    
    /* Ecken ohne svg radius */
        /*--ug-radius: 18px;*/
        --ug-radius: 20px;
    
    /* Rand Farben */
        --ug-color-border: hsla(0, 0%, 83%, 0.5);
        --ug-stroke: hsla(0, 0%, 83%, 0.35);
    
    
    /*  Farben tab hg / basic / selected / hover */
        --ug-color1: hsla(0, 0%, 83%, 0.25);
        --ug-color2:  hsla(35, 80%, 60%, 0.25);
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 0.75);
    }
    
    
     #TabsToolbar {
        -moz-context-properties: fill, stroke, stroke-opacity !important;
        background-image: linear-gradient(to top, 
            var(--ug-color3) 1px, transparent 1px) !important;
    
        /*outline: 1px solid grey !important;
        outline-offset: -1px !important;*/
        /*outline: 1px solid hsla(0, 0%, 100%, 0.75) !important;
        outline-offset: -13px !important;*/
    } 
    
    
    /* buttons adjust position */
    
    #TabsToolbar toolbarbutton {
        margin-top: -0px !important;
    }
    
    .tab-label, .tab-close-button {
        text-shadow: none  !important;
    }
    
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        margin-left: 4px !important;
        border-radius: 50% !important;
    }
    
    .tab-content {
        margin-top: 3px !important;
    }
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) {
       z-index: 2 !important;
    }
    
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
    /* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css  */
    
    .tabbrowser-tab:last-of-type {
        margin-inline-end: 11px !important;
    }
    
    
    /* tabs distance */
    
    .tabbrowser-tab:not([pinned]) {
        /*padding-inline: 16px !important;*/
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    
                                                               /*** tabs base ***/
    /* tabs connected bottom */
    
    .tab-background {
        margin-block: 4px 0px !important;
    }
    
    .tabbrowser-tab .tab-background {
        background-color: var(--ug-color1) !important;
        box-shadow: none !important;
        /*border-image: linear-gradient(to top, 
                               var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0  !important;*/
        border-image-outset: 0 1px !important;
        fill: var(--ug-color1, transparent) !important;
        /*stroke: var(--ug-stroke) !important;*/
        outline: none !important;
        /*min-height: calc(var(--tab-min-height) - 1px) !important;*/
        /*box-shadow:  inset 0px 1px var(--ug-color-border) !important;*/
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        fill: var(--ug-color2, transparent) !important;
    }
    
    /* tabs unselected hover */
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
    }
    
                                                               /*** tabs Radien, borders ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid var(--ug-color-border) !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    
    /*   selected  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
        /*border: none !important;*/
    }
    
    /*   not selected -> nach selected  */
    
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /*   not selected last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    
    /*   not selected last -> nach selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
    
    
                                                               /***  tabs corners  ***/
    
    /*  base  */
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        width: 38px !important;
        height: 38px !important;
        position: absolute;
        bottom: -2px;
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
        stroke: var(--ug-stroke) !important;
    }
    
    /*  left  */
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: -19px;
        background-image: url(icons/Tab-corner-left2a.svg),
                                        url(icons/Tab-corner-top2.svg) !important;
        background-position: bottom -0px left, top 0px right 1px !important;
        background-size: 19px, 19px !important;
    
        /*right: -298px;
        stroke: red !important;*/
    }
    
    /*  right  */
    .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
        right: -19px;
        background-image: url(icons/Tab-corner-left2a.svg),
                                        url(icons/Tab-corner-top2.svg) !important;
        background-position: bottom -0px left, top 0px right 1px !important;
        background-size: 19px, 19px !important;
        transform: scaleX(-1) !important;
    }
    
    
    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    
    
    
    
    /**   test  radial gradient  2d  soft outline / top / left / right / unten alles   **/
    
    /*
    .tabbrowser-tab:not([pinned])[selected] .tab-stack {
        background-image: linear-gradient(to bottom, var(--ug-stroke), transparent 10px) !important;
        background-repeat: no-repeat !important;
        background-size: calc(100% - 38px) 100% !important;
        background-position: top 4px center !important;
    }
    
    .tabbrowser-tab:not([pinned])[selected] .tab-stack::before {
        content: "";
        width: 72px !important;
        height: 36px !important;
        position: absolute;
        bottom: 4px;
        left: calc(-36px + 18px);
        background-image: 
            radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
            radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
        background-repeat: no-repeat !important;
        background-size: 72px 18px !important;
        background-position: bottom left, top left -35px !important;
    }
    
    .tabbrowser-tab:not([pinned])[selected] .tab-stack::after {
        content: "";
        width: 72px !important;
        height: 36px !important;
        position: absolute;
        bottom: 4px;
        right: calc(-36px + 18px);
        background-image: 
            radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
            radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
        background-repeat: no-repeat !important;
        background-size: 72px 18px !important;
        background-position: bottom left, top left -35px !important;
        transform: scaleX(-1) !important;
    }
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 4px, transparent 12px) !important;
    } 
    */
    
    
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
    .tab-content > .tab-close-button:hover {
        outline: none !important;
        background-color: rgba(255, 0, 0, 0.4) !important;                    /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;               /* Rot, glow */
    }
    Alles anzeigen

    icons.zip

  • Variablen in CSS nutzen

    • Horstmann
    • 1. November 2023 um 13:18
    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Ich hatte :has auch schon benutzt, wollte aber warten bis es offiziell von Fx unterstützt wird und sauber implentiert ist.

    Es steht nun fest, dass :has in der finalen Version von Firefox 121 ausgeliefert werden wird.

    Danke für die Info! :thumbup:

  • Tabform

    • Horstmann
    • 31. Oktober 2023 um 22:32

    Nochmal etwas verfeinert, Rundungen und Trennlinien noch Baustelle:

    CSS
    :root {
    
        --ug-height: calc(var(--tab-min-height) / 2);
    
        --ug-radius: 18px;
    
        --ug-fill: cyan;
    
    
    /* Rand  Farben */
    
        /*--ug-stroke: hsla(0, 100%, 50%, 0.5);
        --ug-stroke: var(--ug-color3);*/
    
        --ug-color-border: var(--ug-stroke);
    
        --ug-stroke: hsla(0, 0%, 83%, 0.5);
    
    
        --ug-color1: hsla(0, 0%, 83%, 0.25);
        --ug-color2:  hsla(35, 80%, 60%, 0.25);
        --ug-color_hova: hsla(0, 0%, 63%, 0.25);
    
    /* tab bar rand unten Farbe */
        --ug-color3: hsla(0, 0%, 83%, 1);
    
        /*--ug-color_test_text: hsla(0, 0%, 13%, 1) !important;*/
    }
    
    
    
     #TabsToolbar {
        background-image: linear-gradient(to top, 
            var(--ug-color3) 5px, transparent 5px) !important;
        /*outline: 1px solid grey !important;
        outline-offset: -1px !important;*/
        -moz-context-properties: fill, stroke, stroke-opacity !important;
    } 
    
    .tab-label, .tab-close-button {
        color: var(--ug-color_test_text) !important;
        text-shadow: none  !important;
    }
    
    #TabsToolbar toolbarbutton {
        margin-top: -4px !important;
    }
    
    #tabbrowser-tabs {
        --ug_margin_plus: -2px 2px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        /*margin-left: 8px !important;*/
        border-radius: 50% !important;
    }
    
    
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) {
       z-index: 2 !important;
    }
    
    
    /* tabs distance */
    
    .tabbrowser-tab:not([pinned]) {
        /*padding-inline: 16px !important;*/
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    
    /*
    .tab-stack {
        overflow: hidden !important;
        background-clip: padding-box;
    }*/
    
    
                                                               /*** tabs base ***/
    
    .tabbrowser-tab .tab-background {
        background-color: var(--ug-color1) !important;
        box-shadow: none !important;
        color: var(--ug-color_test_text) !important;
        /*border-image: linear-gradient(to top, 
                               var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0  !important;*/
        border-image-outset: 0 1px !important;
        fill: var(--ug-color1, transparent) !important;
        /*stroke: var(--ug-stroke) !important;*/
        outline: none !important;
        
        /*box-shadow:  inset 0px 1px var(--ug-color-border) !important;*/
    }
    
    
    /* tabs selected */
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        fill: var(--ug-color2, transparent) !important;
    }
    
    /* tabs unselected hover */
    
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
    }
    
                                                               /*** tabs Radien, borders ***/
    
    /*   basis   */
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid var(--ug-color-border) !important;
        border-bottom: none !important;
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*   select , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    
    /*   select  border   */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /*   not select -> nach select  */
    
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /*   not select last */
    .tabbrowser-tab:last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    
    /*   not select last -> nach select  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }
    
                                                               /* tabs bottom corners */
    
    .tabbrowser-tab:not([pinned]) .tab-background::before, 
    .tabbrowser-tab:not([pinned]) .tab-background::after {
        content: "";
        width: 36px !important;
        height: 36px !important;
        position: absolute;
        bottom: 5px;
        /*outline: 1px solid white !important;
        outline-offset: -1px !important;*/
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
        stroke: var(--ug-stroke) !important;
    }
    
    
    .tabbrowser-tab:not([pinned]) .tab-background::before {
        left: -18px;
        background-image: url(icons/Tab-corner-left.svg) !important;
        background-size: 18px !important;
    }
    
    .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
        right: -18px;
        background-image: url(icons/Tab-corner-left.svg) !important;
        background-size: 18px !important;
        transform: scaleX(-1) !important;
    }
    
    
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
    
    
    
    
    
    
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
    .tab-content > .tab-close-button:hover {
    
        color: var(--ug-color_test_text) !important;
    
    
        background-color: rgba(255, 0, 0, 0.4) !important;                    /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;               /* Rot, glow */
       outline: none !important;
        /*  background: #E81123 !important;                         */          /* Kirschrot rgb(232, 17, 35) */
        /*  box-shadow: inset 0px 0px 4px 0px #ff0000 !important;   */          /* Hellrot rgb(255, 0, 0) */
    }
    Alles anzeigen

    Das .svg dazu ist das gleiche wie hier.

Unterstütze uns!

Jährlich (2025)

92,9 %

92,9% (604,17 von 650 EUR)

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