Beiträge von Horstmann

Hmm, stimmt, da war noch was mit den relativen Elementpositionen (oder so), evtl. top zu margin-top ändern, und left zu margin-left, so wie hier einige weitere Änderungen s. auch hier, Breite, Hintergrund etc..

Dann könnte das sowas sein für den entsprechenden CSS Teil:

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

Den Code vom OP komplett zu modernisieren müsste evtl. jemand anders angehen.

Zitat von Mira_Belle

Und ganz ehrlich, weder bei Aris noch bei MrOtherGuy findet man eine Lösung genau zu diesem Problem!

Findet man schon, aber zugegebenermassen muss man die Antwort fast schon kennen für die richtige Suche.

--urlbar-toolbar-height ist eine alte Variable, die nicht mehr existiert, und für diesen Zweck in den relevanten Dritt-CSS für die Urlbar oft mit --urlbar-container-height ersetzt wird.

Beide Variablen sind (bzw. war) in Fx definiert.

Zitat von .DeJaVu

Hat er zwar nicht, aber Aris bietet sowas an, genau dafür. Und das funktioniert und ist stets aktuell.

Aris Code ist super, aber zu kompliziert für Basis Anpassungen und die meisten User mit Kreativambition, es ist eher ein Komplettpaket.
Das Thema hast du immer noch verfehlt, und kein Link.

Zitat von aalbani

Ich meine das Browser Fenster...

Innen geht mit CSS, aussen wird generell vom OS bestimmt, soweit ich mich erinnere.
Eine halbwegs verständliche Frage, evtl. mit Screenshots, wäre hilfreich, oder geh nach Reddit Fx CSS, das wurde unendlich oft diskutiert.

Zitat von .DeJaVu

Code

#urlbar[breakout][breakout-extend] {
  height: auto; <-- MIST

Warum wird die Lösung von Aris CSS nicht genutzt?

Hat er doch gar nicht im CSS.

Und dann evtl. noch ein Link zur Aris Lösung, den Code kann man nicht so leicht auswendig kennen (und ich war buchstäblich 1000x drin).

Im Zweifel immer auch mal bei MrOtherGuy vorbeischauen, für überschaubare Aktualisierungen.

Also...

Zitat

Just replace --urlbar-toolbar-height with --urlbar-container-height --->

top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;

Zitat von Mira_Belle

Der Basiscode ist stimmig, wenn Du auf meine Symbol.us.js anspielst.

Das lässt sich nicht direkt übernehmen, aber so schreibt man einen stimmigen CSS Code.
Bei Aris gibt's evtl. etwas Ähnliches.
Wenigstens die Positionierungen und Dimensionen von Icons sollten ja nicht soooo schwierig sein, oder zumindest halbwegs Sinn machen ohne dieses Codegewürge in alle Richtungen.

Ein paar Amateurtips hatte ich ja schon gegeben irgendwo, aber wenn euer Zeug so für mache Leute funktioniert, dann ist ja gut.

Zitat von Mira_Belle

Aber Obacht, es gibt Kontextmenüs, da lassen sich die Abstände nicht auf diese Weise "korrigieren"!
Denn die Selektoren werden auch in anderen Menüs verwendet und wenn Du so einen erwischst
und versuchst nach links zu schieben, hast Du das Problem, dass der gleiche Menüeintrag dann in dem
anderen Menü viel zu weit links steht.

Warte einfach noch ein, zwei Versionen ab, dann, so denke ich, wird sich das alles gelegt haben.
Dann wirst Du auch die "Korrekturen" wie der entfernen müssen.

Zum einen gibt es CSS Lösungen um Regeln einzugrenzen, zum anderen sind Kontextmenüs teils OS abhängig; keine Fx Version wird das ändern oder einem die Mühe für stimmigen Basis Code abnehmen.

Zitat von bananovic

Zitat von Horstmann

in ihrer jüngsten Form, wie etwa bei Aris zu finden.

