diff --git a/common/public/message.html b/common/public/message.html index 373638f..7a121f9 100644 --- a/common/public/message.html +++ b/common/public/message.html @@ -7,25 +7,26 @@ {{.title}} - - -
-
-
-
-
-

{{.title}}

-
- 发布于：{{.time}} -
-
- {{.description | unescape}} -
+ +
+ +
+ +
+ +
+

{{.title}}

+
+ 发布于：{{.time}} +
+
+ {{.description | unescape}} +
+
{{.content | unescape}} -
-
+
+
-
- \ No newline at end of file + diff --git a/common/public/static/app.css b/common/public/static/app.css index c0aa2d4..ace220f 100644 --- a/common/public/static/app.css +++ b/common/public/static/app.css @@ -1,399 +1,223 @@ -body { - font-family: Verdana, Candara, Arial, Helvetica, Microsoft YaHei, sans-serif; - line-height: 1.6; - margin: 0; +/* Liquid Glass Global Styles */ + +/* 液态玻璃变量 */ +:root { + --liquid-glass-bg: rgba(255, 255, 255, 0.15); + --liquid-glass-bg-hover: rgba(255, 255, 255, 0.25); + --liquid-glass-border: rgba(255, 255, 255, 0.3); + --liquid-glass-ring: rgba(255, 255, 255, 0.2); + --liquid-glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); + --liquid-glass-blur: 40px; /* backdrop-blur-2xl/3xl */ + --liquid-glass-saturate: 1.5; + + --text-primary: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.8); + --link-color: #60a5fa; /* blue-400 */ + --link-hover-color: #93c5fd; /* blue-300 */ } -nav { - margin-bottom: 16px; +/* 基础液态玻璃类 */ +.liquid-glass { + background: var(--liquid-glass-bg); + backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturate)); + -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturate)); + border: 1px solid var(--liquid-glass-border); + box-shadow: + var(--liquid-glass-shadow), + inset 0 1px 1px rgba(255, 255, 255, 0.25); + border-radius: 1.5rem; /* rounded-2xl */ + transition: all 0.3s ease-out; +} + +.liquid-glass:hover { + background: var(--liquid-glass-bg-hover); +} + +/* 液态玻璃容器 - 渐变背景 (Blue-Purple) */ +.liquid-glass-container { + background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #ec4899 100%); + min-height: 100vh; + width: 100%; + position: relative; + overflow-x: hidden; +} + +/* 边缘高光效果 */ +.liquid-glass-highlight { + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.15), + transparent 50% + ); + pointer-events: none; + position: absolute; + inset: 0; + border-radius: inherit; +} + +/* 胶囊标签样式 */ +.liquid-glass-pill { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 1rem; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(16px) saturate(1.5); + -webkit-backdrop-filter: blur(16px) saturate(1.5); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + font-size: 0.875rem; + font-weight: 500; + color: white; + box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3); +} + +/* General Resets & Typography adapted for Liquid Glass */ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; + line-height: 1.6; + margin: 0; + color: var(--text-primary); } a { text-decoration: none; - color: #007bff; + color: var(--link-color); + transition: color 0.2s; } a:hover { + color: var(--link-hover-color); text-decoration: none !important; - color: #007bff; -} - -.page-card-title a { - color: #368CCB; - text-decoration: none; -} - -.page-card-title a:hover { - color: #368CCB; - text-decoration: none; } +/* Layout */ .wrapper { max-width: 960px; margin: 0 auto; + padding: 2rem 1rem; } -#page-container { - position: relative; - min-height: 97vh; -} - -#content-wrap { - padding-bottom: 4rem; -} - -#footer { - height: 4rem; -} - -#footer a { - /*color: black;*/ -} - -code { - font-family: Consolas, 'Courier New', monospace; -} - -.page-card-list { - margin: 8px 8px; -} - -.page-card-title { - font-size: x-large; - font-weight: 500; - color: #000000; - text-decoration: none; - margin-bottom: 4px; -} - -.page-card-text { - margin-top: 16px; -} - -.pagination { - margin: 16px 4px; -} - -.pagination a { - border: none; - overflow: hidden; -} - -.shadow { - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02); -} - -.nav-shadow { - box-shadow: 0 2px 3px rgba(26, 26, 26, .1); -} - -.paginator div { - border: 2px solid #000; - cursor: pointer; - display: inline-block; - min-width: 100px; - text-align: center; - font-weight: bold; - padding: 10px; -} - -.box article { - overflow-wrap: break-word; - /*font-size: larger;*/ - word-break: break-word; - line-height: 1.6; - padding: 16px; - /*margin-bottom: 16px;*/ - background-color: #ffffff; -} - -.toc-level-1 { - list-style-type: none; -} - -.toc-level-2 { - list-style-type: none; -} - -.toc-level-3 { - list-style-type: disc; -} - -.toc-level-4 { - list-style-type: circle; -} - -.toc-level-5 { - list-style-type: square; -} - -.toc-level-6 { - list-style-type: square; -} - -img { - max-width: 100%; - max-height: 100%; -} - -.article-container { - margin: auto; - max-width: 960px; - padding: 16px 16px; - overflow-wrap: break-word; - word-break: break-word; - line-height: 1.6; - /*font-size: larger;*/ -} - +/* Article Styles */ 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; + line-height: 1.6; word-wrap: break-word; - color: #24292f; + color: var(--text-primary); + padding: 2rem; + position: relative; } -article p, article blockquote, article ul, article ol, article dl, article table, article pre, article details { - margin-top: 0; - margin-bottom: 16px; -} - -article ul, article ol { - padding-left: 2em; -} - -article ul ul, article ul ol, article ol ol, article ol ul { - margin-top: 0; - margin-bottom: 0; -} - -article .tag { - font-family: Verdana, Candara, Arial, Helvetica, Microsoft YaHei, sans-serif; -} - -article a { - color: #007bff; - text-decoration: none; -} - -article a:hover { - color: #007bff; - text-decoration: none; -} - -article h2, -article h3, -article h4, -article h5, -article h6 { - margin-top: 24px; - margin-bottom: 16px; +article h1, article h2, article h3, article h4, article h5, article h6 { + color: var(--text-primary); + margin-top: 1.5em; + margin-bottom: 0.5em; font-weight: 600; - line-height: 1.5; - margin-block-start: 1em; - margin-block-end: 0.2em; } -article h1 { - font-size: 2em -} - -article h2 { - padding-bottom: 0.3em; - font-size: 1.5em; -} - -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 -} - -@media screen and (max-width: 960px) { - article h1 { - font-size: 1.5em - } - - article h2 { - font-size: 1.35em - } - - article h3 { - font-size: 1.3em - } - - article h4 { - font-size: 1.2em; - } -} - -article p { - margin-top: 0; - margin-bottom: 16px; -} - -article table { - margin: auto; - border-collapse: collapse; - border-spacing: 0; - vertical-align: middle; - text-align: left; - min-width: 66%; -} - -article table td, -article table th { - padding: 5px 8px; - border: 1px solid #bbb; -} - -article blockquote { - margin-left: 0; - padding: 0 1em; - border-left: 0.25em solid #ddd; -} - -article ol ul { - list-style-type: circle; -} - -article pre { - max-width: 960px; - display: block; - overflow: auto; - padding: 0; - margin-top: 12px; - margin-bottom: 12px; - border-radius: 6px; -} - -article pre code { - font-size: 14px; -} - -article ol { - text-decoration: none; - padding-inline-start: 40px; - margin-bottom: 1.25rem; - padding-left: 2em; -} - -article ul { - padding-left: 2em; -} - -article li + li { - margin-top: 0.25em; +article h1 { font-size: 2.25em; line-height: 1.2; } +article h2 { font-size: 1.75em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(255,255,255,0.2); } +article h3 { font-size: 1.5em; } + +.info { + font-size: 0.9rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; + display: flex; + align-items: center; } +/* Code Blocks */ code { - font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace; + font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; + font-size: 0.9em; } article code { - color: #24292f; - background-color: rgb(175 184 193 / 20%); - padding: .065em .4em; - border-radius: 6px; - font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace; + background: rgba(0, 0, 0, 0.2); + color: #e2e8f0; + padding: 0.2em 0.4em; + border-radius: 0.375rem; } -article .copyright { - display: none; -} - -.info { - font-size: 14px; - line-height: 28px; - text-align: left; - color: #738292; - margin-bottom: 24px; -} - -.info a { - text-decoration: none; - color: inherit; -} - -/* Code Page Style*/ -.code-page { - margin-top: 32px; - padding-left: 16px; - padding-right: 16px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; -} - -.code-page code { - font-size: 16px; - width: 100%; - height: 100%; -} - -.code-page pre { - margin-top: 2px; +article pre { + background: rgba(0, 0, 0, 0.25); + padding: 1rem; + border-radius: 0.75rem; overflow-x: auto; + margin: 1rem 0; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +article pre code { + background: transparent; padding: 0; - font-size: 16px; - background-color: rgba(0, 0, 0, 0); + color: inherit; + font-size: 0.9em; } -.code-page .control-panel { +/* Blockquotes */ +article blockquote { + margin: 1rem 0; + padding: 0.5rem 1rem; + border-left: 4px solid rgba(255, 255, 255, 0.4); + background: rgba(255, 255, 255, 0.05); + border-radius: 0 0.5rem 0.5rem 0; + color: var(--text-secondary); +} + +/* Tables */ +article table { width: 100%; + border-collapse: collapse; + margin: 1rem 0; } -#code-display { - padding: 16px 24px; +article table th, article table td { + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.75rem; } -.discuss h1 { - font-size: 24px; - line-height: 36px; - text-align: left; +article table th { + background: rgba(255, 255, 255, 0.1); + font-weight: 600; } -.discuss .time { - font-size: 12px; - line-height: 18px; - text-align: left; - color: #738292; +/* Images */ +img { + max-width: 100%; + height: auto; + border-radius: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } -.discuss .content { - font-size: 16px; - line-height: 24px; - text-align: left; +/* Helpers */ +.shadow { + box-shadow: var(--liquid-glass-shadow); } -.raw { - padding: 16px; +/* Specific elements from original CSS that might be needed */ +.columns { + display: flex; + justify-content: center; +} +.column { + width: 100%; + max-width: 960px; } -.raw .raw-content { - overflow-y: hidden; - overflow-x: scroll; +/* Scrollbar customization for webkit */ +::-webkit-scrollbar { + width: 8px; + height: 8px; } - -.links { - margin: 16px; +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); } - -span.line { - display: inline-block; +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + border-radius: 4px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.5); } - -.toc { - position: sticky; - top: 24px; -} \ No newline at end of file