Urlbar-container etwas schmaler machen

Mira_Belle

Hi,

mit diesem Code habe ich meinem Adressfeld wieder etwas Konturen verpasst.

CSS

#urlbar-container {    
    background-color: rgba(224, 224, 224, 0.1) !important;
    border-radius: 5px !important;  
}

Wenn man nun genau schaut, sieht man, dass der Container vorne "überhängt".

Diesen Überhang hätte ich gerne beseitigt.

Und auch die Höhe des Containers hätte ich gerne etwas verringert.

Habe einiges probiert, komme aber nicht drauf.

Bitte um Hilfe.

Habe mal die Stellen markiert.

2002Andreas

Zitat von Mira_Belle

dass der Container vorne "überhängt".

Ich habe nur mal die Helligkeit erhöht zwecks besserer Erkennung.

So sieht das mit deinem Code hier aus:

Mira_Belle

Zitat von 2002Andreas

Ich habe nur mal die Helligkeit erhöht zwecks besserer Erkennung.
So sieht das mit deinem Code hier aus:

Sorry.

CSS

     /* Rahmen von Adressfeld und Suchfeld  */

    #urlbar-container {
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #urlbar {
/*        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0) !important;    */
        box-shadow: none !important;
        --toolbar-field-focus-border-color: transparent !important;
    }

#urlbar[open] > #urlbar-background {

    border-color: transparent !important;
/*    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0) !important;    */
    box-shadow: none !important;
}
#urlbar > #urlbar-background {
  box-shadow: none !important;
}
    
    #search-container {
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #searchbar {
/*        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0) !important;    */
        box-shadow: none !important;
        --toolbar-field-focus-border-color: transparent !important;
    }

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


/* Aderssbar Popup */

.urlbarView {
    border: 3px solid #FFA500 !important;
    border-radius: 8px !important;
}

    /* Markierter Text  */    
    
    ::selection {
        color: #ffffff !important;
        background-color: #FFA500 !important;                                    /* käftiges Orange */
    }
    
    /* Schriftfarbe im Adress- und Suchfeld */
    
    #urlbar-input, #urlbar-scheme, .searchbar-textbox {    
        color: #E5E5E5 !important;                                            /* Sehr helles Grau */
    }
    
    /*****/
    :root {
        --arrowpanel-border-color: transparent !important;                        /* Schatten um Adress- & Suchfeld */
    }                    

    /* Farbe Hintergrund & Schrift im Suchfeld */

    .search-panel-tree {
        background: #2B2B2B !important;                                    /* (Dunkelgrau) #2B2B2B */
        color: #E0E0E0 !important;                                            /* (Hellgrau) */
    }
    #PopupSearchAutoComplete {
        --panel-background: #2B2B2B !important;                            /* (Dunkelgrau) */
        --panel-color: #E0E0E0 !important;                                    /* (Hellgrau) */
    }

    /* Farbe der Felder (transparent) */

    #urlbar-results {
        background-color: #2B2B2B !important;
    }

    .urlbarView {
        background-color: #2B2B2B !important;
    }

    .search-panel-tree {
        background: #2B2B2B !important;
        color: #E0E0E0 !important;
    }

    #urlbar-background, #searchbar {
        background-color: transparent !important;
    }
    
    /* Farbe URL */
    
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 215, 0, 0.7)!important;                            /* Helles Orange , Eidottergelb */    /* https://www.farb-tabelle.de/de/farbtabelle.htm gold    #FFD700        255, 215, 0 */
    }
    
    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
         background-color: #4A4A4A  !important;                            /* Mausgrau */
        color: #E0E0E0 !important;                                        /* Hellgrau */
    }


#urlbar-container {    
    background-color: rgba(224, 224, 224, 0.1) !important;
    border-radius: 5px !important;  
}

#identity-icon-box {
    max-width: calc(40px + 13em) !important;
    color: #E0E0E0  !important;
    background-color: transparent !important;
}


#identity-box, 
#tracking-protection-icon-container {
    fill: #00ff00 !important;                                            
}

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

Sorry.

Mira_Belle

Ja ....

Oh, warte ....

Da funkt mir was dazwischen, deshalb der "Überhang"

.

Hier geht es erst weiter, wenn ich den "Übeltäter" gefunden habe.

Mira_Belle

Weiter gehts, Fehler gefunden und beseitigt!

Hatte, warum auch immer, ...

CSS

