mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-04-20 10:57:28 +08:00
feat: add initial Nuxt frontend with SSR
This commit is contained in:
Tim
276
frontend_nuxt/assets/global.css
Normal file
276
frontend_nuxt/assets/global.css
Normal file
@@ -0,0 +1,276 @@
|
||||
:root {
|
||||
--primary-color-hover: rgb(9, 95, 105);
|
||||
--primary-color: rgb(10, 110, 120);
|
||||
--primary-color-disabled: rgba(93, 152, 156, 0.5);
|
||||
--header-height: 60px;
|
||||
--header-background-color: white;
|
||||
--header-border-color: lightgray;
|
||||
--header-text-color: black;
|
||||
--menu-background-color: white;
|
||||
--background-color: white;
|
||||
/* --background-color-blur: rgba(255, 255, 255, 0.57); */
|
||||
--background-color-blur: var(--background-color);
|
||||
--menu-border-color: lightgray;
|
||||
--normal-border-color: lightgray;
|
||||
--menu-selected-background-color: rgba(208, 250, 255, 0.659);
|
||||
--menu-text-color: black;
|
||||
--scroller-background-color: rgba(130, 175, 180, 0.5);
|
||||
--normal-background-color: rgb(241, 241, 241);
|
||||
--login-background-color: rgb(248, 248, 248);
|
||||
--login-background-color-hover: #e0e0e0;
|
||||
--text-color: black;
|
||||
--blockquote-text-color: #6a737d;
|
||||
--menu-width: 200px;
|
||||
--page-max-width: 1200px;
|
||||
--page-max-width-mobile: 900px;
|
||||
--article-info-background-color: #f0f0f0;
|
||||
--activity-card-background-color: #fafafa;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--header-background-color: #2b2b2b;
|
||||
--header-border-color: #555;
|
||||
--primary-color: rgb(17, 182, 197);
|
||||
--primary-color-hover: rgb(13, 137, 151);
|
||||
--header-text-color: white;
|
||||
--menu-background-color: #333;
|
||||
--background-color: #333;
|
||||
/* --background-color-blur: #333333a4; */
|
||||
--background-color-blur: var(--background-color);
|
||||
--menu-border-color: #555;
|
||||
--normal-border-color: #555;
|
||||
--menu-selected-background-color: rgba(255, 255, 255, 0.1);
|
||||
--menu-text-color: white;
|
||||
--normal-background-color: #000000;
|
||||
--login-background-color: #575757;
|
||||
--login-background-color-hover: #717171;
|
||||
--text-color: #eee;
|
||||
--blockquote-text-color: #999;
|
||||
--article-info-background-color: #747373;
|
||||
--activity-card-background-color: #585858;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--normal-background-color);
|
||||
color: var(--text-color);
|
||||
/* 禁止滚动 */
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Vditor 自定义皮肤覆写
|
||||
*************************/
|
||||
.vditor {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.vditor-toolbar--pin {
|
||||
top: var(--header-height) !important;
|
||||
}
|
||||
|
||||
.vditor-panel {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* .vditor {
|
||||
--textarea-background-color: transparent;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.vditor-reset {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.vditor-toolbar {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
} */
|
||||
|
||||
/* .vditor-toolbar {
|
||||
position: relative !important;
|
||||
} */
|
||||
|
||||
/*************************
|
||||
* Markdown 渲染样式
|
||||
*************************/
|
||||
.info-content-text ul,
|
||||
.info-content-text ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.info-content-text h1,
|
||||
.info-content-text h2 {
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
padding-bottom: 0.3em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.info-content-text {
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.info-content-text blockquote {
|
||||
margin: 1em 0;
|
||||
padding-left: 1em;
|
||||
border-left: 4px solid #d0d7de;
|
||||
color: var(--blockquote-text-color);
|
||||
}
|
||||
|
||||
.info-content-text pre {
|
||||
background-color: var(--normal-background-color);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.copy-code-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-code-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.info-content-text code {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
background-color: var(--normal-background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.info-content-text a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-content-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info-content-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.info-content-text table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.2em 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
overflow-x: auto; /* 小屏可横向滚动 */
|
||||
}
|
||||
|
||||
.info-content-text thead th {
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .info-content-text thead th {
|
||||
background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
|
||||
}
|
||||
|
||||
.info-content-text tbody tr:nth-child(even) {
|
||||
background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
|
||||
}
|
||||
|
||||
[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.info-content-text th,
|
||||
.info-content-text td {
|
||||
border: 1px solid var(--menu-border-color);
|
||||
padding: 8px 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.info-content-text tbody td {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 首列加粗，便于阅读 */
|
||||
.info-content-text tbody td:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 鼠标悬停行高亮 */
|
||||
.info-content-text tbody tr:hover {
|
||||
background-color: var(--menu-selected-background-color);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.vditor {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.vditor-toolbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.about-content h1,
|
||||
.info-content-text h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.about-content h2,
|
||||
.info-content-text h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.about-content p,
|
||||
.info-content-text p {
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
.vditor-toolbar--pin {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.about-content li,
|
||||
.info-content-text li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-content-text pre {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.vditor-panel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
1
frontend_nuxt/assets/icons/discord.svg
Normal file
1
frontend_nuxt/assets/icons/discord.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
28
frontend_nuxt/assets/icons/github.svg
Normal file
28
frontend_nuxt/assets/icons/github.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub icon</title>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12
|
||||
0 5.303 3.438 9.8 8.205 11.387
|
||||
.6 .113 .82-.258 .82-.577
|
||||
0-.285-.01-1.04-.015-2.04
|
||||
-3.338 .724-4.042-1.61-4.042-1.61
|
||||
C4.422 16.07 3.633 15.7 3.633 15.7
|
||||
c-1.087-.744 .084-.729 .084-.729
|
||||
1.205 .084 1.84 1.236 1.84 1.236
|
||||
1.07 1.835 2.809 1.305 3.495 .998
|
||||
.108-.775 .418-1.305 .762-1.605
|
||||
-2.665-.3-5.467-1.335-5.467-5.93
|
||||
0-1.31 .468-2.38 1.236-3.22
|
||||
-.123-.303-.536-1.523 .117-3.176
|
||||
0 0 1.008-.322 3.302 1.23
|
||||
.957-.266 1.983-.399 3.003-.404
|
||||
1.02 .005 2.047 .138 3.006 .404
|
||||
2.292-1.552 3.298-1.23 3.298-1.23
|
||||
.654 1.653 .242 2.873 .119 3.176
|
||||
.77 .84 1.235 1.91 1.235 3.22
|
||||
0 4.61-2.807 5.625-5.479 5.921
|
||||
.43 .37 .823 1.102 .823 2.222
|
||||
0 1.606-.014 2.896-.014 3.286
|
||||
0 .321 .216 .694 .825 .576
|
||||
C20.565 22.092 24 17.592 24 12.297
|
||||
c0-6.627 -5.373-12 -12-12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
28
frontend_nuxt/assets/icons/google.svg
Normal file
28
frontend_nuxt/assets/icons/google.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<!-- 定义整块 “G” 轮廓，用作剪裁路径 -->
|
||||
<path id="a"
|
||||
d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37
|
||||
c-7.2 0-13-5.8-13-13s5.8-13 13-13
|
||||
c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2
|
||||
11.8 2 2 11.8 2 24s9.8 22 22 22
|
||||
c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
|
||||
</defs>
|
||||
|
||||
<!-- 应用剪裁后依次绘制四段色块 -->
|
||||
<clipPath id="b">
|
||||
<use xlink:href="#a" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<!-- 黄色 (#FBBC05) -->
|
||||
<path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/>
|
||||
<!-- 红色 (#EA4335) -->
|
||||
<path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
|
||||
<!-- 绿色 (#34A853) -->
|
||||
<path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
|
||||
<!-- 蓝色 (#4285F4) -->
|
||||
<path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
4
frontend_nuxt/assets/icons/twitter.svg
Normal file
4
frontend_nuxt/assets/icons/twitter.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Twitter icon</title>
|
||||
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.949.555-2.005.959-3.127 1.184-.897-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124-4.083-.205-7.697-2.159-10.126-5.134-.422.722-.666 1.561-.666 2.475 0 1.709.87 3.214 2.188 4.096-.807-.026-1.566-.248-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.376 4.6 3.416-1.68 1.318-3.808 2.105-6.102 2.105-.39 0-.779-.023-1.17-.069 2.189 1.394 4.768 2.209 7.548 2.209 9.051 0 14.001-7.496 14.001-13.986 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 764 B |
35
frontend_nuxt/assets/toast.css
Normal file
35
frontend_nuxt/assets/toast.css
Normal file
@@ -0,0 +1,35 @@
|
||||
.Vue-Toastification__toast {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.Vue-Toastification__toast--info {
|
||||
background-color: #d0e9ff;
|
||||
color: #1b6ec2;
|
||||
}
|
||||
.Vue-Toastification__toast--success {
|
||||
background-color: #dff6dd;
|
||||
color: #2b7a2b;
|
||||
}
|
||||
.Vue-Toastification__toast--error {
|
||||
background-color: #f99a9a;
|
||||
color: #b73737;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.Vue-Toastification__container.open-isle-toast-style-v1 {
|
||||
width: auto;
|
||||
max-width: 90vw;
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.Vue-Toastification__toast-body {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.Vue-Toastification__close-button {
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user