Tab-Höhe

Ich versuche mittels CSS die Tabs anzupassen. Ich möchte folgendes erreichen:
1. Höhe der Tabs verringen
2. Rahmen nur rechts bei den nicht aktiven Tabs

Den Schließen-Button habe ich schon entfernt. Das hat geklappt. Auch die leicht abgerundeteten Ecken oben funktionieren. Tabs schließe ich mit dem Add-on Close-Tab-Button. Da ist der Button in der Tab-Zeile und nicht zwischen den anderen Ad-ons. Das hat aber keinen EInfluss auf die Tab-Höhe. Deaktiviere ich das Add-on, sind die Tabs immer noch zu hoch.

Für die Tab-Höhe habe ich folgendes im Internet gefunden, aber es funktioniert nicht:

/* TABS: height */
:root {--tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 30px !important;}
:root #tabbrowser-tabs {--tab-min-height: 30px !important;}
#TabsToolbar {height: var(--tab-min-height) !important;}
.tab-line[selected=true] {display:none!important;}
.tabbrowser-tab::after, .tabbrowser-tab::before {border-left: none !important;}
.tabbrowser-tab .tab-close-button {visibility: collapse !important;}

Die beiden Bilder zeigen IST und SOLL. Den Rahmen um die Tabs habe ich zwar wegbekommen, aber dafür ist der aktive Tab jetzt im 3D-Effekt gedrückt. Ich hätte gern die Tabs flach ohne 3D und bei den inaktiven Buttons rechts den Rand. Aber irgendwie klappt es nicht. Das andere Bild zeigt, wie ich es gern hätte mit der Höhe und damit auch dem Abstand zum Menü. So sieht es bei WaterFox standardmäßig aus. Dass man die Tabs im FF sicher nicht so elegant hinbekommt, wie beim WaterFox ist nicht das Problem. Aber Höhe und Ränder sollten doch eigentlich anzupassen gehen. Was mich auch stört, ist die Größe der Adresszeile. Ist sie leer, dann ist das so ein gewaltiger Kasten, wie im Bild. Steht etwas drin, ist sie nicht mehr so hoch. Die Googlesuche brauche ich eigentlich an dieser Stelle nicht. Wenn sie durch einen entsprechenden CSS- oder JS-Eingriff verschwindet, ist das kein Verlust. Ich benutze das Feld nur für Web-Adressen. Suche ich etwas über Google, dann gehe ich auf google.de.

Danke für jeden Tip

Thomas

Zitat von grisu2099

Deine Bilder sind nicht sichtbar. Bitte überarbeiten...

Warum sehe ich dann die Fotos im Post? Was soll ich deiner Meinung nach überarbeiten?

Zitat von 2002Andreas

Zitat von ThomasADD

Ich möchte folgendes erreichen:

Meinst du das so?

CSS

.tabbrowser-tab {
    max-height: 26px !important;
}

.tabbrowser-tab:not([selected]) .tab-content { 
    border-right: 2px solid black !important;
}

.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px !important;
    border-left: 0px solid !important;
    border-image: none !important;
    border-image-slice: 0 !important;
    width: 0px !important;
    box-sizing: border-box;
    opacity: 0 !important;
}

Alles anzeigen

Danke. Das hat geholfen. Allerdings klebt der Tab am Menü und hat Abstand zur darunter liegenden Adresszeile. Ich wollte es eigentlich umgekehrt, dass leere Bereich oben ist. Muss ich da noch was anderes einstellen?

Thomas