sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Minor tweaks for deployment

Browse source
This commit is contained in:
sageTheDM 2024-10-08 16:09:35 +02:00
parent 8dffff4482
commit 553f316953
3 changed files with 40 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/styles/header.css
View file

@ -125,4 +125,5 @@ header {
position: absolute;
left: 10vw;
cursor: pointer;
padding: 10px;
}

52
app/styles/output.css
View file

@ -35,6 +35,7 @@
margin: 5px 0;
max-width: 75%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.user-message {
@ -49,42 +50,56 @@
color: var(--ai-message-text-color);
}
.ai-message a{
.ai-message a {
color: var(--text-color);
}
.ai-message table{
.ai-message table {
display: block; /* Treat the table as a block element */
position: relative;
overflow-x: auto; /* Allow horizontal scrolling */
white-space: nowrap; /* Prevent table content from wrapping */
border: 1px solid var(--ai-message-text-color);
border-collapse: collapse;
background-color: var(--conversation-background-color);
max-width: 100%; /* Ensure the table doesn't exceed the container width */
padding: 10px; /* Optional: Add padding similar to pre/code */
border-radius: 4px; /* Optional: Add border radius similar to pre/code */
margin-top: 5px;
}
.ai-message th{
.ai-message th {
background-color: var(--user-message-background-color);
align-items: center;
padding: 5px;
}
.ai-message td{
.ai-message td {
align-items: center;
padding: 5px;
}
.ai-message img{
.ai-message img {
max-width: 80%;
}
.ai-message a:hover{
.ai-message a:hover {
filter: brightness(70%);
}
.ai-message li{
.ai-message li {
margin-left: 1em;
}
.ai-message code{
width: 100%;
overflow: scroll;
.ai-message code, .ai-message pre {
overflow-x: auto;
white-space: pre;
display: block;
max-width: 100%;
padding: 10px;
background-color: var(--code-background-color);
border-radius: 4px;
}
/* Button Container */
@ -121,19 +136,14 @@
text-align: center;
padding: 5px;
border-radius: 4px;
font-size: calc(var(--font-size)*0.8);
font-size: calc(var(--font-size) * 0.8);
/* Position the tooltip */
position: absolute;
top: 100%;
/* Adjusts tooltip to be below the button */
left: 50%;
transform: translateX(-50%);
/* Center the tooltip */
white-space: nowrap;
/* Prevent line breaks */
/* Add smooth transition */
opacity: 0;
transition: all 0.3s;
}
@ -142,7 +152,6 @@
content: "";
position: absolute;
bottom: 100%;
/* Arrow on top of tooltip */
left: 50%;
transform: translateX(-50%);
border-width: 5px;
@ -150,20 +159,19 @@
border-color: transparent transparent var(--user-message-background-color) transparent;
}
/* Show the tooltip on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#copiedText{
#copiedText {
margin-top: 1em;
cursor:default;
cursor: default;
pointer-events: none;
user-select: none;
}
#scrollToBottom{
#scrollToBottom {
scroll-behavior: smooth;
visibility: hidden;
position: absolute;
@ -174,4 +182,4 @@
bottom: 16dvh;
left: 50%;
translate: -25px;
}
}