Cleanup and compile

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

43 files changed, 6602 insertions, 293 deletions

diff --git a/apps/dashboard/css/dashboard.css b/apps/dashboard/css/dashboard.css
new file mode 100644
index 00000000000..ea01e0f771b
--- /dev/null
+++ b/apps/dashboard/css/dashboard.css
@@ -0,0 +1,48 @@
+.skip-navigation:not(.skip-content) {
+  display: none;
+}
+
+.skip-navigation.skip-content {
+  left: 3px;
+}
+
+#header {
+  background: transparent !important;
+  --color-header: rgba(24, 24, 24, 1);
+}
+#body-user.dashboard--dark #header {
+  --color-header: rgba(255, 255, 255, 1);
+}
+#header:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  background-image: linear-gradient(180deg, var(--color-header) 0%, transparent 100%);
+  width: 100%;
+  height: 70px;
+  top: 0;
+  margin-top: -70px;
+  transition: margin-top var(--animation-slow);
+}
+#body-user.dashboard--scrolled #header:before {
+  margin-top: 0;
+}
+#body-user.theme--highcontrast #header {
+  background-color: var(--color-header) !important;
+}
+#body-user.theme--highcontrast #header:before {
+  display: none;
+}
+
+#content {
+  padding-top: 0 !important;
+}
+
+#appmenu li a.active::before,
+#appmenu li:hover a::before,
+#appmenu li:hover a.active::before,
+#appmenu li a:focus::before {
+  display: none !important;
+}
+
+/*# sourceMappingURL=dashboard.css.map */
diff --git a/apps/dashboard/css/dashboard.css.map b/apps/dashboard/css/dashboard.css.map
new file mode 100644
index 00000000000..15b99dd3883
--- /dev/null
+++ b/apps/dashboard/css/dashboard.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["dashboard.scss"],"names":[],"mappings":"AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAKF;EACC;;AAEA;EACC;;;AAMH;EACC;;;AAID;AAAA;AAAA;AAAA;EAIC","file":"dashboard.css"}
\ No newline at end of file
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index bd2154e89a7..3fd82768267 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -174,7 +174,7 @@ export default {
 		}
 
 		&.active:not(.icon-loading):after {
-			background-image: var(--icon-checkmark-fff);
+			background-image: var(--icon-checkmark-white);
 			background-repeat: no-repeat;
 			background-position: center;
 			background-size: 44px;
diff --git a/apps/encryption/css/settings-personal.css b/apps/encryption/css/settings-personal.css
new file mode 100644
index 00000000000..9b795f05382
--- /dev/null
+++ b/apps/encryption/css/settings-personal.css
@@ -0,0 +1,16 @@
+/* Copyright (c) 2013, Sam Tuke, <samtuke@owncloud.com>
+ This file is licensed under the Affero General Public License version 3 or later.
+ See the COPYING-README file. */
+#encryptAllError,
+#encryptAllSuccess,
+#recoveryEnabledError,
+#recoveryEnabledSuccess {
+  display: none;
+}
+
+/* icons for sidebar */
+.nav-icon-basic-encryption-module {
+  background-image: var(--icon-encryption-dark);
+}
+
+/*# sourceMappingURL=settings-personal.css.map */
diff --git a/apps/encryption/css/settings-personal.css.map b/apps/encryption/css/settings-personal.css.map
new file mode 100644
index 00000000000..979a14d9aec
--- /dev/null
+++ b/apps/encryption/css/settings-personal.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["settings-personal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIC;;;AAGD;AACA;EACC","file":"settings-personal.css"}
\ No newline at end of file
diff --git a/apps/federatedfilesharing/css/settings-admin.css b/apps/federatedfilesharing/css/settings-admin.css
new file mode 100644
index 00000000000..d043ebae43b
--- /dev/null
+++ b/apps/federatedfilesharing/css/settings-admin.css
@@ -0,0 +1,5 @@
+#fileSharingSettings h2 {
+  display: inline-block;
+}
+
+/*# sourceMappingURL=settings-admin.css.map */
diff --git a/apps/federatedfilesharing/css/settings-admin.css.map b/apps/federatedfilesharing/css/settings-admin.css.map
new file mode 100644
index 00000000000..9b1d105e143
--- /dev/null
+++ b/apps/federatedfilesharing/css/settings-admin.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["settings-admin.scss"],"names":[],"mappings":"AAAA;EACC","file":"settings-admin.css"}
\ No newline at end of file
diff --git a/apps/federatedfilesharing/css/settings-personal.css b/apps/federatedfilesharing/css/settings-personal.css
new file mode 100644
index 00000000000..16e482beecc
--- /dev/null
+++ b/apps/federatedfilesharing/css/settings-personal.css
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+#fileSharingSettings h2 {
+  display: inline-block;
+}
+
+#fileSharingSettings img {
+  cursor: pointer;
+}
+
+#fileSharingSettings xmp {
+  margin-top: 0;
+  white-space: pre-wrap;
+}
+
+#fileSharingSettings .icon {
+  background-size: 16px 16px;
+  display: inline-block;
+  position: relative;
+  top: 3px;
+  margin-left: 5px;
+}
+
+[class^=social-], [class*=" social-"] {
+  background-repeat: no-repeat;
+  background-position: 8px;
+  min-width: 16px;
+  min-height: 16px;
+  padding-left: 28px;
+  background-size: 16px;
+}
+
+.social-diaspora {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-social-diaspora-dark);
+}
+
+.social-twitter {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-social-twitter-dark);
+}
+
+.social-facebook {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-social-facebook-dark);
+}
+
+.social_sharing_buttons {
+  padding-left: 30px !important;
+}
+
+/*# sourceMappingURL=settings-personal.css.map */
diff --git a/apps/federatedfilesharing/css/settings-personal.css.map b/apps/federatedfilesharing/css/settings-personal.css.map
new file mode 100644
index 00000000000..490e82ccb28
--- /dev/null
+++ b/apps/federatedfilesharing/css/settings-personal.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","../../../core/css/functions.scss","settings-personal.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AD8BC;EAEA;;;AC7BD;AD2BC;EAEA;;;AC1BD;ADwBC;EAEA;;;ACtBD;EACC","file":"settings-personal.css"}
\ No newline at end of file
diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
new file mode 100644
index 00000000000..46c2eeabe36
--- /dev/null
+++ b/apps/files/css/detailsView.css
@@ -0,0 +1,133 @@
+.app-sidebar .detailFileInfoContainer {
+  min-height: 50px;
+  padding: 15px;
+}
+
+.app-sidebar .detailFileInfoContainer > div {
+  clear: both;
+}
+
+.app-sidebar .mainFileInfoView .icon {
+  display: inline-block;
+  background-size: 16px 16px;
+}
+
+.app-sidebar .mainFileInfoView .permalink {
+  padding: 6px 10px;
+  vertical-align: top;
+  opacity: 0.6;
+}
+.app-sidebar .mainFileInfoView .permalink:hover, .app-sidebar .mainFileInfoView .permalink:focus {
+  opacity: 1;
+}
+
+.app-sidebar .mainFileInfoView .permalink-field > input {
+  clear: both;
+  width: 90%;
+}
+
+.app-sidebar .thumbnailContainer.large {
+  margin-left: -15px;
+  margin-right: -35px;
+  /* 15 + 20 for the close button */
+  margin-top: -15px;
+}
+
+.app-sidebar .thumbnailContainer.large.portrait {
+  margin: 0;
+  /* if we don't fit the image anyway we give it back the margin */
+}
+
+.app-sidebar .large .thumbnail {
+  width: 100%;
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  float: none;
+  margin: 0;
+  height: auto;
+}
+
+.app-sidebar .large .thumbnail .stretcher {
+  content: "";
+  display: block;
+  padding-bottom: 56.25%;
+  /* sets height of .thumbnail to 9/16 of the width */
+}
+
+.app-sidebar .large.portrait .thumbnail {
+  background-position: 50% top;
+}
+
+.app-sidebar .large.portrait .thumbnail {
+  background-size: contain;
+}
+
+.app-sidebar .large.text {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 14px;
+  font-size: 80%;
+  margin-left: 0;
+}
+
+.app-sidebar .thumbnail {
+  width: 100%;
+  min-height: 75px;
+  display: inline-block;
+  float: left;
+  margin-right: 10px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.app-sidebar .ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.app-sidebar .fileName {
+  font-size: 16px;
+  padding-top: 13px;
+  padding-bottom: 3px;
+}
+
+.app-sidebar .fileName h3 {
+  width: calc(100% - 42px);
+  /* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
+  display: inline-block;
+  padding: 5px 0;
+  margin: -5px 0;
+}
+
+.app-sidebar .file-details {
+  color: var(--color-text-maxcontrast);
+}
+
+.app-sidebar .action-favorite {
+  vertical-align: sub;
+  padding: 10px;
+  margin: -10px;
+}
+
+.app-sidebar .action-favorite > span {
+  opacity: 0.7 !important;
+}
+
+.app-sidebar .detailList {
+  float: left;
+}
+
+.app-sidebar .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 0.5;
+  z-index: 1;
+  width: 44px;
+  height: 44px;
+}
+
+/*# sourceMappingURL=detailsView.css.map */
diff --git a/apps/files/css/detailsView.css.map b/apps/files/css/detailsView.css.map
new file mode 100644
index 00000000000..30726744caf
--- /dev/null
+++ b/apps/files/css/detailsView.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["detailsView.scss"],"names":[],"mappings":"AAAA;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EAEC;;;AAGF;EACC;EACA;;;AAGD;EACC;EACA;AAAqB;EACrB;;;AAGD;EACC;AAAW;;;AAGZ;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;AAAwB;;;AAGzB;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;AAA0B;EAC1B;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA","file":"detailsView.css"}
\ No newline at end of file
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
new file mode 100644
index 00000000000..eb465b71cdb
--- /dev/null
+++ b/apps/files/css/files.css
@@ -0,0 +1,1297 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
+ * @copyright Copyright (c) 2019, Fabian Dreßler <nudelsalat@clouz.de>
+ *
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+/* FILE MENU */
+.actions {
+  padding: 5px;
+  height: 100%;
+  display: inline-block;
+  float: left;
+}
+
+.actions input, .actions button, .actions .button {
+  margin: 0;
+  float: left;
+}
+
+.actions .button a {
+  color: #555;
+}
+
+.actions .button a:hover,
+.actions .button a:focus {
+  background-color: var(--color-background-hover);
+}
+
+.actions .button a:active {
+  background-color: var(--color-primary-light);
+}
+
+.actions.creatable {
+  position: relative;
+  display: flex;
+  flex: 1 1;
+}
+.actions.creatable .button:not(:last-child) {
+  margin-right: 3px;
+}
+
+.actions.hidden {
+  display: none;
+}
+
+#trash {
+  margin-right: 8px;
+  float: right;
+  z-index: 1010;
+  padding: 10px;
+  font-weight: normal;
+}
+
+.newFileMenu .error,
+.newFileMenu .error + .icon-confirm,
+#fileList .error {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+/* FILE TABLE */
+#filestable {
+  position: relative;
+  width: 100%;
+  min-width: 250px;
+  display: block;
+  flex-direction: column;
+  /**
+   * This is a dirty hack as the sticky header requires us to use a different display type on the table element
+   */
+}
+#emptycontent:not(.hidden) ~ #filestable {
+  display: none;
+}
+#filestable thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 50px;
+  z-index: 60;
+  display: block;
+  background-color: var(--color-main-background-translucent);
+}
+#filestable tbody {
+  display: table;
+  width: 100%;
+}
+#filestable tbody tr[data-permissions="0"],
+#filestable tbody tr[data-permissions="16"] {
+  background-color: var(--color-background-dark);
+}
+#filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,
+#filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext {
+  color: var(--color-text-maxcontrast);
+}
+
+#filestable.hidden {
+  display: none;
+}
+
+/* fit app list view heights */
+.app-files #app-content > .viewcontainer {
+  min-height: 0%;
+  width: 100%;
+}
+
+.app-files #app-content {
+  width: calc(100% - 300px);
+}
+
+.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+  background-color: var(--color-primary-light) !important;
+}
+
+.app-files #app-content.dir-drop {
+  background-color: var(--color-main-background) !important;
+}
+
+.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+  background-color: transparent !important;
+}
+
+.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir {
+  background-color: var(--color-primary-light) !important;
+}
+
+/* icons for sidebar */
+.nav-icon-files {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-folder-dark);
+}
+
+.nav-icon-recent {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-recent-dark);
+}
+
+.nav-icon-favorites {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-starred-dark);
+}
+
+.nav-icon-sharingin,
+.nav-icon-sharingout,
+.nav-icon-pendingshares,
+.nav-icon-shareoverview {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-share-dark);
+}
+
+.nav-icon-sharinglinks {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-public-dark);
+}
+
+.nav-icon-extstoragemounts {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-external-dark);
+}
+
+.nav-icon-trashbin {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-delete-dark);
+}
+
+.nav-icon-trashbin-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-delete-#ff0000);
+}
+
+.nav-icon-deletedshares {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-unshare-dark);
+}
+
+.nav-icon-favorites-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-starred-yellow);
+}
+
+#app-navigation .nav-files a.nav-icon-files {
+  width: auto;
+}
+
+/* button needs overrides due to navigation styles */
+#app-navigation .nav-files a.new {
+  width: 40px;
+  height: 32px;
+  padding: 0 10px;
+  margin: 0;
+  cursor: pointer;
+}
+
+#app-navigation .nav-files a.new.hidden {
+  display: none;
+}
+
+#app-navigation .nav-files a.new.disabled {
+  opacity: 0.3;
+}
+
+#filestable tbody tr {
+  height: 51px;
+}
+
+#filestable tbody tr:hover,
+#filestable tbody tr:focus,
+#filestable tbody .name:focus,
+#filestable tbody tr:hover .filename form,
+table tr.mouseOver td {
+  background-color: var(--color-background-hover);
+}
+
+#filestable tbody tr:active,
+#filestable tbody tr.highlighted,
+#filestable tbody tr.highlighted .name:focus,
+#filestable tbody tr.selected,
+#filestable tbody tr.searchresult {
+  background-color: var(--color-primary-light);
+}
+
+tbody a {
+  color: var(--color-main-text);
+}
+
+span.conflict-path, span.extension, span.uploading, td.date {
+  color: var(--color-text-maxcontrast);
+}
+
+span.conflict-path, span.extension {
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
+  -o-transition: opacity 300ms;
+  transition: opacity 300ms;
+  vertical-align: top;
+}
+
+tr:hover span.conflict-path,
+tr:focus span.conflict-path,
+tr:hover span.extension,
+tr:focus span.extension {
+  opacity: 1;
+  color: var(--color-text-maxcontrast);
+}
+
+table th, table th a {
+  color: var(--color-text-maxcontrast);
+}
+
+table.multiselect th a {
+  color: var(--color-main-text);
+}
+
+table th .columntitle {
+  display: block;
+  padding: 15px;
+  height: 50px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  vertical-align: middle;
+}
+
+table.multiselect th .columntitle {
+  display: inline-block;
+  margin-right: -20px;
+}
+
+table th .columntitle.name {
+  padding-left: 0;
+  margin-left: 44px;
+}
+
+table.multiselect th .columntitle.name {
+  margin-left: 0;
+}
+
+table th .sort-indicator {
+  width: 10px;
+  height: 8px;
+  margin-left: 5px;
+  display: inline-block;
+  vertical-align: text-bottom;
+  opacity: 0.3;
+}
+
+.sort-indicator.hidden,
+.multiselect .sort-indicator,
+table.multiselect th:hover .sort-indicator.hidden,
+table.multiselect th:focus .sort-indicator.hidden {
+  visibility: hidden;
+}
+
+.multiselect .sort, .multiselect .sort span {
+  cursor: default;
+}
+
+table th:hover .sort-indicator.hidden,
+table th:focus .sort-indicator.hidden {
+  visibility: visible;
+}
+
+table th,
+table td {
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+  font-weight: normal;
+}
+
+table td {
+  padding: 0 15px;
+  font-style: normal;
+  background-position: 8px center;
+  background-repeat: no-repeat;
+}
+
+table th#headerName {
+  position: relative;
+  width: 9999px;
+  /* not really sure why this works better than 100% … table styling */
+  padding: 0;
+}
+
+#headerName-container {
+  position: relative;
+  height: 50px;
+}
+
+table th#headerSelection {
+  padding-top: 2px;
+}
+
+table th#headerSize, table td.filesize {
+  text-align: right;
+}
+
+table th#headerDate, table td.date,
+table th.column-last, table td.column-last {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  /* this can not be just width, both need to be set … table styling */
+  min-width: 130px;
+  max-width: 130px;
+}
+
+#app-content-files thead,
+#app-content-trashbin thead {
+  top: 94px;
+}
+
+#app-content-recent,
+#app-content-favorites,
+#app-content-shareoverview,
+#app-content-sharingout,
+#app-content-sharingin,
+#app-content-sharinglinks,
+#app-content-deletedshares,
+#app-content-pendingshares {
+  margin-top: 22px;
+}
+
+table.multiselect thead th {
+  background-color: var(--color-main-background-translucent);
+  font-weight: bold;
+}
+
+#app-content.with-app-sidebar table.multiselect thead {
+  margin-right: 27%;
+}
+
+table.multiselect #headerName {
+  position: relative;
+  width: 9999px;
+  /* when we use 100%, the styling breaks on mobile … table styling */
+}
+
+table.multiselect #modified {
+  display: none;
+}
+
+table td.selection,
+table th.selection,
+table td.fileaction {
+  width: 32px;
+  text-align: center;
+}
+
+table td.filename a.name,
+table td.filename p.name {
+  display: flex;
+  position: relative;
+  /* Firefox needs to explicitly have this default set … */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 50px;
+  line-height: 50px;
+  padding: 0;
+}
+
+table td.filename .thumbnail-wrapper {
+  /* we need this to make sure flex is working inside a table cell */
+  width: 0;
+  min-width: 50px;
+  max-width: 50px;
+  height: 50px;
+}
+
+table td.filename .thumbnail-wrapper.icon-loading-small:after {
+  z-index: 10;
+}
+table td.filename .thumbnail-wrapper.icon-loading-small .thumbnail {
+  opacity: 0.2;
+}
+
+table td.filename .thumbnail {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background-size: 32px;
+  margin-left: 9px;
+  margin-top: 9px;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  position: absolute;
+  z-index: 4;
+}
+
+table td.filename p.name .thumbnail {
+  cursor: default;
+}
+
+table tr[data-has-preview=true] .thumbnail {
+  border: 1px solid var(--color-border);
+}
+
+table td.filename input.filename {
+  width: 70%;
+  margin-left: 48px;
+  cursor: text;
+}
+
+table td.filename form {
+  margin-top: -40px;
+  position: relative;
+  top: -6px;
+}
+
+table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete {
+  padding: 3px 8px 8px 3px;
+}
+
+table td.filename .nametext, .modified, .column-last > span:first-child {
+  float: left;
+  padding: 15px 0;
+}
+
+.modified, .column-last > span:first-child {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 110px;
+}
+
+/* TODO fix usability bug (accidental file/folder selection) */
+table td.filename {
+  max-width: 0;
+}
+table td.filename .nametext {
+  width: 0;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 100%;
+  z-index: 10;
+  padding: 0 20px 0 0;
+}
+
+.hide-hidden-files #filestable #fileList tr.hidden-file,
+.hide-hidden-files #filestable #fileList tr.hidden-file.dragging {
+  display: none;
+}
+
+#fileList tr.animate-opacity {
+  -webkit-transition: opacity 250ms;
+  -moz-transition: opacity 250ms;
+  -o-transition: opacity 250ms;
+  transition: opacity 250ms;
+}
+
+#fileList tr.dragging {
+  opacity: 0.2;
+}
+
+table td.filename .nametext .innernametext {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+}
+
+/* for smaller resolutions - see mobile.css */
+table td.filename .uploadtext {
+  position: absolute;
+  font-weight: normal;
+  margin-left: 50px;
+  left: 0;
+  bottom: 0;
+  height: 20px;
+  padding: 0 4px;
+  padding-left: 1px;
+  font-size: 11px;
+  line-height: 22px;
+  color: var(--color-text-maxcontrast);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+table td.selection {
+  padding: 0;
+}
+
+/* File checkboxes */
+#fileList tr td.selection > .selectCheckBox + label:before {
+  opacity: 0.3;
+  margin-right: 0;
+}
+
+/* Show checkbox with full opacity when hovering, checked, or selected */
+#fileList tr:hover td.selection > .selectCheckBox + label:before,
+#fileList tr:focus td.selection > .selectCheckBox + label:before,
+#fileList tr td.selection > .selectCheckBox:checked + label:before,
+#fileList tr.selected td.selection > .selectCheckBox + label:before {
+  opacity: 1;
+}
+
+/* Show checkbox with half opacity when selecting range */
+#fileList tr.halfselected td.selection > .selectCheckBox + label:before {
+  opacity: 0.5;
+}
+
+/* Use label to have bigger clickable size for checkbox */
+#fileList tr td.selection > .selectCheckBox + label,
+.select-all + label {
+  padding: 16px;
+}
+#fileList tr td.selection > .selectCheckBox:focus + label,
+.select-all:focus + label {
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius-pill);
+}
+
+#fileList tr td.selection > .selectCheckBox:focus-visible + label,
+.select-all:focus-visible + label {
+  outline-offset: 0px;
+}
+
+#fileList tr td.filename {
+  position: relative;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  -webkit-transition: background-image 500ms;
+  -moz-transition: background-image 500ms;
+  -o-transition: background-image 500ms;
+  transition: background-image 500ms;
+}
+
+#fileList tr td.filename a.name label,
+#fileList tr td.filename p.name label {
+  position: absolute;
+  width: 80%;
+  height: 50px;
+}
+
+#fileList tr td.filename .favorite {
+  display: inline-block;
+  float: left;
+}
+
+#fileList tr td.filename .favorite-mark {
+  position: absolute;
+  display: block;
+  top: -6px;
+  right: -6px;
+  line-height: 100%;
+  text-align: center;
+}
+
+#uploadsize-message, #delete-confirm {
+  display: none;
+}
+
+/* File actions */
+.fileactions {
+  z-index: 50;
+}
+
+.busy .fileactions, .busy .action {
+  visibility: hidden;
+}
+
+/* fix position of bubble pointer for Files app */
+.bubble,
+#app-navigation .app-navigation-entry-menu {
+  border-top-right-radius: 3px;
+  min-width: 100px;
+}
+
+/* force show the loading icon, not only on hover */
+#fileList .icon-loading-small {
+  opacity: 1 !important;
+  display: inline !important;
+}
+
+#fileList .action.action-share-notification span, #fileList a.name {
+  cursor: default !important;
+}
+
+/*
+ * Make the disabled link look not like a link in file list rows
+ */
+#fileList a.name.disabled * {
+  cursor: default;
+}
+#fileList a.name.disabled a, #fileList a.name.disabled a * {
+  cursor: pointer;
+}
+#fileList a.name.disabled:focus {
+  background: none;
+}
+
+a.action > img {
+  height: 16px;
+  width: 16px;
+  vertical-align: text-bottom;
+}
+
+/* Actions for selected files */
+.selectedActions {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.selectedActions.hidden {
+  display: none;
+}
+
+.selectedActions a {
+  display: inline;
+  line-height: 50px;
+  padding: 16px 5px;
+}
+
+.selectedActions a.hidden {
+  display: none;
+}
+
+.selectedActions a img {
+  position: relative;
+  vertical-align: text-bottom;
+  margin-bottom: -1px;
+}
+
+.selectedActions .actions-selected .icon-more {
+  margin-top: -3px;
+}
+
+#fileList td a a.action {
+  display: inline;
+  padding: 17px 8px;
+  line-height: 50px;
+  opacity: 0.3;
+}
+#fileList td a a.action.action-share {
+  padding: 17px 14px;
+}
+#fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span {
+  /* hide text of the share action */
+  /* .hidden-visually for accessbility */
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+#fileList td a a.action.action-share .avatar {
+  display: inline-block;
+  vertical-align: middle;
+}
+#fileList td a a.action.action-menu {
+  padding-top: 17px;
+  padding-bottom: 17px;
+  padding-left: 14px;
+  padding-right: 14px;
+}
+#fileList td a a.action.no-permission:hover, #fileList td a a.action.no-permission:focus {
+  opacity: 0.3;
+}
+#fileList td a a.action.disabled:hover, #fileList td a a.action.disabled:focus,
+#fileList td a a.action.disabled img {
+  opacity: 0.3;
+}
+#fileList td a a.action.disabled.action-download {
+  opacity: 0.7;
+}
+#fileList td a a.action.disabled.action-download:hover, #fileList td a a.action.disabled.action-download:focus {
+  opacity: 0.7;
+}
+#fileList td a a.action:hover, #fileList td a a.action:focus {
+  opacity: 1;
+}
+#fileList td a a.action:focus {
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius-pill);
+}
+#fileList td a .fileActionsMenu a.action, #fileList td a a.action.action-share.shared-style {
+  opacity: 0.7;
+}
+#fileList td a .fileActionsMenu .action.permanent {
+  opacity: 1;
+}
+
+#fileList .action.action-share.permanent.shared-style span:not(.icon) {
+  display: inline-block;
+  max-width: 70px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
+#fileList .remoteAddress .userDomain {
+  margin-left: 0 !important;
+}
+
+#fileList .favorite-mark.permanent {
+  opacity: 1;
+}
+
+#fileList .fileActionsMenu a.action:hover,
+#fileList .fileActionsMenu a.action:focus,
+#fileList a.action.action-share.shared-style:hover,
+#fileList a.action.action-share.shared-style:focus {
+  opacity: 1;
+}
+
+#fileList tr a.action.disabled {
+  background: none;
+}
+
+#selectedActionsList a.download.disabled,
+#fileList tr a.action.action-download.disabled {
+  color: #000000;
+}
+
+#fileList tr:hover a.action.disabled:hover * {
+  cursor: default;
+}
+
+.summary {
+  color: var(--color-text-maxcontrast);
+  /* add whitespace to bottom of files list to correctly show dropdowns */
+  height: 330px;
+}
+
+#filestable .filesummary {
+  width: 100%;
+  /* Width of checkbox and file preview */
+  padding-left: 101px;
+}
+
+/* Less whitespace needed on link share page
+ * as there is a footer and action menus have fewer entries.
+ */
+#body-public .summary {
+  height: 180px;
+}
+
+.summary:hover,
+.summary:focus,
+.summary,
+table tr.summary td {
+  background-color: transparent;
+}
+
+.summary td {
+  border-bottom: none;
+  vertical-align: top;
+  padding-top: 20px;
+}
+
+.summary td:first-child {
+  padding: 0;
+}
+
+.hiddeninfo {
+  white-space: pre-line;
+}
+
+table.dragshadow {
+  width: auto;
+  z-index: 2000;
+}
+
+table.dragshadow td.filename {
+  padding-left: 60px;
+  padding-right: 16px;
+  height: 36px;
+  /* Override "max-width: 0" to prevent file name and size from overlapping */
+  max-width: unset;
+}
+
+table.dragshadow td.size {
+  padding-right: 8px;
+}
+
+.mask {
+  z-index: 50;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-main-background);
+  background-repeat: no-repeat no-repeat;
+  background-position: 50%;
+  opacity: 0.7;
+  transition: opacity 100ms;
+  -moz-transition: opacity 100ms;
+  -o-transition: opacity 100ms;
+  -ms-transition: opacity 100ms;
+  -webkit-transition: opacity 100ms;
+}
+
+.mask.transparent {
+  opacity: 0;
+}
+
+.newFileMenu {
+  font-weight: 300;
+  top: 100%;
+  left: -48px !important;
+  margin-top: 4px;
+  min-width: 100px;
+  z-index: 1001;
+  /* Center triangle */
+}
+.newFileMenu::after {
+  left: 57px !important;
+}
+
+#filestable .filename .action .icon,
+#filestable .selectedActions a .icon,
+#filestable .filename .favorite-mark .icon,
+#controls .actions .button .icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-size: 16px 16px;
+}
+
+#filestable .filename .favorite-mark .icon-star {
+  background-image: none;
+}
+#filestable .filename .favorite-mark .icon-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-star-dark-yellow);
+}
+
+#filestable .filename .action .icon.hidden,
+#filestable .selectedActions a .icon.hidden,
+#controls .actions .button .icon.hidden {
+  display: none;
+}
+
+#filestable .filename .action .icon.loading,
+#filestable .selectedActions a .icon.loading,
+#controls .actions .button .icon.loading {
+  width: 15px;
+  height: 15px;
+}
+
+.app-files .actions .button.new {
+  position: relative;
+}
+
+.breadcrumb .canDrop > a,
+#filestable tbody tr.canDrop {
+  background-color: rgba(0, 130, 201, 0.3);
+}
+
+.dropzone-background {
+  background-color: rgba(0, 130, 201, 0.3);
+}
+.dropzone-background :hover {
+  box-shadow: none !important;
+}
+
+.notCreatable {
+  margin-left: 12px;
+  margin-right: 44px;
+  margin-top: 12px;
+  color: var(--color-main-text);
+  overflow: auto;
+  min-width: 160px;
+  height: 54px;
+}
+.notCreatable:not(.hidden) {
+  display: flex;
+}
+.notCreatable .icon-alert-outline {
+  top: -15px;
+  position: relative;
+  margin-right: 4px;
+}
+
+#quota {
+  margin: 0 !important;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  z-index: 1;
+}
+#quota > a[href="#"] {
+  box-shadow: none !important;
+}
+#quota > a[href="#"], #quota > a[href="#"] * {
+  cursor: default !important;
+}
+#quota .quota-container {
+  height: 5px;
+  border-radius: var(--border-radius);
+}
+#quota .quota-container div {
+  height: 100%;
+  background-color: var(--color-primary);
+}
+
+#quotatext {
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+}
+
+/* GRID */
+#filestable.view-grid:not(.hidden) {
+  /* HEADER and MULTISELECT */
+  /* MAIN FILE LIST */
+  /* Center align the footer file number & size summary */
+}
+#filestable.view-grid:not(.hidden) thead tr {
+  display: block;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-main-background-translucent);
+}
+#filestable.view-grid:not(.hidden) thead tr th {
+  width: auto;
+  border: none;
+}
+#filestable.view-grid:not(.hidden) tbody {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 160px);
+  justify-content: space-around;
+  row-gap: 15px;
+  margin: 15px 0;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
+  display: block;
+  position: relative;
+  height: 190px;
+  border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted {
+  background-color: transparent;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions {
+  background-color: var(--color-background-hover);
+}
+#filestable.view-grid:not(.hidden) tbody td {
+  display: inline;
+  border-bottom: none;
+  /* No space for filesize and date in grid view */
+  /* Position actions menu below file */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper {
+  min-width: 0;
+  max-width: none;
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  padding: 14px;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail {
+  width: calc(100% - 2 * 14px);
+  height: calc(100% - 2 * 14px);
+  background-size: contain;
+  margin: 0;
+  border-radius: var(--border-radius);
+  background-repeat: no-repeat;
+  background-position: center;
+  /* Position favorite star related to checkbox to left and 3-dot menu below
+   * Position is inherited from the selection while in grid view
+   */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark {
+  padding: 14px;
+  left: auto;
+  top: -22px;
+  right: -22px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .uploadtext {
+  width: 100%;
+  margin: 0;
+  top: 0;
+  bottom: auto;
+  height: 28px;
+  padding-top: 4px;
+  padding-left: 28px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name {
+  height: 100%;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  cursor: pointer !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext {
+  display: flex;
+  height: 44px;
+  margin-top: 146px;
+  text-align: center;
+  line-height: 44px;
+  padding: 0;
+  /* No space for extension in grid view */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
+  display: inline-block;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before {
+  content: "";
+  flex: 1;
+  min-width: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after {
+  content: "";
+  flex: 1;
+  min-width: 44px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions {
+  height: initial;
+  margin-top: 146px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action {
+  padding: 14px;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img {
+  padding: 6px;
+  border-radius: 50%;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form {
+  padding: 3px 14px;
+  border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form input.filename {
+  width: 100%;
+  margin-left: 0;
+}
+#filestable.view-grid:not(.hidden) tbody td.filesize, #filestable.view-grid:not(.hidden) tbody td.date {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  display: flex;
+  width: 44px;
+  height: 44px;
+  z-index: 10;
+  background: transparent;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  padding: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label::before, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before {
+  margin: 0;
+  width: 14px;
+  height: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td .popovermenu {
+  left: 0;
+  width: 150px;
+  margin: 0 5px;
+  /* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
+}
+#filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension {
+  display: block;
+}
+#filestable.view-grid:not(.hidden) tfoot {
+  display: grid;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) {
+  display: inline-block;
+  margin: 0 auto;
+  height: 418px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td {
+  padding-top: 50px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, #filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info {
+  margin-left: 0;
+}
+
+/* Grid view toggle */
+#view-toggle {
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 22px;
+  opacity: 0.5;
+  position: fixed;
+  right: 0;
+  z-index: 100;
+}
+#view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
+  opacity: 1;
+}
+
+/**
+ * Make sure the hidden input is always
+ * on the visible scrolled area of the
+ * page to avoid scrolling to top when focusing
+ */
+#showgridview {
+  position: fixed;
+  top: 0;
+}
+
+/* Adjustments for link share page */
+#body-public {
+  /* Right-align view toggle on link share page */
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td {
+  /* More space for filename since there is no share icon */
+  /* Position actions menu correctly below 3-dot-menu */
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
+  max-width: 124px;
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td .popovermenu {
+  left: -80px;
+}
+#body-public #view-toggle {
+  position: absolute;
+  right: 0;
+}
+
+/* Hide legacy Gallery toggle */
+#gallery-button {
+  display: none;
+}
+
+#tag_multiple_files_container {
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 3px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+#tag_multiple_files_container h3 {
+  width: 100%;
+  padding: 0 18px;
+}
+#tag_multiple_files_container .systemTagsInputFieldContainer {
+  flex: 1 1 80%;
+  min-width: 0;
+  margin: 0 12px;
+}
+
+/*# sourceMappingURL=files.css.map */
diff --git a/apps/files/css/files.css.map b/apps/files/css/files.css.map
new file mode 100644
index 00000000000..ffefdcfdf53
--- /dev/null
+++ b/apps/files/css/files.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","files.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADxCA;AACA;EACC;EACA;EACA;EACA;;;AAED;EAAoD;EAAU;;;AAC9D;EAAqB;;;AACrB;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;AAiBA;AAAA;AAAA;;AAfA;EACC;;AAGD;EACC;EACA;EAEA,KDoCc;EClCd;EACA;EACA;;AAMD;EACC;EACA;;AAEA;AAAA;EAEC;;AAEA;AAAA;EACC;;;AAMJ;EACC;;;AAGD;AACA;EACC;EACA;;;AAGD;EAGC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;AClEC;EAEA;;;ADmED;ACrEC;EAEA;;;ADsED;ACxEC;EAEA;;;ADyED;AAAA;AAAA;AAAA;AC3EC;EAEA;;;AD+ED;ACjFC;EAEA;;;ADkFD;ACpFC;EAEA;;;ADqFD;ACvFC;EAEA;;;ADwFD;AC1FC;EAEA;;;AD2FD;AC7FC;EAEA;;;AD8FD;AChGC;EAEA;;;ADkGD;EACC;;;AAED;AACA;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAGD;EAAU;;;AAEV;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;EAIC;EACA;;;AAGD;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;EAIC;;;AAED;EACC;;;AAED;AAAA;EAEC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;AAAe;EACf;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;EACA;AACA;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;AAAe;;;AAEhB;EACC;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;EAEC;EACA;AAAmB;EACnB;EACA;EACA;EACA;EACA;;;AAED;AACC;EACA;EACA;EACA;EACA;;;AAGA;EACC;;AAED;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAID;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAGD;EAA6H;;;AAC7H;EAAwE;EAAY;;;AAEpF;EACC;EACA;EACA;EACA;;;AAGD;AAEC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;EAIC;;;AAGD;AACA;EACC;;;AAGD;AAGC;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;;AAIF;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAA2C;EAAwC;EAAsC;;;AAG1H;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsC;;;AAEtC;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;AACA;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACA;AACC;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAID;AAAA;EAEC;;AAED;EACC;;AACA;EACC;;AAIH;EACC;;AAED;EACC;EACA;;AAGF;EACC;;AAED;EACC;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAAA;EAKC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;AACA;EAEA;;;AAED;EACC;AACA;EACA;;;AAED;AAAA;AAAA;AAGA;EACC;;;AAED;AAAA;AAAA;AAAA;EAIC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;AAEA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACC;;;AAIF;AAAA;AAAA;AAAA;EAIC;EACA;EACA;;;AAMA;EACC;;AAED;AC1vBA;EAEA;;;AD6vBD;AAAA;AAAA;EAGC;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAED;EACC;;AACA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EAEC;;AACA;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;AAIC;AAaA;AAoOA;;AA/OC;EACC;EACA;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EAKC;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;;AAKH;EACC;EACA;AAmJA;AA8BA;;AA9KC;EACC;EACA;EACA;EACA,OAvDQ;EAwDR,QAxDQ;EAyDR,SAxDO;EAyDP;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACC,SA1EK;EA2EL;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAGD;EACC;EACA;EAIA;EAKA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;AAoBA;;AAlBA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAID;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,SApJK;EAqJL;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAQH;EACC;;AAEA;EACC;EACA;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;AAMH;EAEC;;AAGD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAvNO;;AAwNP;EACC;EACA,OA1NM;EA2NN,QA3NM;;AAiOT;EACC;EACA;EACA;AAEA;;AACA;EACC;EACA;;AAMJ;EACC;;AAID;EACC;;AAEA;EACC;EACA;EAEA;;AAEA;EACC;;AAEA;EAEC;;AAGD;EACI;;;AAOR;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;EACA;;;AAGD;AACA;AAaC;;AAZA;AACC;AAKA;;AAJA;EACC;;AAID;EACC;;AAKF;EACC;EACA;;;AAIF;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA","file":"files.css"}
\ No newline at end of file
diff --git a/apps/files/css/merged.css b/apps/files/css/merged.css
new file mode 100644
index 00000000000..4e36788ace6
--- /dev/null
+++ b/apps/files/css/merged.css
@@ -0,0 +1,1831 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
+ * @copyright Copyright (c) 2019, Fabian Dreßler <nudelsalat@clouz.de>
+ *
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+/* FILE MENU */
+.actions {
+  padding: 5px;
+  height: 100%;
+  display: inline-block;
+  float: left;
+}
+
+.actions input, .actions button, .actions .button {
+  margin: 0;
+  float: left;
+}
+
+.actions .button a {
+  color: #555;
+}
+
+.actions .button a:hover,
+.actions .button a:focus {
+  background-color: var(--color-background-hover);
+}
+
+.actions .button a:active {
+  background-color: var(--color-primary-light);
+}
+
+.actions.creatable {
+  position: relative;
+  display: flex;
+  flex: 1 1;
+}
+.actions.creatable .button:not(:last-child) {
+  margin-right: 3px;
+}
+
+.actions.hidden {
+  display: none;
+}
+
+#trash {
+  margin-right: 8px;
+  float: right;
+  z-index: 1010;
+  padding: 10px;
+  font-weight: normal;
+}
+
+.newFileMenu .error,
+.newFileMenu .error + .icon-confirm,
+#fileList .error {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+/* FILE TABLE */
+#filestable {
+  position: relative;
+  width: 100%;
+  min-width: 250px;
+  display: block;
+  flex-direction: column;
+  /**
+   * This is a dirty hack as the sticky header requires us to use a different display type on the table element
+   */
+}
+#emptycontent:not(.hidden) ~ #filestable {
+  display: none;
+}
+#filestable thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 50px;
+  z-index: 60;
+  display: block;
+  background-color: var(--color-main-background-translucent);
+}
+#filestable tbody {
+  display: table;
+  width: 100%;
+}
+#filestable tbody tr[data-permissions="0"],
+#filestable tbody tr[data-permissions="16"] {
+  background-color: var(--color-background-dark);
+}
+#filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,
+#filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext {
+  color: var(--color-text-maxcontrast);
+}
+
+#filestable.hidden {
+  display: none;
+}
+
+/* fit app list view heights */
+.app-files #app-content > .viewcontainer {
+  min-height: 0%;
+  width: 100%;
+}
+
+.app-files #app-content {
+  width: calc(100% - 300px);
+}
+
+.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+  background-color: var(--color-primary-light) !important;
+}
+
+.app-files #app-content.dir-drop {
+  background-color: var(--color-main-background) !important;
+}
+
+.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+  background-color: transparent !important;
+}
+
+.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir {
+  background-color: var(--color-primary-light) !important;
+}
+
+/* icons for sidebar */
+.nav-icon-files {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-folder-dark);
+}
+
+.nav-icon-recent {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-recent-dark);
+}
+
+.nav-icon-favorites {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-starred-dark);
+}
+
+.nav-icon-sharingin,
+.nav-icon-sharingout,
+.nav-icon-pendingshares,
+.nav-icon-shareoverview {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-share-dark);
+}
+
+.nav-icon-sharinglinks {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-public-dark);
+}
+
+.nav-icon-extstoragemounts {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-external-dark);
+}
+
+.nav-icon-trashbin {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-delete-dark);
+}
+
+.nav-icon-trashbin-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-delete-#ff0000);
+}
+
+.nav-icon-deletedshares {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-unshare-dark);
+}
+
+.nav-icon-favorites-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-starred-yellow);
+}
+
+#app-navigation .nav-files a.nav-icon-files {
+  width: auto;
+}
+
+/* button needs overrides due to navigation styles */
+#app-navigation .nav-files a.new {
+  width: 40px;
+  height: 32px;
+  padding: 0 10px;
+  margin: 0;
+  cursor: pointer;
+}
+
+#app-navigation .nav-files a.new.hidden {
+  display: none;
+}
+
+#app-navigation .nav-files a.new.disabled {
+  opacity: 0.3;
+}
+
+#filestable tbody tr {
+  height: 51px;
+}
+
+#filestable tbody tr:hover,
+#filestable tbody tr:focus,
+#filestable tbody .name:focus,
+#filestable tbody tr:hover .filename form,
+table tr.mouseOver td {
+  background-color: var(--color-background-hover);
+}
+
+#filestable tbody tr:active,
+#filestable tbody tr.highlighted,
+#filestable tbody tr.highlighted .name:focus,
+#filestable tbody tr.selected,
+#filestable tbody tr.searchresult {
+  background-color: var(--color-primary-light);
+}
+
+tbody a {
+  color: var(--color-main-text);
+}
+
+span.conflict-path, span.extension, span.uploading, td.date {
+  color: var(--color-text-maxcontrast);
+}
+
+span.conflict-path, span.extension {
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
+  -o-transition: opacity 300ms;
+  transition: opacity 300ms;
+  vertical-align: top;
+}
+
+tr:hover span.conflict-path,
+tr:focus span.conflict-path,
+tr:hover span.extension,
+tr:focus span.extension {
+  opacity: 1;
+  color: var(--color-text-maxcontrast);
+}
+
+table th, table th a {
+  color: var(--color-text-maxcontrast);
+}
+
+table.multiselect th a {
+  color: var(--color-main-text);
+}
+
+table th .columntitle {
+  display: block;
+  padding: 15px;
+  height: 50px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  vertical-align: middle;
+}
+
+table.multiselect th .columntitle {
+  display: inline-block;
+  margin-right: -20px;
+}
+
+table th .columntitle.name {
+  padding-left: 0;
+  margin-left: 44px;
+}
+
+table.multiselect th .columntitle.name {
+  margin-left: 0;
+}
+
+table th .sort-indicator {
+  width: 10px;
+  height: 8px;
+  margin-left: 5px;
+  display: inline-block;
+  vertical-align: text-bottom;
+  opacity: 0.3;
+}
+
+.sort-indicator.hidden,
+.multiselect .sort-indicator,
+table.multiselect th:hover .sort-indicator.hidden,
+table.multiselect th:focus .sort-indicator.hidden {
+  visibility: hidden;
+}
+
+.multiselect .sort, .multiselect .sort span {
+  cursor: default;
+}
+
+table th:hover .sort-indicator.hidden,
+table th:focus .sort-indicator.hidden {
+  visibility: visible;
+}
+
+table th,
+table td {
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+  font-weight: normal;
+}
+
+table td {
+  padding: 0 15px;
+  font-style: normal;
+  background-position: 8px center;
+  background-repeat: no-repeat;
+}
+
+table th#headerName {
+  position: relative;
+  width: 9999px;
+  /* not really sure why this works better than 100% … table styling */
+  padding: 0;
+}
+
+#headerName-container {
+  position: relative;
+  height: 50px;
+}
+
+table th#headerSelection {
+  padding-top: 2px;
+}
+
+table th#headerSize, table td.filesize {
+  text-align: right;
+}
+
+table th#headerDate, table td.date,
+table th.column-last, table td.column-last {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  /* this can not be just width, both need to be set … table styling */
+  min-width: 130px;
+  max-width: 130px;
+}
+
+#app-content-files thead,
+#app-content-trashbin thead {
+  top: 94px;
+}
+
+#app-content-recent,
+#app-content-favorites,
+#app-content-shareoverview,
+#app-content-sharingout,
+#app-content-sharingin,
+#app-content-sharinglinks,
+#app-content-deletedshares,
+#app-content-pendingshares {
+  margin-top: 22px;
+}
+
+table.multiselect thead th {
+  background-color: var(--color-main-background-translucent);
+  font-weight: bold;
+}
+
+#app-content.with-app-sidebar table.multiselect thead {
+  margin-right: 27%;
+}
+
+table.multiselect #headerName {
+  position: relative;
+  width: 9999px;
+  /* when we use 100%, the styling breaks on mobile … table styling */
+}
+
+table.multiselect #modified {
+  display: none;
+}
+
+table td.selection,
+table th.selection,
+table td.fileaction {
+  width: 32px;
+  text-align: center;
+}
+
+table td.filename a.name,
+table td.filename p.name {
+  display: flex;
+  position: relative;
+  /* Firefox needs to explicitly have this default set … */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 50px;
+  line-height: 50px;
+  padding: 0;
+}
+
+table td.filename .thumbnail-wrapper {
+  /* we need this to make sure flex is working inside a table cell */
+  width: 0;
+  min-width: 50px;
+  max-width: 50px;
+  height: 50px;
+}
+
+table td.filename .thumbnail-wrapper.icon-loading-small:after {
+  z-index: 10;
+}
+table td.filename .thumbnail-wrapper.icon-loading-small .thumbnail {
+  opacity: 0.2;
+}
+
+table td.filename .thumbnail {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background-size: 32px;
+  margin-left: 9px;
+  margin-top: 9px;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  position: absolute;
+  z-index: 4;
+}
+
+table td.filename p.name .thumbnail {
+  cursor: default;
+}
+
+table tr[data-has-preview=true] .thumbnail {
+  border: 1px solid var(--color-border);
+}
+
+table td.filename input.filename {
+  width: 70%;
+  margin-left: 48px;
+  cursor: text;
+}
+
+table td.filename form {
+  margin-top: -40px;
+  position: relative;
+  top: -6px;
+}
+
+table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete {
+  padding: 3px 8px 8px 3px;
+}
+
+table td.filename .nametext, .modified, .column-last > span:first-child {
+  float: left;
+  padding: 15px 0;
+}
+
+.modified, .column-last > span:first-child {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 110px;
+}
+
+/* TODO fix usability bug (accidental file/folder selection) */
+table td.filename {
+  max-width: 0;
+}
+table td.filename .nametext {
+  width: 0;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 100%;
+  z-index: 10;
+  padding: 0 20px 0 0;
+}
+
+.hide-hidden-files #filestable #fileList tr.hidden-file,
+.hide-hidden-files #filestable #fileList tr.hidden-file.dragging {
+  display: none;
+}
+
+#fileList tr.animate-opacity {
+  -webkit-transition: opacity 250ms;
+  -moz-transition: opacity 250ms;
+  -o-transition: opacity 250ms;
+  transition: opacity 250ms;
+}
+
+#fileList tr.dragging {
+  opacity: 0.2;
+}
+
+table td.filename .nametext .innernametext {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+}
+
+/* for smaller resolutions - see mobile.css */
+table td.filename .uploadtext {
+  position: absolute;
+  font-weight: normal;
+  margin-left: 50px;
+  left: 0;
+  bottom: 0;
+  height: 20px;
+  padding: 0 4px;
+  padding-left: 1px;
+  font-size: 11px;
+  line-height: 22px;
+  color: var(--color-text-maxcontrast);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+table td.selection {
+  padding: 0;
+}
+
+/* File checkboxes */
+#fileList tr td.selection > .selectCheckBox + label:before {
+  opacity: 0.3;
+  margin-right: 0;
+}
+
+/* Show checkbox with full opacity when hovering, checked, or selected */
+#fileList tr:hover td.selection > .selectCheckBox + label:before,
+#fileList tr:focus td.selection > .selectCheckBox + label:before,
+#fileList tr td.selection > .selectCheckBox:checked + label:before,
+#fileList tr.selected td.selection > .selectCheckBox + label:before {
+  opacity: 1;
+}
+
+/* Show checkbox with half opacity when selecting range */
+#fileList tr.halfselected td.selection > .selectCheckBox + label:before {
+  opacity: 0.5;
+}
+
+/* Use label to have bigger clickable size for checkbox */
+#fileList tr td.selection > .selectCheckBox + label,
+.select-all + label {
+  padding: 16px;
+}
+#fileList tr td.selection > .selectCheckBox:focus + label,
+.select-all:focus + label {
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius-pill);
+}
+
+#fileList tr td.selection > .selectCheckBox:focus-visible + label,
+.select-all:focus-visible + label {
+  outline-offset: 0px;
+}
+
+#fileList tr td.filename {
+  position: relative;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  -webkit-transition: background-image 500ms;
+  -moz-transition: background-image 500ms;
+  -o-transition: background-image 500ms;
+  transition: background-image 500ms;
+}
+
+#fileList tr td.filename a.name label,
+#fileList tr td.filename p.name label {
+  position: absolute;
+  width: 80%;
+  height: 50px;
+}
+
+#fileList tr td.filename .favorite {
+  display: inline-block;
+  float: left;
+}
+
+#fileList tr td.filename .favorite-mark {
+  position: absolute;
+  display: block;
+  top: -6px;
+  right: -6px;
+  line-height: 100%;
+  text-align: center;
+}
+
+#uploadsize-message, #delete-confirm {
+  display: none;
+}
+
+/* File actions */
+.fileactions {
+  z-index: 50;
+}
+
+.busy .fileactions, .busy .action {
+  visibility: hidden;
+}
+
+/* fix position of bubble pointer for Files app */
+.bubble,
+#app-navigation .app-navigation-entry-menu {
+  border-top-right-radius: 3px;
+  min-width: 100px;
+}
+
+/* force show the loading icon, not only on hover */
+#fileList .icon-loading-small {
+  opacity: 1 !important;
+  display: inline !important;
+}
+
+#fileList .action.action-share-notification span, #fileList a.name {
+  cursor: default !important;
+}
+
+/*
+ * Make the disabled link look not like a link in file list rows
+ */
+#fileList a.name.disabled * {
+  cursor: default;
+}
+#fileList a.name.disabled a, #fileList a.name.disabled a * {
+  cursor: pointer;
+}
+#fileList a.name.disabled:focus {
+  background: none;
+}
+
+a.action > img {
+  height: 16px;
+  width: 16px;
+  vertical-align: text-bottom;
+}
+
+/* Actions for selected files */
+.selectedActions {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.selectedActions.hidden {
+  display: none;
+}
+
+.selectedActions a {
+  display: inline;
+  line-height: 50px;
+  padding: 16px 5px;
+}
+
+.selectedActions a.hidden {
+  display: none;
+}
+
+.selectedActions a img {
+  position: relative;
+  vertical-align: text-bottom;
+  margin-bottom: -1px;
+}
+
+.selectedActions .actions-selected .icon-more {
+  margin-top: -3px;
+}
+
+#fileList td a a.action {
+  display: inline;
+  padding: 17px 8px;
+  line-height: 50px;
+  opacity: 0.3;
+}
+#fileList td a a.action.action-share {
+  padding: 17px 14px;
+}
+#fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span {
+  /* hide text of the share action */
+  /* .hidden-visually for accessbility */
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+#fileList td a a.action.action-share .avatar {
+  display: inline-block;
+  vertical-align: middle;
+}
+#fileList td a a.action.action-menu {
+  padding-top: 17px;
+  padding-bottom: 17px;
+  padding-left: 14px;
+  padding-right: 14px;
+}
+#fileList td a a.action.no-permission:hover, #fileList td a a.action.no-permission:focus {
+  opacity: 0.3;
+}
+#fileList td a a.action.disabled:hover, #fileList td a a.action.disabled:focus,
+#fileList td a a.action.disabled img {
+  opacity: 0.3;
+}
+#fileList td a a.action.disabled.action-download {
+  opacity: 0.7;
+}
+#fileList td a a.action.disabled.action-download:hover, #fileList td a a.action.disabled.action-download:focus {
+  opacity: 0.7;
+}
+#fileList td a a.action:hover, #fileList td a a.action:focus {
+  opacity: 1;
+}
+#fileList td a a.action:focus {
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius-pill);
+}
+#fileList td a .fileActionsMenu a.action, #fileList td a a.action.action-share.shared-style {
+  opacity: 0.7;
+}
+#fileList td a .fileActionsMenu .action.permanent {
+  opacity: 1;
+}
+
+#fileList .action.action-share.permanent.shared-style span:not(.icon) {
+  display: inline-block;
+  max-width: 70px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
+#fileList .remoteAddress .userDomain {
+  margin-left: 0 !important;
+}
+
+#fileList .favorite-mark.permanent {
+  opacity: 1;
+}
+
+#fileList .fileActionsMenu a.action:hover,
+#fileList .fileActionsMenu a.action:focus,
+#fileList a.action.action-share.shared-style:hover,
+#fileList a.action.action-share.shared-style:focus {
+  opacity: 1;
+}
+
+#fileList tr a.action.disabled {
+  background: none;
+}
+
+#selectedActionsList a.download.disabled,
+#fileList tr a.action.action-download.disabled {
+  color: #000000;
+}
+
+#fileList tr:hover a.action.disabled:hover * {
+  cursor: default;
+}
+
+.summary {
+  color: var(--color-text-maxcontrast);
+  /* add whitespace to bottom of files list to correctly show dropdowns */
+  height: 330px;
+}
+
+#filestable .filesummary {
+  width: 100%;
+  /* Width of checkbox and file preview */
+  padding-left: 101px;
+}
+
+/* Less whitespace needed on link share page
+ * as there is a footer and action menus have fewer entries.
+ */
+#body-public .summary {
+  height: 180px;
+}
+
+.summary:hover,
+.summary:focus,
+.summary,
+table tr.summary td {
+  background-color: transparent;
+}
+
+.summary td {
+  border-bottom: none;
+  vertical-align: top;
+  padding-top: 20px;
+}
+
+.summary td:first-child {
+  padding: 0;
+}
+
+.hiddeninfo {
+  white-space: pre-line;
+}
+
+table.dragshadow {
+  width: auto;
+  z-index: 2000;
+}
+
+table.dragshadow td.filename {
+  padding-left: 60px;
+  padding-right: 16px;
+  height: 36px;
+  /* Override "max-width: 0" to prevent file name and size from overlapping */
+  max-width: unset;
+}
+
+table.dragshadow td.size {
+  padding-right: 8px;
+}
+
+.mask {
+  z-index: 50;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-main-background);
+  background-repeat: no-repeat no-repeat;
+  background-position: 50%;
+  opacity: 0.7;
+  transition: opacity 100ms;
+  -moz-transition: opacity 100ms;
+  -o-transition: opacity 100ms;
+  -ms-transition: opacity 100ms;
+  -webkit-transition: opacity 100ms;
+}
+
+.mask.transparent {
+  opacity: 0;
+}
+
+.newFileMenu {
+  font-weight: 300;
+  top: 100%;
+  left: -48px !important;
+  margin-top: 4px;
+  min-width: 100px;
+  z-index: 1001;
+  /* Center triangle */
+}
+.newFileMenu::after {
+  left: 57px !important;
+}
+
+#filestable .filename .action .icon,
+#filestable .selectedActions a .icon,
+#filestable .filename .favorite-mark .icon,
+#controls .actions .button .icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-size: 16px 16px;
+}
+
+#filestable .filename .favorite-mark .icon-star {
+  background-image: none;
+}
+#filestable .filename .favorite-mark .icon-starred {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-star-dark-yellow);
+}
+
+#filestable .filename .action .icon.hidden,
+#filestable .selectedActions a .icon.hidden,
+#controls .actions .button .icon.hidden {
+  display: none;
+}
+
+#filestable .filename .action .icon.loading,
+#filestable .selectedActions a .icon.loading,
+#controls .actions .button .icon.loading {
+  width: 15px;
+  height: 15px;
+}
+
+.app-files .actions .button.new {
+  position: relative;
+}
+
+.breadcrumb .canDrop > a,
+#filestable tbody tr.canDrop {
+  background-color: rgba(0, 130, 201, 0.3);
+}
+
+.dropzone-background {
+  background-color: rgba(0, 130, 201, 0.3);
+}
+.dropzone-background :hover {
+  box-shadow: none !important;
+}
+
+.notCreatable {
+  margin-left: 12px;
+  margin-right: 44px;
+  margin-top: 12px;
+  color: var(--color-main-text);
+  overflow: auto;
+  min-width: 160px;
+  height: 54px;
+}
+.notCreatable:not(.hidden) {
+  display: flex;
+}
+.notCreatable .icon-alert-outline {
+  top: -15px;
+  position: relative;
+  margin-right: 4px;
+}
+
+#quota {
+  margin: 0 !important;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  z-index: 1;
+}
+#quota > a[href="#"] {
+  box-shadow: none !important;
+}
+#quota > a[href="#"], #quota > a[href="#"] * {
+  cursor: default !important;
+}
+#quota .quota-container {
+  height: 5px;
+  border-radius: var(--border-radius);
+}
+#quota .quota-container div {
+  height: 100%;
+  background-color: var(--color-primary);
+}
+
+#quotatext {
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+}
+
+/* GRID */
+#filestable.view-grid:not(.hidden) {
+  /* HEADER and MULTISELECT */
+  /* MAIN FILE LIST */
+  /* Center align the footer file number & size summary */
+}
+#filestable.view-grid:not(.hidden) thead tr {
+  display: block;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-main-background-translucent);
+}
+#filestable.view-grid:not(.hidden) thead tr th {
+  width: auto;
+  border: none;
+}
+#filestable.view-grid:not(.hidden) tbody {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 160px);
+  justify-content: space-around;
+  row-gap: 15px;
+  margin: 15px 0;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
+  display: block;
+  position: relative;
+  height: 190px;
+  border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted {
+  background-color: transparent;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions {
+  background-color: var(--color-background-hover);
+}
+#filestable.view-grid:not(.hidden) tbody td {
+  display: inline;
+  border-bottom: none;
+  /* No space for filesize and date in grid view */
+  /* Position actions menu below file */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper {
+  min-width: 0;
+  max-width: none;
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  padding: 14px;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail {
+  width: calc(100% - 2 * 14px);
+  height: calc(100% - 2 * 14px);
+  background-size: contain;
+  margin: 0;
+  border-radius: var(--border-radius);
+  background-repeat: no-repeat;
+  background-position: center;
+  /* Position favorite star related to checkbox to left and 3-dot menu below
+   * Position is inherited from the selection while in grid view
+   */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark {
+  padding: 14px;
+  left: auto;
+  top: -22px;
+  right: -22px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .uploadtext {
+  width: 100%;
+  margin: 0;
+  top: 0;
+  bottom: auto;
+  height: 28px;
+  padding-top: 4px;
+  padding-left: 28px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name {
+  height: 100%;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  cursor: pointer !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext {
+  display: flex;
+  height: 44px;
+  margin-top: 146px;
+  text-align: center;
+  line-height: 44px;
+  padding: 0;
+  /* No space for extension in grid view */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
+  display: inline-block;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before {
+  content: "";
+  flex: 1;
+  min-width: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after {
+  content: "";
+  flex: 1;
+  min-width: 44px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions {
+  height: initial;
+  margin-top: 146px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action {
+  padding: 14px;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img {
+  padding: 6px;
+  border-radius: 50%;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden {
+  display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form {
+  padding: 3px 14px;
+  border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form input.filename {
+  width: 100%;
+  margin-left: 0;
+}
+#filestable.view-grid:not(.hidden) tbody td.filesize, #filestable.view-grid:not(.hidden) tbody td.date {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  display: flex;
+  width: 44px;
+  height: 44px;
+  z-index: 10;
+  background: transparent;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  padding: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label::before, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before {
+  margin: 0;
+  width: 14px;
+  height: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td .popovermenu {
+  left: 0;
+  width: 150px;
+  margin: 0 5px;
+  /* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
+}
+#filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension {
+  display: block;
+}
+#filestable.view-grid:not(.hidden) tfoot {
+  display: grid;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) {
+  display: inline-block;
+  margin: 0 auto;
+  height: 418px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td {
+  padding-top: 50px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, #filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date {
+  display: none;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info {
+  margin-left: 0;
+}
+
+/* Grid view toggle */
+#view-toggle {
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 22px;
+  opacity: 0.5;
+  position: fixed;
+  right: 0;
+  z-index: 100;
+}
+#view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
+  opacity: 1;
+}
+
+/**
+ * Make sure the hidden input is always
+ * on the visible scrolled area of the
+ * page to avoid scrolling to top when focusing
+ */
+#showgridview {
+  position: fixed;
+  top: 0;
+}
+
+/* Adjustments for link share page */
+#body-public {
+  /* Right-align view toggle on link share page */
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td {
+  /* More space for filename since there is no share icon */
+  /* Position actions menu correctly below 3-dot-menu */
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
+  max-width: 124px;
+}
+#body-public #filestable.view-grid:not(.hidden) tbody td .popovermenu {
+  left: -80px;
+}
+#body-public #view-toggle {
+  position: absolute;
+  right: 0;
+}
+
+/* Hide legacy Gallery toggle */
+#gallery-button {
+  display: none;
+}
+
+#tag_multiple_files_container {
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 3px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+#tag_multiple_files_container h3 {
+  width: 100%;
+  padding: 0 18px;
+}
+#tag_multiple_files_container .systemTagsInputFieldContainer {
+  flex: 1 1 80%;
+  min-width: 0;
+  margin: 0 12px;
+}
+
+#upload {
+  box-sizing: border-box;
+  height: 36px;
+  width: 39px;
+  padding: 0 !important;
+  /* override default control bar button padding */
+  margin-left: 3px;
+  overflow: hidden;
+  vertical-align: top;
+  position: relative;
+  z-index: -20;
+}
+
+#upload .icon-upload {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 44px;
+  width: 44px;
+  margin: -5px -3px;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0.65;
+}
+
+.file_upload_target {
+  display: none;
+}
+
+.file_upload_form {
+  display: inline;
+  float: left;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  overflow: visible;
+}
+
+#uploadprogresswrapper, #uploadprogresswrapper * {
+  box-sizing: border-box;
+}
+
+#uploadprogresswrapper {
+  display: inline-block;
+  vertical-align: top;
+  height: 36px;
+  margin-left: 3px;
+}
+
+#uploadprogresswrapper > input[type=button] {
+  height: 36px;
+  margin-left: 3px;
+}
+
+#uploadprogressbar {
+  border-color: var(--color-border-dark);
+  border-radius: 18px 0 0 18px;
+  border-right: 0;
+  position: relative;
+  float: left;
+  width: 200px;
+  height: 36px;
+  display: inline-block;
+  text-align: center;
+}
+#uploadprogressbar .ui-progressbar-value {
+  margin: 0;
+}
+
+#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
+  height: calc(100% + 2px);
+  top: -1px;
+  left: -1px;
+  position: absolute;
+  overflow: hidden;
+  background-color: var(--color-primary);
+}
+
+#uploadprogressbar .label {
+  top: 8px;
+  opacity: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+#uploadprogressbar .label.inner {
+  color: var(--color-primary-text);
+  position: absolute;
+  display: block;
+  width: 200px;
+}
+
+#uploadprogressbar .label.outer {
+  position: relative;
+  color: var(--color-main-text);
+}
+
+#uploadprogressbar .desktop {
+  display: block;
+}
+
+#uploadprogressbar .mobile {
+  display: none;
+}
+
+#uploadprogressbar + .stop {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.oc-dialog .fileexists {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-bottom: 30px;
+}
+
+.oc-dialog .fileexists .conflict .filename,
+.oc-dialog .fileexists .conflict .mtime,
+.oc-dialog .fileexists .conflict .size {
+  -webkit-touch-callout: initial;
+  -webkit-user-select: initial;
+  -khtml-user-select: initial;
+  -moz-user-select: initial;
+  -ms-user-select: initial;
+  user-select: initial;
+}
+
+.oc-dialog .fileexists .conflict .message {
+  color: #e9322d;
+}
+
+.oc-dialog .fileexists table {
+  width: 100%;
+}
+
+.oc-dialog .fileexists th {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.oc-dialog .fileexists th input[type=checkbox] {
+  margin-right: 3px;
+}
+
+.oc-dialog .fileexists th:first-child {
+  width: 225px;
+}
+
+.oc-dialog .fileexists th label {
+  font-weight: normal;
+  color: var(--color-main-text);
+}
+
+.oc-dialog .fileexists th .count {
+  margin-left: 3px;
+}
+
+.oc-dialog .fileexists .conflicts .template {
+  display: none;
+}
+
+.oc-dialog .fileexists .conflict {
+  width: 100%;
+  height: 85px;
+}
+
+.oc-dialog .fileexists .conflict .filename {
+  color: #777;
+  word-break: break-all;
+  clear: left;
+}
+
+.oc-dialog .fileexists .icon {
+  width: 64px;
+  height: 64px;
+  margin: 0px 5px 5px 5px;
+  background-repeat: no-repeat;
+  background-size: 64px 64px;
+  float: left;
+}
+
+.oc-dialog .fileexists .original,
+.oc-dialog .fileexists .replacement {
+  float: left;
+  width: 225px;
+}
+
+.oc-dialog .fileexists .conflicts {
+  overflow-y: auto;
+  max-height: 225px;
+}
+
+.oc-dialog .fileexists .conflict input[type=checkbox] {
+  float: left;
+}
+
+.oc-dialog .fileexists #allfileslabel {
+  float: right;
+}
+
+.oc-dialog .fileexists #allfiles {
+  vertical-align: bottom;
+  position: relative;
+  top: -3px;
+}
+
+.oc-dialog .fileexists #allfiles + span {
+  vertical-align: bottom;
+}
+
+.oc-dialog .oc-dialog-buttonrow {
+  width: 100%;
+  text-align: right;
+}
+.oc-dialog .oc-dialog-buttonrow .cancel {
+  float: left;
+}
+
+.highlightUploaded {
+  -webkit-animation: highlightAnimation 2s 1;
+  -moz-animation: highlightAnimation 2s 1;
+  -o-animation: highlightAnimation 2s 1;
+  animation: highlightAnimation 2s 1;
+}
+
+@-webkit-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@-moz-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@-o-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/* 938 = table min-width(688) + app-navigation width: 250\
+	$breakpoint-mobile +1 = size where app-navigation is hidden +1
+	688 = table min-width */
+@media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px) {
+  .app-files #app-content.dir-drop {
+    background-color: rgb(255, 255, 255) !important;
+  }
+
+  table th#headerSize,
+table td.filesize,
+table th#headerDate,
+table td.date {
+    display: none;
+  }
+
+  /* remove padding to let border bottom fill the whole width*/
+  table td {
+    padding: 0;
+  }
+
+  /* remove shift for multiselect bar to account for missing navigation */
+  table.multiselect thead {
+    padding-left: 0;
+  }
+
+  #fileList a.action.action-menu img {
+    padding-left: 0;
+  }
+
+  #fileList .fileActionsMenu {
+    margin-right: 6px;
+  }
+
+  /* hide text of the share action on mobile */
+  /* .hidden-visually for accessbility */
+  #fileList a.action-share span:not(.icon):not(.avatar) {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  /* proper notification area for multi line messages */
+  #notification-container {
+    display: flex;
+  }
+
+  /* shorten elements for mobile */
+  #uploadprogressbar, #uploadprogressbar .label.inner {
+    width: 50px;
+  }
+
+  /* hide desktop-only parts */
+  #uploadprogressbar .desktop {
+    display: none !important;
+  }
+
+  #uploadprogressbar .mobile {
+    display: block !important;
+  }
+
+  /* ensure that it is visible over #app-content */
+  table.dragshadow {
+    z-index: 1000;
+  }
+}
+@media only screen and (max-width: 480px) {
+  /* Only show icons */
+  table th .selectedActions {
+    float: right;
+  }
+
+  table th .selectedActions > a span:not(.icon) {
+    display: none;
+  }
+
+  /* Increase touch area for the icons */
+  table th .selectedActions a {
+    padding: 17px 14px;
+  }
+
+  /* Remove the margin to reduce the overlap between the name and the icons */
+  table.multiselect th .columntitle.name {
+    margin-left: 0;
+  }
+}
+.app-sidebar .detailFileInfoContainer {
+  min-height: 50px;
+  padding: 15px;
+}
+
+.app-sidebar .detailFileInfoContainer > div {
+  clear: both;
+}
+
+.app-sidebar .mainFileInfoView .icon {
+  display: inline-block;
+  background-size: 16px 16px;
+}
+
+.app-sidebar .mainFileInfoView .permalink {
+  padding: 6px 10px;
+  vertical-align: top;
+  opacity: 0.6;
+}
+.app-sidebar .mainFileInfoView .permalink:hover, .app-sidebar .mainFileInfoView .permalink:focus {
+  opacity: 1;
+}
+
+.app-sidebar .mainFileInfoView .permalink-field > input {
+  clear: both;
+  width: 90%;
+}
+
+.app-sidebar .thumbnailContainer.large {
+  margin-left: -15px;
+  margin-right: -35px;
+  /* 15 + 20 for the close button */
+  margin-top: -15px;
+}
+
+.app-sidebar .thumbnailContainer.large.portrait {
+  margin: 0;
+  /* if we don't fit the image anyway we give it back the margin */
+}
+
+.app-sidebar .large .thumbnail {
+  width: 100%;
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  float: none;
+  margin: 0;
+  height: auto;
+}
+
+.app-sidebar .large .thumbnail .stretcher {
+  content: "";
+  display: block;
+  padding-bottom: 56.25%;
+  /* sets height of .thumbnail to 9/16 of the width */
+}
+
+.app-sidebar .large.portrait .thumbnail {
+  background-position: 50% top;
+}
+
+.app-sidebar .large.portrait .thumbnail {
+  background-size: contain;
+}
+
+.app-sidebar .large.text {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 14px;
+  font-size: 80%;
+  margin-left: 0;
+}
+
+.app-sidebar .thumbnail {
+  width: 100%;
+  min-height: 75px;
+  display: inline-block;
+  float: left;
+  margin-right: 10px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.app-sidebar .ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.app-sidebar .fileName {
+  font-size: 16px;
+  padding-top: 13px;
+  padding-bottom: 3px;
+}
+
+.app-sidebar .fileName h3 {
+  width: calc(100% - 42px);
+  /* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
+  display: inline-block;
+  padding: 5px 0;
+  margin: -5px 0;
+}
+
+.app-sidebar .file-details {
+  color: var(--color-text-maxcontrast);
+}
+
+.app-sidebar .action-favorite {
+  vertical-align: sub;
+  padding: 10px;
+  margin: -10px;
+}
+
+.app-sidebar .action-favorite > span {
+  opacity: 0.7 !important;
+}
+
+.app-sidebar .detailList {
+  float: left;
+}
+
+.app-sidebar .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 0.5;
+  z-index: 1;
+  width: 44px;
+  height: 44px;
+}
+
+/**
+ * @copyright Copyright (c) 2018, Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+.whatsNewPopover {
+  bottom: 35px !important;
+  left: 15px !important;
+  width: 270px;
+  z-index: 700;
+}
+
+.whatsNewPopover p {
+  width: auto !important;
+}
+
+.whatsNewPopover .caption {
+  font-weight: bold;
+  cursor: auto !important;
+}
+
+.whatsNewPopover .icon-close {
+  position: absolute;
+  right: 0;
+}
+
+.whatsNewPopover::after {
+  content: none;
+}
+
+/*# sourceMappingURL=merged.css.map */
diff --git a/apps/files/css/merged.css.map b/apps/files/css/merged.css.map
new file mode 100644
index 00000000000..b5236874c17
--- /dev/null
+++ b/apps/files/css/merged.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","files.scss","../../../core/css/functions.scss","upload.scss","mobile.scss","detailsView.scss","../../../core/css/whatsnew.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADxCA;AACA;EACC;EACA;EACA;EACA;;;AAED;EAAoD;EAAU;;;AAC9D;EAAqB;;;AACrB;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;AAiBA;AAAA;AAAA;;AAfA;EACC;;AAGD;EACC;EACA;EAEA,KDoCc;EClCd;EACA;EACA;;AAMD;EACC;EACA;;AAEA;AAAA;EAEC;;AAEA;AAAA;EACC;;;AAMJ;EACC;;;AAGD;AACA;EACC;EACA;;;AAGD;EAGC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;AClEC;EAEA;;;ADmED;ACrEC;EAEA;;;ADsED;ACxEC;EAEA;;;ADyED;AAAA;AAAA;AAAA;AC3EC;EAEA;;;AD+ED;ACjFC;EAEA;;;ADkFD;ACpFC;EAEA;;;ADqFD;ACvFC;EAEA;;;ADwFD;AC1FC;EAEA;;;AD2FD;AC7FC;EAEA;;;AD8FD;AChGC;EAEA;;;ADkGD;EACC;;;AAED;AACA;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAGD;EAAU;;;AAEV;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;EAIC;EACA;;;AAGD;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;EAIC;;;AAED;EACC;;;AAED;AAAA;EAEC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;AAAe;EACf;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;EACA;AACA;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;AAAe;;;AAEhB;EACC;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;EAEC;EACA;AAAmB;EACnB;EACA;EACA;EACA;EACA;;;AAED;AACC;EACA;EACA;EACA;EACA;;;AAGA;EACC;;AAED;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAID;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAGD;EAA6H;;;AAC7H;EAAwE;EAAY;;;AAEpF;EACC;EACA;EACA;EACA;;;AAGD;AAEC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;EAIC;;;AAGD;AACA;EACC;;;AAGD;AAGC;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;;AAIF;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAA2C;EAAwC;EAAsC;;;AAG1H;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsC;;;AAEtC;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;AACA;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACA;AACC;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAID;AAAA;EAEC;;AAED;EACC;;AACA;EACC;;AAIH;EACC;;AAED;EACC;EACA;;AAGF;EACC;;AAED;EACC;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAAA;EAKC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;AACA;EAEA;;;AAED;EACC;AACA;EACA;;;AAED;AAAA;AAAA;AAGA;EACC;;;AAED;AAAA;AAAA;AAAA;EAIC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;AAEA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACC;;;AAIF;AAAA;AAAA;AAAA;EAIC;EACA;EACA;;;AAMA;EACC;;AAED;AC1vBA;EAEA;;;AD6vBD;AAAA;AAAA;EAGC;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAED;EACC;;AACA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EAEC;;AACA;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;AAIC;AAaA;AAoOA;;AA/OC;EACC;EACA;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EAKC;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;;AAKH;EACC;EACA;AAmJA;AA8BA;;AA9KC;EACC;EACA;EACA;EACA,OAvDQ;EAwDR,QAxDQ;EAyDR,SAxDO;EAyDP;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACC,SA1EK;EA2EL;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAGD;EACC;EACA;EAIA;EAKA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;AAoBA;;AAlBA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAID;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,SApJK;EAqJL;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAQH;EACC;;AAEA;EACC;EACA;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;AAMH;EAEC;;AAGD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAvNO;;AAwNP;EACC;EACA,OA1NM;EA2NN,QA3NM;;AAiOT;EACC;EACA;EACA;AAEA;;AACA;EACC;EACA;;AAMJ;EACC;;AAID;EACC;;AAEA;EACC;EACA;EAEA;;AAEA;EACC;;AAEA;EAEC;;AAGD;EACI;;;AAOR;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;EACA;;;AAGD;AACA;AAaC;;AAZA;AACC;AAKA;;AAJA;EACC;;AAID;EACC;;AAKF;EACC;EACA;;;AAIF;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;;;AEruCF;EACC;EACA;EACA;EACA;AAAuB;EACvB;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EAAsB;;;AACtB;EAAoB;EAAgB;EAAY;EAAU;EAAW;EAAgB;;;AAErF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AHjNT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AIEA;AAAA;AAAA;AAIA;EAEA;IACC;;;EAGD;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;;;EAGD;IACC;;;EAGD;IACC;;;AAED;AACA;EACA;IACC;IACA;IACA;IACA;IACA;IACA;;;AAID;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAID;AACC;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;;;ACvFF;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EAEC;;;AAGF;EACC;EACA;;;AAGD;EACC;EACA;AAAqB;EACrB;;;AAGD;EACC;AAAW;;;AAGZ;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;AAAwB;;;AAGzB;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;AAA0B;EAC1B;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/HD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"merged.css"}
\ No newline at end of file
diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css
new file mode 100644
index 00000000000..9cdbad85156
--- /dev/null
+++ b/apps/files/css/mobile.css
@@ -0,0 +1,112 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/* 938 = table min-width(688) + app-navigation width: 250\
+	$breakpoint-mobile +1 = size where app-navigation is hidden +1
+	688 = table min-width */
+@media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px) {
+  .app-files #app-content.dir-drop {
+    background-color: rgb(255, 255, 255) !important;
+  }
+
+  table th#headerSize,
+table td.filesize,
+table th#headerDate,
+table td.date {
+    display: none;
+  }
+
+  /* remove padding to let border bottom fill the whole width*/
+  table td {
+    padding: 0;
+  }
+
+  /* remove shift for multiselect bar to account for missing navigation */
+  table.multiselect thead {
+    padding-left: 0;
+  }
+
+  #fileList a.action.action-menu img {
+    padding-left: 0;
+  }
+
+  #fileList .fileActionsMenu {
+    margin-right: 6px;
+  }
+
+  /* hide text of the share action on mobile */
+  /* .hidden-visually for accessbility */
+  #fileList a.action-share span:not(.icon):not(.avatar) {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  /* proper notification area for multi line messages */
+  #notification-container {
+    display: flex;
+  }
+
+  /* shorten elements for mobile */
+  #uploadprogressbar, #uploadprogressbar .label.inner {
+    width: 50px;
+  }
+
+  /* hide desktop-only parts */
+  #uploadprogressbar .desktop {
+    display: none !important;
+  }
+
+  #uploadprogressbar .mobile {
+    display: block !important;
+  }
+
+  /* ensure that it is visible over #app-content */
+  table.dragshadow {
+    z-index: 1000;
+  }
+}
+@media only screen and (max-width: 480px) {
+  /* Only show icons */
+  table th .selectedActions {
+    float: right;
+  }
+
+  table th .selectedActions > a span:not(.icon) {
+    display: none;
+  }
+
+  /* Increase touch area for the icons */
+  table th .selectedActions a {
+    padding: 17px 14px;
+  }
+
+  /* Remove the margin to reduce the overlap between the name and the icons */
+  table.multiselect th .columntitle.name {
+    margin-left: 0;
+  }
+}
+
+/*# sourceMappingURL=mobile.css.map */
diff --git a/apps/files/css/mobile.css.map b/apps/files/css/mobile.css.map
new file mode 100644
index 00000000000..83b1e827b33
--- /dev/null
+++ b/apps/files/css/mobile.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAAA;AAAA;AAIA;EAEA;IACC;;;EAGD;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;;;EAGD;IACC;;;EAGD;IACC;;;AAED;AACA;EACA;IACC;IACA;IACA;IACA;IACA;IACA;;;AAID;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAID;AACC;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC","file":"mobile.css"}
\ No newline at end of file
diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css
new file mode 100644
index 00000000000..dc90f5a793e
--- /dev/null
+++ b/apps/files/css/upload.css
@@ -0,0 +1,264 @@
+#upload {
+  box-sizing: border-box;
+  height: 36px;
+  width: 39px;
+  padding: 0 !important;
+  /* override default control bar button padding */
+  margin-left: 3px;
+  overflow: hidden;
+  vertical-align: top;
+  position: relative;
+  z-index: -20;
+}
+
+#upload .icon-upload {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 44px;
+  width: 44px;
+  margin: -5px -3px;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0.65;
+}
+
+.file_upload_target {
+  display: none;
+}
+
+.file_upload_form {
+  display: inline;
+  float: left;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  overflow: visible;
+}
+
+#uploadprogresswrapper, #uploadprogresswrapper * {
+  box-sizing: border-box;
+}
+
+#uploadprogresswrapper {
+  display: inline-block;
+  vertical-align: top;
+  height: 36px;
+  margin-left: 3px;
+}
+
+#uploadprogresswrapper > input[type=button] {
+  height: 36px;
+  margin-left: 3px;
+}
+
+#uploadprogressbar {
+  border-color: var(--color-border-dark);
+  border-radius: 18px 0 0 18px;
+  border-right: 0;
+  position: relative;
+  float: left;
+  width: 200px;
+  height: 36px;
+  display: inline-block;
+  text-align: center;
+}
+#uploadprogressbar .ui-progressbar-value {
+  margin: 0;
+}
+
+#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
+  height: calc(100% + 2px);
+  top: -1px;
+  left: -1px;
+  position: absolute;
+  overflow: hidden;
+  background-color: var(--color-primary);
+}
+
+#uploadprogressbar .label {
+  top: 8px;
+  opacity: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+#uploadprogressbar .label.inner {
+  color: var(--color-primary-text);
+  position: absolute;
+  display: block;
+  width: 200px;
+}
+
+#uploadprogressbar .label.outer {
+  position: relative;
+  color: var(--color-main-text);
+}
+
+#uploadprogressbar .desktop {
+  display: block;
+}
+
+#uploadprogressbar .mobile {
+  display: none;
+}
+
+#uploadprogressbar + .stop {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.oc-dialog .fileexists {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-bottom: 30px;
+}
+
+.oc-dialog .fileexists .conflict .filename,
+.oc-dialog .fileexists .conflict .mtime,
+.oc-dialog .fileexists .conflict .size {
+  -webkit-touch-callout: initial;
+  -webkit-user-select: initial;
+  -khtml-user-select: initial;
+  -moz-user-select: initial;
+  -ms-user-select: initial;
+  user-select: initial;
+}
+
+.oc-dialog .fileexists .conflict .message {
+  color: #e9322d;
+}
+
+.oc-dialog .fileexists table {
+  width: 100%;
+}
+
+.oc-dialog .fileexists th {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.oc-dialog .fileexists th input[type=checkbox] {
+  margin-right: 3px;
+}
+
+.oc-dialog .fileexists th:first-child {
+  width: 225px;
+}
+
+.oc-dialog .fileexists th label {
+  font-weight: normal;
+  color: var(--color-main-text);
+}
+
+.oc-dialog .fileexists th .count {
+  margin-left: 3px;
+}
+
+.oc-dialog .fileexists .conflicts .template {
+  display: none;
+}
+
+.oc-dialog .fileexists .conflict {
+  width: 100%;
+  height: 85px;
+}
+
+.oc-dialog .fileexists .conflict .filename {
+  color: #777;
+  word-break: break-all;
+  clear: left;
+}
+
+.oc-dialog .fileexists .icon {
+  width: 64px;
+  height: 64px;
+  margin: 0px 5px 5px 5px;
+  background-repeat: no-repeat;
+  background-size: 64px 64px;
+  float: left;
+}
+
+.oc-dialog .fileexists .original,
+.oc-dialog .fileexists .replacement {
+  float: left;
+  width: 225px;
+}
+
+.oc-dialog .fileexists .conflicts {
+  overflow-y: auto;
+  max-height: 225px;
+}
+
+.oc-dialog .fileexists .conflict input[type=checkbox] {
+  float: left;
+}
+
+.oc-dialog .fileexists #allfileslabel {
+  float: right;
+}
+
+.oc-dialog .fileexists #allfiles {
+  vertical-align: bottom;
+  position: relative;
+  top: -3px;
+}
+
+.oc-dialog .fileexists #allfiles + span {
+  vertical-align: bottom;
+}
+
+.oc-dialog .oc-dialog-buttonrow {
+  width: 100%;
+  text-align: right;
+}
+.oc-dialog .oc-dialog-buttonrow .cancel {
+  float: left;
+}
+
+.highlightUploaded {
+  -webkit-animation: highlightAnimation 2s 1;
+  -moz-animation: highlightAnimation 2s 1;
+  -o-animation: highlightAnimation 2s 1;
+  animation: highlightAnimation 2s 1;
+}
+
+@-webkit-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@-moz-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@-o-keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+@keyframes highlightAnimation {
+  0% {
+    background-color: rgb(255, 255, 140);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+
+/*# sourceMappingURL=upload.css.map */
diff --git a/apps/files/css/upload.css.map b/apps/files/css/upload.css.map
new file mode 100644
index 00000000000..718462f2607
--- /dev/null
+++ b/apps/files/css/upload.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["upload.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;AAAuB;EACvB;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EAAsB;;;AACtB;EAAoB;EAAgB;EAAY;EAAU;EAAW;EAAgB;;;AAErF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO","file":"upload.css"}
\ No newline at end of file
diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
new file mode 100644
index 00000000000..84e382ceb89
--- /dev/null
+++ b/apps/files_external/css/settings.css
@@ -0,0 +1,177 @@
+#files_external {
+  margin-bottom: 0px;
+}
+
+#externalStorage {
+  margin: 15px 0 20px 0;
+}
+#externalStorage tr.externalStorageLoading > td {
+  text-align: center;
+}
+
+#externalStorage td > input, #externalStorage td > select {
+  width: 100%;
+}
+
+#externalStorage td.status {
+  /* overwrite conflicting core styles */
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#externalStorage td.status > span {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  vertical-align: text-bottom;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+#externalStorage td.mountPoint, #externalStorage td.backend, #externalStorage td.authentication, #externalStorage td.configuration {
+  min-width: 160px;
+  width: 15%;
+}
+
+#externalStorage td > img {
+  padding-top: 7px;
+  opacity: 0.5;
+}
+
+#externalStorage td > img:hover {
+  padding-top: 7px;
+  cursor: pointer;
+  opacity: 1;
+}
+
+#addMountPoint > td {
+  border: none;
+}
+
+#addMountPoint > td.applicable {
+  visibility: hidden;
+}
+
+#addMountPoint > td.hidden {
+  visibility: hidden;
+}
+
+#externalStorage td {
+  height: 50px;
+}
+#externalStorage td.mountOptionsToggle, #externalStorage td.remove, #externalStorage td.save {
+  position: relative;
+  padding: 0 !important;
+  width: 44px;
+}
+#externalStorage td.mountOptionsToggle [class^=icon-],
+#externalStorage td.mountOptionsToggle [class*=" icon-"], #externalStorage td.remove [class^=icon-],
+#externalStorage td.remove [class*=" icon-"], #externalStorage td.save [class^=icon-],
+#externalStorage td.save [class*=" icon-"] {
+  opacity: 0.5;
+  padding: 14px;
+  vertical-align: text-bottom;
+  cursor: pointer;
+}
+#externalStorage td.mountOptionsToggle [class^=icon-]:hover,
+#externalStorage td.mountOptionsToggle [class*=" icon-"]:hover, #externalStorage td.remove [class^=icon-]:hover,
+#externalStorage td.remove [class*=" icon-"]:hover, #externalStorage td.save [class^=icon-]:hover,
+#externalStorage td.save [class*=" icon-"]:hover {
+  opacity: 1;
+}
+
+#selectBackend {
+  margin-left: -10px;
+  width: 150px;
+}
+
+#externalStorage td.configuration,
+#externalStorage td.backend {
+  white-space: normal;
+}
+
+#externalStorage td.configuration > * {
+  white-space: nowrap;
+}
+
+#externalStorage td.configuration input.added {
+  margin-right: 6px;
+}
+
+#externalStorage label > input[type=checkbox] {
+  margin-right: 3px;
+}
+
+#externalStorage td.configuration label {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+#externalStorage td.configuration input.disabled-success {
+  background-color: rgba(134, 255, 110, 0.9);
+}
+
+#externalStorage td.applicable div.chzn-container {
+  position: relative;
+  top: 3px;
+}
+
+#externalStorage .select2-container.applicableUsers {
+  width: 100% !important;
+}
+
+#userMountingBackends {
+  padding-left: 25px;
+}
+
+.files-external-select2 .select2-results .select2-result-label {
+  height: 32px;
+  padding: 3px;
+}
+
+.files-external-select2 .select2-results .select2-result-label > span {
+  display: block;
+  position: relative;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv {
+  display: inline-block;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
+  position: absolute;
+  top: 5px;
+  margin-left: 10px;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type=group] + span {
+  vertical-align: top;
+  top: 6px;
+  position: absolute;
+  max-width: 80%;
+  left: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#externalStorage .select2-container .select2-search-choice {
+  display: flex;
+}
+#externalStorage .select2-container .select2-search-choice .select2-search-choice-close {
+  display: block;
+  left: auto;
+  position: relative;
+  width: 20px;
+}
+
+#externalStorage .mountOptionsToggle .dropdown {
+  width: auto;
+}
+
+.nav-icon-external-storage {
+  background-image: var(--icon-external-dark);
+}
+
+/*# sourceMappingURL=settings.css.map */
diff --git a/apps/files_external/css/settings.css.map b/apps/files_external/css/settings.css.map
new file mode 100644
index 00000000000..d084c036f9a
--- /dev/null
+++ b/apps/files_external/css/settings.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;AAEA;EACC;;;AAKD;EACC;;;AAIF;AACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACC;EACA;;;AAGF;EAA0B;EAAiB;;;AAC3C;EAAgC;EAAiB;EAAgB;;;AACjE;EAAoB;;;AACpB;EAA+B;;;AAC/B;EAA2B;;;AAE3B;EACC;;AACA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;;;AAMJ;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;;;AAIF;EACC;;;AAGD;EACC","file":"settings.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/icons.css b/apps/files_sharing/css/icons.css
new file mode 100644
index 00000000000..ff5c5844df6
--- /dev/null
+++ b/apps/files_sharing/css/icons.css
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+.icon-room {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-app-dark);
+}
+
+.icon-circle {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-circles-dark);
+}
+
+.icon-guests {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-app-dark);
+}
+
+/*# sourceMappingURL=icons.css.map */
diff --git a/apps/files_sharing/css/icons.css.map b/apps/files_sharing/css/icons.css.map
new file mode 100644
index 00000000000..a2766ac03f7
--- /dev/null
+++ b/apps/files_sharing/css/icons.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","icons.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADzBA;ACsCC;EAEA;;;ADrCD;ACmCC;EAEA;;;ADlCD;ACgCC;EAEA","file":"icons.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
new file mode 100644
index 00000000000..63acecb90c8
--- /dev/null
+++ b/apps/files_sharing/css/mobile.css
@@ -0,0 +1,86 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+@media only screen and (max-width: 1024px) {
+  /* make header scroll up for single shares, more view of content on small screens */
+  #header.share-file {
+    position: absolute !important;
+  }
+
+  /* hide size and date columns */
+  table th#headerSize,
+table td.filesize,
+table th#headerDate,
+table td.date {
+    display: none;
+  }
+
+  /* restrict length of displayed filename to prevent overflow */
+  table td.filename .nametext {
+    max-width: 75% !important;
+  }
+
+  /* on mobile, show single shared image at full width without margin */
+  #imgframe {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 35px;
+  }
+
+  /* some margin for the file type icon */
+  #imgframe .publicpreview {
+    margin-top: 32px;
+  }
+
+  /* some padding for better clickability */
+  #fileList a.action img {
+    padding: 0 6px 0 12px;
+  }
+
+  /* hide text of the actions on mobile */
+  #fileList a.action:not(.menuitem) span {
+    display: none;
+  }
+
+  /* ellipsis on file names */
+  .nametext {
+    width: 60%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #header .menutoggle {
+    padding-right: 14px;
+    background-position: center;
+  }
+
+  .note {
+    padding: 0 20px;
+  }
+
+  #emptycontent {
+    margin-top: 10vh;
+  }
+}
+
+/*# sourceMappingURL=mobile.css.map */
diff --git a/apps/files_sharing/css/mobile.css.map b/apps/files_sharing/css/mobile.css.map
new file mode 100644
index 00000000000..36f4289e94a
--- /dev/null
+++ b/apps/files_sharing/css/mobile.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"mobile.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
new file mode 100644
index 00000000000..21dd876905c
--- /dev/null
+++ b/apps/files_sharing/css/public.css
@@ -0,0 +1,237 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+#preview {
+  text-align: center;
+}
+
+#preview .notCreatable {
+  display: none;
+}
+
+#noPreview {
+  display: none;
+  padding-top: 80px;
+}
+
+#imgframe {
+  height: 75%;
+  padding-bottom: 32px;
+  padding-top: 32px;
+  width: 80%;
+  margin: 0 auto;
+}
+
+#imgframe img {
+  max-height: 100% !important;
+  max-width: 100% !important;
+}
+
+#imgframe audio {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#imgframe .text-preview {
+  display: inline-block;
+  position: relative;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-y: hidden;
+  height: auto;
+  min-height: 200px;
+  max-height: 800px;
+}
+
+#imgframe .ellipsis {
+  font-size: 1.2em;
+}
+
+/* fix multiselect bar offset on shared page */
+thead {
+  left: 0 !important;
+}
+
+#data-upload-form {
+  position: relative;
+  right: 0;
+  height: 32px;
+  overflow: hidden;
+  padding: 0;
+  float: right;
+  display: inline;
+  margin: 0;
+}
+
+/* keep long file names in one line to not overflow download button on mobile */
+.directDownload #downloadFile {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+  display: inline-block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 16px;
+}
+
+.download-size {
+  opacity: 0.5;
+}
+
+/* header buttons */
+#details {
+  display: inline-flex;
+}
+
+#details button,
+#details input,
+#details .button {
+  margin: 0 5px;
+  line-height: normal;
+}
+
+#details button:hover,
+#details input:hover,
+#details .button:hover {
+  /* No  */
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+#public-upload .avatardiv {
+  margin: 0 auto;
+}
+
+#emptycontent.has-note {
+  margin-top: 5vh;
+}
+
+#public-upload #emptycontent h2 {
+  margin: 10px 0 5px 0;
+}
+
+#public-upload #emptycontent h2 + p {
+  margin-bottom: 30px;
+}
+
+#public-upload #emptycontent .icon-folder {
+  height: 16px;
+  width: 16px;
+  background-size: 16px;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-bottom: 0;
+  margin-right: 5px;
+  opacity: 1;
+}
+
+#public-upload #emptycontent #displayavatar .icon-folder {
+  height: 48px;
+  width: 48px;
+  background-size: 48px;
+}
+
+#public-upload #emptycontent .button {
+  display: inline-block;
+  height: auto;
+  width: auto;
+  background-size: 16px;
+  background-position: 16px;
+  opacity: 0.7;
+  font-size: 20px;
+  line-height: initial;
+  margin: 20px;
+  padding: 10px 20px;
+  padding-left: 42px;
+}
+
+#public-upload #emptycontent ul {
+  width: 230px;
+  margin: 5px auto 5vh;
+  text-align: left;
+}
+
+#public-upload #emptycontent li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 7px 0;
+}
+
+#public-upload #emptycontent li img {
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+}
+
+#drop-upload-progress-indicator span.icon-loading-small {
+  padding-left: 18px;
+  margin-right: 7px;
+}
+
+#drop-uploaded-files li #drop-upload-name {
+  float: left;
+  max-width: 180px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#drop-uploaded-files li #drop-upload-status {
+  float: right;
+}
+
+.disclaimer,
+.note {
+  margin: 0 auto 30px;
+  max-width: 400px;
+  text-align: left;
+}
+
+#note-content {
+  padding: 5px;
+  display: inline-block;
+  width: 350px;
+}
+#note-content .content {
+  overflow: auto;
+  max-height: 200px;
+}
+
+#show-terms-dialog {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+@media only screen and (min-width: 1025px) {
+  #body-public .header-right #header-actions-menu > ul > li#download {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  #body-public .header-right #header-primary-action {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=public.css.map */
diff --git a/apps/files_sharing/css/public.css.map b/apps/files_sharing/css/public.css.map
new file mode 100644
index 00000000000..c100a63b6d8
--- /dev/null
+++ b/apps/files_sharing/css/public.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC","file":"public.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/publicView.css b/apps/files_sharing/css/publicView.css
new file mode 100644
index 00000000000..c10620e59bf
--- /dev/null
+++ b/apps/files_sharing/css/publicView.css
@@ -0,0 +1,320 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+#preview {
+  text-align: center;
+}
+
+#preview .notCreatable {
+  display: none;
+}
+
+#noPreview {
+  display: none;
+  padding-top: 80px;
+}
+
+#imgframe {
+  height: 75%;
+  padding-bottom: 32px;
+  padding-top: 32px;
+  width: 80%;
+  margin: 0 auto;
+}
+
+#imgframe img {
+  max-height: 100% !important;
+  max-width: 100% !important;
+}
+
+#imgframe audio {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#imgframe .text-preview {
+  display: inline-block;
+  position: relative;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-y: hidden;
+  height: auto;
+  min-height: 200px;
+  max-height: 800px;
+}
+
+#imgframe .ellipsis {
+  font-size: 1.2em;
+}
+
+/* fix multiselect bar offset on shared page */
+thead {
+  left: 0 !important;
+}
+
+#data-upload-form {
+  position: relative;
+  right: 0;
+  height: 32px;
+  overflow: hidden;
+  padding: 0;
+  float: right;
+  display: inline;
+  margin: 0;
+}
+
+/* keep long file names in one line to not overflow download button on mobile */
+.directDownload #downloadFile {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+  display: inline-block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 16px;
+}
+
+.download-size {
+  opacity: 0.5;
+}
+
+/* header buttons */
+#details {
+  display: inline-flex;
+}
+
+#details button,
+#details input,
+#details .button {
+  margin: 0 5px;
+  line-height: normal;
+}
+
+#details button:hover,
+#details input:hover,
+#details .button:hover {
+  /* No  */
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+#public-upload .avatardiv {
+  margin: 0 auto;
+}
+
+#emptycontent.has-note {
+  margin-top: 5vh;
+}
+
+#public-upload #emptycontent h2 {
+  margin: 10px 0 5px 0;
+}
+
+#public-upload #emptycontent h2 + p {
+  margin-bottom: 30px;
+}
+
+#public-upload #emptycontent .icon-folder {
+  height: 16px;
+  width: 16px;
+  background-size: 16px;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-bottom: 0;
+  margin-right: 5px;
+  opacity: 1;
+}
+
+#public-upload #emptycontent #displayavatar .icon-folder {
+  height: 48px;
+  width: 48px;
+  background-size: 48px;
+}
+
+#public-upload #emptycontent .button {
+  display: inline-block;
+  height: auto;
+  width: auto;
+  background-size: 16px;
+  background-position: 16px;
+  opacity: 0.7;
+  font-size: 20px;
+  line-height: initial;
+  margin: 20px;
+  padding: 10px 20px;
+  padding-left: 42px;
+}
+
+#public-upload #emptycontent ul {
+  width: 230px;
+  margin: 5px auto 5vh;
+  text-align: left;
+}
+
+#public-upload #emptycontent li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 7px 0;
+}
+
+#public-upload #emptycontent li img {
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+}
+
+#drop-upload-progress-indicator span.icon-loading-small {
+  padding-left: 18px;
+  margin-right: 7px;
+}
+
+#drop-uploaded-files li #drop-upload-name {
+  float: left;
+  max-width: 180px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#drop-uploaded-files li #drop-upload-status {
+  float: right;
+}
+
+.disclaimer,
+.note {
+  margin: 0 auto 30px;
+  max-width: 400px;
+  text-align: left;
+}
+
+#note-content {
+  padding: 5px;
+  display: inline-block;
+  width: 350px;
+}
+#note-content .content {
+  overflow: auto;
+  max-height: 200px;
+}
+
+#show-terms-dialog {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+@media only screen and (min-width: 1025px) {
+  #body-public .header-right #header-actions-menu > ul > li#download {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  #body-public .header-right #header-primary-action {
+    display: none;
+  }
+}
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+@media only screen and (max-width: 1024px) {
+  /* make header scroll up for single shares, more view of content on small screens */
+  #header.share-file {
+    position: absolute !important;
+  }
+
+  /* hide size and date columns */
+  table th#headerSize,
+table td.filesize,
+table th#headerDate,
+table td.date {
+    display: none;
+  }
+
+  /* restrict length of displayed filename to prevent overflow */
+  table td.filename .nametext {
+    max-width: 75% !important;
+  }
+
+  /* on mobile, show single shared image at full width without margin */
+  #imgframe {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 35px;
+  }
+
+  /* some margin for the file type icon */
+  #imgframe .publicpreview {
+    margin-top: 32px;
+  }
+
+  /* some padding for better clickability */
+  #fileList a.action img {
+    padding: 0 6px 0 12px;
+  }
+
+  /* hide text of the actions on mobile */
+  #fileList a.action:not(.menuitem) span {
+    display: none;
+  }
+
+  /* ellipsis on file names */
+  .nametext {
+    width: 60%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #header .menutoggle {
+    padding-right: 14px;
+    background-position: center;
+  }
+
+  .note {
+    padding: 0 20px;
+  }
+
+  #emptycontent {
+    margin-top: 10vh;
+  }
+}
+
+/*# sourceMappingURL=publicView.css.map */
diff --git a/apps/files_sharing/css/publicView.css.map b/apps/files_sharing/css/publicView.css.map
new file mode 100644
index 00000000000..e49de3e17ba
--- /dev/null
+++ b/apps/files_sharing/css/publicView.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC;;;ADjOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AEEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"publicView.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index 02c1f27f173..9cb40697636 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -528,7 +528,7 @@ export default {
 	.multiselect__option {
 		span[lookup] {
 			.avatardiv {
-				background-image: var(--icon-search-fff);
+				background-image: var(--icon-search-white);
 				background-repeat: no-repeat;
 				background-position: center;
 				background-color: var(--color-text-maxcontrast) !important;
diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css
new file mode 100644
index 00000000000..32bd6599f62
--- /dev/null
+++ b/apps/settings/css/settings.css
@@ -0,0 +1,1598 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
+ This file is licensed under the Affero General Public License version 3 or later.
+ See the COPYING-README file. */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+input#openid, input#webdav {
+  width: 20em;
+}
+
+/* PERSONAL */
+.clear {
+  clear: both;
+}
+
+/* icons for sidebar */
+.nav-icon-personal-settings {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-personal-dark);
+}
+
+.nav-icon-security {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-toggle-filelist-dark);
+}
+
+.nav-icon-clientsbox {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-change-dark);
+}
+
+.nav-icon-federated-cloud {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-share-dark);
+}
+
+.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-password-dark);
+}
+
+#avatarform .avatardiv {
+  margin: 10px auto;
+}
+#avatarform .warning {
+  width: 100%;
+}
+#avatarform .jcrop-keymgr {
+  display: none !important;
+}
+
+#displayavatar {
+  text-align: center;
+}
+
+#uploadavatarbutton, #selectavatar, #removeavatar {
+  padding: 21px;
+}
+
+#selectavatar, #removeavatar {
+  vertical-align: top;
+}
+
+.jcrop-holder {
+  z-index: 500;
+}
+
+#cropper {
+  float: left;
+  z-index: 500;
+  /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  top: 45px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 45px);
+}
+#cropper .inner-container {
+  z-index: 2001;
+  /* above the top bar if needed */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  color: #333;
+  border-radius: var(--border-radius-large);
+  box-shadow: 0 0 10px var(--color-box-shadow);
+  padding: 15px;
+}
+#cropper .inner-container .jcrop-holder,
+#cropper .inner-container .jcrop-holder img,
+#cropper .inner-container img.jcrop-preview {
+  border-radius: var(--border-radius);
+}
+#cropper .inner-container .button {
+  margin-top: 15px;
+}
+#cropper .inner-container .primary {
+  float: right;
+}
+
+#personal-settings-avatar-container {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 2fr 1fr 2fr;
+  vertical-align: top;
+}
+
+.profile-settings-container {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr 1fr 2fr;
+}
+.profile-settings-container #locale h3 {
+  height: 32px;
+}
+
+.personal-show-container {
+  width: 100%;
+}
+
+.personal-settings-setting-box .section {
+  padding: 10px 30px;
+}
+.personal-settings-setting-box .section h3 {
+  margin-bottom: 0;
+}
+.personal-settings-setting-box .section input[type=text], .personal-settings-setting-box .section input[type=email], .personal-settings-setting-box .section input[type=tel], .personal-settings-setting-box .section input[type=url] {
+  width: 100%;
+}
+
+select#timezone, select#languageinput, select#localeinput {
+  width: 100%;
+}
+
+#personal-settings {
+  display: grid;
+  padding: 20px;
+  max-width: 1500px;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+#personal-settings .section {
+  padding: 10px 10px;
+  border: 0;
+}
+#personal-settings .section h2 {
+  margin-bottom: 12px;
+}
+#personal-settings .personal-info {
+  margin-right: 10%;
+  margin-bottom: 12px;
+  margin-top: 12px;
+}
+#personal-settings .personal-info[class^=icon-], #personal-settings .personal-info[class*=" icon-"] {
+  background-position: 0px 2px;
+  padding-left: 30px;
+  opacity: 0.7;
+}
+
+.development-notice {
+  text-align: center;
+}
+
+.link-button {
+  display: inline-block;
+  margin: 16px;
+  padding: 14px 20px;
+  background-color: var(--color-primary);
+  color: #fff;
+  border-radius: var(--border-radius-pill);
+  border: 1px solid var(--color-primary);
+  box-shadow: 0 2px 9px var(--color-box-shadow);
+}
+.link-button:active, .link-button:hover, .link-button:focus {
+  color: var(--color-primary);
+  background-color: var(--color-primary-text);
+  border-color: var(--color-primary) !important;
+}
+.link-button.icon-file {
+  padding-left: 48px;
+  background-position: 24px;
+}
+
+@media (min-width: 1200px) and (max-width: 1400px) {
+  #personal-settings {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+  }
+  #personal-settings #personal-settings-avatar-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+  #personal-settings .personal-settings-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+  }
+  #personal-settings .profile-settings-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-column: 2;
+  }
+}
+@media (max-width: 1200px) {
+  #personal-settings {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  #personal-settings #personal-settings-avatar-container {
+    grid-template-rows: 1fr;
+  }
+  #personal-settings .personal-settings-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+  }
+  #personal-settings .profile-settings-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+@media (max-width: 560px) {
+  #personal-settings {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  #personal-settings #personal-settings-avatar-container {
+    grid-template-rows: 1fr;
+  }
+  #personal-settings .personal-settings-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+  #personal-settings .profile-settings-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+.personal-settings-container {
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+}
+.personal-settings-container:after {
+  clear: both;
+}
+.personal-settings-container > div h3 {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  width: 100%;
+}
+.personal-settings-container > div h3 > label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.personal-settings-container > div > form span[class^=icon-checkmark], .personal-settings-container > div > form span[class^=icon-error] {
+  position: relative;
+  right: 8px;
+  top: -28px;
+  pointer-events: none;
+  float: right;
+}
+.personal-settings-container .verify {
+  position: relative;
+  left: 100%;
+  top: 0;
+  height: 0;
+}
+.personal-settings-container .verify img {
+  padding: 12px 7px 6px;
+}
+.personal-settings-container .verify-action {
+  cursor: pointer;
+}
+.personal-settings-container input:disabled {
+  background-color: white;
+  color: black;
+  border: none;
+  opacity: 100;
+}
+
+#body-settings #quota {
+  cursor: default;
+  position: relative;
+}
+#body-settings #quota progress {
+  height: 6px;
+}
+#body-settings #quota progress::-moz-progress-bar {
+  border-radius: 3px 0 0 3px;
+}
+#body-settings #quota progress::-webkit-progress-value {
+  border-radius: 3px 0 0 3px;
+}
+#body-settings #quota div {
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+/* verify accounts */
+/* only show pointer cursor when popup will be there */
+.verification-dialog {
+  display: none;
+  right: -9px;
+  top: 40px;
+  width: 275px;
+}
+.verification-dialog p {
+  padding: 10px;
+}
+.verification-dialog .verificationCode {
+  font-family: monospace;
+  display: block;
+  overflow-wrap: break-word;
+}
+
+.federation-menu {
+  position: relative;
+  cursor: pointer;
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+  margin: -12px 0 0 8px;
+  background: none;
+  border: none;
+}
+.federation-menu:hover, .federation-menu:focus {
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius-pill);
+}
+.federation-menu:hover .icon-federation-menu, .federation-menu:focus .icon-federation-menu {
+  opacity: 0.8;
+}
+.federation-menu .icon-federation-menu {
+  padding-left: 16px;
+  background-size: 16px;
+  background-position: left center;
+  opacity: 0.3;
+  cursor: inherit;
+}
+.federation-menu .icon-federation-menu .icon-triangle-s {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: inherit;
+}
+.federation-menu .federationScopeMenu {
+  top: 44px;
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem {
+  font-size: 12.8px;
+  line-height: 1.6em;
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem .menuitem-text-detail {
+  opacity: 0.75;
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem.active {
+  box-shadow: inset 2px 0 var(--color-primary);
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem.active .menuitem-text {
+  font-weight: bold;
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem.disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.federation-menu .federationScopeMenu.popovermenu .menuitem.disabled * {
+  cursor: default;
+}
+
+#groups-groups {
+  padding-top: 5px;
+}
+
+.clientsbox img {
+  height: 60px;
+}
+
+#sslCertificate tr.expired {
+  background-color: rgba(255, 0, 0, 0.5);
+}
+#sslCertificate td {
+  padding: 5px;
+}
+
+#displaynameerror,
+#displaynamechanged {
+  display: none;
+}
+
+input#identity {
+  width: 20em;
+}
+
+#showWizard {
+  display: inline-block;
+}
+
+.msg.success {
+  color: #fff;
+  background-color: #47a447;
+  padding: 3px;
+}
+.msg.error {
+  color: #fff;
+  background-color: #d2322d;
+  padding: 3px;
+}
+
+table.nostyle label {
+  margin-right: 2em;
+}
+table.nostyle td {
+  padding: 0.2em 0;
+}
+
+#security-password #passwordform {
+  display: flex;
+  flex-wrap: wrap;
+}
+#security-password #passwordform #pass1, #security-password #passwordform .personal-show-container, #security-password #passwordform #passwordbutton {
+  flex-shrink: 1;
+  width: 200px;
+  min-width: 150px;
+}
+#security-password #passwordform #pass2 {
+  width: 100%;
+}
+#security-password #passwordform .password-state {
+  display: inline-block;
+}
+#security-password #passwordform .strengthify-wrapper {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  border-radius: 0 0 2px 2px;
+  margin-top: -6px;
+  overflow: hidden;
+  height: 3px;
+}
+
+/* Two-Factor Authentication (2FA) */
+#two-factor-auth h3 {
+  margin-top: 24px;
+}
+#two-factor-auth li > div {
+  margin-left: 20px;
+}
+#two-factor-auth .two-factor-provider-settings-icon {
+  width: 16px;
+  height: 16px;
+  vertical-align: sub;
+}
+
+.social-button {
+  padding-left: 0 !important;
+  margin-left: -10px;
+}
+.social-button img {
+  padding: 10px;
+}
+
+/* USERS */
+.isgroup .groupname {
+  width: 85%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.isgroup.active .groupname {
+  width: 65%;
+}
+
+li.active .delete,
+li.active .rename {
+  display: block;
+}
+
+.app-navigation-entry-utils .delete,
+.app-navigation-entry-utils .rename {
+  display: none;
+}
+
+#usersearchform {
+  position: absolute;
+  top: 2px;
+  right: 0;
+}
+#usersearchform input {
+  width: 150px;
+}
+#usersearchform label {
+  font-weight: bold;
+}
+
+/* display table at full width */
+table.grid {
+  width: 100%;
+}
+table.grid th {
+  height: 2em;
+  color: #999;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 0.5em;
+  padding-left: 0.8em;
+  text-align: left;
+  font-weight: normal;
+}
+table.grid td {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 0.5em;
+  padding-left: 0.8em;
+  text-align: left;
+  font-weight: normal;
+}
+
+td.name, th.name {
+  padding-left: 0.8em;
+  min-width: 5em;
+  max-width: 12em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+td.password, th.password {
+  padding-left: 0.8em;
+}
+td.password > img, th.password > img {
+  visibility: hidden;
+}
+td.displayName > img, th.displayName > img {
+  visibility: hidden;
+}
+td.password, td.mailAddress, th.password, th.mailAddress {
+  min-width: 5em;
+  max-width: 12em;
+  cursor: pointer;
+}
+td.password span, td.mailAddress span, th.password span, th.mailAddress span {
+  width: 90%;
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+td.mailAddress, th.mailAddress {
+  cursor: pointer;
+}
+td.password > span, th.password > span {
+  margin-right: 1.2em;
+  color: #C7C7C7;
+}
+
+span.usersLastLoginTooltip {
+  white-space: nowrap;
+}
+
+/* APPS */
+#app-content > svg.app-filter {
+  float: left;
+  height: 0;
+  width: 0;
+}
+
+#app-category-app-bundles {
+  margin-bottom: 20px;
+}
+
+.appinfo {
+  margin: 1em 40px;
+}
+
+#app-navigation {
+  /* Navigation icons */
+}
+#app-navigation img {
+  margin-bottom: -3px;
+  margin-right: 6px;
+  width: 16px;
+}
+#app-navigation li span.no-icon {
+  padding-left: 32px;
+}
+#app-navigation ul li.active > span.utils .delete, #app-navigation ul li.active > span.utils .rename {
+  display: block;
+}
+#app-navigation .appwarning {
+  background: #fcc;
+}
+#app-navigation.appwarning:hover {
+  background: #fbb;
+}
+#app-navigation .app-external {
+  color: var(--color-text-maxcontrast);
+}
+
+span.version {
+  margin-left: 1em;
+  margin-right: 1em;
+  color: var(--color-text-maxcontrast);
+}
+
+.app-version {
+  color: var(--color-text-maxcontrast);
+}
+
+.app-level span {
+  color: var(--color-text-maxcontrast);
+  background-color: transparent;
+  border: 1px solid var(--color-text-maxcontrast);
+  border-radius: var(--border-radius);
+  padding: 3px 6px;
+}
+.app-level a {
+  padding: 10px;
+  margin: -6px;
+  white-space: nowrap;
+}
+.app-level .official {
+  background-position: left center;
+  background-position: 5px center;
+  padding-left: 25px;
+}
+.app-level .supported {
+  border-color: var(--color-success);
+  background-position: left center;
+  background-position: 5px center;
+  padding-left: 25px;
+  color: var(--color-success);
+}
+
+.app-score {
+  position: relative;
+  top: 4px;
+  opacity: 0.5;
+}
+
+.app-settings-content #searchresults {
+  display: none;
+}
+
+#apps-list.store .section {
+  border: 0;
+}
+#apps-list.store .app-name {
+  display: block;
+  margin: 5px 0;
+}
+#apps-list.store .app-name, #apps-list.store .app-image * {
+  cursor: pointer;
+}
+#apps-list.store .app-summary {
+  opacity: 0.7;
+}
+#apps-list.store .app-image-icon .icon-settings-dark {
+  width: 100%;
+  height: 150px;
+  background-size: 45px;
+  opacity: 0.5;
+}
+#apps-list.store .app-score-image {
+  height: 14px;
+}
+#apps-list.store .actions {
+  margin-top: 10px;
+}
+
+#app-sidebar #app-details-view h2 .icon-settings-dark,
+#app-sidebar #app-details-view h2 svg {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+  opacity: 0.7;
+}
+#app-sidebar #app-details-view .app-level {
+  clear: right;
+  width: 100%;
+}
+#app-sidebar #app-details-view .app-level .supported,
+#app-sidebar #app-details-view .app-level .official {
+  vertical-align: top;
+}
+#app-sidebar #app-details-view .app-level .app-score-image {
+  float: right;
+}
+#app-sidebar #app-details-view .app-author, #app-sidebar #app-details-view .app-licence {
+  color: var(--color-text-maxcontrast);
+}
+#app-sidebar #app-details-view .app-dependencies {
+  margin: 10px 0;
+}
+#app-sidebar #app-details-view .app-description p {
+  margin: 10px 0;
+}
+#app-sidebar #app-details-view .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 14px;
+  opacity: 0.5;
+  z-index: 1;
+  width: 44px;
+  height: 44px;
+}
+#app-sidebar #app-details-view .actions {
+  display: flex;
+  align-items: center;
+}
+#app-sidebar #app-details-view .actions .app-groups {
+  padding: 5px;
+}
+#app-sidebar #app-details-view .appslink {
+  text-decoration: underline;
+  margin-right: 5px;
+}
+#app-sidebar #app-details-view .app-level,
+#app-sidebar #app-details-view .actions,
+#app-sidebar #app-details-view .documentation,
+#app-sidebar #app-details-view .app-dependencies,
+#app-sidebar #app-details-view .app-description {
+  margin: 20px 0;
+}
+
+@media only screen and (min-width: 1601px) {
+  .store .section {
+    width: 25%;
+  }
+
+  .with-app-sidebar .store .section {
+    width: 33%;
+  }
+}
+@media only screen and (max-width: 1600px) {
+  .store .section {
+    width: 25%;
+  }
+
+  .with-app-sidebar .store .section {
+    width: 33%;
+  }
+}
+@media only screen and (max-width: 1400px) {
+  .store .section {
+    width: 33%;
+  }
+
+  .with-app-sidebar .store .section {
+    width: 50%;
+  }
+}
+@media only screen and (max-width: 900px) {
+  .store .section {
+    width: 50%;
+  }
+
+  .with-app-sidebar .store .section {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .store .section {
+    width: 50%;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .store .section {
+    width: 100%;
+  }
+}
+/* hide app version and level on narrower screens */
+@media only screen and (max-width: 900px) {
+  .apps-list.installed .app-version, .apps-list.installed .app-level {
+    display: none !important;
+  }
+}
+@media only screen and (max-width: 500px) {
+  .apps-list.installed .app-groups {
+    display: none !important;
+  }
+}
+#version.section {
+  border-bottom: none;
+}
+
+.section {
+  margin-bottom: 0;
+  /* section divider lines, none needed for last one */
+  /* correctly display help icons next to headings */
+}
+.section:not(:last-child) {
+  border-bottom: 1px solid var(--color-border);
+}
+.section h2 {
+  margin-bottom: 22px;
+}
+.section h2 .icon-info {
+  padding: 6px 20px;
+  vertical-align: text-bottom;
+  display: inline-block;
+}
+
+.followupsection {
+  display: block;
+  padding: 0 30px 30px 30px;
+  color: #555;
+}
+
+.app-image {
+  position: relative;
+  height: 150px;
+  opacity: 1;
+  overflow: hidden;
+}
+
+.app-name, .app-version, .app-score, .app-level {
+  display: inline-block;
+}
+
+.app-description-toggle-show, .app-description-toggle-hide {
+  clear: both;
+  padding: 7px 0;
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.app-description-container {
+  clear: both;
+  position: relative;
+  top: 7px;
+}
+
+.app-description {
+  clear: both;
+}
+
+#app-category-1 {
+  margin-bottom: 18px;
+}
+
+/* capitalize 'Other' category */
+#app-category-925 {
+  text-transform: capitalize;
+}
+
+.app-dependencies {
+  color: #ce3702;
+}
+
+.missing-dependencies {
+  list-style: initial;
+  list-style-type: initial;
+  list-style-position: inside;
+}
+
+.apps-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  /* Bundle header */
+}
+.apps-list .section {
+  cursor: pointer;
+}
+.apps-list .app-list-move {
+  transition: transform 1s;
+}
+.apps-list #app-list-update-all {
+  margin-left: 10px;
+}
+.apps-list .toolbar {
+  height: 60px;
+  padding: 8px;
+  padding-left: 60px;
+  width: 100%;
+  background-color: var(--color-main-background);
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+.apps-list.installed {
+  margin-bottom: 100px;
+}
+.apps-list.installed .apps-list-container {
+  display: table;
+  width: 100%;
+  height: auto;
+  margin-top: 60px;
+}
+.apps-list.installed .section {
+  display: table-row;
+  padding: 0;
+  margin: 0;
+}
+.apps-list.installed .section > * {
+  display: table-cell;
+  height: initial;
+  vertical-align: middle;
+  float: none;
+  border-bottom: 1px solid var(--color-border);
+  padding: 6px;
+  box-sizing: border-box;
+}
+.apps-list.installed .section.selected {
+  background-color: var(--color-background-dark);
+}
+.apps-list.installed .groups-enable {
+  margin-top: 0;
+}
+.apps-list.installed .groups-enable label {
+  margin-right: 3px;
+}
+.apps-list.installed .app-image {
+  width: 44px;
+  height: auto;
+  text-align: right;
+}
+.apps-list.installed .app-image-icon svg,
+.apps-list.installed .app-image-icon .icon-settings-dark {
+  margin-top: 5px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  background-size: cover;
+  display: inline-block;
+}
+.apps-list.installed .actions {
+  text-align: right;
+}
+.apps-list.installed .actions .icon-loading-small {
+  display: inline-block;
+  top: 4px;
+  margin-right: 10px;
+}
+.apps-list:not(.installed) .app-image-icon svg {
+  position: absolute;
+  bottom: 43px;
+  /* position halfway vertically */
+  width: 64px;
+  height: 64px;
+  opacity: 0.1;
+}
+.apps-list.hidden {
+  display: none;
+}
+.apps-list .section {
+  position: relative;
+  flex: 0 0 auto;
+}
+.apps-list .section h2.app-name {
+  display: block;
+  margin: 8px 0;
+}
+.apps-list .section:hover {
+  background-color: var(--color-background-dark);
+}
+.apps-list .app-description p {
+  margin: 10px 0;
+}
+.apps-list .app-description ul {
+  list-style: disc;
+}
+.apps-list .app-description ol {
+  list-style: decimal;
+}
+.apps-list .app-description ol ol, .apps-list .app-description ol ul {
+  padding-left: 15px;
+}
+.apps-list .app-description > ul, .apps-list .app-description > ol {
+  margin-left: 19px;
+}
+.apps-list .app-description ul ol, .apps-list .app-description ul ul {
+  padding-left: 15px;
+}
+.apps-list .apps-header {
+  display: table-row;
+  position: relative;
+}
+.apps-list .apps-header div {
+  display: table-cell;
+  height: 70px;
+}
+.apps-list .apps-header h2 {
+  display: table-cell;
+  position: absolute;
+  padding-left: 6px;
+  padding-top: 15px;
+}
+.apps-list .apps-header h2 .enable {
+  position: relative;
+  top: -1px;
+  margin-left: 12px;
+}
+.apps-list .apps-header h2 + .section {
+  margin-top: 50px;
+}
+
+#apps-list-search .section h2 {
+  margin-bottom: 0;
+}
+
+/* LOG */
+#log {
+  white-space: normal;
+  margin-bottom: 14px;
+}
+
+#lessLog {
+  display: none;
+}
+
+table.grid td.date {
+  white-space: nowrap;
+}
+
+#log-section p {
+  margin-top: 20px;
+}
+
+#security-warning-state-ok span,
+#security-warning-state-warning span,
+#security-warning-state-failure span,
+#security-warning-state-loading span {
+  vertical-align: middle;
+}
+#security-warning-state-ok span.message,
+#security-warning-state-warning span.message,
+#security-warning-state-failure span.message,
+#security-warning-state-loading span.message {
+  padding: 12px;
+}
+#security-warning-state-ok span.icon,
+#security-warning-state-warning span.icon,
+#security-warning-state-failure span.icon,
+#security-warning-state-loading span.icon {
+  width: 32px;
+  height: 32px;
+  background-position: center center;
+  display: inline-block;
+  border-radius: 50%;
+}
+#security-warning-state-ok span.icon-checkmark-white,
+#security-warning-state-warning span.icon-checkmark-white,
+#security-warning-state-failure span.icon-checkmark-white,
+#security-warning-state-loading span.icon-checkmark-white {
+  background-color: var(--color-success);
+}
+#security-warning-state-ok span.icon-error-white,
+#security-warning-state-warning span.icon-error-white,
+#security-warning-state-failure span.icon-error-white,
+#security-warning-state-loading span.icon-error-white {
+  background-color: var(--color-warning);
+}
+#security-warning-state-ok span.icon-close-white,
+#security-warning-state-warning span.icon-close-white,
+#security-warning-state-failure span.icon-close-white,
+#security-warning-state-loading span.icon-close-white {
+  background-color: var(--color-error);
+}
+
+#shareAPI p {
+  padding-bottom: 0.8em;
+}
+#shareAPI input#shareapiExpireAfterNDays {
+  width: 40px;
+}
+#shareAPI .indent {
+  padding-left: 28px;
+}
+#shareAPI .double-indent {
+  padding-left: 56px;
+}
+#shareAPI .nocheckbox {
+  padding-left: 20px;
+}
+
+#shareApiDefaultPermissionsSection label {
+  margin-right: 20px;
+}
+
+#fileSharingSettings h3 {
+  display: inline-block;
+}
+
+#publicShareDisclaimerText {
+  width: calc(100% - 23px);
+  /* 20 px left margin, 3 px right margin */
+  max-width: 600px;
+  height: 150px;
+  margin-left: 20px;
+  box-sizing: border-box;
+}
+
+/* correctly display help icons next to headings */
+.icon-info {
+  padding: 11px 20px;
+  vertical-align: text-bottom;
+  opacity: 0.5;
+}
+
+#two-factor-auth h2,
+#shareAPI h2,
+#encryptionAPI h2,
+#mail_general_settings h2 {
+  display: inline-block;
+}
+
+#encryptionAPI li {
+  list-style-type: initial;
+  margin-left: 20px;
+  padding: 5px 0;
+}
+
+.mail_settings p label:first-child {
+  display: inline-block;
+  width: 300px;
+  text-align: right;
+}
+.mail_settings p select:nth-child(2),
+.mail_settings p input:not([type=button]) {
+  width: 143px;
+}
+
+#mail_smtpport {
+  width: 40px;
+}
+
+.cronlog {
+  margin-left: 10px;
+}
+
+.status {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: text-bottom;
+}
+.status.success {
+  border-radius: 50%;
+}
+
+#selectGroups select {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 36px;
+  padding: 7px 10px;
+}
+
+#log .log-message {
+  word-break: break-all;
+  min-width: 180px;
+}
+
+span.success {
+  background-color: var(--color-success);
+  border-radius: var(--border-radius);
+}
+span.error {
+  background-color: var(--color-error);
+}
+span.indeterminate {
+  background-color: var(--color-warning);
+  border-radius: 40% 0;
+}
+
+/* OPERA hack for strengthify*/
+doesnotexist:-o-prefocus, .strengthify-wrapper {
+  left: 185px;
+  width: 129px;
+}
+
+.trusted-domain-warning {
+  color: #fff;
+  padding: 5px;
+  background: #ce3702;
+  border-radius: 5px;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+#postsetupchecks ul {
+  margin-left: 44px;
+  list-style: disc;
+}
+#postsetupchecks ul li {
+  margin: 10px 0;
+}
+#postsetupchecks ul ul {
+  list-style: circle;
+}
+#postsetupchecks .loading {
+  height: 50px;
+  background-position: left center;
+}
+#postsetupchecks .errors, #postsetupchecks .errors a {
+  color: var(--color-error);
+}
+#postsetupchecks .warnings, #postsetupchecks .warnings a {
+  color: var(--color-warning);
+}
+#postsetupchecks .hint {
+  margin: 20px 0;
+}
+
+#security-warning a {
+  text-decoration: underline;
+}
+#security-warning .extra-top-margin {
+  margin-top: 12px;
+}
+
+#admin-tips li {
+  list-style: initial;
+}
+#admin-tips li a {
+  display: inline-block;
+  padding: 3px 0;
+}
+
+#selectEncryptionModules {
+  margin-left: 30px;
+  padding: 10px;
+}
+
+#encryptionModules {
+  padding: 10px;
+}
+
+#warning {
+  color: red;
+}
+
+.settings-hint {
+  margin-top: -12px;
+  margin-bottom: 12px;
+  opacity: 0.7;
+}
+
+/* USERS LIST -------------------------------------------------------------- */
+#body-settings {
+  overflow-x: scroll;
+  min-height: 100%;
+  height: auto;
+}
+#body-settings #app-content.user-list-grid {
+  display: grid;
+  grid-column-gap: 20px;
+  grid-auto-rows: minmax(60px, max-content);
+}
+#body-settings #app-content.user-list-grid .row {
+  display: flex;
+  display: grid;
+  min-height: 60px;
+  grid-row-start: span 1;
+  grid-gap: 3px;
+  align-items: center;
+  /* let's define the column until storage path,
+     what follows will be manually defined  */
+  grid-template-columns: 44px minmax(190px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(240px, 1fr) minmax(240px, 1fr) repeat(auto-fit, minmax(160px, 1fr));
+  border-bottom: var(--color-border) 1px solid;
+  /* grid col width */
+  /* various */
+}
+#body-settings #app-content.user-list-grid .row.disabled {
+  opacity: 0.5;
+}
+#body-settings #app-content.user-list-grid .row .name,
+#body-settings #app-content.user-list-grid .row .password,
+#body-settings #app-content.user-list-grid .row .mailAddress,
+#body-settings #app-content.user-list-grid .row .languages,
+#body-settings #app-content.user-list-grid .row .storageLocation,
+#body-settings #app-content.user-list-grid .row .userBackend,
+#body-settings #app-content.user-list-grid .row .lastLogin {
+  min-width: 160px;
+}
+#body-settings #app-content.user-list-grid .row .name doesnotexist:-o-prefocus, #body-settings #app-content.user-list-grid .row .name .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .password doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .password .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .mailAddress doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .mailAddress .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .languages doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .languages .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .storageLocation doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .storageLocation .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .userBackend doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .userBackend .strengthify-wrapper,
+#body-settings #app-content.user-list-grid .row .lastLogin doesnotexist:-o-prefocus,
+#body-settings #app-content.user-list-grid .row .lastLogin .strengthify-wrapper {
+  color: var(--color-text-dark);
+  vertical-align: baseline;
+  text-overflow: ellipsis;
+}
+#body-settings #app-content.user-list-grid .row:not(.row--editable).name, #body-settings #app-content.user-list-grid .row:not(.row--editable).password, #body-settings #app-content.user-list-grid .row:not(.row--editable).displayName, #body-settings #app-content.user-list-grid .row:not(.row--editable).mailAddress, #body-settings #app-content.user-list-grid .row:not(.row--editable).userBackend, #body-settings #app-content.user-list-grid .row:not(.row--editable).languages {
+  overflow: hidden;
+}
+#body-settings #app-content.user-list-grid .row .groups,
+#body-settings #app-content.user-list-grid .row .subadmins,
+#body-settings #app-content.user-list-grid .row .quota {
+  min-width: 160px;
+}
+#body-settings #app-content.user-list-grid .row .groups .multiselect,
+#body-settings #app-content.user-list-grid .row .subadmins .multiselect,
+#body-settings #app-content.user-list-grid .row .quota .multiselect {
+  width: 100%;
+  color: var(--color-text-dark);
+  vertical-align: baseline;
+}
+#body-settings #app-content.user-list-grid .row .obfuscated {
+  width: 400px;
+  opacity: 0.7;
+}
+#body-settings #app-content.user-list-grid .row .userActions {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  right: 0px;
+  min-width: 88px;
+  background-color: var(--color-main-background);
+}
+#body-settings #app-content.user-list-grid .row .subtitle {
+  color: var(--color-text-maxcontrast);
+  vertical-align: baseline;
+}
+#body-settings #app-content.user-list-grid .row#grid-header {
+  position: sticky;
+  align-self: normal;
+  background-color: var(--color-main-background);
+  z-index: 100;
+  /* above multiselect */
+  top: 50px;
+}
+#body-settings #app-content.user-list-grid .row#grid-header.sticky {
+  box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
+}
+#body-settings #app-content.user-list-grid .row#grid-header {
+  color: var(--color-text-maxcontrast);
+  border-bottom-width: thin;
+}
+#body-settings #app-content.user-list-grid .row#grid-header #headerDisplayName,
+#body-settings #app-content.user-list-grid .row#grid-header #headerPassword,
+#body-settings #app-content.user-list-grid .row#grid-header #headerAddress,
+#body-settings #app-content.user-list-grid .row#grid-header #headerGroups,
+#body-settings #app-content.user-list-grid .row#grid-header #headerSubAdmins,
+#body-settings #app-content.user-list-grid .row#grid-header #theHeaderUserBackend,
+#body-settings #app-content.user-list-grid .row#grid-header #theHeaderLastLogin,
+#body-settings #app-content.user-list-grid .row#grid-header #headerQuota,
+#body-settings #app-content.user-list-grid .row#grid-header #theHeaderStorageLocation,
+#body-settings #app-content.user-list-grid .row#grid-header #headerLanguages {
+  /* Line up header text with column content for when there’s inputs */
+  padding-left: 7px;
+  text-transform: none;
+  color: var(--color-text-maxcontrast);
+  vertical-align: baseline;
+}
+#body-settings #app-content.user-list-grid .row:hover input:not([type=submit]):not(:focus):not(:active) {
+  border-color: var(--color-border) !important;
+}
+#body-settings #app-content.user-list-grid .row:hover:not(#grid-header) {
+  box-shadow: 5px 0 0 var(--color-primary-element) inset;
+}
+#body-settings #app-content.user-list-grid .row > form {
+  width: 100%;
+}
+#body-settings #app-content.user-list-grid .row > div,
+#body-settings #app-content.user-list-grid .row > .displayName > form,
+#body-settings #app-content.user-list-grid .row > form {
+  grid-row: 1;
+  display: inline-flex;
+  color: var(--color-text-lighter);
+  flex-grow: 1;
+  /* inputs like mail, username, password */
+  /* Fill the grid cell */
+}
+#body-settings #app-content.user-list-grid .row > div > input:not(:focus):not(:active),
+#body-settings #app-content.user-list-grid .row > .displayName > form > input:not(:focus):not(:active),
+#body-settings #app-content.user-list-grid .row > form > input:not(:focus):not(:active) {
+  border-color: transparent;
+  cursor: pointer;
+}
+#body-settings #app-content.user-list-grid .row > div > input:focus + .icon-confirm, #body-settings #app-content.user-list-grid .row > div > input:active + .icon-confirm,
+#body-settings #app-content.user-list-grid .row > .displayName > form > input:focus + .icon-confirm,
+#body-settings #app-content.user-list-grid .row > .displayName > form > input:active + .icon-confirm,
+#body-settings #app-content.user-list-grid .row > form > input:focus + .icon-confirm,
+#body-settings #app-content.user-list-grid .row > form > input:active + .icon-confirm {
+  display: block !important;
+}
+#body-settings #app-content.user-list-grid .row > div:not(.userActions) > input:not([type=submit]),
+#body-settings #app-content.user-list-grid .row > .displayName > form:not(.userActions) > input:not([type=submit]),
+#body-settings #app-content.user-list-grid .row > form:not(.userActions) > input:not([type=submit]) {
+  width: 100%;
+  min-width: 0;
+}
+#body-settings #app-content.user-list-grid .row > div.name,
+#body-settings #app-content.user-list-grid .row > .displayName > form.name,
+#body-settings #app-content.user-list-grid .row > form.name {
+  word-break: break-all;
+}
+#body-settings #app-content.user-list-grid .row > div.displayName > input, #body-settings #app-content.user-list-grid .row > div.mailAddress > input,
+#body-settings #app-content.user-list-grid .row > .displayName > form.displayName > input,
+#body-settings #app-content.user-list-grid .row > .displayName > form.mailAddress > input,
+#body-settings #app-content.user-list-grid .row > form.displayName > input,
+#body-settings #app-content.user-list-grid .row > form.mailAddress > input {
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+#body-settings #app-content.user-list-grid .row > div.name, #body-settings #app-content.user-list-grid .row > div.userBackend,
+#body-settings #app-content.user-list-grid .row > .displayName > form.name,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userBackend,
+#body-settings #app-content.user-list-grid .row > form.name,
+#body-settings #app-content.user-list-grid .row > form.userBackend {
+  /* better multi-line visual */
+  line-height: 1.3em;
+  max-height: 100%;
+  overflow: hidden;
+  /* not supported by all browsers
+     so we keep the overflow hidden
+     as a fallback */
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+#body-settings #app-content.user-list-grid .row > div.quota,
+#body-settings #app-content.user-list-grid .row > .displayName > form.quota,
+#body-settings #app-content.user-list-grid .row > form.quota {
+  display: flex;
+  justify-content: left;
+  white-space: nowrap;
+  position: relative;
+}
+#body-settings #app-content.user-list-grid .row > div.quota progress,
+#body-settings #app-content.user-list-grid .row > .displayName > form.quota progress,
+#body-settings #app-content.user-list-grid .row > form.quota progress {
+  width: 150px;
+  margin-top: 35px;
+  height: 3px;
+}
+#body-settings #app-content.user-list-grid .row > div .icon-confirm,
+#body-settings #app-content.user-list-grid .row > .displayName > form .icon-confirm,
+#body-settings #app-content.user-list-grid .row > form .icon-confirm {
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+#body-settings #app-content.user-list-grid .row > div .icon-confirm:not(:active),
+#body-settings #app-content.user-list-grid .row > .displayName > form .icon-confirm:not(:active),
+#body-settings #app-content.user-list-grid .row > form .icon-confirm:not(:active) {
+  display: none;
+}
+#body-settings #app-content.user-list-grid .row > div.avatar,
+#body-settings #app-content.user-list-grid .row > .displayName > form.avatar,
+#body-settings #app-content.user-list-grid .row > form.avatar {
+  height: 32px;
+  width: 32px;
+  margin: 6px;
+}
+#body-settings #app-content.user-list-grid .row > div.avatar img,
+#body-settings #app-content.user-list-grid .row > .displayName > form.avatar img,
+#body-settings #app-content.user-list-grid .row > form.avatar img {
+  display: block;
+}
+#body-settings #app-content.user-list-grid .row > div.userActions,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions,
+#body-settings #app-content.user-list-grid .row > form.userActions {
+  display: flex;
+  justify-content: flex-end;
+}
+#body-settings #app-content.user-list-grid .row > div.userActions #newsubmit,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions #newsubmit,
+#body-settings #app-content.user-list-grid .row > form.userActions #newsubmit {
+  width: 100%;
+}
+#body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions,
+#body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--color-main-background);
+}
+#body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more,
+#body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more {
+  width: 44px;
+  height: 44px;
+  opacity: 0.5;
+  cursor: pointer;
+}
+#body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:focus, #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:hover, #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:active,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:focus,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:hover,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:active,
+#body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:focus,
+#body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:hover,
+#body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:active {
+  opacity: 0.7;
+  background-color: var(--color-background-dark);
+}
+#body-settings #app-content.user-list-grid .row > div.userActions .feedback,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .feedback,
+#body-settings #app-content.user-list-grid .row > form.userActions .feedback {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  transition: opacity 200ms ease-in-out;
+}
+#body-settings #app-content.user-list-grid .row > div.userActions .feedback .icon-checkmark,
+#body-settings #app-content.user-list-grid .row > .displayName > form.userActions .feedback .icon-checkmark,
+#body-settings #app-content.user-list-grid .row > form.userActions .feedback .icon-checkmark {
+  opacity: 0.5;
+  margin-right: 5px;
+}
+#body-settings #app-content.user-list-grid .row > div .multiselect.multiselect-vue,
+#body-settings #app-content.user-list-grid .row > .displayName > form .multiselect.multiselect-vue,
+#body-settings #app-content.user-list-grid .row > form .multiselect.multiselect-vue {
+  width: 100%;
+}
+#body-settings #app-content.user-list-grid .infinite-loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  grid-row-start: span 4;
+}
+#body-settings #app-content.user-list-grid .users-list-end {
+  opacity: 0.5;
+  user-select: none;
+}
+
+.animated {
+  animation: blink-animation 1s steps(5, start) 4;
+}
+
+@keyframes blink-animation {
+  to {
+    opacity: 0.6;
+  }
+}
+@-webkit-keyframes blink-animation {
+  to {
+    opacity: 1;
+  }
+}
+
+/*# sourceMappingURL=settings.css.map */
diff --git a/apps/settings/css/settings.css.map b/apps/settings/css/settings.css.map
new file mode 100644
index 00000000000..0fb2c70ac0d
--- /dev/null
+++ b/apps/settings/css/settings.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","settings.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD3CC;EACC;;;AAIF;AACA;EACC;;;AAGD;AACA;AC6CC;EAEA;;;AD3CD;ACyCC;EAEA;;;ADvCD;ACqCC;EAEA;;;ADnCD;ACiCC;EAEA;;;AD/BD;AC6BC;EAEA;;;AD1BA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAGC;EACC;;;AAKH;EACC;;;AAIA;EACC;;AAEA;EACC;;AAIA;EACC;;;AAOH;EAGC;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;EACC;EACA;;;AAMF;EACC;IACC;IACA;;EAEA;IACC;IACA;;EAGD;IACC;IACA;;EAGD;IACC;IACA;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;;AAKF;AACA;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;;AAGC;EAEC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EAEA;;AAEA;EACC;;;AAQN;EACC;;;AAGD;EACC;;;AAIA;EACC;;AAGD;EACC;;;AAIF;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAGC;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAGC;EACC;EACA;EACA;EACA;;AAGD;EACC;;;AAKD;AAAA;EAEC;;;AAKD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EAEC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;AACA;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;;AACA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAIA;EACC;;;AAMD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;IACC;;;AAIF;AACA;EAEE;IACC;;;AAKH;EACC;IACC;;;AAIF;EACC;;;AAGD;EACC;AACA;AAKA;;AAJA;EACC;;AAID;EACC;;AAEA;EACC;EACA;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EAwGC;EACA;EACA;AAkDA;;AAxJA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,QAfgB;EAgBhB,SAjBiB;EAmBjB,cAlBgB;EAmBhB;EACA;EACA;EACA;EACA;EACA;;AAGD;EAQC;;AAPA;EACC;EACA;EACA;EACA,YAhCe;;AAqChB;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAKF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAKH;EACC;EACA;AACA;EACA;EACA;EACA;;AAOD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAKD;EACC;;AAKD;EACC;;AAMH;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;;AAQF;EACC;;;AAKH;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAOA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;;AAMF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;EACC;EACA;EACA;;;AAIA;EACC;EACA;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAKF;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAID;AACA;EAGC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EAGC;EACA;EACA,YAhBgB;EAiBhB;EACA;EACA;AACA;AAAA;EAEA,uBACE;EAOF;AAMA;AA0DA;;AA9DA;EACC;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC,WA3CkB;;AA6ClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAID;EAMC;;AAIF;AAAA;AAAA;EAGC,WAjEkB;;AAmElB;AAAA;AAAA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAID;EACC;EACA;EACA;EACA;AAAc;EACd,KD77CY;;AC+7CZ;EACC;;AAIF;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUC;EACA;EACA;EACA;EACA;;AAKD;EACC;;AAGD;EACC;;AAIF;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;AAaA;AA2GA;;AAtHA;AAAA;AAAA;EACC;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAKF;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;EACC;;AAKA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAEC;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAKH;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;;AAMH;AAAA;AAAA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACI;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE","file":"settings.css"}
\ No newline at end of file
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
index 2f11f493207..ed5d6f8b5d7 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
+++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
@@ -152,7 +152,7 @@ export default {
 		color: var(--color-main-text);
 		border: 1px solid var(--color-border-dark);
 		border-radius: var(--border-radius);
-		background: var(--icon-triangle-s-000) no-repeat right 4px center;
+		background: var(--icon-triangle-s-dark) no-repeat right 4px center;
 		font-family: var(--font-face);
 		appearance: none;
 		cursor: pointer;
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index a2b4b4c7b60..e2d641f530e 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -13,12 +13,13 @@
   --color-primary-hover: #329bd3;
   --color-primary-light: #e5f2f9;
   --color-primary-light-text: #0082c9;
-  --color-primary-light-hover: #1e2b32;
+  --color-primary-light-hover: #dbe7ee;
   --color-primary-text-dark: #ededed;
   --color-primary-element: #0082c9;
   --color-primary-element-hover: #198ece;
   --color-primary-element-light: #17adff;
   --color-primary-element-lighter: #d8ecf6;
+  --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
   --color-main-text: #222222;
   --color-text-maxcontrast: #767676;
   --color-text-light: #222222;
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
new file mode 100644
index 00000000000..96be6dd862b
--- /dev/null
+++ b/apps/theming/css/settings-admin.css
@@ -0,0 +1,132 @@
+#theming input {
+  width: 230px;
+}
+#theming input:focus,
+#theming input:active {
+  padding-right: 30px;
+}
+#theming .fileupload {
+  display: none;
+}
+#theming div > label {
+  position: relative;
+}
+#theming .theme-undo {
+  position: absolute;
+  top: -7px;
+  right: 4px;
+  cursor: pointer;
+  opacity: 0.3;
+  padding: 7px;
+  vertical-align: top;
+  display: inline-block;
+  visibility: hidden;
+  height: 32px;
+  width: 32px;
+}
+#theming form.uploadButton {
+  width: 411px;
+}
+#theming form .theme-undo,
+#theming .theme-remove-bg {
+  cursor: pointer;
+  opacity: 0.3;
+  padding: 7px;
+  vertical-align: top;
+  display: inline-block;
+  float: right;
+  position: relative;
+  top: 4px;
+  right: 0px;
+  visibility: visible;
+  height: 32px;
+  width: 32px;
+}
+#theming input[type=text]:hover + .theme-undo,
+#theming input[type=text] + .theme-undo:hover,
+#theming input[type=text]:focus + .theme-undo,
+#theming input[type=text]:active + .theme-undo,
+#theming input[type=url]:hover + .theme-undo,
+#theming input[type=url] + .theme-undo:hover,
+#theming input[type=url]:focus + .theme-undo,
+#theming input[type=url]:active + .theme-undo {
+  visibility: visible;
+}
+#theming label span {
+  display: inline-block;
+  min-width: 175px;
+  padding: 8px 0px;
+  vertical-align: top;
+}
+#theming .icon-upload,
+#theming .uploadButton .icon-loading-small {
+  padding: 8px 20px;
+  width: 20px;
+  margin: 2px 0px;
+  min-height: 32px;
+  display: inline-block;
+}
+#theming #theming_settings_status {
+  height: 26px;
+  margin: 10px;
+}
+#theming #theming_settings_loading {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+#theming #theming_settings_msg {
+  vertical-align: middle;
+  border-radius: 3px;
+}
+#theming #theming-preview {
+  width: 230px;
+  height: 140px;
+  background-size: cover;
+  background-position: center center;
+  text-align: center;
+  margin-left: 178px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  background-color: var(--color-primary);
+  background-image: var(--image-background, var(--image-background-plain, url("../../../core/img/background.svg"), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
+}
+#theming #theming-preview #theming-preview-logo {
+  cursor: pointer;
+  width: 20%;
+  height: 20%;
+  margin-top: 20px;
+  display: inline-block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: var(--image-logo, url("../../../core/img/logo/logo.svg"));
+}
+#theming .theming-hints {
+  margin-top: 20px;
+}
+#theming .image-preview {
+  display: inline-block;
+  width: 80px;
+  height: 36px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+#theming #theming-preview-logoheader {
+  background-image: var(--image-logoheader);
+}
+#theming #theming-preview-favicon {
+  background-image: var(--image-favicon);
+}
+
+/* transition effects for theming value changes */
+#header {
+  transition: background-color 500ms linear;
+}
+#header svg, #header img {
+  transition: 500ms filter linear;
+}
+
+/*# sourceMappingURL=settings-admin.css.map */
diff --git a/apps/theming/css/settings-admin.css.map b/apps/theming/css/settings-admin.css.map
new file mode 100644
index 00000000000..b5e657a4e30
--- /dev/null
+++ b/apps/theming/css/settings-admin.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["settings-admin.scss"],"names":[],"mappings":"AACI;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGP;EAEO;;AAGP;EACO;;;AAIR;AACA;EACI;;AACA;EACI","file":"settings-admin.css"}
\ No newline at end of file
diff --git a/apps/theming/css/theming.css b/apps/theming/css/theming.css
new file mode 100644
index 00000000000..2d43b528a95
--- /dev/null
+++ b/apps/theming/css/theming.css
@@ -0,0 +1,17 @@
+/* Error: Undefined variable.
+ *    ,
+ * 38 | $invert: luma($color-primary) > 0.6;
+ *    |               ^^^^^^^^^^^^^^
+ *    '
+ *   apps/theming/css/theming.scss 38:15  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined variable.\a    \2577 \a 38 \2502  $invert: luma($color-primary) > 0.6;\a    \2502                ^^^^^^^^^^^^^^\a    \2575 \a   apps/theming/css/theming.scss 38:15  root stylesheet";
+}
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
deleted file mode 100644
index a5b55a5a738..00000000000
--- a/apps/theming/css/theming.scss
+++ /dev/null
@@ -1,285 +0,0 @@
-/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */
-@function luma($c) {
-	$-local-red: red(rgba($c, 1.0));
-	$-local-green: green(rgba($c, 1.0));
-	$-local-blue: blue(rgba($c, 1.0));
-
-	@return (0.2126 * $-local-red  + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
-}
-
-@mixin faded-background {
-	background-color: $color-primary;
-
-	@if ($color-primary == #0082C9) {
-		background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
-	} @else {
-		/** This will be overwritten by the faded-background-image mixin if needed */
-		background-image: none;
-	}
-}
-
-@mixin faded-background-image {
-	@include faded-background;
-	background-size: contain;
-
-	@if ($color-primary == #0082C9) {
-		background-image: $image-login-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
-	}
-
-	@if($has-custom-background == true) {
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-image: $image-login-background;
-	}
-}
-
-$has-custom-background: variable_exists('theming-background-mime') and $theming-background-mime != '';
-$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
-$invert: luma($color-primary) > 0.6;
-
-@if ($has-custom-logo == false) {
-	@if ($invert) {
-		$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
-	} @else {
-		$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
-	}
-}
-
-@if ($invert) {
-	// too bright, use dark text to mix the primary
-	$color-primary-light: mix($color-primary, $color-main-text, 10%);
-
-	#appmenu:not(.inverted) svg {
-		filter: invert(1);
-	}
-	#appmenu.inverted svg {
-		filter: none;
-	}
-	.searchbox input[type="search"] {
-		background-repeat: no-repeat;
-		background-position: 6px center;
-		background-color: transparent;
-		@include icon-color('search', 'actions', $color-black, 1, true);
-	}
-	#contactsmenu .icon-contacts {
-		@include icon-color('contacts', 'places', $color-black, 1, true);
-	}
-	#settings .icon-settings-white {
-		@include icon-color('settings', 'actions', $color-black, 1, true);
-	}
-	#appmenu .icon-more-white {
-		@include icon-color('more', 'actions', $color-black, 1, true);
-	}
-} @else {
-	#appmenu:not(.inverted) svg {
-		filter: none;
-	}
-	#appmenu.inverted svg {
-		filter: invert(1);
-	}
-}
-
-/* Colorized svg images */
-.icon-file, .icon-filetype-text {
-	background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster});
-}
-
-.icon-folder, .icon-filetype-folder {
-	background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
-}
-
-.icon-filetype-folder-drag-accept {
-	background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
-}
-
-#theming-preview-logo,
-#header .logo {
-	background-image: $image-logo;
-}
-
-#body-user,
-#body-settings,
-#body-public {
-	#header,
-	.profile__header,
-	.preview-card__header {
-		@include faded-background;
-	}
-}
-
-#body-login,
-#firstrunwizard .firstrunwizard-header,
-#theming-preview {
-	@include faded-background-image;
-}
-
-/* override styles for login screen in guest.css */
-@if ($has-custom-logo) {
-	// custom logo
-	#theming-preview-logo,
-	#header .logo {
-		background-size: contain;
-	}
-
-	#body-login #header .logo {
-		margin-bottom: 22px;
-	}
-} @else {
-	// default logo
-	@if ($invert) {
-		#theming-preview-logo,
-		#header .logo {
-			opacity: .6;
-		}
-	}
-}
-
-@if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' {
-	#theming .advanced-option-logoheader .image-preview,
-	body:not(#body-login) #header .logo {
-		background-image: $image-logoheader;
-	}
-} @else {
-	#theming .advanced-option-favicon .image-preview {
-		background-image: none;
-	}
-}
-
-input.primary {
-	background-color: $color-primary-element;
-	border: 1px solid $color-primary-text;
-	color: $color-primary-text;
-}
-
-#body-login {
-	input.primary:enabled:hover,
-	input.primary:enabled:focus,
-	button.primary:enabled:hover,
-	button.primary:enabled:focus,
-	a.primary:enabled:hover,
-	a.primary:enabled:focus {
-		color: $color-primary-text;
-		background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
-	}
-}
-
-@if ($invert) {
-	#body-login {
-		.body-login-container {
-			background-color: transparentize(nc-lighten($color-primary, 30%), 0.2);
-			color: $color-primary-text !important;
-
-			h2 {
-				color: $color-primary-text;
-			}
-			.icon-search.icon-white {
-				// CSS variable is not used here since it is on the public page layout,
-				// where the dark theme doesn't apply at the moment
-				background-image: url('../../../core/img/actions/search.svg');
-			}
-		}
-
-		input {
-			border: 1px solid nc-lighten($color-primary-text, 50%);
-		}
-		input.primary,
-		button.primary {
-			background-color: $color-primary;
-			color: $color-primary-text;
-		}
-		:not(div.alternative-logins) > a,
-		label,
-		footer p,
-		.alternative-logins legend,
-		.lost-password-container #lost-password,
-		.warning, .update, .error {
-			color: $color-primary-text !important;
-		}
-		input[type='checkbox'].checkbox--white + label:before {
-			border-color: nc-darken($color-primary-element, 40%) !important;
-		}
-		input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
-		input[type='checkbox'].checkbox--white:focus + label:before {
-			border-color: nc-darken($color-primary-element, 30%) !important;
-		}
-		input[type='checkbox'].checkbox--white:checked + label:before {
-			border-color: nc-darken($color-primary-element, 30%) !important;
-			background-color: nc-darken($color-primary-element, 30%) !important;
-			@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
-		}
-		#submit-wrapper .icon-confirm-white {
-			background-image: url('../../../core/img/actions/confirm.svg');
-		}
-
-		.two-factor-provider {
-			&:hover, &:focus {
-				border-color: $color-primary-text;
-			}
-			img {
-				filter: invert(1);
-			}
-		}
-	}
-	#body-public #header .icon-more-white {
-		background-image: var(--icon-more-000);
-	}
-}
-
-// plain background color for login page
-@if $image-login-plain == 'true' {
-	#body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
-		background-image: none !important;
-	}
-	#body-login {
-
-		:not(.alternative-logins) a, label, p {
-			color: $color-primary-text;
-		}
-
-	}
-}
-
-/** Handle primary buttons for bright colors */
-@if (luma($color-primary) > 0.8) {
-	:root {
-		--color-primary-light-text: var(--color-primary-text);
-	}
-	select,
-	button, .button,
-	input:not([type='range']),
-	textarea,
-	div[contenteditable=true],
-	.pager li a {
-		&.primary:not(:disabled) {
-			background-color: var(--color-background-dark);
-			color: var(--color-main-text);
-			border-color: var(--color-text-lighter);
-
-			&:hover, &:focus, &:active {
-				background-color: var(--color-background-darker);
-				color: var(--color-main-text);
-				border-color: var(--color-text);
-			}
-		}
-	}
-}
-
-@if ($color-primary == #ffffff) {
-	/* show grey border below header */
-	#body-user #header,
-	#body-settings #header,
-	#body-public #header {
-		border-bottom: 1px solid #ebebeb;
-	}
-
-	/* show triangle in header in grey */
-	#appmenu li a.active:before,
-	.header-right #settings #expand:before {
-		border-bottom-color:#ebebeb;
-	}
-
-	/* show border around quota bar in files app */
-	.app-files #quota .quota-container {
-		border: 1px solid #ebebeb;
-	}
-}
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index a98d9099d95..180b1106595 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -88,6 +88,7 @@ class DefaultTheme implements ITheme {
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
+		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
 
 		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') ||  $this->imageManager->hasImage('logoheader');
 
@@ -111,9 +112,9 @@ class DefaultTheme implements ITheme {
 			'--color-primary' => $this->primaryColor,
 			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
 			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
-			'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80),
+			'--color-primary-light' => $colorPrimaryLight,
 			'--color-primary-light-text' => $this->primaryColor,
-			'--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, -80),
+			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
 			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
 			// used for buttons, inputs...
 			'--color-primary-element' => $this->util->elementColor($this->primaryColor),
diff --git a/apps/updatenotification/src/components/UpdateNotification.vue b/apps/updatenotification/src/components/UpdateNotification.vue
index 6fc48978852..5039ac22bb7 100644
--- a/apps/updatenotification/src/components/UpdateNotification.vue
+++ b/apps/updatenotification/src/components/UpdateNotification.vue
@@ -539,7 +539,7 @@ export default {
 	/* override needed to replace yellow hover state with a dark one */
 	#updatenotification .update-menu .icon-star:hover,
 	#updatenotification .update-menu .icon-star:focus {
-		background-image: var(--icon-star-000);
+		background-image: var(--icon-starred);
 	}
 	#updatenotification .topMargin {
 		margin-top: 15px;
diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css
new file mode 100644
index 00000000000..9966be2f4ff
--- /dev/null
+++ b/apps/user_status/css/user-status-menu.css
@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @copyright Copyright (c) 2020 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/**
+ * @see core/src/icons.js
+ */
+/**
+ * SVG COLOR API
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int $version the version of the file
+ * @param bool [$core] search icon in core
+ *
+ * @returns A background image with the url to the set to the requested icon.
+ */
+.icon-user-status {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-app-dark);
+}
+
+.icon-user-status-online {
+  background-image: url("../img/user-status-online.svg");
+}
+
+.icon-user-status-away {
+  background-image: url("../img/user-status-away.svg");
+}
+
+.icon-user-status-dnd {
+  background-image: url("../img/user-status-dnd.svg");
+}
+
+.icon-user-status-invisible {
+  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
+  background-image: var(--icon-user-status-invisible-dark);
+}
+
+/*# sourceMappingURL=user-status-menu.css.map */
diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map
new file mode 100644
index 00000000000..0363c914a41
--- /dev/null
+++ b/apps/user_status/css/user-status-menu.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;ACsBC;EAEA","file":"user-status-menu.css"}
\ No newline at end of file
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index 97f24af22f3..5f4b8dd87b0 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -111,7 +111,7 @@ export default {
 	}
 
 	.multiselect:not(.multiselect--disabled)::v-deep .multiselect__tags .multiselect__single {
-		background-image: var(--icon-triangle-s-000);
+		background-image: var(--icon-triangle-s-dark);
 		background-repeat: no-repeat;
 		background-position: right center;
 	}