Unerwünschte urlbar-Veränderung

harff182

Ich hab ein letztes "optisches Problemchen", das der Behebung harret:

Ohne Focus sieht die urlbar so aus:

Fokussiert, also z.B. wenn ich reinklicke, verändert sie sich in der Höhe:

Folgenden urlbar-bezogenen Code habe ich in meinen .css gefunden:

CSS

/*  URL in fetter Schrift, Hauptadresse markanter
    200120 von Milupo von hier:
    https://www.camp-firefox.de/forum/thema/129888-adresse-in-urlbar-fette-schrift/?postID=1136582#post1136582
*/

#urlbar-input[placeholder] {
    color: blue !important;
    font-weight: bold !important;
}

/*#########################################################################################*/
/*    Url-Bar-Feld bei Focus klein lassen
    Andreas von hier:
    https://www.camp-firefox.de/forum/thema/130624-url-adressleistengr%C3%B6%C3%9Fe-anpassen/?postID=1146279#post1146279
    scheint ab FF89 nich zu funktionuckeln, stört aber noch minimal, verglichen mit FF88
*/

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

/*#########################################################################################*/
/*     URL-Bar Drop Down verhindern
    200408 von BrokenHaert von hier:
    https://www.camp-firefox.de/forum/thema/130354-ff-75-url-bar-drop-down-verhindern/?postID=1142548#post1142548
*/

.urlbarView {
    display: none !important;
}

/*#########################################################################################*/
/*Rahmen um die Urlbar*/
#urlbar {
    background: white !important;
    border: 2px solid black !important;  /* cyan wär auch nett*/
    border-radius: 8px !important;
}

Alles anzeigen

Ist die Vergrößerung der Höhe nach unten irgendwo in dem Code verursacht?

Wenn ja: was muß ich ändern?

Wenn nein: (wie) kann ich das verhindern?

BrokenHeart

Die Vergrößerung ist von Mozilla so gewollt. So wie ich das sehe, wird in dem Code versucht, das Problem zu umgehen, was aber nur teilweise funktioniert. Mozilla hat sich da wirklich eine komplizierte Lösung, mit sehr vielen unterschiedlichen Elementen einfallen lassen. Ich könnte dir hier mal mein Elaborat anbieten, welches das Problem ganz aus der Welt schaffen sollte und die URL-Bar wieder so wie früher agieren lässt. Passt wahrscheinlich nicht zu deinem "Design", aber du kannst ja Farben, Radius usw. selber anpassen...

CSS

