Höhe der Tabs und der Leiste darunter ändern (inklusive den Symbolen von z.B Addons)

sotnu

Das Problem ist an dem Code (zumindest bei mir) leider, dass die Symbole nicht zentriert sind und die Symbole auf verschiedenen Höhen sind. Und mit (nur) min-height werden die Tabs nicht kleiner, wie das kleinst mögliche in Firefox. Man sieht das aber alles erst (so richtig), wenn man die nav-bar mal 23px hoch macht.

Ich habe mal ein Bild gemacht. Das linke Fenster ist Firefox ohne jegliche .css (Dichte - kompakt) und das Rechte mit deinem unveränderten code (Dichte auch kompakt). Das rechte verbraucht sogar in der Höhe minimal mehr, wie der Standart-Fox auf Dichte - kompakt.

Wenn man jetzt die Werte auf z.B 23px setzt, sind die Symbole in der nav-bar abgeschnitten, nicht gleich hoch und die Tab-höhe ändert sich nicht unter Firefox default-minimum.

https://abload.de/img/firefoxtabdnnermache_tpjfq.png

Deshalb habe ich bei mir das ganze margin-top gebastel gemacht (Bei mir funktioniert dein code leider nicht). Nur das Problem dabei ist, dass die Symbole verschoben werden, die Button aber nicht (Also betätigen kann man den Button nur im originalen Bereich, der aber abgeschnitten ist und z.T verschoben bzw sogar überschoben werden). Siehe im Bild (Link). Ich bin 3 Mal mit der Maus über einen Button gefahren und habe dann das ganze in Paint übereinander gelegt, damit man alle gleichzeitig sieht. Links ist meine Version und rechts ein Vergleich ohne css (also im Grunde die selbe Version wie im Bild oben das linke Fenster)

https://abload.de/img/firefoxtabdnnermachen9wkhp.png

Und ich habe heute noch gemerkt, dass mit meinem Code sich alles verschiebt, wenn man oben rechts auf maximieren klickt. In diesem maximierten Modus verkleinert sich nämlich die Höhe der Tabs und wenn ich das alles so einstelle, dass alles beim minimal möglichen ist, ist nacher im maximierten Modus alles zu klein/dünn.

Kann man irgendwie den maximierten Modus seperat ansprechen mit css codes, so dass ich dort andere Werte nutzen kann?

milupo

Tut mir leid, ich kann dir nicht mehr folgen. Du experimentierst offensichtlich mit irgendeinem Code, der nicht funktioniert. Du schreibst z. B. wieder von 23px. Ich nehme an, du meinst den Wert für .tabbrowser-tab. Wenn du siehst, dass der Wert nicht funktioniert, kannst du den nicht einfach erzwingen bzw. du musst herausfinden, warum der Wert nicht reicht. Den habe ich z. B. auf 32px gesetzt, wie auch alle anderen von mir genannten Werte. Die Bildschirmfotos sagen mir nicht viel, denn du verwendest anscheinend eigenen Code. Den musst du dann schon hier einstellen, damit man testen kann. Du bringst jetzt zum Beispiel auch die Dichte ein, davon war bisher gar keine Rede. Ich habe mit meinem Code aus Beitrag #60 keine Probleme, weder normal, noch kompakt, noch maximiert.

sotnu

Das sollte immer noch der Selbe code aus Post #39 sein. Also der hier:

CSS

/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/

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

/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/

#nav-bar {
    min-height: 24px !important;
    max-height: 24px !important;
    margin-top: -8px !important;
}

/*Das sollten die Symbole in der Navigationsleiste sein*/

#nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
{
    transform: scale(0.9,0.9) !important;
    margin-top: -8px !important;
}

/*Verändert das "+"-Zeichen um einen neuen Tab zu öffnen (funktioniert nicht)*/

/*#tabs-newtab-button {
    vertical-align: bottom !important;
    height: 22px;
}*/

/*Verändert (die Höhe) des schwarzen Hintergrund hinter den Tabs (aber nicht beliebig klein)*/

#TabsToolbar {
    min-height: 10px !important;
    max-height: 10px !important;
 }

/*verkleinert/vergrössert den Schliessen-,Minimieren- & Maximierenbutton*/

.titlebar-button {
    transform: translateY(-2px) scale(1,1);
}

/*Macht die (blaue) Linie beim aktiven Tab dünner*/

.tab-line {
    height: 1px !important;
}

/*Verändert die Höhe des (kompletten) Zoombutton*/

#zoom-controls {
    margin-top: -6px !important;
}

/*Verändert die Höhe des Menubutton (3 Striche)*/

#PanelUI-menu-button {
    margin-top: -6px !important;
}

/*Verändert die Höhe des "+" & "-" Zoombutton*/

#zoom-out-button, #zoom-in-button {
    margin-top: 6px !important;
}

Alles anzeigen

Aber ja, er funktioniert nicht richtig/perfekt. Wie gesagt, die Symbole in der Navigationsbar sind bei mir nun schön zentriert, nur die Buttons an sich sind nicht verschoben, sie sind genau am selben Ort (nur das Bild der Buttons).

Aber egal, ich nutze es jetzt mal so. Vlt. schaue ich mir das genauer an, wenn ich mehr Zeit habe.

Ich wollte nur anmerken, dass eben die Symbole in deinem Code nicht zentriert sind, wenn man die Navigationsbar dünner macht. Und ich meine mit 23px einfach alles, wo du 32px stehen hat durch 23px ersetzen. Aber selbst wenn man .tabbrowser-tab nicht verändert, sind die Symbole nicht zentriert.

Aber ja, ich muss irgendwann mal herausfinden, wie das geht. Ich bedanke mich auf jeden Fall noch mal bei allen für die Hilfe. Aber soweit "muss" ich den code hier in meinem Post nutzen, wenn ich die tabs und navigationsbar in der Summe dünner haben will, wie die dünnste Version im standart-firefox (eben kompakt).

Also danke nochmals für die Hilfe