Custom CSS in Nextcloud

Costum-CSS ist für viele Möglichkeiten konzipiert, wie z.B. für

• Dateien: Zeilenhöhe kompakter machen, Dateinamen breiter darstellen, Spalten besser lesbar machen, Seitenleiste verbreitern.
• Mail: Lesebereich verbreitern, Nachrichtenliste kompakter machen, Verfassen-Fenster breiter gestalten, Ordnerliste übersichtlicher machen.
• Kalender: Wochenansicht dichter oder großzügiger darstellen, Schriftgrößen anpassen, Wochenenden stärker hervorheben, Seitenleistenbreite ändern.
• Talk: Chatbereich verbreitern, Nachrichten kompakter darstellen, Teilnehmer-/Seitenleiste anpassen.
• Dashboard: Karten kleiner oder größer machen, Abstände reduzieren, bestimmte Widgets optisch hervorheben.
• Aufgaben / Tasks: Listen kompakter machen, Spaltenbreiten und Abstände optimieren, lange Titel besser darstellen.
• Deck: Kartenbreite und -höhe anpassen, Board-Spalten verbreitern, Abstände reduzieren.
• Formulare / Forms: Eingabefelder verbreitern, Abstände und Schriftgrößen ändern.
• Allgemeine Navigation: linke Seitenleiste breiter oder schmäler machen, Menüeinträge kompakter darstellen.
• Tabellen allgemein: Zeilenhöhe reduzieren, Schrift etwas kleiner machen, mehr Informationen gleichzeitig sichtbar machen.
• Dialogfenster: bestimmte modale Fenster breiter machen, wenn sie standardmäßig zu schmal sind.
• Buttons: Abstände oder Größe anpassen, wenn die Oberfläche auf großen Monitoren zu luftig wirkt.
• Schriftbild: Schriftgrößen oder Zeilenabstände vereinheitlichen.
• Farbliche Hervorhebungen: wichtige Bereiche, Warnungen oder aktive Elemente deutlicher sichtbar machen.
• Mobile/Desktop-Anpassung: manche Änderungen nur für große Bildschirme anwenden.

Achtung: Viele dieser Anpassungen können versionsabhängig seink daher empfiehlt es sich, diese sparsam zu verwenden!

Ich verwende die Kontakte App sehr intensiv und verwalte weit über 1000 Adressen. Um einen Überblick zu erhalten, verwende ich das Feld Kontaktgruppen sehr intensiv.

Allerdings ist das Feld sehr klein und unübersichtlich, hat mah mehrere Einträge zu einer Adresse. Hier kommt die App custom_css ins Spiel.
Nach der Installation der App über den Nextcloud App-Store als Administrator hat man bei den Administrationseinstellungen-Design ein Feld Benutzerdefiniertes Design.

In dieses Feld trägt man das benutzerdefinierte CSS ein.

/* Nextcloud Kontakte:
   Kontaktgruppen mehrzeilig und etwas höher */

.property--groups .vs__dropdown-toggle {
    min-height: 100px !important;
    height: auto !important;
    align-items: flex-start !important;
}

.property--groups .vs__selected-options {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    overflow: visible !important;
}

min-height: 100px beschreibt die Höhe des Feldes.

Dieses SCC wird in der Datenbank gespeichert und überlebt in der Regel Releaseupdates. Sollte sich die Kontakte App in diesem Bereich ändern, müsste man das Script eventuell anpassen.