diff options
author | Heiner Lohaus <hlohaus@users.noreply.github.com> | 2024-03-16 10:48:37 +0100 |
---|---|---|
committer | Heiner Lohaus <hlohaus@users.noreply.github.com> | 2024-03-16 10:48:37 +0100 |
commit | 905ced06bd27d4a252791c2316d0bb00b8326d35 (patch) | |
tree | 223c46b0c1902ec73ea55d401eebbf01078c082d /g4f/gui/client/css/style.css | |
parent | Move raise_for_status, Create FormData wrapper (diff) | |
download | gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar.gz gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar.bz2 gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar.lz gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar.xz gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.tar.zst gpt4free-905ced06bd27d4a252791c2316d0bb00b8326d35.zip |
Diffstat (limited to 'g4f/gui/client/css/style.css')
-rw-r--r-- | g4f/gui/client/css/style.css | 1031 |
1 files changed, 0 insertions, 1031 deletions
diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css deleted file mode 100644 index ba3f1187..00000000 --- a/g4f/gui/client/css/style.css +++ /dev/null @@ -1,1031 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); - -.adsbox { - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - background-color: var(--blur-bg); - height: 100%; - width: 100%; - border-radius: var(--border-radius-1); - border: 1px solid var(--blur-border); -} - -.ads { - align-items: center; - margin: auto; - display: flex; - flex-direction: column; - gap: var(--inner-gap); - max-width: 200px; - padding: var(--section-gap); - overflow: none; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -@media screen and (max-width: 728px) { - .ads { - display: none; - } -} - -/* :root { - --colour-1: #ffffff; - --colour-2: #000000; - --colour-3: #000000; - --colour-4: #000000; - --colour-5: #000000; - --colour-6: #000000; - - --accent: #ffffff; - --blur-bg: #98989866; - --blur-border: #00000040; - --user-input: #000000; - --conversations: #000000; -} */ - -:root { - --colour-1: #000000; - --colour-2: #ccc; - --colour-3: #e4d4ff; - --colour-4: #f0f0f0; - --colour-5: #181818; - --colour-6: #242424; - - --accent: #8b3dff; - --blur-bg: #16101b66; - --blur-border: #84719040; - --user-input: #ac87bb; - --conversations: #c7a2ff; - --conversations-hover: #c7a2ff4d; -} - -:root { - --font-1: "Inter", sans-serif; - --section-gap: 25px; - --inner-gap: 15px; - --border-radius-1: 8px; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - position: relative; - font-family: var(--font-1); -} - -html, -body { - scroll-behavior: smooth; - overflow: hidden; -} - -body { - padding: var(--section-gap); - background: var(--colour-1); - color: var(--colour-3); - height: 100vh; -} - -.row { - display: flex; - gap: var(--section-gap); - height: 100%; -} - -.box { - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - background-color: var(--blur-bg); - height: 100%; - width: 100%; - border-radius: var(--border-radius-1); - border: 1px solid var(--blur-border); -} - -.hidden { - display: none; -} - -.conversations { - max-width: 260px; - padding: var(--section-gap); - overflow: auto; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.conversation { - width: 100%; - display: flex; - flex-direction: column; - gap: 5px; -} - -.conversation #messages { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - overflow: auto; - overflow-wrap: break-word; - padding-bottom: 10px; -} - -.conversation .user-input { - max-height: 200px; - margin-bottom: 10px; -} - -.conversation .user-input input { - font-size: 15px; - width: 100%; - height: 100%; - padding: 12px 15px; - background: none; - border: none; - outline: none; - color: var(--colour-3); -} - -.conversation .user-input input::placeholder { - color: var(--user-input) -} - -.gradient:nth-child(1) { - --top: 0; - --right: 0; - --size: 70vw; - --blur: calc(0.5 * var(--size)); - --opacity: 0.3; - animation: zoom_gradient 6s infinite; -} - -.gradient { - position: absolute; - z-index: -1; - border-radius: calc(0.5 * var(--size)); - background-color: var(--accent); - background: radial-gradient(circle at center, var(--accent), var(--accent)); - width: 70vw; - height: 70vw; - top: 50%; - right: 0; - transform: translateY(-50%); - filter: blur(calc(0.5 * 70vw)) opacity(var(--opacity)); -} - -.conversations { - display: flex; - flex-direction: column; - gap: var(--inner-gap); - padding: var(--inner-gap); -} - -.conversations .title { - font-size: 14px; - font-weight: 500; -} - -.conversations .convo { - padding: 8px 12px; - display: flex; - gap: 10px; - align-items: center; - user-select: none; - justify-content: space-between; - border: 1px dashed var(--conversations); - border-radius: var(--border-radius-1); -} - -.conversations .convo .left { - cursor: pointer; - display: flex; - align-items: center; - gap: 10px; -} - -.conversations .convo .choise { - position: absolute; - right: 8px; - background-color: var(--blur-bg); -} - -.conversations i { - color: var(--conversations); - cursor: pointer; -} - -.convo-title { - color: var(--colour-3); - font-size: 14px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.message { - width: 100%; - overflow-wrap: break-word; - display: flex; - gap: var(--section-gap); - padding: var(--inner-gap) var(--section-gap); - padding-bottom: 0; -} - -.message.regenerate { - opacity: 0.75; -} - -.message:last-child { - animation: 0.6s show_message; -} - -@keyframes show_message { - from { - transform: translateY(10px); - opacity: 0; - } -} - -.message .user { - max-width: 48px; - max-height: 48px; - flex-shrink: 0; -} - -.message .user img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; - outline: 1px solid var(--blur-border); -} - -.message .user:after { - content: "63"; - position: absolute; - bottom: 0; - right: 0; - height: 60%; - width: 60%; - background: var(--colour-3); - filter: blur(10px) opacity(0.5); - z-index: 10000; -} - -.message .assistant{ - max-width: 48px; - max-height: 48px; - flex-shrink: 0; -} - -.message .assistant img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; - outline: 1px solid var(--blur-border); -} - -.message .assistant:after { - content: "63"; - position: absolute; - bottom: 0; - right: 0; - height: 60%; - width: 60%; - background: var(--colour-3); - filter: blur(10px) opacity(0.5); - z-index: 10000; -} - -.message .content { - display: flex; - flex-direction: column; - gap: 10px; -} - -.message .content, -.message .content a:link, -.message .content a:visited{ - font-size: 15px; - line-height: 1.3; - color: var(--colour-3); -} -.message .content pre{ - white-space: pre-wrap; -} - -.message .content img{ - max-width: 400px; -} - -.message .user i { - position: absolute; - bottom: -6px; - right: -6px; - z-index: 1000; -} - -.message .assistant .fa-phone-arrow-up-right, -.message .assistant .fa-phone-arrow-down-left { - position: absolute; - bottom: -6px; - right: -6px; - z-index: 1000; -} - -.message .assistant .fa-xmark, -.message .user .fa-xmark { - position: absolute; - top: -2px; - left: 0px; - z-index: 1000; - display: none; - cursor: pointer; -} - -.message .user .fa-xmark { - color: var(--colour-1); -} - -.message .assistant:hover .fa-xmark, -.message .user:hover .fa-xmark { - display: block; -} - -.message .content .provider a, -.message .content .provider { - font-size: 12px; - text-decoration: none; -} - -.message .content .provider a { - font-weight: bold; -} - -.message .content .count { - font-size: 12px; -} - -.count_total { - font-size: 12px; - padding-left: 100px; - padding-top: 10px; -} - -.new_convo { - padding: 8px 12px; - display: flex; - gap: 18px; - align-items: center; - cursor: pointer; - user-select: none; - background: transparent; - border: 1px solid var(--conversations); - border-radius: var(--border-radius-1); - transition: all 0.2s ease; -} - -.new_convo:hover { - box-shadow: inset 0px 0px 20px var(--conversations-hover); -} - -.new_convo span { - color: var(--colour-3); - font-size: 14px; -} - -.toolbar { - position: relative; -} - -#input-count { - width: fit-content; - font-size: 12px; - padding: 6px var(--inner-gap); -} - -.stop_generating, .toolbar .regenerate { - position: absolute; - z-index: 1000000; - top: 0; - right: 0; -} - -@media only screen and (min-width: 40em) { - .stop_generating, .toolbar .regenerate { - left: 50%; - transform: translateX(-50%); - right: auto; - } -} - -.stop_generating button, .toolbar .regenerate button{ - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - background-color: var(--blur-bg); - border-radius: var(--border-radius-1); - border: 1px solid var(--blur-border); - padding: 5px var(--inner-gap); - color: var(--colour-3); - display: flex; - justify-content: center; - align-items: center; - gap: 12px; - cursor: pointer; - animation: show_popup 0.4s; -} - -@keyframes show_popup { - from { - opacity: 0; - transform: translateY(10px); - } -} - -@keyframes hide_popup { - to { - opacity: 0; - transform: translateY(10px); - } -} - -.stop_generating-hidden #cancelButton, .regenerate-hidden #regenerateButton { - animation: hide_popup 0.4s; - display: none; -} - -.typing { - position: absolute; - top: -25px; - left: 0; - font-size: 14px; - animation: show_popup 0.4s; -} - -.typing-hiding { - animation: hide_popup 0.4s; -} - -.typing-hidden { - display: none; -} - -#image, #file, #camera { - display: none; -} - -label[for="image"]:has(> input:valid){ - color: var(--accent); -} - -label[for="camera"]:has(> input:valid){ - color: var(--accent); -} - -label[for="file"]:has(> input:valid){ - color: var(--accent); -} - -label[for="image"], label[for="file"], label[for="camera"] { - cursor: pointer; - position: absolute; - top: 10px; - left: 10px; -} - -label[for="image"] { - top: 32px; -} - -label[for="camera"] { - top: 54px; -} - -label[for="camera"] { - display: none; -} - -@media (pointer:none), (pointer:coarse) { - label[for="camera"] { - display: block; - } -} - -.buttons input[type="checkbox"] { - height: 0; - width: 0; - display: none; -} - -.buttons label { - cursor: pointer; - text-indent: -9999px; - width: 50px; - height: 30px; - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - background-color: var(--blur-bg); - border-radius: var(--border-radius-1); - border: 1px solid var(--blur-border); - display: block; - border-radius: 100px; - position: relative; - overflow: hidden; - transition: 0.33s; -} - -.buttons label:after { - content: ""; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 5px; - width: 20px; - height: 20px; - background: var(--colour-3); - border-radius: 90px; - transition: 0.33s; -} - -.buttons input:checked+label { - background: var(--accent); -} - -.buttons input:checked+label:after { - left: calc(100% - 5px - 20px); -} - -.buttons { - display: flex; - align-items: center; - justify-content: left; - width: 100%; -} - -.field { - height: fit-content; - display: flex; - align-items: center; - gap: var(--inner-gap); -} - -.field .about { - font-size: 14px; - color: var(--colour-3); -} - - -select { - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; - - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - - cursor: pointer; - background-color: var(--colour-1); - border: 1px solid var(--blur-border); - color: var(--colour-3); - display: block; - position: relative; - overflow: hidden; - outline: none; - padding: 8px 16px; - - appearance: none; - width: 160px; -} - -@media only screen and (min-width: 40em) { - select { - width: 200px; - } - .field { - padding-right: 15px - } -} - -.input-box { - display: flex; - align-items: center; - cursor: pointer; -} - -.info { - padding: 8px 12px; - display: flex; - gap: 18px; - align-items: center; - user-select: none; - background: transparent; - border-radius: var(--border-radius-1); - width: 100%; - cursor: default; - border: 1px dashed var(--conversations) -} - -.bottom_buttons { - width: 100%; - display: flex; - flex-direction: column; - gap: 10px; -} - -.bottom_buttons button { - padding: 8px 12px; - display: flex; - gap: 18px; - align-items: center; - cursor: pointer; - user-select: none; - background: transparent; - border: 1px solid var(--conversations); - border-radius: var(--border-radius-1); - width: 100%; -} - -.bottom_buttons button span { - color: var(--colour-3); - font-size: 14px; -} - -.bottom_buttons button a { - color: var(--colour-3); - font-weight: 500; -} - -.conversations .top { - display: flex; - flex-direction: column; - gap: var(--inner-gap); - overflow: auto; -} - - -#cursor { - line-height: 17px; - margin-left: 3px; - -webkit-animation: blink 0.8s infinite; - animation: blink 0.8s infinite; - width: 7px; - height: 15px; - display: inline-block; -} - -@keyframes blink { - 0% { - background: #ffffff00; - } - - 50% { - background: white; - } - - 100% { - background: #ffffff00; - } -} - -@-webkit-keyframes blink { - 0% { - background: #ffffff00; - } - - 50% { - background: white; - } - - 100% { - background: #ffffff00; - } -} - - -ol, -ul { - padding-left: 20px; -} - - -@keyframes spinner { - to { - transform: rotate(360deg); - } -} - -.spinner:before { - content: ''; - box-sizing: border-box; - position: absolute; - top: 50%; - left: 45%; - width: 20px; - height: 20px; - - border-radius: 50%; - border: 1px solid var(--conversations); - border-top-color: white; - animation: spinner .6s linear infinite; -} - -.grecaptcha-badge { - visibility: hidden; -} - -.mobile-sidebar { - display: none !important; - position: absolute; - z-index: 100000; - top: 0; - left: 0; - margin: 10px; - font-size: 20px; - cursor: pointer; - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - background-color: var(--blur-bg); - border-radius: 10px; - border: 1px solid var(--blur-border); - width: 40px; - height: 40px; - justify-content: center; - align-items: center; - transition: 0.33s; -} - -.mobile-sidebar i { - transition: 0.33s; -} - -.rotated { - transform: rotate(360deg); -} - -@media screen and (max-width: 990px) { - .conversations { - display: none; - width: 100%; - max-width: none; - } - - .buttons { - align-items: flex-start; - flex-wrap: wrap; - gap: 15px; - } - - .field { - width: fit-content; - } - - .mobile-sidebar { - display: flex !important; - } -} - -.shown { - display: flex; -} - - -a:-webkit-any-link { - color: var(--accent); -} - -.conversation .user-input textarea { - font-size: 15px; - width: 100%; - height: 100%; - padding: 12px var(--inner-gap); - background: none; - border: none; - outline: none; - color: var(--colour-3); - - resize: vertical; - max-height: 150px; - min-height: 80px; -} - -/* style for hljs copy */ -.hljs-copy-wrapper { - position: relative; - overflow: hidden -} - -.hljs-copy-wrapper:hover .hljs-copy-button, -.hljs-copy-button:focus { - transform: translateX(0) -} - -.hljs-copy-button { - position: absolute; - transform: translateX(calc(100% + 1.125em)); - top: 1em; - right: 1em; - width: 2rem; - height: 2rem; - text-indent: -9999px; - color: #fff; - border-radius: .25rem; - border: 1px solid #ffffff22; - background-color: #2d2b57; - background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>'); - background-repeat: no-repeat; - background-position: center; - transition: background-color 200ms ease, transform 200ms ease-out -} - -.hljs-copy-button:hover { - border-color: #ffffff44 -} - -.hljs-copy-button:active { - border-color: #ffffff66 -} - -.hljs-copy-button[data-copied="true"] { - text-indent: 0; - width: auto; - background-image: none -} - -@media(prefers-reduced-motion) { - .hljs-copy-button { - transition: none - } -} - -.hljs-copy-alert { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px -} - -.visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} - - -.color-picker>fieldset { - border: 0; - display: flex; - width: fit-content; - background: var(--colour-1); - margin-inline: auto; - border-radius: 8px; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - cursor: pointer; - background-color: var(--blur-bg); - border: 1px solid var(--blur-border); - color: var(--colour-3); - display: block; - position: relative; - overflow: hidden; - outline: none; - padding: 6px 16px; -} - -.color-picker input[type="radio"]:checked { - background-color: var(--radio-color); -} - -.color-picker input[type="radio"]#light { - --radio-color: gray; -} - -.color-picker input[type="radio"]#pink { - --radio-color: white; -} - -.color-picker input[type="radio"]#blue { - --radio-color: blue; -} - -.color-picker input[type="radio"]#green { - --radio-color: green; -} - -.color-picker input[type="radio"]#dark { - --radio-color: #232323; -} - -.pink { - --colour-1: #ffffff; - --colour-2: #000000; - --colour-3: #000000; - --colour-4: #000000; - --colour-5: #000000; - --colour-6: #000000; - - --accent: #ffffff; - --blur-bg: #98989866; - --blur-border: #00000040; - --user-input: #000000; - --conversations: #000000; -} - -.blue { - --colour-1: hsl(209 50% 90%); - --clr-card-bg: hsl(209 50% 100%); - --colour-3: hsl(209 50% 15%); - --conversations: hsl(209 50% 25%); -} - -.green { - --colour-1: hsl(109 50% 90%); - --clr-card-bg: hsl(109 50% 100%); - --colour-3: hsl(109 50% 15%); - --conversations: hsl(109 50% 25%); -} - -.dark { - --colour-1: hsl(209 50% 10%); - --clr-card-bg: hsl(209 50% 5%); - --colour-3: hsl(209 50% 90%); - --conversations: hsl(209 50% 80%); -} - -:root:has(#pink:checked) { - --colour-1: #ffffff; - --colour-2: #000000; - --colour-3: #000000; - --colour-4: #000000; - --colour-5: #000000; - --colour-6: #000000; - - --accent: #ffffff; - --blur-bg: #98989866; - --blur-border: #00000040; - --user-input: #000000; - --conversations: #000000; -} - -:root:has(#blue:checked) { - --colour-1: hsl(209 50% 90%); - --clr-card-bg: hsl(209 50% 100%); - --colour-3: hsl(209 50% 15%); - --conversations: hsl(209 50% 25%); -} - -:root:has(#green:checked) { - --colour-1: hsl(109 50% 90%); - --clr-card-bg: hsl(109 50% 100%); - --colour-3: hsl(109 50% 15%); - --conversations: hsl(109 50% 25%); -} - -:root:has(#dark:checked) { - --colour-1: hsl(209 50% 10%); - --clr-card-bg: hsl(209 50% 5%); - --colour-3: hsl(209 50% 90%); - --conversations: hsl(209 50% 80%); -} - -#send-button { - border: 1px dashed #e4d4ffa6; - border-radius: 4px; - cursor: pointer; - padding-left: 8px; - padding-right: 5px; - padding-top: 2px; - padding-bottom: 2px; - position: absolute; - bottom: 8px; - right: 8px; -} - -#send-button:hover { - border: 1px solid #e4d4ffc9; -} - -#systemPrompt { - font-size: 15px; - width: 100%; - color: var(--colour-3); - min-height: 59px; - height: 59px; - outline: none; - padding: var(--inner-gap) var(--section-gap); - resize: vertical; -} |