Favicons in Lesezeichenmenüs Größe anpassen

Thomas S.

Hallo, ich habe noch ein kleines "Problem".

Wenn ich den Zeilenabstand in den Lesezeichenmenüs verringere, werden die Favicons mindestens in der Höhe skaliert.

Und die Ausrichtung stimmt nicht mehr, Icon und Text sind nicht mehr auf einer Höhe.

Extrembeispiel mit 18px Zeilenhöhe (so knapp soll das nicht werden, hier nur zur Verdeutlichung):

Bisher gefundenen CSS-Code dazu:

CSS

/* Lesezeichen Sidebar Zeilenabstand kleiner */
 .sidebar-placesTree treechildren::-moz-tree-row {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 22px !important;
    min-height: 22px !important;
}
/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    .menuitem-iconic.bookmark-item.menuitem-with-favicon {
        max-width:500px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        height: 18px !important;
        min-height: 18px !important;
    }
}
/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    menu[container="true"][class="menu-iconic bookmark-item"]{
        max-width:500px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        height: 18px !important;
        min-height: 18px !important;
    }
}

Alles anzeigen

Die Skalierung fängt schon bei relativ großen Zeilenhöhen (ca. 25 px) an.

Wie kann ich den Zeilenabstand verringern, ohne das die Icons skaliert werden?

Schonmal Danke für die Hilfe!

2002Andreas

Vorweg, in Zeile 15 fehlt die 2te }

Ansonsten sieht das mit deinem Code hier so aus:

Da sehe ich keine abgeschnittenen Favicons.

Thomas S.

Hallo Andreas.

Codefehler war ein Kopierfehler hier her...

Ich habe mal die Sidebar und das Menü zusammen dargestellt, beides mit Zeilenhöhe 20px, wie es sein soll.

Die Favicons im Menü sind erheblich kleiner (in der Höhe gestaucht) und scheinbar nach oben verschoben.

Kann die Skalierung der Favicons überschrieben / abgestellt werden?

milupo

Zitat von 2002Andreas

Vorweg, in Zeile 15 fehlt die 2te }

So? Die Klammern sind in Zeile 16 und 17.

milupo

Zitat von milupo

Zitat von milupo

Zitat von 2002Andreas

Vorweg, in Zeile 15 fehlt die 2te }

So? Die Klammern sind in Zeile 16 und 17.

Zu spät, schon geändert.

2002Andreas

Zitat von milupo

Die Klammern sind in Zeile 16 und 17.

Ja jetzt, weil..

Zitat von Thomas S.

Codefehler war ein Kopierfehler hier her...

Er hat sie nachträglich eingesetzt

2002Andreas

Zitat von Thomas S.

Die Favicons im Menü sind erheblich kleiner (in der Höhe gestaucht) und scheinbar nach oben verschoben.

Dein kompl. Code sieht hier so aus:

Und da passt alles.

Ergo funkt dir ein anderer Code dazwischen.

2002Andreas

Ich vermute mal dieser.

#54

Thomas S.

Zitat von 2002Andreas

Er hat sie nachträglich eingesetzt

Richtig. Und korrekt im Edit erwähnt, Zitat: "Einmal editiert, zuletzt von Thomas S. (Vor 17 Minuten) aus folgendem Grund: Code korrigiert".

Und auch bei mir gilt:

Fehler, die ich mache und die andere finden können von denen gerne behalten werden...

2002Andreas

Zitat von Thomas S.

Fehler, die ich mache und die andere finden können von denen gerne behalten werden...

Aber nicht wenn er sich in einem Code befindet, den evtl. andere User auch ausprobieren etc.

Thomas S.

Zitat von 2002Andreas

Ich vermute mal dieser.

#54

Eindeutig nein.

Nur dieser komplette Code in der userChrome.css (schon etwas modifiziert wegen der Tests) zeigt dieses Verhalten.

CSS

/*
 Do not remove the @namespace line -- it's required for correct functioning -- set default namespace to XUL
*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* verschiedene Variable (Farben, Positionen)  */
:root {

/* Abstände der Lesezeichen anpassen */

    --LesezeichenSidebarHight: 20px;
    --LesezeichenSidebarMinHight: 20px;
    --LesezeichenPopupHight: 20px;
    --LesezeichenPopupMinHight: 20px;
    
}


/* +++++++++++++++ Weitere Anpassungen ab Firefox 60 ++++++++++++++++ */

/* #################### diverse Abstände anpassen ################### */

/* Lesezeichen Sidebar Zeilenabstand kleiner */
 .sidebar-placesTree treechildren::-moz-tree-row {
    margin: center !important;
    height: var(--LesezeichenSidebarHight) !important;
    min-height: var(--LesezeichenSidebarMinHight) !important;
}
/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    .menuitem-iconic.bookmark-item.menuitem-with-favicon {
        max-width:500px !important;
        margin: center !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !important;
    }
}
/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    menu[container="true"][class="menu-iconic bookmark-item"]{
        max-width:500px !important;
        margin: center !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !important;
    }
}

