Merge branch 'enhancement/improve-minor-displays' into 'dev'

Improve Minor Displays

See merge request crafty-controller/crafty-4!703

CHANGELOG.md

@@ -18,6 +18,9 @@
 - Refactor Forge server initialisation flow for newer versions ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/687))
 - Remove scroll bars from player management ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/693))
 - Add warning to wizard for unsupported mc ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/701))
+- Improve display for `th-TH` characters ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/703))
+- Improve display of white text on **wssErrors** ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/703))
+- Improve display of white text on  **Buttons** ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/703))
 ### Lang
 - Update `zh_CN, pl_PL, nl_BE, lv_LV, he_IL, fr_FR, de_DE, lol_EN` translations for `4.2.3` ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/696))
 - New `uk_UA, tr_TR, th_TH` translations for `4.2.3` ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/696))

app/frontend/static/assets/css/crafty.css

@@ -37,16 +37,16 @@ nav.sidebar {
     width: 10px;
     height: 10px;
     border-radius: 100%;
-    border: 2px solid #fff;
+    border: 2px solid var(--white);
     display: block;
 }
 
 .toggle-handle {
-    background-color: white !important;
+    background-color: var(--white) !important;
 }
 
 .toggle-on {
-    color: black !important;
+    color: var(--dark) !important;
 }
 
 .toggle {
@@ -61,7 +61,7 @@ nav.sidebar {
     width: 10px;
     height: 10px;
     border-radius: 100%;
-    border: 2px solid #fff;
+    border: 2px solid var(--white);
     display: block;
 }
 
@@ -95,7 +95,7 @@ nav.sidebar {
 }
 
 .scrollable-element {
-    scrollbar-color: red yellow;
+    scrollbar-color: var(--red) var(--yellow);
 }
 
 .term-nav-item {
@@ -212,6 +212,14 @@ div>.input-group>.form-control {
     top: calc(-0.125rem + 1px);
 }
 
+a.btn-primary {
+    color: var(--white);
+}
+
+button.btn-primary {
+    color: var(--white);
+}
+
 /**************************************************************/
 
 /**************************************************************/
@@ -233,4 +241,30 @@ td.action .btn {
     margin-bottom: 0.2rem;
 }
 
+/**************************************************************/
+
+/**************************************************************/
+/* CSS for warnings Displays */
+/**************************************************************/
+div.warnings div.wssError {
+    color: var(--white);
+}
+
+div.warnings div.wssError a {
+    color: var(--outline);
+}
+
+div.warnings div.wssError a:hover {
+    color: var(--white-smoke);
+}
+
+/**************************************************************/
+
+/**************************************************************/
+/* CSS for Fonts Displays */
+/**************************************************************/
+*:lang(th-TH) :not(.fa, .fas, .fab, .fa-solid) {
+    font-family: 'Sarabun', 'roboto', sans-serif;
+}
+
 /**************************************************************/

app/frontend/templates/base.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sarabun" media="screen">
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.css" />
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/css/crafty.css">
@@ -53,7 +54,6 @@
   <script src="../static/assets/vendors/js/chart.min.js"></script>
   <script src="../static/assets/vendors/js/hammer.min.js"></script>
   <script src="../static/assets/vendors/js/chartjs-plugin-zoom.min.js"></script>
-
   <!-- End Bootstrap Toggle -->
 
 </head>
@@ -395,7 +395,7 @@
             }
           },
           callback: function (result) {
-            if (result){
+            if (result) {
               location.href = "/panel/download_support_package";
             } else {
               bootbox.close();
@@ -489,8 +489,8 @@
       if (link) {
         let linkEl = document.createElement('a')
         linkEl.href = link;
-        linkEl.innerHTML = link_msg;
-        linkEl.style.color = 'white';
+        linkEl.innerHTML = "See our documentation for details.";
+        //linkEl.style.color = 'white';
         linkEl.style.textDecoration = 'underline';
         linkEl.target = "_blank";
 
@@ -586,7 +586,7 @@
         '⚠️You are in a recovery account. Access is limited!',
         link='/logout',
         link_msg="Click here to log out after you change your password. ⚠️",
-        className='anti-lockout', 
+        className='anti-lockout',
         bg_color='#6887dc'
         )
       }