1 files changed, 28 insertions, 8 deletions

diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 25fc4911..b0f7a4a0 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -520,7 +520,7 @@ label[for="camera"] {
 }
 
 .buttons label,
-.settings label {
+.settings label.toogle {
     cursor: pointer;
     text-indent: -9999px;
     width: 50px;
@@ -538,7 +538,7 @@ label[for="camera"] {
 }
 
 .buttons label:after,
-.settings label:after {
+.settings label.toogle:after {
     content: "";
     position: absolute;
     top: 50%;
@@ -560,17 +560,13 @@ label[for="camera"] {
     left: calc(100% - 5px - 20px);
 }
 
-.buttons, .settings {
+.buttons {
     display: flex;
     align-items: center;
     justify-content: left;
     width: 100%;
 }
 
-.settings textarea{
-    height: 20px;
-}
-
 .field {
     height: fit-content;
     display: flex;
@@ -1017,7 +1013,7 @@ a:-webkit-any-link {
     border: 1px solid #e4d4ffc9;
 }
 
-#systemPrompt {
+#systemPrompt, .settings textarea {
     font-size: 15px;
     width: 100%;
     color: var(--colour-3);
@@ -1028,6 +1024,30 @@ a:-webkit-any-link {
     resize: vertical;
 }
 
+.settings {
+    width: 100%;
+    display: none;
+}
+
+.settings .field {
+    margin: var(--inner-gap) 0;
+}
+
+.settings textarea {
+    background-color: transparent;
+    border: none;
+    padding: var(--inner-gap) 0;
+}
+
+.settings .label {
+    font-size: 15px;
+    padding: var(--inner-gap) 0;
+    width: fit-content;
+    min-width: 190px;
+    margin-left: var(--section-gap);
+    white-space:nowrap;
+}
+
 ::-webkit-scrollbar {
     width: 10px;
 }