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. Mira_Belle

Beiträge von Mira_Belle

  • Tabform

    • Mira_Belle
    • 8. November 2023 um 11:33
    Zitat von Horstmann
    ...

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

    Quatsch.

    Ein bisschen was muss doch zum Hirnschmalz anstrengen auch für andere übrigbleiben.

    Und ich glaube, ich habe eine Lösung.

    Muss noch ein paar Tests machen.

    Hat geklappt!

    Der Code muss nur wie folgt abgeändert werden:

    Aus

    CSS
    .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; */
            background-image: url("../tabs_5/tab_corner_ug.svg") !important;
            transform: scaleX(-1) !important;
        }

    wird

    CSS
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background::after,
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after {    
            right: calc(0px - var(--ug-corner-size) / 2);
        /*    background-image: url(icons/tab_corner_ug.svg) !important; */
            background-image: url("../tabs_5/tab_corner_ug.svg") !important;
            transform: scaleX(-1) !important;
        }

    Verwendet habe ich den Code aus Beitrag #69

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Mira_Belle
    • 7. November 2023 um 19:02

    Ich zweifelte und führte Selbstgespräche :D .

  • userChrome.js Scripte für den Fuchs (Diskussion)

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

    Heißt das

    Genauso ist das ;)

    Ok, Danke, dann ist bei mir doch noch nicht Hopfen und Malz verloren.

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 18:39

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

    Im Code herumstochern bringt ja auch nicht wirklich was!

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Mira_Belle
    • 7. November 2023 um 18:01

    Verstehe ich gerade nicht!

    Heißt das, ich ändere Code z.B. in der userChrome.css brauche ich nur auf dem Button mit der linken Maustaste klicken,

    und die Änderungen werden ohne Neustart übernommen?

    Und ändere ich etwas an der userContent.css, dasselbe Prozedere mit rechts?

    Denn bisher nutzte ich dazu einen Neustartbutton inkl. Cache leeren.

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 17:55

    2002Andreas & Horstmann

    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.

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 16:04

    Es ist leider auf Andreas Bilder nicht genau erkennbar, ob, wenn der erste Tab aktiv ist,

    auch bei den nachfolgenden Tabs die rechte Grafik fehlt.

    Was mich aber auch irritiert, und das hatte ich auch bei mir so gesehen, dass Grafiken sich

    überschneiden, wo eine von beiden gar nicht da sein sollte!

    Beitrag #75 Auf beiden Bildern zu sehen, zweiter und dritter Tab!

    Was wiederum in Beitrag #73 so nicht auftritt, ABER eben das mit der fehlenden Grafik!

    Drittes Bild, vierter Tab, Aktiv, aber die rechte Grafik fehlt.


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

    wenn dieser nicht der Letzte ist!

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 14:54
    Zitat von 2002Andreas
    Zitat von Mira_Belle

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

    Na klar ;)

    So mit false:

    ....

    Habe ich mir gedacht, Danke.

    Kannst Du das auch mit den zwei unterschiedlichen FFversionen noch bitte überpüfen?

    Es geht da um die rechte Grafik, die bei mir (FF119) nicht angezeigt wird, aber bei Horsmann (FF115esr, Mac) schon.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Mira_Belle
    • 7. November 2023 um 14:50
    Zitat von lenny2

    Ich habe es selbst herausgefunden, fügen Sie nach Zeile 17 diesen Code ein

    ....

    Super! :thumbup:

    Kannst noch kurz erklären, was der Sinn und Zweck dieses Skriptes ist?

    Danke Dir.

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 14:47

    Horstmann

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

    Mal schauen, ob Andreas das mit den zwei Versionen (115esr & 119) überprüfen kann.

  • Tabform

    • Mira_Belle
    • 7. November 2023 um 13:50

    Ich war/bin so frei und habe das neue CSS mal getestet.

    Als Erstes in einer Kopie meines Arbeitsprofils.

    War nicht so, wie ich erwartete und es traten Fehler auf.

    Um aber auszuschließen, dass das an eben diesem Profil mit all den anderen "Anpassungen" liegt.

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

    Hier die Bilder:

    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 i.O.

    Bei Multiselekt verhält es sich genau so.

    Wäre nun richtig toll, wenn jemand anderes auch mit einem Windows das überhüpfen könnte.

    Danke :*

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

  • Tabform

    • Mira_Belle
    • 4. November 2023 um 23:45

    OK, ich gebe Dir recht, ich hätte mehr "Bilder" machen sollen.

    Aber da ich, ja nun dank Deiner Hilfe, einen für mich passablen Code habe,

    sollten wir uns doch nicht wegen ein paar Missverständnisse in die Haare kriegen.

    Ich bin gerade dran in einem jungfräulichen Profil Deinen neuen Code noch einmal auseinander zunehmen

    und so richtig warm will ich mit diesem einfach nicht werden.

    Vielleicht liegt es aber auch an der Uhrzeit, oder weil es gerade regnet, wer weiß.

    Wünsche Dir eine gute Nacht und noch einen schönen Sonntag.

  • Tabform

    • Mira_Belle
    • 4. November 2023 um 22:40
    Zitat von Horstmann

    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. ?(

    OK, Du bist über meine Veränderungen nicht wirklich sehr angetan.

    Es funktioniert, und zwar meiner Meinung nicht nur halbwegs.

    Einzig bei Multiselect werden nicht alle Ränder sauber, bzw. richtig dargestellt

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

    Das mit den falschen Farben werde ich noch irgendwann angehen,

    jedoch stört es mich nicht, da ich Multiselect nie nutze.


    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.

  • Tabform

    • Mira_Belle
    • 4. November 2023 um 16:04

    Als Erstes möchte ich mich bei Dir Horstmann noch einmal bedanken.

    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!

    Ok, ich bin nun doch recht zufrieden mit dem Ergebnis, dass ich Dank Deiner Hilfe und Vorlagen

    da so zusammen geschustert habe.

    Hier mal der komplette Code inkl. Variablen:

    CSS
     /* Farben ---------------------------------------------------*/
    
     :root {
        --uc-color-black-light: #2B2B2B !important;          /*    var(--uc-color-black-light)        */
        --uc-color-black-lighter: #404040 !important;          /*    var(--uc-color-black-lighter)    */
        --uc-color-grey-dark: #5C5C5C !important;            /*    var(--uc-color-grey-dark)        */
        --uc-color-grey-light: #A9A9A9 !important;            /*    var(--uc-color-grey-light)        */
        --uc-color-grey-lighter: #D4D4D4 !important;       /*    var(--uc-color-grey-lighter)    */
        --uc-color-white-dark: #E0E0E0 !important;            /*    var(--uc-color-white-dark)        */
        --uc-color-white-normal: #FFFFFF !important;        /*    var(--uc-color-white-normal)    */
        --uc-color-orange-normal: #FFAA00 !important;        /*    var(--uc-color-orange-normal)    */
        --uc-color-orange-hover: #FFCC66  !important;        /*    var(--uc-color-orange-hover)    */
        --uc-color-red-normal: #FF0000 !important;            /*    var(--uc-color-red-normal)      */
    
        --ug-color1: rgba(225, 225, 225, 0.2);
        --ug-color2:  rgba(255, 148, 0, 0.4);
        --ug-color_hova: rgba(225, 225, 225, 0.4);
        --ug-color2-multi:  rgba(255, 148, 0, 0.5);
        
    }
    
    /* Border ---------------------------------------------------*/
    
    :root {
        --ug-radius: 20px !important;
    }
    
    /* Abstände -------------------------------------------------*/
    
    :root {
        --tab-block-margin: 2px !important;
        --tab-min-height: 36px !important;
    }
    
    /* ENDE -----------------------------------------------------*/
    
    
        /* 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;
        }
    
        /* Abstände der Tabs voneinander */
        .tabbrowser-tab:not([pinned]) {
            padding-inline: 2px !important;
            overflow: visible !important;
        }
    
        /* Abstand des ersten Tabs vom linken Rand */
        .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 */
        /* Lästiger Fix, der verhindert, dass das Hovering des letzten Tabs einen Tab-Overflow auslöst, bessere Lösung gesucht */
        /* 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: 11px !important;
        }
        :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
            margin-left: -8px !important;
        }
    
                        /*** tabs base ***/
        /*---------------------------------------------------*/
        /************* Tabs Grundeinstellungen  **************/
        /*---------------------------------------------------*/
    
        /* 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;
            box-shadow: inset  0px 0px 0px 0px transparent !important;            /* Aktiver Tab: Schatten Breite, Art und Farbe */
        }
    
        /* tabs multiselected */
        .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
                border-top: 1px solid var(--uc-color-orange-normal) !important;
        }
    
        .tabbrowser-tab:not([visuallyselected])[multiselected]:hover .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 ***/
        /*---------------------------------------------------*/
        /************** Tabs Radien & Rahmen  ****************/
        /*---------------------------------------------------*/
    
        /*   basis   */
        .tabbrowser-tab .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
            border-bottom: none !important;
        }
    
        .tabbrowser-tab:not([pinned]) .tab-background {
            border-left: none !important;
            border-top: 1px solid var(--uc-color-grey-light) !important;
            border-right: 1px solid var(--uc-color-grey-light) !important;
        }
    
        /*   selected , pinned  */
        .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
            border-left: none !important;
            border-top: 1px solid var(--uc-color-orange-normal) !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-top: 1px solid var(--uc-color-grey-light) !important;
            border-left: 1px solid var(--uc-color-grey-light) !important;
            border-right: 1px solid var(--uc-color-grey-light) !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;
            border-top: 1px solid var(--uc-color-grey-light) !important;
        }
    
        .tabbrowser-tab:last-of-type:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
            border-inline: none !important;
            border-top: 1px solid var(--uc-color-orange-normal) !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;
            border-top: 1px solid var(--uc-color-grey-light) !important;
        }
                          
                    /***  tabs corners  ***/
        /*---------------------------------------------------*/
        /************ Tabs Ecken (Vektorgrafik) **************/
        /*---------------------------------------------------*/
    
        /*  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(--uc-color-grey-light) !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("../tabs_4//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("../tabs_4//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;
                stroke: var(--uc-color-orange-normal) !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 */
        }
    
        /* close button, not overflow */
    
        /* Button rund, Icon 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 {
            border-radius: 50% !important;
            padding-left: 0px !important;
        }
    
        /* close button hover outline */
        #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        box-shadow: inset 0 0px 0px 1px var(--uc-color-orange-normal) !important;
        }
    
        /* Farbe des "+" */
    /*    #tabs-newtab-button {
            fill: var(--uc-color-grey-light) !important;
        } */
        #tabs-newtab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
    
        /* Hintergrundfarbe des Buttons bei hover */
    /*    toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon {
            background-color: var(--ug-color_hova) !important; 
        } */
    
        /*-------------------------------------------*/
        /****     Tabbar nach unten verschoben    ****/
        /*-------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
        }
    /*
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 10px !important;       
        }
    */
        #tabbrowser-tabs {
            width: 95vw !important;
        }
    
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
    /*        bottom: 6px !important;       /* Leiste etwas angehoben */
            bottom: 3px !important;
            /* Trennlinie zwischen Inhalt und Tableiste */
    /*        background-image: linear-gradient(to top, var(--uc-color-orange-normal) 1px, transparent 10px) !important; */
            background-image: linear-gradient(to top, var(--uc-color-orange-normal) 7px, transparent 1px) !important; 
            margin-bottom: -7px !important;
            padding-bottom: 7px !important;
        }
    
        /*-----------------------------------------------*/
        /****     Tabtext nicht verkürzt bei hover    ****/
        /*-----------------------------------------------*/
    
        /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
        /* Diese Verkürzung bei hover hätte ich gerne verhindert. */
    
        .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
            padding-inline-start: 7px !important;
            width: 24px !important;
        }
      
        .tabbrowser-tab[visuallyselected=true]:not(:hover),
        #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
            --tab-label-mask-size: 1em !important;
        }
        
        /* Tabtext wird nicht ausgeblendet */    
        .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
        .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
            mask-image: none !important;
        }
    
        .tab-label {
            overflow: hidden !important;
            /*text-overflow: ellipsis !important;*/
            text-overflow: " …" !important;
            white-space: nowrap !important;
            max-width: 95% !important;    
            text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
        }
        .tab-label[selected]  {
            color: var(--uc-color-white-normal) !important;                        /* Aktiver Tab: Schriftfarbe (Orange) */
        }
        .tab-label:not([selected])  {
            color: var(--uc-color-grey-lighter) !important;                        /* Aktiver Tab: Schriftfarbe (Hellgrau) */
        }
        
        /* Move tab content */
        .tab-content {
            margin-top: 1px !important;
        }
    Alles anzeigen

    Und hier mal ein Screenshot:

    Was den Farbferlauf der Tabs angeht, da lasse ich mir Zeit

    und werde mich wohl noch etwas mit Masken beschäftigen müssen, denke ich.

  • Tabform

    • Mira_Belle
    • 4. November 2023 um 08:25

    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
    :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:  rgba(184, 116, 20, 0.25);
        --ug-color_hova: hsla(0, 0%, 50%, 0.25);  */
    
    
        --ug-color1: rgba(225, 225, 225, 0.2);
        --ug-color2:  rgba(255, 148, 0, 0.4);
        --ug-color_hova: rgba(225, 225, 225, 0.4);
        --ug-color2-multi:  rgba(255, 148, 0, 0.5);
    
        /* tab bar rand unten Farbe */
        /*    --ug-color3: hsla(0, 0%, 83%, 0.75); */
    
    }
    
        /* 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;
        }
    
        /* Move buttons up/down, OFF */
    /*
        #TabsToolbar toolbarbutton {
            margin-top: -0px !important;
            margin-left: -8px !important;
        }
        /*
        #tabbrowser-tabs {
            --ug_margin_plus: 1px -1px;
        }
        :is(#scrollbutton-up, #scrollbutton-down) {
            margin-block:  var(--ug_margin_plus) !important;
        }
        */
    
    
    
    
        /* Abstände der Tabs voneinander */
    
        .tabbrowser-tab:not([pinned]) {
            padding-inline: 2px !important;
            overflow: visible !important;
        }
    
        /* Abstand des ersten Tabs vom linken Rand */
    
        .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 */
        /* Lästiger Fix, der verhindert, dass das Hovering des letzten Tabs einen Tab-Overflow auslöst, bessere Lösung gesucht */
        /* 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: 11px !important;
        }
        :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
            margin-left: -8px !important;
        }
    
                        /*** tabs base ***/
        /*---------------------------------------------------*/
        /************* Tabs Grundeinstellungen  **************/
        /*---------------------------------------------------*/
    
        /* 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;
            box-shadow: inset  0px 0px 0px 0px transparent !important;            /* Aktiver Tab: Schatten Breite, Art und Farbe */
        }
    
        .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
                border-top: 1px solid var(--uc-color-orange-normal) !important;
        }
    
        .tabbrowser-tab:not([visuallyselected])[multiselected]:hover .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 ***/
        /*---------------------------------------------------*/
        /************** Tabs Radien & Rahmen  ****************/
        /*---------------------------------------------------*/
    
        /*   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-top: 1px solid grey !important;
            border-right: 1px solid MediumOrchid !important;
            border-bottom: none !important;
        }
    
        .tabbrowser-tab:not([pinned]) .tab-background {
            border-left: none !important;
                border-top: 1px solid var(--uc-color-grey-light) !important;
                border-right: 1px solid var(--uc-color-grey-light) !important;
        }
    
        /*   selected , pinned  */
        .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
                border-left: none !important;
                border-top: 1px solid var(--uc-color-orange-normal) !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; */
                border-top: 1px solid var(--uc-color-grey-light) !important;
                border-left: 1px solid var(--uc-color-grey-light) !important;
                border-right: 1px solid var(--uc-color-grey-light) !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;
                border-top: 1px solid var(--uc-color-grey-light) !important;
        }
    
        .tabbrowser-tab:last-of-type:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
            border-inline: none !important;
            border-top: 1px solid var(--uc-color-orange-normal) !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;
                border-top: 1px solid var(--uc-color-grey-light) !important;
        }
                          
                    /***  tabs corners  ***/
        /*---------------------------------------------------*/
        /************ Tabs Ecken (Vektorgrafik) **************/
        /*---------------------------------------------------*/
    
        /*  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(--uc-color-grey-light) !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("../tabs_4//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("../tabs_4//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;
                stroke: var(--uc-color-orange-normal) !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 */
        }
    
        /* 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;
        }
    
        /*-------------------------------------------*/
        /****     Tabbar nach unten verschoben    ****/
        /*-------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
        }
    /*
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 10px !important;       
        }
    */
        #tabbrowser-tabs {
            width: 95vw !important;
        }
    
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
    /*        bottom: 6px !important;       /* Leiste etwas angehoben */
            bottom: 3px !important;
            /* Trennlinie zwischen Inhalt und Tableiste */
    /*        background-image: linear-gradient(to top, var(--uc-color-orange-normal) 1px, transparent 10px) !important; */
            background-image: linear-gradient(to top, var(--uc-color-orange-normal) 7px, transparent 1px) !important; 
            margin-bottom: -7px !important;
            padding-bottom: 7px !important;
        }
    
        /*-----------------------------------------------*/
        /****     Tabtext nicht verkürzt bei hover    ****/
        /*-----------------------------------------------*/
    
        /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
        /* Diese Verkürzung bei hover hätte ich gerne verhindert. */
    
        .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
            padding-inline-start: 7px !important;
            width: 24px !important;
        }
      
        .tabbrowser-tab[visuallyselected=true]:not(:hover),
        #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
            --tab-label-mask-size: 1em !important;
        }
        
        /* Tabtext wird nicht ausgeblendet */
        
        .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
        .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
            mask-image: none !important;
        }
    
        .tab-label {
            overflow: hidden !important;
            /*text-overflow: ellipsis !important;*/
            text-overflow: " …" !important;
            white-space: nowrap !important;
            max-width: 95% !important;    
        }
    
    
        .tab-label {
            text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
        }
        .tab-label[selected]  {
            color: var(--uc-color-white-normal) !important;                        /* Aktiver Tab: Schriftfarbe (Orange) */
        }
        .tab-label:not([selected])  {
            color: var(--uc-color-grey-lighter) !important;                        /* Aktiver Tab: Schriftfarbe (Hellgrau) */
        }
        
    
        /* Move tab content */
        .tab-content {
            margin-top: 1px !important;
        }
    
    
        #tabs-newtab-button {
            fill: var(--uc-color-grey-light) !important;
        }
        #tabs-newtab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
        toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon {
            background-color: var(--ug-color_hova) !important; 
        }
    Alles anzeigen
  • Tabform

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

    ...

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

    ...

    Oh, soweit war ich auch schon, nur den "statischen" Rahmen meinte ich gar nicht.

    :hover

    Das bekomme ich einfach nicht hin!

    Und hier mal Dein Code, mit meinen Anpassungen.

    War gar nicht so einfach die richtigen Stellen im Code zu finden,

    um die Außenlinien immer passend in der Farbe zu ändern.

    Zum Code muss ich aber noch sagen, dass ich eine eigene root.css für diverse Variablen habe,

    also auch für die Farben.

    CSS
     /* Farben ---------------------------------------------------*/
    
     :root {
        --uc-color-black-light: #2B2B2B !important;          /*    var(--uc-color-black-light)        */
        --uc-color-black-lighter: #404040 !important;          /*    var(--uc-color-black-lighter)    */
        --uc-color-grey-dark: #5C5C5C !important;            /*    var(--uc-color-grey-dark)        */
        --uc-color-grey-light: #A9A9A9 !important;            /*    var(--uc-color-grey-light)        */
        --uc-color-grey-lighter: #D4D4D4 !important;       /*    var(--uc-color-grey-lighter)    */
        --uc-color-white-dark: #E0E0E0 !important;            /*    var(--uc-color-white-dark)        */
        --uc-color-white-normal: #FFFFFF !important;        /*    var(--uc-color-white-normal)    */
        --uc-color-orange-normal: #FFAA00 !important;        /*    var(--uc-color-orange-normal)    */
        --uc-color-orange-hover: #FFCC66  !important;        /*    var(--uc-color-orange-hover)    */
        --uc-color-red-normal: #FF0000 !important;            /*    var(--uc-color-red-normal)      */
        
    }
    Alles anzeigen

    Der Code für die Tabs:

    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); */
    
        --ug-color1: rgba(225, 225, 225, 0.2);
        --ug-color2:  rgba(255, 148, 0, 0.4);
        --ug-color_hova: rgba(225, 225, 225, 0.4);
    }
    
    /* 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 {
        text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
    }
    .tab-label[selected]  {
        color: var(--uc-color-white-normal) !important;                        /* Aktiver Tab: Schriftfarbe (Orange) */
    }
    .tab-label:not([selected])  {
        color: var(--uc-color-grey-lighter) !important;                        /* Aktiver Tab: Schriftfarbe (Hellgrau) */
    }
    
    .tab-content {
        margin-top: 6px !important;
    }
    
    .tabbrowser-tab:is([visuallyselected], [multiselected]) {
       z-index: 2 !important;
    }
    
    /* Abstände der Tabs voneinander */
    
    .tabbrowser-tab:not([pinned]) {
        padding-inline: 2px !important;
        overflow: visible !important;
    }
    /* Abstand des ersten Tabs vom linken Rand */
    .tabbrowser-tab:not([pinned]):first-of-type {
        margin-inline-start: 9px !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; */
    
    /*    box-shadow: inset 0 1px 0px red !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;
        box-shadow: inset  0px 0px 0px 0px transparent !important;            /* Aktiver Tab: Schatten Breite, Art und Farbe */
    }
    
    /* 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-top: 1px solid grey !important;
        border-right: 1px solid MediumOrchid !important;
        border-bottom: none !important;
    
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
        border-top: 1px solid var(--uc-color-grey-light) !important;
        border-right: 1px solid var(--uc-color-grey-light) !important;
    
    }
    
    /*   selected , pinned  */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    
        border-left: none !important;
        border-top: 1px solid var(--uc-color-orange-normal) !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; */
        border-top: 1px solid var(--uc-color-grey-light) !important;
        border-left: 1px solid var(--uc-color-grey-light) !important;
        border-right: 1px solid var(--uc-color-grey-light) !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;
    
        border-top: 1px solid var(--uc-color-grey-light) !important;
    
    }
    .tabbrowser-tab:last-of-type:is([visuallyselected], [pinned]) .tab-background {
    
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
        border-top: 1px solid var(--uc-color-orange-normal) !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;
    
    /*    border-top: 1px solid lime !important; */
        border-top: 1px solid var(--uc-color-grey-light) !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(--uc-color-grey-light) !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("../tabs_3/Tab-corner-left2aTestB.svg"),
        url("../tabs_3/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("../tabs_3/Tab-corner-left2aTestB.svg"),
        url("../tabs_3/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;
    
        stroke: var(--uc-color-orange-normal) !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 */
    }
    
    /* close button, not overflow */
    
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
    /*    border: 1px solid red !important; */
    }
    
        /*-------------------------------------------*/
        /****     Tabbar nach unten verschoben    ****/
        /*-------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
        }
    /*
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 10px !important;       
        }
    */
        #tabbrowser-tabs {
            width: 95vw !important;
        }
    
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 6px !important;       /* Leiste etwas angehoben */
            /* Trennlinie zwischen Inhalt und Tableiste */
            background-image: linear-gradient(to top, var(--uc-color-orange-normal) 1px, transparent 10px) !important;
            margin-bottom: -7px !important;
            padding-bottom: 7px !important;
    } 
    
    
        /*-----------------------------------------------*/
        /****     Tabtext nicht verkürzt bei hover    ****/
        /*-----------------------------------------------*/
    
        /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
        /* Diese Verkürzung bei hover hätte ich gerne verhindert. */
    
        .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
            padding-inline-start: 7px !important;
            width: 24px !important;
        }
      
        .tabbrowser-tab[visuallyselected=true]:not(:hover),
        #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
            --tab-label-mask-size: 1em !important;
        }
        
        /* Tabtext wird nicht ausgeblendet */
        
        .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
        .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
            mask-image: none !important;
        }
    
        .tab-label {
            overflow: hidden !important;
            /*text-overflow: ellipsis !important;*/
            text-overflow: " …" !important;
            white-space: nowrap !important;
            max-width: 95% !important;    
        }
    
        #tabs-newtab-button {
            fill: var(--uc-color-grey-light) !important;
        }
        #tabs-newtab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
        toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon {
            background-color: var(--ug-color_hova) !important; 
        }
    Alles anzeigen
    Zitat von Horstmann

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

    Ja, auf den ersten Blick sah das schon viel besser aus.

    Nur muss ich zuschauen, ob ich die Außenlinien des aktiven Tabs und der inaktiven Tabs da auch getrennt ansprechen kann.

    Wenn ja, ist der neue Code, so glaube ich, viel einfacher, aber das sehe ich mir erst ab Montag näher an.

    Vorher habe ich da keine Zeit für, oder ich schlage mir die Nächte um die Ohren und hänge dann Tagsüber in den Seilen.

    Wäre nicht wirklich so gut, denn es gibt viel zu tun.

    In diesem Sinne, bis nächste Woche.

  • Tabform

    • Mira_Belle
    • 3. November 2023 um 22:39

    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

    Woran ich aber verzweifele, einen Rand um den "Neuen Tabbutton" zu zaubern.

    Entweder spricht der Selektor ALLE Buttons an, also die selbsterstellten, oder

    der "Rahmen" steht viel zu weit um den Button und ist auch nicht rund.

    Nun werde ich mich nächste Woche dann mal mit Deinem neuen und besseren Code befassen.

    Und höre auf, diesen noch weiter zu optimieren, der ist gut.

    Apropos anpassen, so habe ich Deinen Code hingebogen.

    Ob ich das mit Deinem neuen Code auch so hinbekomme?

  • Tabform

    • Mira_Belle
    • 2. November 2023 um 21:49

    Horstmann

    Du bist ein Schatz!

    Dein letzter Code funktioniert hervorragend und das auch im Kompaktmodus.

    Um die Tableiste nach unten zu versetzen, habe ich nachfolgenden Code noch eingesetzt.

    CSS
        /*-------------------------------------------*/
        /****     Tabbar nach unten verschoben    ****/
        /*-------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
        }
    
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 0 !important;
        }
    
        #tabbrowser-tabs {
            width: 95vw !important;
        }
    Alles anzeigen

    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.

    Aber alles eins nach dem anderen.

    Vielen lieben Dank noch mal. :*

  • Tabform

    • Mira_Belle
    • 2. November 2023 um 17:12

    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  */
    
    
    
    :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("../tabs/Tab-corner-left2a.svg"),
                                        url("../tabs/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("../tabs/Tab-corner-left2a.svg"),
                                        url("../tabs/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

    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.

  • Tabform

    • Mira_Belle
    • 2. November 2023 um 14:56

    Horstmann

    Ich blicks nicht!

    Da es nicht so geht wie ich es mir vorgestellt habe, bediente ich mich an Deinem Code.

    Nur, der funktioniert bei mir einfach nicht!

    Die Grafiken werden nicht so angezeigt, wie ich es erwarten würde,

    und "Rahmen" (border) werden angezeigt, obwohl da eigentlich gar keine sein sollten.

    Ich habe mal zur besseren Veranschaulichung

    Tab-corner-top2.svg durch ein Herz ersetzt.


    Gib mir doch bitte mal Deine Vektorgrafiken.

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

    Und wenn es mehr sind, dann den Rest auch noch.

    Und Sicher, dass der Code so ist?

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

    Bin am Verzweifeln.

Unterstütze uns!

Jährlich (2025)

105,8 %

105,8% (687,41 von 650 EUR)

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