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
    • 25. März 2026 um 08:22

    Fehler gefunden:!:

    Es war das CSS zum Verschieben der Tableiste.
    Anstatt:

    CSS
        #TabsToolbar,
        .global-notificationbox,
        #tab-notification-deck,
        #notifications-toolbar {
            order: 1;
        }
    
        #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container) {
            display: none;
        }
    
        :root[customtitlebar] #toolbar-menubar:is([autohide=""],[autohide="true"],[collapsed]) ~ #nav-bar {
            > .titlebar-buttonbox-container {
                display: flex !important;
            }
            :root[sizemode="normal"] & {
                > .titlebar-spacer {
                    display: flex !important;
                }
            }
            :root[sizemode="maximized"] & {
                > .titlebar-spacer[type="post-tabs"] {
                    display: flex !important;
                }
            }
        }
    Alles anzeigen

    benutze ich jetzt doch wieder:

    CSS
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 8px );                /*  44px */
        }
        
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
        }
  • Tabform

    • Mira_Belle
    • 25. März 2026 um 00:13

    Sören Hentzschel Ich selber war DAS!
    Habe die Tage doch am CSS herumgeschraubt, dabei habe ich das irgendwie verhundst.
    Habe gerade ein Backup eingespielt und da ist der Button dynamisch.
    Melde mich, wenn ich den Fehler gefunden habe.

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 23:41

    Wie erkläre ich es?
    Der Button ist hier:

    Code
    html#main-window body toolbox#navigator-toolbox.browser-toolbox-background toolbar#TabsToolbar.browser-toolbar.browser-titlebar hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target toolbarbutton#new-tab-button.toolbarbutton-1.chromeclass-toolbar-additional

    aber die Tabs hier:

    Code
    html#main-window body toolbox#navigator-toolbox.browser-toolbox-background toolbar#TabsToolbar.browser-toolbar.browser-titlebar hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target tabs#tabbrowser-tabs

    vor Version 149 reichte dieses CSS, oder ähnlich, um den Button dynamisch hinter den letzten Tab zu bekommen.

    CSS
        .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
            margin-left: -16px !important;  /* Abstand zum Tab */
            z-index: 2 !important;
        } 

    Das verstehe ich jetzt mal so überhaupt nicht mehr!
    Ich habe ein gespiegeltes Testprofil, da ist der Button dynamisch hinter den Tabs.
    Da muss ich mal schauen WAS genau da anders ist!

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 23:27

    Misst

    Das mit dem Skript klappt doch nicht so, wie gewünscht!
    Der Fuchs lässt sich per JS nicht mehr neu starten, weil er irgendwie nicht sauber beendet wird,
    und beim Verschieben von Tabs gibt es auch Ungereimtheiten.

    Doof! Was hat sich Mozilla dabei gedacht, den Button fest an den rechten Rand zu tackern?
    B.z.w. aus der Tableiste zu nehmen.

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 22:24

    Danke 2002Andreas aber leider hat das bei mir nicht geklappt!

    Aber ich habe jetzt ein kleines JS, das genau das macht, was ich will.
    Der Button ist wieder hinter dem letzten Tab.

    JavaScript
    // ==UserScript==
    // @name           New Tab Button Inside Scrollbox
    // @include        main
    // ==/UserScript==
    
    (function() {
        function moveNewTabButton() {
            const scrollbox = document.getElementById("tabbrowser-arrowscrollbox");
            const newTabBtn = document.getElementById("new-tab-button");
            
            // Prüfen, ob der Button bereits in der Scrollbox ist
            if (scrollbox && newTabBtn && newTabBtn.parentNode !== scrollbox) {
                // Button ans Ende der Scrollbox verschieben (nach den Tabs)
                scrollbox.appendChild(newTabBtn);
            }
        }
    
        // Initial ausführen, wenn DOM bereit ist
        if (document.readyState === "complete") {
            moveNewTabButton();
        } else {
            window.addEventListener("load", moveNewTabButton, { once: true });
        }
        
        // Sicherheitshalber: Wenn Firefox den Button zurücksetzt (z.B. bei Customization),
        // wird er automatisch wieder verschoben
        const observer = new MutationObserver((mutations) => {
            for (let mutation of mutations) {
                if (mutation.type === "childList" && 
                    document.getElementById("new-tab-button")?.parentNode?.id !== "tabbrowser-arrowscrollbox") {
                    moveNewTabButton();
                }
            }
        });
        
        const tabsContainer = document.getElementById("tabbrowser-tabs");
        if (tabsContainer) {
            observer.observe(tabsContainer, { childList: true, subtree: true });
        }
    })();
    Alles anzeigen

    Fragt mich aber bitte nicht mit welcher KI ich das erstellt habe, es war wieder so ein battle, wo ich nicht weis, welche Modelle
    da verwendet werden.

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 21:17
    Zitat von Horstmann

    Vermutlich dank der meisterlichen Kombination von margin-left und margin-inline-start, und generell der sorgfältigen Analyse dieser Tabs mit den Werkzeugen. :thumbup:

    Mir kommt es so vor, als würdest Du mich verhöhnen.
    Ich habe mir wirklich Mühe gegeben das auch hinzubekommen, aber daran bin ich gescheitert.
    Browserwerkzeuge hin oder her, ich denke, so ein bisschen muss man auch was von CSS verstehen.
    Das tu ich halt nur ungenügend.

    2002Andreas Eventuell kannst Du mir noch einmal helfen.

    Woran ich noch scheitere, der "New Tab Button"!
    Anpassen konnte ich ihn, aber ...
    er wandert nicht mehr mit den Tabs!

    Ich versuche es zu erklären.
    War nur ein Tab vorhanden, war dieser Button direkt daneben,
    bei mehreren Tabs wanderte er mit.
    Unter anderem kann man in #43 in etwas erkennen wie ich das meine.

    Jetzt ist der Button ganz rechts.

    Ach ja, der Code für den Button.

    CSS
        /* Abstand vom Tab */
        #TabsToolbar-customization-target.customization-target #new-tab-button {
            margin-left: -24px !important;
        }
    
        /* Form (Rund) */
            #TabsToolbar-customization-target.customization-target #new-tab-button .toolbarbutton-icon {
            border-radius: 50% !important;
        }
    
        /* New Tab (+) button hover outline */
        #TabsToolbar-customization-target.customization-target #new-tab-button:hover .toolbarbutton-icon {
            outline: 1px solid var(--uc-color-orange-normal) !important;
            outline-offset: -1px !important;
            background-color: var(--ug-color1) !important;
        }
    
        /* New Tab (+) button hover color */
        #TabsToolbar-customization-target.customization-target:hover #new-tab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
    
        /* Position, closer to last tab */ 
        #TabsToolbar-customization-target.customization-target #new-tab-button {
         /*! margin: 0 !important; */
            margin-top: 2px !important;
            padding-inline: 0px !important;
        }
    
        .tabbrowser-tab:not([pinned]) + #TabsToolbar-customization-target.customization-target {
            margin-left: -16px !important;
            z-index: 2 !important;
        }
    Alles anzeigen
  • Symbole in den Kontextmenüs [ Update ]

    • Mira_Belle
    • 24. März 2026 um 18:43

    Ich muss die "01 Symbole_Menüleiste.css" überarbeiten!

    Unter "Ansichten" ist einiges durcheinander geraten.
    Das Meiste hab ich schon, nur noch "Sidebar" und "Webseiten-Stil" passen noch nicht so richtig.

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 18:32
    Zitat von Horstmann

    In dem Fall würde ich mal auf Github bei MOG nachfragen, da ist er nach wie vor aktiv.

    Eigentlich hast Du recht, aber Andreas hat ja die Lösung schon geliefert.

    -------------------------------------------------------------------------------------------------

    :love:

    DAS passt ja genau, warum auch immer.

    CSS
    #tabbrowser-tabs tab-split-view-wrapper {
      & .tabbrowser-tab {
        &:first-child {
          & .tab-background {
            margin-inline-end: 0 !important;
            margin-inline-start: 0 !important;
          }
        }
      }
    }
    
    #tabbrowser-tabs tab-split-view-wrapper {
      & .tabbrowser-tab {
        & .tab-background {      
          margin-left: 0 !important;
          margin-inline-end: 0 !important;
          margin-inline-start: 0 !important;
        }
      }
    }
    Alles anzeigen

    Vielen, vielen Dank 2002Andreas

  • Tabform

    • Mira_Belle
    • 24. März 2026 um 16:38

    @Horstmann Danke für Deine Bemühung.
    Leider bewirken beide CSS nichts.

    Ist nicht soo dramatisch, da ich diesen Modus ja nur sehr selten nutzen werde, z.B. wenn ich Code von Github
    und dem Forum vergleiche.

    Im übrigen gibt es den "Fehler" auch mit MOG's CSS!
    Mal schauen, ob er das fixt, wenn es zu fixen geht.

  • Tabform

    • Mira_Belle
    • 23. März 2026 um 23:44

    So 100%tig bin ich noch nicht zufrieden, denn im "Geteilten Tab" sind im Hintergrund kleine Lücken.

    Hier mal die Ergänzung zum derzeitigen CSS aus #165
    und der Änderung aus #185

    CSS
    /* Test für "Geteilte Ansicht" */
    
        #tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
    	margin-block: 0 !important;
    	padding: 0 !important;
    	flex: 1000  !important;
      background-color: transparent !important;
    }
    
    #tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
      & .tabbrowser-tab {
        & .tab-background {
         min-height: var(--uc-min-height) !important;
        }
      }
    }
    
    #tabbrowser-tabs tab-split-view-wrapper {
      &:not([hasactivetab]) {
        .tabbrowser-tab {
          &:last-child {
            border-inline-start: 1px solid transparent;
          }
        }
      }
    }
    Alles anzeigen

  • Tabform

    • Mira_Belle
    • 23. März 2026 um 15:33

    Sorry, ich konnte einfach nicht warten.
    Update ist gemacht.

    Ich habe auch schon so ein paar Dinge, was den gesplitteten Tab angeht, die ich ändern könnte, damit es passt.
    Dazu später mehr.

    Ich habe mal meine Anpassungen für die Tableiste ausgeschaltet.
    Was mir da auffällt, ist ein senkrechter Strich zwischen den gesplitteten Tabs, wenn dieser Splittab inaktiv.
    An den komme ich irgendwie nicht ran.

  • Tabform

    • Mira_Belle
    • 23. März 2026 um 09:18

    @Horstmann Jetzt wo Du es so schön erklärt hast, wird mir klar, welcher Code genau gemeint ist,
    damit die "buttonbox", also genau die "Fensterbuttons", eben NICHT mit der ganzen Leiste verschoben werden.
    Also so grob jedenfalls.

    Danke.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 20:20

    Also doch jene Version:

    CSS
        #TabsToolbar,
        .global-notificationbox,
        #tab-notification-deck,
        #notifications-toolbar {
            order: 1;
        }
    
        #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container) {
            display: none;
        }
    
        :root[customtitlebar] #toolbar-menubar:is([autohide=""],[autohide="true"],[collapsed]) ~ #nav-bar {
            > .titlebar-buttonbox-container {
                display: flex !important;
            }
            :root[sizemode="normal"] & {
                > .titlebar-spacer {
                    display: flex !important;
                }
            }
            :root[sizemode="maximized"] & {
                > .titlebar-spacer[type="post-tabs"] {
                    display: flex !important;
                }
            }
        }
    Alles anzeigen

    Man kann das ganze eventuell noch etwas verschachteln, aber dann blicke ich erst recht nicht mehr durch.


    So, dann heißt es das Update abwarten.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 20:05
    Zitat von 2002Andreas

    Du musst natürlich testen, ob es damit an anderer Stelle evtl. ein Problem geben könnte. Das habe ich hier nicht weiter überprüft.

    Leider ja.
    Wenn doch die Menüleiste aktiviert ist, sind die Fensterbuttons zweimal da!
    Einmal in der Menüleiste, wo sie dann ja auch sein sollten,
    und einmal in der Adressleiste, wo sie NICHT mehr sein sollten.

    Mit der abgewandelten Version von MOG's Version, die ich echt nicht verstehe, funktioniert aber alles so wie es sein sollte.

    FuchsFan Leider nein.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 19:49

    OH, 2002Andreas
    Das ist ja noch besser, weil nicht so komplex!
    Das werde ich übernehmen. :*

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 19:45

    Ich und CSS.
    Danke @Horstmann :!:

    Anstatt :

    CSS
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 8px );
        }
        
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
        }

    nutze ich jetzt dies:

    CSS
        @media not -moz-pref("sidebar.verticalTabs") {
    
            .global-notificationbox,
            #tab-notification-deck,
            #notifications-toolbar,
            #TabsToolbar {
                order: 1;
            }
            #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container) {
                display: none;
            }
    
            :root[customtitlebar] #toolbar-menubar:is([autohide=""],[autohide="true"],[collapsed]) ~ #nav-bar {
                > .titlebar-buttonbox-container {
                    display: flex !important;
                }
                :root[sizemode="normal"] & {
                    > .titlebar-spacer {
                        display: flex !important;
                    }
                }
                :root[sizemode="maximized"] & {
                    > .titlebar-spacer[type="post-tabs"] {
                        display: flex !important;
                    }
                }
            }
        }
    Alles anzeigen

    Keine Ahnung, was ich da fabriziert habe, aber es funktioniert genau so, wie ich es mir vorstellte.

    Wenn keine Titelleiste und auch keine Menüleiste angezeigt wird, sind dennoch die Fensterbuttons oben rechts in der Ecke.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 18:52

    2002Andreas Das funktioniert, nur dann verschieben sich die "Fensterbuttons" halt leider auch!
    "Fensterbuttons" => min, max, schließen
    Muss doch eine Möglichkeit geben nur die Tableise zu verschieben.
    Und dass die #TabsToolbar.browser-toolbar.browser-titlebar hbox.titlebar-buttonbox-container hbox.titlebar-buttonbox
    an Ort und Stelle verbleibt
    und nur #TabsToolbar.browser-toolbar.browser-titlebar hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target tabs#tabbrowser-tabs arrowscrollbox#tabbrowser-arrowscrollbox verschoben wird.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 18:13

    Also ich muss eine andere Möglichkeit finden, die Tableiste nach unten zu bekommen!

    Bisher:

    CSS
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
        }

    Aber dann kommt eben das "Kuddelmuddel" raus, wenn die Titelleiste deaktiviert ist.

    Der andere Code kann ja bleiben, denn er schafft ja nur den Platz.

    CSS
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 8px );                /*  44px */
        }


    Zum Testen in einem neuen, sauberen Profil, habe ich im übrigen auch MOG's css getestet, gleiches Problem,
    was ja bedeutet, dass es wirklich nur an Code

    Zitat von Horstmann

    Oh Mann, der alte Mist Code schon wieder:

    In #165, Zeile 379 abwärts, das Tabbar nach unten verschieben Zeug.

    liegt.

    Es muss also eine andere Möglichkeit her, oder wie Sören Hentzschel schon schrieb, muss das in den Header hineingeschrieben werden.
    Eine andere bessere Möglichkeit die Tabs nach unten zu bekommen wäre aber schon schöner.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 17:49
    Zitat von 2002Andreas

    Hier nicht:

    Komisch.

    Ich integriere mal alle Werte und Farben ins CSS, damit die Testvoraussetzungen dann für alle gleich sind.

    Erledigt.

    CSS
    /*** Curved tabs beta D2b sauber - dunkles Theme ***/
    /* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */
    /* Source = https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1287083#post1287083 */
    
    /* -------------------------------------------------------------------------------------------------------------- */
     :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)      */    
        
        --uc-color: rgba(225, 225, 225, 0.2);              /* hellgrau basis, unselected        */
        --uc-color_hov: rgba(225, 225, 225, 0.3);          /* mittelgrau unselected hover       */
        --uc-color-sel: rgba(255, 148, 0, 0.4);            /* zart orange selected              */
        --uc-color-musel: rgba(255, 148, 0, 0.3);          /* zart orange dunkel+ multiselected */
        --uc-color_musel_hov: rgba(255, 148, 0, 0.5);      /* zart orange dunkel+ multiselected hover */
        
        --uc-color-orange-test: #db8b00 !important;
    
    }
    
    /* Border ---------------------------------------------------*/
    
    :root {
        --uc-border-width: 3px !important;					/*	var(--uc-border-width)		*/
        --uc-border-radius: 8px !important;					/*	var(--uc-border-radius) 	*/
        --uc-border-style: outset !important;				/*	var(--uc-border-style)		*/
    
        /*--uc-radius: 20px !important;*/
        --uc-radius: 19px !important;
    
    }
    
    /* Ränder ---------------------------------------------------*/
    
    :root {
        --uc-margin-top: 3px !important;					/*	var(--uc-margin-top)		*/
        --uc-margin-right: 10px !important;					/*	var(--uc-margin-right)		*/
        --uc-margin-left: 1px !important;					/*	var(--uc-margin-left)		*/
        --uc-margin-bottom: 5px !important;					/*	var(--uc-margin-bottom)		*/
    }
    
    /* Abstände -------------------------------------------------*/
    
    :root {
        --uc-padding-top: 3px !important;					/*	var(--uc-padding-top)		*/
        --uc-padding-right: 20px !important;				/*	var(--uc-padding-right)		*/
        --uc-padding-left: 20px !important;					/*	var(--uc-padding-left)		*/
        --uc-padding-bottom: 3px !important;				/*	var(--uc-padding-bottom)	*/
    
        --uc-block-margin: 2px !important;                  /*	var(--uc-block-margin)      */
        --uc-min-height: 36px !important;                   /*	var(--uc-min-height)        */
    }
    
    /* -------------------------------------------------------------------------------------------------------------- */
    
    /*** General adjustments ***/
    /*** Allgemeine Anpassunge ***/
    
    :root {
    
        /* Tabs bar height adjust */
        /* Tabbar Höhe einstellen */
            /*--tabs-navbar-shadow-size: 0 !important;*/
            /*--tab-block-margin: 4px !important;*/
            --tab-block-margin: var(--uc-block-margin) !important;       /*  2px */
            --tab-min-height: var(--uc-min-height) !important;           /* 36px */
        
        /* Edges without corner Svg /  Radius */
        /* Kanten ohne Ecken (svg / Radien */
            /*--ug-radius: 20px;*/
            --ug-radius: var(--uc-radius) !important;                    /* 19px */
        
        
        /* Edges (borders, outlines) colors */
        /* Farben für Ränder (Umrandungen, Konturen) */
        
        /* Edges not selected */
        /* Ränder nicht ausgewählt */
    /*        --ug-color-border: hsla(0, 0%, 83%, 0.5);                   /* hellgrau unselected Kante Tab */
    /*        --ug-color-border: var(--uc-color-orange-test); */
            --ug-color-border: var(--uc-color-grey-light);
            --ug-stroke: var(--ug-color-border);                          /* unselected Kante Svg */
    /*        --ug-kante_hova: hsla(0, 0%, 93%, 0.65);                    /* mittelgrau unselected alle Kanten hover */
            --ug-kante_hova: var(--ug-color-border);
        
        /* Edges selected , multiselected */
        /* Kanten ausgewählt, mehrfach ausgewählt */
    /*        --ug-color-border_select: hsla(0, 0%, 93%, 0.75);           /* mittelgrau hell+ selected Kante Tab */
            --ug-color-border_select: var(--uc-color-orange-normal);
            --ug-stroke_select: var(--ug-color-border_select);            /* selected Kante Svg */
    /*        --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);             /* mittelgrau hell++ multiselected alle Kanten hover */
            --ug-kante_hova_select: var(--uc-color-orange-normal);
    
        
        /* Tabs background colors:  */
        
    /*        --ug-color1: hsla(0, 0%, 83%, 0.25);                        /* hellgrau basis, unselected */
    /*        --ug-color2: hsla(35, 80%, 60%, 0.25);                      /* zart orange selected */
    /*        --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                /* zart orange dunkel+ multiselected */
    /*        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);            /* zart orange dunkel++ multiselected hover */
    /*        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                    /* mittelgrau#2 unselected hover */
    
            --ug-color1: var(--uc-color);                                 /* hellgrau basis, unselected */
            --ug-color2: var(--uc-color-sel);                             /* zart orange selected */
            --ug-color2-multi: var(--uc-color-musel);                     /* zart orange dunkel+ multiselected */
            --ug-color_hova: var(--uc-color_hov);                         /* mittelgrau unselected hover */
            --ug-color_multi_hova: var(--uc-color_musel_hov);             /* zart orange dunkel++ multiselected hover */
    
    
        /* Tab bar unten, border bottom color */
    /*        --ug-color_bottom: hsla(0, 0%, 93%, 1);                     /* hellgrau nicht transparent, Kante unten */
            --ug-color_bottom: var(--uc-color-orange-normal);
    
        
        /* Symbole für about:xxx */
            --ug-color_tab-icon: var(--uc-color-red-normal);
    }
        /*** General adjustments end ***/
    /* -------------------------------------------------------------------------------------------------------------- */    
    /* -------------------------------------------------------------------------------------------------------------- */
    
                                                                   /*** Tabs base ***/
    
        /* tabs connected bottom */
        
        .tab-background {
            margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
        }
        
        /*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
        
        /*  Basis alle Tabs  */
        
        .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;
        }
        
        /*  Zusatzregeln, überschreiben Basis alle Tabs  */
        
        /* selected , pinned tabs */
        .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        }
        /* Tab selected no inline border */
        .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
            border-inline: none !important;
        }
        
        /* Tab after selected tab completely round, no corners */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
            border-radius: var(--ug-radius) !important;
            border-left: 1px solid var(--ug-color-border) !important;
        }
        
        /* Last tab dual corners, unless it comes after selected tab */
        .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
            border-inline: none !important;
        }
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
            border-right: none !important;
        }
    
        /* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
            border-color: var(--uc-color-orange-normal) !important;
        }
    
                                                                      /***  COLORS  ***/
        
        /**  In about:config set svg.context-properties.content.enabled to true  **/
        
        /*  Basis alle Tabs  */
        
        .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;
            border-bottom: none !important;   /* Muss zusätzlich, da unten ja keine Kante sein soll !  */
        }
        
        /*  Zusatzregeln, überschreiben Basis alle Tabs  */
        
        /* 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-kante_hova) !important;
            border-color: var(--ug-kante_hova) !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]):is([multiselected]) .tab-background::before, 
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
            fill: var(--ug-color2-multi) !important;
        }
    
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before, 
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
            fill: var(--ug-color_multi_hova) !important;
        }
    
        /*  right corner bg, selected --> vor not selected  */
        .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
            background-image: none !important;
        }
    /* -------------------------------------------------------------------------------------------------------------- */
    
                                                              /***  tabs corners  ***/
        /*  base  */
        
        #TabsToolbar {
            --ug-corner-size: var(--tab-min-height) !important;             /*  36px */
            --ug-corner-image: url("../icons/tab_corner.svg") !important;
        }
        
        .tabbrowser-tab .tab-background::before, 
        .tabbrowser-tab .tab-background::after {
            -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
            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;
            pointer-events: none !important;
        }
        
        /*  left  */
        .tabbrowser-tab .tab-background::before {
            left: calc(0px - var(--ug-corner-size) / 2);                      /* -18px */
            background-image: var(--ug-corner-image) !important;
        }
        
        /*  right  */
        .tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
            right: calc(0px - var(--ug-corner-size) / 2);                     /* -18px */
            background-image: var(--ug-corner-image) !important;
            transform: scaleX(-1) !important;
        }
    
                                                /****   Margins etc. overflow fix   ****/
        
        /* Base values ; tab padding, margin */
        #tabbrowser-tabs {
        /*    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);             /*  26px */
            --ug-tab_Pad: calc(-10px + var(--ug-corner-size) / 2);             /*   8px */
    
        /*    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);        /* -48px */
            --ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2 + 6px);       /* -12px */
        }
    
        /* Basis all Tabs */
        .tabbrowser-tab:not([pinned]) {
            overflow: visible !important;
            padding-inline: var(--ug-tab_Pad) !important;
        }
    
        /* Tab before any tab */
        .tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
    
        /* Tab after selected */
        .tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
    
        /* Tab selected  */
        .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
            margin-inline: 0px !important;
        }
    
        /* Last tab after selected tab */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
        /***  Tab left higher z index / Vorrang vor Tab rechts  ***/
        .tabbrowser-tab:not([pinned]) .tab-content {
            z-index: 1 !important;
        }
    
        /***  Space for corner left/right - first/last tab, overflow bugs fix  ***/
    
        #tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        /*    margin-inline-start: 0px !important; */
            margin-inline-start: 10px !important;
        }
        #tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
        /*    margin-inline-start: 0px !important; */    
            margin-inline-end: 10px !important;
        }
        #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
            margin-inline-start: -12px !important;
        }
        #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
            margin-inline-end: -12px !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: 6px !important;
            width: 24px !important;
    
        }
      
        .tabbrowser-tab[visuallyselected=true]:not(:hover),
        #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
            --tab-label-mask-size: 1em !important;
        }
        
        /* Tabtext wird nicht ausgeblendet */    
        .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
        .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
            mask-image: none !important;
        }
    
        /*--------------------------------------------*/
        /****     Tabbar nach unten verschieben    ****/
        /*--------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 8px );                /*  44px */
        /*    padding-bottom: 42px !important; */
        }
        
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
        }
    
        /*--------------------------------------------------*/
        /****  Trennlinie zwischen Inhalt und Tableiste  ****/
        /*--------------------------------------------------*/
    
        #TabsToolbar {
            bottom: 6px !important;                                             /* Tableiste etwas angehoben */
            width: 100vw !important;                                            /* Tableistenbreite festgelegt */
            background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
            margin-bottom: -7px !important;                                     /* Trennlinie nach unten verschoben */
            padding-bottom: 7px !important;                                     /* Tabs etwas angehoben */
        }
    
        /*---------------------------------------------*/
        /****     Symbole für about:xxx anpassen    ****/
        /*---------------------------------------------*/
    
    	.tab-icon-image {
    		-moz-context-properties: fill !important;
    	/*	fill: #FFAA00 !important;	*/
    		fill: #FF0000 !important;
    	}
    
        /*-----------------------------------------------------------------------*/
        /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
        /*-----------------------------------------------------------------------*/
    
        #context_reopenInContainer {
            display: none !important;
          }
          
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
        .tabbrowser-tab:not([pinned]) .tab-close-button {                          /* Button rund */
            border-radius: 50% !important;
            display: flex !important;
        }
    
        .tab-content > .tab-close-button:hover {
            /*outline: none !important;*/
            outline: 1px solid rgba(255, 0, 0, 0.3) !important;
            outline-offset: -1px !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 */
        }
    
        /*  Schließen Kreuz größer */
        .tab-close-button {
            transform: scale(1.4, 1.4) !important;
        }
    
        /*---------------------------------------------------*/
        /************* New Tab Button (+) hover  *************/
        /*---------------------------------------------------*/
    
        /* Abstand vom Tab */
        #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
            margin-left: 6px !important;
            border-radius: 50% !important;
        }
    
        /* New Tab (+) button hover outline */
        #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
            outline: 1px solid var(--uc-color-orange-normal) !important;
            outline-offset: -1px !important;
            background-color: var(--ug-color1) !important;
        }
    
        /* New Tab (+) button hover color */
        #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
    
        /* Position, closer to last tab */
        #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
            margin: 0 !important;
            margin-top: 2px !important;
            padding-inline: 0px !important;
        }
        .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
            margin-left: -16px !important;
            z-index: 2 !important;
        }
    
        /*-------------------------------------------------*/
        /*************** Schrift in den Tabs ***************/
        /*-------------------------------------------------*/
    
        .tab-label {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        /*    text-overflow: " " !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;
        }
    
    /*************** Tests ***************/
    
        #tabbrowser-tabs {
        /*    --tab-min-width: 76px !important; */
            --tab-min-width: 75px !important;
            --tab-loading-fill: lime !important;      
            --tab-overflow-pinned-tabs-width: 0px !important;
          
        }
        
        /* userChrome.css */
        /* progress-bar page loading in the tab header */
        .tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
            opacity: 0;
            background-color: #FFCC00;
            height: 2px;
            margin-inline: 12px;
            margin-top: 0px;
            border-radius: 90px;
        }
        .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
            opacity: 1;
            transform-origin: left center;
            animation: 2s ease-in-out scale;
        }
        .tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
            transition: opacity 2s ease-out;
        }
        @keyframes scale {
            0% {transform: scaleX(0);}
            100% {transform: scaleX(1);}
        }  
    Alles anzeigen

    Wenn es jetzt immer noch nicht passt, dann verstehe ich's nicht!
    Habe es in einem neuen, sauberen Testprofil mir angeschaut, alles so, wie es sein soll,
    ob mit oder ohne Menüleiste, egal.

    AH, Titelleiste!!!
    Ja, Scheibenkleister, ja die muss aktiviert sein.

  • Tabform

    • Mira_Belle
    • 22. März 2026 um 17:42
    Zitat von Sören Hentzschel

    Nicht ganz unverändert: Du hast die Menüleiste aktiviert, deswegen passt es bei dir. Das ist keine Standardkonfiguration. ;) Und selbst mit Menüleiste passt da ja optisch nichts zueinander.

    Die Menüleiste habe ich auch aktiviert, aber selbst wenn diese deaktiviert wird, ist alles so, wie es sein soll,
    besser, wie ich es gerne hätte.

    Zitat von 2002Andreas

    Aber wie Sören schon schrieb, nur mit eingeblendeter Menüleiste. Ohne ist auch alles verschoben.

    Mh, nö. Und auch wenn ich die Lesezeichenleiste noch zusätzlich ausblende (deaktiviere),
    alles so, wie es sein soll.

Unterstütze uns!

Jährlich (2026)

34 %

34% (263,24 von 775 EUR)

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