Alles anzeigen

2002Andreas

Zitat von Thomas S.

margin: center !important;

Zumindest ich kenne diese Bezeichnung bei Abständen nicht.

Thomas S.

War der derzeitige Stand nur zum Testen, kann auch rausgenommen werden, ändert nix.

Ich stocher da ein weinig im Nebel herum...

milupo

Zitat von Thomas S.

Nur dieser komplette Code in der userChrome.css (schon etwas modifiziert wegen der Tests) zeigt dieses Verhalten.

Du solltest Codes in CSS-Dateien auslagern, Codes für unterschiedliche Zwecke in unterschiedliche Dateien. Auf diese Dateien wird in der userChrome.css mit einem @import-Befehl Bezug genommen. Bei Problemen kannst du durch Deaktivieren des @import-Befehls den Übeltäter-Code leicht herausfinden, ohne meterlangen Code mehrfach durchsehen zu müssen, was sehr fehleranfällig ist.

Thomas S.

Noch nicht notwendig.

Meine eigentlich fast fertige userChrome.css hat gerade 290 Zeilen inkl. vieler Kommentare und Variablen.

Das lohnt nicht wirklich, ist noch sehr übersichtlich.

Bei den *.uc.js mache ich das schon, klar.

Hier teste ich auch nur mit den paar Zeilen herum, da wird nichts von anderem (nicht existentem) Code beeinflußt.

Sören Hentzschel

Zitat von 2002Andreas

Zitat von Thomas S.

margin: center !important;

Zumindest ich kenne diese Bezeichnung bei Abständen nicht.

Gibt es auch nicht. Wenn schon, dann zentriert man in CSS mit margin: 0 auto !important;.

Das ist ein allgemeiner Hinweis. Ich habe es nicht am konkreten Beispiel getestet.

Thomas S.

Es geht hier zwar auch um die Ausrichtung von Favicon und Text, aber im Wesentlichen erst einmal um die automatische Skalierung (Verkleinerung bzw. Stauchung) der Favicons. Bei mir ist das unter Linux und Win7 identisch der Fall, wenn ich nur die Zeilenhöhe (und nur die) per CSS verkleinere.

Zitat von 2002Andreas

Dein kompl. Code sieht hier so aus:
Und da passt alles.

Hmmm, nicht wirklich.

Auch in Deinem Menü sind Favicon und Text nicht (mehr) zueinander mittig ausgerichtet.

Der Text ist deutlich niedriger als das Icon.

Die Frage ist also, wie man hier welche notwendigen Parameter adressieren kann.

2002Andreas

Teste bitte mal:

CSS

/* Lesezeichen Sidebar Zeilenabstand kleiner */
 .sidebar-placesTree treechildren::-moz-tree-row {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 22px !important;
    min-height: 22px !important;
}
/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    
    
    .menuitem-iconic.bookmark-item.menuitem-with-favicon {
        height: 0.5em !important;
        max-width:500px !important;
    }
}

/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    menu[container="true"][class="menu-iconic bookmark-item"]{
       height: 0.5em !important;
       max-width:500px !important;
    }
}

.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
    margin-top: 3px !important;
}

Alles anzeigen

Thomas S.

Ja, das geht in die richtige Richtung.

Allerdings funktioniert im Wesentlichen der unterste Block, mit dem ich die Favicons wieder "entzerren" konnte.

CSS

/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    .menuitem-iconic.bookmark-item.menuitem-with-favicon {
        max-width:500px !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !important;
    }
}
/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
    menu[container="true"][class="menu-iconic bookmark-item"]{
        max-width:500px !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !important;
    }
}
.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
    margin-top: calc(var(--LesezeichenPopupHight) / -3) !important;
    margin-bottom: calc(var(--LesezeichenPopupHight) / -2) !important;
}

Alles anzeigen

Mit --LesezeichenPopupHight und --LesezeichenPopupMinHight zu 22px ergibt das:

Man sieht aber, das auch der Text "unten" hängt, daher ist auch die ungleiche Aufteilung margin-top / -bottom notwendig.

Kann so wie mit .bookmark-item:not(.subviewbutton) > .menu-iconic-left das Favicon auch der Text separat angesprochen werden?

Übrigens: mit dem calc kann ich mit den Zeilenhöhen beliebig variieren, die Skalierung de Favicons paßt dann inetwa - ansonsten muß ich diese Werte ständig verändern.

Thomas S.

Habs scheinbar gefunden:

.bookmark-item:not(.subviewbutton) > .menu-iconic-text