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

Horstmann

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:

CSS

/*  Buttons right , ohne Firefox Logo grau  */
:is(#identity-box, #tracking-protection-icon-container):not(#identity-box.chromeUI) {
    order: 2 !important;
    margin-inline: 0px !important;
    opacity: 0.0 !important;
}

#star-button-box:not(:hover, :active, [open]) {
    opacity: 0.0 !important;
}

:is(#identity-box, #tracking-protection-icon-container):not(#identity-box.chromeUI):hover {
    opacity: 1.0 !important;
}

/*  Star button right  */
#page-action-buttons {
    order: 3 !important;
}

Alles anzeigen

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!

Mira_Belle

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.

2002Andreas

Zitat von Mira_Belle

opacity: 0.0 !important;

Nur als kleiner Hinweis.

opacity: 0 !important;

reicht in diesem Fall.

Horstmann

Zitat von Mira_Belle

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...

Zitat von Mira_Belle

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!

Mira_Belle

Zitat von 2002Andreas

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.

Zitat von Horstmann
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".

2002Andreas

Zitat von Mira_Belle

damit ich daran erinnert werde

ok

Horstmann

Zitat von 2002Andreas

opacity: 0 !important;
reicht in diesem Fall.

Klassiker.

Zitat von Mira_Belle
Zitat von Horstmann
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.

Mira_Belle

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.

2002Andreas

Zitat von Mira_Belle

Den will ich aber definitiv weg haben, der nervt.

config

reader.parse-on-load.enabled

auf false + Neustart vom Fx.

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

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.

Horstmann

Zitat von Mira_Belle

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.

Horstmann

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 ...

CSS

                                                      /* Test 2 Leerprofil ok */



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

#identity-box[pageproxystate="invalid"] #identity-icon {
    display: none !important;
}

#identity-box[pageproxystate="invalid"] .identity-box-button {
    display: none !important;
}


/*  Notifications box Off ? */
/*
#identity-permission-box {
    display: none !important;
}*/


#urlbar-input {
    padding-inline: 9px !important;
}

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container):not(:hover, :hover:active, [open="true"]) {
    opacity: 0.5 !important;
}

#star-button-box:not(:hover, :active, [open]) {
    opacity: 0.5 !important;
}


                                                      /* colors */

#star-button-box {
    background-color: khaki !important;
}

#identity-box:not(.chromeUI) .identity-box-button {
    background-color: lightblue !important;
}

#tracking-protection-icon-container {
    background-color: orange !important;
}


                                                      /* positions */

#page-action-buttons {
    position: absolute !important;
    right: 0px !important;
}

#identity-box:not(.chromeUI) {
    position: absolute !important;
    margin-inline: 0px !important;
    height: 100% !important;
    right: 28px !important;
    z-index: 10 !important;
}

#tracking-protection-icon-container {
    position: absolute !important;
    margin-inline: 0px !important;
    height: 100% !important;
    right: 56px !important;
    z-index: 10 !important;
}

Alles anzeigen

Horstmann

Und noch einer.

CSS

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

#identity-box[pageproxystate="invalid"] {
    display: none !important;
}

#identity-permission-box {
    display: none !important;
}

#contextual-feature-recommendation, 
#userContext-icons, 
#reader-mode-button, 
#pageActionButton, 
#urlbar-zoom-button, 
#translations-button, 
#picture-in-picture-button, 
#pageActionButton {
    display: none !important;
}

#urlbar-input {
    padding-inline: 9px !important;
}

                                                      /* opacity not hover, 0, testing 0.5 */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) {
    opacity: 0 !important;
}

                                                      /*  test colors  */
/*
#star-button-box {
    background-color: khaki !important;
}

#identity-box:not(.chromeUI) .identity-box-button {
    background-color: lightblue !important;
}

#tracking-protection-icon-container {
    background-color: orange !important;
}*/

                                                      /*  hover, open colors */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover {
    background-color: color-mix(in srgb, currentColor 17%, white) !important;
}

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] {
    background-color: color-mix(in srgb, currentColor 30%, white) !important;
}

                                                      /* positions */

:root {
    --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
}

#page-action-buttons:not(.chromeUI ~ #page-action-buttons) {
    position: absolute !important;
    right: 2px !important;
}

#identity-box:not(.chromeUI), #tracking-protection-icon-container {
    position: absolute !important;
    margin-inline: 0px !important;
    height: var(--custom-url-icon-size) !important;
    width: var(--custom-url-icon-size) !important;
    z-index: 2 !important;
}

#identity-box:not(.chromeUI) {
    right: calc(var(--custom-url-icon-size) + 4px) !important;
}

#tracking-protection-icon-container {
    right: calc(2*var(--custom-url-icon-size) + 6px) !important;
}

Alles anzeigen

Horstmann

Oder doch besser sowas in der Art?

Fragen über Fragen...

CSS

                                                      /* Test Margin #4 alter */



                                                      /*  colors testing only */
/*
#star-button-box {
    background-color: khaki !important;
}

#identity-box:not(.chromeUI) .identity-box-button {
    background-color: lightblue !important;
}

#tracking-protection-icon-container {
    background-color: orange !important;
}*/


/*  Buttons right  */