Das Paket CustomCSSforFx-master ist von 2025.

Und du benutzt das, und nur das, und das komplette Paket - wofür ich mir den Link jetzt nicht selber raussuche - in einer mit Fx 141 kompatiblen Version?

Zitat von bananovic

Na gut

Ursache gefunden - Beratungsresistenz !

Deine Codes schiessen sich gegenseitig ab; bei der Nutzung von komplexem Fremd-CSS, und ohne Eigeninitiative, gibt es keine Lösung ausser auf regelmässig aktualisierte Lösungen zurückzugreifen, und die exklusiv zu benutzen in ihrer jüngsten Form, wie etwa bei Aris zu finden.

Oder eben aktuellen Code wie hier von Mira, aber dann auch nur das, nicht zusammen mit uralten Teilcodes.

Zitat von Firefox_94.0.1

Ich bin leider erst jetzt dazu gekommen, den Code zu testen. Mit der zweiten Alternative passt es wieder.

Prima.

Auf dem Mac ist es anders, aber ich habe ein CSS um die System Windowbuttons mit den Fx Buttons zu ersetzen, und hier wäre der eigentlich korrekte Code für deine Farben eher sowas hier, nur so zur Vollständigkeit (wie gesagt, ist halt sehr OS abhängig):

#main-window .titlebar-buttonbox .titlebar-button .toolbarbutton-icon {
    border-radius: 5px !important;
    fill: white !important;
}

#main-window .titlebar-buttonbox .titlebar-button:hover .toolbarbutton-icon {
    fill: black !important;  
}

#main-window .titlebar-min:hover .toolbarbutton-icon {
   background-color: #66FF66 !important;
}
 
#main-window :is(.titlebar-max, .titlebar-restore):hover .toolbarbutton-icon {
   background-color: #FFFF00 !important;
}
 
#main-window .titlebar-close:hover .toolbarbutton-icon {
   background-color: #FF0000 !important;   
}

Zitat von Mira_Belle

Zitat von Horstmann

Bei nur sehr begrenzten Erfahrung mit AI: niemals Code direkt übernehmen, nicht eine Zeile, ohne gegen zu recherchieren.

Wann darf KI genutzt werden?
Darf überhaupt KI genutzt werden?

Ich meine nur das was ich ausgedrückt hatte, nicht was du evtl. denkst was ich meine - was ich meine das meine ich aber.

Jeder kann AI fragen oder Rumpelstilzchen, ist ja ein freies Land hier.
Aber wie Sören es auch nochmal dargelegt hat, AI zu nutzen ohne sich um ein Fundament zu bemühen bringt schnell beliebige Blähungen ohne Sinn mit sich.

AI ist eine Krücke, Recherchen sind Bausteine; AI kann Teil der Recherche sein, aber nicht alleine stehen.
Und nicht zu vergessen, AI bemüht sich verzweifelt darum dir Antworten zu liefern, egal welche, und benutzt deine Präferenzen.

Beispiel; chatGPT sollte eigentlich nicht wissen dass ich gerne lightblue benutze für Testhintergünde, gibt mir aber einen Code mit eben diesem HG, was nicht in der Frage enthalten war, aber evtl. in einer früheren Anfrage.
Ich war nicht eingeloggt zu dem Zeitpunkt.

Also frage ich, ob der Otto meinen Code liest; Antwort:

Zitat

Good catch — no, I didn’t access your code or environment. I used `background-color: lightblue;` purely as a **placeholder example**, not because I knew your actual styles. It’s a common, visible color often used in demos to show that something is working visually.

BS, wie der Ami sagt, kein (anderes) Schwein benutzt die Farbe.

Zitat von Mira_Belle

Verstehe, ist auch nicht ganz einfach, gebe ich zu. Vielleicht habe ich doch ein Händchen dafür, mit diesen
widerspenstigen Programmen, KI's sind nichts anderes, umzugehen.

