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. Weiterhin habe ich einige Korrekturen eingebaut, die bei mir mit Nextcloud 25.0.2 nötig sind (evtl. sind diese bei neueren Versionen nicht mehr erforderlich):

/* Runde Ecken bei Anwendungen entfernen */

:root {
  --body-container-margin: 0px;
  --body-container-radius: 0px;
}
 
/* 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;
}

/* Runde Ecken in der mobilen Ansicht entfernen */

#content, #app-navigation {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

#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;
}

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

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

/* Korrektur für "Neu"-Menü-Einträge in der Datei-App */

#content[class*=app-] .bubble li > button, #content[class*=app-] .bubble li > a, #content[class*=app-] .bubble li > .menuitem, #content[class*=app-] .app-navigation-entry-menu li > button, #content[class*=app-] .app-navigation-entry-menu li > a, #content[class*=app-] .app-navigation-entry-menu li > .menuitem, #content[class*=app-] .popovermenu li > button, #content[class*=app-] .popovermenu li > a, #content[class*=app-] .popovermenu li > .menuitem {
  width: 100%;
}

/* Korrektur für dritte Schaltfläche in der Kalender-App */

.app-calendar .button-vue--vue-tertiary {
  margin-top: 4px;
}

.app-calendar .app-navigation-toggle {
  margin-top: 0px;
}

/* Korrektur für Kontakte-Menü: Breite der Einträge auf verfügbare
   Breite des Menüs begrenzen */

#header .header-right > div#contactsmenu > .menu .contact .body {
  overflow-x: hidden;
}

/* Größere Schrift im Texteditor */

.text-editor__wrapper div.ProseMirror p {
  font-size:16px;
}

/* Korrektur für eingerückte Darstellung von Überschriften im Texteditor,
   wenn sie das Wort "Nextcloud" enthalten */

.text-editor__wrapper div.ProseMirror #nextcloud {
  padding-left: 0 !important;
}

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.

Update 2023-01-05

Weitere Korrekturen in den Stylesheets: runde Ecken in der mobilen Ansicht und zusätzliche Fehlerkorrekturen, die sich in Nextcloud 25.0.2 ergeben haben.