Nextcloud 25 – “everything so round”

Nextcloud 25 was recently completed and is now offered as an update.

A major change in this version is the new interface with rounded corners for the application area and also strongly rounded corners for input fields.

Personally, I think that the curves have been exaggerated a bit, since parts of the application or scroll bars are sometimes cut off in applications:

Some applications, such as Bookmarks, do not support the new interface at all and continue to appear without rounded corners and without a margin to the edge, which is also confusing. There are also some visual glitches in the navigation are if you do not use a background image. When touching the application icons in the toolbar at the top, it can happen that parts of the navigation area show a lighter background:

Customization with “Custom CSS”

Custom CSS offers one possibility for customization. With this extension you can define your own CSS rules, which are then additionally loaded to customize the Nextcloud interface.

I have created a mix of old and new interface using the following rules, where the applications are displayed without rounded corners and margins again. In addition I added some fixes which are needed here for Nextcloud 25.0.2 (maybe for newer versions this becomes obsolete):

/* Remove rounded corners for applications */

:root {
  --body-container-margin: 0px;
  --body-container-radius: 0px;
}
 
/* Remove margins around the application frame */

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

/* Fix visual glitches in the navigation area
   if no background image is selected */

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

/* Remove rounded corners in the mobile view */

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

/* Make quota display non-clickable since selecting this element
   does not do anything at all */

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

/* Fix for "new" menu entries in the files 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%;
}

/* Fix for the third button in the calendar app */

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

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

/* Fix for contacts menu: width of entries is limited to the
   available width of the menu */

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

/* Bigger font size for the text editor */

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

/* Fix unexpected left margin for headings in the text editor if
   they contain the word "Nextcloud" */

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

If you use applications like Draw.io or OnlyOffice, the following rules are also necessary to correct the display:

/* Correct height for OnlyOffice (NC 25.0.0) */

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

/* Correct height for OnlyOffice (NC 25.0.1) */

#onlyofficeFrame {
  height:calc(100vh + 8px);
}
 
/* Draw.io without additional scroll bar */

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

The result will then look similar to this:

Background images are also supported if someone prefers that:

Update 2022-11-06

Instead of changing the style for #content and .content, you can also just change the CSS variables --body-container-margin and --body-container-radius to 0px. This will then also remove rounded corners in applications which use these variables. I updated the original CSS accordingly.

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

Update 2022-11-11

After the update to Nextcloud 25.0.1 the structure for OnlyOffice has changed a bit. The custom styles for OnlyOffice were adjusted accordingly.

Update 2023-01-05

Additional fixes in the style sheets: remove rounded corners in the mobile view and additional fixes which turned out to be needed for Nextcloud 25.0.2.