...und eine weitere Bitte um userChrome.css-Anpassung für FX 89

UliBär

Moin zusammen,

da wieder mal umfänglich an der Oberfläche "verbessert" wurde, fällt die Optik meines Firefoxes schon wieder auseinander.

Wäre bitte mal Jemand so nett und könnte folgenden Code anpassen:

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
       
#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}

#TabsToolbar {
    background: #e3e4e6 !important;
    position: absolute !important;
    display:block !important;
    bottom: -1px !important;
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }

:root {
    --tab-min-height: 30px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
    }
       
.tabbrowser-tab:not([pinned]) {
    -moz-box-flex: 0!important;
    width: 200px!important;
    }
}

#nav-bar toolbarspring {
    background: transparent !important;
    max-width: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.bookmark-item[container="true"] {
    fill:#D08000 !important;
/*    color:blue !important; /* */
}

Alles anzeigen

Natürlich habe ich auch das Problem mit den nach unten geplumsten Tabs, allerdings sind auch sämtliche Lesezeichen plötzlich wesentlich "raumgreifender" und verschwenden unnütz Platz. Ich bemühe mich ja schon, die Anpassungen auf ein Minimum zu beschränken, aber selbst das muß immer wieder zerbastelt werden.

Schon mal Danke im Voraus!

2002Andreas

Zitat von UliBär

und könnte folgenden Code anpassen:

Teste bitte mal:

CSS

#TabsToolbar {
    background: #e3e4e6 !important;
    position: absolute !important;
    display:block !important;
     top: 100px !important; /*Abstand nach oben*/
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }

:root {
    --tab-min-height: 34px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
    }
       
.tabbrowser-tab:not([pinned]) {
    -moz-box-flex: 0!important;
    width: 200px!important;
    }
}

#nav-bar toolbarspring {
    background: transparent !important;
    max-width: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.bookmark-item[container="true"] {
    fill:#D08000 !important;
/*    color:blue !important; /* */
}








#search-container, #urlbar-container {
  --urlbar-container-height: 32px !important;
  padding-block: 2px !important;
}

#urlbar, #searchbar {
  --urlbar-height: 26px !important;
  --urlbar-min-height: 26px !important;
  --urlbar-toolbar-height: 32px !important;
}

#urlbar-input-container {
  --urlbar-icon-padding: 4px !important;
  border: 0 !important;
}

Alles anzeigen

UliBär

Danke, das geht schon in die richtige Richtung:

Allerdings sind die Lesezeichen unverändert.

2002Andreas

Zitat von UliBär

die Lesezeichen unverändert.

So sieht das hier mit dem Code aus:

UliBär

Ah sorry, ich meinte die aufklappenden Lesezeichenmenüs. Die Einträge sind dort viel weiter (30%?) auseinander und müssen scrollen, wo sonst die Bildschirmhöhe bisher ausreichte.

Die vertikale Position der Tabs werde ich selbst hinbekommen, aber von dem komplett überladenen monströsen URL-Bar-Ausklapp-Dingsda(?) will ich noch gar nicht reden...

2002Andreas

Zitat von UliBär

Die vertikale Position der Tabs

In Zeile 5 mal mit einem anderen Wert testen.

Zitat von UliBär

aufklappenden Lesezeichenmenüs. Die Einträge sind dort viel weiter (30%?) auseinander

Gilt für alle Abstände:

CSS

/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
  padding-block: 0 !important;
  padding-inline-start: 14px !important;
}

Zitat von UliBär

monströsen URL-Bar-Ausklapp-Dingsda(?) will ich noch gar nicht reden.

Sieht hier so aus:

Mit diesem kompl. Code:

CSS

#TabsToolbar {
    background:  #e3e4e6 !important;
    position: absolute !important;
    display:block !important;
     top: 110px !important; /*Abstand nach oben*/
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }

:root {
    --tab-min-height: 34px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
    }
       
.tabbrowser-tab:not([pinned]) {
    -moz-box-flex: 0!important;
    width: 200px!important;
    }
}

#nav-bar toolbarspring {
    background: transparent !important;
    max-width: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.bookmark-item[container="true"] {
    fill:#D08000 !important;
/*    color:blue !important; /* */
}

#search-container, #urlbar-container {
  --urlbar-container-height: 32px !important;
  padding-block: 2px !important;
}

#urlbar, #searchbar {
  --urlbar-height: 26px !important;
  --urlbar-min-height: 26px !important;
  --urlbar-toolbar-height: 32px !important;
}

#urlbar-input-container {
  --urlbar-icon-padding: 4px !important;
  border: 0 !important;
}


/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
  padding-block: 0 !important;
  padding-inline-start: 14px !important;
}

Alles anzeigen

Sören Hentzschel

