Lint the CSS files

This commit is contained in:
oobabooga 2023-10-20 13:02:18 -07:00
parent dedbdb46c2
commit e208128d68
9 changed files with 183 additions and 212 deletions

View File

@ -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 {

View File

@ -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);
} }

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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;