Icons und Zeilenabstand Ordnerliste vergrößern

milupo · September 17, 2023 at 2:15 PM

Munggel Die Klammer unter font-size: 14px !important; muss eine schließende Klammer sein – }, keine öffnende Klammer.

milupo · September 17, 2023 at 2:36 PM

Hallo Munggel,

ein Hinweis: Setze doch bitte deinen Code in Zukunft in einen Code-Kasten:

1. Klicke im Antwort-Fenster auf das Symbol </>

2. Der Kasten wird mit dem Wort Quellcode eingefügt.

3. Klicke auf das Wort Quellcode. Das Fenster „Code bearbeiten“ öffnet sich.

4. Wähle in diesem Fenster bei Syntax-Hervorhebung den Eintrag CSS aus.

5. Klicke auf die Schaltfläche Speichern.

6. Du bist jetzt wieder im Antworten-Fenster. Dort steht jetzt CSS statt Quellcode drin.

7. Füge jetzt deinen Code in den Kasten ein.

8. Wenn du noch weiter schreiben möchtest, achte darauf, dass du unterhalb des Kastens weiterschreibst.

9. Schicke deinen Beitrag ab, wenn du fertig bist.

Du wirst sehen, dein Code wird dann schick aussehen.

Munggel · September 17, 2023 at 2:50 PM

Vielen Dank dharkness21

Ich hab's jetzt noch etwas verfeinert mit weisser (#FFFFFF) Hover-Angabe, bin aber noch nicht "angekommen" stosse auf Troubles mit aktiver vs. inaktiver Nachricht bzw. fokussiert vs. unfokussiert (siehe letzter Screenshot). Magst du mir nochmals helfen mit dem Feinschliff zwischen angewählter vs. nicht angewählter Nachricht? Ich hätte es enorm gerne so angepasst:

Inaktive Nachricht (nicht angewählt = weiss hinterlegt):

ohne Hover: weiss hinterlegt, zweite Zeile in Grau (#A4A4A4) --> korrekt!

mit Hover: hellblau hinterlegt, zweite Zeile in Grau (#A4A4A4) --> korrekt!

Aktive Nachricht (angewählt und fokussiert = dunkelblau):

ohne Hover: dunkelblau hinterlegt (korrekt), beide Zeilen in weiss --> korrekt

mit Hover: dunkelblau hinterlegt (korrekt), beide Zeilen in weiss --> korrekt

Aktive Nachricht (angewählt aber unfokussiert = hellgrau hinterlegt):

ohne Hover: hellgrau hinterlegt (korrekt), beide Zeilen in schwarz --> aktuell zweite Zeile weiss statt schwarz

mit Hover: hellgrau hinterlegt (korrekt), beide Zeilen in schwarz --> aktuell zweite Zeile weiss statt schwarz

UPDATE: Ich habe mit Hilfe verschiedener Threads meine eigenen Schlüsse aus dem CSS-Code gezogen und habe den Parameter ".selected" gefunden. Bin damit schon fast durchgekommen. Leider habe ich es nicht hinbekommen, angewählt vs. nicht angewählt herauszukitzeln. Bin dennoch #etwas_stolz

Wer hilft mit auf den letzten Metern? :-))) Es wäre schon super-praktisch, wenn man ein Verzeichnis über die Nomenklatur der Bereiche hätte...

DANKE!!

CSS

