Cleanup and compile

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

10 files changed, 3642 insertions, 0 deletions

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