Zitat von UliBär

aber von dem komplett überladenen monströsen URL-Bar-Ausklapp-Dingsda(?) will ich noch gar nicht reden

Was soll sich daran, abgesehen von den Farben, in Firefox 89 geändert haben?

UliBär

Danke Andreas!

Mit folgendem Code kann ich erstmal leben:

CSS

#TabsToolbar {
    background: #e3e4e6 !important;
    position: absolute !important;
    display:block !important;
     top: 87px !important; /*Abstand nach oben*/
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }

:root {
    --tab-min-height: 28px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 28px !important; 
    }
       
.tabbrowser-tab:not([pinned]) {
    -moz-box-flex: 0!important;
    width: 200px!important;
    }
}

#nav-bar toolbarspring {
    background: transparent !important;
    max-width: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.bookmark-item[container="true"] {
    fill:#D08000 !important;
/*    color:blue !important; /* */
}

/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
  padding-block: 0 !important;
  padding-inline-start: 14px !important;
}

#search-container, #urlbar-container {
  --urlbar-container-height: 32px !important;
  padding-block: 2px !important;
}

#urlbar, #searchbar {
  --urlbar-height: 26px !important;
  --urlbar-min-height: 26px !important;
  --urlbar-toolbar-height: 32px !important;
}

#urlbar-input-container {
  --urlbar-icon-padding: 4px !important;
  border: 0 !important;
}

Alles anzeigen

Sieht auch optisch wieder ok aus:

Und das Beste: Die Lesezeichen sind nun sogar noch kompakter!

@Sören:

Ich bin mir nicht sicher, aber ich hatte vorher Code im userChrome.css, der das Ding etwas im Zaum hielt. Der scheint aber nicht mehr zu wirken und wurde auch von Andreas entfernt.

2002Andreas

Zitat von UliBär

Mit folgendem Code kann ich erstmal leben:

Freut mich, war wie immer gern geschehen

Zitat von UliBär

ich hatte vorher Code im userChrome.css, der das Ding etwas im Zaum hielt.

Teste einfach mit diesem Teil zusätzlich aus deinem alten Code mal:

CSS

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}

Alles anzeigen

UliBär

Hab ich gemacht, aber bis auf den dann fehlenden Schatten bemerke ich keinen Unterschied.

Aber der fehlende Schatten bringt tatsächlich schon etwas!

Bin zufrieden, Danke für die schnelle Hilfe!

2002Andreas

Zitat von UliBär

Danke für die schnelle Hilfe!

Gerne doch

myfire

Zitat von UliBär

Danke Andreas!
Mit folgendem Code kann ich erstmal leben:

Hallo UliBär und Andreas,

danke für den Code #8, der läuft bei mir auch soweit gut, hat die Tabs wieder hochgezogen.

Habe nur das Problem, dass die Tabs unvollständig angezeigt werden (Anhang).

Die inaktiven Tabs werden von der angezeigten Website-Fläche unten teilweise überdeckt, wenn sie nicht aktiv sind.

Nur ein aktiver Tab wird vollständig angezeigt, dann überdeckt er aber die Website-Fläche darunter.

Habt Ihr einen Tipp, woran es liegen könnte?

Hab verschiedene Themes ausprobiert, da ist immer das gleiche Problem

Danke!

UliBär

Versuche mal in dieser Zeile:

CSS

     top: 87px !important; /*Abstand nach oben*/

die "87px" schrittweise zu verkleinern - z. B. 83px oder weniger - bis es bei Dir hinhaut.

Zum Testen des neuen Wertes muß der Firefox neu gestartet werden.

gabinski

Hallo zusammen,

weiß gar nicht, ob ich hier im richtigen Thread gelandet bin...

Auch bei mir hängen die Tabs ganz unten und es ist nur der aktuelle sichtbar.

Hatte ihn letztes Jahr mit einem Skript angepasst, nur leider weiß ich nicht, was/wo genau ich was ändern muss.

Wäre lieb, wenn mir jemand helfen könnte

Skript.txt

btw... Wie bekomme ich denn das Skript in die Nachricht, ohne eine Datei anzuhängen? Einfach reinkopieren?

myfire

Zitat von UliBär
Versuche mal in dieser Zeile:
CSS
     top: 87px !important; /*Abstand nach oben*/
die "87px" schrittweise zu verkleinern - z. B. 83px oder weniger - bis es bei Dir hinhaut.
Zum Testen des neuen Wertes muß der Firefox neu gestartet werden.

Danke, das sieht schon gut aus.

Dabei schiebt es aber die graue Hintergrundleiste der Tabs nach oben, die überlagert z.T. schon die Bookmarks.

Habe mit den

--tab-min-height: und --tab-max-height:

