ac_popup_megabar_title_and_url_50percent_width.css // Aris

.DeJaVu

Hinweis für diejenigen, die dieses CSS nutzen, das ist noch nicht aktualisiert und daher sieht das Dropdown auch nicht toll aus.

Nach dem Kommentar muss in die ersten Zeilen das folgende:

CSS

#urlbar
{
    --urlbar-height: 26.00px;
    --urlbar-toolbar-height: 34.00px;
}

Denn so steht es noch in Firefox 124. PS für Firefox 126 und neuer, Firefox 125 hat das noch, schadet aber auch nicht, weil identisch.

Dieses CSS sollte auch aktuell sein, denn sonst funktioniert das mit den 50/50 (o.ä.) auch nicht, es wird nämlich nur der Titel angezeigt, nicht die URL dazu.

Und es gibt noch eine Änderung, weil es jetzt am Ende jeder Zeile eines Vorschlags einen Button hat. Dadurch springt der aktive Eintrag 26px nach links. Ausschnitt, weil es zwei Änderungen betrifft:

CSS

/*geändert*/
#urlbar .urlbarView-results > .urlbarView-row[has-url] .urlbarView-url {
  margin-inline-start: unset !important;
}

/*neu*/
#urlbar .urlbarView-row[has-url][selected]:not([type="autofill_origin"]) .urlbarView-url,
#urlbar .urlbarView-row[has-url]:not([type="autofill_origin"]):hover .urlbarView-url
{
  margin-inline-start: 14px !important;
}

Alles anzeigen

Der Einfachheit das CSS im Ganzen:

CSS

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

#urlbar
{
    --urlbar-height: 26.00px !important;
    --urlbar-toolbar-height: 34.00px !important;
}

#urlbar .urlbarView-no-wrap,
#urlbar .urlbarView-url {
  min-width: 50% !important;
  width: 50% !important;
}

#urlbar .urlbarView-url {
  margin-inline-start: 10px !important;
}

#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap {
  min-width: 100% !important;
  width: 100% !important;
}

#urlbar .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  position: absolute !important;
  /*display: block !important;*/
  left: calc(50% + 10px) !important; /* 50% + 10px url space */
}

#urlbar .urlbarView-results .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-results .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  left: calc(50% + 0px) !important;
}

.urlbarView-row:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
  & > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
    margin-inline-start: 0px !important;
  }
}

#urlbar .urlbarView-results > .urlbarView-row[has-url] .urlbarView-url {
  margin-inline-start: unset !important;
}

#urlbar .urlbarView-row[has-url][selected]:not([type="autofill_origin"]) .urlbarView-url,
#urlbar .urlbarView-row[has-url]:not([type="autofill_origin"]):hover .urlbarView-url
{
  margin-inline-start: 14px !important;
}

#urlbar .urlbarView-title-separator {
  display: none !important;
}

#urlbar .urlbarView-row:is([type=search],[type=remotetab],[type=switchtab],[type=dynamic],[sponsored]) .urlbarView-title {
  width: calc(50% - 26px) !important;
}

/* do not hide actiontype item */
#urlbar .urlbarView-row:is([type=search]) .urlbarView-action{
  visibility: visible !important;
  display: inherit !important;
}

/* do not wrap the line */
#urlbar .urlbarView-results > .urlbarView-row > .urlbarView-row-inner {
  flex-wrap: unset !important;
}
#urlbar .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
  max-width: unset !important;
  flex-basis: unset !important;
}
#urlbar .urlbarView-results > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
  margin-top: unset !important;
  padding-inline-start: unset !important;
}

#urlbar .urlbarView-results > .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  appearance: none !important;
  background: unset !important;
}

#urlbar .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
  min-height: unset !important;
}

.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  min-width: unset !important;
  height: unset !important;
}

.urlbarView-dynamic-onboardTabToSearch-description {
  display: none !important;
}

.urlbarView-row[label] {
  margin-block-start: 0 !important;

  &::before {
    content: unset !important;
    display: none !important;
  }
}

#urlbar .urlbarView-button-menu {
  z-index: 1 !important;
}


/* use different width values to go from  50/50 to e.g. 40/60 */
/*
#urlbar .urlbarView-no-wrap {
  min-width: 40% !important;
  width: 40% !important;
}
#urlbar .urlbarView-url {
  min-width: 60% !important;
  width: 60% !important;
}

#urlbar .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  position: absolute !important;
  display: block !important;
  left: calc(40% + 10px) !important;
}
#urlbar .urlbarView-results .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-results .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  left: calc(40% + 0px) !important;
}
*/

.urlbarView-button {
  position: absolute important;
  right: 0 important;
}

Alles anzeigen

Änderung: 16.4./21:24

- Die Änderungen oben wurden verfeinert bzgl hover.
- Dann entfällt das [wrap], das sehe ich nirgends mehr
- der neue Button .urlbarView-button wird fix rechts positioniert (am Ende des CSS), damit das .urlbarView-url nicht mehr springt, sobald der Button angezeigt wird. Ich habe dafür aktuell keine andere Lösung.
-getestet mit v125/v126/v127

Wer dann noch Lust hat, sich diesen Button etwas anzupassen:

CSS

#urlbar .urlbarView-results > .urlbarView-row > .urlbarView-row-inner {
  flex-wrap: unset !important;
  padding-block: 2px !important;
}

.urlbarView-button {
  min-width: 20px !important;
  min-height: 20px !important;
}
  
