summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client/static/css/style.css
diff options
context:
space:
mode:
authorH Lohaus <hlohaus@users.noreply.github.com>2024-04-09 19:40:42 +0200
committerGitHub <noreply@github.com>2024-04-09 19:40:42 +0200
commit4c23b4cad4744e20da7ccffb303503ea627df7c2 (patch)
treea032e6ebd494136ba35e049b06aa4af45558b540 /g4f/gui/client/static/css/style.css
parentMerge pull request #1809 from ochen1/patch-1 (diff)
parentAdd project files (diff)
downloadgpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar.gz
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar.bz2
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar.lz
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar.xz
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.tar.zst
gpt4free-4c23b4cad4744e20da7ccffb303503ea627df7c2.zip
Diffstat (limited to 'g4f/gui/client/static/css/style.css')
-rw-r--r--g4f/gui/client/static/css/style.css117
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