From ec4bc1e81585def35bf0661a81e4e5b38329cd36 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Tue, 14 Jan 2025 22:17:31 +0200
Subject: [PATCH] style: move styles from HTML to CSS for better organization

- Transferred styles related to the x-cloak directive, input, select, and badge components from settingsBase.html to custom.css.
- This change improves the separation of concerns by consolidating styles in a dedicated CSS file, enhancing maintainability and readability of the HTML structure.
---
 assets/custom.css                | 24 ++++++++++++++++++++++++
 views/settings/settingsBase.html | 25 -------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 47a61d5..45b3743 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1,3 +1,8 @@
+/* Add at the top of the file */
+[x-cloak=""] {
+    display: none !important;
+}
+
 /* Force page scrolling behavior */
 html, body {
   height: 100%;
@@ -548,4 +553,23 @@ thead.sticky-header {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+/* Settings Base Styles */
+.input {
+    border-radius: 0.3rem;
+}
+
+.select {
+    border-radius: 0.3rem;
+}
+
+.badge.badge-primary.badge-sm.changed-badge {
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.125rem;
+    height: 1rem;
 }
\ No newline at end of file
diff --git a/views/settings/settingsBase.html b/views/settings/settingsBase.html
index ca68e66..bcd7ef5 100644
--- a/views/settings/settingsBase.html
+++ b/views/settings/settingsBase.html
@@ -77,31 +77,6 @@
         }
     };
 </script>
-<style>
-    [x-cloak] {
-        display: none !important;
-    }
-
-    .input {
-        border-radius: 0.3rem;
-    }
-
-    .select {
-        border-radius: 0.3rem;
-    }
-
-    .badge.badge-primary.badge-sm.changed-badge {
-        opacity: 1;
-        transition: opacity 0.3s ease-out;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 0.125rem;
-        /* mt-0.5 */
-        height: 1rem;
-        /* h-4 */
-    }
-</style>
 <div class="col-span-12" x-data="{ 
     notifications: [],
     hasChanges: false,