Little More fix

app/frontend/static/assets/css/partial/crafty-backup.css

@@ -0,0 +1,39 @@
+/* Remove default bullets */
+.tree-view,
+.tree-nested {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+}
+
+/* Style the items */
+.tree-item,
+.files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.tree-caret .fa-folder {
+    display: inline-block;
+}
+
+.tree-caret .fa-folder-open {
+    display: none;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.tree-caret-down .fa-folder {
+    display: none;
+}
+
+.tree-caret-down .fa-folder-open {
+    display: inline-block;
+}
+
+/* Hide the nested list */
+.tree-nested {
+    display: none;
+}

app/frontend/static/assets/css/partial/crafty-wizard.css

@@ -188,4 +188,14 @@ button>i.refresh-class {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
+}
+
+div>.input-group>.custom-file-input {
+    position: relative !important;
+    -webkit-box-flex: 1 !important;
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+    width: 1% !important;
+    margin-bottom: 0 !important;
+    border: 1px solid var(--outline);
 }

app/frontend/templates/panel/dashboard.html

@@ -159,7 +159,7 @@
         <div class="card-body">
 
           {% if len(data['servers']) == 0 and len(data['failed_servers']) == 0 %}
-          <div style="text-align: center; color: grey;">
+          <div class="text-align-center text-secondary">
             <h1>{{ translate('dashboard', 'welcome', data['lang']) }}</h1>
             <br>
             <h7>{{ translate('dashboard', 'no-servers', data['lang']) }} {{ translate('dashboard', 'newServer',

app/frontend/templates/panel/server_backup.html

@@ -40,7 +40,7 @@
             {% include "parts/m_server_controls_list.html %}
           </span>
           <div class="row">
-            <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
+            <div class="col-md-12 col-sm-12 overflow-x-auto">
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
                   <h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('serverBackups', 'backups',
@@ -93,7 +93,7 @@
                           <td id="{{backup.backup_location}}" class="type">
                             <p class="no-scroll">{{backup.backup_location}}</p>
                           </td>
-                          <td id="{{backup.max_backups}}" class="trigger" style="overflow: scroll; max-width: 30px;">
+                          <td id="{{backup.max_backups}}" class="trigger overflow-scroll" style="max-width: 30px;">
                             <p>{{backup.max_backups}}</p>
                           </td>
                           <td id="backup_edit" class="action">
@@ -171,47 +171,7 @@
 
 
 </div>
-<style>
+<style rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css"></style>
-  /* Remove default bullets */
-  .tree-view,
-  .tree-nested {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 10px;
-  }
-
-  /* Style the items */
-  .tree-item,
-  .files-tree-title {
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-  }
-
-  /* Create the caret/arrow with a unicode, and style it */
-  .tree-caret .fa-folder {
-    display: inline-block;
-  }
-
-  .tree-caret .fa-folder-open {
-    display: none;
-  }
-
-  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-  .tree-caret-down .fa-folder {
-    display: none;
-  }
-
-  .tree-caret-down .fa-folder-open {
-    display: inline-block;
-  }
-
-  /* Hide the nested list */
-  .tree-nested {
-    display: none;
-  }
-</style>
 <!-- content-wrapper ends -->
 
 {% end %}

app/frontend/templates/panel/server_backup_edit.html

@@ -109,7 +109,7 @@
                   <div class="custom-control custom-switch">
                     {% if data['backup_config']['before'] %}
                     <input type="checkbox" class="custom-control-input" id="before-check" name="before-check" checked>
-                    <input type="text" class="form-control hidden-input" name="before" id="backup_before" value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you" style="display: inline-block;">
+                    <input type="text" class="form-control hidden-input d-inline-block" name="before" id="backup_before" value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you">
                     {% else %}
                     <input type="checkbox" class="custom-control-input" id="before-check" name="before-check">
                     <input type="text" class="form-control hidden-input" name="before" id="backup_before" value="" placeholder="We enter the / for you." style="display: none;">
@@ -122,7 +122,7 @@
                   <div class="custom-control custom-switch">
                     {% if data['backup_config']['after'] %}
                     <input type="checkbox" class="custom-control-input" id="after-check" name="after-check" checked>
-                    <input type="text" class="form-control hidden-input" name="after" id="backup_after" value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you" style="display: inline-block;">
+                    <input type="text" class="form-control hidden-input d-inline-block" name="after" id="backup_after" value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you">
                     <br>
                     {% else %}
                     <input type="checkbox" class="custom-control-input" id="after-check" name="after-check">
@@ -150,7 +150,7 @@
                         </button>
                       </div>
                       <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path="" style="overflow: scroll; max-height:75%;">
+                        <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div" data-path="">
                           <input type="checkbox" id="main-tree-input" name="root_path" value="" disabled>
                           <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                             <i class="far fa-folder"></i>
@@ -242,47 +242,7 @@
 
 
 </div>
-<style>
+<style rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css"></style>
-  /* Remove default bullets */
-  .tree-view,
-  .tree-nested {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 10px;
-  }
-
-  /* Style the items */
-  .tree-item,
-  .files-tree-title {
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-  }
-
-  /* Create the caret/arrow with a unicode, and style it */
-  .tree-caret .fa-folder {
-    display: inline-block;
-  }
-
-  .tree-caret .fa-folder-open {
-    display: none;
-  }
-
-  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-  .tree-caret-down .fa-folder {
-    display: none;
-  }
-
-  .tree-caret-down .fa-folder-open {
-    display: inline-block;
-  }
-
-  /* Hide the nested list */
-  .tree-nested {
-    display: none;
-  }
-</style>
 <!-- content-wrapper ends -->
 
 {% end %}
@@ -674,8 +634,8 @@
                             \n<div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
                             <input type="checkbox" class="checkBoxClass excluded" value="${dpath}" ${checked}>
                             <span id="${dpath}span" class="files-tree-title" data-path="${dpath}" data-name="${filename}" onclick="getDirView(event)">
-                            <i style="color: var(--info);" class="far fa-folder"></i>
+                            <i class="text-info far fa-folder"></i>
-                            <i style="color: var(--info);" class="far fa-folder-open"></i>
+                            <i class="text-info far fa-folder-open"></i>
                             <strong>${filename}</strong>
                             </span>
                             </input></div><li>`

app/frontend/templates/server/bedrock_wizard.html

@@ -29,30 +29,6 @@
             <fieldset>
               {% else %}
               <fieldset disabled="disabled">
-                <style>
-                  .api-alert {
-                    position: absolute;
-                    top: -5px;
-                    left: 0;
-                    font-size: 50px !important;
-                    color: #fff;
-                    background: rgb(127, 133, 133);
-                    opacity: .4;
-                    width: 100%;
-                    height: 100%;
-                    z-index: 100;
-                  }
-
-                  .api-alert p {
-                    margin: 0;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    text-align: center;
-                    font-size: 20px;
-                    -ms-transform: translate(-50%, -50%);
-                    transform: translate(-50%, -50%);
-                  }
                 </style>
                 {% end %}
                 <div class="form-group">
@@ -353,96 +329,7 @@
     </div>
   </div>
 </div>
-<style>
+<style rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css"></style>
-  div>.input-group>.custom-file-input {
-    position: relative !important;
-    -webkit-box-flex: 1 !important;
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
-    width: 1% !important;
-    margin-bottom: 0 !important;
-    border: 1px solid var(--outline);
-  }
-
-  .scroll {
-    max-height: 12em;
-    overflow-y: auto;
-  }
-
-  .menu-btn {
-    font-size: 0.9em;
-    padding: 2px 10px;
-  }
-
-  .menu {
-    padding-top: 10px;
-    z-index: 200;
-    margin-top: 4px;
-    position: absolute;
-    background-color: var(--card-banner-bg);
-  }
-
-  .menu-option {
-    padding: 6px 20px 6px;
-    color: white;
-  }
-
-  #overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-
-  #op_logo {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-</style>
-<style>
-  /* Remove default bullets */
-  .tree-view,
-  .tree-nested {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 10px;
-  }
-
-  /* Style the items */
-  .tree-item,
-  .files-tree-title {
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-  }
-
-  /* Create the caret/arrow with a unicode, and style it */
-  .tree-caret .fa-folder {
-    display: inline-block;
-  }
-
-  .tree-caret .fa-folder-open {
-    display: none;
-  }
-
-  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-  .tree-caret-down .fa-folder {
-    display: none;
-  }
-
-  .tree-caret-down .fa-folder-open {
-    display: inline-block;
-  }
-
-  /* Hide the nested list */
-  .tree-nested {
-    display: none;
-  }
-</style>
 
 {% end %}