From 78e2a7e11a42f48319a937a74f5e96119dab34e2 Mon Sep 17 00:00:00 2001 From: JEEEEEEEEEEEEEEEEEEEEEED <118366366+jadjoud@users.noreply.github.com> Date: Sat, 30 Mar 2024 00:24:45 +0000 Subject: [PATCH] Fix #44356 link preview folder icon color Signed-off-by: JEEEEEEEEEEEEEEEEEEEEEED <118366366+jadjoud@users.noreply.github.com> --- apps/files/css/detailsView.css | 140 +- apps/files/css/files.css | 1343 +++++++++++++++++- apps/files/css/files.scss | 300 +++- apps/files/src/views/ReferenceFileWidget.vue | 7 +- 4 files changed, 1707 insertions(+), 83 deletions(-) diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index 847a14a432231..a0b944e70b295 100644 --- a/apps/files/css/detailsView.css +++ b/apps/files/css/detailsView.css @@ -1 +1,139 @@ -.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}/*# sourceMappingURL=detailsView.css.map */ + +/* +* +* @copyright Copyright (c) <2024>, +* +*/ + + +.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 +} + +/*# sourceMappingURL=detailsView.css.map */ \ No newline at end of file diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 9f9307b77b6e8..d33dec52fda29 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -1 +1,1342 @@ -.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}.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}/*# sourceMappingURL=files.css.map */ +/* +* +* @copyright Copyright (c) <2024>, +* +*/ + +.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 +} + +.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 +} + +/*# sourceMappingURL=files.css.map */ \ No newline at end of file diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 194d1542de9ff..6d38d1f78883d 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1,6 +1,7 @@ /** * Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net * @copyright Copyright (c) 2019, Fabian Dreßler + * @copyright Copyright (c) <2024>, * * This file is licensed under the Affero General Public License version 3 or later. * See the COPYING-README file. @@ -16,12 +17,23 @@ display: inline-block; float: left; } -.actions input, .actions button, .actions .button { margin:0; float:left; } -.actions .button a { color: #555; } + +.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); } @@ -30,6 +42,7 @@ position: relative; display: flex; flex: 1 1; + .button:not(:last-child) { margin-right: 3px; width: unset; @@ -54,7 +67,7 @@ } .newFileMenu .error, -.newFileMenu .error + .icon-confirm, +.newFileMenu .error+.icon-confirm, .files-fileList .error { color: var(--color-error); border-color: var(--color-error); @@ -67,10 +80,12 @@ min-width: 250px; display: block; flex-direction: column; + // hide table if emptycontent is not hidden - .emptycontent:not(.hidden) ~ & { + .emptycontent:not(.hidden)~& { display: none; } + // floating header thead { position: -webkit-sticky; @@ -111,7 +126,7 @@ } /* fit app list view heights */ -.app-files #app-content > .viewcontainer { +.app-files #app-content>.viewcontainer { min-height: 0%; width: 100%; } @@ -124,7 +139,9 @@ overflow-anchor: none; } -.file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { +.file-drag, +.file-drag .files-filestable tbody tr, +.file-drag .files-filestable tbody tr:hover { background-color: var(--color-primary-element-light) !important; } @@ -132,11 +149,12 @@ background-color: var(--color-main-background) !important; } -.file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover{ +.file-drag .files-filestable tbody tr, +.file-drag .files-filestable tbody tr:hover { background-color: transparent !important; } -.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{ +.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir { background-color: var(--color-primary-element-light) !important; } @@ -160,6 +178,7 @@ .files-filestable tbody tr { height: 51px; } + .files-filestable tbody tr:hover, .files-filestable tbody tr:focus, .files-filestable tbody .name:focus, @@ -167,6 +186,7 @@ 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, @@ -175,18 +195,26 @@ table tr.mouseOver td { background-color: var(--color-primary-element-light); } -tbody a { color: var(--color-main-text); } +tbody a { + color: var(--color-main-text); +} -span.conflict-path, span.extension, span.uploading, td.date { +span.conflict-path, +span.extension, +span.uploading, +td.date { color: var(--color-text-maxcontrast); } -span.conflict-path, span.extension { + +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, @@ -195,12 +223,15 @@ tr:focus span.extension { color: var(--color-text-maxcontrast); } -table th, table th a { +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; @@ -208,14 +239,17 @@ table th .columntitle { box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: middle; + &: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; @@ -233,15 +267,19 @@ table th .sort-indicator { 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 { + +.multiselect .sort, +.multiselect .sort span { cursor: default; } + table th:hover .sort-indicator.hidden, table th:focus .sort-indicator.hidden { visibility: visible; @@ -253,15 +291,18 @@ table td { 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; /* not really sure why this works better than 100% … table styling */ + width: 9999px; + /* not really sure why this works better than 100% … table styling */ padding: 0; } @@ -273,11 +314,16 @@ table th.column-name { table th.column-selection { padding-top: 2px; } -table th.column-size, table td.filesize { + +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 { + +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; @@ -294,6 +340,7 @@ table th.column-last, table td.column-last { #app-content-deletedshares, #app-content-pendingshares { margin-top: 22px; + thead { top: 0; } @@ -304,14 +351,16 @@ table.multiselect thead th { font-weight: bold; } -#app-content.with-app-sidebar table.multiselect thead{ +#app-content.with-app-sidebar table.multiselect thead { margin-right: 27%; } table.multiselect .column-name { position: relative; - width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ + width: 9999px; + /* when we use 100%, the styling breaks on mobile … table styling */ } + table.multiselect .column-mtime>a { display: none; } @@ -322,16 +371,19 @@ 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 … */ + 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; @@ -339,14 +391,17 @@ table td.filename .thumbnail-wrapper { max-width: 50px; height: 50px; } + table td.filename .thumbnail-wrapper.icon-loading-small { &:after { z-index: 10; } + .thumbnail { opacity: 0.2; } } + table td.filename .thumbnail { display: inline-block; width: 32px; @@ -360,7 +415,10 @@ table td.filename .thumbnail { cursor: pointer; position: absolute; z-index: 4; + background-color: var(--primary-color); + /* Set the background color to the primary color */ } + table td.filename p.name .thumbnail { cursor: default; } @@ -375,16 +433,32 @@ table:not(.view-grid) td.filename input.filename { 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; } +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; +} -.modified, .column-last>span:first-child { +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; @@ -395,6 +469,7 @@ table td.filename .nametext, .modified, .column-last>span:first-child { float:le table { td.filename { max-width: 0; + .nametext { width: 0; flex-grow: 1; @@ -415,11 +490,12 @@ table { } .files-fileList tr.animate-opacity { - -webkit-transition:opacity 250ms; - -moz-transition:opacity 250ms; - -o-transition:opacity 250ms; - transition:opacity 250ms; + -webkit-transition: opacity 250ms; + -moz-transition: opacity 250ms; + -o-transition: opacity 250ms; + transition: opacity 250ms; } + .files-fileList tr.dragging { opacity: 0.2; } @@ -457,32 +533,32 @@ table td.selection { } /* File checkboxes */ -.files-fileList tr td.selection>.selectCheckBox + label:before { +.files-fileList tr td.selection>.selectCheckBox+label:before { opacity: 0.3; margin-right: 0; } /* Show checkbox with full opacity when hovering, checked, or selected */ -.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 { +.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; } /* Show checkbox with half opacity when selecting range */ -.files-fileList tr.halfselected td.selection>.selectCheckBox + label:before { +.files-fileList tr.halfselected td.selection>.selectCheckBox+label:before { opacity: 0.5; } /* Use label to have bigger clickable size for checkbox */ .files-fileList tr td.selection>.selectCheckBox, .select-all { - & + label { + &+label { padding: 16px; } - &:focus-visible + label { + &:focus-visible+label { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); outline: none !important; @@ -491,8 +567,8 @@ table td.selection { } } -.files-fileList tr td.selection>.selectCheckBox:focus-visible + label, -.select-all:focus-visible + label { +.files-fileList tr td.selection>.selectCheckBox:focus-visible+label, +.select-all:focus-visible+label { outline-offset: 0px; } @@ -500,8 +576,11 @@ table td.selection { 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; + 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, @@ -515,6 +594,7 @@ table td.selection { display: inline-block; float: left; } + .files-fileList tr td.filename .favorite-mark { position: absolute; display: block; @@ -522,6 +602,7 @@ table td.selection { right: -8px; line-height: 100%; text-align: center; + &.permanent { // Create background around the favorite marker to ensure there is enough contrast background-color: var(--color-main-background); @@ -535,18 +616,23 @@ table td.selection { justify-content: center; } } + .files-fileList tr:hover td.filename .favorite-mark.permanent { background-color: var(--color-background-hover); } -#uploadsize-message,#delete-confirm { display:none; } +#uploadsize-message, +#delete-confirm { + display: none; +} /* File actions */ .fileactions { z-index: 50; } -.busy .fileactions, .busy .action { +.busy .fileactions, +.busy .action { visibility: hidden; } @@ -562,7 +648,8 @@ table td.selection { display: inline !important; } -.files-fileList .action.action-share-notification span, .files-fileList a.name { +.files-fileList .action.action-share-notification span, +.files-fileList a.name { cursor: default !important; } @@ -574,7 +661,8 @@ table td.selection { cursor: default; } - a, a * { + a, + a * { cursor: pointer; } @@ -583,7 +671,7 @@ table td.selection { } } -a.action > img { +a.action>img { height: 16px; width: 16px; vertical-align: text-bottom; @@ -598,13 +686,15 @@ a.action.action-setreminder { /* Actions for selected files */ .selectedActions { - position: relative; - display: inline-block; - vertical-align: middle; + position: relative; + display: inline-block; + vertical-align: middle; } + .selectedActions.hidden { - display: none; + display: none; } + .selectedActions a { display: inline; line-height: 50px; @@ -614,8 +704,9 @@ a.action.action-setreminder { .selectedActions a.hidden { display: none; } + .selectedActions a img { - position:relative; + position: relative; vertical-align: text-bottom; margin-bottom: -1px; } @@ -630,57 +721,76 @@ a.action.action-setreminder { padding: 17px 8px; line-height: 50px; opacity: .3; + &.action-share { padding: 17px 14px; - &.permanent:not(.shared-style) .icon-shared + span { + + &.permanent:not(.shared-style) .icon-shared+span { /* hide text of the share action */ /* .hidden-visually for accessbility */ position: absolute; - left:-10000px; + left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } + .avatar { display: inline-block; vertical-align: middle; } } + &.action-menu { padding-top: 17px; padding-bottom: 17px; padding-left: 14px; padding-right: 14px; } + &.no-permission { - &:hover, &:focus { + + &:hover, + &:focus { opacity: .3; } } + &.disabled { - &:hover, &:focus, + + &:hover, + &:focus, img { opacity: .3; } + &.action-download { opacity: .7; - &:hover, &:focus { + + &:hover, + &:focus { opacity: .7; } } } - &:hover, &:focus { + + &:hover, + &:focus { opacity: 1; } + &:focus { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); } } - .fileActionsMenu a.action, a.action.action-share.shared-style { + + .fileActionsMenu a.action, + a.action.action-share.shared-style { opacity: .7; } + .fileActionsMenu .action.permanent { opacity: 1; } @@ -731,50 +841,59 @@ a.action.action-setreminder { $action-menu-items-count: 7; // list view has currently max 7 items in its action menu height: 44px * ($action-menu-items-count + 0.5); // 0.5 is added to show some whitespace below } + .files-filestable .summary .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; + width: auto; z-index: 2000; } + table.dragshadow td.filename { - padding-left:60px; - padding-right:16px; + 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; + padding-right: 8px; } + .mask { z-index: 50; position: absolute; @@ -792,7 +911,8 @@ table.dragshadow td.size { -ms-transition: opacity 100ms; -webkit-transition: opacity 100ms; } -.mask.transparent{ + +.mask.transparent { opacity: 0; } @@ -815,23 +935,29 @@ table.dragshadow td.size { box-sizing: border-box; position: -webkit-sticky; position: sticky; - height: 50px; /* height of the nav toggle button; */ + height: 50px; + /* height of the nav toggle button; */ padding: 0; margin: 0; background-color: var(--color-main-background-translucent); - z-index: 62; /* must be above the filelist sticky header and texteditor menubar */ + z-index: 62; + /* must be above the filelist sticky header and texteditor menubar */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: flex; top: 0; - padding-left: 50px; /* width of the nav toggle button; */ + padding-left: 50px; + /* width of the nav toggle button; */ .actions { - > div, + + >div, & { - > .button, button { + + >.button, + button { box-sizing: border-box; display: inline-block; display: flex; @@ -841,6 +967,7 @@ table.dragshadow td.size { align-items: center; justify-content: center; } + .button.hidden { display: none; } @@ -850,7 +977,7 @@ table.dragshadow td.size { /* position controls for apps with app-navigation */ -.viewer-mode #app-navigation + #app-content .files-controls { +.viewer-mode #app-navigation+#app-content .files-controls { left: 0; } @@ -864,11 +991,13 @@ table.dragshadow td.size { } .files-filestable .filename .favorite-mark { + // Override default icons to always hide the star icon and always show the // starred icon even when hovered or focused. & .icon-star { background-image: none; } + & .icon-starred { background-image: var(--icon-starred-yellow) !important; } @@ -905,13 +1034,15 @@ table.dragshadow td.size { } } -.breadcrumb .canDrop > a, +.breadcrumb .canDrop>a, .files-filestable tbody tr.canDrop { - background-color: rgba( variables.$color-primary, .3 ); + background-color: rgba(variables.$color-primary, .3); } + .dropzone-background { - background-color: rgba( variables.$color-primary, .3 ); - :hover{ + background-color: rgba(variables.$color-primary, .3); + + :hover { box-shadow: none !important; } } @@ -941,7 +1072,7 @@ table.dragshadow td.size { border: none; border-radius: 0; background-color: transparent; - z-index:1; + z-index: 1; height: 44px; display: flex !important; flex-direction: column; @@ -951,8 +1082,10 @@ table.dragshadow td.size { } &[href='#'] { + // if no link is set, no mouse feedback - &, * { + &, + * { cursor: default !important; } } @@ -974,6 +1107,7 @@ table.dragshadow td.size { display: block; border-bottom: 1px solid var(--color-border); background-color: var(--color-main-background-translucent); + th { width: auto; border: none; @@ -996,7 +1130,9 @@ table.dragshadow td.size { height: $grid-size + 44px - $grid-pad; border-radius: var(--border-radius); - &:hover, &:focus, &:active, + &:hover, + &:focus, + &:active, &.selected, &.searchresult, .name:focus, @@ -1087,11 +1223,13 @@ table.dragshadow td.size { text-overflow: ellipsis; white-space: nowrap; } + &:before { content: ''; flex: 1; min-width: 14px; } + &:after { content: ''; flex: 1; @@ -1134,19 +1272,23 @@ table.dragshadow td.size { } .fileActionsMenu { + // force show the sharing entry in the dropdown menu .action-share-container.hidden { display: block !important; + // avatar in shared by user dropdown menu .action-share img { padding: 6px; border-radius: 50%; } } + // force show the sharing entry in the dropdown menu .action-restore-container.hidden { display: block !important; } + // force show the sharing entry in the dropdown menu .action-comment-container.hidden { display: block !important; @@ -1184,6 +1326,7 @@ table.dragshadow td.size { height: 44px; display: inline-flex; padding: $grid-pad; // like any action icon + &::before { margin: 0; width: $grid-pad; // 16px - border @@ -1230,7 +1373,7 @@ table.dragshadow td.size { } .info { - margin-left: 0; + margin-left: 0; } } } @@ -1252,12 +1395,12 @@ table.dragshadow td.size { &:hover, &:focus, - #showgridview:focus + & { + #showgridview:focus+& { opacity: 1; } &:focus-visible, - #showgridview:focus-visible + & { + #showgridview:focus-visible+& { box-shadow: inset 0 0 0 2px var(--color-primary-element) !important; } } @@ -1275,6 +1418,7 @@ table.dragshadow td.size { /* Adjustments for link share page */ #body-public { .files-filestable.view-grid:not(.hidden) tbody td { + /* More space for filename since there is no share icon */ &.filename .name .nametext .innernametext { max-width: 124px; @@ -1318,4 +1462,4 @@ table.dragshadow td.size { min-width: 0; margin: 0 12px; } -} +} \ No newline at end of file diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue index c96e173741814..328a4801b0ff3 100644 --- a/apps/files/src/views/ReferenceFileWidget.vue +++ b/apps/files/src/views/ReferenceFileWidget.vue @@ -1,6 +1,6 @@