Un-shit Nextcloud 25 - Fix the ugly and bloated theme for the new Nextcloud release.

README.md

Un-shit Nextcloud 25

Fix the ugly and bloated theme for the new Nextcloud release.

I didn't like the new all-round and animated UI of Nextcloud introduced in Nextcloud 25, so I hacked together something to make it a little more bearable. It's no more of a hack, than most other parts of Nextcloud, so I guess it's okay.

Requirements

The followings require the installation of the following two addons:

• https://apps.nextcloud.com/apps/jsloader (unsupported by Nextcloud 25, but seems working)
• https://apps.nextcloud.com/apps/theming_customcss

Install

The addons allow you to install the attached scripts. Copy the scripts into the textbox of the corresponding addon: script.js -> JSLoader
style.css -> Custom CSS

Missing fixes

There are many colors that were customizable before, but are no longer in Nextcloud 25. I did not go through all of them (angry coding ftw) so some of them left out. Probably the most eye-catching are the color of the folder icon and the favicon... I might fix them later with some custom js...

The sidebar also seems broken when viewing media. Seems like some conflict with the header... might fix later.

Themes, wallpapers, animations

Despite the description, this fix does not remove all animations. Only the ones I felt unnecessary and stupid. Spinning loading icons persist, for example, but on the other hand, menu roll down animations are disabled.

This fix, however, completely breaks the "wallpaper" "feature" in Nextcloud (which is probably the whole reason for this stupid redesign). Too bad, set a wallpaper on your desktop. The globally set background on the login page persists, though.

script.js

jQuery.fx.off = true;

style.css

* {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;

  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;

  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}

nav.menu {
  filter: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-main-text);
}

.menu > ul li a {
  border-radius: 0 !important;
}

#app-navigation, .app-navigation {
  background-color: var(--color-main-background) !important;
  border-top-left-radius: 0 !important;
}

main#content, div.content {
  border-radius: 0 !important;
  margin: 0 !important;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  bottom: 0;
  left: 0;
  right: 0;
  top: 50px;
  position: fixed !important;
  width: auto !important;
  height: auto !important;
}

body#body-user, body#body-settings {
  background-image: none !important;
}

footer > p.info {
  color: var(--color-main-background);
}

/* Firefox specific fix */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
  scrollbar-width: unset !important;
}

scrollbar-width: unset!important;

helps on firefox too.

Thanks for the tip @z8k! Included it in the stylesheet.