zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 01:32:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

layout fixes

Browse source
This commit is contained in:
Kyle Drake 2024-03-26 16:59:11 -05:00
parent 4e05121dfc
commit 935af9d4d1
2 changed files with 95 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
sass/_project-sass/_project-Main.scss
View file

@ -2280,87 +2280,90 @@ pre, code {
color: #FFFFFF; color: #FFFFFF;
} }
.chat-container { .chat-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 95%; /* This will make it fill its parent container */ height: calc(100vh - 60px); /* Adjust the height as needed */
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
border-left: 1px solid #373737; border-left: 1px solid #373737;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
.chat-box { .chat-box {
flex-grow: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 10px;
background-color: #1d1f21; background-color: #1d1f21;
font-weight: 300; font-weight: 300;
font-size: 13.5px; font-size: 13.5px;
line-height: 1.5em; line-height: 1.5em;
}
p { .chat-box p {
font-weight: 300; font-weight: 300;
font-size: 13.5px; font-size: 13.5px;
word-break: break-word; word-break: break-word;
} }
ul, ol { .chat-box ul,
.chat-box ol {
list-style: square; list-style: square;
} }
li { .chat-box li {
font-weight: 300; font-weight: 300;
font-size: 13.5px; font-size: 13.5px;
} }
.message { .message {
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
background-color: #333; background-color: #333;
color: #fff; color: #fff;
} }
.bot-message { .bot-message {
text-align: left; text-align: left;
} }
.user-message { .user-message {
text-align: left; text-align: left;
background-color: #5e95a1; background-color: #5e95a1;
} }
div { .chat-box div code {
background: #16414c;
color: #a9b9b9;
border: 0;
}
div code {
display: inline; display: inline;
padding: 2px; padding: 2px;
} }
div pre { .chat-box div pre {
display: block; display: block;
width: 100%; width: 100%;
} }
div pre code { .chat-box div pre code {
display: block; display: block;
} }
div code { .chat-box div code {
border-left: 0px; border-left: 0px;
border: 0px; border: 0px;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }
.copy-button { .copy-button {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -2368,35 +2371,37 @@ pre, code {
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
}
.copy-button:hover {
background-color: #45a049;
}
} }
.chat-container { .copy-button:hover {
form { background-color: #45a049;
display: flex; }
#chat-form {
padding: 10px; padding: 10px;
background-color: #252525; background-color: #252525;
} margin-bottom: 25px;
input[type="text"] { input[type="text"] {
flex-grow: 1;
padding: 10px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 7px;
background-color: #333; background-color: #333;
border: 1px solid #777; border: 1px solid #777;
color: #fff; color: #fff;
width: calc(100% - 90px);
} }
button { button {
margin-top: 9px; margin-bottom: 5px;
height: 30px;
} }
} }
.welcoming-cat { .welcoming-cat {
width: 200px; width: 200px;
float: right; float: right;

6
views/site_files/text_editor.erb
View file

@ -108,11 +108,11 @@
<script src="/js/sse.min.js"></script> <script src="/js/sse.min.js"></script>
<script src="/js/chat.js"></script> <script src="/js/chat.js"></script>
<div class="row editor" style="display: flex; flex-wrap: wrap;"> <div class="row editor">
<div class="col col-66" style="flex: 66%; padding: 10px"> <div class="col col-66">
<div id="editor"><h3>Loading...</h3></div> <div id="editor"><h3>Loading...</h3></div>
</div> </div>
<div class="col col-33 chat-col" style="flex: 33%"> <div class="col col-33 chat-col">
<div class="chat-container"> <div class="chat-container">
<div id="chat-box" class="chat-box"> <div id="chat-box" class="chat-box">
<div class="bot-message message"> <div class="bot-message message">