FF89: kleines optisches Problem beim TAB-aufhübschen

Boersenfeger

~~Vielen Dank!~~

~~Problem gelöst!~~

~~Mit diesem Code kommt kein blauer Rahmen mehr, wenn ich einen Tab anklicke...~~

CSS

    /* Blauer Rahmen im angewählten Tab weg */
    
    .tabbrowser-tab {
    --focus-outline: none!important;
    }

Edit: Das gibts doch gar nicht... nach einer gewissen Zeit erscheint dieser dann wieder....

Mehrfacher Browserneustart, andere Tabs geöffnet und geschlossen, dann aufs Handy geguckt NED VS CZE , dann wieder agiert und plötzlich ist der blaue Rahmen wieder da....

milupo

Es funktioniert auch, irgendwie hat es dann geklemmt, als ich die Codezeile entfernt hatte und der Rahmen kam nicht wieder, obwohl ich Firefox neu gestartet hatte, Dann kam der Rahmen doch wieder. Und jetzt habe ich einen weiteren Beweis:

CSS

.tabbrowser-tab {
        --focus-outline: 2px solid green !important;        
 }

Damit konnte ich einen grünen durchgehenden Rahmen von 2px Dicke zuweisen.

2002Andreas

Hatte ich doch gesagt

Und wenn dann müsste es auch um den ganzen Tab gehen, und nicht nur in der

in der Mitte sein.

Zitat von milupo

Dann kam der Rahmen doch wieder.

Der ist außen um den ganzen Tab, und nicht nur mittig wie auf dem Screenshot von Bf.

milupo

Zitat von 2002Andreas

Der ist außen um den ganzen Tab, und nicht nur mittig wie auf dem Screenshot von Bf.

Ach so, hätte ich doch mal genauer auf seine Bildschirmfotos schauen sollen. Sein Problem habe ich hier nicht.

2002Andreas

Zitat von milupo

Sein Problem habe ich hier nicht.

Ich ja auch nicht, daher vermute ich einen weiteren Code bei ihm

milupo

Ich habe spaßeshalber Boersenfegers Code aus Beitrag #11 in einem frischen Nightly-Profil getestet, kein blauer Rahmen weit und breit. Weder im Tab noch um den Tab.

Boersenfeger

so, weiter gehts....

Ich werde jetzt mal alle anderen CSS-Codes nach und nach abschalten... und wenn das nicht hilft, auch alle Scripts... dann erkenne ich meinen Fuchs vermutlich nicht wieder...

Boersenfeger

Nebenbei habe ich jetzt den CSS-Code eingefügt um die Tabs unter der Adresszeile zu positionieren und das bisher genutzte Script entsorgt.

Tabs runter CSS von 2002Andreas

Dabei muss ich noch eine Größenanpassung der Tabs oder der Tabsleiste einbauen, die ich aber mal wieder nicht hinkriege.

Ich nutze das Script TabFocus.uc.js.

JavaScript

// ==UserScript==
// @name           TabFocus.uc.js
// @startup        window.tab_hover.onLoad();
// @shutdown       window.tab_hover.onUnload();
// @version        2014.8.23
// @note           修改为无需重启的方式
// ==/UserScript==

var tab_hover = {
   event:null,
   tid:null,

   getTab: function(element) {
      while (element && element.localName != 'tab') {
        element = element.parentNode;
      };
      return element;
   },
   onLoad: function() {
      gBrowser.tabContainer.addEventListener("mouseout", tab_hover.onMouseOut, false);
      gBrowser.tabContainer.addEventListener("mouseover", tab_hover.onMouseOver, false);
   },
   onUnload: function() {
      gBrowser.tabContainer.removeEventListener("mouseover", tab_hover.onMouseOver, false);
      gBrowser.tabContainer.removeEventListener("mouseout", tab_hover.onMouseOut, false);
   },

   onMouseOver: function(event) {
      tab_hover.event = event.target;
      tab_hover.tid = setTimeout(function() {
         gBrowser.selectedTab = tab_hover.getTab(tab_hover.event);
      }, 250);
   },
   onMouseOut: function() {
      clearTimeout(tab_hover.tid);
   }
};
tab_hover.onLoad();