:is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) {
    order: 1 !important;
    margin-inline: 0px !important;
    z-index: 2 !important;
}

/*  Icons color */

:is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) {
    fill: rgba(80, 80, 80, 1.0) !important;
}

                                                      /* opacity not hover, open 0, testing 0.5 */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) {
    opacity: 0 !important;
}

                                                      /*  hover, open colors */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover {
    background-color: color-mix(in srgb, white 70%, rgba(87, 80, 68, 1)) !important;
}

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] {
    background-color: color-mix(in srgb, white 50%, rgba(87, 80, 68, 1)) !important;
}


                                                      /* text full width, overflow ellipsis */

:root {
    --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
}

#urlbar-input {
    padding-inline: 9px !important;
    /*margin-right: -84px !important;*/
    margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important;
    mask-image: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


                                                      /* extra buttons */

#urlbar-zoom-button {
    margin: 0px !important;
    /*padding: 7px !important;*/
    order: 1 !important;
}

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

#identity-box[pageproxystate="invalid"] {
    display: none !important;
}

#identity-permission-box {
    display: none !important;
}


/* buttons never seen ? */

/*
#contextual-feature-recommendation, 
#userContext-icons, 
#reader-mode-button, 
#pageActionButton, 
#translations-button, 
#picture-in-picture-button, 
#pageActionButton {
    display: none !important;
}*/

Alles anzeigen

Horstmann

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

CSS

/* Test Margin #7a , Text width static */



/*  Buttons right  */

:is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) {
    order: 1 !important;
    margin-inline: 0px !important;
    z-index: 2 !important;
}


/* opacity not hover, open 0, testing 0.5 */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) {
    opacity: 0 !important;
}


/* text full width, overflow ellipsis optional, 84px */

:root {
    --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
}

#urlbar-input {
    padding-inline: 9px !important;
    margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important;
    /* overflow ellipsis instead of gradient, optional */
    /*mask-image: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;*/
}


/*  hover, open background not transparent  */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover {
    background-color: color-mix(in srgb, white 70%, rgba(87, 80, 68, 1)) !important;
}

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] {
    background-color: color-mix(in srgb, white 50%, rgba(87, 80, 68, 1)) !important;
}


/*  Icons color */

:is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) {
    fill: rgba(80, 80, 80, 1.0) !important;
}


/* extra buttons */

#urlbar-zoom-button {
    margin: 0px !important;
    order: 1 !important;
}

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

#identity-box[pageproxystate="invalid"] {
    display: none !important;
}

#identity-permission-box {
    display: none !important;
}


/* buttons never seen ? */

/*
#contextual-feature-recommendation, 
#userContext-icons, 
#reader-mode-button, 
#pageActionButton, 
#translations-button, 
#picture-in-picture-button, 
#pageActionButton {
    display: none !important;
}*/


/*  colors testing only  */
/*
#star-button-box {
    background-color: khaki !important;
}

#identity-box:not(.chromeUI) .identity-box-button {
    background-color: lightblue !important;
}

#tracking-protection-icon-container {
    background-color: orange !important;
}*/

Alles anzeigen

#2

CSS

* Test Margin #7b Multi Buttons Margins, Text width dynamic */


/*  Buttons right  */

:is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) {
    order: 1 !important;
    margin-inline: 0px !important;
    z-index: 2 !important;
}


/* opacity not hover, open 0, testing 0.5 */

:is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) {
    opacity: 0 !important;
}


/* text full width, overflow ellipsis optional, 84px */

:root {
    --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
}


#urlbar-input {
    padding-inline: 9px !important;
    margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important;
    /* overflow ellipsis instead of gradient, optional */
    /*mask-image: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;*/
}


/* Test Multi Button Margins hover, open */

#page-action-buttons #star-button-box:is(:hover, [open="true"]) {
    margin-left: calc(1 * var(--custom-url-icon-size)) !important;
}

#identity-box:not(.chromeUI) #identity-icon-box:is(:hover, [open="true"]) {
    margin-left: calc(2 * var(--custom-url-icon-size)) !important;
}

#tracking-protection-icon-container:is(:hover, [open="true"]) {
    margin-left: calc(3 * var(--custom-url-icon-size)) !important;
}


/*  Icons color */

:is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) {
    fill: rgba(80, 80, 80, 1.0) !important;
}

/* extra buttons */

#urlbar-zoom-button {
    margin: 0px !important;
    order: 1 !important;
}

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

#identity-box[pageproxystate="invalid"] {
    display: none !important;
}

#identity-permission-box {
    display: none !important;
}


/* buttons never seen ? */

/*
#contextual-feature-recommendation, 
#userContext-icons, 
#reader-mode-button, 
#pageActionButton, 
#translations-button, 
#picture-in-picture-button, 
#pageActionButton {
    display: none !important;
}*/


/*  colors testing only  */

/*
#star-button-box {
    background-color: khaki !important;
}

#identity-box:not(.chromeUI) .identity-box-button {
    background-color: lightblue !important;
}

#tracking-protection-icon-container {
    background-color: orange !important;
}*/

Alles anzeigen

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

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

About Seiten mit CSS Codes anpassen

Firefox 113 Probleme mit TABs und Kontext Menü

Firefox 113 Änderungen