Die Schrift in der Adresszeile vertikal mittig positionieren

Boersenfeger

Moin, ich nutze u.a. diesen CSS, um die Adresszeile anzupassen.

CSS

/* Adresszeile einfaerben */

#urlbar {
    position: relative;
    z-index: 6;
}

#identity-box::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
    background: var(--toolbar-bgcolor); /* white */
    opacity: 0.2;
    transition: background 500ms linear; /* Fade in/out effekt */
}

/* There is also grantedPermissions, but irrelevant. */

/* about:about */
#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity::after {
    background: #ff0039; /* Firefox Red 50 */
}

/* about:config */
#urlbar[pageproxystate='valid'] #identity-box.chromeUI::after {
    background: #0a84ff; /* Firefox Blue 50 */
}

/* addon pages like uBlock Origin Dashboard */
#urlbar[pageproxystate='valid'] #identity-box.extensionPage::after {
    background: #45a1ff; /* Firefox Blue 40 */
}

/* https://www.github.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity::after{
    background: #058b00; /* Firefox Green 70 */
}

/* https://www.google.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain::after{
    background: #12bc00; /* Firefox Green 60 */
}

/* https://mixed-script.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked::after {
/*    background: #30e60b; /* Firefox Green 50 */
    background: #d7b600; /* Firefox Yellow 60 */
}

/* https://mixed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent::after {
    background: #d7b600; /* Firefox Yellow 60 */
}

/* https://very.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked::after {
    background: #d7b600; /* Firefox Yellow 60 */
}

/* https://self-signed.badssl.com/ but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden::after {
    background: #ffe900; /* Firefox Yellow 50 */
}

/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher::after {
    background: #a47f00; /* Firefox Yellow 70 */
}

/* https://mixed-script.badssl.com/ but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent::after {
    background: #d70022; /* Firefox Red 60 */
}

/* http://http-login.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms::after {
    background: #a4000f; /* Firefox Red 70 */
}

/* http://http.badssl.com/ */
/* http://www.httpvshttps.com/ */
#urlbar[pageproxystate='valid'] #identity-box.notSecure::after {
    background: #a4000f; /* Firefox Red 70 */
}

/* Regeln ergänzt */
/* in Fx72 eingeführt, vgl. https://github.com/Aris-t2/CustomCSSforFx/issues/244 */

#urlbar[pageproxystate='valid'] #identity-box.certErrorPage::after {
    background: #d70022; /* Firefox Red 60 */
}

#urlbar[pageproxystate='valid'][focused="true"] #identity-box::after {
    background: var(--toolbar-bgcolor);
}


#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;
}

/* Adresszeile kompakt und fett */

#urlbar {
font-size:18px !important;
font-weight:bold !important;
height: 24px;
padding: 0px 0px 0px !important;
}

#searchbar {
font-size:18px !important;
font-weight:bold !important;
height: 24px; 
padding: 0px 0px 0px !important;
}

.urlbar-origin-label,
.urlbar-over-origin-box,
.urlbar-over-link-host-label,
.urlbar-over-link-path-label {
margin-top: -1px !important;
margin-bottom: -1px !important;
}

#identity-box{
border:none!important;
background:none!important;
}

#identity-box #identity-icon-label,
#identity-box #identity-icon-labels {    
font-size: 18px !important;
}

#omnibar-defaultEngineName {
margin-top: -1px !important;
font-size:18px !important;
font-weight:bold !important;}
#omnibar-defaultEngine {margin-top: 10px !important;
}

#urlbar #feed-button {
list-style-image: none !important;
}

#urlbar,.searchbar-textbox,
#searchbar {
min-height:1.8em!important;
max-height:1.8em!important;
border-radius: 70px !important;
background: #e2f7e2 !important;
opacity: 0.7!important;	
padding: 0px 0px 0px 5px !important;
}   

/* Adressleiste Breite */

#urlbar{
min-height:1.9em!important;
max-height:1.9em!important;
width: 100% !important;
border-radius: 200px !important;
padding: 0px 0px 0px 0px !important;
}

/* Adresszeile - Suche ausblenden */

#PopupAutoCompleteRichResult > richlistbox > richlistitem:first-child{
display:none!important
}
#urlbar input.textbox-input::placeholder {
color: transparent !important;} 


/* Adresszeile bereinigen */

#identity-icon,           /*Links im Adressfeld: Seiteninformationen (kleines "i" in einem Kreis) und Lupensymbol*/
#pageActionButton,        /*Rechts im Adressfeld: Aktionen für diese Seite (Drei Punkte)*/
#pageActionSeparator,     /*Rechts im Adressfeld: Graue Linie neben "Aktionen für diese Seite (Drei Punkte)"*/
.urlbar-go-button,        /*Rechts im Adressfeld: URL laden (Pfeil nach rechts)*/
.urlbar-history-dropmarker /*Rechts im Adressfeld: Chronik (kleines Dreieck)*/
{ display: none !important; }

/* Adresszeilenhöhe einstellen */

#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;
}

/* Schloss- und Schildsymbol aus FF 88 */

#tracking-protection-icon {
list-style-image: url("..//icons/tracking-protection.svg") !important;
background-size: 18px 18px !important;
fill: purple !important;
}

