mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-11-16 14:03:43 +08:00
Dakai
257
app/styles/globals.scss
Normal file
257
app/styles/globals.scss
Normal file
@@ -0,0 +1,257 @@
|
||||
@mixin light {
|
||||
/* color */
|
||||
--white: white;
|
||||
--black: rgb(48, 48, 48);
|
||||
--gray: rgb(250, 250, 250);
|
||||
--primary: rgb(29, 147, 171);
|
||||
--second: rgb(231, 248, 255);
|
||||
--hover-color: #f3f3f3;
|
||||
--bar-color: rgba(0, 0, 0, 0.1);
|
||||
--theme-color: var(--gray);
|
||||
|
||||
/* shadow */
|
||||
--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
|
||||
--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
|
||||
|
||||
/* stroke */
|
||||
--border-in-light: 1px solid rgb(222, 222, 222);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
/* color */
|
||||
--white: rgb(30, 30, 30);
|
||||
--black: rgb(187, 187, 187);
|
||||
--gray: rgb(21, 21, 21);
|
||||
--primary: rgb(29, 147, 171);
|
||||
--second: rgb(27 38 42);
|
||||
--hover-color: #323232;
|
||||
|
||||
--bar-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--border-in-light: 1px solid rgba(255, 255, 255, 0.192);
|
||||
|
||||
--theme-color: var(--gray);
|
||||
}
|
||||
|
||||
.light {
|
||||
@include light;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@include dark;
|
||||
}
|
||||
|
||||
.mask {
|
||||
filter: invert(0.8);
|
||||
}
|
||||
|
||||
:root {
|
||||
@include light;
|
||||
|
||||
--window-width: 90vw;
|
||||
--window-height: 90vh;
|
||||
--sidebar-width: 300px;
|
||||
--window-content-width: calc(100% - var(--sidebar-width));
|
||||
--message-max-width: 80%;
|
||||
--full-height: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
:root {
|
||||
--window-width: 100vw;
|
||||
--window-height: var(--full-height);
|
||||
--sidebar-width: 100vw;
|
||||
--window-content-width: var(--window-width);
|
||||
--message-max-width: 100%;
|
||||
}
|
||||
|
||||
.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
html {
|
||||
height: var(--full-height);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--gray);
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: var(--full-height);
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
|
||||
"PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
background-color: var(--second);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
--bar-width: 5px;
|
||||
width: var(--bar-width);
|
||||
height: var(--bar-width);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--bar-color);
|
||||
border-radius: 20px;
|
||||
background-clip: content-box;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
select {
|
||||
border: var(--border-in-light);
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
appearance: none;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 5px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--primary);
|
||||
content: " ";
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
padding: 5px 15px 5px 10px;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
&::before {
|
||||
content: attr(value);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
height: 8px;
|
||||
width: 20px;
|
||||
background-color: var(--primary);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scaleY(1.2);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
input[type="number"],
|
||||
input[type="text"] {
|
||||
appearance: none;
|
||||
border-radius: 10px;
|
||||
border: var(--border-in-light);
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
padding: 0 10px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
div.math {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--full-height);
|
||||
width: 100vw;
|
||||
background-color: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
|
||||
&:hover .copy-code-button {
|
||||
pointer-events: all;
|
||||
transform: translateX(0px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0px 5px;
|
||||
background-color: var(--black);
|
||||
color: var(--white);
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
transform: translateX(10px);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&:after {
|
||||
content: "copy";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
1119
app/styles/markdown.scss
Normal file
1119
app/styles/markdown.scss
Normal file
File diff suppressed because it is too large
Load Diff
122
app/styles/prism.scss
Normal file
122
app/styles/prism.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
.markdown-body {
|
||||
pre {
|
||||
background: #282a36;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #282a36;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #ff79c6;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user