Alles anzeigen

Hier kann ich keine Größenangabe/Breite der Tabs erkennen. Der fokussierte Tab passt in die Tableiste... bei den anderen fehlt am oberen Rand die Linie.

Dabei wäre mir egal, ob die Tabs ein paar Px schmäler oder die Tableiste entsprechend breiter ausfallen.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Der blaue Rahmen stammt dann wohl aus dem Script TabNumber.uc.js. Könnte dies jemand mal verifizieren und ggf. "säubern"?

JavaScript

/* Tabs nummerieren */

// ==UserScript==
// @name           Numbered Tabs
// @namespace      http://anttirt.net/
// @description    Adds numbers to tab labels (useful with eg. Pentadactyl)
// @include        main
// @compatibility  Firefox 4.0
// @author         anttirt
// @version        1.0b
// @homepage       https://github.com/anttirt/numbered-tabs-firefox
// ==/UserScript==

(function() {
    var stripPat = /^\d\d*  /;
    var container = gBrowser.tabContainer;

    function update(event) {
        var tab = event.target;
        if(typeof tab.tabIndex == "undefined") {
            updateAll();
        }
        else {
            tab.label = String(tab.tabIndex) + "  " + tab.label.replace(stripPat, "");
        }
    }

    function updateAll(event) {
        var skip = false;
        for(var i = 0; i < container.allTabs.length; ++i) {
            var tab = container.allTabs[i];
            if(event.type == "TabClose" && tab == event.target) {
                skip = true;
                continue;
            }
            tab.tabIndex = i + (skip ? 0 : 1);
            tab.label = String(tab.tabIndex) + "  " + tab.label.replace(stripPat, "");
        }
    }

    container.addEventListener("TabAttrModified", update, false);
    container.addEventListener("TabOpen", updateAll, false);
    container.addEventListener("TabMove", updateAll, false);
    container.addEventListener("TabClose", updateAll, false);
})();

Alles anzeigen

Ich hoffe, man kann es lösen...

Edit: Man muss ggf. einen Tab löschen um die Wirkung des Scripts auszulösen..

2002Andreas

Zitat von Boersenfeger

und das bisher genutzte Script entsorgt.

Auch hier die Frage...warum

Damit gab/gibt es doch keinerlei Probleme.

Zitat von Boersenfeger

Der blaue Rahmen stammt dann wohl aus dem Script

Das kann ich bestätigen.

Boersenfeger

Ich habe drüben geantwortet...

milupo

Zitat von 2002Andreas

Das kann ich bestätigen.

Was kannst du genau bestätigen, Andreas? Dass das Skript für die Nummerierung der Tabs nur den blauen Rahmen einfügt oder auch, dass er so mittig wie bei Boersenfeger eingefügt wird? Ich benutze ebenfalls das Skript für die Nummerierung. Möglich, dass das den Rahmen verursacht. Es verursacht aber sicher nicht die mittige Darstellung des Rahmens, zumal im Skript überhaupt keine CSS-Eigenschaft definiert wird.

2002Andreas

Zitat von Boersenfeger

Der blaue Rahmen stammt dann wohl aus dem Script TabNumber.uc.js.

Teste bitte mal:

CSS

tab.tabbrowser-tab {
    --focus-outline-width: 0px !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
}

Zitat von milupo

Was kannst du genau bestätigen, Andreas?

Zumindest erscheint hier ein blauer Rahmen mittig durch das Script.

Die Abstände passen hier natürlich nicht mit dem Code von Bf.

Boersenfeger

Das scheint zu greifen...

2002Andreas

Zitat von Boersenfeger

eine Größenanpassung der Tabs oder der Tabsleiste einbauen