#identity-icon {
list-style-image: url("..//icons/security-state-secure.svg") !important;
background-size: 18px 18px !important;
opacity: unset !important;
fill: orange !important;
}

/* Lesezeichen-Stern ungesetzt */

 #star-button:not([starred="true"]) {
    fill: Fuchsia !important;            /* Fuchsia */    
    }
	
/* Lesezeichen-Stern gesetzt */

#star-button[starred="true"] {
   fill: Blue !important;            /* Blau */ 
   }
   
/* Farbe der Suchleiste */

#searchbar-new.urlbar hbox.urlbar-input-container {
  background-color: none !important;
}

#searchbar-new {	
  --toolbar-field-focus-border-color: transparent !important;
}

[data-l10n-id="searchbar-input"] {
  color: black !important;
}

Alles anzeigen

Seit neuestem ist die Adresszeile horizontal nicht mehr mittig. Kann man das anpassen? Meine Versuche führten mal wieder zu nichts...

2002Andreas

Zitat von Boersenfeger

horizontal nicht mehr mittig

Hier sieht das so aus:

Ist das bei dir nicht so? Dann bitte mal einen Screenshot zeigen.

Ansonsten auch:
Zeile 103 - 121 und Zeile 208 - 226 sind identisch.

Boersenfeger

Hatte ich vergessen einzufügen..

Das Doppel ist gelöscht.

milupo

Muss der Selektor nicht jetzt .urlbar heißen?

Boersenfeger

Du meinst, hier?

Code

#.urlbar {
    position: relative;
    z-index: 6;
}

milupo

Zitat von Boersenfeger

Du meinst, hier?

Ja, aber nicht #.urlbar, sondern nur .urlbar.

2002Andreas

Zitat von Boersenfeger

Hatte ich vergessen einzufügen..

Meine Vermutung liegt eher am Skript für die farbige Url.

Oder mal testen:

CSS

#urlbar-input {
  .urlbar:not([focused])[domaindir="ltr"] > .urlbar-input-container > .urlbar-input-box > & {
    margin-top: 10px !important;
  }
}

grisu2099

Dein Screenshot bestätigt, was ich schon vermutet habe: Du willst eine vertikale Zentrierung, keine horizontale...

milupo

Boersenfeger Ich habe mir jetzt erst das ganze CSS angesehen, #urlbar taucht an einer Reihe von anderen Stellen auf; dort muss #urlbar ebenfalls durch .urlbar ersetzt werden.

Boersenfeger

grisu2099 Oh, in der Tat... falsche Diktion genommen.

milupo dann müssten also alle # Einträge in . Einträge umgeschrieben werden?

2002Andreas mit dem Code rücken die beiden Icons runter

2002Andreas

Zitat von Boersenfeger

mit dem Code rücken die beiden Icons runter

Ok.

Poste doch bitte mal dein Skript für die farbige Url.

Dharkness

Zitat von milupo

Boersenfeger Ich habe mir jetzt erst das ganze CSS angesehen, #urlbar taucht an einer Reihe von anderen Stellen auf; dort muss #urlbar ebenfalls durch .urlbar ersetzt werden.

Nope, ist egal, Du kannst beides verwenden, aber #urlbar ist eindeutiger.

grisu2099

Kann dann mal jemand den Titel des Threads anpassen - bevor Verwirrung aufkommt?

Nachdem ich das CSS grob überflogen habe, würde ich sagen, daß ca. die Hälfte dieses Spaghetti-Codes überflüssig (weil völlig veraltet) ist. Da ist immer nur neues hinten dran gehängt. Sinnvoll wäre m.M. nach ein komplett neues CSS...

2002Andreas

Zitat von Dharkness

Du kannst beides verwenden

mit . ergibt:

mit # ergibt:

Zitat von Dharkness

aber #urlbar ist eindeutiger.

So ist es.

Zitat von grisu2099

den Titel des Threads anpassen

erledigt

grisu2099

Dharkness

Zitat von 2002Andreas

So ist es.

Jupp und wenn es auch das Suchfeld treffen soll, würde ich die IDs kombinieren, in etwas so ↓.

CSS

#urlbar,
#searchbar-new {
	…
}

Es wären zwar beide mit .urlbar ansprechbar, aber das wäre mir zu wackelig.

Sören Hentzschel

Zitat von Dharkness

Es wären zwar beide mit .urlbar ansprechbar, aber das wäre mir zu wackelig.

.urlbar spricht sogar noch weitere Elemente an, nämlich das neue Suchfeld der Firefox-Startseite sowie das Eingabefeld der intelligenten Fenster. Das teilt sich alles eine Implementierung, was ja auch der Grund war, wieso das separate Suchfeld neu geschrieben worden ist.

milupo

Ich habe irgendwie in Erinnerung, dass #urlbar durch .urlbar ersetzt werden müsste. Es tut mir leid, dass ich unnötigen Trouble verursacht habe.

.DeJaVu

Ich würde es wie Dharkness halten, vorausgesetzt, es teilt sich kein CSS.

Boersenfeger

Zitat von 2002Andreas

Ok.
Poste doch bitte mal dein Skript für die farbige Url.

Steht in #1

Vielleicht kann man die Beiträge 12 - 19 verschieben, da irrelevant.

Die Schrift in der Adresszeile vertikal mittig positionieren

2002Andreas 6. September 2026 um 12:25

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen