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

Custom styling

Browse Source
This commit is contained in:
Morgan
2024-04-29 17:26:51 +09:00
parent d0959e1f9a
commit 3c3a1e2a91
1 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app.scss
View File

@@ -33,6 +33,12 @@ html {
--BgColor: var(-BgColorLight); --BgColor: var(-BgColorLight);
--running-totals: 0; --running-totals: 0;
}
body, button, input, select, textarea {
font-family: "Noto Sans", "Source Sans 3", "Fira Sans", sans-serif !important;
} }
.navbar { .navbar {
@@ -47,7 +53,7 @@ html {
} }
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 1200px) {
html { html {
--sidebarWidth: max(250px, 20%); --sidebarWidth: max(250px, 20%);
@@ -61,19 +67,19 @@ html {
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1200px) {
.modal-card.wide { .modal-card.wide {
width: 960px !important; width: 960px !important;
} }
} }
@media only screen and (max-width: 900px) and (min-width: 769px) { @media only screen and (max-width: 1200px) {
.chat-menu-item .chat-icon { .chat-menu-item .chat-icon {
display: none; display: none;
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 900px) {
.navbar { .navbar {
display: block !important; display: block !important;
} }
@@ -139,19 +145,21 @@ select option.is-default {
.user-message { .user-message {
max-width: 90%; max-width: 90%;
margin-right: 0; margin-right: auto;
margin-left: auto; margin-left: auto;
width: fit-content; width: 90%;
} }
.assistant-message { .assistant-message {
max-width: 90%; max-width: 90%;
width: fit-content; margin-right: auto;
margin-left: auto;
width: 90%;
} }
/* Swap the border on user messages to the other side */ /* Swap the border on user messages to the other side */
.user-message>.message-body { .user-message>.message-body {
border-width: 0 4px 0 0 !important; border-width: 0 0 0 4px !important;
} }
/* Show the edit button on hover of the chat name */ /* Show the edit button on hover of the chat name */
@@ -160,6 +168,15 @@ select option.is-default {
text-decoration: none !important; text-decoration: none !important;
} }
.content {
font-family: "Noto Sans", "Source Sans 3", "Fira Sans", sans-serif !important;
font-size: 15px;
line-height: 30px;
}
.code {
font-family: "Monaco", "Hack", monospace !important;
}
/* Style the chat input */ /* Style the chat input */
.chat-input { .chat-input {
overflow-y: hidden; overflow-y: hidden;
@@ -194,6 +211,17 @@ select option.is-default {
} }
} }
@media (prefers-color-scheme: dark) {
.user-message .message-body
{
color: #BCC !important;
}
.assistant-message .message-body
{
color: #CBC !important;
}
}
/* Support for dark mode */ /* Support for dark mode */
$modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove this once a new version of bulma-prefers-dark is released $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove this once a new version of bulma-prefers-dark is released
@import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass"; @import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
@@ -225,6 +253,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
.menu { .menu {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
font-size: 14px;
} }
/* Delete button on side menu chat name */ /* Delete button on side menu chat name */
@@ -331,7 +360,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
overflow: visible; overflow: visible;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 900px) {
.main-menu .dropdown-menu .dropdown-content { .main-menu .dropdown-menu .dropdown-content {
max-height: calc(100vh - 112px); max-height: calc(100vh - 112px);
} }
@@ -415,7 +444,7 @@ aside.menu.main-menu .menu-expanse {
} }
.default-text { .default-text {
color: hsl(0, 0%, 21%) !important; color: hsl(0, 0%, 10%) !important;
} }
.lower-mask, .lower-mask2 { .lower-mask, .lower-mask2 {
@@ -439,7 +468,7 @@ aside.menu.main-menu .menu-expanse {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.default-text { .default-text {
color: rgb(181, 181, 181) !important; color: rgb(255, 240, 255) !important;
} }
.lower-mask, .lower-mask2 { .lower-mask, .lower-mask2 {
background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorDark) 54.73%); background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorDark) 54.73%);
@@ -507,7 +536,7 @@ aside.menu.main-menu .menu-expanse {
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 900px) {
.prompt-input-container { .prompt-input-container {
.control.send .button { .control.send .button {
width: auto; width: auto;
@@ -551,7 +580,7 @@ aside.menu.main-menu .menu-expanse {
padding-right: 2px; padding-right: 2px;
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 1200px) {
.main-menu .dropdown.is-right .dropdown-menu { .main-menu .dropdown.is-right .dropdown-menu {
right:auto; right:auto;
left:0; left:0;
@@ -626,7 +655,7 @@ aside.menu.main-menu .menu-expanse {
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
} }
.user-message .tool-drawer-mask { .user-message .tool-drawer-mask {
border-radius: 4px 0px 0px 4px; border-radius: 0px 4px 4px 0px;
} }
.message:last-of-type .tool-drawer, .tool-drawer-mask { .message:last-of-type .tool-drawer, .tool-drawer-mask {
top: auto; top: auto;
@@ -636,7 +665,7 @@ aside.menu.main-menu .menu-expanse {
left:100%; left:100%;
} }
.user-message .tool-drawer, .user-message .tool-drawer-mask { .user-message .tool-drawer, .user-message .tool-drawer-mask {
right:100%; left:100%;
} }
.assistant-message:hover .tool-drawer, .assistant-message:hover .tool-drawer,
.assistant-message.editing .tool-drawer { .assistant-message.editing .tool-drawer {