Skip to content

Commit 62891c5

Browse files
MaxiZamoranojaapmarcus
MaxiZamorano
and
jaapmarcus
authored
Customization of the file manager with interface improvements (hestiacp#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>
1 parent bb7e2a3 commit 62891c5

File tree

3 files changed

+324
-1
lines changed

3 files changed

+324
-1
lines changed

‎install/deb/filemanager/filegator/configuration.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@
242242

243243
$dist_config["services"]["Filegator\Services\View\ViewInterface"]["config"] = [
244244
"add_to_head" => '
245+
<link rel="stylesheet" href="/fm/css/hst-custom.css">
245246
<style>
246247
.logo {
247248
width: 46px;

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

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
/*------------------------------*/
2+
/* General */
3+
/*------------------------------*/
4+
5+
.navbar,
6+
body,
7+
html {
8+
background: #f7f7f7 !important;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
.navbar,
13+
body,
14+
html {
15+
background-color: #121212 !important;
16+
}
17+
}
18+
19+
@media screen and (min-width: 1024px) {
20+
.container {
21+
max-width: 1100px !important;
22+
}
23+
}
24+
25+
/*------------------------------*/
26+
/* Table */
27+
/*------------------------------*/
28+
29+
.table,
30+
.b-table .table {
31+
border: 1px solid #0000001f !important;
32+
border-radius: 4px !important;
33+
}
34+
35+
.table td,
36+
.table th {
37+
border: none !important;
38+
border-width: 0 0 1px !important;
39+
padding: 2px 4px !important;
40+
vertical-align: top !important;
41+
}
42+
43+
.b-table .table .checkbox-cell {
44+
width: 40px !important;
45+
padding-left: 12px !important;
46+
}
47+
48+
.b-table .table .checkbox-cell .checkbox {
49+
vertical-align: middle !important;
50+
font-size: 12px !important;
51+
}
52+
53+
.table.is-hoverable tbody tr:nth-child(odd) {
54+
background-color: #f7f7f7 !important;
55+
}
56+
57+
@media (prefers-color-scheme: dark) {
58+
.table.is-hoverable tbody tr:nth-child(odd) {
59+
background-color: #222222 !important;
60+
}
61+
62+
.table.is-hoverable tbody tr:not(.is-selected):hover {
63+
background-color: #303030 !important;
64+
}
65+
}
66+
67+
/*------------------------------*/
68+
/* Buttons */
69+
/*------------------------------*/
70+
71+
#single-actions[data-v-0e9ddddb] {
72+
padding: 0 !important;
73+
}
74+
75+
#multi-actions a[data-v-0e9ddddb],
76+
#multi-actions .upload a[data-v-0e9ddddb] {
77+
background: #ffffff !important;
78+
padding: 3px 11px !important;
79+
border-radius: 6px !important;
80+
color: #424242 !important;
81+
border: 1px solid #26232c26 !important;
82+
}
83+
84+
#multi-actions a[data-v-0e9ddddb]:hover {
85+
background: #343b44 !important;
86+
color: #ffffff !important;
87+
}
88+
89+
#multi-actions .upload a[data-v-0e9ddddb] {
90+
background: #343b44 !important;
91+
color: #ffffff !important;
92+
}
93+
94+
#multi-actions .upload a[data-v-0e9ddddb]:hover {
95+
background: #424952 !important;
96+
color: #ffffff !important;
97+
}
98+
99+
#multi-actions a[data-v-0e9ddddb] .dropdown-item {
100+
background: none !important;
101+
border: none !important;
102+
padding: 5px 15px !important;
103+
border-radius: 0 !important;
104+
}
105+
106+
#multi-actions a[data-v-0e9ddddb] .dropdown-item:hover {
107+
background: #f5f5f5 !important;
108+
color: #343434 !important;
109+
}
110+
111+
@media (prefers-color-scheme: dark) {
112+
#multi-actions a[data-v-0e9ddddb] {
113+
background: #222222 !important;
114+
color: #fff !important;
115+
border: 1px solid #222222 !important;
116+
}
117+
118+
#multi-actions a[data-v-0e9ddddb]:hover {
119+
background: #303030 !important;
120+
color: #ffffff !important;
121+
}
122+
123+
#multi-actions a[data-v-0e9ddddb] .dropdown-item:hover {
124+
background: #545454 !important;
125+
color: #fff !important;
126+
}
127+
128+
#multi-actions .upload a[data-v-0e9ddddb] {
129+
background: #172924 !important;
130+
color: #34b891 !important;
131+
border: 1px solid #26232c26 !important;
132+
}
133+
134+
#multi-actions .upload a[data-v-0e9ddddb]:hover {
135+
background: #083426 !important;
136+
color: #34b891 !important;
137+
}
138+
}
139+
140+
/*------------------------------*/
141+
/* Folder and file icons */
142+
/*------------------------------*/
143+
144+
.file-row.type-dir a.name[data-v-0e9ddddb]::before,
145+
.file-row.type-file a.name[data-v-0e9ddddb]::before {
146+
font-family: "Font Awesome 5 Free" !important;
147+
}
148+
149+
.file-row.type-dir a.name[data-v-0e9ddddb]::before {
150+
content: "\f07b" !important;
151+
color: #f9b30f !important;
152+
}
153+
154+
.file-row.type-file a.name[data-v-0e9ddddb]::before {
155+
content: "\f15c" !important;
156+
color: #363636 !important;
157+
}
158+
159+
@media (prefers-color-scheme: dark) {
160+
.file-row.type-file a.name[data-v-0e9ddddb]::before {
161+
color: #cbcbcb !important;
162+
}
163+
}
164+
165+
/*------------------------------*/
166+
/* Breadcrumb */
167+
/*------------------------------*/
168+
169+
.breadcrumb a[data-v-0e9ddddb],
170+
.breadcrumb li + li:before {
171+
font-weight: 400 !important;
172+
padding: 1px 6px !important;
173+
border-radius: 5px !important;
174+
}
175+
176+
.breadcrumb a[data-v-0e9ddddb] {
177+
background: #ffffff !important;
178+
color: #343b44 !important;
179+
border: 1px solid #00000017 !important;
180+
}
181+
182+
.breadcrumb a[data-v-0e9ddddb]:hover {
183+
background: #343b44 !important;
184+
color: #ffffff !important;
185+
}
186+
187+
.breadcrumb li + li:before {
188+
color: #383838 !important;
189+
content: "\0002f" !important;
190+
margin: 0 0 !important;
191+
}
192+
193+
@media (prefers-color-scheme: dark) {
194+
.breadcrumb a[data-v-0e9ddddb] {
195+
background: #172924 !important;
196+
color: #34b891 !important;
197+
border: 1px solid #00000017 !important;
198+
}
199+
200+
.breadcrumb a[data-v-0e9ddddb]:hover {
201+
background: #083426 !important;
202+
color: #34b891 !important;
203+
}
204+
205+
.breadcrumb li + li:before {
206+
color: #dbdbdb !important;
207+
}
208+
}
209+
210+
/*------------------------------*/
211+
/* Dropdown */
212+
/*------------------------------*/
213+
214+
.dropdown-trigger .button {
215+
background-color: #ffffff00 !important;
216+
border-color: #ffffff00 !important;
217+
border-width: 1px !important;
218+
color: #363636 !important;
219+
cursor: pointer !important;
220+
justify-content: center !important;
221+
padding-bottom: calc(0.375em - 1px) !important;
222+
padding-left: 0.75em !important;
223+
padding-right: 0.75em !important;
224+
padding-top: calc(0.375em - 1px) !important;
225+
text-align: center !important;
226+
white-space: nowrap !important;
227+
}
228+
229+
.dropdown-trigger .button:hover {
230+
color: #363636 !important;
231+
background: #e9e9e9 !important;
232+
border-radius: 6px !important;
233+
}
234+
235+
@media (prefers-color-scheme: dark) {
236+
.dropdown-trigger .button {
237+
color: #ffffff !important;
238+
}
239+
240+
.dropdown-trigger .button:hover {
241+
color: #ffffff !important;
242+
background: #181818 !important;
243+
border-radius: 6px !important;
244+
}
245+
}
246+
247+
/*------------------------------*/
248+
/* Tree folder list */
249+
/*------------------------------*/
250+
251+
.tree-list .button.is-primary {
252+
background-color: #efefef !important;
253+
border-color: transparent !important;
254+
color: #282828 !important;
255+
border-radius: 6px !important;
256+
font-size: 10px !important;
257+
}
258+
259+
.tree-list .button.is-primary:hover {
260+
background: #d9d9d9 !important;
261+
}
262+
263+
@media (prefers-color-scheme: dark) {
264+
.tree-list .button.is-primary {
265+
background-color: #282828 !important;
266+
color: #fff !important;
267+
}
268+
269+
.tree-list .button.is-primary:hover {
270+
background: #343434 !important;
271+
}
272+
}
273+
274+
a[data-v-45d0a157],
275+
a[data-v-45d0a157]::before {
276+
color: #373737 !important;
277+
font-weight: 700 !important;
278+
padding: 4px 6px !important;
279+
border-radius: 5px !important;
280+
}
281+
282+
a[data-v-45d0a157]:hover {
283+
background: #efefef !important;
284+
}
285+
286+
a[data-v-45d0a157]::before {
287+
content: "\f07b" !important;
288+
font-family: "Font Awesome 5 Free" !important;
289+
color: #f9b30f !important;
290+
}
291+
292+
@media (prefers-color-scheme: dark) {
293+
a[data-v-45d0a157]:hover {
294+
background: #282828 !important;
295+
}
296+
}
297+
298+
/*------------------------------*/
299+
/* Code editor */
300+
/*------------------------------*/
301+
302+
:not(pre) > code[class*="language-"],
303+
pre[class*="language-"] {
304+
background: #161616 !important;
305+
}
306+
307+
code[class*="language-"],
308+
pre[class*="language-"] {
309+
color: #cbcbcb !important;
310+
text-shadow: none !important;
311+
}
312+
313+
.prism-editor__line-numbers {
314+
background: #161616 !important;
315+
}
316+
317+
code[class*="language-"]::selection,
318+
code[class*="language-"] ::selection,
319+
pre[class*="language-"]::selection,
320+
pre[class*="language-"] ::selection {
321+
background: #3a3a3a !important;
322+
}

‎install/upgrade/upgrade.conf‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ sm_v='2.38.2'
6060
# UPGRADE_UPDATE_FILEMANAGER_CONFIG: Updates only the configuration file if changes are made but now new issue has been issued!
6161
UPGRADE_UPDATE_FILEMANAGER_CONFIG='false'
6262
# Set version of File manager to update during upgrade if not already installed
63-
fm_v='7.11.1'
63+
fm_v='7.12.0'
6464

6565
# Backblaze
6666
b2_v='3.6.0'

0 commit comments

Comments
 (0)