Customization of the file manager with interface improvements (#4678)

* add file

* add file

* add hst-custom.css

* Format correction with Prettier

* Update Filegator

---------

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

install/deb/filemanager/filegator/configuration.php

@@ -242,6 +242,7 @@ $dist_config["services"]["Filegator\Services\Auth\AuthInterface"] = [
 
 $dist_config["services"]["Filegator\Services\View\ViewInterface"]["config"] = [
 	"add_to_head" => '
+	<link rel="stylesheet" href="/fm/css/hst-custom.css">
     <style>
         .logo {
             width: 46px;

install/deb/filemanager/filegator/dist/css/hst-custom.css

@@ -0,0 +1,322 @@
+/*------------------------------*/
+/*            General           */
+/*------------------------------*/
+
+.navbar,
+body,
+html {
+  background: #f7f7f7 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .navbar,
+  body,
+  html {
+    background-color: #121212 !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .container {
+    max-width: 1100px !important;
+  }
+}
+
+/*------------------------------*/
+/*            Table             */
+/*------------------------------*/
+
+.table,
+.b-table .table {
+  border: 1px solid #0000001f !important;
+  border-radius: 4px !important;
+}
+
+.table td,
+.table th {
+  border: none !important;
+  border-width: 0 0 1px !important;
+  padding: 2px 4px !important;
+  vertical-align: top !important;
+}
+
+.b-table .table .checkbox-cell {
+  width: 40px !important;
+  padding-left: 12px !important;
+}
+
+.b-table .table .checkbox-cell .checkbox {
+  vertical-align: middle !important;
+  font-size: 12px !important;
+}
+
+.table.is-hoverable tbody tr:nth-child(odd) {
+  background-color: #f7f7f7 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .table.is-hoverable tbody tr:nth-child(odd) {
+    background-color: #222222 !important;
+  }
+
+  .table.is-hoverable tbody tr:not(.is-selected):hover {
+    background-color: #303030 !important;
+  }
+}
+
+/*------------------------------*/
+/*           Buttons            */
+/*------------------------------*/
+
+#single-actions[data-v-0e9ddddb] {
+  padding: 0 !important;
+}
+
+#multi-actions a[data-v-0e9ddddb],
+#multi-actions .upload a[data-v-0e9ddddb] {
+  background: #ffffff !important;
+  padding: 3px 11px !important;
+  border-radius: 6px !important;
+  color: #424242 !important;
+  border: 1px solid #26232c26 !important;
+}
+
+#multi-actions a[data-v-0e9ddddb]:hover {
+  background: #343b44 !important;
+  color: #ffffff !important;
+}
+
+#multi-actions .upload a[data-v-0e9ddddb] {
+  background: #343b44 !important;
+  color: #ffffff !important;
+}
+
+#multi-actions .upload a[data-v-0e9ddddb]:hover {
+  background: #424952 !important;
+  color: #ffffff !important;
+}
+
+#multi-actions a[data-v-0e9ddddb] .dropdown-item {
+  background: none !important;
+  border: none !important;
+  padding: 5px 15px !important;
+  border-radius: 0 !important;
+}
+
+#multi-actions a[data-v-0e9ddddb] .dropdown-item:hover {
+  background: #f5f5f5 !important;
+  color: #343434 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  #multi-actions a[data-v-0e9ddddb] {
+    background: #222222 !important;
+    color: #fff !important;
+    border: 1px solid #222222 !important;
+  }
+
+  #multi-actions a[data-v-0e9ddddb]:hover {
+    background: #303030 !important;
+    color: #ffffff !important;
+  }
+
+  #multi-actions a[data-v-0e9ddddb] .dropdown-item:hover {
+    background: #545454 !important;
+    color: #fff !important;
+  }
+
+  #multi-actions .upload a[data-v-0e9ddddb] {
+    background: #172924 !important;
+    color: #34b891 !important;
+    border: 1px solid #26232c26 !important;
+  }
+
+  #multi-actions .upload a[data-v-0e9ddddb]:hover {
+    background: #083426 !important;
+    color: #34b891 !important;
+  }
+}
+
+/*------------------------------*/
+/*     Folder and file icons    */
+/*------------------------------*/
+
+.file-row.type-dir a.name[data-v-0e9ddddb]::before,
+.file-row.type-file a.name[data-v-0e9ddddb]::before {
+  font-family: "Font Awesome 5 Free" !important;
+}
+
+.file-row.type-dir a.name[data-v-0e9ddddb]::before {
+  content: "\f07b" !important;
+  color: #f9b30f !important;
+}
+
+.file-row.type-file a.name[data-v-0e9ddddb]::before {
+  content: "\f15c" !important;
+  color: #363636 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-row.type-file a.name[data-v-0e9ddddb]::before {
+    color: #cbcbcb !important;
+  }
+}
+
+/*------------------------------*/
+/*          Breadcrumb          */
+/*------------------------------*/
+
+.breadcrumb a[data-v-0e9ddddb],
+.breadcrumb li + li:before {
+  font-weight: 400 !important;
+  padding: 1px 6px !important;
+  border-radius: 5px !important;
+}
+
+.breadcrumb a[data-v-0e9ddddb] {
+  background: #ffffff !important;
+  color: #343b44 !important;
+  border: 1px solid #00000017 !important;
+}
+
+.breadcrumb a[data-v-0e9ddddb]:hover {
+  background: #343b44 !important;
+  color: #ffffff !important;
+}
+
+.breadcrumb li + li:before {
+  color: #383838 !important;
+  content: "\0002f" !important;
+  margin: 0 0 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .breadcrumb a[data-v-0e9ddddb] {
+    background: #172924 !important;
+    color: #34b891 !important;
+    border: 1px solid #00000017 !important;
+  }
+
+  .breadcrumb a[data-v-0e9ddddb]:hover {
+    background: #083426 !important;
+    color: #34b891 !important;
+  }
+
+  .breadcrumb li + li:before {
+    color: #dbdbdb !important;
+  }
+}
+
+/*------------------------------*/
+/*          Dropdown            */
+/*------------------------------*/
+
+.dropdown-trigger .button {
+  background-color: #ffffff00 !important;
+  border-color: #ffffff00 !important;
+  border-width: 1px !important;
+  color: #363636 !important;
+  cursor: pointer !important;
+  justify-content: center !important;
+  padding-bottom: calc(0.375em - 1px) !important;
+  padding-left: 0.75em !important;
+  padding-right: 0.75em !important;
+  padding-top: calc(0.375em - 1px) !important;
+  text-align: center !important;
+  white-space: nowrap !important;
+}
+
+.dropdown-trigger .button:hover {
+  color: #363636 !important;
+  background: #e9e9e9 !important;
+  border-radius: 6px !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dropdown-trigger .button {
+    color: #ffffff !important;
+  }
+
+  .dropdown-trigger .button:hover {
+    color: #ffffff !important;
+    background: #181818 !important;
+    border-radius: 6px !important;
+  }
+}
+
+/*------------------------------*/
+/*       Tree folder list       */
+/*------------------------------*/
+
+.tree-list .button.is-primary {
+  background-color: #efefef !important;
+  border-color: transparent !important;
+  color: #282828 !important;
+  border-radius: 6px !important;
+  font-size: 10px !important;
+}
+
+.tree-list .button.is-primary:hover {
+  background: #d9d9d9 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tree-list .button.is-primary {
+    background-color: #282828 !important;
+    color: #fff !important;
+  }
+
+  .tree-list .button.is-primary:hover {
+    background: #343434 !important;
+  }
+}
+
+a[data-v-45d0a157],
+a[data-v-45d0a157]::before {
+  color: #373737 !important;
+  font-weight: 700 !important;
+  padding: 4px 6px !important;
+  border-radius: 5px !important;
+}
+
+a[data-v-45d0a157]:hover {
+  background: #efefef !important;
+}
+
+a[data-v-45d0a157]::before {
+  content: "\f07b" !important;
+  font-family: "Font Awesome 5 Free" !important;
+  color: #f9b30f !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  a[data-v-45d0a157]:hover {
+    background: #282828 !important;
+  }
+}
+
+/*------------------------------*/
+/*         Code editor          */
+/*------------------------------*/
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #161616 !important;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #cbcbcb !important;
+  text-shadow: none !important;
+}
+
+.prism-editor__line-numbers {
+  background: #161616 !important;
+}
+
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection {
+  background: #3a3a3a !important;
+}

install/upgrade/upgrade.conf

@@ -60,7 +60,7 @@ sm_v='2.38.2'
 # UPGRADE_UPDATE_FILEMANAGER_CONFIG: Updates only the configuration file if changes are made but now new issue has been issued!
 UPGRADE_UPDATE_FILEMANAGER_CONFIG='false'
 # Set version of File manager to update during upgrade if not already installed
-fm_v='7.11.1'
+fm_v='7.12.0'
 
 # Backblaze
 b2_v='3.6.0'