Teste bitte mal:

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;    
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;    
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important; 
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; 
    }
 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; 
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar .tabbrowser-tab {
    max-height: 39px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 0px !important;
    margin-right: 0px !important;
    } 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;
    }
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;
    }

    .tab-icon-sound-image {
    height: 1.7em !important;
    }
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    padding-top: -5px!important;
    width: 16px !important;
    }

    /*Tabs in Tableiste mittig*/
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.7, 1.7) !important;
    }
    
    image.tab-icon-overlay {
    top: 3px !important;
    padding-right: 3px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
    box-shadow: none !important;
}

Alles anzeigen

milupo

Ich kann jetzt das Problem ebenfalls bestätigen. Ich habe jetzt das Skript in das „frische“ Profil kopiert, wo ich den CSS-Code von Boersenfeger gestern getestet habe. Dort ist jetzt nur dieser CSS-Code, dieses Skript und das Skript für die Tableiste unter der Lesezeichenleiste drin.

2002Andreas

Zitat von milupo

Ich kann jetzt das Problem ebenfalls bestätigen.

Und den Vorschlag aus Beitrag Nr. 32?

milupo

Zitat von 2002Andreas

Und den Vorschlag aus Beitrag Nr. 32?

Der Rahmen erscheint nicht mehr, aber --focus-outline(-xxx) war ja von Anfang an mein Vorschlag. Ich bin dennoch nicht so richtig überzeugt, dass das Problem damit gelöst ist. Es wird dadurch nur umgangen. Denn wenn ich --focus-outline-width auf 2px setze und --focus-outline-color auf green, kommt natürlich der Rahmen wieder und eben auch in der verschobenen Form.

Ich habe allerdings jetzt noch nicht deinen Code aus Beitrag #34 getestet.

2002Andreas

Zitat von milupo

Denn wenn ich

Richtig.

Darum funktioniert mein Code auch nur als 3-Zeiler, und nicht ein einzelner Teil davon.

Zitat von milupo

noch nicht deinen Code aus Beitrag #34 getestet.

Da geht es nur um die unterschiedliche Tabhöhe aktiv...deaktiv.

milupo

2002Andreas Erst einmal herzlichen Glúckwunsch zu deinen Ehrentiteln. Ich hoffe, du bist auch als Legende noch „greifbar“.

Zitat von 2002Andreas

Da geht es nur um die unterschiedliche Tabhöhe aktiv...deaktiv.

Ja, habe gerade getestet und das Problem ist auch damit noch da.

Zitat von 2002Andreas

Darum funktioniert mein Code auch nur als 3-Zeiler, und nicht ein einzelner Teil davon.

Trotzdem umgeht er nur das Problem.

Boersenfeger

Leider passt es noch nicht ganz... die obere Linie der Umrandung ist jetzt sogar auch beim ausgewählten Tab nicht mehr zu sehen. Ausserdem habe ich das BOLD von allen Tabs entfernt. Es soll nur die aktive Tabbeschriftung fett sein..

Hier nochmal der jetzige Code:

CSS

        /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;   
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;   
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important; 
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; 
    }
 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; 
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar .tabbrowser-tab {
    max-height: 36px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 0px !important;
    margin-right: 0px !important;
    } 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;
    }
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;
    }

    .tab-icon-sound-image {
    height: 1.7em !important;
    }
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    padding-top: -5px!important;
    width: 16px !important;
    }

    /*Tabs in Tableiste mittig*/
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.7, 1.7) !important;
    }
    
    image.tab-icon-overlay {
    top: 3px !important;
    padding-right: 3px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
    [multiselected]) > .tab-stack > .tab-background
    {
    box-shadow: none !important;
    }

    /* Blauer Kasten weg */

    tab.tabbrowser-tab {
    --focus-outline-width: 0px !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

Und das jetzige Aussehen

Wenn die Tabs noch 2oder 3 px nach unten rutschen, müsste der obere Rand ja eigentlich zum Vorschein kommen...