hst-custom.css 6.9 KB

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