#urlbar-input-container {
        padding-inline-start: calc(1em + 24px) !important;
        background-position: left 1em center;
        background-repeat: no-repeat;
        background-size: 16px;
        -moz-context-properties: fill, fill-opacity;
        fill: currentColor;
}

... in meiner Symbole.css stehen!

Daher der "Überhang".

Bleibt also nur die Frage, wie bekomme ich dieses Eingabefeld etwas schmaler, dünner?

BrokenHeart

Zitat von Mira_Belle

Bleibt also nur die Frage, wie bekomme ich dieses Eingabefeld etwas schmaler, dünner?

Die Anpassungen sind leider etwas umfangreicher, weil Mozilla die UrlBar mit dem 'breakout-extend' sehr viel komplizierter gemacht hat:

Bitte mal testen:

CSS

:root {
  --url-height: 22px;
}


#urlbar-input-container 
{    
  background-color: rgba(224, 224, 224, 0.1) !important;
  border-radius: 5px !important;  
  
  height: calc(var(--url-height) - 2px) !important;
}
#urlbar
{
   margin-top: 0px !important; 
   height: var(--url-height) !important; 
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container 
{
    padding-block: 1px !important;
    padding-inline: 1px !important;

  margin-top: 6px !important; /* u.U. Position je nach Höhe anpassen*/
    
}
#urlbar:not([breakout-extend]) > #urlbar-background 
{
    display: none !important;
}
#urlbar[breakout][breakout-extend]
{
    top: 0px!important; 
    left: 0px !important; 

    width: 100%!important;  
    height: unset !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background 
{
    margin-top: 36px !important;
}
.urlbarView-body-inner 
{
    border-top: unset !important;  
    margin-top: 12px !important;
}

Alles anzeigen

Mira_Belle

Hey, Danke.

Das kleine Stück Code ...

CSS

#urlbar-input-container {    
  background-color: rgba(224, 224, 224, 0.1) !important;
  border-radius: 5px !important;  
  height: 24px !important;
}
#urlbar {
   margin-top: 1px !important; 
}

... reichte mir schon.

Die Zeile, das Feld ist etwas schmaler (dünner), nicht viel,

aber die Wirkung ist wie gewünscht.

Es ist halt kein "Balken" mehr.

Nochmals vielen lieben Dank.

PS:

Was mich wirklich etwas wurmt, ich war soo nah' dran.

Mira_Belle

Nur zur Erinnerung!

Vorher

Jetzt!

Zwar werden die Favicons etwas gestaucht, aber damit kann ich leben.

BrokenHeart

Zitat von Mira_Belle

Hey, Danke.
Das kleine Stück Code ...
...
... reichte mir schon.

Zitat von Mira_Belle

Zwar werden die Favicons etwas gestaucht, aber damit kann ich leben.

Gerne, aber bist du wirklich sicher, das du den Rest vom Code nicht brauchst? Bei mir werden ohne die zusätzlichen Anpassungen z.B. die Icons in der UrlBar extrem verkleinert und die Schrift wird abgeschnitten, sobald das Eingabefeld den Focus bekommt und sich das "Auswahlmenü" darunter öffnet. Natürlich kann man das auch wieder durch andere Anpassungen mittels CSS-Code geradebiegen, aber genau dafür waren eigentlich die zusätzlichen Zeilen gedacht.

Nebenbei wird ja auch noch mit dem Code das Vergrößern des Eingabefeldes bei Focus-Erhalt verhindert. Ok, ist halt die Frage, ob das einen stört oder nicht (mich hat es gestört ).

Mira_Belle

Du hast recht!

CSS

#urlbar-input-container {    
  background-color: rgba(224, 224, 224, 0.1) !important;
  border-radius: 5px !important;  
  height: 24px !important;
}
#urlbar {
   margin-top: 1px !important; 
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
    padding-block: 1px !important;
    padding-inline: 6px !important;
    margin-top: 6px !important; 
}
.urlbarView-body-inner {
    border-top: unset !important;  
    margin-top: 2px !important;
}

Alles anzeigen

Das wird gebraucht.

Danke für den Hinweis!

Ich sollte wirklich etwas genauer werden und besser prüfen.

BrokenHeart

Zitat von Mira_Belle

Ich sollte wirklich etwas genauer werden und besser prüfen.

“We don't make mistakes, just happy little accidents.”

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Urlbar-container etwas schmaler machen

Ähnliche Themen

Icons in Hamburger-Menü und den anderen Menüs einbauen.