.urlbarView-button {
  .urlbarView-row:is([row-selectable]:hover, [selected]) > &:not(:hover, [open]) {
    color: #fff !important;
    background-color: #c64922 !important;
  }
}

.urlbarView-button {
  &:is(:hover, [open]) {
    color: #fff !important;
    background-color: #275cd9 !important;
  }
}

Alles anzeigen

Die ersten Zeilen verkleinern das Padding und somit die Zeile mit der Adresse/URL.
Die nächsten den Button kleiner, dann den Button normal/hover mit anderen Farben.

Ich nutze das Dark-Theme, daher bitte anpassen für andere Themes.

.DeJaVu

In Anlehnung an diese Funktion:

Thema

"Aus der Zwischenablage aufrufen" funktioniert nur bedingt.

Ist wohl jedem irgendwann schon mal aufgefallen:

camp-firefox.de/attachment/46455/

Wird nicht mehr angezeigt, sobald die Browser-Werkzeuge auf sind/auf waren. Ich muss dafür Firefox neu starten.

Hat jemand eine Idee, warum?

Toll, und gleich noch einer - die Übersetzung ist noch nicht komplett (Firefox 125.0.1/127nightly)

camp-firefox.de/attachment/46456/

Tja, und eigentlich wollte ich das hier mal genauer anschauen, macht überhaupt keinen Sinn in der Ansicht, ich musste vorhin echt zwei Mal…

.DeJaVu

16. April 2024 um 21:48

Gibt es auch Anpassungen bei mir, Zeile 33-61:

CSS

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

#urlbar
{
    --urlbar-height: 26.00px !important;
    --urlbar-toolbar-height: 34.00px !important;
}

#urlbar .urlbarView-no-wrap,
#urlbar .urlbarView-url {
  min-width: 50% !important;
  width: 50% !important;
}

#urlbar .urlbarView-url {
  margin-inline-start: 10px !important;
}

#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap {
  min-width: 100% !important;
  width: 100% !important;
}

#urlbar .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  position: absolute !important;
  /*display: block !important;*/
  left: calc(50% + 10px) !important; /* 50% + 10px url space */
}

/*geändert*/
#urlbar .urlbarView-results .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action
{
  left: calc(50% + 0px) !important;
}
/*neu*/
#urlbar .urlbarView-results .urlbarView-row[has-action]:not([has-url]) .urlbarView-no-wrap .urlbarView-action
{
  left: unset !important;
  right: 28px !important;
  top: 11px !important;
  background-color: #c64922 !important;
}

#urlbar .urlbarView-results .urlbarView-row[has-action]:not([has-url]) .urlbarView-no-wrap .urlbarView-title
{
  width: calc(100% - 250px) !important;
}

.urlbarView-row:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
  & > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
    :root[uidensity="compact"] & {
      padding: 2px 6px 3px !important;
      margin-block: -3px;
    }
  }
}

/*ende*/

.urlbarView-row:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
  & > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
    margin-inline-start: 0px !important;
  }
}

#urlbar .urlbarView-results > .urlbarView-row[has-url] .urlbarView-url {
  margin-inline-start: unset !important;
}

#urlbar .urlbarView-row[has-url][selected]:not([type="autofill_origin"]) .urlbarView-url,
#urlbar .urlbarView-row[has-url]:not([type="autofill_origin"]):hover .urlbarView-url
{
  margin-inline-start: 14px !important;
}

#urlbar .urlbarView-title-separator {
  display: none !important;
}

#urlbar .urlbarView-row:is([type=search],[type=remotetab],[type=switchtab],[type=dynamic],[sponsored]) .urlbarView-title {
  width: calc(50% - 26px) !important;
}

/* do not hide actiontype item */
#urlbar .urlbarView-row:is([type=search]) .urlbarView-action{
  visibility: visible !important;
  display: inherit !important;
}

/* do not wrap the line */
#urlbar .urlbarView-results > .urlbarView-row > .urlbarView-row-inner {
  flex-wrap: unset !important;
  padding-block: 2px !important;
}
#urlbar .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
  max-width: unset !important;
  flex-basis: unset !important;
}
#urlbar .urlbarView-results > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
  margin-top: unset !important;
  padding-inline-start: unset !important;
}

#urlbar .urlbarView-results > .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  appearance: none !important;
  background: unset !important;
}

#urlbar .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
  min-height: unset !important;
}

.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  min-width: unset !important;
  height: unset !important;
}

.urlbarView-dynamic-onboardTabToSearch-description {
  display: none !important;
}

.urlbarView-row[label] {
  margin-block-start: 0 !important;

  &::before {
    content: unset !important;
    display: none !important;
  }
}

#urlbar .urlbarView-button-menu {
  z-index: 1 !important;
}


/* use different width values to go from  50/50 to e.g. 40/60 */
/*
#urlbar .urlbarView-no-wrap {
  min-width: 40% !important;
  width: 40% !important;
}
#urlbar .urlbarView-url {
  min-width: 60% !important;
  width: 60% !important;
}

#urlbar .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  position: absolute !important;
  display: block !important;
  left: calc(40% + 10px) !important;
}
#urlbar .urlbarView-results .urlbarView-row[type="switchtab"][has-url] .urlbarView-no-wrap .urlbarView-action,
#urlbar .urlbarView-results .urlbarView-row:not([has-url]) .urlbarView-no-wrap .urlbarView-action {
  left: calc(40% + 0px) !important;
}
*/

Alles anzeigen

Sieht aus wie folgt für dieses CSS:

Der Freiraum rechts ist für den erwähnten Button