style(ui): 优化页面布局与视觉样式

- 为 Header 组件添加 fixed 定位，并调整 body 顶部内边距 - 为主内容区域增加内边距和最大宽度限制以提升可读性 - 为多个 Segment 组件添加 basic 属性以移除背景和阴影 - 新增 CSS 工具类 `neu-no-shadow` 用于透明化元素 - 优化按钮间距、菜单项悬停效果及活动状态样式
style(ui): 将主题从液态玻璃更新为新拟态设计并替换仓库链接
2026-02-11 14:29:26 +08:00 · 2026-02-11 14:20:32 +08:00 · 2026-02-11 13:55:46 +08:00
9 changed files with 523 additions and 339 deletions
@@ -19,7 +19,7 @@ var (
 func printHelp() {
 	fmt.Println(fmt.Sprintf("Message Pusher %s - Your all in one message push system.", Version))
 	fmt.Println("Copyright (C) 2023 JustSong. All rights reserved.")
-	fmt.Println("GitHub: https://github.com/songquanpeng/message-pusher")
+	fmt.Println("GitHub: https://github.com/xyzmos/message-pusher")
 	fmt.Println("Usage: message-pusher [options]")
 	fmt.Println("Options:")
 	flag.CommandLine.VisitAll(func(f *flag.Flag) {
@@ -1,7 +1,66 @@
+/* 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 {
@@ -10,22 +69,14 @@ nav {

 a {
    text-decoration: none;
-    color: #007bff;
+    color: var(--neu-accent);
+    transition: all 0.3s ease;
 }

 a:hover {
    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;
+    color: var(--neu-accent);
+    text-shadow: 0 0 5px rgba(109, 93, 252, 0.3);
 }

 .wrapper {
@@ -46,256 +97,90 @@ a:hover {
    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 - Main Card */
 .article-container {
-    margin: auto;
+    margin: 40px auto;
    max-width: 960px;
-    padding: 16px 16px;
+    padding: 40px;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.6;
-    /*font-size: larger;*/
+    
+    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: #24292f;
+    color: var(--neu-text);
 }

-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 {
+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;
-    margin-block-start: 1em;
-    margin-block-end: 0.2em;
+    color: var(--neu-text);
 }

-article h1 {
-    font-size: 2em
-}
+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; }

-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;
+.info {
+    font-size: 14px;
+    line-height: 28px;
    text-align: left;
-    min-width: 66%;
-}
-
-article table td,
-article table th {
-    padding: 5px 8px;
-    border: 1px solid #bbb;
+    color: var(--neu-text-muted);
+    margin-bottom: 24px;
 }

+/* Blockquote - Pressed Effect */
 article blockquote {
-    margin-left: 0;
-    padding: 0 1em;
-    border-left: 0.25em solid #ddd;
-}
-
-article ol ul {
-    list-style-type: circle;
+    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: 960px;
+    max-width: 100%;
    display: block;
    overflow: auto;
-    padding: 0;
+    padding: 16px;
    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;
+    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 {
@@ -303,97 +188,139 @@ code {
 }

 article code {
-    color: #24292f;
-    background-color: rgb(175 184 193 / 20%);
+    color: var(--neu-accent);
+    background-color: transparent;
    padding: .065em .4em;
    border-radius: 6px;
-    font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace;
 }

-article .copyright {
-    display: none;
+/* 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;
 }

-.info {
-    font-size: 14px;
-    line-height: 28px;
+/* 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;
-    color: #738292;
+    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;
 }

-.info a {
-    text-decoration: none;
-    color: inherit;
+article table td,
+article table th {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(184, 188, 194, 0.3);
 }

-/* 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";
+article table tr:last-child td {
+    border-bottom: none;
 }

-.code-page code {
-    font-size: 16px;
-    width: 100%;
-    height: 100%;
+/* 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);
 }

-.code-page pre {
-    margin-top: 2px;
-    overflow-x: auto;
-    padding: 0;
-    font-size: 16px;
-    background-color: rgba(0, 0, 0, 0);
+/* 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;
 }

-.code-page .control-panel {
-    width: 100%;
+/* 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);
 }

-#code-display {
-    padding: 16px 24px;
+/* Helper classes */
+.shadow {
+    box-shadow: 
+        8px 8px 16px var(--neu-shadow-dark), 
+        -8px -8px 16px var(--neu-shadow-light);
 }

-.discuss h1 {
-    font-size: 24px;
-    line-height: 36px;
-    text-align: left;
+.nav-shadow {
+    box-shadow: 
+        0 4px 8px var(--neu-shadow-dark);
 }

-.discuss .time {
-    font-size: 12px;
-    line-height: 18px;
-    text-align: left;
-    color: #738292;
-}
-
-.discuss .content {
-    font-size: 16px;
-    line-height: 24px;
-    text-align: left;
-}
-
-.raw {
-    padding: 16px;
-}
-
-.raw .raw-content {
-    overflow-y: hidden;
-    overflow-x: scroll;
-}
-
-.links {
-    margin: 16px;
-}
-
-span.line {
+/* 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;
 }

-.toc {
-    position: sticky;
-    top: 24px;
+.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);
 }
@@ -4,7 +4,7 @@
    <meta charset="utf-8" />
    <link rel="icon" href="logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#e0e5ec" />
    <meta
      name="description"
      content="Web site created using create-react-app"
@@ -11,24 +11,11 @@ const Footer = () => {
  });

  return (
-    <Segment vertical>
+    <Segment vertical basic>
      <Container textAlign='center'>
        {Footer === '' ? (
          <div className='custom-footer'>
-            <a
-              href='https://github.com/songquanpeng/message-pusher'
-              target='_blank'
-            >
              消息推送服务 {process.env.REACT_APP_VERSION}{' '}
-            </a>
-            由{' '}
-            <a href='https://github.com/songquanpeng' target='_blank'>
-              JustSong
-            </a>{' '}
-            构建，源代码遵循{' '}
-            <a href='https://opensource.org/licenses/mit-license.php'>
-              MIT 协议
-            </a>
          </div>
        ) : (
          <div
@@ -168,7 +168,7 @@ const Header = () => {

  return (
    <>
-      <Menu borderless style={{ borderTop: 'none' }}>
+      <Menu borderless fixed='top' style={{ borderTop: 'none' }}>
        <Container>
          <Menu.Item as={Link} to='/' className={'hide-on-mobile'}>
            <img src='/logo.png' alt='logo' style={{ marginRight: '0.75em' }} />
@@ -74,12 +74,12 @@ const OtherSetting = () => {

  const openGitHubRelease = () => {
    window.location =
-      'https://github.com/songquanpeng/message-pusher/releases/latest';
+      'https://github.com/xyzmos/message-pusher/releases/latest';
  };

  const checkUpdate = async () => {
    const res = await API.get(
-      'https://api.github.com/repos/songquanpeng/message-pusher/releases/latest'
+      'https://api.github.com/repos/xyzmos/message-pusher/releases/latest'
    );
    const { tag_name, body } = res.data;
    if (tag_name === process.env.REACT_APP_VERSION) {
@@ -1,10 +1,25 @@
+/* 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;
+  --neu-radius: 12px;
+}
+
 body {
  margin: 0;
-    padding-top: 55px;
+  padding-top: 70px; /* Increased for better header separation */
  overflow-y: scroll;
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--neu-bg);
+  color: var(--neu-text);
  scrollbar-width: none;
 }

@@ -17,25 +32,280 @@ code {
 }

 .main-content {
-    padding: 4px;
+  padding: 24px; /* Increased padding */
+  max-width: 1200px; /* Limit width for better readability */
+  margin: 0 auto;
 }

 .small-icon .icon {
  font-size: 1em !important;
 }

-.custom-footer {
-    font-size: 1.1em;
-}
-
-@media only screen and (max-width: 600px) {
-    .hide-on-mobile {
-        display: none !important;
-    }
-}
-
 .quote {
  margin-left: 0;
  padding: 0 1em;
  border-left: 0.25em solid #ddd;
 }
+
+a {
+  color: var(--neu-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: #5a4ad1; /* Slightly darker accent */
+}
+
+/* Utility Classes */
+.neu-raised {
+  background: var(--neu-bg);
+  border-radius: var(--neu-radius);
+  box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
+  border: none !important;
+}
+
+.neu-raised-sm {
+  background: var(--neu-bg);
+  border-radius: var(--neu-radius);
+  box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
+  border: none !important;
+}
+
+.neu-pressed {
+  background: var(--neu-bg);
+  border-radius: var(--neu-radius);
+  box-shadow: inset 8px 8px 16px var(--neu-shadow-dark), inset -8px -8px 16px var(--neu-shadow-light);
+  border: none !important;
+}
+
+.neu-pressed-sm {
+  background: var(--neu-bg);
+  border-radius: var(--neu-radius);
+  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
+  border: none !important;
+}
+
+.neu-circle {
+  border-radius: 50% !important;
+}
+
+/* New Helper to remove shadow */
+.neu-no-shadow {
+    box-shadow: none !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Semantic UI Overrides */
+
+/* Segments, Cards, Messages */
+.ui.segment,
+.ui.card,
+.ui.cards > .card,
+.ui.message {
+  background: var(--neu-bg) !important;
+  border: none !important;
+  box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
+  border-radius: var(--neu-radius) !important;
+  color: var(--neu-text) !important;
+}
+
+/* Special class for transparent segments */
+.ui.basic.segment {
+    box-shadow: none !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+.ui.card > .content > .header,
+.ui.cards > .card > .content > .header,
+.ui.header {
+  color: var(--neu-text) !important;
+}
+
+.ui.card > .content > .meta,
+.ui.cards > .card > .content > .meta {
+  color: var(--neu-text-muted) !important;
+}
+
+/* Remove internal borders in segments/cards if desired, or keep them soft */
+.ui.segment:after, .ui.segment:before {
+    display: none;
+}
+
+/* Buttons */
+.ui.button {
+  background: var(--neu-bg) !important;
+  color: var(--neu-text) !important;
+  border: none !important;
+  box-shadow: 5px 5px 10px var(--neu-shadow-dark), -5px -5px 10px var(--neu-shadow-light) !important;
+  border-radius: 10px !important;
+  transition: all 0.2s ease !important;
+  font-weight: 600 !important;
+  margin-right: 8px !important; /* Add spacing between buttons */
+}
+
+.ui.button:hover {
+  background: var(--neu-bg) !important;
+  box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
+  transform: translateY(-1px);
+}
+
+.ui.button:active,
+.ui.button.active {
+  background: var(--neu-bg) !important;
+  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light) !important;
+  transform: translateY(1px);
+}
+
+/* Circular Buttons */
+.ui.circular.button {
+  border-radius: 50% !important;
+}
+
+/* Primary/Positive/Negative buttons - use accent color text or slight tint */
+.ui.primary.button, .ui.blue.button {
+    color: var(--neu-accent) !important;
+}
+.ui.positive.button, .ui.green.button {
+    color: #21ba45 !important;
+}
+.ui.negative.button, .ui.red.button {
+    color: #db2828 !important;
+}
+
+/* Inputs */
+.ui.form input:not([type]), 
+.ui.form input[type=date], 
+.ui.form input[type=datetime-local], 
+.ui.form input[type=email], 
+.ui.form input[type=file], 
+.ui.form input[type=number], 
+.ui.form input[type=password], 
+.ui.form input[type=search], 
+.ui.form input[type=tel], 
+.ui.form input[type=text], 
+.ui.form input[type=time], 
+.ui.form input[type=url], 
+.ui.input > input,
+.ui.form textarea {
+  background: var(--neu-bg) !important;
+  border: none !important;
+  box-shadow: inset 5px 5px 10px var(--neu-shadow-dark), inset -5px -5px 10px var(--neu-shadow-light) !important;
+  border-radius: var(--neu-radius) !important;
+  color: var(--neu-text) !important;
+  padding: 1em !important;
+}
+
+.ui.form input:focus, .ui.input > input:focus, .ui.form textarea:focus {
+    color: var(--neu-accent) !important;
+}
+
+/* Menu / Header */
+.ui.menu {
+  background: var(--neu-bg) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Fixed Header Style */
+.ui.menu.fixed {
+    box-shadow: 0px 4px 10px var(--neu-shadow-dark) !important;
+    z-index: 1000;
+}
+
+.ui.menu .item {
+    color: var(--neu-text) !important;
+    margin: 0 4px !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease;
+}
+
+.ui.menu .item:before {
+    background: transparent !important;
+}
+
+.ui.menu .item:hover {
+    background: transparent !important;
+    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
+}
+
+.ui.menu .active.item {
+    background: transparent !important;
+    color: var(--neu-accent) !important;
+    font-weight: bold !important;
+    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light) !important;
+}
+
+/* Dropdown */
+.ui.dropdown .menu {
+    background: var(--neu-bg) !important;
+    border: none !important;
+    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
+    border-radius: var(--neu-radius) !important;
+}
+
+.ui.dropdown .menu > .item {
+    color: var(--neu-text) !important;
+    border-top: none !important;
+}
+
+.ui.dropdown .menu > .item:hover {
+    background: transparent !important;
+    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light) !important;
+    border-radius: 8px !important;
+}
+
+/* Labels */
+.ui.label {
+    background: var(--neu-bg) !important;
+    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
+    border: none !important;
+    color: var(--neu-text) !important;
+    border-radius: 6px !important;
+}
+
+/* Tables */
+.ui.table {
+    background: var(--neu-bg) !important;
+    border: none !important;
+    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
+    border-radius: var(--neu-radius) !important;
+}
+.ui.table thead th {
+    background: var(--neu-bg) !important;
+    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
+    color: var(--neu-text) !important;
+}
+.ui.table tbody td {
+    border-top: 1px solid rgba(0,0,0,0.05) !important;
+}
+
+/* Modal */
+.ui.modal {
+    background: var(--neu-bg) !important;
+    border-radius: var(--neu-radius) !important;
+    box-shadow: 10px 10px 20px var(--neu-shadow-dark), -10px -10px 20px var(--neu-shadow-light) !important;
+}
+.ui.modal > .header, .ui.modal > .content, .ui.modal > .actions {
+    background: var(--neu-bg) !important;
+    border: none !important;
+    color: var(--neu-text) !important;
+}
+
+/* Divider */
+.ui.divider {
+    border-top: 1px solid rgba(0,0,0,0.05) !important;
+    border-bottom: 1px solid rgba(255,255,255,0.8) !important;
+}
+
+.custom-footer {
+    font-size: 1.1em;
+    color: var(--neu-text-muted);
+}
+
+@media only screen and (max-width: 600px) {
+    .hide-on-mobile {
+        display: none !important;
+    }
+}
@@ -34,8 +34,8 @@ const About = () => {
            <Header as='h3'>关于</Header>
            <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
            项目仓库地址：
-            <a href='https://github.com/songquanpeng/message-pusher'>
-              https://github.com/songquanpeng/message-pusher
+            <a href='https://github.com/xyzmos/message-pusher'>
+              https://github.com/xyzmos/message-pusher
            </a>
          </>
        ) : (
@@ -40,7 +40,7 @@ const Home = () => {
        </>
      ) : (
        <>
-          <Segment>
+          <Segment basic>
            <Header as='h3'>系统状况</Header>
            <Grid columns={2} stackable>
              <Grid.Column>
@@ -54,10 +54,10 @@ const Home = () => {
                      <p>
                        源码：
                        <a
-                          href='https://github.com/songquanpeng/message-pusher'
+                          href='https://github.com/xyzmos/message-pusher'
                          target='_blank'
                        > 
-                          https://github.com/songquanpeng/message-pusher
+                          https://github.com/xyzmos/message-pusher
                        </a>
                      </p>
                      <p>启动时间：{getStartTimeString()}</p>
Author	SHA1	Message	Date
zimonianhua	3d6ba87546	style(ui): 优化页面布局与视觉样式 - 为 Header 组件添加 fixed 定位，并调整 body 顶部内边距 - 为主内容区域增加内边距和最大宽度限制以提升可读性 - 为多个 Segment 组件添加 basic 属性以移除背景和阴影 - 新增 CSS 工具类 `neu-no-shadow` 用于透明化元素 - 优化按钮间距、菜单项悬停效果及活动状态样式	2026-02-11 14:29:26 +08:00
zimonianhua	96eb8d7064	style(ui): 将主题从液态玻璃更新为新拟态设计并替换仓库链接 Publish Docker image (amd64) / Push Docker image to multiple registries (push) Has been cancelled Details Publish Docker image (arm64) / Push Docker image to multiple registries (push) Has been cancelled Details Linux Release / release (push) Has been cancelled Details macOS Release / release (push) Has been cancelled Details Windows Release / release (push) Has been cancelled Details - 将整体 UI 主题从液态玻璃效果更改为新拟态（Neumorphism）设计风格 - 更新所有 GitHub 仓库链接至新组织地址 - 简化页脚信息，移除作者和许可证声明 - 调整消息页面的 HTML 结构和样式以匹配新设计	2026-02-11 14:20:32 +08:00
zimonianhua	de68963f40	feat(ui): 引入液态玻璃设计风格并重构消息页面样式 Publish Docker image (amd64) / Push Docker image to multiple registries (push) Has been cancelled Details Publish Docker image (arm64) / Push Docker image to multiple registries (push) Has been cancelled Details Linux Release / release (push) Has been cancelled Details macOS Release / release (push) Has been cancelled Details Windows Release / release (push) Has been cancelled Details - 将消息页面整体布局更新为液态玻璃设计风格，使用渐变背景和毛玻璃效果 - 重构 CSS 文件，移除旧样式并实现新的设计系统，包括变量定义和组件样式 - 优化响应式布局和视觉层次，提升页面美观度和现代感 - 保留原有功能内容的同时全面更新视觉呈现方式	2026-02-11 13:55:46 +08:00