URL Text gesamte Breite, Buttons im Eingabefeld darüber schwebend?

  • Firefox-Version
    1113.01
    Betriebssystem
    macOs 10.13.6

    Im Eingabefeld der URL Leiste gibt es ja diverse Buttons, um Lesezeichen zu speichern, Infos und Schutzmassnahmen anzuzeigen, etc. .

    Diese Buttons limitieren die Breite des URL Text, was generell ja auch Sinn macht.

    In meinem Fall habe ich einige Buttons komplett ausgeblendet, oder verschoben und nur bei Hover sichtbar gemacht.

    Als Beispiel, hier nur ein Test:

    Das sieht dann im Testprofil so aus:

    Wenn ich über einem der Buttons mit der Maus bin ( Hover ) dann zB so:


    Wie man sieht, ist rechts die reservierte Lücke für die Buttons; ich würde das aber gerne ändern, und den Text im Eingabefeld permanent auf voller Breite haben; die Buttons sollten dann bei Hover über diesen Buttons auftauchen, und über dem Text quasi `schweben', bzw. ihn überlagern.

    Hier wäre ein in Photoshop insziniertes Beispeil dazu.

    (Die 'verbleibende Lücke' ist etwas das ich auch beim Verstecken aller gefunden Buttons und übergeordneten Elementen (display: none) nicht wegbekommen hatte).

    Danke schon mal für Vorschläge! :)

  • Das ist ja nicht wirklich eine Lücke!

    Das ist die Stelle der Box (#identity-box) und dahinter wäre die Stelle des Lesezeichensterns.

    Habe das mal nachzustellen versucht, da sehr interessant!

    Nur bei mir ginge es "nur" um Firefoxtranslation und Lesezeichenstern.

    CSS
    #star-button-box:not(:hover, :active, [open]) {
        opacity: 0.0 !important;
    }
    #pageAction-urlbar-firefox-translations-addon_mozilla_org:not(:hover, :active, [open]) {
        opacity: 0.0 !important;
    }

    Wenn der Text der Webpage bis zum Ende der Zeile gehen würde,

    und die Symbole dann bei Hover über dem Text "schweben würden", ja das, das wäre schon fein.

    Mit <3lichem Gruß

    Mira

  • Das ist ja nicht wirklich eine Lücke!

    Das ist die Stelle der Box (#identity-box) und dahinter wäre die Stelle des Lesezeichensterns.

    Habe das mal nachzustellen versucht, da sehr interessant!

    Die Lücke war mein Fehler, es ist tatsächlich die #star-button-box die ich bei meinem (nicht beschriebenen) Test vergessen hatte.

    Das hier elimiert die Lücken beidseitig, zumindest bei mir im Testprofil:

    CSS
    #identity-box, #tracking-protection-icon-container, #star-button-box {
        display: none !important;
    }

    Sorry, am besten den Teil einfach ignorieren...

    Wenn der Text der Webpage bis zum Ende der Zeile gehen würde,

    und die Symbole dann bei Hover über dem Text "schweben würden", ja das, das wäre schon fein.

    Denk ich auch! :)

  • Nur als kleiner Hinweis.

    opacity: 0 !important;

    reicht in diesem Fall.

    Ich weiß, danke, aber ich habe es mit Absicht so belassen, damit ich daran erinnert werde, dass man das per 0.1 bis 1.0

    einstellen kann.

    CSS
        display: none !important;

    Das blendet aber leider die Elemente komplett aus und somit funktioniert dann auch das Einblenden nicht mehr.

    Da muss es einen anderen Trick geben, damit sich die Elemente "überlagern".

    Mit <3lichem Gruß

    Mira

  • opacity: 0 !important;

    reicht in diesem Fall.

    Klassiker. ;)


    CSS
        display: none !important;

    Das blendet aber leider die Elemente komplett aus und somit funktioniert dann auch das Einblenden nicht mehr.

    Da muss es einen anderen Trick geben, damit sich die Elemente "überlagern".

    Nochmals sorry, das war nur als Test gedacht um alle(?) Elemente anzusprechen; hätte ich klarer ausdrücken sollen.

    Man sollte auch zumindest den Star Button sowieso nicht in der Art ausblenden, weil sonst die Funktion verloren geht.

    Einmal editiert, zuletzt von Horstmann (13. Mai 2023 um 16:09) aus folgendem Grund: Ein Beitrag von Horstmann mit diesem Beitrag zusammengefügt.

  • CSS
    #reader-mode-button {
        display: none !important;
    }

    Den will ich aber definitiv weg haben, der nervt.

    So, jetzt habe ich hier allen Code beisammen, den ich brauche.

    Jetzt brauchts nur noch eine Idee, wie man Elemente sich "überlagern" lässt.

    Mit <3lichem Gruß

    Mira

  • Den will ich aber definitiv weg haben, der nervt.

    config

    reader.parse-on-load.enabled

    auf false + Neustart vom Fx.

    Danke, ....

    aber DAS, ist doch viel zu einfach. ^^


    Lässt sich da nicht was mit

    Code
     visibility: hidden

    machen?

    Muss nun Schluss machen.

    Wenn es bis Montag nichts mehr tut, mache ich mich daran, habe ja jetzt Blut geleckt, an der Sache.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (13. Mai 2023 um 16:38) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • Wenn der Text der Webpage bis zum Ende der Zeile gehen würde,

    und die Symbole dann bei Hover über dem Text "schweben würden", ja das, das wäre schon fein.

    Im Prinzip scheint sowas halbwegs zu funktionieren:

    CSS
    #urlbar-input-container:not(:hover) :is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button-box) :not(:hover:active, [open="true"]) {
        display: none !important;
    }
    
    #urlbar-input-container:not(:hover) #tracking-protection-icon-container {
       padding-inline: 0 !important;
    }

    Das ist nur ein Anfang, und deckt weder alle Buttons ab, noch bleibt der Text bei Hover auf voller Breite wie gewünscht; zudem bleibt die Breite bei einigen Buttons nicht konstant wenn man die Maus weg von der URL Leiste über das Popup bewegt - wenigstens bleiben die Popups endlich offen. ;)

    Aber falls noch jemand daran werkelt, hilft's vielleicht beim Testen.

  • Hmm, das Gehacke geht munter weiter; in einem frischen Profil funktioniert sowas scheinbar halbwegs.

    Vermutlich fehlt die Hälfte oder macht irgendwo Zicken, und ist nur ein grober Test ...

    Einmal editiert, zuletzt von Horstmann (14. Mai 2023 um 11:19)

  • Und noch einer.

  • Oder doch besser sowas in der Art? :/

    Fragen über Fragen... ;)

    Einmal editiert, zuletzt von Horstmann (14. Mai 2023 um 20:35)

  • Aktuelle Tests; in zwei Versionen: #1 hat den Eingabetext permanent auf voller Breite, die Icons schweben dann bei Hover darüber.

    Bei #2 passt sich der Text dynamisch in der Breite an, wenn man über den Icons hovert, und ist sonst auf voller Breite (s. Bilder).

    Ideal wäre, wenn sich der Textabstand nach rechts dynamisch ändern liesse, sobald von Firefox ein zusätzliches Icon auf der rechten Seite aktiviert bzw. deaktiviert wird.

    So ist jetzt der Textabstand rechts auf drei gleich breite Buttons eingestellt; kommt einer dazu oder wird breiter (zB. Permissions), entsteht wieder eine Lücke.

    Was Fx im Prinzip ja auch macht, nur wie?


    #1

    #2

    Einmal editiert, zuletzt von Horstmann (15. Mai 2023 um 12:53)