Strona główna Odkrywaj Pomoc
Zaloguj się
mistivia
/
lite-ai-chat
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

refactor css using tailwindcss

Mistivia 1 miesiąc temu
rodzic
df764ac033
commit
334ee709cd
2 zmienionych plików z 25 dodań i 4 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 7 4
      index.html
  2. 18 0
      src/style.css

+ 7 - 4
index.html
Wyświetl plik 

@@ -12,14 +12,17 @@
 
     <title>Lite AI Chat</title>
 
     <title>Lite AI Chat</title>
 
 </head>
 
 </head>
 
 <body class="font-sans h-screen flex flex-col max-w-5xl m-auto">
 
 <body class="font-sans h-screen flex flex-col max-w-5xl m-auto">
 
+    <!-- header -->
 
     <div class="p-8 bg-gray-100">
 
     <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>
 
     
     
-    <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>
 
-
 
-    <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"
 
         <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"
 
             placeholder="Input Message..." rows="3" id="input-box"
 
         ></textarea>
 
         ></textarea>

+ 18 - 0
src/style.css
Wyświetl plik 

@@ -1,5 +1,23 @@
 
 @import "tailwindcss";
 
 @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 {
 
 .msg p {
 
     @apply text-base/6;
 
     @apply text-base/6;
 
 }
 
 }