mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-09-20 18:45:09 +02:00
Lint the CSS files
This commit is contained in:
oobabooga
parent
dedbdb46c2
commit
e208128d68
9 changed files with 183 additions and 212 deletions
|
|
@ -25,15 +25,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-you, .circle-bot {
|
.circle-you, .circle-bot {
|
||||||
/*You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here*/
|
/* You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here */
|
||||||
width: 135px;
|
width: 135px;
|
||||||
height: 175px;
|
height: 175px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
/*Change this to move the message box further left or right depending on the size of your profile pic*/
|
/* Change this to move the message box further left or right depending on the size of your profile pic */
|
||||||
padding-left: 90px;
|
padding-left: 90px;
|
||||||
text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.4);
|
text-shadow: 2px 2px 2px rgb(0 0 0 / 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text p {
|
.text p {
|
||||||
|
|
@ -44,37 +44,37 @@
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-top: 1px solid rgb(51, 64, 90);
|
border-top: 1px solid rgb(51 64 90);
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body {
|
.message-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 1rem;
|
border: 1px solid rgb(255 255 255 / 45.9%);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.459);
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
/*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/
|
|
||||||
|
/* Message gradient background color - remove the line bellow if you don't want a background color or gradient */
|
||||||
background: linear-gradient(to bottom, #171730, #1b263f);
|
background: linear-gradient(to bottom, #171730, #1b263f);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Adds 2 extra lines at the top and bottom of the message*/
|
/* Adds 2 extra lines at the top and bottom of the message */
|
||||||
.message-body:before,
|
.message-body::before,
|
||||||
.message-body:after {
|
.message-body::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: rgba(255, 255, 255, 0.13);
|
background-color: rgb(255 255 255 / 13%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body:before {
|
.message-body::before {
|
||||||
top: 6px;
|
top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body:after {
|
.message-body::after {
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -88,15 +88,15 @@
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
line-height: 1.428571429 !important;
|
line-height: 1.428571429 !important;
|
||||||
color: rgb(243, 244, 246) !important;
|
color: rgb(243 244 246) !important;
|
||||||
text-shadow: 2px 2px 2px rgb(0, 0, 0);
|
text-shadow: 2px 2px 2px rgb(0 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p em {
|
.message-body p em {
|
||||||
color: rgb(138, 138, 138) !important;
|
color: rgb(138 138 138) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 688px) {
|
@media screen and (width <= 688px) {
|
||||||
.message {
|
.message {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 60px minmax(0, 1fr);
|
grid-template-columns: 60px minmax(0, 1fr);
|
||||||
|
|
@ -120,7 +120,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
padding-left: 0px;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p {
|
.message-body p {
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
@import url("file/css/chat_style-cai-chat.css");
|
@import url("file/css/chat_style-cai-chat.css");
|
||||||
|
|
||||||
.circle-bot, .circle-you {
|
.circle-bot, .circle-you {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #656565;
|
background-color: #656565;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-bot img, .circle-you img {
|
.circle-bot img, .circle-you img {
|
||||||
border-radius: 8.333px;
|
border-radius: 8.333px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-you {
|
.circle-you {
|
||||||
background-color: #656565;
|
background-color: #656565;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
grid-template-columns: 70px minmax(0, 1fr);
|
grid-template-columns: 70px minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,14 +14,14 @@
|
||||||
.circle-you {
|
.circle-you {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: rgb(238, 78, 59);
|
background-color: rgb(238 78 59);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-bot {
|
.circle-bot {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: rgb(59, 78, 244);
|
background-color: rgb(59 78 244);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,14 +53,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
|
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
|
||||||
margin-bottom: 0em !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .message-body p em {
|
.dark .message-body p em {
|
||||||
color: rgb(138, 138, 138) !important;
|
color: rgb(138 138 138) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p em {
|
.message-body p em {
|
||||||
color: rgb(110, 110, 110) !important;
|
color: rgb(110 110 110) !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
@ -8,14 +8,14 @@
|
||||||
.circle-you {
|
.circle-you {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: rgb(238, 78, 59);
|
background-color: rgb(238 78 59);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-bot {
|
.circle-bot {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: rgb(59, 78, 244);
|
background-color: rgb(59 78 244);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
.circle-you + .text {
|
.circle-you + .text {
|
||||||
float: right;
|
float: right;
|
||||||
background-color: rgb(0, 132, 255);
|
background-color: rgb(0 132 255);
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -91,9 +91,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .message-body p em {
|
.dark .message-body p em {
|
||||||
color: rgb(138, 138, 138) !important;
|
color: rgb(138 138 138) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p em {
|
.message-body p em {
|
||||||
color: rgb(110, 110, 110) !important;
|
color: rgb(110 110 110) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .message-body p em {
|
.dark .message-body p em {
|
||||||
color: rgb(138, 138, 138) !important;
|
color: rgb(138 138 138) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p em {
|
.message-body p em {
|
||||||
color: rgb(110, 110, 110) !important;
|
color: rgb(110 110 110) !important;
|
||||||
}
|
}
|
||||||
|
|
@ -4,42 +4,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .reply {
|
#parent #container .reply {
|
||||||
background-color: rgb(214, 218, 240);
|
background-color: rgb(214 218 240);
|
||||||
border-bottom-color: rgb(183, 197, 217);
|
border-bottom: 1px solid rgb(183 197 217);
|
||||||
border-bottom-style: solid;
|
border-image: none 100% 1 0 stretch;
|
||||||
border-bottom-width: 1px;
|
border-left: 0 none rgb(0 0 0);
|
||||||
border-image-outset: 0;
|
border-right: 1px solid rgb(183 197 217);
|
||||||
border-image-repeat: stretch;
|
color: rgb(0 0 0);
|
||||||
border-image-slice: 100%;
|
|
||||||
border-image-source: none;
|
|
||||||
border-image-width: 1;
|
|
||||||
border-left-color: rgb(0, 0, 0);
|
|
||||||
border-left-style: none;
|
|
||||||
border-left-width: 0px;
|
|
||||||
border-right-color: rgb(183, 197, 217);
|
|
||||||
border-right-style: solid;
|
|
||||||
border-right-width: 1px;
|
|
||||||
border-top-color: rgb(0, 0, 0);
|
|
||||||
border-top-style: none;
|
|
||||||
border-top-width: 0px;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
display: table;
|
display: table;
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
margin-bottom: 4px;
|
margin: 4px 0;
|
||||||
margin-left: 0px;
|
overflow: hidden hidden;
|
||||||
margin-right: 0px;
|
padding: 4px 2px;
|
||||||
margin-top: 4px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
padding-left: 2px;
|
|
||||||
padding-right: 2px;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .number {
|
#parent #container .number {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0 0 0);
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
width: 342.65px;
|
width: 342.65px;
|
||||||
|
|
@ -47,23 +27,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .op {
|
#parent #container .op {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0 0 0);
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
margin-bottom: 8px;
|
margin: 4px 0 8px;
|
||||||
margin-left: 0px;
|
overflow: hidden hidden;
|
||||||
margin-right: 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .op blockquote {
|
#parent #container .op blockquote {
|
||||||
margin-left: 0px !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .name {
|
#parent #container .name {
|
||||||
color: rgb(17, 119, 67);
|
color: rgb(17 119 67);
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -71,31 +47,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .quote {
|
#parent #container .quote {
|
||||||
color: rgb(221, 0, 0);
|
color: rgb(221 0 0);
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
text-decoration-color: rgb(221, 0, 0);
|
text-decoration: underline solid rgb(221 0 0);
|
||||||
text-decoration-line: underline;
|
|
||||||
text-decoration-style: solid;
|
|
||||||
text-decoration-thickness: auto;
|
text-decoration-thickness: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .greentext {
|
#parent #container .greentext {
|
||||||
color: rgb(120, 153, 34);
|
color: rgb(120 153 34);
|
||||||
font-family: arial, helvetica, sans-serif;
|
font-family: arial, helvetica, sans-serif;
|
||||||
font-size: 13.3333px;
|
font-size: 13.3333px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container blockquote {
|
#parent #container blockquote {
|
||||||
margin: 0px !important;
|
margin: 0 !important;
|
||||||
margin-block-start: 1em;
|
margin-block: 1em 1em;
|
||||||
margin-block-end: 1em;
|
margin-inline: 40px 40px;
|
||||||
margin-inline-start: 40px;
|
margin: 13.33px 40px !important;
|
||||||
margin-inline-end: 40px;
|
|
||||||
margin-top: 13.33px !important;
|
|
||||||
margin-bottom: 13.33px !important;
|
|
||||||
margin-left: 40px !important;
|
|
||||||
margin-right: 40px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#parent #container .message_4chan {
|
#parent #container .message_4chan {
|
||||||
|
|
|
||||||
|
|
@ -21,15 +21,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
|
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
|
||||||
margin-bottom: 0em !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .message-body p em {
|
.dark .message-body p em {
|
||||||
color: rgb(198, 202, 214) !important;
|
color: rgb(198 202 214) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body p em {
|
.message-body p em {
|
||||||
color: rgb(110, 110, 110) !important;
|
color: rgb(110 110 110) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradio-container .chat .assistant-message {
|
.gradio-container .chat .assistant-message {
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child {
|
.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .chat .assistant-message {
|
.dark .chat .assistant-message {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
background-color: rgb(31, 41, 55);
|
background-color: rgb(31 41 55);
|
||||||
padding: 3em;
|
padding: 3em;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
|
|
|
||||||
234
css/main.css
234
css/main.css
|
|
@ -145,7 +145,7 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
|
||||||
color: #efefef !important;
|
color: #efefef !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 711px) {
|
@media screen and (width <= 711px) {
|
||||||
.textbox_default textarea {
|
.textbox_default textarea {
|
||||||
height: calc(100dvh - 259px);
|
height: calc(100dvh - 259px);
|
||||||
}
|
}
|
||||||
|
|
@ -163,7 +163,7 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide the gradio footer*/
|
/* Hide the gradio footer */
|
||||||
footer {
|
footer {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
@ -173,27 +173,27 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-saver {
|
.file-saver {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
background-color: rgb(0 0 0 / 50%) !important;
|
||||||
margin-left: -20px;
|
margin-left: -20px;
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-saver > :first-child {
|
.file-saver > :first-child {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%); /* center horizontally */
|
transform: translate(-50%, -50%); /* center horizontally */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
background-color: var(--input-background-fill);
|
background-color: var(--input-background-fill);
|
||||||
border: var(--input-border-width) solid var(--input-border-color) !important;
|
border: var(--input-border-width) solid var(--input-border-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-saver > :first-child > :nth-child(2) {
|
.file-saver > :first-child > :nth-child(2) {
|
||||||
background: var(--block-background-fill);
|
background: var(--block-background-fill);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxgroup-table label {
|
.checkboxgroup-table label {
|
||||||
|
|
@ -211,64 +211,64 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_scrollbar::-webkit-scrollbar {
|
.pretty_scrollbar::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_scrollbar::-webkit-scrollbar-track {
|
.pretty_scrollbar::-webkit-scrollbar-track {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_scrollbar::-webkit-scrollbar-thumb,
|
.pretty_scrollbar::-webkit-scrollbar-thumb,
|
||||||
.pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
.pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
background: #c5c5d2;
|
background: #c5c5d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .pretty_scrollbar::-webkit-scrollbar-thumb,
|
.dark .pretty_scrollbar::-webkit-scrollbar-thumb,
|
||||||
.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
background: #374151;
|
background: #374151;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_scrollbar::-webkit-resizer {
|
.pretty_scrollbar::-webkit-resizer {
|
||||||
background: #c5c5d2;
|
background: #c5c5d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .pretty_scrollbar::-webkit-resizer {
|
.dark .pretty_scrollbar::-webkit-resizer {
|
||||||
background: #374151;
|
background: #374151;
|
||||||
}
|
}
|
||||||
|
|
||||||
audio {
|
audio {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Copied from https://github.com/AUTOMATIC1111/stable-diffusion-webui */
|
/* Copied from https://github.com/AUTOMATIC1111/stable-diffusion-webui */
|
||||||
.token-counter {
|
.token-counter {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: calc( 0.5 * (100dvh - 218px) ) !important;
|
top: calc( 0.5 * (100dvh - 218px) ) !important;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background: var(--input-background-fill) !important;
|
background: var(--input-background-fill) !important;
|
||||||
min-height: 0 !important;
|
min-height: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.default-token-counter {
|
.default-token-counter {
|
||||||
top: calc( 0.5 * (100dvh - 248px) ) !important;
|
top: calc( 0.5 * (100dvh - 248px) ) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-counter span {
|
.token-counter span {
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
box-shadow: 0 0 0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
|
box-shadow: 0 0 0 0.3em rgb(192 192 192 / 15%), inset 0 0 0.6em rgb(192 192 192 / 7.5%);
|
||||||
border: 2px solid rgba(192,192,192,0.4) !important;
|
border: 2px solid rgb(192 192 192 / 40%) !important;
|
||||||
border-radius: 0.4em;
|
border-radius: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-background {
|
.no-background {
|
||||||
background: var(--background-fill-primary) !important;
|
background: var(--background-fill-primary) !important;
|
||||||
padding: 0px !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------
|
/* ----------------------------------------------
|
||||||
Chat tab
|
Chat tab
|
||||||
----------------------------------------------*/
|
---------------------------------------------- */
|
||||||
.h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
|
.h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
|
||||||
height: 66.67vh
|
height: 66.67vh
|
||||||
}
|
}
|
||||||
|
|
@ -313,10 +313,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 688px) {
|
@media screen and (width <= 688px) {
|
||||||
#chat-tab {
|
#chat-tab {
|
||||||
padding-left: 0px;
|
padding-left: 0;
|
||||||
padding-right: 0px;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-parent {
|
.chat-parent {
|
||||||
|
|
@ -360,8 +360,8 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat .message:last-child {
|
.chat .message:last-child {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0 !important;
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body li:not(:last-child) {
|
.message-body li:not(:last-child) {
|
||||||
|
|
@ -370,7 +370,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body li:last-child {
|
.message-body li:last-child {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body li > p {
|
.message-body li > p {
|
||||||
|
|
@ -390,7 +390,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body pre:last-child {
|
.message-body pre:last-child {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body code {
|
.message-body code {
|
||||||
|
|
@ -468,8 +468,8 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--background-fill-primary);
|
background-color: var(--background-fill-primary);
|
||||||
border: 0px !important;
|
border: 0 !important;
|
||||||
border-radius: 0px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#show-controls label {
|
#show-controls label {
|
||||||
|
|
@ -487,7 +487,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing {
|
.typing {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible-dots #typing-container {
|
.visible-dots #typing-container {
|
||||||
|
|
@ -495,84 +495,86 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing span {
|
.typing span {
|
||||||
content: '';
|
content: '';
|
||||||
animation: blink 1.5s infinite;
|
animation: blink 1.5s infinite;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
background: #3b5998;;
|
background: #3b5998;;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:0;
|
left:0;
|
||||||
top:0;
|
top:0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing .dot1 {
|
.typing .dot1 {
|
||||||
animation-delay: .2s;
|
animation-delay: .2s;
|
||||||
margin-left: calc(10px * 1.5);
|
margin-left: calc(10px * 1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing .dot2 {
|
.typing .dot2 {
|
||||||
animation-delay: .4s;
|
animation-delay: .4s;
|
||||||
margin-left: calc(10px * 3);
|
margin-left: calc(10px * 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
@keyframes blink {
|
||||||
0% {
|
0% {
|
||||||
opacity: .1;
|
opacity: .1;
|
||||||
}
|
}
|
||||||
20% {
|
|
||||||
opacity: 1;
|
20% {
|
||||||
}
|
opacity: 1;
|
||||||
100% {
|
}
|
||||||
opacity: .1;
|
|
||||||
}
|
100% {
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-tab .generating {
|
#chat-tab .generating {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-element {
|
.hover-element {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-menu {
|
.hover-menu {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 80%;
|
bottom: 80%;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: var(--background-fill-secondary);
|
background-color: var(--background-fill-secondary);
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
min-width: 330px;
|
min-width: 330px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-menu button {
|
.hover-menu button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border-radius: 0px !important;
|
border-radius: 0 !important;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-menu button:not(#clear-history-confirm) {
|
.hover-menu button:not(#clear-history-confirm) {
|
||||||
border-bottom: 0 !important;
|
border-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-menu button:not(#clear-history-confirm):last-child {
|
.hover-menu button:not(#clear-history-confirm):last-child {
|
||||||
border-bottom: var(--button-border-width) solid var(--button-secondary-border-color) !important;
|
border-bottom: var(--button-border-width) solid var(--button-secondary-border-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover-menu button:hover {
|
.hover-menu button:hover {
|
||||||
background: var(--button-secondary-background-fill-hover) !important;
|
background: var(--button-secondary-background-fill-hover) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparent-substring {
|
.transparent-substring {
|
||||||
opacity: 0.333;
|
opacity: 0.333;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-tab:not(.old-ui) #chat-buttons {
|
#chat-tab:not(.old-ui) #chat-buttons {
|
||||||
|
|
@ -580,37 +582,37 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
}
|
}
|
||||||
|
|
||||||
#gr-hover-container {
|
#gr-hover-container {
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
flex-grow: 0 !important;
|
flex-grow: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#generate-stop-container {
|
#generate-stop-container {
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
flex: 0 auto !important;
|
flex: 0 auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-input-container {
|
#chat-input-container {
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-input-container > .form {
|
#chat-input-container > .form {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-input-row {
|
#chat-input-row {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.old-ui #chat-input-row, #chat-input-row.bigchat {
|
.old-ui #chat-input-row, #chat-input-row.bigchat {
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-col {
|
#chat-col {
|
||||||
|
|
@ -629,9 +631,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
margin-top: 6px !important;
|
margin-top: 6px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------
|
/* ----------------------------------------------
|
||||||
Past chats menus
|
Past chats menus
|
||||||
----------------------------------------------*/
|
---------------------------------------------- */
|
||||||
#past-chats-row {
|
#past-chats-row {
|
||||||
margin-bottom: calc( -1 * var(--layout-gap) );
|
margin-bottom: calc( -1 * var(--layout-gap) );
|
||||||
}
|
}
|
||||||
|
|
@ -640,16 +642,16 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
||||||
margin-top: var(--layout-gap);
|
margin-top: var(--layout-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------
|
/* ----------------------------------------------
|
||||||
Keep dropdown menus above errored components
|
Keep dropdown menus above errored components
|
||||||
----------------------------------------------*/
|
---------------------------------------------- */
|
||||||
.options {
|
.options {
|
||||||
z-index: 100 !important;
|
z-index: 100 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------
|
/* ----------------------------------------------
|
||||||
Increase the height of the evaluation table
|
Increase the height of the evaluation table
|
||||||
----------------------------------------------*/
|
---------------------------------------------- */
|
||||||
#evaluation-table table {
|
#evaluation-table table {
|
||||||
max-height: none !important;
|
max-height: none !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue