FF 126: Adresseauflistung komplett nach oben verschoben und Umrandung der Url- und Searchbar nicht mehr

Mr. Cutty

Mit Firefox 126 wurde meine Adressauflistung extrem nach oben verschoben, die sonst am Abschluss der Urlbar positioniert war.

Auch ist die etws stärkere graue Umrandung um die Url- und Searchbar wenn man die Felder nicht nutzt weg., nur noch leicht grau.

CSS

/* -------------------------------------------------------- */
/* Anpassungen der Urlbar und Liste mit Adressenvorschlägen */
/* -------------------------------------------------------- */

/* Maximale Höhe der Adressenauflistung */

.urlbarView {
  height: 400px !important;
  max-height: 400px !important;
}

/* Abstand oben und unten in der Adressenauflistung */

#urlbar-results {
  margin-top: 2px !important;
  margin-bottom: 3px !important;
}

/* Scrollbar und Position der Adressenauflistung */

.urlbarView {
  overflow-y: scroll !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* Andere Farbe für Trennstrich zwischen Urlbar und Adressenauflistung */

.urlbarView-body-inner {
  border-top: 2px solid #7FB0EF !important;
}

/* Vergrößerung der Urlbar deaktivieren */

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 1px !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: 2px 2px 2px #787878 !important;
} */

#urlbar[breakout][breakout-extend][open] > #urlbar-background {
  border-radius: 4px 4px 4px 4px !important;
  border: 2px solid #7FB0EF !important;
  box-shadow: 2px 2px 2px #787878 !important;
}

Alles anzeigen

CSS

/* --------------------------------------------------- */
/* Umrandung um die Url- und Searchbar bei Inaktivität */
/* --------------------------------------------------- */

#urlbar:not([focused="true"], [open]):-moz-lwtheme > #urlbar-background, 
#searchbar:not(:focus-within):-moz-lwtheme {
   border: 1px solid #A6A6A6 !important;
}

regie510

Hallöchen,

mit diesen CSS-Änderungen oder ohne? Hier kam das Update gerade rein, ich sehe keine Unterschiede zu vorher.

Gruß, Nobby

Mr. Cutty

Der obige CSS ist der was ich bis FF 125.x hatte.

.DeJaVu

Sieht hier genau so falsch aus. Ist was mit dem CSS, muss ich schauen.

Ist bzw stört.

CSS

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

Da ich solche Anpassungen nicht nutze, kann ich dir nur das sagen, aber keine weitere Lösung.

Mr. Cutty

Danke. Durch das entfernen dieses Codes ist die Url-Auflistung schon mal wieder da wo sie hingehört (fast).

Horstmann

Zitat von Mr. Cutty

Danke. Durch das entfernen dieses Codes ist die Url-Auflistung schon mal wieder da wo sie hingehört (fast).

Du könntest eines noch probieren, gefunden hier.

Zitat

They changed CSS variable name so this is what I did.
top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;

Mr. Cutty

Perfekt. Danke.

Jetzt sieht das mit der Urlauflistung in der Urlbar wieder so aus wie vor FF 126.

Mr. Cutty

Hier die Sache mit der Umrandung der Suchergebnisse der Searchbar.

Nutz(t)e ich mal diesen CSS-Schnipsel, ...

CSS

/* -------------------------------------------------- */
/* Suchergebnisse unter Suchfenster mit blauen Rahmen */
/* -------------------------------------------------- */

  #PopupSearchAutoComplete {
  border-radius: 0 !important;
  border: 2px solid #0082FC !important;
}

#PopupSearchAutoComplete .autocomplete-richlistbox.search-panel-tree {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

Alles anzeigen

... da sieht es so aus:

Ich hatte den Teil jetzt schon länger ausdokumentiert. Es ging mal, aber nur das der blaue Rahmen zusätzlich zum grauen Rahmen erschien und nicht diesen ersetzte.

2002Andreas

Zitat von Mr. Cutty

zusätzlich zum grauen Rahmen erschien und nicht diesen ersetzte.

Meinst du das so?

Wenn ja, dann teste bitte mal:

CSS

/* -------------------------------------------------- */
/* Suchergebnisse unter Suchfenster mit blauen Rahmen */
/* -------------------------------------------------- */

  
#PopupSearchAutoComplete {
  border: 2px solid #0082FC !important;
  --panel-shadow: none !important;
  --panel-border-radius: 0 !important;
  --panel-border-color: #0082FC !important;
}

Alles anzeigen

Mr. Cutty

Bei mir kommt noch ein dickerer Außenrahmen.

Liegt eventuell daran das dies durch ...

CSS

/* ------------------------------------ */
/* Abstand des Vorschlagfensters ändern */
/* ------------------------------------ */

 #PopupAutoCompleteRichResult, #PopupSearchAutoComplete {
  margin-top: 6px !important;
}

... tiefer erscheint?

Liegt wohl daran das ich das mal so haben wollte, wie die Urlbar mit der Adressauflistung.

Klappte wohl irgendwie nicht, darum habe ich das dann auch mit dem farbigen Rahmen um die Suchergebnisse um die Searchbar gelassen und nur die Ergebnissauflistung tiefer gesetzt.

2002Andreas

Zitat von Mr. Cutty

Bei mir kommt noch ein dickerer Außenrahmen.

Der kommt durch:

border: 2px solid #0082FC !important;

Ohne sieht es dann so aus:

oder auch so:

Dann musst du das ändern:

--panel-border-color: none !important;

