app-file-manager.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. .file-manager-application .sidebar-file-manager {
  2. width: 260px;
  3. height: 100%;
  4. background-color: #fff;
  5. border-top-left-radius: 0.25rem;
  6. border-bottom-left-radius: 0.25rem;
  7. transition: all 0.3s ease, background 0s; }
  8. .file-manager-application .sidebar-file-manager .sidebar-inner {
  9. height: inherit; }
  10. .file-manager-application .sidebar-file-manager .sidebar-inner .dropdown-actions {
  11. width: 100%;
  12. padding: 1.5rem 1.5rem 1.8rem; }
  13. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-close-icon {
  14. position: absolute;
  15. top: 0.25rem;
  16. right: 0.25rem;
  17. font-size: 1.5rem;
  18. z-index: 5;
  19. cursor: pointer; }
  20. .file-manager-application .sidebar-file-manager .sidebar-inner .add-file-btn ~ .dropdown-menu {
  21. width: 85%; }
  22. .file-manager-application .sidebar-file-manager .sidebar-inner .add-file-btn ~ .dropdown-menu:before {
  23. display: none; }
  24. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list {
  25. position: relative;
  26. height: calc(100% - 85px); }
  27. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .my-drive {
  28. padding: 0.58rem 0; }
  29. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .my-drive .jstree-node .jstree-icon {
  30. background-position: 0.5rem;
  31. background-size: 1.3rem; }
  32. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .my-drive .jstree-node .jstree-anchor > .jstree-themeicon {
  33. margin-right: 0.5rem; }
  34. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .my-drive .jstree-node.jstree-closed > .jstree-icon {
  35. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); }
  36. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .my-drive .jstree-node.jstree-open > .jstree-icon {
  37. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
  38. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .list-group-labels,
  39. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .storage-status {
  40. margin-top: 2.2rem; }
  41. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .list-group-item {
  42. padding: 0.58rem 1.9rem;
  43. font-weight: 500;
  44. border: 0;
  45. border-radius: 0;
  46. border-left: 2px solid transparent; }
  47. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .list-group-item:hover {
  48. z-index: 0 !important; }
  49. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .list-group-item + .list-group-item.active {
  50. margin-top: 0; }
  51. .file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .active {
  52. background-color: transparent;
  53. border-color: #7367f0;
  54. color: #7367f0; }
  55. .file-manager-application .sidebar-file-manager.show {
  56. transition: all 0.25s ease, background 0s !important;
  57. transform: translateX(0) !important;
  58. z-index: 10; }
  59. .file-manager-application .content-area-wrapper {
  60. border: 1px solid #ebe9f1;
  61. border-radius: 0.25rem; }
  62. .file-manager-application .content-area-wrapper .content-right .content-wrapper {
  63. padding: 0; }
  64. .file-manager-application .content-area-wrapper .file-manager-main-content {
  65. border-left: 1px solid #ebe9f1;
  66. height: inherit; }
  67. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header {
  68. padding: 0.47rem 1rem;
  69. border-bottom: 1px solid #ebe9f1;
  70. background-color: #fff;
  71. border-top-right-radius: 0.357rem; }
  72. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header .file-manager-toggler {
  73. cursor: pointer; }
  74. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header input {
  75. border-color: transparent;
  76. box-shadow: none; }
  77. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header .file-actions:not(.show) {
  78. display: none; }
  79. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body {
  80. position: relative;
  81. padding: 1.5rem 1.5rem 0;
  82. height: calc(100% - 50px);
  83. background-color: #fff; }
  84. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container {
  85. display: flex;
  86. flex-wrap: wrap; }
  87. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item {
  88. border: 1px solid #ebe9f1;
  89. margin-bottom: 1.6rem;
  90. box-shadow: none;
  91. margin-right: 1rem;
  92. transition: none;
  93. cursor: pointer; }
  94. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .card-body {
  95. padding: 1rem;
  96. padding-bottom: 0.5rem; }
  97. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .form-check-input:not(:checked) {
  98. background-color: transparent; }
  99. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .file-logo-wrapper {
  100. padding: 1rem;
  101. height: 7.5rem;
  102. background-color: #f8f8f8; }
  103. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .file-logo-wrapper .feather-folder {
  104. stroke: #babfc7; }
  105. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .dropdown-menu {
  106. transform: none; }
  107. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .dropdown-menu:before {
  108. display: none; }
  109. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .content-wrapper {
  110. display: flex;
  111. flex-direction: row;
  112. justify-content: space-between;
  113. align-items: center;
  114. height: auto; }
  115. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item .file-date {
  116. flex-grow: 1;
  117. margin-bottom: 0; }
  118. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-manager-item.selected {
  119. border-color: #7367f0; }
  120. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .file-name {
  121. width: calc(100% - 26rem);
  122. min-height: 1rem;
  123. font-weight: 600;
  124. flex-grow: 1;
  125. overflow: hidden;
  126. text-overflow: ellipsis;
  127. white-space: nowrap; }
  128. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container .files-section-title {
  129. width: 100%; }
  130. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view {
  131. flex-direction: column; }
  132. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .files-section-title {
  133. display: none; }
  134. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .files-header {
  135. display: flex;
  136. justify-content: space-between;
  137. margin-left: 7.2rem;
  138. margin-bottom: 1rem; }
  139. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .files-header p {
  140. font-weight: 600; }
  141. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .files-header .file-last-modified,
  142. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .files-header .file-item-size {
  143. margin-right: 3rem; }
  144. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item {
  145. flex-direction: row;
  146. flex: 0 0 100%;
  147. align-items: center;
  148. max-width: 100%;
  149. margin-bottom: 0.75rem;
  150. margin-right: 0; }
  151. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-logo-wrapper {
  152. padding-right: 0;
  153. width: auto;
  154. height: auto;
  155. background-color: transparent !important; }
  156. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-logo-wrapper img {
  157. height: 1.5rem; }
  158. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-logo-wrapper .feather-folder,
  159. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-logo-wrapper .feather-arrow-up {
  160. width: 19px;
  161. height: 18px; }
  162. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-logo-wrapper .dropdown {
  163. position: absolute;
  164. right: 1rem; }
  165. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .form-check {
  166. margin: 0 0.4rem 0 1.75rem; }
  167. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-accessed {
  168. display: none; }
  169. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .file-manager-item .file-size {
  170. width: 5.71rem;
  171. flex-grow: 1;
  172. margin-bottom: 0; }
  173. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container.list-view .folder.level-up .file-logo-wrapper {
  174. margin-left: 3.5rem; }
  175. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .files-header {
  176. display: none; }
  177. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item .content-wrapper {
  178. margin-bottom: 0rem; }
  179. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item .file-date {
  180. display: none; }
  181. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item .file-size {
  182. color: #b9b9c3;
  183. font-size: 85%; }
  184. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item:not(.selected):not(:hover) .form-check,
  185. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item:not(.selected):not(:hover) .toggle-dropdown {
  186. opacity: 0; }
  187. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item .feather-folder {
  188. height: 32px;
  189. width: 35px; }
  190. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item.folder.level-up {
  191. display: none !important; }
  192. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-body .view-container:not(.list-view) .file-manager-item .form-check {
  193. position: absolute;
  194. top: 1rem;
  195. left: 1rem; }
  196. @media screen and (max-width: 1200px) {
  197. .file-manager-application .content-right {
  198. width: 100%; }
  199. .file-manager-application .content-body {
  200. margin-left: 0 !important; }
  201. .file-manager-application .content-area-wrapper .file-manager-main-content {
  202. border-left: 0; }
  203. .file-manager-application .sidebar-left .sidebar {
  204. z-index: 10; }
  205. .file-manager-application .sidebar-left .sidebar .sidebar-file-manager {
  206. transform: translateX(-112%);
  207. transition: all 0.25s ease;
  208. position: absolute; } }
  209. @media (max-width: 767.98px) {
  210. .file-manager-application .view-container .file-manager-item {
  211. flex: 47%; } }
  212. @media (max-width: 575.98px) {
  213. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header {
  214. padding-left: 0.5rem; }
  215. .file-manager-application .content-area-wrapper .file-manager-main-content .file-manager-content-header .file-actions .dropdown {
  216. padding-left: 0.5rem;
  217. padding-right: 0.5rem; }
  218. .file-manager-application .content-area-wrapper .view-container .file-manager-item {
  219. flex: 0 0 100%;
  220. max-width: 100%; }
  221. .file-manager-application .content-area-wrapper .view-container.list-view .file-date,
  222. .file-manager-application .content-area-wrapper .view-container.list-view .file-last-modified,
  223. .file-manager-application .content-area-wrapper .view-container.list-view .file-size,
  224. .file-manager-application .content-area-wrapper .view-container.list-view .file-item-size {
  225. display: none !important; } }
  226. @media (min-width: 576px) {
  227. .file-manager-application .view-container .file-manager-item {
  228. flex: 0 0 23%;
  229. max-width: 25%; } }