Explorar o código

refactor css using tailwindcss

Mistivia hai 1 mes
pai
achega
334ee709cd
Modificáronse 2 ficheiros con 25 adicións e 4 borrados
  1. 7 4
      index.html
  2. 18 0
      src/style.css

+ 7 - 4
index.html

@@ -12,14 +12,17 @@
     <title>Lite AI Chat</title>
 </head>
 <body class="font-sans h-screen flex flex-col max-w-5xl m-auto">
+    <!-- header -->
     <div class="p-8 bg-gray-100">
-        <select class="bg-white p-4 rounded-lg text-lg" id="model-selector"></select>
+        <select class="modes bg-white p-4 rounded-lg text-lg" id="model-selector"></select>
     </div>
     
-    <div class="p-6 flex-1" id="message-container">
+    <!-- messages -->
+    <div class="p-6 my-2 flex-1 overflow-y-auto" id="message-container">
     </div>
-
-    <div class="flex my-4 p-4">
+    
+    <!-- input area -->
+    <div class="flex p-4 my-2">
         <textarea class="flex-1 m-2 p-4 border-gray-200 outline-none resize-none border rounded-lg"
             placeholder="Input Message..." rows="3" id="input-box"
         ></textarea>

+ 18 - 0
src/style.css

@@ -1,5 +1,23 @@
 @import "tailwindcss";
 
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
 .msg p {
     @apply text-base/6;
 }