morgan/chatgpt-web
1
0
Fork 0
mirror of https://github.com/morgan9e/chatgpt-web synced 2026-04-14 00:14:04 +09:00
Code Issues Packages Projects Releases Wiki Activity

Fixed coloring and mobile layout

Browse Source
This commit is contained in:
Morgan
2024-04-30 19:55:53 +09:00
parent fe3bec2e91
commit 2fdf7ac126
2 changed files with 74 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
live-server Executable file
View File

@@ -0,0 +1,3 @@
#!/bin/bash
podman run -it --rm -v .:/app:z -p 5173:5173 node:latest /bin/bash -c 'cd /app; npm i; npm run dev:public'

75
src/app.scss
View File

@@ -157,11 +157,79 @@ select option.is-default {
width: 90%; width: 90%;
} }
/* Swap the border on user messages to the other side */ .message-body code, .message-body pre {
.user-message>.message-body { background-color: #EEE !important;
border-width: 0 0 0 4px !important;
} }
.chat-header {
width: 90%;
margin: auto;
padding-left: 40px;
margin-top: 20px;
}
.message {
border-radius: 0px !important;
padding: 10px 20px;
margin-bottom: 0px !important;
}
.user-message>.message-body {
border-radius: 0;
border-width: 0;
color: #000 !important;
margin-bottom: 0px !important;
}
.user-message {
border: solid #D9D9D9;
border-width: 1px 0;
background-color: #FFF !important;
}
.assistant-message>.message-body {
border-radius: 0;
border-width: 0;
color: #000 !important;
}
.assistant-message {
background-color: #F6F6F6 !important;
}
@media only screen and (max-width: 600px) {
.chat-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.chat-header {
padding-left: 20px;
margin-top: 0px;
padding-right: 20px;
}
.message {
padding-left: 5px;
padding-right: 5px;
}
.assistant-message {
width: 100%;
max-width: 100%;
margin: 0 !important;
}
.user-message {
width: 100%;
max-width: 100%;
margin: 0 !important;
}
.assistant-message .tool-drawer, .assistant-message .tool-drawer-mask {
left: calc(100% - 40px) !important;
background-color: transparent;
}
.user-message .tool-drawer, .user-message .tool-drawer-mask {
left: calc(100% - 40px) !important;
background-color: transparent;
}
}
/* Show the edit button on hover of the chat name */ /* Show the edit button on hover of the chat name */
.chat-header:hover .editbutton { .chat-header:hover .editbutton {
display: inline !important; display: inline !important;
@@ -736,7 +804,6 @@ aside.menu.main-menu .menu-expanse {
} }
.modal { .modal {
z-index:100; z-index:100;
} }