Mr. Cutty

Danke.

Bei mir sieht es nun so aus:

CSS

/* -------------------------------------------------- */
/* Suchergebnisse unter Suchfenster mit blauen Rahmen */
/* -------------------------------------------------- */

#PopupSearchAutoComplete {
  background: #FFFFFF !important;
  border: 2px solid #7FB0EF !important;
  box-shadow: 2px 2px 2px #787878 !important;
  border-radius: 6px !important;
  --panel-shadow: none !important;
  --panel-border-color: none !important;
}

/* ------------------------------------ */
/* Abstand des Vorschlagfensters ändern */
/* ------------------------------------ */

 #PopupAutoCompleteRichResult, #PopupSearchAutoComplete {
   margin-top: 10px !important;
}

Alles anzeigen

Jetzt wäre noch der übliche versetze Schatten unten/rechts gut, den ich nicht hinbekommen habe, und die Größe/Länge des Auswahlfensters dem der Searchbar anzupassen.

2002Andreas

Zitat von Mr. Cutty

des Auswahlfensters dem der Searchbar anzupassen.

Meinst du die Breite?

Wenn ja, das geht z.B. mit:

max-width: 285px !important;

Zitat von Mr. Cutty

der übliche versetze Schatten unten/rechts

Was genau meinst du damit?

Mr. Cutty

Ja, die Breite. Danke.

Hier müsste nur noch das Suchergebnisfenster weiter nach rechts verschoben werden, damit beides quasi immer untereinander ist, so wie in dem Beispiel.

Zu dem Schatten: So wie bei meiner angepassten Adressauflistung.

2002Andreas

Zitat von Mr. Cutty

weiter nach rechts verschoben werden

Teste bitte mit:

margin-left: 1px !important;

Zitat von Mr. Cutty

Zu dem Schatten:

Auch bitte testen:

box-shadow: 2px 2.5px 2px #787878 !important;

Mr. Cutty

Danke. Das mit dem verschieben (nach links) hat funktioniert, auch wenn ich "margin-left: 0px !important;" angeben musste, aber der Schatten geht leider nicht.

2002Andreas

Zitat von Mr. Cutty

aber der Schatten geht leider nicht.

Muss ich mir mal Gedanken drum machen, bin jetzt aber eine Weile offline.

Wird wohl erst morgen sein.

Horstmann

Zitat von Mr. Cutty

Jetzt wäre noch der übliche versetze Schatten unten/rechts gut, den ich nicht hinbekommen habe, und die Größe/Länge des Auswahlfensters dem der Searchbar anzupassen.

Dieses Popup ist generell so breit wie das Suchfeld, daher würde ich an der Breite nicht rumbasteln.

Wenn du dem Popup eine Border gibst, wird es aber um diese Border breiter - in deinem Fall 4px - und weil die position fixed ist, ohne weitere Angabe im Fx Code, sitzt das Fenster dann eigentlich linksbündig, aber um diese 4 Pixel verbreitert.

Was aber bei dir etwas anders zu sein scheint, daher vermute ich mal dass du wichtige Teile deines CSS Codes hier nicht angegeben hast.

Daher wäre mein Vorschlag, dass du erstmal deinen Code komplett angibst, oder zumindest alles was mit searchbar, popups, panels etc. zu tun hat.

Mr. Cutty

2002Andreas Ok. Danke.

Horstmann Bis auf den Schlagschatten (beim Suchergebnisfenster) passt es ja nun.

CSS

/* ------------------------------------------------------ */
/* Anpassungen der Searchbar und des Suchergebnisfensters */
/* ------------------------------------------------------ */

/* Searchbar neben Urlbar mit fester Breite */

#search-container {
  min-width: 250px !important;
  max-width: 380px !important;
}

/* Pfeil in Searchbar dauerhaft anzeigen */

.search-go-button {
  display: block !important;
}

/* Umrandung um die Searchbar bei Inaktivität */

#searchbar:not(:focus-within) {
  border: 1px solid #A6A6A6 !important;
}

/* Suchergebnisse mit blauen Rahmen um Kasten anzeigen */

#PopupSearchAutoComplete {
  max-width: 380px !important;
  background: #FFFFFF !important;
  margin-left: 0px !important;
  border: 2px solid #7FB0EF !important;
  border-radius: 4px !important;
  --panel-shadow: none !important;
  --panel-border-color: none !important;
}

/* Abstand des Fensters mit Suchergebnissen nach oben */

#PopupAutoCompleteRichResult, #PopupSearchAutoComplete {
  margin-top: 9px !important;
}

Alles anzeigen

Horstmann

Zitat von Mr. Cutty

Horstmann Bis auf den Schlagschatten (beim Suchergebnisfenster) passt es ja nun.

Ich weiss nur nicht, wie das mit dem Code den du hier angibst funktionieren kann.
Ähnlich verblüffend ist, dass sich deine Screenshots dauernd ändern, ohne dass der jeweilige Code dazu passt.

Offengestanden habe ich den Verdacht, dass du Code und Screenshots bunt durcheinander hier einstellst; und wie schon erwähnt, zweimal die Hälfte fehlt scheints.

ZB ist da plötzlich ein CSS Code für den #search-container, der vorher nicht erwähnt war - wieso nicht?

Wenn man dir jede nötige Info einzeln aus der Nase ziehen muss, dann könntest du es mal auf Reddit versuchen, da ist das normal.

Mr. Cutty 19. Mai 2024 um 12:19