From 0609aeeb0ac86ce428f717e991d4238166ebcac7 Mon Sep 17 00:00:00 2001 From: Phlogi Date: Tue, 7 Dec 2021 22:05:13 +0100 Subject: [PATCH 1/3] Smooth time remaining, bitrate and stabilize user information Besides the existing moving average, a smoothing factor is introduced for the time remaining display as well as the bitrate. Furthermore, half of the buffer needs to be filled before the first prediction is displayed to the user. This reduces volatile and jumping durations towards the user and improves usability. Signed-off-by: Cyrill H. Co-authored-by: Carl Schwan --- apps/files/js/file-upload.js | 54 ++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 14 deletions(-) diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index f3a39e5861ad5..7a129a989d11b 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -955,6 +955,7 @@ OC.Uploader.prototype = _.extend({ type: 'PUT', dropZone: options.dropZone, // restrict dropZone to content div autoUpload: false, + progressInterval: 300, // increased from the default of 100ms for more stable behvaviour when predicting remaining time sequentialUploads: false, limitConcurrentUploads: 4, /** @@ -1197,7 +1198,7 @@ OC.Uploader.prototype = _.extend({ if (this._supportAjaxUploadWithProgress()) { //remaining time - var lastUpdate, lastSize, bufferSize, buffer, bufferIndex, bufferIndex2, bufferTotal; + var lastUpdate, lastSize, bufferSize, buffer, bufferIndex, bufferTotal, smoothRemainingSeconds, smoothBitrate; var dragging = false; @@ -1215,11 +1216,15 @@ OC.Uploader.prototype = _.extend({ // initial remaining time variables lastUpdate = new Date().getTime(); lastSize = 0; - bufferSize = 20; + bufferSize = 20; // length of the ring buffer buffer = []; - bufferIndex = 0; - bufferIndex2 = 0; + bufferIndex = 0; // index of the ring buffer, runs from 0 to bufferSize continuously bufferTotal = 0; + newTotal = 0; + smoothing = 0.02; // smoothing factor for EMA + h = ''; + bufferFilled = false; + for(var i = 0; i < bufferSize; i++){ buffer[i] = 0; } @@ -1238,33 +1243,54 @@ OC.Uploader.prototype = _.extend({ var diffUpdate = (thisUpdate - lastUpdate)/1000; // eg. 2s lastUpdate = thisUpdate; var diffSize = data.loaded - lastSize; + if (diffSize <= 0) { + diffSize = lastSize; + } lastSize = data.loaded; diffSize = diffSize / diffUpdate; // apply timing factor, eg. 1MiB/2s = 0.5MiB/s, unit is byte per second var remainingSeconds = ((total - data.loaded) / diffSize); + if(remainingSeconds >= 0) { + // bufferTotal holds the sum of all entries in the buffer, initially 0 like the entries itself + // substract current entry from total and add the current value to total bufferTotal = bufferTotal - (buffer[bufferIndex]) + remainingSeconds; + // put current value to the entry buffer[bufferIndex] = remainingSeconds; //buffer to make it smoother + bufferIndex = (bufferIndex + 1) % bufferSize; - bufferIndex2++; } - var smoothRemainingSeconds; - if (bufferIndex2 > 0 && bufferIndex2 < 20) { - smoothRemainingSeconds = bufferTotal / bufferIndex2; - } else if (bufferSize > 0) { + if (bufferIndex === bufferSize - 1) { + bufferFilled = true; + } + //console.log('#', ' idx: ',bufferIndex, ' Total: ', bufferTotal, ' remainSeconds: ', remainingSeconds, ' during: ', diffUpdate); + + if (smoothRemainingSeconds === null) { smoothRemainingSeconds = bufferTotal / bufferSize; - } else { - smoothRemainingSeconds = 1; + } else{ + smoothRemainingSeconds = smoothing * (bufferTotal / bufferSize) + ((1-smoothing) * smoothRemainingSeconds); + } + + if (bufferIndex % 4 === 0) { + h = moment.duration(smoothRemainingSeconds, "seconds").humanize({m: 50, h: 50}); } - var h = moment.duration(smoothRemainingSeconds, "seconds").humanize(); - if (!(smoothRemainingSeconds >= 0 && smoothRemainingSeconds < 14400)) { + // wait for the buffer to be at least half filled, approximately takes 3s + if (!(smoothRemainingSeconds >= 0 && smoothRemainingSeconds < 14400) || (bufferFilled == false && bufferIndex < bufferSize/2)) { // show "Uploading ..." for durations longer than 4 hours h = t('files', 'Uploading …'); } + + // smooth bitrate + if (smoothBitrate === null) { + smoothBitrate = data.bitrate; + } else{ + smoothBitrate = smoothing * data.bitrate + ((1-smoothing) * smoothBitrate); + } + self._setProgressBarText(h, h, t('files', '{loadedSize} of {totalSize} ({bitrate})' , { loadedSize: OC.Util.humanFileSize(data.loaded), totalSize: OC.Util.humanFileSize(total), - bitrate: OC.Util.humanFileSize(data.bitrate / 8) + '/s' + bitrate: OC.Util.humanFileSize(smoothBitrate / 8) + '/s' })); self._setProgressBarValue(progress); self.trigger('progressall', e, data); From c87ce4bafcfba47518b59fc911cbd6be374cd368 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 16 Aug 2023 15:09:49 +0200 Subject: [PATCH 2/3] fix: Make smooth bitrate and remaining upload time work when unset Signed-off-by: Ferdinand Thiessen --- apps/files/js/file-upload.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 7a129a989d11b..a4058fd1ad579 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -1264,10 +1264,10 @@ OC.Uploader.prototype = _.extend({ } //console.log('#', ' idx: ',bufferIndex, ' Total: ', bufferTotal, ' remainSeconds: ', remainingSeconds, ' during: ', diffUpdate); - if (smoothRemainingSeconds === null) { - smoothRemainingSeconds = bufferTotal / bufferSize; - } else{ + if (smoothRemainingSeconds) { smoothRemainingSeconds = smoothing * (bufferTotal / bufferSize) + ((1-smoothing) * smoothRemainingSeconds); + } else { + smoothRemainingSeconds = bufferTotal / bufferSize; } if (bufferIndex % 4 === 0) { @@ -1281,10 +1281,10 @@ OC.Uploader.prototype = _.extend({ } // smooth bitrate - if (smoothBitrate === null) { - smoothBitrate = data.bitrate; - } else{ + if (smoothBitrate) { smoothBitrate = smoothing * data.bitrate + ((1-smoothing) * smoothBitrate); + } else { + smoothBitrate = data.bitrate; } self._setProgressBarText(h, h, t('files', '{loadedSize} of {totalSize} ({bitrate})' , { From 39e0a42ed2d828eafb7ef2b19d56ec23acabb9dc Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 16 Aug 2023 16:42:17 +0200 Subject: [PATCH 3/3] fix: Upload progress shows number of files to upload and current index Signed-off-by: Ferdinand Thiessen --- apps/files/css/merged.css | 2 +- apps/files/css/upload.css | 2 +- apps/files/css/upload.scss | 2 +- apps/files/js/file-upload.js | 26 ++++++++++++++++++++------ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/apps/files/css/merged.css b/apps/files/css/merged.css index 6edd7f8580c1a..0f2a944189454 100644 --- a/apps/files/css/merged.css +++ b/apps/files/css/merged.css @@ -1 +1 @@ -.actions{padding:3px;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-element-light)}.actions.creatable{position:relative;display:flex;flex:1 1}.actions.creatable .button:not(:last-child){margin-right:3px;width:unset;gap:14px;background-color:var(--color-primary-element-light);color:var(--color-primary-element-light-text);border:unset;padding:0px 20px}.actions.hidden{display:none}#trash{margin-right:8px;float:right;z-index:1010;padding:10px;font-weight:normal}.newFileMenu .error,.newFileMenu .error+.icon-confirm,.files-fileList .error{color:var(--color-error);border-color:var(--color-error)}.files-filestable{position:relative;width:100%;min-width:250px;display:block;flex-direction:column}.emptycontent:not(.hidden)~.files-filestable{display:none}.files-filestable thead{position:-webkit-sticky;position:sticky;top:44px;z-index:60;display:block;background-color:var(--color-main-background-translucent)}.files-filestable tbody{display:table;width:100%}.files-filestable tbody tr[data-permissions="0"],.files-filestable tbody tr[data-permissions="16"]{background-color:var(--color-background-dark)}.files-filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,.files-filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext{color:var(--color-text-maxcontrast)}.files-filestable tbody tr[data-e2eencrypted=true] .selection{pointer-events:none}.files-filestable.hidden{display:none}.app-files #app-content>.viewcontainer{min-height:0%;width:100%}.app-files #app-content{width:calc(100% - 300px);overflow-anchor:none}.file-drag,.file-drag .files-filestable tbody tr,.file-drag .files-filestable tbody tr:hover{background-color:var(--color-primary-element-light) !important}.app-files #app-content.dir-drop{background-color:var(--color-main-background) !important}.file-drag .files-filestable tbody tr,.file-drag .files-filestable tbody tr:hover{background-color:rgba(0,0,0,0) !important}.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{background-color:var(--color-primary-element-light) !important}#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:.3}.files-filestable tbody tr{height:51px}.files-filestable tbody tr:hover,.files-filestable tbody tr:focus,.files-filestable tbody .name:focus,.files-filestable tbody tr:hover .filename form,table tr.mouseOver td{background-color:var(--color-background-hover)}.files-filestable tbody tr:active,.files-filestable tbody tr.highlighted,.files-filestable tbody tr.highlighted .name:focus,.files-filestable tbody tr.selected,.files-filestable tbody tr.searchresult{background-color:var(--color-primary-element-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 th .columntitle:focus-visible{border-radius:2px}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:.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.column-name{position:relative;width:9999px;padding:0}.column-name-container{position:relative;height:50px}table th.column-selection{padding-top:2px}table th.column-size,table td.filesize{text-align:right}table th.column-mtime,table td.date,table th.column-last,table td.column-last{-moz-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:130px}#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}#app-content-recent thead,#app-content-favorites thead,#app-content-shareoverview thead,#app-content-sharingout thead,#app-content-sharingin thead,#app-content-sharinglinks thead,#app-content-deletedshares thead,#app-content-pendingshares thead{top:0}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 .column-name{position:relative;width:9999px}table.multiselect .column-mtime>a{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;-moz-box-sizing:border-box;box-sizing:border-box;height:50px;line-height:50px;padding:0}table td.filename .thumbnail-wrapper{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:.2}table td.filename .thumbnail{display:inline-block;width:32px;height:32px;background-size:contain;background-position:center;background-repeat:no-repeat;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:not(.view-grid) td.filename input.filename{width:70% !important;margin-left:48px !important;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}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}table td.filename .system-tags{--min-size: 32px;display:flex;justify-content:center;align-items:center;min-width:calc(var(--min-size)*2);max-width:300px}table td.filename .system-tags .system-tags__tag{padding:5px 10px;border:1px solid;border-radius:var(--border-radius-pill);border-color:var(--color-border);color:var(--color-text-maxcontrast);height:var(--min-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;text-align:center}table td.filename .system-tags .system-tags__tag--more{overflow:visible;text-overflow:initial}table td.filename .system-tags .system-tags__tag+.system-tags__tag{margin-left:5px}.hide-hidden-files .files-filestable .files-fileList tr.hidden-file,.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging{display:none !important}.files-fileList tr.animate-opacity{-webkit-transition:opacity 250ms;-moz-transition:opacity 250ms;-o-transition:opacity 250ms;transition:opacity 250ms}.files-fileList tr.dragging{opacity:.2}table td.filename .nametext .innernametext{text-overflow:ellipsis;overflow:hidden;position:relative;vertical-align:top}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}.files-fileList tr td.selection>.selectCheckBox+label:before{opacity:.3;margin-right:0}.files-fileList tr:hover td.selection>.selectCheckBox+label:before,.files-fileList tr:focus td.selection>.selectCheckBox+label:before,.files-fileList tr td.selection>.selectCheckBox:checked+label:before,.files-fileList tr.selected td.selection>.selectCheckBox+label:before{opacity:1}.files-fileList tr.halfselected td.selection>.selectCheckBox+label:before{opacity:.5}.files-fileList tr td.selection>.selectCheckBox+label,.select-all+label{padding:16px}.files-fileList tr td.selection>.selectCheckBox:focus-visible+label,.select-all:focus-visible+label{background-color:var(--color-background-hover);border-radius:var(--border-radius-pill);outline:none !important;border:2px solid var(--color-primary-element) !important;padding:14px}.files-fileList tr td.selection>.selectCheckBox:focus-visible+label,.select-all:focus-visible+label{outline-offset:0px}.files-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}.files-fileList tr td.filename a.name label,.files-fileList tr td.filename p.name label{position:absolute;width:80%;height:50px}.files-fileList tr td.filename .favorite{display:inline-block;float:left}.files-fileList tr td.filename .favorite-mark{position:absolute;display:block;top:-8px;right:-8px;line-height:100%;text-align:center}.files-fileList tr td.filename .favorite-mark.permanent{background-color:var(--color-main-background);mask:var(--icon-star-rounded-white) no-repeat;mask-size:22px 22px;width:22px;height:22px;display:flex;align-content:center;justify-content:center}.files-fileList tr:hover td.filename .favorite-mark.permanent{background-color:var(--color-background-hover)}#uploadsize-message,#delete-confirm{display:none}.fileactions{z-index:50}.busy .fileactions,.busy .action{visibility:hidden}.bubble,#app-navigation .app-navigation-entry-menu{min-width:100px}.files-fileList .icon-loading-small{opacity:1 !important;display:inline !important}.files-fileList .action.action-share-notification span,.files-fileList a.name{cursor:default !important}.files-fileList a.name.disabled *{cursor:default}.files-fileList a.name.disabled a,.files-fileList a.name.disabled a *{cursor:pointer}.files-fileList a.name.disabled:focus{background:none}a.action>img{height:16px;width:16px;vertical-align:text-bottom}a.action.action-editlocally img.icon,a.action.action-setreminder img.icon{filter:var(--background-invert-if-dark)}.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}.files-fileList td a a.action{display:inline;padding:17px 8px;line-height:50px;opacity:.3}.files-fileList td a a.action.action-share{padding:17px 14px}.files-fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared+span{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.files-fileList td a a.action.action-share .avatar{display:inline-block;vertical-align:middle}.files-fileList td a a.action.action-menu{padding-top:17px;padding-bottom:17px;padding-left:14px;padding-right:14px}.files-fileList td a a.action.no-permission:hover,.files-fileList td a a.action.no-permission:focus{opacity:.3}.files-fileList td a a.action.disabled:hover,.files-fileList td a a.action.disabled:focus,.files-fileList td a a.action.disabled img{opacity:.3}.files-fileList td a a.action.disabled.action-download{opacity:.7}.files-fileList td a a.action.disabled.action-download:hover,.files-fileList td a a.action.disabled.action-download:focus{opacity:.7}.files-fileList td a a.action:hover,.files-fileList td a a.action:focus{opacity:1}.files-fileList td a a.action:focus{background-color:var(--color-background-hover);border-radius:var(--border-radius-pill)}.files-fileList td a .fileActionsMenu a.action,.files-fileList td a a.action.action-share.shared-style{opacity:.7}.files-fileList td a .fileActionsMenu .action.permanent{opacity:1}.files-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}.files-fileList .remoteAddress .userDomain{margin-left:0 !important}.files-fileList .favorite-mark.permanent{opacity:1}.files-fileList .fileActionsMenu a.action:hover,.files-fileList .fileActionsMenu a.action:focus,.files-fileList a.action.action-share.shared-style:hover,.files-fileList a.action.action-share.shared-style:focus{opacity:1}.files-fileList tr a.action.disabled{background:none}.selectedActions a.download.disabled,.files-fileList tr a.action.action-download.disabled{color:#000}.files-fileList tr:hover a.action.disabled:hover *{cursor:default}.summary{color:var(--color-text-maxcontrast);height:330px}.files-filestable .summary .filesummary{width:100%;padding-left:101px}#body-public .summary{height:180px}.summary:hover,.summary:focus,.summary,table tr.summary td{background-color:rgba(0,0,0,0)}.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;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:.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}.newFileMenu::after{left:84px !important}.files-controls{box-sizing:border-box;position:-webkit-sticky;position:sticky;height:50px;padding:0;margin:0;background-color:var(--color-main-background-translucent);z-index:62;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;top:0;padding-left:50px}.files-controls .actions>div>.button,.files-controls .actions>div button,.files-controls .actions>.button,.files-controls .actions button{box-sizing:border-box;display:inline-block;display:flex;height:44px;width:44px;padding:9px;align-items:center;justify-content:center}.files-controls .actions>div .button.hidden,.files-controls .actions .button.hidden{display:none}.viewer-mode #app-navigation+#app-content .files-controls{left:0}.files-filestable .filename .action .icon,.files-filestable .selectedActions a .icon,.files-filestable .filename .favorite-mark .icon,.files-controls .actions .button .icon{display:inline-block;vertical-align:middle;background-size:16px 16px}.files-filestable .filename .favorite-mark .icon-star{background-image:none}.files-filestable .filename .favorite-mark .icon-starred{background-image:var(--icon-starred-yellow) !important}.files-filestable .filename .action .icon.hidden,.files-filestable .selectedActions a .icon.hidden,.files-controls .actions .button .icon.hidden{display:none}.files-filestable .filename .action .icon.loading,.files-filestable .selectedActions a .icon.loading,.files-controls .actions .button .icon.loading{width:15px;height:15px}.app-files .actions .button.new{position:relative;width:unset;gap:14px;background-color:var(--color-primary-element-light);color:var(--color-primary-element-light-text);border:unset;padding:0px 20px}.breadcrumb{align-items:center}.breadcrumb .icon-home{border-radius:var(--border-radius)}.breadcrumb .canDrop>a,.files-filestable tbody tr.canDrop{background-color:rgba(0,130,201,.3)}.dropzone-background{background-color:rgba(0,130,201,.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-navigation-item{margin:0 !important;border:none;border-radius:0;background-color:rgba(0,0,0,0);z-index:1;height:44px;display:flex !important;flex-direction:column}.quota-navigation-item__text{height:30px}.quota-navigation-item[href="#"],.quota-navigation-item[href="#"] *{cursor:default !important}.quota-navigation-item__container{height:5px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) thead tr{display:block;border-bottom:1px solid var(--color-border);background-color:var(--color-main-background-translucent)}.files-filestable.view-grid:not(.hidden) thead tr th{width:auto;border:none}.files-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}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden){display:block;position:relative;height:190px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted{background-color:rgba(0,0,0,0)}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions{background-color:var(--color-background-hover)}.files-filestable.view-grid:not(.hidden) tbody td{display:inline;border-bottom:none}.files-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}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark{left:auto;top:-11px;right:-11px}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name{height:100%;border-radius:var(--border-radius);overflow:hidden;cursor:pointer !important}.files-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}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before{content:"";flex:1;min-width:14px}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after{content:"";flex:1;min-width:44px}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension{display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .system-tags{display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions{height:initial;margin-top:146px;display:flex;align-items:center;position:absolute;right:0}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu){display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img{padding:6px;border-radius:50%}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename form{padding:3px 14px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) tbody td.filename form input.filename{width:100%;margin-left:0;cursor:text}.files-filestable.view-grid:not(.hidden) tbody td.filesize,.files-filestable.view-grid:not(.hidden) tbody td.date{display:none}.files-filestable.view-grid:not(.hidden) tbody td.selection,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark{position:absolute;top:-8px;left:-8px;display:flex;z-index:10}.files-filestable.view-grid:not(.hidden) tbody td.selection label,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label{width:44px;height:44px;display:inline-flex;padding:14px}.files-filestable.view-grid:not(.hidden) tbody td.selection label::before,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before{margin:0;width:14px;height:14px}.files-filestable.view-grid:not(.hidden) tbody td .popovermenu{left:0;width:150px;margin:0 5px}.files-filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon){overflow:hidden;text-overflow:ellipsis}.files-filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension{display:block}.files-filestable.view-grid:not(.hidden) tfoot{display:grid}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden){display:inline-block;margin:0 auto;height:418px}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td{padding-top:50px}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child,.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date{display:none}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info{margin-left:0}#view-toggle{background-color:var(--color-main-background-translucent);border:none;margin:0;padding:22px;opacity:.5;float:right;right:var(--default-grid-baseline);top:var(--default-grid-baseline);z-index:100;position:sticky}#view-toggle:hover,#view-toggle:focus,#showgridview:focus+#view-toggle{opacity:1}#view-toggle:focus-visible,#showgridview:focus-visible+#view-toggle{box-shadow:inset 0 0 0 2px var(--color-primary-element) !important}#showgridview{position:fixed;top:0}#body-public .files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext{max-width:124px}#body-public .files-filestable.view-grid:not(.hidden) tbody td .popovermenu{left:-80px}#body-public #view-toggle{position:absolute;right:0;top:0}#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;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:.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:var(--border-radius-pill) 0 0 var(--border-radius-pill);border-right:0;position:relative;float:left;width:200px;height:44px;display:inline-block;text-align:center}#uploadprogressbar .ui-progressbar-value{margin-top:.1em}#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-element)}#uploadprogressbar .label{top:8px;opacity:1;overflow:hidden;white-space:nowrap;font-weight:normal}#uploadprogressbar .label.inner{color:var(--color-primary-element-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:50%}.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:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-moz-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-o-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@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:#fff !important}table th.column-size,table td.filesize,table th.column-mtime,table td.date{display:none}table td{padding:0}table.multiselect thead{padding-left:0}.fileList a.action.action-menu img{padding-left:0}.fileList .fileActionsMenu{margin-right:6px}.fileList a.action-share span:not(.icon):not(.avatar){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}td.filename a.name .system-tags{display:none}#uploadprogressbar,#uploadprogressbar .label.inner{width:50px}#uploadprogressbar .desktop{display:none !important}#uploadprogressbar .mobile{display:block !important}table.dragshadow{z-index:1000}}@media only screen and (max-width: 480px){table th .selectedActions{float:right}table th .selectedActions>a span:not(.icon){display:none}table th .selectedActions a{padding:17px 14px}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:.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;margin-top:-15px}.app-sidebar .thumbnailContainer.large.portrait{margin:0}.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%}.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);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:.7 !important}.app-sidebar .detailList{float:left}.app-sidebar .close{position:absolute;top:0;right:0;opacity:.5;z-index:1;width:44px;height:44px}.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 */ +.actions{padding:3px;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-element-light)}.actions.creatable{position:relative;display:flex;flex:1 1}.actions.creatable .button:not(:last-child){margin-right:3px;width:unset;gap:14px;background-color:var(--color-primary-element-light);color:var(--color-primary-element-light-text);border:unset;padding:0px 20px}.actions.hidden{display:none}#trash{margin-right:8px;float:right;z-index:1010;padding:10px;font-weight:normal}.newFileMenu .error,.newFileMenu .error+.icon-confirm,.files-fileList .error{color:var(--color-error);border-color:var(--color-error)}.files-filestable{position:relative;width:100%;min-width:250px;display:block;flex-direction:column}.emptycontent:not(.hidden)~.files-filestable{display:none}.files-filestable thead{position:-webkit-sticky;position:sticky;top:44px;z-index:60;display:block;background-color:var(--color-main-background-translucent)}.files-filestable tbody{display:table;width:100%}.files-filestable tbody tr[data-permissions="0"],.files-filestable tbody tr[data-permissions="16"]{background-color:var(--color-background-dark)}.files-filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,.files-filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext{color:var(--color-text-maxcontrast)}.files-filestable tbody tr[data-e2eencrypted=true] .selection{pointer-events:none}.files-filestable.hidden{display:none}.app-files #app-content>.viewcontainer{min-height:0%;width:100%}.app-files #app-content{width:calc(100% - 300px);overflow-anchor:none}.file-drag,.file-drag .files-filestable tbody tr,.file-drag .files-filestable tbody tr:hover{background-color:var(--color-primary-element-light) !important}.app-files #app-content.dir-drop{background-color:var(--color-main-background) !important}.file-drag .files-filestable tbody tr,.file-drag .files-filestable tbody tr:hover{background-color:rgba(0,0,0,0) !important}.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{background-color:var(--color-primary-element-light) !important}#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:.3}.files-filestable tbody tr{height:51px}.files-filestable tbody tr:hover,.files-filestable tbody tr:focus,.files-filestable tbody .name:focus,.files-filestable tbody tr:hover .filename form,table tr.mouseOver td{background-color:var(--color-background-hover)}.files-filestable tbody tr:active,.files-filestable tbody tr.highlighted,.files-filestable tbody tr.highlighted .name:focus,.files-filestable tbody tr.selected,.files-filestable tbody tr.searchresult{background-color:var(--color-primary-element-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 th .columntitle:focus-visible{border-radius:2px}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:.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.column-name{position:relative;width:9999px;padding:0}.column-name-container{position:relative;height:50px}table th.column-selection{padding-top:2px}table th.column-size,table td.filesize{text-align:right}table th.column-mtime,table td.date,table th.column-last,table td.column-last{-moz-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:130px}#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}#app-content-recent thead,#app-content-favorites thead,#app-content-shareoverview thead,#app-content-sharingout thead,#app-content-sharingin thead,#app-content-sharinglinks thead,#app-content-deletedshares thead,#app-content-pendingshares thead{top:0}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 .column-name{position:relative;width:9999px}table.multiselect .column-mtime>a{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;-moz-box-sizing:border-box;box-sizing:border-box;height:50px;line-height:50px;padding:0}table td.filename .thumbnail-wrapper{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:.2}table td.filename .thumbnail{display:inline-block;width:32px;height:32px;background-size:contain;background-position:center;background-repeat:no-repeat;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:not(.view-grid) td.filename input.filename{width:70% !important;margin-left:48px !important;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}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}table td.filename .system-tags{--min-size: 32px;display:flex;justify-content:center;align-items:center;min-width:calc(var(--min-size)*2);max-width:300px}table td.filename .system-tags .system-tags__tag{padding:5px 10px;border:1px solid;border-radius:var(--border-radius-pill);border-color:var(--color-border);color:var(--color-text-maxcontrast);height:var(--min-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;text-align:center}table td.filename .system-tags .system-tags__tag--more{overflow:visible;text-overflow:initial}table td.filename .system-tags .system-tags__tag+.system-tags__tag{margin-left:5px}.hide-hidden-files .files-filestable .files-fileList tr.hidden-file,.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging{display:none !important}.files-fileList tr.animate-opacity{-webkit-transition:opacity 250ms;-moz-transition:opacity 250ms;-o-transition:opacity 250ms;transition:opacity 250ms}.files-fileList tr.dragging{opacity:.2}table td.filename .nametext .innernametext{text-overflow:ellipsis;overflow:hidden;position:relative;vertical-align:top}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}.files-fileList tr td.selection>.selectCheckBox+label:before{opacity:.3;margin-right:0}.files-fileList tr:hover td.selection>.selectCheckBox+label:before,.files-fileList tr:focus td.selection>.selectCheckBox+label:before,.files-fileList tr td.selection>.selectCheckBox:checked+label:before,.files-fileList tr.selected td.selection>.selectCheckBox+label:before{opacity:1}.files-fileList tr.halfselected td.selection>.selectCheckBox+label:before{opacity:.5}.files-fileList tr td.selection>.selectCheckBox+label,.select-all+label{padding:16px}.files-fileList tr td.selection>.selectCheckBox:focus-visible+label,.select-all:focus-visible+label{background-color:var(--color-background-hover);border-radius:var(--border-radius-pill);outline:none !important;border:2px solid var(--color-primary-element) !important;padding:14px}.files-fileList tr td.selection>.selectCheckBox:focus-visible+label,.select-all:focus-visible+label{outline-offset:0px}.files-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}.files-fileList tr td.filename a.name label,.files-fileList tr td.filename p.name label{position:absolute;width:80%;height:50px}.files-fileList tr td.filename .favorite{display:inline-block;float:left}.files-fileList tr td.filename .favorite-mark{position:absolute;display:block;top:-8px;right:-8px;line-height:100%;text-align:center}.files-fileList tr td.filename .favorite-mark.permanent{background-color:var(--color-main-background);mask:var(--icon-star-rounded-white) no-repeat;mask-size:22px 22px;width:22px;height:22px;display:flex;align-content:center;justify-content:center}.files-fileList tr:hover td.filename .favorite-mark.permanent{background-color:var(--color-background-hover)}#uploadsize-message,#delete-confirm{display:none}.fileactions{z-index:50}.busy .fileactions,.busy .action{visibility:hidden}.bubble,#app-navigation .app-navigation-entry-menu{min-width:100px}.files-fileList .icon-loading-small{opacity:1 !important;display:inline !important}.files-fileList .action.action-share-notification span,.files-fileList a.name{cursor:default !important}.files-fileList a.name.disabled *{cursor:default}.files-fileList a.name.disabled a,.files-fileList a.name.disabled a *{cursor:pointer}.files-fileList a.name.disabled:focus{background:none}a.action>img{height:16px;width:16px;vertical-align:text-bottom}a.action.action-editlocally img.icon,a.action.action-setreminder img.icon{filter:var(--background-invert-if-dark)}.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}.files-fileList td a a.action{display:inline;padding:17px 8px;line-height:50px;opacity:.3}.files-fileList td a a.action.action-share{padding:17px 14px}.files-fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared+span{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.files-fileList td a a.action.action-share .avatar{display:inline-block;vertical-align:middle}.files-fileList td a a.action.action-menu{padding-top:17px;padding-bottom:17px;padding-left:14px;padding-right:14px}.files-fileList td a a.action.no-permission:hover,.files-fileList td a a.action.no-permission:focus{opacity:.3}.files-fileList td a a.action.disabled:hover,.files-fileList td a a.action.disabled:focus,.files-fileList td a a.action.disabled img{opacity:.3}.files-fileList td a a.action.disabled.action-download{opacity:.7}.files-fileList td a a.action.disabled.action-download:hover,.files-fileList td a a.action.disabled.action-download:focus{opacity:.7}.files-fileList td a a.action:hover,.files-fileList td a a.action:focus{opacity:1}.files-fileList td a a.action:focus{background-color:var(--color-background-hover);border-radius:var(--border-radius-pill)}.files-fileList td a .fileActionsMenu a.action,.files-fileList td a a.action.action-share.shared-style{opacity:.7}.files-fileList td a .fileActionsMenu .action.permanent{opacity:1}.files-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}.files-fileList .remoteAddress .userDomain{margin-left:0 !important}.files-fileList .favorite-mark.permanent{opacity:1}.files-fileList .fileActionsMenu a.action:hover,.files-fileList .fileActionsMenu a.action:focus,.files-fileList a.action.action-share.shared-style:hover,.files-fileList a.action.action-share.shared-style:focus{opacity:1}.files-fileList tr a.action.disabled{background:none}.selectedActions a.download.disabled,.files-fileList tr a.action.action-download.disabled{color:#000}.files-fileList tr:hover a.action.disabled:hover *{cursor:default}.summary{color:var(--color-text-maxcontrast);height:330px}.files-filestable .summary .filesummary{width:100%;padding-left:101px}#body-public .summary{height:180px}.summary:hover,.summary:focus,.summary,table tr.summary td{background-color:rgba(0,0,0,0)}.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;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:.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}.newFileMenu::after{left:84px !important}.files-controls{box-sizing:border-box;position:-webkit-sticky;position:sticky;height:50px;padding:0;margin:0;background-color:var(--color-main-background-translucent);z-index:62;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;top:0;padding-left:50px}.files-controls .actions>div>.button,.files-controls .actions>div button,.files-controls .actions>.button,.files-controls .actions button{box-sizing:border-box;display:inline-block;display:flex;height:44px;width:44px;padding:9px;align-items:center;justify-content:center}.files-controls .actions>div .button.hidden,.files-controls .actions .button.hidden{display:none}.viewer-mode #app-navigation+#app-content .files-controls{left:0}.files-filestable .filename .action .icon,.files-filestable .selectedActions a .icon,.files-filestable .filename .favorite-mark .icon,.files-controls .actions .button .icon{display:inline-block;vertical-align:middle;background-size:16px 16px}.files-filestable .filename .favorite-mark .icon-star{background-image:none}.files-filestable .filename .favorite-mark .icon-starred{background-image:var(--icon-starred-yellow) !important}.files-filestable .filename .action .icon.hidden,.files-filestable .selectedActions a .icon.hidden,.files-controls .actions .button .icon.hidden{display:none}.files-filestable .filename .action .icon.loading,.files-filestable .selectedActions a .icon.loading,.files-controls .actions .button .icon.loading{width:15px;height:15px}.app-files .actions .button.new{position:relative;width:unset;gap:14px;background-color:var(--color-primary-element-light);color:var(--color-primary-element-light-text);border:unset;padding:0px 20px}.breadcrumb{align-items:center}.breadcrumb .icon-home{border-radius:var(--border-radius)}.breadcrumb .canDrop>a,.files-filestable tbody tr.canDrop{background-color:rgba(0,130,201,.3)}.dropzone-background{background-color:rgba(0,130,201,.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-navigation-item{margin:0 !important;border:none;border-radius:0;background-color:rgba(0,0,0,0);z-index:1;height:44px;display:flex !important;flex-direction:column}.quota-navigation-item__text{height:30px}.quota-navigation-item[href="#"],.quota-navigation-item[href="#"] *{cursor:default !important}.quota-navigation-item__container{height:5px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) thead tr{display:block;border-bottom:1px solid var(--color-border);background-color:var(--color-main-background-translucent)}.files-filestable.view-grid:not(.hidden) thead tr th{width:auto;border:none}.files-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}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden){display:block;position:relative;height:190px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted{background-color:rgba(0,0,0,0)}.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions{background-color:var(--color-background-hover)}.files-filestable.view-grid:not(.hidden) tbody td{display:inline;border-bottom:none}.files-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}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark{left:auto;top:-11px;right:-11px}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name{height:100%;border-radius:var(--border-radius);overflow:hidden;cursor:pointer !important}.files-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}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before{content:"";flex:1;min-width:14px}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after{content:"";flex:1;min-width:44px}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension{display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .system-tags{display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions{height:initial;margin-top:146px;display:flex;align-items:center;position:absolute;right:0}.files-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}.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu){display:none}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img{padding:6px;border-radius:50%}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden{display:block !important}.files-filestable.view-grid:not(.hidden) tbody td.filename form{padding:3px 14px;border-radius:var(--border-radius)}.files-filestable.view-grid:not(.hidden) tbody td.filename form input.filename{width:100%;margin-left:0;cursor:text}.files-filestable.view-grid:not(.hidden) tbody td.filesize,.files-filestable.view-grid:not(.hidden) tbody td.date{display:none}.files-filestable.view-grid:not(.hidden) tbody td.selection,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark{position:absolute;top:-8px;left:-8px;display:flex;z-index:10}.files-filestable.view-grid:not(.hidden) tbody td.selection label,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label{width:44px;height:44px;display:inline-flex;padding:14px}.files-filestable.view-grid:not(.hidden) tbody td.selection label::before,.files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before{margin:0;width:14px;height:14px}.files-filestable.view-grid:not(.hidden) tbody td .popovermenu{left:0;width:150px;margin:0 5px}.files-filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon){overflow:hidden;text-overflow:ellipsis}.files-filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension{display:block}.files-filestable.view-grid:not(.hidden) tfoot{display:grid}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden){display:inline-block;margin:0 auto;height:418px}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td{padding-top:50px}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child,.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date{display:none}.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info{margin-left:0}#view-toggle{background-color:var(--color-main-background-translucent);border:none;margin:0;padding:22px;opacity:.5;float:right;right:var(--default-grid-baseline);top:var(--default-grid-baseline);z-index:100;position:sticky}#view-toggle:hover,#view-toggle:focus,#showgridview:focus+#view-toggle{opacity:1}#view-toggle:focus-visible,#showgridview:focus-visible+#view-toggle{box-shadow:inset 0 0 0 2px var(--color-primary-element) !important}#showgridview{position:fixed;top:0}#body-public .files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext{max-width:124px}#body-public .files-filestable.view-grid:not(.hidden) tbody td .popovermenu{left:-80px}#body-public #view-toggle{position:absolute;right:0;top:0}#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;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:.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:var(--border-radius-pill) 0 0 var(--border-radius-pill);border-right:0;position:relative;float:left;width:200px;height:44px;display:inline-block;text-align:center}#uploadprogressbar .ui-progressbar-value{margin-top:.1em}#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left{height:calc(100% + 2px);top:-2px;left:-1px;position:absolute;overflow:hidden;background-color:var(--color-primary-element)}#uploadprogressbar .label{top:8px;opacity:1;overflow:hidden;white-space:nowrap;font-weight:normal}#uploadprogressbar .label.inner{color:var(--color-primary-element-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:50%}.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:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-moz-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-o-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@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:#fff !important}table th.column-size,table td.filesize,table th.column-mtime,table td.date{display:none}table td{padding:0}table.multiselect thead{padding-left:0}.fileList a.action.action-menu img{padding-left:0}.fileList .fileActionsMenu{margin-right:6px}.fileList a.action-share span:not(.icon):not(.avatar){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}td.filename a.name .system-tags{display:none}#uploadprogressbar,#uploadprogressbar .label.inner{width:50px}#uploadprogressbar .desktop{display:none !important}#uploadprogressbar .mobile{display:block !important}table.dragshadow{z-index:1000}}@media only screen and (max-width: 480px){table th .selectedActions{float:right}table th .selectedActions>a span:not(.icon){display:none}table th .selectedActions a{padding:17px 14px}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:.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;margin-top:-15px}.app-sidebar .thumbnailContainer.large.portrait{margin:0}.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%}.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);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:.7 !important}.app-sidebar .detailList{float:left}.app-sidebar .close{position:absolute;top:0;right:0;opacity:.5;z-index:1;width:44px;height:44px}.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/upload.css b/apps/files/css/upload.css index 458f6b33b342e..38084443189d8 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -1 +1 @@ -#upload{box-sizing:border-box;height:36px;width:39px;padding:0 !important;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:.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:var(--border-radius-pill) 0 0 var(--border-radius-pill);border-right:0;position:relative;float:left;width:200px;height:44px;display:inline-block;text-align:center}#uploadprogressbar .ui-progressbar-value{margin-top:.1em}#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-element)}#uploadprogressbar .label{top:8px;opacity:1;overflow:hidden;white-space:nowrap;font-weight:normal}#uploadprogressbar .label.inner{color:var(--color-primary-element-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:50%}.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:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-moz-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-o-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}/*# sourceMappingURL=upload.css.map */ +#upload{box-sizing:border-box;height:36px;width:39px;padding:0 !important;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:.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:var(--border-radius-pill) 0 0 var(--border-radius-pill);border-right:0;position:relative;float:left;width:200px;height:44px;display:inline-block;text-align:center}#uploadprogressbar .ui-progressbar-value{margin-top:.1em}#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left{height:calc(100% + 2px);top:-2px;left:-1px;position:absolute;overflow:hidden;background-color:var(--color-primary-element)}#uploadprogressbar .label{top:8px;opacity:1;overflow:hidden;white-space:nowrap;font-weight:normal}#uploadprogressbar .label.inner{color:var(--color-primary-element-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:50%}.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:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-moz-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@-o-keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}@keyframes highlightAnimation{0%{background-color:#ffff8c}100%{background-color:rgba(0,0,0,0)}}/*# sourceMappingURL=upload.css.map */ diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index a8f02e9122cbf..cf48d0ccd8a1a 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -54,7 +54,7 @@ } #uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { height: calc(100% + 2px); - top: -1px; + top: -2px; left: -1px; position: absolute; overflow: hidden; diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index a4058fd1ad579..61bd53eb35f3e 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -618,8 +618,10 @@ OC.Uploader.prototype = _.extend({ }); if (!self._uploading) { self.totalToUpload = 0; + self.totalUploadCount = 0; } self.totalToUpload += _.reduce(uploads, function(memo, upload) { return memo+upload.getFile().size; }, 0); + self.totalUploadCount += uploads.length; var semaphore = new OCA.Files.Semaphore(5); var promises = _.map(uploads, function(upload) { return semaphore.acquire().then(function(){ @@ -726,8 +728,9 @@ OC.Uploader.prototype = _.extend({ }, showUploadCancelMessage: _.debounce(function() { - OC.Notification.show(t('files', 'Upload cancelled.'), {timeout : 7, type: 'error'}); + OC.Notification.show(t('files', 'Upload cancelled.'), { timeout : 7000, type: 'error' }); }, 500), + /** * callback for the conflicts dialog */ @@ -1270,14 +1273,25 @@ OC.Uploader.prototype = _.extend({ smoothRemainingSeconds = bufferTotal / bufferSize; } - if (bufferIndex % 4 === 0) { + // the number of currently running uploads + const runningUploads = Object.keys(self._uploads).length; + + // Only show remaining time if enough buffer information is available and debounce to 1/4 + if (bufferFilled && bufferIndex % 4 === 0) { h = moment.duration(smoothRemainingSeconds, "seconds").humanize({m: 50, h: 50}); + if (self.totalUploadCount > 1) { + h = t('files', '{remainingTime} ({currentNumber}/{total})', { remainingTime: h, currentNumber: self.totalUploadCount - runningUploads + 1, total: self.totalUploadCount }); + } } - // wait for the buffer to be at least half filled, approximately takes 3s - if (!(smoothRemainingSeconds >= 0 && smoothRemainingSeconds < 14400) || (bufferFilled == false && bufferIndex < bufferSize/2)) { - // show "Uploading ..." for durations longer than 4 hours - h = t('files', 'Uploading …'); + // wait for the buffer to be filled and also show "Uploading ..." for durations longer than 4 hours + if (!bufferFilled || !(smoothRemainingSeconds >= 0 && smoothRemainingSeconds < 14400)) { + // Do not show file index when there is just one + if (self.totalUploadCount > 1) { + h = t('files', 'Uploading … ({currentNumber}/{total})', { currentNumber: self.totalUploadCount - runningUploads + 1, total: self.totalUploadCount }); + } else { + h = t('files', 'Uploading …'); + } } // smooth bitrate