Nextcloud 25 – „alles so rund“

Kürzlich wurde Nextcloud 25 fertiggestellt und wird mittlerweile als Update angeboten.

Eine wesentliche Änderung dieser Version ist die neue Oberfläche mit abgerundeten Ecken für den Applikationsbereich und ebenfalls stark abgerundeten Ecken für Eingabefelder.

Persönlich finde ich, dass man es hier etwas übertrieben hat mit den Rundungen, da teilweise auch bei Anwendungen Teile der Anwendung oder Scrollbalken abgeschnitten werden:

Manche Anwendungen, wie z.B. Bookmarks, unterstützen die neue Oberfläche gar nicht und erscheinen weiterhin ohne runde Ecken und Abstand zum Rand, was dann ebenfalls irritiert.  Weiterhin gibt es auch einige optische Fehler, wenn man kein Hintergrundbild verwendet. Wenn man mit der Maus über ein Anwendungs-Symbol in der Toolbar geht, kann es passieren, dass ein Teil des Navigationsbereichs mit hellerem Hintergrund dargestellt wird:

Anpassung mit „Custom CSS“

Eine Möglichkeit zur Anpassung bietet Custom CSS. Mit dieser Erweiterung kann man eigene CSS-Regeln definieren, die dann zusätzlich geladen werden, um die Oberfläche von Nextcloud anzupassen.

Ich habe mit folgenden Regeln eine Mischung aus alter und neuer Oberfläche erstellt, bei der die Anwendungen wieder ohne abgerundete Ecken und Rahmen dargestellt werden und Eingabefelder mit etwas weniger starken Rundungen angezeigt werden:

/* Runde Ecken bei Anwendungen entfernen */

:root {
  --body-container-margin: 0px;
  --body-container-radius: 0px;
}
 
/* Eingabefelder mit weniger starken Rundungen */
 
input, textarea, select, .multiselect__tags, .rich-contenteditable__input {
  border-radius:4px !important;
}

/* Abstände zum Rand um den Anwendungsbereich entfernen */
 
#content, .content {
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:0 !important;
  width:100% !important;
  height: calc(var(--body-height) + var(--body-container-margin)) !important;
}

/* Darstellungsfehler in der Navigation verhindern, wenn
   kein Hintergrundbild verwendet wird */

#app-navigation, .app-navigation {
  backdrop-filter:none !important;
}

/* Quota-Anzeige in der Dateiverwaltung nicht anklickbar machen,
   da eine Auswahl dieses Elements mit der Maus nichts bewirkt */

.app-files #quota {
  pointer-events:none;
}

Wenn man Anwendungen wie Draw.io oder OnlyOffice nutzt, sind zusätzlich noch folgende Regeln zur Korrektur der Darstellung nötig:

/* OnlyOffice mit korrekter Höhe (NC 25.0.0) */

#app > iframe {
  height:calc(100vh - 50px);
}

/* OnlyOffice mit korrekter Höhe (NC 25.0.1) */

#onlyofficeFrame {
  height:calc(100vh + 8px);
}
 
/* Draw.io ohne zusätzlichen Scrollbalken */

.app-drawio > #app-content {
  overflow:hidden;
}

Das Ergebnis sieht dann etwa so aus:

Hintergrundbilder werden damit ebenfalls unterstützt, wenn jemand das möchte:

Update 2022-11-06

Statt den Stil für #content and .content zu ändern, kann man auch einfach die CSS-Variablen --body-container-margin und --body-container-radius auf 0px setzen. Damit werden dann auch runde Ecken in Anwendungen entfernt, die diese Variablen dafür nutzen. Ich habe die ursprünglichen CSS-Regeln entsprechend angepasst.

Siehe dazu auch: https://github.com/nextcloud/server/issues/34727#issuecomment-1304806547

Update 2022-11-11

Seit dem Update auf Nextcloud 25.0.1 ist die Struktur bei OnlyOffice etwas anders. Ich habe die Anpassung für OnlyOffice daher nochmal erweitert.

2 Gedanken zu „Nextcloud 25 – „alles so rund““

  1. D
    David

    Wunderbar! Danke für deine Arbeit und das teilen!
    Mir ist das neue Design auch viel zu rund..

    1. Arno Welzel

      Danke :)

      Bitte das Update im Artikel beachten – die CSS-Regeln wurden nochmal angepasst.

Öffentlichen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Dies ist kein Kontaktformular! Wenn Du mir eine persönliche Nachricht schreiben möchtest, benutze die E-Mail-Adresse in meinem Impressum.

Du kannst die folgenden HTML-Tags im Kommentar verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>