zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +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

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

@ -2280,123 +2280,128 @@ 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 {
font-weight: 300;
font-size: 13.5px;
word-break: break-word;
}
ul, ol {
list-style: square;
}
li {
font-weight: 300;
font-size: 13.5px;
}
.message {
margin-bottom: 12px;
padding: 8px;
border-radius: 4px;
background-color: #333;
color: #fff;
}
.bot-message {
text-align: left;
}
.user-message {
text-align: left;
background-color: #5e95a1;
}
div {
background: #16414c;
color: #a9b9b9;
border: 0;
}
div code {
display: inline;
padding: 2px;
}
div pre {
display: block;
width: 100%;
}
div pre code {
display: block;
}
div code {
border-left: 0px;
border: 0px;
word-wrap: break-word;
white-space: pre-wrap;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background-color: #acd473;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
.copy-button:hover {
background-color: #45a049;
}
} }
.chat-container { .chat-box p {
form { font-weight: 300;
display: flex; font-size: 13.5px;
padding: 10px; word-break: break-word;
background-color: #252525; }
}
.chat-box ul,
.chat-box ol {
list-style: square;
}
.chat-box li {
font-weight: 300;
font-size: 13.5px;
}
.message {
margin-bottom: 12px;
padding: 8px;
border-radius: 4px;
background-color: #333;
color: #fff;
}
.bot-message {
text-align: left;
}
.user-message {
text-align: left;
background-color: #5e95a1;
}
.chat-box div code {
display: inline;
padding: 2px;
}
.chat-box div pre {
display: block;
width: 100%;
}
.chat-box div pre code {
display: block;
}
.chat-box div code {
border-left: 0px;
border: 0px;
word-wrap: break-word;
white-space: pre-wrap;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background-color: #acd473;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
.copy-button:hover {
background-color: #45a049;
}
#chat-form {
padding: 10px;
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">