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 and input fields are displayed with slightly less rounded curves:

/* Remove rounded corners for applications */

:root {
  --body-container-margin: 0px;
  --body-container-radius: 0px;
}
 
/* Input elements with a bit less rounded corners */
 
input, textarea, select, .multiselect__tags, .rich-contenteditable__input {
  border-radius:4px !important;
}

/* Remove margin around the application area */
 
#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
   if no background image is used */
 
#app-navigation, .app-navigation {
  backdrop-filter:none !important;
}

/* Make quote display in the file manager non clickable since
   selecting that element with the mouse does not do anything */

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

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.

Leave a public comment

Your email address will not be published. This is not a contact form! If you want to send me a personal message, use my e-mail address in the imprint.

You can use the following HTML tags in the comment:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>