zimonianhua
96eb8d7064
Publish Docker image (amd64) / Push Docker image to multiple registries (push) Has been cancelled
Publish Docker image (arm64) / Push Docker image to multiple registries (push) Has been cancelled
Linux Release / release (push) Has been cancelled
macOS Release / release (push) Has been cancelled
Windows Release / release (push) Has been cancelled
- 将整体 UI 主题从液态玻璃效果更改为新拟态（Neumorphism）设计风格 - 更新所有 GitHub 仓库链接至新组织地址 - 简化页脚信息，移除作者和许可证声明 - 调整消息页面的 HTML 结构和样式以匹配新设计
327 lines
6.8 KiB
CSS
327 lines
6.8 KiB
CSS
/* Neumorphism Global Styles */
|
|
:root {
|
|
--neu-bg: #e0e5ec;
|
|
--neu-bg-light: #f0f0f3;
|
|
--neu-shadow-dark: #b8bcc2;
|
|
--neu-shadow-light: #ffffff;
|
|
--neu-accent: #6d5dfc;
|
|
--neu-text: #333333;
|
|
--neu-text-muted: #6b7280;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.neu-raised {
|
|
background: var(--neu-bg);
|
|
border-radius: 12px;
|
|
box-shadow:
|
|
8px 8px 16px var(--neu-shadow-dark),
|
|
-8px -8px 16px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-raised-sm {
|
|
box-shadow:
|
|
4px 4px 8px var(--neu-shadow-dark),
|
|
-4px -4px 8px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-pressed {
|
|
background: var(--neu-bg);
|
|
border-radius: 12px;
|
|
box-shadow:
|
|
inset 8px 8px 16px var(--neu-shadow-dark),
|
|
inset -8px -8px 16px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-pressed-sm {
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--neu-shadow-dark),
|
|
inset -4px -4px 8px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-hover:hover {
|
|
box-shadow:
|
|
4px 4px 8px var(--neu-shadow-dark),
|
|
-4px -4px 8px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-active:active {
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--neu-shadow-dark),
|
|
inset -4px -4px 8px var(--neu-shadow-light);
|
|
}
|
|
|
|
.neu-circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Base Styles */
|
|
body {
|
|
font-family: Verdana, Candara, Arial, Helvetica, Microsoft YaHei, sans-serif;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
background-color: var(--neu-bg);
|
|
color: var(--neu-text);
|
|
}
|
|
|
|
nav {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--neu-accent);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none !important;
|
|
color: var(--neu-accent);
|
|
text-shadow: 0 0 5px rgba(109, 93, 252, 0.3);
|
|
}
|
|
|
|
.wrapper {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#page-container {
|
|
position: relative;
|
|
min-height: 97vh;
|
|
}
|
|
|
|
#content-wrap {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
#footer {
|
|
height: 4rem;
|
|
}
|
|
|
|
/* Article Container - Main Card */
|
|
.article-container {
|
|
margin: 40px auto;
|
|
max-width: 960px;
|
|
padding: 40px;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
line-height: 1.6;
|
|
|
|
background: var(--neu-bg);
|
|
border-radius: 24px;
|
|
box-shadow:
|
|
12px 12px 24px var(--neu-shadow-dark),
|
|
-12px -12px 24px var(--neu-shadow-light);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.article-container {
|
|
margin: 16px;
|
|
padding: 20px;
|
|
box-shadow:
|
|
6px 6px 12px var(--neu-shadow-dark),
|
|
-6px -6px 12px var(--neu-shadow-light);
|
|
}
|
|
}
|
|
|
|
/* Typography */
|
|
article {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
color: var(--neu-text);
|
|
}
|
|
|
|
article h1, article h2, article h3, article h4, article h5, article h6 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
color: var(--neu-text);
|
|
}
|
|
|
|
article h1 { font-size: 2em; }
|
|
article h2 { font-size: 1.5em; padding-bottom: 0.3em; }
|
|
article h3 { font-size: 1.25em; }
|
|
article h4 { font-size: 1.25em; }
|
|
article h5 { font-size: 1.1em; }
|
|
article h6 { font-size: 1em; font-weight: bold; }
|
|
|
|
.info {
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
text-align: left;
|
|
color: var(--neu-text-muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Blockquote - Pressed Effect */
|
|
article blockquote {
|
|
margin: 16px 0;
|
|
padding: 16px 24px;
|
|
border-left: none;
|
|
border-radius: 12px;
|
|
background: var(--neu-bg);
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--neu-shadow-dark),
|
|
inset -4px -4px 8px var(--neu-shadow-light);
|
|
color: var(--neu-text-muted);
|
|
}
|
|
|
|
/* Code Blocks - Pressed Effect */
|
|
article pre {
|
|
max-width: 100%;
|
|
display: block;
|
|
overflow: auto;
|
|
padding: 16px;
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
border-radius: 12px;
|
|
background: var(--neu-bg);
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--neu-shadow-dark),
|
|
inset -4px -4px 8px var(--neu-shadow-light);
|
|
}
|
|
|
|
code {
|
|
font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace;
|
|
}
|
|
|
|
article code {
|
|
color: var(--neu-accent);
|
|
background-color: transparent;
|
|
padding: .065em .4em;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Inline Code Style */
|
|
p code, li code {
|
|
background-color: var(--neu-bg);
|
|
box-shadow:
|
|
inset 2px 2px 4px var(--neu-shadow-dark),
|
|
inset -2px -2px 4px var(--neu-shadow-light);
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Lists */
|
|
article ul, article ol {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
article li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
/* Tables */
|
|
article table {
|
|
margin: auto;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
min-width: 66%;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--neu-bg);
|
|
box-shadow:
|
|
8px 8px 16px var(--neu-shadow-dark),
|
|
-8px -8px 16px var(--neu-shadow-light);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
article table td,
|
|
article table th {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid rgba(184, 188, 194, 0.3);
|
|
}
|
|
|
|
article table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Images */
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
border-radius: 12px;
|
|
margin: 16px 0;
|
|
box-shadow:
|
|
8px 8px 16px var(--neu-shadow-dark),
|
|
-8px -8px 16px var(--neu-shadow-light);
|
|
}
|
|
|
|
/* Tags (e.g. timestamp) */
|
|
.tag.is-light {
|
|
background: var(--neu-bg);
|
|
color: var(--neu-text-muted);
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
box-shadow:
|
|
4px 4px 8px var(--neu-shadow-dark),
|
|
-4px -4px 8px var(--neu-shadow-light);
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--neu-bg);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--neu-shadow-dark);
|
|
border-radius: 6px;
|
|
border: 3px solid var(--neu-bg);
|
|
}
|
|
|
|
/* Helper classes */
|
|
.shadow {
|
|
box-shadow:
|
|
8px 8px 16px var(--neu-shadow-dark),
|
|
-8px -8px 16px var(--neu-shadow-light);
|
|
}
|
|
|
|
.nav-shadow {
|
|
box-shadow:
|
|
0 4px 8px var(--neu-shadow-dark);
|
|
}
|
|
|
|
/* Pagination */
|
|
.paginator div {
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding: 10px 20px;
|
|
margin: 0 8px;
|
|
|
|
background: var(--neu-bg);
|
|
border-radius: 12px;
|
|
color: var(--neu-text);
|
|
box-shadow:
|
|
4px 4px 8px var(--neu-shadow-dark),
|
|
-4px -4px 8px var(--neu-shadow-light);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.paginator div:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
6px 6px 12px var(--neu-shadow-dark),
|
|
-6px -6px 12px var(--neu-shadow-light);
|
|
color: var(--neu-accent);
|
|
}
|
|
|
|
.paginator div:active {
|
|
transform: translateY(0);
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--neu-shadow-dark),
|
|
inset -4px -4px 8px var(--neu-shadow-light);
|
|
}
|