herumprobiert (einzige Höhenangabe), das ist es aber nicht.(siehe Screenshot)

Wie bekomme ich die an die richtige Position, so dass sie nicht oben übersteht und darunter den Hintergrund zeigt.

Danke!

gabinski

Zitat von gabinski

btw... Wie bekomme ich denn das Skript in die Nachricht, ohne eine Datei anzuhängen? Einfach reinkopieren?

Ok, das war einfach

Jetzt also noch mal richtig:

Zitat von gabinski

Hallo zusammen,
weiß gar nicht, ob ich hier im richtigen Thread gelandet bin...
Auch bei mir hängen die Tabs ganz unten und es ist nur der aktuelle sichtbar.
Hatte ihn letztes Jahr mit einem Skript angepasst, nur leider weiß ich nicht, was/wo genau ich was ändern muss.

CSS

    /*Tableiste unten im privaten Fenster*/
    /*Lila Icon oben rechts*/
    
    #main-window[privatebrowsingmode=temporary] #PanelUI-menu-button.toolbarbutton-1 stack.toolbarbutton-badge-stack {
         padding-left: 30px !important;
         background: url("chrome://browser/skin/private-browsing.svg")no-repeat !important;
         }
        
    #main-window[privatebrowsingmode=temporary] .private-browsing-indicator {
        display: none !important;
        }
    
    #main-window[privatebrowsingmode=temporary] #TabsToolbar {
        position: absolute !important;
        display:block !important;
        bottom: -2px !important;
        width: 100vw !important;
        }
          
    #main-window[privatebrowsingmode=temporary] .tab-line[multiselected], .tab-line[selected="true"]{
        display: none !important;
        }
    #main-window[privatebrowsingmode=temporary] .tabbrowser-tab[visuallyselected="true"]{
        margin-top: -4px !important;
        max-height: 35px !important; 
        }
    #main-window[privatebrowsingmode=temporary] #tabbrowser-tabs {
        width: 100vw !important;
        }
            
    #main-window[privatebrowsingmode=temporary]:not([chromehidden*="toolbar"]) #navigator-toolbox {
        padding-bottom: var(--tab-min-height) !important;
        }
    /*Höhe der Tabs im privaten Fenster*/
    #main-window[privatebrowsingmode=temporary]:root {
        --tab-min-height: 35px !important; 
        }
            
    #main-window[privatebrowsingmode=temporary]:root #tabbrowser-tabs {
        --tab-min-height: 35px !important; 
        }
    /*Breite der Tabs im privaten Fenster*/
    #main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([pinned]) {
        -moz-box-flex: 0!important;
        width: 180px!important;
        }
        
    /* Ab hier für normales Fenster*/
    @-moz-document url(chrome://browser/content/browser.xhtml) {
           
    #TabsToolbar {
        position: absolute !important;
        display:block !important;
        bottom: -0px !important;
        width: 100vw !important;
        }
    #tabbrowser-tabs {
        width: 100vw !important;
        }
            
    #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
        padding-bottom: var(--tab-min-height) !important;
        }
    :root {
        --tab-min-height: 35px !important; 
        }
            
    :root #tabbrowser-tabs {
        --tab-min-height: 35px !important; 
        }
           
    .tabbrowser-tab:not([pinned]) {
        -moz-box-flex: 0!important;
        width: 180px!important;
        }
    /*Damit wird der Tabtext nicht ausgeblendet am Ende*/    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
        mask-image: none !important;
        }
    }

Alles anzeigen

Vielen Dank schon mal für Hilfe!

myfire

Zitat von myfire
Zitat von UliBär
Versuche mal in dieser Zeile:
CSS
     top: 87px !important; /*Abstand nach oben*/
die "87px" schrittweise zu verkleinern - z. B. 83px oder weniger - bis es bei Dir hinhaut.
Zum Testen des neuen Wertes muß der Firefox neu gestartet werden.
Danke, das sieht schon gut aus.
Dabei schiebt es aber die graue Hintergrundleiste der Tabs nach oben, die überlagert z.T. schon die Bookmarks.
Habe mit den
--tab-min-height: und --tab-max-height:
herumprobiert (einzige Höhenangabe), das ist es aber nicht.(siehe Screenshot)
Wie bekomme ich die an die richtige Position, so dass sie nicht oben übersteht und darunter den Hintergrund zeigt.

Danke!
Alles anzeigen

Hat jemand eine Idee, wie man die Tabzeile richtig vertikal posiitonieren kann?

...und eine weitere Bitte um userChrome.css-Anpassung für FX 89

Ähnliche Themen

Keine Cookies an Server senden

Tabs verschieben in mehrzeiliger Tableiste

Firefox automatisch Konfigurieren

Download schlägt fehl

Diverse Skripts funktionieren nicht mehr