/* ---------------------------- */
/* URL-Bar                      */
/* ---------------------------- */
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon 
{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABC1BMVEUAAAC3nVebeSfBqGnRvIS/plS7nUDNuHrNt3WpikG2nFfMtW7Ot3CrkUvAr3Ssj0fHql6khTm7ol2igTHUwITWwoPMtGbGrmHCoT+vkkyTekS/oFHIq2ChiD3WuniffzGljU2YeCmchD/YwX7Rtmimj0/Ip1izmFedhDi+pWCbg0DTu3XRv4ucg0e9pmWdiErn2q/QvYjPuHXIsGfApV66nla1lDqvjTXh06nWwobSv4LWwoHSvH3HsXLKs23JsGzEqmPy577q26jdy5LYxYjQu3jMtHHDq2m/o1u3l0Lo3Lfv36jdzqDPvYvjzorKtXXCpFm8nk+ykUGpij2ghj2qhjKfeyd0WR5wVhafT7DkAAAAMnRSTlMA8fGp8fDw7+7op5aOJgr79/Lx8fDw8PDw5+Xk4t/c3NDQzcS7u7atqJmXlI6JPDYdEZbyJJ8AAAC7SURBVBjTRctVksMwEARQ2c5umJmZWXLMFGbG+58ksZRy5qNr+tUMwOPr2IKtIV5JL10Z5pkaWNC99QDovxgL8mUzq04LMhUz6z/I1cxsJL/V6w6kPe62J+tvejG4xlNxPJlsj8uDC4NtIwg7Ya+qS/SHIQKRjkR1xY5GMQyOOdKQtDCMlREnoGgLTdLZzwV5sYsQQkk/nS/cP4EZnCvKmufvPIHoVJZn8prjeC6BocBSFBUK0zT9KALwBlC1GndCdawmAAAAAElFTkSuQmCC") !important;
}
#identity-box[pageproxystate="valid"].notSecure #identity-icon, #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon 
{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABNVBMVEUAAAC3nVebeSfNuHfBqGn///+jgzXTvoO/plTt48i2nFfpgnurkUvAr3QAAADHql7chnbYh2O7ol3PvIfMtGbGrmG9oETCoT+5mj2oiD+TekS/oFHIq2DRtnWffzHfhWbxkXmYeCmchD/Xj27YwX7Rtmimj0/Ip1iulFXbyZXLtG6bg0DRv4ucg0fogXrpfne9pmWdiErla2bn2q/gUkfQvYjZLSGvjTXJsWnEqmLSvH3ApV66nVa1kzr07NDh06rft4nXxIjWwoLOuHXFrGvVm2rYeV/BpFrdT0a3l0LeSj/cQTbbOC3z6MHf07DdzqDcyZHjzorol4fvl4TSv4LYtnzcrHvognvWsHbaoXTognDXdF3Dn1y6oFi8nk/gWE+xkD2pij2ghj2qhjKfeyd0WR5wVhaGN1/NAAAANnRSTlMA8fHvqTDy8fDHp5wmCgX39fTx8PDw8PDw6OXk4t3c2tPQzcnEu7u2r56Yl46JhGk8NjIdGREFxw8vAAAAyklEQVQY0z3K1ZLCUAyA4bTb4su6u7sCOVXc3d3t/R+BaQ5DLjL5vwnQbH/abR8BOnnfTyRpce7bwNf0F+BvKYF/DdePXgDv85k7+8/h8snar3uIPxyuXkCW5RvEb0rP+87Fm9N5i/jgIXAVypFgsIr5RMVFcFAMhUo1zHfiqoPAHlOUJOYSujE4JNiKWd1U1ZR6xEHrYTYc13XDcHDoYjpcV1LDsXlM0MJ0W9MyjM3YqdVuHDWikWjGNBk7oY/dviAI+zZRFOd3ACsVJB/SvHoMDQAAAABJRU5ErkJggg==") !important;
}
#identity-icon-label 
{
    display:none !important;
}
.identity-box-button 
{
    background-color: rgba(0,0,0,0) !important;
}
#urlbar[breakout][breakout-extend][focused="true"]:not([usertyping="true"]) .urlbarView, 
#urlbar[breakout][breakout-extend][focused="true"]:not([usertyping="true"]) > #urlbar-background 
{
    display: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background 
{
    border: 1px solid black !important;
    color: white !important;
    background-color: rgba(0,0,0,0.78) !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background,
.urlbarView-body-outer,
.urlbarView-body-inner 
{
    margin-top: 32px !important;
}
.urlbarView-body-inner 
{
    border-top: unset !important;  
}
.urlbarView 
{ 
    margin-block-start: -26px !important;  
}
#urlbar-input-container {
    
    padding: var(--urlbar-container-padding);
}
#urlbar-input-container 
{
    border: 0px solid transparent !important;
    margin-top: 3px !important;
    color: black !important;
    height: 22px !important;
    filter: brightness(100%) saturate(100%) drop-shadow( -1px -1px 2px rgba(0,0,0,0.75)) drop-shadow(1px 1px 2px rgba(255,255,255,0.33)) !important; 
    background: rgba(230,232,240,1) !important;
    border-radius: 25px !important; 
}
#urlbar-input-container:hover:not([disabled]) 
{ 
    /*filter: drop-shadow( 0px 0px 2px rgba(0,0,0,0.5)) drop-shadow( -1px -1px 2px rgba(0,0,0,0.75)) !important;*/
    background: rgba(255,255,255,1) !important;
}
#urlbar[breakout][breakout-extend][focused]:not([disabled]) > #urlbar-input-container  
{    color: white !important;
    filter: brightness(100%) saturate(100%) drop-shadow( -1px -1px 1px rgba(0,0,0,0.2))  drop-shadow(1px 1px 1px rgba(255,255,255,0.33)) !important; 
   background-image: linear-gradient(rgba(39, 42, 55, 1), rgba(59, 62, 65, 1))  !important;
}
#urlbar:not([open]) > #urlbar-background 
{
    display: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container 
{
    padding-block: unset !important;  
    padding-left: 1px !important;  
    padding-right: 1px !important;  
}
#urlbar 
{ 
    background: transparent!important;
    top: 4px !important;
    left: 0px !important;
    width: 100% !important;
    height:unset !important;
    font: 13px Arial Rounded MT Bold !important;
    font-weight: normal !important;
    color: white !important;
}
#pageActionSeparator, .urlbar-go-button, .urlbar-history-dropmarker, #reader-mode-button          
{
    display: none !important; 
}
.urlbarView-url,
.urlbarView-action {
    font-family: Arial !important;
}

Alles anzeigen

harff182

BrokenHeart :

Danke, daß Du Dich so ausführlich mit meinem "Haribo-Design-Problem" beschaftigt hast und für die Erläuterung.

Hab den Code grade mal kurz getestet - sieht schon gut aus

Kann mich aber erst heut Abend reinvertiefen, da ich gleich 2 Arzt-Termine für meine Mom und mich habe.

Bis später dann...

harff182

BrokenHeart :

Ich hab mal versucht, Deinen Code zu verstehen, um einige Teile zu ändern, scheitere aber bei einigen Sachen

Textfarbe hab ich aus meinem alten CSS übernehmen können und hinten angehängt:

CSS

/* aus altem .css */ /*210908*/
#urlbar-input[placeholder] {
    color: blue !important;
    font-weight: bold !important;
    font-size: 13px !important;        
}

Aaaaber:

Um die Urlbar gibts es einen Farbverlauf, den ich gerne weg hätte.

Zur Verdeutlichung hab ich mal das Blau aus dem Hintergrund weggenommen:

Und für weitere Fragen, auch den Code oben wieder deaktiviert:

Eine Veränderung beim Hovern brauch ich nicht.

Stattdessen hätte ich gerne einen weißen Hintergrund, wenn ich die urlbar fokussiere, denn jetzt wirds dann dunkel:

Wenn ich nun in die urlbar klicke, um einen Teilstring zu markieren/kopieren, siehts so aus:

Ich hoffe ich habe mich verständlich genug ausgedrückt und es ist ersichtlich, wo's mir mangelt.

Leider komme ich mir den ganzen Zeilen mit rgbas nicht zurecht.

Kannst/magst Du mir weiterhelfen?

.DeJaVu

rgba(64,64,64,.5)

ist ähnlich #404040 mit opacity: 0.5 (Transparenz) (wobei opacity sich auf das gesamte Element auswirkt, rgba (rot/grün/blau/alpha) nur auf die Farbe)

alpha = Transparenz, 1 = nicht transparent, 0 = unsichtbar/voll transparent

Bei alpha = 0 sind die anderen Werte eh egal. Bei 1 kann man die 1 auch weglassen:

rgba(59, 62, 65, 1) = rgba(59, 62, 65) = rgb(59, 62, 65)

milupo

Zitat von harff182

Leider komme ich mir den ganzen Zeilen mit rgbas nicht zurecht.

rgba ist die Farbangabe im RGB-Schema, also Rot-Grün-Blau. Der Buchstabe a bezeichnet die Transparenz. Die RGB-Werte werden hier nicht hexadezimal angegeben, sondern dezimal als Ganzzahl: rgb(255,255,255) wäre Weiß und entspräche hexadezimal #FFFFFF. Schwarz wäre rgb(0,0,0), hexadezimal #000000. Du siehst, jede der drei Grundfarben kann 256 Werte annehmen von 0 bis 255, hexadezimal von 00 bis FF. Die Transparenz wird als Wert zwischen 0 und 1 angegeben, 0 ist vollständig transparent, 1 intransparent. Es sind Dezimalzahlen möglich, siehe oben z.B. 0.78. Hier muss der Punkt stehen, nicht das Komma wie im Deutschen.

BrokenHeart

Meinst du das so?

Dann bitte mal testen:

CSS

/* ---------------------------- */
/* URL-Bar                      */
/* ---------------------------- */
#urlbar[breakout][breakout-extend][focused="true"]:not([usertyping="true"]) .urlbarView, 
#urlbar[breakout][breakout-extend][focused="true"]:not([usertyping="true"]) > #urlbar-background 
{
    display: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background 
{
    border: 1px solid black !important;
    color: white !important;
    background-color: rgba(0,0,0,0.8) !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background,
.urlbarView-body-outer,
.urlbarView-body-inner 
{
    margin-top: 32px !important;
}
.urlbarView-body-inner 
{
    border-top: unset !important;  
}
.urlbarView 
{ 
    margin-block-start: -26px !important;  
}
#urlbar-input-container {
    
    padding: var(--urlbar-container-padding);
}
#urlbar-input-container 
{
    border: 0px solid transparent !important;
    margin-top: 3px !important;
    color: blue !important;
    height: 22px !important;
    background: rgba(230,232,240,1) !important;
}
#urlbar-input-container:hover:not([disabled]) 
{ 
    background: rgba(255,255,255,1) !important;
}
#urlbar[breakout][breakout-extend][focused]:not([disabled]) > #urlbar-input-container  
{
    ;
}
#urlbar:not([open]) > #urlbar-background 
{
    display: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container 
{
    padding-block: unset !important;  
    padding-left: 1px !important;  
    padding-right: 1px !important;  
}
#urlbar 
{ 
    background: transparent!important;
    top: 4px !important;
    left: 0px !important;
    width: 100% !important;
    height:unset !important;
    font: 13px Arial Rounded MT Bold !important;
    font-weight: normal !important;
    color: white !important;
}
#pageActionSeparator, .urlbar-go-button, .urlbar-history-dropmarker, #reader-mode-button          
{
    display: none !important; 
}
.urlbarView-url,
.urlbarView-action {
    font-family: Arial !important;
}

Alles anzeigen

harff182

Danke für die beiden Erklärungen zu RGB/rgba.

Das hilft mir aber leider nicht, anhand des Codes zu erkennen, wo welche Farbe gesetzt wird.

Auch die Sache mit der Transparenz ist für mein Verständnis des Codes leider nicht hilfreich.

Bin halt in einigen Bereichen zudummzumzum....

Huch... da is ja zwischzeitlich ein Code aufgetaucht.

ich geh mal schnell testen....

Zitronella

Zitat von harff182

Das hilft mir aber leider nicht, anhand des Codes zu erkennen, wo welche Farbe gesetzt wird.

Gehe mal zu https://www.color-hex.com

Dort kannst du in das Suchfenster Fenster zb. rgb (10,40,90) einfügen und erhältst dann auf den Button "Get Info" die Ansicht wie es aussieht und noch weitere Infos.

Dort kannst du auch Farben aussuchen (Der kleine Pfeil VOR dem Button "Get Info") und dann wieder auf "Get Info"

Der Wert nach dem Punkt, kann man dort nicht einfügen, da das ein erweiterter Wert ist und auch nur für die Dichte und nicht mehr für die Farbe verantwortlich ist. Also rgba (10,40,90.1) kann man dort nicht eingeben. Aber das sollte ja nicht das Problem sein.

harff182

BrokenHeart:

Aus border: 0px solid transparent !important; hab ich noch schnell border: 2px solid black !important; gemacht und schon fühl ich mich wieder wie zu hause

milupo

Ich habe hier https://www.colorhexa.com/

Zitronella

Gerade auf die Suche gemacht, dieser hier https://rgbacolorpicker.com/ erscheint mir am übersichtlichsten.

BrokenHeart

Zitat von harff182

und schon fühl ich mich wieder wie zu hause

Freut mich, wenn es wieder passt, denn: "zuhause ist es doch am schönsten..."

Sören Hentzschel

Nur mal so: Die Entwicklerwerkzeuge von Firefox zeigen neben einem Farbwert immer einen Kreis mit der Farbe an. Per Klick darauf öffnet ein Farbpicker, worüber man andere Farben suchen kann. Hält man die Shift-Taste gedrückt, wenn man auf diesen Kreis klickt, wechselst Firefox die Darstellung zwischen Hexadezimal, RGB und HSL. Eine Website braucht es dafür keine.

milupo

Zitat von Zitronella

Gerade auf die Suche gemacht, dieser hier https://rgbacolorpicker.com/ erscheint mir am übersichtlichsten.

Ja,

Bei Mozilla gibt es auch noch ein Farbauswahl-Werkzeug:

Farbauswahl-Werkzeug - CSS | MDN

Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS…

developer.mozilla.org

.DeJaVu

CSS

border: 0px solid transparent !important;

=

border: none;

Zitat

Eine Website braucht es dafür keine.

Da ich Stylus nutze und das so ähnlich arbeitet, kann ich sogar meine userChrome vorab damit prüfen.

Das ist ja das Schöne mit Firefox und dem Inspector - man kann dort vorarbeiten, Änderungen in Teilen einstellen und dann übertragen.

Wegen rgba, das ist auch als # machbar: rgba(64,64,64,.5) wäre #40404080 (64|64|64|128von255).

milupo

Habe gerade gesehen, bei der deutsche Übersetzung der Seite des Mozilla-Farbauswahl-Werkzeugs wird rechts reichlich abgeschnitten. Man muss horizontal scrollen. Die vorgehene Breite des Bereichs ist offensichtlich zu klein. Auf der englischen Originalseite ist das besser:

Color picker tool - CSS: Cascading Style Sheets | MDN

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats…

developer.mozilla.org

Sören Hentzschel

Wie gesagt, Firefox hat die Funktion eh eingebaut. Eine Website aufzurufen und dort dann nochmal die Farbwerte einzugeben, ist unnötige Arbeit. Und wer ein bestimmtes Farbformat vorzieht, kann in den Einstellungen der Entwicklerwerkzeuge dieses sogar festlegen, so dass standardmäßig immer dieses Format genutzt wird.

Zitronella

Zitat von Sören Hentzschel

Hält man die Shift-Taste gedrückt, wenn man auf diesen Kreis klickt, wechselst Firefox die Darstellung zwischen Hexadezimal, RGB und HSL

sehr cool Danke

harff182

BrokenHeart :

Zitat von BrokenHeart

Dann bitte mal testen:

Ich bin eben nochmal deinen Code durchgegangen und über die Zeilen 45-48 gestolpert

Ist das der Rest vom Schützenfest, den Du vergessen hast rauszunehmen?

harff182 9. September 2021 um 20:19