Bei nur sehr begrenzten Erfahrung mit AI: niemals Code direkt übernehmen, nicht eine Zeile, ohne gegen zu recherchieren.
Wenn ich's nicht auf stackoverflow, searchfox, MDN etc. bestätigt bekomme, kommt's nicht rein.

AI ist eine Antwortmaschine, die immer irgendwas liefern muss, basierend auf User Präferenzen, kein Programm in dem Sinn dass es nur sinnvolle Ergebnisse erlaubt.
Es gibt hierzulande schon so einigen Code der direkt aus AI zu kommen scheint.

Zitat von Mira_Belle

Ok, alle komischen "Kästchen" sind weg!
Lösung ist zwar nicht besonders schön, aber funktioniert.

Das dauert hier wohl noch ein Weilchen.

Zitat von Sören Hentzschel

Die letzte Aussage versuchte ich mit dem zitierten Text klarzustellen. Das ist nicht der Fall. Es geht ausschließlich um menuitem-Elemente. Bei Elementen, für die list-style-image eine gültige CSS-Eigenschaft ist, gibt es keinen Grund, etwas zu ändern.

Danke.

Zitat von Sören Hentzschel

Zitat von 2002Andreas

list-style-image wurde entfernt.

Damit hier kein Missverständnis entsteht: Die CSS-Eigenschaft list-style-image gibt es nach wie vor. Aber der Grafik-Part des menuitem-Elements ist jetzt HTML und kein XUL mehr und das img-Element von HTML hat noch nie list-style-image unterstützt.

Wenn ich den aktuellen Code nicht ganz missverstehe: list-style-image wird nach wie vor benutzt, auch im aktuellen Nightly, aber ist an eben einigen Stellen ersetzt worden, und ist im Begriff weiter ersetzt zu werden; ähnlich wie background-image in letzter Zeit list-style-image teilweise ersetzt hatte. Oder?

Die momentane Diskussion suggeriert dass list-style-image gar nicht mehr existiert im Fx (Nightly) Code.

Nur mal ein Gedanke, hab die Nightly nicht parat: mit dem neuen Fx Code, kann man evtl. für das image einfach eine src zuweisen?

Zitat von bananovic

damit bin ich überfordert. Ich habe keine Ahnung, was ich wo eintragen muß.

Dann halt einfach den Code von Mira benutzen, und ihre Icons.
Beides erhältlich in der oben verlinkten Thread.

Zitat von Arsen

Das klappt, aber das Hoover vom Close Button stimmt nicht so ganz.

In Andreas' Code aus #2, probier mal stattdessen padding-inline-start: var(--tab-close-button-padding) !important;

Zitat von Arsen

Zitat von 2002Andreas

und pass dir den unteren Wert an:

Was ist der untere Wert?

max-width: 250px !important;; sollte eigentlich in dem Fall kaum einen Unterschied machen.

Zitat von lenny2

Ist es möglich, den gleichen Effekt mit aktivierter Title Bar zu erzielen?

Für Windows (geht nicht am Mac) ?

Das Ganze evtl. einfach ohne #main-window, wobei ich statt color: => fill: probieren würde.

/* Icon Farben ändern */

.titlebar-buttonbox .titlebar-button {
    color: #fff !important;
 }

/* Mouse-over Farbe ändern */

.titlebar-buttonbox .titlebar-button:hover {
    border-radius: 5px !important;
    color: black !important;
 }

/***** links *****/
.titlebar-buttonbox .titlebar-min:hover {
   background:#66FF66!important; /*Farbe: hellgrün*/
 }
 
/***** mitte *****/  
.titlebar-buttonbox .titlebar-max:hover {
   background:#FFFF00!important; /*Farbe: gelb*/
 }
 
.titlebar-buttonbox .titlebar-restore:hover {
   background-color:#FFFF00!important; /*Farbe: gelb*/
}
 
/***** rechts *****/  
.titlebar-buttonbox .titlebar-close:hover {
   background:#FF0000!important;   /*Farbe: rot*/
 }