orion/FileCodeBoxFronted2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Lan
2025-02-15 22:10:36 +08:00
commit 0205555d32
47 changed files with 6963 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/base.css
+86
View File
@@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f5f5f5;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #212121;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
html{
background: var(--vt-c-white-soft);
}
html.dark{
background: var(--vt-c-black-soft);
}
body {
color: var(--color-text);
display: flex;
justify-content: center;
align-items: center;
line-height: 1.6;
font-family: Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/assets/code/github-markdown.scss
+1102
View File
File diff suppressed because it is too large Load Diff
src/assets/code/highlight.scss
+206
View File
@@ -0,0 +1,206 @@
html.dark {
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px
}
.hljs {
color: #abb2bf;
background: #282c34
}
.hljs-keyword,
.hljs-operator,
.hljs-pattern-match {
color: #f92672
}
.hljs-function,
.hljs-pattern-match .hljs-constructor {
color: #61aeee
}
.hljs-function .hljs-params {
color: #a6e22e
}
.hljs-function .hljs-params .hljs-typing {
color: #fd971f
}
.hljs-module-access .hljs-module {
color: #7e57c2
}
.hljs-constructor {
color: #e2b93d
}
.hljs-constructor .hljs-string {
color: #9ccc65
}
.hljs-comment,
.hljs-quote {
color: #b18eb1;
font-style: italic
}
.hljs-doctag,
.hljs-formula {
color: #c678dd
}
.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
color: #e06c75
}
.hljs-literal {
color: #56b6c2
}
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
color: #98c379
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
color: #e6c07b
}
.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #d19a66
}
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #61aeee
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: 700
}
.hljs-link {
text-decoration: underline
}
}
html {
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px;
&::-webkit-scrollbar {
height: 4px;
}
}
.hljs {
color: #383a42;
background: #fafafa
}
.hljs-comment,
.hljs-quote {
color: #a0a1a7;
font-style: italic
}
.hljs-doctag,
.hljs-formula,
.hljs-keyword {
color: #a626a4
}
.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
color: #e45649
}
.hljs-literal {
color: #0184bb
}
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
color: #50a14f
}
.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #986801
}
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #4078f2
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
color: #c18401
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: 700
}
.hljs-link {
text-decoration: underline
}
}
src/assets/code/main.scss
+100
View File
@@ -0,0 +1,100 @@
@import 'katex/dist/katex.min.css';
@import '@/assets/code/highlight.scss';
@import '@/assets/code/github-markdown.scss';
@import '@/assets/code/markdown-add.scss';
.markdown-body {
box-sizing: border-box;
background:none ;
*{
font-size: 0.9rem;
}
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
.chat-container {
display: flex;
flex-direction: column;
margin: auto;
max-width: 1080px;
padding: 0 5px;
height: 100%;
}
.chat-messages {
flex-grow: 1;
overflow-y: auto;
border-radius: 10px 10px 0 0;
padding: 8px;
}
.chat-message {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.chat-message-bubble {
padding: 8px;
align-self: flex-start;
color: #2f4f4f;
border-radius: 8px 8px 8px 0;
background: linear-gradient(to right, #c9d6ff, #e2e2e2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 0 16px 20px 0 rgba(174, 167, 223, .06);
max-width: 80%;
}
.chat-toolbar-icon{
margin-left: 5px;
cursor: pointer;
}
.chat-message-meta {
display: flex;
position: relative;
margin-top: 4px;
}
.n-input-wrapper {
padding-right: 0;
}
.chat-message-nickname-and-time {
color: #999;
font-size: 12px;
}
.is-me {
justify-content: flex-end;
}
.n-input .n-input__suffix, .n-input .n-input__prefix {
display: block;
}
.n-input .n-input-wrapper {
padding-right: 0;
}
.n-input .n-input__suffix .n-button {
border-radius: 8px !important;
width: 80px;
height: 30px;
position: absolute; right: 10px; bottom: 10px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
background-image: linear-gradient(-56deg, #0773ff 5%, #797eff);
--n-border: none !important;
}
.chat-message.is-me .chat-message-bubble {
background: linear-gradient(to right, #56ccf2, #2f80ed); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 8px 8px 0 !important;
box-shadow: 0 16px 20px 0 rgba(174, 167, 223, .06);
align-self: flex-end;
}
src/assets/code/markdown-add.scss
+75
View File
@@ -0,0 +1,75 @@
.markdown-body {
background-color: transparent;
font-size: 14px;
p {
white-space: pre-wrap;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
pre code,
pre tt {
line-height: 1.65;
}
// .highlight pre,
// pre {
// background-color: #fff;
// }
code.hljs {
padding: 0;
}
.code-block {
&-wrapper {
position: relative;
padding-top: 24px;
}
&-header {
position: absolute;
top: 5px;
right: 0;
width: 100%;
padding: 0 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
color: #b3b3b3;
&__copy {
cursor: pointer;
margin-left: 0.5rem;
user-select: none;
&:hover {
color: #65a665;
}
}
}
}
}
html.dark {
.message-reply {
.whitespace-pre-wrap {
white-space: pre-wrap;
color: var(--n-text-color);
}
}
.highlight pre,
pre {
background-color: #282c34;
}
}
src/assets/main.css
+54
View File
@@ -0,0 +1,54 @@
@import './base.css';
#app {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}
.card {
max-width: 400px;
min-width: 398px;
height: 100%;
background-color: #F8FBFE;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
border-radius: 20px !important;
position: relative;
}
.tools {
display: flex;
z-index: 999;
align-items: center;
}
.box {
display: inline-block;
align-items: center;
width: 1.5rem;
height: 1.5rem;
user-select: none;
cursor: pointer;
padding: 1px;
border-radius: 50%;
}
.circle {
padding: 0 4px;
}
.red {
padding: 3px;
background-color: #ff605c;
}
.yellow {
padding: 3px;
background-color: #ffbd44;
}
.green {
background-color: #00ca4e;
padding: 3px;
}