wwe
October 23, 2022, 7:33pm
6
rounded corners is very controversial topic:
Sorry for the harsh reaction - but please try to understand it anyway.
I just installed the update to NC 25 and realized that the whole UI now as big round corners?
What use do these rounded corners have?
Even in apps like office integrations or calender with a scroll bar at the right side there are big round corners which even cut off the scroll bar!
Also why the background image? What use does this have?
Also why does the main content area have margins around it? There is absolutely no be…
it would be great major UI changes are not “one-way” but there is always an option to retain “previous” view. Lot of of people (including me) don’t like rounded corner, round images etc.
Please pay attention to
opened 03:56PM - 21 Oct 22 UTC
closed 12:06PM - 29 Jan 25 UTC
enhancement
design
0. Needs triage
feature: theming
25-feedback
### How to use GitHub
* Please use the 👍 [reaction](https://blog.github.com/2… 016-03-10-add-reactions-to-pull-requests-issues-and-comments/) to show that you are interested into the same feature.
* Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
* Subscribe to receive notifications on status change and new comments.
**Is your feature request related to a problem? Please describe.**
With Nextcloud 25 a new UI was introduced which is technically a great improvement and many visual problems got fixed.
However what is not ideal are some of the new things which got introduced and can not be easily changed:
**1) Rounded corners for the content area**
Not all applications take that into account so the rectangular UI of the application gets cut off in the corners. Also scroll bars are cut off:
Also some applications, despite being compatible to Nextcloud 25 still use the "old" UI, which is a bit confusing:
In addition for the visual effect to work at all, the whole content area has a margin of about 8px. This does not sound a lot, but there is no real usability benefit from removing usable space just to be able have rounded corners around the application area.
**2) Translucent navigation area**
Even if no background image is enabled, the navigation area has still a translucent style with a backdrop filter which sometimes causes confusing light rectangles to appear in the navigation area background when hovering a menu item:
This can be fixed with a custom CSS to remove the background like this:
```
#app-navigation, .app-navigation {
backdrop-filter:none !important;
}
```
Also having translucent effects with fixed background images does not help performance. Yes, one can disable that, but by default all users will first have the new "fancy" UI and have to manually disable that since there is not option for administrator to globally choose a certain default for all users.
**Describe the solution you'd like**
1) Have an option for the administrator to select a default theme for all users.
2) Add an option to choose between the "new" look with rounded corners or the "classic" look as it was before (or at least without rounded corners and margins around the content area). I created a custom CSS (using the app "Custom CSS") which changes the look to a somewhat mixed look between old and new. But it would be much easier for users if they can just select this as an option if they prefer the "classic" style.
My CSS for ["Custom CSS"](https://apps.nextcloud.com/apps/theming_customcss) so far, so you can see, how I customized the styles:
```
/* Disable the rounded corners for the main content area */
#content, .content {
border-radius:0 !important;
}
/* Remove margins for the main content 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;
}
/* Make input element corners a bit less rounded
(may need some additional classes, as I did not check every detail in the UI) */
input, textarea, select, .multiselect__tags, .rich-contenteditable__input {
border-radius:4px !important;
}
/* Fix visual glitches with navigation if there is no background image */
#app-navigation, .app-navigation {
backdrop-filter:none !important;
}
/* Make quota display non-clickable since selecting this element does not do anything at all
and remove rounded border to avoid cutting of the visual indicator */
.app-files #quota {
pointer-events:none;
}
.app-files #quota,
.app-files #quota > a {
border-radius:0 !important;
}
/* 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%;
}
```
The following styles are just additional things I added for my setup to cope with some issues in individual applications:
```
/* OnlyOffice with correct height */
#app > iframe {
height:calc(100vh - 50px);
}
/* Draw.io without scrolling of the app area */
.app-drawio > #app-content {
overflow:hidden;
}
/* Custom styling for markdown editor to have a bit bigger text */
.text-editor__wrapper div.ProseMirror p {
font-size:16px;
}
```
The result looks like this:
Background images are also supported with these rules:
**Describe alternatives you've considered**
Create the possibility to provide new themes similar to apps.
and let the users to decide which style is preferred.
Based on telemetry you could stop support for unpopular designs later .
2 Likes