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

- 为 Header 组件添加 fixed 定位，并调整 body 顶部内边距
- 为主内容区域增加内边距和最大宽度限制以提升可读性
- 为多个 Segment 组件添加 basic 属性以移除背景和阴影
- 新增 CSS 工具类 `neu-no-shadow` 用于透明化元素
- 优化按钮间距、菜单项悬停效果及活动状态样式

common/init.go

@@ -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) {

common/public/static/app.css

@@ -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;
+    color: var(--neu-accent);
-}
+    text-shadow: 0 0 5px rgba(109, 93, 252, 0.3);
-
-.page-card-title a {
-    color: #368CCB;
-    text-decoration: none;
-}
-
-.page-card-title a:hover {
-    color: #368CCB;
-    text-decoration: none;
 }
 
 .wrapper {
@@ -46,256 +97,90 @@ a:hover {
     height: 4rem;
 }
 
-#footer a {
+/* Article Container - Main Card */
-    /*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;
+    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 {
+article h1, article h2, article h3, article h4, article h5, article h6 {
-    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;
     font-weight: 600;
     line-height: 1.5;
-    margin-block-start: 1em;
+    color: var(--neu-text);
-    margin-block-end: 0.2em;
 }
 
-article h1 {
+article h1 { font-size: 2em; }
-    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 {
+.info {
-    padding-bottom: 0.3em;
+    font-size: 14px;
-    font-size: 1.5em;
+    line-height: 28px;
-}
-
-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%;
+    color: var(--neu-text-muted);
-}
+    margin-bottom: 24px;
-
-article table td,
-article table th {
-    padding: 5px 8px;
-    border: 1px solid #bbb;
 }
 
+/* Blockquote - Pressed Effect */
 article blockquote {
-    margin-left: 0;
+    margin: 16px 0;
-    padding: 0 1em;
+    padding: 16px 24px;
-    border-left: 0.25em solid #ddd;
+    border-left: none;
-}
+    border-radius: 12px;
-
+    background: var(--neu-bg);
-article ol ul {
+    box-shadow: 
-    list-style-type: circle;
+        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;
+    border-radius: 12px;
-}
+    background: var(--neu-bg);
-
+    box-shadow: 
-article pre code {
+        inset 4px 4px 8px var(--neu-shadow-dark), 
-    font-size: 14px;
+        inset -4px -4px 8px var(--neu-shadow-light);
-}
-
-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;
 }
 
 code {
@@ -303,97 +188,139 @@ code {
 }
 
 article code {
-    color: #24292f;
+    color: var(--neu-accent);
-    background-color: rgb(175 184 193 / 20%);
+    background-color: transparent;
     padding: .065em .4em;
     border-radius: 6px;
-    font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace;
 }
 
-article .copyright {
+/* Inline Code Style */
-    display: none;
+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 {
+/* Lists */
-    font-size: 14px;
+article ul, article ol {
-    line-height: 28px;
+    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 {
+article table td,
-    text-decoration: none;
+article table th {
-    color: inherit;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(184, 188, 194, 0.3);
 }
 
-/* Code Page Style*/
+article table tr:last-child td {
-.code-page {
+    border-bottom: none;
-    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 {
+/* Images */
-    font-size: 16px;
+img {
-    width: 100%;
+    max-width: 100%;
-    height: 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 {
+/* Tags (e.g. timestamp) */
-    margin-top: 2px;
+.tag.is-light {
-    overflow-x: auto;
+    background: var(--neu-bg);
-    padding: 0;
+    color: var(--neu-text-muted);
-    font-size: 16px;
+    padding: 4px 12px;
-    background-color: rgba(0, 0, 0, 0);
+    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 {
+/* Scrollbar */
-    width: 100%;
+::-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 {
+/* Helper classes */
-    padding: 16px 24px;
+.shadow {
+    box-shadow: 
+        8px 8px 16px var(--neu-shadow-dark), 
+        -8px -8px 16px var(--neu-shadow-light);
 }
 
-.discuss h1 {
+.nav-shadow {
-    font-size: 24px;
+    box-shadow: 
-    line-height: 36px;
+        0 4px 8px var(--neu-shadow-dark);
-    text-align: left;
 }
 
-.discuss .time {
+/* Pagination */
-    font-size: 12px;
+.paginator div {
-    line-height: 18px;
+    border: none;
-    text-align: left;
+    cursor: pointer;
-    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 {
     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 {
+.paginator div:hover {
-    position: sticky;
+    transform: translateY(-2px);
-    top: 24px;
+    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);
 }

web/public/index.html

@@ -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"

web/src/components/Footer.js

@@ -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

web/src/components/Header.js

@@ -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' }} />

web/src/components/OtherSetting.js

@@ -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) {

web/src/index.css

@@ -1,31 +1,307 @@
+/* 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;
+  margin: 0;
-    padding-top: 55px;
+  padding-top: 70px; /* Increased for better header separation */
-    overflow-y: scroll;
+  overflow-y: scroll;
-    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
+  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
-    scrollbar-width: none;
+  background-color: var(--neu-bg);
+  color: var(--neu-text);
+  scrollbar-width: none;
 }
 
 body::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .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;
+  font-size: 1em !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) {
@@ -33,9 +309,3 @@ code {
         display: none !important;
     }
 }
-
-.quote {
-    margin-left: 0;
-    padding: 0 1em;
-    border-left: 0.25em solid #ddd;
-}

web/src/pages/About/index.js

@@ -34,8 +34,8 @@ const About = () => {
             <Header as='h3'>关于</Header>
             <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
             项目仓库地址：
-            <a href='https://github.com/songquanpeng/message-pusher'>
+            <a href='https://github.com/xyzmos/message-pusher'>
-              https://github.com/songquanpeng/message-pusher
+              https://github.com/xyzmos/message-pusher
             </a>
           </>
         ) : (

web/src/pages/Home/index.js

@@ -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>