1 files changed, 98 insertions, 19 deletions

diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 4db65863..faecda9f 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -84,15 +84,17 @@ body {
 }
 
 body {
-    padding: var(--section-gap);
+    padding: 10px;
     background: var(--colour-1);
     color: var(--colour-3);
     height: 100vh;
+    max-width: 1600px;
+    margin: auto;
 }
 
 .row {
     display: flex;
-    gap: var(--section-gap);
+    gap: 10px;
     height: 100%;
 }
 
@@ -106,12 +108,8 @@ body {
     border: 1px solid var(--blur-border);
 }
 
-.hidden {
-    display: none;
-}
-
 .conversations {
-    max-width: 260px;
+    max-width: 280px;
     padding: var(--section-gap);
     overflow: auto;
     flex-shrink: 0;
@@ -138,8 +136,7 @@ body {
 }
 
 .conversation .user-input {
-    max-height: 200px;
-    margin-bottom: 10px;
+    margin-bottom: 4px;
 }
 
 .conversation .user-input input {
@@ -183,8 +180,8 @@ body {
 .conversations {
     display: flex;
     flex-direction: column;
-    gap: var(--inner-gap);
-    padding: var(--inner-gap);
+    gap: 10px;
+    padding: 10px;
 }
 
 .conversations .title {
@@ -207,7 +204,12 @@ body {
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 4px;
+}
+
+.conversations .convo .fa-trash {
+    position: absolute;
+    right: 8px;
 }
 
 .conversations .convo .choise {
@@ -216,7 +218,7 @@ body {
     background-color: var(--blur-bg);
 }
 
-.conversations i {
+.conversations i, .bottom_buttons i {
     color: var(--conversations);
     cursor: pointer;
 }
@@ -229,6 +231,10 @@ body {
     white-space: nowrap;
 }
 
+.convo-title .datetime {
+    font-size: 10px;
+}
+
 .message {
     width: 100%;
     overflow-wrap: break-word;
@@ -309,6 +315,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    flex-wrap: wrap;
 }
 
 .message .content,
@@ -326,6 +333,10 @@ body {
     max-width: 400px;
 }
 
+.message .content .audio{
+    display: flex;
+}
+
 .message .user i {
     position: absolute;
     bottom: -6px;
@@ -351,10 +362,28 @@ body {
     cursor: pointer;
 }
 
+.message .count .fa-clipboard,
+.message .count .fa-volume-high {
+    z-index: 1000;
+    cursor: pointer;
+}
+
 .message .user .fa-xmark {
     color: var(--colour-1);
 }
 
+.message .count .fa-clipboard {
+    color: var(--colour-3);
+}
+
+.message .count .fa-clipboard.clicked {
+    color: var(--accent);
+}
+
+.message .count .fa-volume-high.active {
+    color: var(--accent);
+}
+
 .message .assistant:hover .fa-xmark,
 .message .user:hover .fa-xmark {
     display: block;
@@ -482,7 +511,8 @@ body {
     display: none;
 }
 
-.file-label {
+.file-label,
+.micro-label {
     cursor: pointer;
     position: absolute;
     top: 10px;
@@ -490,7 +520,8 @@ body {
 }
 
 .file-label:has(> input:valid),
-.file-label.selected {
+.file-label.selected,
+.micro-label.recognition {
     color: var(--accent);
 }
 
@@ -498,11 +529,12 @@ label[for="image"] {
     top: 32px;
 }
 
-label[for="camera"] {
+label[for="micro"] {
     top: 54px;
 }
 
 label[for="camera"] {
+    top: 74px;
     display: none;
 }
 
@@ -556,6 +588,16 @@ label[for="camera"] {
     background: var(--accent);
 }
 
+.settings .bottom_buttons {
+    flex-direction: row;
+}
+
+.settings .bottom_buttons button {
+    display: inline-block;
+    max-width: 210px;
+    width: 100%;
+}
+
 .buttons input:checked+label:after {
     left: calc(100% - 5px - 20px);
 }
@@ -565,6 +607,7 @@ label[for="camera"] {
     align-items: center;
     justify-content: left;
     width: 100%;
+    margin-bottom: 4px;
 }
 
 .field {
@@ -635,6 +678,7 @@ select {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    margin: 4px 0;
 }
 
 .bottom_buttons button {
@@ -807,7 +851,7 @@ a:-webkit-any-link {
     color: var(--colour-3);
 
     resize: vertical;
-    max-height: 150px;
+    max-height: 200px;
     min-height: 80px;
 }
 
@@ -1026,7 +1070,14 @@ a:-webkit-any-link {
 
 .settings {
     width: 100%;
-    display: none;
+    min-width: 700px;
+    display: flex;
+    flex-direction: column;
+}
+
+.settings .paper {
+    overflow: auto;
+    flex-direction: column;
 }
 
 .settings .field {
@@ -1039,6 +1090,19 @@ a:-webkit-any-link {
     padding: var(--inner-gap) 0;
 }
 
+.settings input {
+    background-color: transparent;
+    padding: 2px;
+    border: none;
+    font-size: 15px;
+    width: 100%;
+    color: var(--colour-3);
+}
+
+.settings input:focus {
+    outline: none;
+}
+
 .settings .label {
     font-size: 15px;
     padding: var(--inner-gap) 0;
@@ -1059,7 +1123,7 @@ a:-webkit-any-link {
     border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--accent)
+    background: var(--accent);
 }
 
 .hljs {
@@ -1073,8 +1137,23 @@ a:-webkit-any-link {
 #message-input {
     height: 82px;
     margin-left: 20px;
+    max-height: 200px;
 }
 
 #message-input::-webkit-scrollbar {
     width: 5px;
+}
+
+.hidden {
+    display: none;
+}
+
+.blink {
+    animation: blinker 1s step-start infinite;
+}
+
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
 }
\ No newline at end of file