@jfvilas/react-file-manager 1.1.7 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -1 +1,1131 @@
1
- @import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";.loader-container{position:absolute;display:flex;justify-content:center;align-items:center;height:-webkit-fill-available;width:-webkit-fill-available;background-color:#00000080;z-index:1000}.spinner{font-size:3rem;color:#fff;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.upload-loading{position:relative;display:block;background-color:transparent;z-index:0}.upload-loading .spinner{font-size:.9rem;color:#000}.toolbar{height:35px;min-height:35px;max-height:35px;border-bottom:1px solid #cfcfcf;padding:5px 10px}.toolbar .file-action-container{display:flex;justify-content:space-between}.toolbar .file-action-container>div{display:flex}.toolbar .file-action-container .file-action{background-color:transparent;gap:5px}.toolbar .file-action-container .file-action:hover:not(:disabled){cursor:pointer;background-color:#0000008c!important;border-radius:3px;color:#fff;text-shadow:0px 0px 1px white}.toolbar .file-action-container .file-action:hover:disabled{cursor:default;background-color:transparent!important;color:#b0b0b0;text-shadow:none}.toolbar .fm-toolbar{display:flex;justify-content:space-between}.toolbar .fm-toolbar>div{display:flex;position:relative}.toolbar .fm-toolbar .toolbar-left-items{display:flex}.toolbar .fm-toolbar .toggle-view{position:absolute;z-index:3;top:105%;right:22%;background-color:#fff;margin:0;border:1px solid #c4c4c4;border-radius:5px;font-size:16px;width:160px}.toolbar .fm-toolbar .toggle-view ul{list-style:none;padding-left:0;margin:.4em 0;display:flex;flex-direction:column;gap:1px}.toolbar .fm-toolbar .toggle-view ul li{display:flex;align-items:center;gap:8px;padding:5px 20px 5px 10px}.toolbar .fm-toolbar .toggle-view ul li:hover{cursor:pointer;background-color:#00000013}.toolbar .fm-toolbar .toggle-view ul li span:nth-child(1){width:13px}.toolbar .item-action{background-color:#fff;display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:14px;width:fit-content;border:none}.toolbar .item-action:hover{cursor:pointer;background-color:#0000001f!important;border-radius:3px}.toolbar .item-action .toggle-view-icon{background-color:transparent;border:none}.toolbar .item-action .toggle-view-icon:hover{cursor:pointer}.toolbar .icon-only{padding:0 8px!important}.toolbar .icon-only:focus{background-color:#0000001f;border-radius:3px}.toolbar .icon-only:hover{color:var(--file-manager-primary-color)}.toolbar .item-separator{height:36px;background:#cfcfcf;width:1px;margin:0 5px}.file-selected{background-color:#0000000d}.sb-folders-list{list-style:none;margin:0 4px;height:100%;font-size:16px;overflow-y:auto!important}.sb-folders-list::-webkit-scrollbar{width:5px;height:8px;padding-top:2px}.sb-folders-list::-webkit-scrollbar-thumb{background:var(--file-manager-primary-color)!important;border-radius:8px}.sb-folders-list .folder-collapsible{margin-left:10px}.sb-folders-list .sb-folders-list-item{display:flex;align-items:center;margin-bottom:4px;padding:6px 5px;border-radius:4px}.sb-folders-list .sb-folders-list-item:hover{cursor:pointer;background-color:#0000000d}.sb-folders-list .sb-folders-list-item .non-expanable{min-width:20px}.sb-folders-list .sb-folders-list-item .sb-folder-details{display:flex;align-items:center}.sb-folders-list .sb-folders-list-item .sb-folder-details .folder-open-icon{margin:0 7px}.sb-folders-list .sb-folders-list-item .sb-folder-details .folder-close-icon{margin:1px 9px 0 8px}.sb-folders-list .sb-folders-list-item .sb-folder-details .sb-folder-name{width:max-content}.sb-folders-list .sb-folders-list-item .folder-icon-default{transform:rotate(0);transition:transform .5s ease-in-out}.sb-folders-list .sb-folders-list-item .folder-icon-default.folder-rotate-down{transform:rotate(90deg)}.sb-folders-list .active-list-item{background-color:var(--file-manager-primary-color);color:#fff}.sb-folders-list .active-list-item:hover{cursor:pointer;background-color:var(--file-manager-primary-color)}.sb-folders-list .empty-nav-pane{display:flex;justify-content:center;align-items:center;height:100%}.bread-crumb-container{position:relative;font-size:16px}.bread-crumb-container .breadcrumb{height:22px;min-height:22px;max-height:22px;display:flex;gap:.5rem;border-bottom:1px solid #cfcfcf;padding:6px 0 6PX 15px;overflow-x:hidden}.bread-crumb-container .breadcrumb::-webkit-scrollbar{height:3px}.bread-crumb-container .breadcrumb::-webkit-scrollbar-thumb{background:var(--file-manager-primary-color)!important}.bread-crumb-container .breadcrumb .nav-toggler{display:flex;align-items:center}.bread-crumb-container .breadcrumb .divider{width:1px;background-color:#cfcfcf}.bread-crumb-container .breadcrumb .folder-name{display:flex;align-items:center;gap:.25rem;font-weight:500;min-width:fit-content}.bread-crumb-container .breadcrumb .folder-name:hover{cursor:pointer;color:var(--file-manager-primary-color)}.bread-crumb-container .breadcrumb .hidden-folders{padding:0 4px}.bread-crumb-container .breadcrumb .folder-name-btn{background-color:transparent;border:none;padding:0}.bread-crumb-container .breadcrumb .folder-name-btn:hover,.bread-crumb-container .breadcrumb .folder-name-btn:focus{cursor:pointer;color:var(--file-manager-primary-color);background-color:#dddcdc;border-radius:5px}.hidden-folders-container{position:absolute;margin:0;z-index:2;background-color:#636363;color:#fff;padding:4px;border-radius:5px;font-size:.9em;left:3rem;display:flex;flex-direction:column;gap:5px}.hidden-folders-container li{padding:5px 10px;border-radius:4px}.hidden-folders-container li:hover{cursor:pointer;background-color:#757575}.search-input{border-top:0;border-left:0;border-right:0;border-bottom:1px solid #999;font-family:var(--file-manager-font-family);outline:none;padding-right:18px;margin-right:12px;box-shadow:none;box-sizing:border-box;width:120;min-width:120;max-width:120}.rename-file{position:relative;min-width:69%;max-width:-webkit-fill-available;text-align:center;border:4px solid var(--file-manager-primary-color);border-radius:10px;font-size:15px;font-family:var(--file-manager-font-family);padding:1px 7px;resize:none;field-sizing:content;overflow-y:hidden;z-index:1}.rename-file:focus{outline:none}.error-tooltip{position:absolute;z-index:1;bottom:-68px;left:16px;padding:8px;width:292px;border-radius:5px;background-color:#696969;text-align:left;margin:0;font-size:.9em}.error-tooltip:before{content:"";position:absolute;top:-20%;rotate:-45deg;border:15px solid #696969;border-color:transparent #696969 transparent transparent}.error-tooltip.right{left:16px}.error-tooltip.right:before{left:11%}.error-tooltip.left{left:-180px}.error-tooltip.left:before{left:76%;transform:rotate(90deg) scaleX(-1)}.error-tooltip.top{bottom:unset!important;top:-68px}.error-tooltip.top:before{content:none}.error-tooltip.top:after{content:"";position:absolute;bottom:-20%;left:11%;rotate:-45deg;border:15px solid #696969;border-color:transparent transparent #696969 transparent}.error-tooltip.top.left:after{left:76%;transform:rotate(90deg) scaleX(-1)}.fm-button{border-radius:5px;font-weight:600;border:none}.fm-button:hover{cursor:pointer}.fm-button-primary{background-color:var(--file-manager-primary-color);color:#fff}.fm-button-primary:hover{background-image:linear-gradient(#0003,#0003)}.fm-button-secondary{background-color:#f0f0f0;color:#000}.fm-button-secondary:hover{background-image:linear-gradient(#0000001a,#0000001a)}.fm-button-danger{background-color:#f44336;color:#fff}.fm-button-danger:hover{background-image:linear-gradient(#0003,#0003)}.fm-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #cfcfcf;padding:.3rem 1rem;font-size:16px}.fm-modal-header .fm-modal-heading{margin:0;font-weight:700;color:#000}.dialog[open]{animation:expand .4s forwards}.dialog[open]::backdrop{background:#00000080}@keyframes expand{0%{transform:scale(.4)}to{transform:scale(1)}}.fm-checkbox{accent-color:white}.fm-checkbox:disabled{cursor:default!important}.fm-checkbox:hover{cursor:pointer}.fm-context-menu{position:absolute;background-color:#fff;border:1px solid #c6c6c6;border-radius:6px;padding:4px;z-index:1;transition:opacity .1s linear;font-size:16px}.fm-context-menu .file-context-menu-list{font-size:1.1em}.fm-context-menu .file-context-menu-list ul{list-style-type:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:3px}.fm-context-menu .file-context-menu-list ul li{display:flex;gap:9px;align-items:center;padding:3px 13px;position:relative;border-radius:4px}.fm-context-menu .file-context-menu-list ul li:hover{cursor:pointer;background-color:#00000012}.fm-context-menu .file-context-menu-list ul li.active{background-color:#00000012}.fm-context-menu .file-context-menu-list ul li.disable-paste{opacity:.5}.fm-context-menu .file-context-menu-list ul li.disable-paste:hover{cursor:default;background-color:transparent}.fm-context-menu .file-context-menu-list .divider{border-bottom:1px solid #c6c6c6;margin:5px 0 3px}.fm-context-menu .file-context-menu-list .list-expand-icon{margin-left:auto;color:#444}.fm-context-menu .file-context-menu-list .sub-menu{position:absolute;top:0;background-color:#fff;border:1px solid #c6c6c6;border-radius:6px;padding:4px;z-index:1}.fm-context-menu .file-context-menu-list .sub-menu .item-selected{width:13px;color:#444}.fm-context-menu .file-context-menu-list .sub-menu li:hover{background-color:#00000012!important}.fm-context-menu .file-context-menu-list .sub-menu.right{left:calc(100% - 2px)}.fm-context-menu .file-context-menu-list .sub-menu.left{left:-83%}.fm-context-menu.hidden{opacity:0;pointer-events:none;visibility:hidden}.fm-context-menu.visible{opacity:1;pointer-events:all;visibility:visible}.files{position:relative;display:flex;align-content:flex-start;flex-wrap:wrap;column-gap:.5em;row-gap:5px;border-style:solid!important;border-color:#cfcfcf!important;border-top:0;border-left:0;border-right:0;border-bottom:1px;overflow-y:auto!important}.files::-webkit-scrollbar{width:5px;height:8px;padding-top:2px}.files::-webkit-scrollbar-thumb{background:var(--file-manager-primary-color)!important;border-radius:8px}.files{padding-right:4px;font-size:16px}.files .drag-move-tooltip{background-color:#fff;font-size:.78em;position:fixed;text-wrap:nowrap;border:1px dashed black;padding:1px 5px 2px 24px;border-radius:3px;font-weight:700;color:var(--file-manager-primary-color);z-index:2}.files .drag-move-tooltip .drop-zone-file-name{color:#303030}.files .file-item-container{border-radius:5px;margin:5px 0}.files .file-item-container .drag-icon{position:absolute!important;top:-1000px;left:-1000px;z-Index:-1;border-radius:4px;position:relative;color:#fff;background-color:var(--file-manager-primary-color);padding:3px 8px}.files .file-item-container.file-drop-zone{background-color:#00000014!important}.files .file-item{position:relative;height:81px;width:138px;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:space-between;padding-top:13px;padding-bottom:1px;border-radius:5px}.files .file-item:hover{background-color:#0000000d}.files .file-item .selection-checkbox{position:absolute;left:5px;top:8px}.files .file-item .hidden{visibility:hidden}.files .file-item .visible{visibility:visible}.files .file-item .rename-file-container{position:absolute;top:65px;width:100%;text-align:center}.files .file-item .rename-file-container.list{top:6px;left:58px;text-align:left}.files .file-item .rename-file-container.list .rename-file{min-width:15%;text-align:left;border-radius:3px;border:none;top:5px;white-space:nowrap;overflow-x:hidden;max-width:calc(100% - 62px)}.files .file-item .rename-file-container.list .folder-name-error.right{left:0;bottom:-72px}.files .file-item .file-name{max-width:115px}.files .file-selected{background-color:var(--file-manager-primary-color);color:#fff}.files .file-selected:hover{background-color:var(--file-manager-primary-color)}.files .file-moving{opacity:.5}.files.list{flex-direction:column;flex-wrap:nowrap;gap:0;padding-left:0;padding-top:0}.files.list .files-header{font-size:.83em;font-weight:600;display:flex;gap:5px;border-bottom:1px solid #dddddd;padding:4px 0 4px 5px;position:sticky;top:0;background-color:#f5f5f5;z-index:1}.files.list .files-header .file-select-all{width:5%;height:.83em}.files.list .files-header .file-name{width:calc(65% - 35px);padding-left:35px;cursor:pointer;-webkit-user-select:none;user-select:none}.files.list .files-header .file-name:hover{background-color:#0000001a}.files.list .files-header .file-name.active{background-color:#007bff1a;color:#007bff}.files.list .files-header .file-date{text-align:center;width:20%;cursor:pointer;-webkit-user-select:none;user-select:none}.files.list .files-header .file-date:hover{background-color:#0000001a}.files.list .files-header .file-date.active{background-color:#007bff1a;color:#007bff}.files.list .files-header .file-size{text-align:center;width:10%;cursor:pointer;-webkit-user-select:none;user-select:none}.files.list .files-header .file-size:hover{background-color:#0000001a}.files.list .files-header .file-size.active{background-color:#007bff1a;color:#007bff}.files.list .files-header .sort-indicator{font-size:.8em;margin-left:4px}.files.list .file-item-container{display:flex;width:100%;margin:0;border-radius:0}.files.list .file-item-container:hover{background-color:#0000000a}.files.list .file-item-container.file-selected:hover{background-color:var(--file-manager-primary-color)!important}.files.list .file-item{flex-direction:row;height:13px;justify-content:unset;padding:15px 15px 15px 33px;margin:0;width:calc(70% - 30px)}.files.list .file-item:hover{background-color:unset}.files.list .file-item .selection-checkbox{top:12px}.files.list .file-item .file-name{max-width:285px}.files.list .modified-date{display:flex;align-items:center;justify-content:center;font-size:.8em;width:20%}.files.list .size{display:flex;align-items:center;justify-content:center;font-size:.8em;width:10%}.empty-folder{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.statusbar{padding-top:2px;padding-left:4px;border-bottom-right-radius:8px;font-size:12px}.file-delete-confirm .file-delete-confirm-text{border-bottom:1px solid #dddddd;padding:15px;margin-top:0;margin-bottom:.7rem;word-wrap:break-word;font-weight:500;font-size:16px}.file-delete-confirm .file-delete-confirm-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.7rem;margin-right:1rem}.fm-progress{display:flex;flex-direction:column;gap:5px}.fm-progress .fm-progress-bar{width:100%;border-radius:5px;background-color:#c6c6c6;height:5px}.fm-progress .fm-progress-bar .fm-progress-bar-fill{height:100%;background-color:var(--file-manager-primary-color);border-radius:5px;max-width:100%}.fm-progress .fm-progress-status{font-size:.75em;font-weight:600;display:flex;justify-content:space-between}.fm-progress .fm-upload-canceled{font-size:.75em;font-weight:600;color:red}.fm-upload-file{padding:18px 15px;display:flex;gap:18px;font-size:16px}.fm-upload-file .select-files{width:100%}.fm-upload-file .select-files .draggable-file-input{color:#696969;background-color:#f7f7f7;margin-bottom:18px;height:220px;border:2px dashed #ccc;border-radius:5px;display:flex;justify-content:center;align-items:center}.fm-upload-file .select-files .draggable-file-input .input-text{pointer-events:none;display:flex;flex-direction:column;align-items:center}.fm-upload-file .select-files .draggable-file-input:hover,.fm-upload-file .select-files .draggable-file-input.dragging{border-color:var(--file-manager-primary-color)}.fm-upload-file .select-files .btn-choose-file{display:flex;justify-content:center}.fm-upload-file .select-files .btn-choose-file label{display:inline-block;padding:.4rem .8rem}.fm-upload-file .select-files .btn-choose-file label:hover{cursor:pointer}.fm-upload-file .select-files .btn-choose-file .choose-file-input{display:none}.fm-upload-file .files-progress{width:calc(60% - 18px)}.fm-upload-file .files-progress .heading{display:flex;gap:4px}.fm-upload-file .files-progress h2{font-size:.9em;margin:0}.fm-upload-file .files-progress ul{padding-left:0;padding-right:5px;padding-bottom:10px;margin-top:.7rem;height:220px;overflow-y:auto!important}.fm-upload-file .files-progress ul::-webkit-scrollbar{width:5px;height:8px;padding-top:2px}.fm-upload-file .files-progress ul::-webkit-scrollbar-thumb{background:var(--file-manager-primary-color)!important;border-radius:8px}.fm-upload-file .files-progress ul{font-weight:500}.fm-upload-file .files-progress ul li{list-style:none;border-bottom:1px solid #c6c6c6;display:flex;gap:10px;margin-bottom:18px;padding-bottom:12px}.fm-upload-file .files-progress ul li .file-icon{width:10%}.fm-upload-file .files-progress ul li .file{width:86%}.fm-upload-file .files-progress ul li .file .file-details{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.fm-upload-file .files-progress ul li .file .file-details .file-info{width:90%;display:flex;align-items:baseline}.fm-upload-file .files-progress ul li .file .file-details .file-info .file-name{display:inline-block;max-width:66%;margin-right:8px}.fm-upload-file .files-progress ul li .file .file-details .file-size{font-size:.7em}.fm-upload-file .files-progress ul li .file .file-details .retry-upload{padding:3px;border-radius:50%}.fm-upload-file .files-progress ul li .file .file-details .retry-upload:hover{cursor:pointer;background-color:#00000012;color:var(--file-manager-primary-color)}.fm-upload-file .files-progress ul li .file .file-details .rm-file:hover{cursor:pointer;color:red}.fm-upload-file .files-progress ul li .file .file-details .upload-success{color:var(--file-manager-primary-color)}.file-previewer{padding:.8em;height:40dvh;display:flex;justify-content:center;font-size:16px}.file-previewer .photo-popup-image{object-fit:contain;width:-webkit-fill-available;opacity:1;transition:opacity .5s ease-in-out}.file-previewer .img-loading{opacity:0;height:0%;width:0%}.file-previewer .img-loading{height:0}.file-previewer .audio-preview{align-self:center;width:60%}.file-previewer .photo-popup-iframe{width:-webkit-fill-available}.file-previewer .preview-error{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px}.file-previewer .preview-error .error-icon{color:#494949}.file-previewer .preview-error .error-msg{font-weight:500;font-size:1.1em;margin-bottom:4px}.file-previewer .preview-error .file-info{display:flex;gap:6px;align-items:center;margin:1px 0 5px}.file-previewer .preview-error .file-info .file-name{padding:4px 15px;background-color:#e9e9e9;border:1px solid rgb(163,173,173);border-radius:3px}.file-previewer .preview-error .file-info .file-size{font-size:.8em}.file-previewer .preview-error .download-btn{display:flex;gap:3px;align-items:center}.file-previewer.pdf-previewer{height:85dvh}.video-preview{width:-webkit-fill-available}.text-white{color:#fff}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}img,svg{vertical-align:middle}.fm-modal{border:1px solid #c6c6c6;border-radius:5px;width:fit-content;overflow-x:hidden;padding:0;box-shadow:0 2px 10px #00000041}.w-25{width:25%}.file-explorer{min-height:400px;height:100%;width:100%;font-family:var(--file-manager-font-family);border:1px solid #cfcfcf;border-radius:8px}.file-explorer button{font-family:var(--file-manager-font-family)}.file-explorer{position:relative;background-color:#fff;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.file-explorer .files-container{display:flex;height:calc(100% - 46px)}.file-explorer .files-container .navigation-pane{z-index:1;padding-top:8px;position:relative}.file-explorer .files-container .navigation-pane .sidebar-resize{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;border-right:1px solid #cfcfcf}.file-explorer .files-container .navigation-pane .sidebar-resize:hover,.file-explorer .files-container .navigation-pane .sidebar-dragging{border-right:1px solid #1e3a8a}.file-explorer .files-container .navigation-pane.open{display:block}.file-explorer .files-container .navigation-pane.closed{display:none}.file-explorer .files-container .folders-preview{z-index:2;background-color:#fff;padding-right:0;padding-left:0;border-bottom-right-radius:8px;border-bottom-left-radius:0}.close-icon{padding:5px;border-radius:50%}.close-icon:hover{cursor:pointer;background-color:#00000012}.fm-rename-folder-container{padding:8px 0;text-align:left}.fm-rename-folder-container .fm-rename-folder-input{border-bottom:1px solid #c6c6c6;padding:8px 12px 12px}.fm-rename-folder-container .fm-rename-folder-input .fm-rename-warning{display:flex;align-items:center;gap:10px}.fm-rename-folder-container .fm-rename-folder-action{display:flex;gap:8px;justify-content:flex-end;padding:8px 8px 0 0}.file-selcted .select-files{width:40%}
1
+ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");.loader-container {
2
+ position: absolute;
3
+ display: flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ height: -webkit-fill-available;
7
+ width: -webkit-fill-available;
8
+ background-color: rgba(0, 0, 0, 0.5);
9
+ z-index: 1000;
10
+ }
11
+
12
+ .spinner {
13
+ font-size: 3rem;
14
+ color: white;
15
+ animation: spin 1s linear infinite;
16
+ }
17
+
18
+ @keyframes spin {
19
+ 0% {
20
+ transform: rotate(0deg);
21
+ }
22
+ 100% {
23
+ transform: rotate(360deg);
24
+ }
25
+ }
26
+ .upload-loading {
27
+ position: relative;
28
+ display: block;
29
+ background-color: transparent;
30
+ z-index: 0;
31
+ }
32
+ .upload-loading .spinner {
33
+ font-size: 0.9rem;
34
+ color: black;
35
+ }.toolbar {
36
+ height: 35px;
37
+ min-height: 35px;
38
+ max-height: 35px;
39
+ border-bottom: 1px solid #cfcfcf;
40
+ padding: 5px 10px;
41
+ }
42
+ .toolbar .file-action-container {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ }
46
+ .toolbar .file-action-container > div {
47
+ display: flex;
48
+ }
49
+ .toolbar .file-action-container .file-action {
50
+ background-color: transparent;
51
+ gap: 5px;
52
+ }
53
+ .toolbar .file-action-container .file-action:hover:not(:disabled) {
54
+ cursor: pointer;
55
+ background-color: rgba(0, 0, 0, 0.55) !important;
56
+ border-radius: 3px;
57
+ color: white;
58
+ text-shadow: 0px 0px 1px white;
59
+ }
60
+ .toolbar .file-action-container .file-action:hover:disabled {
61
+ cursor: default;
62
+ background-color: transparent !important;
63
+ color: #b0b0b0;
64
+ text-shadow: none;
65
+ }
66
+ .toolbar .fm-toolbar {
67
+ display: flex;
68
+ justify-content: space-between;
69
+ }
70
+ .toolbar .fm-toolbar > div {
71
+ display: flex;
72
+ position: relative;
73
+ }
74
+ .toolbar .fm-toolbar .toolbar-left-items {
75
+ display: flex;
76
+ }
77
+ .toolbar .fm-toolbar .toggle-view {
78
+ position: absolute;
79
+ z-index: 3;
80
+ top: 105%;
81
+ right: 22%;
82
+ background-color: white;
83
+ margin: 0;
84
+ border: 1px solid #c4c4c4;
85
+ border-radius: 5px;
86
+ font-size: 16px;
87
+ width: 160px;
88
+ }
89
+ .toolbar .fm-toolbar .toggle-view ul {
90
+ list-style: none;
91
+ padding-left: 0;
92
+ margin: 0.4em 0;
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: 1px;
96
+ }
97
+ .toolbar .fm-toolbar .toggle-view ul li {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 8px;
101
+ padding: 5px 20px 5px 10px;
102
+ }
103
+ .toolbar .fm-toolbar .toggle-view ul li:hover {
104
+ cursor: pointer;
105
+ background-color: rgba(0, 0, 0, 0.075);
106
+ }
107
+ .toolbar .fm-toolbar .toggle-view ul li span:nth-child(1) {
108
+ width: 13px;
109
+ }
110
+ .toolbar .item-action {
111
+ background-color: white;
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 7px;
115
+ padding: 8px 12px;
116
+ font-size: 14px;
117
+ width: fit-content;
118
+ border: none;
119
+ }
120
+ .toolbar .item-action:hover {
121
+ cursor: pointer;
122
+ background-color: rgba(0, 0, 0, 0.12) !important;
123
+ border-radius: 3px;
124
+ }
125
+ .toolbar .item-action .toggle-view-icon {
126
+ background-color: transparent;
127
+ border: none;
128
+ }
129
+ .toolbar .item-action .toggle-view-icon:hover {
130
+ cursor: pointer;
131
+ }
132
+ .toolbar .icon-only {
133
+ padding: 0 8px !important;
134
+ }
135
+ .toolbar .icon-only:focus {
136
+ background-color: rgba(0, 0, 0, 0.12);
137
+ border-radius: 3px;
138
+ }
139
+ .toolbar .icon-only:hover {
140
+ color: var(--file-manager-primary-color);
141
+ }
142
+ .toolbar .item-separator {
143
+ height: 36px;
144
+ background: #cfcfcf;
145
+ width: 1px;
146
+ margin: 0 5px;
147
+ }
148
+
149
+ .file-selected {
150
+ background-color: rgba(0, 0, 0, 0.05);
151
+ }.sb-folders-list {
152
+ list-style: none;
153
+ margin: 0px 4px;
154
+ height: 100%;
155
+ font-size: 16px;
156
+ overflow-y: auto !important;
157
+ }
158
+ .sb-folders-list::-webkit-scrollbar {
159
+ width: 5px;
160
+ height: 8px;
161
+ padding-top: 2px;
162
+ }
163
+ .sb-folders-list::-webkit-scrollbar-thumb {
164
+ background: var(--file-manager-primary-color) !important;
165
+ border-radius: 8px;
166
+ }
167
+ .sb-folders-list .folder-collapsible {
168
+ margin-left: 10px;
169
+ }
170
+ .sb-folders-list .sb-folders-list-item {
171
+ display: flex;
172
+ align-items: center;
173
+ margin-bottom: 4px;
174
+ padding: 6px 5px;
175
+ border-radius: 4px;
176
+ }
177
+ .sb-folders-list .sb-folders-list-item:hover {
178
+ cursor: pointer;
179
+ background-color: rgba(0, 0, 0, 0.05);
180
+ }
181
+ .sb-folders-list .sb-folders-list-item .non-expanable {
182
+ min-width: 20px;
183
+ }
184
+ .sb-folders-list .sb-folders-list-item .sb-folder-details {
185
+ display: flex;
186
+ align-items: center;
187
+ }
188
+ .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-open-icon {
189
+ margin: 0 7px;
190
+ }
191
+ .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-close-icon {
192
+ margin: 1px 9px 0px 8px;
193
+ }
194
+ .sb-folders-list .sb-folders-list-item .sb-folder-details .sb-folder-name {
195
+ width: max-content;
196
+ }
197
+ .sb-folders-list .sb-folders-list-item .folder-icon-default {
198
+ transform: rotate(0deg);
199
+ transition: transform 0.5s ease-in-out;
200
+ }
201
+ .sb-folders-list .sb-folders-list-item .folder-icon-default.folder-rotate-down {
202
+ transform: rotate(90deg);
203
+ }
204
+ .sb-folders-list .active-list-item {
205
+ background-color: var(--file-manager-primary-color);
206
+ color: white;
207
+ }
208
+ .sb-folders-list .active-list-item:hover {
209
+ cursor: pointer;
210
+ background-color: var(--file-manager-primary-color);
211
+ }
212
+ .sb-folders-list .empty-nav-pane {
213
+ display: flex;
214
+ justify-content: center;
215
+ align-items: center;
216
+ height: 100%;
217
+ }.bread-crumb-container {
218
+ position: relative;
219
+ font-size: 16px;
220
+ }
221
+ .bread-crumb-container .breadcrumb {
222
+ height: 22px;
223
+ min-height: 22px;
224
+ max-height: 22px;
225
+ display: flex;
226
+ gap: 0.5rem;
227
+ padding: 6px 0 6PX 15px;
228
+ overflow-x: hidden;
229
+ }
230
+ .bread-crumb-container .breadcrumb::-webkit-scrollbar {
231
+ height: 3px;
232
+ }
233
+ .bread-crumb-container .breadcrumb::-webkit-scrollbar-thumb {
234
+ background: var(--file-manager-primary-color) !important;
235
+ }
236
+ .bread-crumb-container .breadcrumb .nav-toggler {
237
+ display: flex;
238
+ align-items: center;
239
+ }
240
+ .bread-crumb-container .breadcrumb .divider {
241
+ width: 1px;
242
+ background-color: #cfcfcf;
243
+ }
244
+ .bread-crumb-container .breadcrumb .folder-name {
245
+ display: flex;
246
+ align-items: center;
247
+ gap: 0.25rem;
248
+ font-weight: 500;
249
+ min-width: fit-content;
250
+ }
251
+ .bread-crumb-container .breadcrumb .folder-name:hover {
252
+ cursor: pointer;
253
+ color: var(--file-manager-primary-color);
254
+ }
255
+ .bread-crumb-container .breadcrumb .hidden-folders {
256
+ padding: 0 4px;
257
+ }
258
+ .bread-crumb-container .breadcrumb .folder-name-btn {
259
+ background-color: transparent;
260
+ border: none;
261
+ padding: 0;
262
+ }
263
+ .bread-crumb-container .breadcrumb .folder-name-btn:hover, .bread-crumb-container .breadcrumb .folder-name-btn:focus {
264
+ cursor: pointer;
265
+ color: var(--file-manager-primary-color);
266
+ background-color: #dddcdc;
267
+ border-radius: 5px;
268
+ }
269
+
270
+ .hidden-folders-container {
271
+ position: absolute;
272
+ margin: 0;
273
+ z-index: 2;
274
+ background-color: rgb(99, 99, 99);
275
+ color: white;
276
+ padding: 4px;
277
+ border-radius: 5px;
278
+ font-size: 0.9em;
279
+ left: 3rem;
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 5px;
283
+ }
284
+ .hidden-folders-container li {
285
+ padding: 5px 10px;
286
+ border-radius: 4px;
287
+ }
288
+ .hidden-folders-container li:hover {
289
+ cursor: pointer;
290
+ background-color: rgb(117, 117, 117);
291
+ }.search-input {
292
+ border-top: 0;
293
+ border-left: 0;
294
+ border-right: 0;
295
+ border-bottom: 1px solid #999;
296
+ font-family: var(--file-manager-font-family);
297
+ outline: none;
298
+ padding-right: 18px;
299
+ margin-right: 12px;
300
+ box-shadow: none;
301
+ box-sizing: border-box;
302
+ width: 120;
303
+ min-width: 120;
304
+ max-width: 120;
305
+ }.rename-file {
306
+ position: relative;
307
+ min-width: 69%;
308
+ max-width: -webkit-fill-available;
309
+ text-align: center;
310
+ border: 4px solid var(--file-manager-primary-color);
311
+ border-radius: 10px;
312
+ font-size: 15px;
313
+ font-family: var(--file-manager-font-family);
314
+ padding: 1px 7px;
315
+ resize: none;
316
+ field-sizing: content;
317
+ overflow-y: hidden;
318
+ z-index: 1;
319
+ }
320
+ .rename-file:focus {
321
+ outline: none;
322
+ }.error-tooltip {
323
+ position: absolute;
324
+ z-index: 1;
325
+ bottom: -68px;
326
+ left: 16px;
327
+ padding: 8px;
328
+ width: 292px;
329
+ border-radius: 5px;
330
+ background-color: #696969;
331
+ text-align: left;
332
+ margin: 0;
333
+ font-size: 0.9em;
334
+ }
335
+ .error-tooltip::before {
336
+ content: "";
337
+ position: absolute;
338
+ top: -20%;
339
+ rotate: -45deg;
340
+ border: 15px solid #696969;
341
+ border-color: transparent #696969 transparent transparent;
342
+ }
343
+
344
+ .error-tooltip.right {
345
+ left: 16px;
346
+ }
347
+ .error-tooltip.right::before {
348
+ left: 11%;
349
+ }
350
+
351
+ .error-tooltip.left {
352
+ left: -180px;
353
+ }
354
+ .error-tooltip.left::before {
355
+ left: 76%;
356
+ transform: rotate(90deg) scaleX(-1);
357
+ }
358
+
359
+ .error-tooltip.top {
360
+ bottom: unset !important;
361
+ top: -68px;
362
+ }
363
+ .error-tooltip.top::before {
364
+ content: none;
365
+ }
366
+ .error-tooltip.top:after {
367
+ content: "";
368
+ position: absolute;
369
+ bottom: -20%;
370
+ left: 11%;
371
+ rotate: -45deg;
372
+ border: 15px solid #696969;
373
+ border-color: transparent transparent #696969 transparent;
374
+ }
375
+
376
+ .error-tooltip.top.left::after {
377
+ left: 76%;
378
+ transform: rotate(90deg) scaleX(-1);
379
+ }.fm-button {
380
+ border-radius: 5px;
381
+ font-weight: 600;
382
+ border: none;
383
+ }
384
+ .fm-button:hover {
385
+ cursor: pointer;
386
+ }
387
+
388
+ .fm-button-primary {
389
+ background-color: var(--file-manager-primary-color);
390
+ color: white;
391
+ }
392
+ .fm-button-primary:hover {
393
+ background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
394
+ }
395
+
396
+ .fm-button-secondary {
397
+ background-color: #f0f0f0;
398
+ color: black;
399
+ }
400
+ .fm-button-secondary:hover {
401
+ background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
402
+ }
403
+
404
+ .fm-button-danger {
405
+ background-color: #f44336;
406
+ color: white;
407
+ }
408
+ .fm-button-danger:hover {
409
+ background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
410
+ }.fm-modal-header {
411
+ display: flex;
412
+ justify-content: space-between;
413
+ align-items: center;
414
+ border-bottom: 1px solid #cfcfcf;
415
+ padding: 0.3rem 1rem;
416
+ font-size: 16px;
417
+ }
418
+ .fm-modal-header .fm-modal-heading {
419
+ margin: 0;
420
+ font-weight: bold;
421
+ color: black;
422
+ }
423
+
424
+ .dialog[open] {
425
+ animation: expand 0.4s forwards;
426
+ }
427
+ .dialog[open]::backdrop {
428
+ background: rgba(0, 0, 0, 0.5);
429
+ }
430
+
431
+ @keyframes expand {
432
+ from {
433
+ transform: scale(0.4);
434
+ }
435
+ to {
436
+ transform: scale(1);
437
+ }
438
+ }.fm-checkbox {
439
+ accent-color: white;
440
+ }
441
+ .fm-checkbox:disabled {
442
+ cursor: default !important;
443
+ }
444
+ .fm-checkbox:hover {
445
+ cursor: pointer;
446
+ }.fm-context-menu {
447
+ position: absolute;
448
+ background-color: white;
449
+ border: 1px solid #c6c6c6;
450
+ border-radius: 6px;
451
+ padding: 4px;
452
+ z-index: 1;
453
+ transition: opacity 0.1s linear;
454
+ font-size: 16px;
455
+ }
456
+ .fm-context-menu .file-context-menu-list {
457
+ font-size: 1.1em;
458
+ }
459
+ .fm-context-menu .file-context-menu-list ul {
460
+ list-style-type: none;
461
+ padding-left: 0;
462
+ margin: 0;
463
+ display: flex;
464
+ flex-direction: column;
465
+ gap: 3px;
466
+ }
467
+ .fm-context-menu .file-context-menu-list ul li {
468
+ display: flex;
469
+ gap: 9px;
470
+ align-items: center;
471
+ padding: 3px 13px;
472
+ position: relative;
473
+ border-radius: 4px;
474
+ }
475
+ .fm-context-menu .file-context-menu-list ul li:hover {
476
+ cursor: pointer;
477
+ background-color: rgba(0, 0, 0, 0.07);
478
+ }
479
+ .fm-context-menu .file-context-menu-list ul li.active {
480
+ background-color: rgba(0, 0, 0, 0.07);
481
+ }
482
+ .fm-context-menu .file-context-menu-list ul li.disable-paste {
483
+ opacity: 0.5;
484
+ }
485
+ .fm-context-menu .file-context-menu-list ul li.disable-paste:hover {
486
+ cursor: default;
487
+ background-color: transparent;
488
+ }
489
+ .fm-context-menu .file-context-menu-list .divider {
490
+ border-bottom: 1px solid #c6c6c6;
491
+ margin: 5px 0 3px 0;
492
+ }
493
+ .fm-context-menu .file-context-menu-list .list-expand-icon {
494
+ margin-left: auto;
495
+ color: #444444;
496
+ }
497
+ .fm-context-menu .file-context-menu-list .sub-menu {
498
+ position: absolute;
499
+ top: 0;
500
+ background-color: white;
501
+ border: 1px solid #c6c6c6;
502
+ border-radius: 6px;
503
+ padding: 4px;
504
+ z-index: 1;
505
+ }
506
+ .fm-context-menu .file-context-menu-list .sub-menu .item-selected {
507
+ width: 13px;
508
+ color: #444444;
509
+ }
510
+ .fm-context-menu .file-context-menu-list .sub-menu li:hover {
511
+ background-color: rgba(0, 0, 0, 0.07) !important;
512
+ }
513
+ .fm-context-menu .file-context-menu-list .sub-menu.right {
514
+ left: calc(100% - 2px);
515
+ }
516
+ .fm-context-menu .file-context-menu-list .sub-menu.left {
517
+ left: -83%;
518
+ }
519
+
520
+ .fm-context-menu.hidden {
521
+ opacity: 0;
522
+ pointer-events: none;
523
+ visibility: hidden;
524
+ }
525
+
526
+ .fm-context-menu.visible {
527
+ opacity: 1;
528
+ pointer-events: all;
529
+ visibility: visible;
530
+ }.files {
531
+ position: relative;
532
+ display: flex;
533
+ align-content: flex-start;
534
+ flex-wrap: wrap;
535
+ column-gap: 0.5em;
536
+ row-gap: 5px;
537
+ border-style: solid !important;
538
+ border-color: #cfcfcf !important;
539
+ border-top: 0;
540
+ border-left: 0;
541
+ border-right: 0;
542
+ border-bottom: 1px;
543
+ overflow-y: auto !important;
544
+ }
545
+ .files::-webkit-scrollbar {
546
+ width: 5px;
547
+ height: 8px;
548
+ padding-top: 2px;
549
+ }
550
+ .files::-webkit-scrollbar-thumb {
551
+ background: var(--file-manager-primary-color) !important;
552
+ border-radius: 8px;
553
+ }
554
+ .files {
555
+ padding-right: 4px;
556
+ font-size: 16px;
557
+ }
558
+ .files .drag-move-tooltip {
559
+ background-color: white;
560
+ font-size: 0.78em;
561
+ position: fixed;
562
+ text-wrap: nowrap;
563
+ border: 1px dashed black;
564
+ padding: 1px 5px 2px 24px;
565
+ border-radius: 3px;
566
+ font-weight: bold;
567
+ color: var(--file-manager-primary-color);
568
+ z-index: 2;
569
+ }
570
+ .files .drag-move-tooltip .drop-zone-file-name {
571
+ color: rgb(48, 48, 48);
572
+ }
573
+ .files .file-item-container {
574
+ border-radius: 5px;
575
+ margin: 5px 0;
576
+ }
577
+ .files .file-item-container .drag-icon {
578
+ position: absolute !important;
579
+ top: -1000px;
580
+ left: -1000px;
581
+ z-Index: -1;
582
+ border-radius: 4px;
583
+ position: relative;
584
+ color: white;
585
+ background-color: var(--file-manager-primary-color);
586
+ padding: 3px 8px;
587
+ }
588
+ .files .file-item-container.file-drop-zone {
589
+ background-color: rgba(0, 0, 0, 0.08) !important;
590
+ }
591
+ .files .file-item {
592
+ position: relative;
593
+ height: 81px;
594
+ width: 138px;
595
+ display: flex;
596
+ flex-direction: column;
597
+ gap: 0.5rem;
598
+ align-items: center;
599
+ justify-content: space-between;
600
+ padding-top: 13px;
601
+ padding-bottom: 1px;
602
+ border-radius: 5px;
603
+ }
604
+ .files .file-item:hover {
605
+ background-color: rgba(0, 0, 0, 0.05);
606
+ }
607
+ .files .file-item .selection-checkbox {
608
+ position: absolute;
609
+ left: 5px;
610
+ top: 8px;
611
+ }
612
+ .files .file-item .hidden {
613
+ visibility: hidden;
614
+ }
615
+ .files .file-item .visible {
616
+ visibility: visible;
617
+ }
618
+ .files .file-item .rename-file-container {
619
+ position: absolute;
620
+ top: 65px;
621
+ width: 100%;
622
+ text-align: center;
623
+ }
624
+ .files .file-item .rename-file-container.list {
625
+ top: 6px;
626
+ left: 58px;
627
+ text-align: left;
628
+ }
629
+ .files .file-item .rename-file-container.list .rename-file {
630
+ min-width: 15%;
631
+ text-align: left;
632
+ border-radius: 3px;
633
+ border: none;
634
+ top: 5px;
635
+ white-space: nowrap;
636
+ overflow-x: hidden;
637
+ max-width: calc(100% - 62px);
638
+ }
639
+ .files .file-item .rename-file-container.list .folder-name-error.right {
640
+ left: 0px;
641
+ bottom: -72px;
642
+ }
643
+ .files .file-item .file-name {
644
+ max-width: 115px;
645
+ }
646
+ .files .file-selected {
647
+ background-color: var(--file-manager-primary-color);
648
+ color: white;
649
+ }
650
+ .files .file-selected:hover {
651
+ background-color: var(--file-manager-primary-color);
652
+ }
653
+ .files .file-moving {
654
+ opacity: 0.5;
655
+ }
656
+
657
+ .files.list {
658
+ flex-direction: column;
659
+ flex-wrap: nowrap;
660
+ gap: 0;
661
+ padding-left: 0px;
662
+ padding-top: 0px;
663
+ }
664
+ .files.list .files-header {
665
+ font-size: 0.83em;
666
+ font-weight: 600;
667
+ display: flex;
668
+ gap: 5px;
669
+ border-top: 1px solid #dddddd;
670
+ padding: 4px 0 4px 5px;
671
+ position: sticky;
672
+ top: 0;
673
+ background-color: #f5f5f5;
674
+ z-index: 1;
675
+ }
676
+ .files.list .files-header .file-select-all {
677
+ width: 5%;
678
+ height: 0.83em;
679
+ }
680
+ .files.list .files-header .file-name {
681
+ width: calc(65% - 35px);
682
+ padding-left: 35px;
683
+ cursor: pointer;
684
+ user-select: none;
685
+ }
686
+ .files.list .files-header .file-name:hover {
687
+ background-color: rgba(0, 0, 0, 0.1);
688
+ }
689
+ .files.list .files-header .file-name.active {
690
+ background-color: rgba(0, 123, 255, 0.1);
691
+ color: #007bff;
692
+ }
693
+ .files.list .files-header .file-date {
694
+ text-align: center;
695
+ width: 20%;
696
+ cursor: pointer;
697
+ user-select: none;
698
+ }
699
+ .files.list .files-header .file-date:hover {
700
+ background-color: rgba(0, 0, 0, 0.1);
701
+ }
702
+ .files.list .files-header .file-date.active {
703
+ background-color: rgba(0, 123, 255, 0.1);
704
+ color: #007bff;
705
+ }
706
+ .files.list .files-header .file-size {
707
+ text-align: center;
708
+ width: 10%;
709
+ cursor: pointer;
710
+ user-select: none;
711
+ }
712
+ .files.list .files-header .file-size:hover {
713
+ background-color: rgba(0, 0, 0, 0.1);
714
+ }
715
+ .files.list .files-header .file-size.active {
716
+ background-color: rgba(0, 123, 255, 0.1);
717
+ color: #007bff;
718
+ }
719
+ .files.list .files-header .sort-indicator {
720
+ font-size: 0.8em;
721
+ margin-left: 4px;
722
+ }
723
+ .files.list .file-item-container {
724
+ display: flex;
725
+ width: 100%;
726
+ margin: 0;
727
+ border-radius: 0;
728
+ }
729
+ .files.list .file-item-container:hover {
730
+ background-color: rgba(0, 0, 0, 0.04);
731
+ }
732
+ .files.list .file-item-container.file-selected:hover {
733
+ background-color: var(--file-manager-primary-color) !important;
734
+ }
735
+ .files.list .file-item {
736
+ flex-direction: row;
737
+ height: 13px;
738
+ justify-content: unset;
739
+ padding: 15px;
740
+ padding-left: 33px;
741
+ margin: 0;
742
+ width: calc(70% - 30px);
743
+ }
744
+ .files.list .file-item:hover {
745
+ background-color: unset;
746
+ }
747
+ .files.list .file-item .selection-checkbox {
748
+ top: 12px;
749
+ }
750
+ .files.list .file-item .file-name {
751
+ max-width: 285px;
752
+ }
753
+ .files.list .modified-date {
754
+ display: flex;
755
+ align-items: center;
756
+ justify-content: center;
757
+ font-size: 0.8em;
758
+ width: 20%;
759
+ }
760
+ .files.list .size {
761
+ display: flex;
762
+ align-items: center;
763
+ justify-content: center;
764
+ font-size: 0.8em;
765
+ width: 10%;
766
+ }
767
+
768
+ .empty-folder {
769
+ display: flex;
770
+ justify-content: center;
771
+ align-items: center;
772
+ width: 100%;
773
+ height: 100%;
774
+ }
775
+
776
+ .statusbar {
777
+ padding-left: 4px;
778
+ border-bottom-right-radius: 8px;
779
+ font-size: 12px;
780
+ height: 20px;
781
+ display: flex;
782
+ align-items: center;
783
+ }.file-delete-confirm .file-delete-confirm-text {
784
+ border-bottom: 1px solid #dddddd;
785
+ padding: 15px;
786
+ margin-top: 0;
787
+ margin-bottom: 0.7rem;
788
+ word-wrap: break-word;
789
+ font-weight: 500;
790
+ font-size: 16px;
791
+ }
792
+ .file-delete-confirm .file-delete-confirm-actions {
793
+ display: flex;
794
+ gap: 0.5rem;
795
+ justify-content: flex-end;
796
+ margin-bottom: 0.7rem;
797
+ margin-right: 1rem;
798
+ }.fm-progress {
799
+ display: flex;
800
+ flex-direction: column;
801
+ gap: 5px;
802
+ }
803
+ .fm-progress .fm-progress-bar {
804
+ width: 100%;
805
+ border-radius: 5px;
806
+ background-color: #c6c6c6;
807
+ height: 5px;
808
+ }
809
+ .fm-progress .fm-progress-bar .fm-progress-bar-fill {
810
+ height: 100%;
811
+ background-color: var(--file-manager-primary-color);
812
+ border-radius: 5px;
813
+ max-width: 100%;
814
+ }
815
+ .fm-progress .fm-progress-status {
816
+ font-size: 0.75em;
817
+ font-weight: 600;
818
+ display: flex;
819
+ justify-content: space-between;
820
+ }
821
+ .fm-progress .fm-upload-canceled {
822
+ font-size: 0.75em;
823
+ font-weight: 600;
824
+ color: red;
825
+ }.fm-upload-file {
826
+ padding: 18px 15px;
827
+ display: flex;
828
+ gap: 18px;
829
+ font-size: 16px;
830
+ }
831
+ .fm-upload-file .select-files {
832
+ width: 100%;
833
+ }
834
+ .fm-upload-file .select-files .draggable-file-input {
835
+ color: #696969;
836
+ background-color: #f7f7f7;
837
+ margin-bottom: 18px;
838
+ height: 220px;
839
+ border: 2px dashed #ccc;
840
+ border-radius: 5px;
841
+ display: flex;
842
+ justify-content: center;
843
+ align-items: center;
844
+ }
845
+ .fm-upload-file .select-files .draggable-file-input .input-text {
846
+ pointer-events: none;
847
+ display: flex;
848
+ flex-direction: column;
849
+ align-items: center;
850
+ }
851
+ .fm-upload-file .select-files .draggable-file-input:hover {
852
+ border-color: var(--file-manager-primary-color);
853
+ }
854
+ .fm-upload-file .select-files .draggable-file-input.dragging {
855
+ border-color: var(--file-manager-primary-color);
856
+ }
857
+ .fm-upload-file .select-files .btn-choose-file {
858
+ display: flex;
859
+ justify-content: center;
860
+ }
861
+ .fm-upload-file .select-files .btn-choose-file label {
862
+ display: inline-block;
863
+ padding: 0.4rem 0.8rem;
864
+ }
865
+ .fm-upload-file .select-files .btn-choose-file label:hover {
866
+ cursor: pointer;
867
+ }
868
+ .fm-upload-file .select-files .btn-choose-file .choose-file-input {
869
+ display: none;
870
+ }
871
+ .fm-upload-file .files-progress {
872
+ width: calc(60% - 18px);
873
+ }
874
+ .fm-upload-file .files-progress .heading {
875
+ display: flex;
876
+ gap: 4px;
877
+ }
878
+ .fm-upload-file .files-progress h2 {
879
+ font-size: 0.9em;
880
+ margin: 0;
881
+ }
882
+ .fm-upload-file .files-progress ul {
883
+ padding-left: 0px;
884
+ padding-right: 5px;
885
+ padding-bottom: 10px;
886
+ margin-top: 0.7rem;
887
+ height: 220px;
888
+ overflow-y: auto !important;
889
+ }
890
+ .fm-upload-file .files-progress ul::-webkit-scrollbar {
891
+ width: 5px;
892
+ height: 8px;
893
+ padding-top: 2px;
894
+ }
895
+ .fm-upload-file .files-progress ul::-webkit-scrollbar-thumb {
896
+ background: var(--file-manager-primary-color) !important;
897
+ border-radius: 8px;
898
+ }
899
+ .fm-upload-file .files-progress ul {
900
+ font-weight: 500;
901
+ }
902
+ .fm-upload-file .files-progress ul li {
903
+ list-style: none;
904
+ border-bottom: 1px solid #c6c6c6;
905
+ display: flex;
906
+ gap: 10px;
907
+ margin-bottom: 18px;
908
+ padding-bottom: 12px;
909
+ }
910
+ .fm-upload-file .files-progress ul li .file-icon {
911
+ width: 10%;
912
+ }
913
+ .fm-upload-file .files-progress ul li .file {
914
+ width: 86%;
915
+ }
916
+ .fm-upload-file .files-progress ul li .file .file-details {
917
+ display: flex;
918
+ align-items: center;
919
+ justify-content: space-between;
920
+ margin-bottom: 5px;
921
+ }
922
+ .fm-upload-file .files-progress ul li .file .file-details .file-info {
923
+ width: 90%;
924
+ display: flex;
925
+ align-items: baseline;
926
+ }
927
+ .fm-upload-file .files-progress ul li .file .file-details .file-info .file-name {
928
+ display: inline-block;
929
+ max-width: 66%;
930
+ margin-right: 8px;
931
+ }
932
+ .fm-upload-file .files-progress ul li .file .file-details .file-size {
933
+ font-size: 0.7em;
934
+ }
935
+ .fm-upload-file .files-progress ul li .file .file-details .retry-upload {
936
+ padding: 3px;
937
+ border-radius: 50%;
938
+ }
939
+ .fm-upload-file .files-progress ul li .file .file-details .retry-upload:hover {
940
+ cursor: pointer;
941
+ background-color: rgba(0, 0, 0, 0.07);
942
+ color: var(--file-manager-primary-color);
943
+ }
944
+ .fm-upload-file .files-progress ul li .file .file-details .rm-file:hover {
945
+ cursor: pointer;
946
+ color: red;
947
+ }
948
+ .fm-upload-file .files-progress ul li .file .file-details .upload-success {
949
+ color: var(--file-manager-primary-color);
950
+ }.file-previewer {
951
+ padding: 0.8em;
952
+ height: 40dvh;
953
+ display: flex;
954
+ justify-content: center;
955
+ font-size: 16px;
956
+ }
957
+ .file-previewer .photo-popup-image {
958
+ object-fit: contain;
959
+ width: -webkit-fill-available;
960
+ opacity: 1;
961
+ transition: opacity 0.5s ease-in-out;
962
+ }
963
+ .file-previewer .img-loading {
964
+ opacity: 0;
965
+ height: 0%;
966
+ width: 0%;
967
+ }
968
+ .file-previewer .img-loading {
969
+ height: 0;
970
+ }
971
+ .file-previewer .audio-preview {
972
+ align-self: center;
973
+ width: 60%;
974
+ }
975
+ .file-previewer .photo-popup-iframe {
976
+ width: -webkit-fill-available;
977
+ }
978
+ .file-previewer .preview-error {
979
+ display: flex;
980
+ justify-content: center;
981
+ align-items: center;
982
+ flex-direction: column;
983
+ gap: 10px;
984
+ }
985
+ .file-previewer .preview-error .error-icon {
986
+ color: rgb(73, 73, 73);
987
+ }
988
+ .file-previewer .preview-error .error-msg {
989
+ font-weight: 500;
990
+ font-size: 1.1em;
991
+ margin-bottom: 4px;
992
+ }
993
+ .file-previewer .preview-error .file-info {
994
+ display: flex;
995
+ gap: 6px;
996
+ align-items: center;
997
+ margin: 1px 0 5px 0;
998
+ }
999
+ .file-previewer .preview-error .file-info .file-name {
1000
+ padding: 4px 15px;
1001
+ background-color: rgb(233, 233, 233);
1002
+ border: 1px solid rgb(163, 173, 173);
1003
+ border-radius: 3px;
1004
+ }
1005
+ .file-previewer .preview-error .file-info .file-size {
1006
+ font-size: 0.8em;
1007
+ }
1008
+ .file-previewer .preview-error .download-btn {
1009
+ display: flex;
1010
+ gap: 3px;
1011
+ align-items: center;
1012
+ }
1013
+
1014
+ .file-previewer.pdf-previewer {
1015
+ height: 85dvh;
1016
+ }
1017
+
1018
+ .video-preview {
1019
+ width: -webkit-fill-available;
1020
+ }
1021
+ .text-white {
1022
+ color: white;
1023
+ }
1024
+ .text-truncate {
1025
+ overflow: hidden;
1026
+ text-overflow: ellipsis;
1027
+ white-space: nowrap;
1028
+ }
1029
+ img,
1030
+ svg {
1031
+ vertical-align: middle;
1032
+ }
1033
+ .fm-modal {
1034
+ border: 1px solid #c6c6c6;
1035
+ border-radius: 5px;
1036
+ width: fit-content;
1037
+ overflow-x: hidden;
1038
+ padding: 0;
1039
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.253);
1040
+ }
1041
+ .w-25 {
1042
+ width: 25%;
1043
+ }
1044
+ .file-explorer {
1045
+ min-height: 400px;
1046
+ height: 100%;
1047
+ width: 100%;
1048
+ font-family: var(--file-manager-font-family);
1049
+ border: 1px solid #cfcfcf;
1050
+ border-radius: 8px;
1051
+ }
1052
+ .file-explorer button {
1053
+ font-family: var(--file-manager-font-family);
1054
+ }
1055
+ .file-explorer {
1056
+ position: relative;
1057
+ background-color: white;
1058
+ cursor: default;
1059
+ -webkit-user-select: none;
1060
+ -ms-user-select: none;
1061
+ user-select: none;
1062
+ }
1063
+ .file-explorer .files-container {
1064
+ display: flex;
1065
+ height: calc(100% - 46px);
1066
+ }
1067
+ .file-explorer .files-container .navigation-pane {
1068
+ z-index: 1;
1069
+ padding-top: 8px;
1070
+ position: relative;
1071
+ }
1072
+ .file-explorer .files-container .navigation-pane .sidebar-resize {
1073
+ position: absolute;
1074
+ right: 0px;
1075
+ top: 0px;
1076
+ bottom: 0px;
1077
+ width: 5px;
1078
+ cursor: col-resize;
1079
+ z-index: 10;
1080
+ border-right: 1px solid #cfcfcf;
1081
+ }
1082
+ .file-explorer .files-container .navigation-pane .sidebar-resize:hover {
1083
+ border-right: 1px solid #1e3a8a;
1084
+ }
1085
+ .file-explorer .files-container .navigation-pane .sidebar-dragging {
1086
+ border-right: 1px solid #1e3a8a;
1087
+ }
1088
+ .file-explorer .files-container .navigation-pane.open {
1089
+ display: block;
1090
+ }
1091
+ .file-explorer .files-container .navigation-pane.closed {
1092
+ display: none;
1093
+ }
1094
+ .file-explorer .files-container .folders-preview {
1095
+ z-index: 2;
1096
+ background-color: white;
1097
+ padding-right: 0px;
1098
+ padding-left: 0px;
1099
+ border-bottom-right-radius: 8px;
1100
+ border-bottom-left-radius: 0px;
1101
+ }
1102
+ .close-icon {
1103
+ padding: 5px;
1104
+ border-radius: 50%;
1105
+ }
1106
+ .close-icon:hover {
1107
+ cursor: pointer;
1108
+ background-color: rgba(0, 0, 0, 0.07);
1109
+ }
1110
+ .fm-rename-folder-container {
1111
+ padding: 8px 0;
1112
+ text-align: left;
1113
+ }
1114
+ .fm-rename-folder-container .fm-rename-folder-input {
1115
+ border-bottom: 1px solid #c6c6c6;
1116
+ padding: 8px 12px 12px;
1117
+ }
1118
+ .fm-rename-folder-container .fm-rename-folder-input .fm-rename-warning {
1119
+ display: flex;
1120
+ align-items: center;
1121
+ gap: 10px;
1122
+ }
1123
+ .fm-rename-folder-container .fm-rename-folder-action {
1124
+ display: flex;
1125
+ gap: 8px;
1126
+ justify-content: flex-end;
1127
+ padding: 8px 8px 0 0;
1128
+ }
1129
+ .file-selcted .select-files {
1130
+ width: 40%;
1131
+ }