urlbar im Fx 145.0 (64-Bit)

reni

Hallo,

ich hatte hier schon mal eine ähnliche Frage:

Thema

urlbar im Fx128

Hallo,

ich hab schon gesehen/gelesen, dass sich etwas bezügl. urlbar im Fx128 geändert hat.

Leider bekomme ich mein "css" nicht wieder gerichtet

So sah es bisher aus und soll bitte wieder so sein:

Und nun so

:

Mein aktives css dazu:

(Quelltext, 30 Zeilen)

Was müsste ich ändern?

Vielen Dank für Hilfe vorab!

reni

17. Juli 2024 um 11:51

Jetzt mit Fx 145 sieht meine urlbar wieder nicht so aus, wie ich sie gern haben möchte

Mein aktueller CSS-Code ist:

CSS

.urlbar-background {
   border-radius: 16px !important;
   }
.urlbar > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
.urlbar[breakout][breakout-extend] {
   top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
   left: 0 !important;
   width: 100% !important;
   }
.urlbar:focus-within > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid #35b9ab !important;
   border-radius: 16px !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

Wo muss ich jetzt ansetzen? Danke für eure Hilfe!

2002Andreas

Zitat von reni

Wo muss ich jetzt ansetzen?

Teste bitte mal:

CSS

.urlbar-background {
   border-radius: 16px !important;
   }
.urlbar > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
.urlbar:focus-within > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid #35b9ab !important;
   border-radius: 16px !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

reni

Leider keine Änderung zu vorher:

Der Rahmen ist mir zu breit und hat die falsche Farbe

Ich sehe auch gar keinen Unterschied zu meinem CSS

reni

Ich hab so etwas ähnliches bei der searchbar. Da kann ich richtig mit den Werkzeugen sehen, wie es bei Klick (focus-within) funktioniert:

CSS

/* Rahmen um Suchleiste bei Klick */
#searchbar {
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
#searchbar:focus-within {
   border: 3px solid #118e24 !important;
    outline: #118e24 !important;
   border-radius: 16px !important;
   }

Bei der urlbar kann ich das nicht erkennen.

2002Andreas

Zitat von reni

Bei der urlbar kann ich das nicht erkennen.

Sieht hier so aus:

reni

Hm, das sieht eigentlich gut aus. Was haut da bei mir noch rein?

2002Andreas

Zitat von reni

Was haut da bei mir noch rein?

Evtl. ein anderer Code. Welche nutzt du denn noch?

reni

Zitat von 2002Andreas

Evtl. ein anderer Code. Welche nutzt du denn noch?

Für die urlbar sonst keinen, aber ich könnte dir mal die Dateien hier anhängen. Vielleicht findest du was od. lieber per PN (sind 8 Dateien)?

2002Andreas

Zitat von reni

od. lieber per PN (sind 8 Dateien)?

Lieber im Forum, könnte evtl. anderen Usern dann auch mal helfen.

reni

Hier sind alle aktiven CSS-Codes.

2002Andreas

So müsste der Code richtig sein:

CSS

.urlbar-background {
   border-radius: 16px !important;
   }
.urlbar > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
.urlbar:focus-within > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid #35b9ab !important;
   border-radius: 16px !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

#urlbar muss jetzt so aussehen: .urlbar

2002Andreas

Zitat von reni

Hier sind alle aktiven CSS-Codes.

Teste bitte mal diesen Code:

CSS

.urlbar-background {
   border-radius: 16px !important;
   }
.urlbar > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
.urlbar:focus-within > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid #35b9ab !important;
   border-radius: 16px !important;
   }
.urlbar {
   --toolbar-field-focus-border-color: #35b9ab !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

reni

Es bleibt spannend. Der zusätzliche Eintrag

CSS

.urlbar {
   --toolbar-field-focus-border-color: #35b9ab !important;

hat mir die searchbar wieder völlig anders (default?) angezeigt. Ohne dem ist die searchbar wieder, wie ich sie mag.

Die urlbar reagiert auf die Einträge von .urlbar:focus-within > .urlbar-input-container nur nicht von der Farbe her, wie erwartet. Die "px"-Angabe zum Beispiel kann ich verändern und das sieht man. im Beispiel mal auf 5px erhöht:

So mit 2px (als wenn noch eine andere Farbe mit reinspielt - nur wo kommt die her?

Mein CSS sieht jetzt so aus:

CSS

/* keine Größenänderung der Adressleiste und Rahmen bei Klick u.a.*/
.urlbar-background {
  border-radius: 16px !important;
  }
.urlbar > .urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  border: 2px solid lightgray !important;
  border-radius: 16px !important;
  }
.urlbar:focus-within > .urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  border: 2px solid #118e24 !important;
  border-radius: 16px !important;
  }
.urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbar-background {
  animation-name: none !important;
  }
.urlbar[breakout][breakout-extend] > .urlbar-background {
  box-shadow: none !important;
  }
/* Rahmen um Suchleiste bei Klick */
#searchbar {
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
#searchbar:focus-within {
   border: 3px solid #118e24 !important;
    outline: #118e24 !important;
   border-radius: 16px !important;
   }
/* Rahmen um Zurück-Button */
#back-button  > image {
   border: 2px solid #118e24 !important;
   }

Alles anzeigen

2002Andreas

Zitat von reni

hat mir die searchbar wieder völlig anders (default?) angezeigt.

So sieht das hier mit diesem Code aus:

CSS

.urlbar-background {
   border-radius: 16px !important;
   }
.urlbar > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
.urlbar:focus-within > .urlbar-input-container {
   height: var(--urlbar-height) !important;
   padding-block: 0 !important;
   padding-inline: 0 !important;
   border: 2px solid #35b9ab !important;
   border-radius: 16px !important;
   }
.urlbar {
   --toolbar-field-focus-border-color: #35b9ab !important;   
   }
.urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbar-background {
   animation-name: none !important;
   }
.urlbar[breakout][breakout-extend] > .urlbar-background {
   box-shadow: none !important;
   }

/* Rahmen um Suchleiste bei Klick */
#searchbar {
   border: 2px solid lightgray !important;
   border-radius: 16px !important;
   }
#searchbar:focus-within {
   border: 3px solid #118e24 !important;
    outline: #118e24 !important;
   border-radius: 16px !important;
   }

Alles anzeigen

Das passt hier also auch mit der Searchbar dann

urlbar im Fx 145.0 (64-Bit)

urlbar im Fx128

Ähnliche Themen

Symbole in den Kontextmenüs [ Update ]

extras_config_menu.uc.js in Fx 139 keine Funktion mehr

AddOnLister.uc.js funktioniert in Fx 138 nicht mehr.

userChromeJS, pref, config.js unter macos?

Anzeige „Privater Modus“ verschoben / Tableiste bei nur einem Tab ausblenden