tr[is="thread-card"][data-properties~="read"] :is([class="subject"]) 
    {color: #A4A4A4 !important; }

tr[is="thread-card"][data-properties~="read"] :hover :is([class="subject"]) 
    {color: #A4A4A4 !important; }

tr[is="thread-card"][data-properties~="read"].selected :is([class="subject"]) 
    {color: #FFFFFF !important; }

tr[is="thread-card"][data-properties~="read"].selected :hover :is([class="subject"]) 
    {color: #FFFFFF !important; }

tr[is="thread-card"][data-properties~="read"]:focus > .selected :is([class="subject"]) 
    {color: #FFFFFF !important; }

tr[is="thread-card"][data-properties~="read"]:focus > .selected :hover :is([class="subject"]) 
    {color: #FFFFFF !important; }

tr[is="thread-card"][data-properties~="read"]:focus-within > .selected :is([class="subject"]) 
    {color: #FFFFFF !important; }

tr[is="thread-card"][data-properties~="read"]:focus-within > .selected :hover :is([class="subject"]) 
    {color: #000000 !important; }

Display More

DarkCorri53i · September 18, 2023 at 7:39 PM

Munggel

Hallo Munggel,

da scheint etwas mit deinem Farbcode schwarz nicht zu stimmen. Probiere mal #000 oder black in der letzten Codezeile aus. Funktioniert bei mir.

Gruß

Markus

Munggel · September 18, 2023 at 8:01 PM

Quote from DarkCorri53i

Munggel
Hallo Munggel,
da scheint etwas mit deinem Farbcode schwarz nicht zu stimmen. Probiere mal #000 oder black in der letzten Codezeile aus. Funktioniert bei mir.
Gruß
Markus

Herzlichen Dank für den Tipp, DarkCorri53i

Leider hat weder #000 noch "black" einen Effekt hier :-(((

Stimmen denn die Parameter ":focus >" bzw. ":focus-within >"?

dharkness21 · September 18, 2023 at 8:07 PM

Quote from Munggel

Ich hab's jetzt noch etwas verfeinert mit weisser (#FFFFFF) Hover-Angabe, bin aber noch nicht "angekommen" stosse auf Troubles mit aktiver vs. inaktiver Nachricht bzw. fokussiert vs. unfokussiert (siehe letzter Screenshot). Magst du mir nochmals helfen mit dem Feinschliff zwischen angewählter vs. nicht angewählter Nachricht? Ich hätte es enorm gerne so angepasst:

Teste bitte mal das ↓ CSS-Schnipsel statt Deinem CSS.

CSS

tr[is="thread-card"][data-properties~="read"] :is([class="subject"]) {
    color: #A4A4A4 !important;
}
tr[is="thread-card"][data-properties~="read"]:hover :is([class="subject"]) {
    color: #A4A4A4 !important;
}
tr[is="thread-card"][data-properties~="read"].selected :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected:hover :is([class="subject"]) {
    color: #000 !important;
}
tr[is="thread-card"][data-properties~="read"].selected:focus :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected:focus:hover :is([class="subject"]) {
    color: #000 !important;
}

Display More

Munggel · September 18, 2023 at 8:39 PM

Danke dharkness21

Jetzt scheint etwas zu gehen bzgl. der Parameter :-).

Leider ist es immer noch nicht so, wie ich es mir vorstelle:

Aktuell:

Message angewählt aber NICHT im Fokus ohne Hover --> Subject Schrift weiss statt schwarz auf hellgrauem Grund
Message angewählt aber NICHT im Fokus mit Hover --> korrekt in schwarz auf hellgrauem Grund
Leider "greift" jetzt der schwarze Hover-Effekt auch bei angewählter Message im Fokus plus Hover (dunkelblau)

Nochmals das Ziel:

Inaktive Nachricht (nicht angewählt)

mit Hover: BG hellblau, Subject in Grau (#A4A4A4) --> korrekt!

ohne Hover: BG weiss, Subject in Grau (#A4A4A4) --> korrekt!

Aktive Nachricht (angewählt und fokussiert = BG immer dunkelblau):

mit Hover: beide Zeilen in weiss --> falsch (zweite Zeile schwarz)

ohne Hover: beide Zeilen in weiss --> korrekt

Aktive Nachricht (angewählt aber unfokussiert):

mit Hover: BG dunkelblau, beide Zeilen in weiss --> falsch (zweite Zeile schwarz)

ohne Hover: BG dunkelblau, beide Zeilen in weiss --> korrekt

Lasst mich wissen, falls es euch zu doof wird

UPDATE: nach einigem Probieren scheint der Parameter ".selected:focus" noch schief zu sein (bzw. beschreibt er nicht den Zustand des "inaktiven" aber angewählten Message - Ist das möglich dharkness21 ?

dharkness21 · September 18, 2023 at 9:09 PM

Quote from Munggel

Leider ist es immer noch nicht so, wie ich es mir vorstelle:

Tausche mal die * Zeilen gegen die **.

*

CSS

tr[is="thread-card"][data-properties~="read"].selected:focus :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected:focus:hover :is([class="subject"]) {
    color: #000 !important;
}

**

CSS

tr[is="thread-card"][data-properties~="read"].selected(focus) :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected(focus):hover :is([class="subject"]) {
    color: #000 !important;
}

Munggel · September 18, 2023 at 9:14 PM

Quote from dharkness21

Tausche mal die * Zeilen gegen die **.

*

CSS

tr[is="thread-card"][data-properties~="read"].selected:focus :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected:focus:hover :is([class="subject"]) {
    color: #000 !important;
}

**

CSS

tr[is="thread-card"][data-properties~="read"].selected(focus) :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"].selected(focus):hover :is([class="subject"]) {
    color: #000 !important;
}

Danke vielmals dharkness21 - Klappt leider immer noch nicht...

dharkness21 · September 18, 2023 at 9:40 PM

Quote from Munggel

Klappt leider immer noch nicht...

Grml, für heute bitte noch die ↓ Variante testen.

CSS

tr[is="thread-card"][data-properties~="read"](focus).selected :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"](focus).selected:hover :is([class="subject"]) {
    color: #000 !important;
}

Munggel · September 18, 2023 at 9:52 PM

Quote from dharkness21

Grml, für heute bitte noch die ↓ Variante testen.

CSS

tr[is="thread-card"][data-properties~="read"](focus).selected :is([class="subject"]) {
    color: #FFF !important;
}
tr[is="thread-card"][data-properties~="read"](focus).selected:hover :is([class="subject"]) {
    color: #000 !important;
}

Fürchte, ist leider auch nix...very sorry. Danke für deine grosse Geduld und den Bock, mir zu helfen!
Das muss doch irgendwie gehen, hmm...

DarkCorri53i · September 20, 2023 at 8:08 PM

Munggel

Hallo Munggel,

ich habe gerade folgendes entdeckt: https://www.deskmodder.de/blog/2023/09/2…neuen-profilen/

Bei den Fehlerkorrekturen steht auch folgendes:

Bei fokussierten, aber nicht ausgewählten Nachrichten fehlte die visuelle Anzeige des Fokus in der Kartenansicht

Vielleicht hat dies ja mit deinem Problem zu tun. Warte einmal auf das neue update auf 115.2.3

Gruß

Markus

Munggel · September 22, 2023 at 7:06 PM

Quote from DarkCorri53i

Vielleicht hat dies ja mit deinem Problem zu tun. Warte einmal auf das neue update auf 115.2.3
Gruß
Markus

Hallo dharkness21 und DarkCorri53i

Ich hab gesehen, dass mittlerweile 115.2.3 ausgerollt wurde. Leider funktioniert keine der beiden Methoden bisher, also weder

(focus).selected noch .selected(focus) noch .selected:focus etc.

Mag einer nochmals gucken? Kann's nicht fassen, dass ich mich nicht geschlagen gebe, hihi...hab's sogar schon mit ChatGPT versucht. Aber der dreht sich mit den Vorschlägen auch nur im Kreis, leider...

tm-nick · October 12, 2023 at 5:29 PM

Moin,

ich möchte im Gegensatz zum OP den Zeilenabstand der Ordnerliste verkleinern. Hier meine auf dem Code von @Bastler basierende userchrome.css:

CSS

/* ---Ordnerbaum anpassen--- */
.container {
  appearance: none !important;
height: 9px !important;
font-family: tahoma !important;
font-size: 9px !important;
}

#folderTree .icon {
appearance: none !important;
transform: scale(0.4, 0.4) !important;
}
.container:hover {
background-color: #CAE1FF !important;
color: black !important;
opacity: 1 !important;
}
/* ---Nachrichtenliste anpassen--- */
tr[is="thread-row"] {
  appearance: none !important;
height: 13px !important;
font-family: tahoma !important;
font-size: 10px !important;
}

Display More

Das Ergebnis sieht dann so aus:

Ich kriege es nicht hin, den Zeilenabstand der Ordnerliste bei der eingestellten Schriftgröße von 9px weiter zu reduzieren. Ich hätte gerne einen, der mit dem der Nachrichtenliste vergleichbar ist. Wie kriege ich das hin?

Danke und Gruß

Bastler · October 12, 2023 at 5:52 PM

Quote from tm-nick

den Zeilenabstand der Ordnerliste verkleinern.

Hallo,

unter Ansicht -> Dichte sollte schon mal das engste eingestellt sein.

Quote from tm-nick

Ich hätte gerne einen, der mit dem der Nachrichtenliste vergleichbar ist

Was liegt näher, als die Werte zur Vorgabe der Nachrichtenliste zu nehmen.

height und font-size gleich zu setzen, ist unglücklich

tm-nick · October 12, 2023 at 6:34 PM

Die Menü-Einstellung habe ich gemacht. Die Werte der Nachrichtenliste zu nehmen, liegt nahe, führt aber nicht zum gewünschten Ergebnis. Ebensowenig kleinere Werte als 9px von height. Größere hingegen vergrößern den Zeilenabstand, hier z. B. 23px:

Bastler · October 12, 2023 at 7:19 PM

Quote from tm-nick

Die Werte der Nachrichtenliste zu nehmen, liegt nahe, führt aber nicht zum gewünschten Ergebnis.

Versuche die noch einmal und zusätzlich zum Stauchen folgende 2 Zeilen im Ordnerbaum

mit den Werten synchron spielen

CSS

margin-top: -3px !important;
margin-bottom: -3px !important;

dharkness21 · October 12, 2023 at 7:33 PM

Quote from tm-nick

ich möchte im Gegensatz zum OP den Zeilenabstand der Ordnerliste verkleinern.

Teste mal das ↓.

CSS

ul[role="group"] > li > .container {
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul[role="group"] > li > ul > li > .container {
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}

Display More

P.S.: Die Werte entsprechend anpassen.

tm-nick · October 12, 2023 at 10:52 PM

@Bastler, danke, das ist die Lösung:

CSS

/* ---Ordnerbaum anpassen--- */
.container {
appearance: none !important;
font-family: tahoma !important;
font-size: 10px !important;
margin-top: -3px !important;
margin-bottom: -3px !important;
}
#folderTree .icon {
appearance: none !important;
transform: scale(0.6, 0.6) !important;
}
.container:hover {
background-color: #CAE1FF !important;
color: black !important;
opacity: 1 !important;
}
/* ---Nachrichtenliste anpassen--- */
tr[is="thread-row"] {
  appearance: none !important;
height: 13px !important;
font-family: tahoma !important;
font-size: 10px !important;
}

Display More

Jetzt würde ich noch gerne die "ungelesen"-Zahlen ohne die graue Hinterlegung haben, kann man die irgendwie anpassen?

ChaosRacer · October 12, 2023 at 11:49 PM

tm-nick

Quote from tm-nick

"ungelesen"-Zahlen ohne die graue Hinterlegung

Mal folgendes testen:

CSS

/* ..... Folder Tree - Badge Ungelesen: Hintergrundfarbe ändern .....*/
.unread > .container > .unread-count {
  background-color: transparent !important;
}
/* ..... Folder Tree - Badge Ungelesen: Anzahl Farbe ändern .....*/
.folder-count-badge {
  color: black !important;
}

Folder Tree - Badge Ungelesen: Anzahl Farbe ändern:

Nur erforderlich, falls man die Farbe der Zahl auch umgestalten möchte (ist beim hellen Theme notwendig).

Icons und Zeilenabstand Ordnerliste vergrößern

Thunderbird 145.0 veröffentlicht

Thunderbird 140.5.0 ESR veröffentlicht

Thunderbird 128.14.0 ESR veröffentlicht

Similar Threads

Icons in Kontenliste ändern

Darstellung unter macOS zu klein