Hass/message-pusher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Compare commits

base: Hass/message-pusher:1.2
Branches Tags
Hass/message-pusher:master
Hass/message-pusher:1.3 Hass/message-pusher:1.2 Hass/message-pusher:1.1 Hass/message-pusher:1.0
..
compare: Hass/message-pusher:master
Branches Tags
Hass/message-pusher:master
Hass/message-pusher:1.3 Hass/message-pusher:1.2 Hass/message-pusher:1.1 Hass/message-pusher:1.0
2 Commits
1.2 .. master
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
10 changed files with 567 additions and 208 deletions
Expand all files Collapse all files
common/init.go
+1 -1
View File
@@ -19,7 +19,7 @@ var (
func printHelp() { func printHelp() {
fmt.Println(fmt.Sprintf("Message Pusher %s - Your all in one message push system.", Version)) 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("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("Usage: message-pusher [options]")
fmt.Println("Options:") fmt.Println("Options:")
flag.CommandLine.VisitAll(func(f *flag.Flag) { flag.CommandLine.VisitAll(func(f *flag.Flag) {
common/public/message.html
+18 -19
View File
@@ -7,26 +7,25 @@
<title>{{.title}}</title> <title>{{.title}}</title>
<meta name="description" content="{{.description}}"> <meta name="description" content="{{.description}}">
</head> </head>
<body class="liquid-glass-container"> <body>
<div class="wrapper">
<!-- Liquid Glass Card --> <div>
<div class="liquid-glass" style="position: relative; overflow: hidden;"> <div class="article-container" style="max-width: 960px">
<!-- Edge Highlight Effect --> <div class="columns is-desktop">
<div class="liquid-glass-highlight"></div> <div class="column">
<article id="article">
<article id="article"> <h1 class="title is-3 is-4-mobile">{{.title}}</h1>
<h1 class="title">{{.title}}</h1> <div class="info">
<div class="info"> <span class="line">发布于：<span class="tag is-light">{{.time}}</span></span>
<span class="line">发布于：<span class="liquid-glass-pill">{{.time}}</span></span> </div>
</div> <blockquote>
<blockquote> {{.description | unescape}}
{{.description | unescape}} </blockquote>
</blockquote>
<div class="content-body">
{{.content | unescape}} {{.content | unescape}}
</div> </article>
</article> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
common/public/static/app.css
+250 -147
View File
@@ -1,223 +1,326 @@
/* Liquid Glass Global Styles */ /* Neumorphism Global Styles */
/* 液态玻璃变量 */
:root { :root {
--liquid-glass-bg: rgba(255, 255, 255, 0.15); --neu-bg: #e0e5ec;
--liquid-glass-bg-hover: rgba(255, 255, 255, 0.25); --neu-bg-light: #f0f0f3;
--liquid-glass-border: rgba(255, 255, 255, 0.3); --neu-shadow-dark: #b8bcc2;
--liquid-glass-ring: rgba(255, 255, 255, 0.2); --neu-shadow-light: #ffffff;
--liquid-glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); --neu-accent: #6d5dfc;
--liquid-glass-blur: 40px; /* backdrop-blur-2xl/3xl */ --neu-text: #333333;
--liquid-glass-saturate: 1.5; --neu-text-muted: #6b7280;
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.8);
--link-color: #60a5fa; /* blue-400 */
--link-hover-color: #93c5fd; /* blue-300 */
} }
/* 基础液态玻璃类 */ /* Utility Classes */
.liquid-glass { .neu-raised {
background: var(--liquid-glass-bg); background: var(--neu-bg);
backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturate)); border-radius: 12px;
-webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturate));
border: 1px solid var(--liquid-glass-border);
box-shadow: box-shadow:
var(--liquid-glass-shadow), 8px 8px 16px var(--neu-shadow-dark),
inset 0 1px 1px rgba(255, 255, 255, 0.25); -8px -8px 16px var(--neu-shadow-light);
border-radius: 1.5rem; /* rounded-2xl */
transition: all 0.3s ease-out;
} }
.liquid-glass:hover { .neu-raised-sm {
background: var(--liquid-glass-bg-hover); box-shadow:
4px 4px 8px var(--neu-shadow-dark),
-4px -4px 8px var(--neu-shadow-light);
} }
/* 液态玻璃容器 - 渐变背景 (Blue-Purple) */ .neu-pressed {
.liquid-glass-container { background: var(--neu-bg);
background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #ec4899 100%); border-radius: 12px;
min-height: 100vh; box-shadow:
width: 100%; inset 8px 8px 16px var(--neu-shadow-dark),
position: relative; inset -8px -8px 16px var(--neu-shadow-light);
overflow-x: hidden;
} }
/* 边缘高光效果 */ .neu-pressed-sm {
.liquid-glass-highlight { box-shadow:
background-image: linear-gradient( inset 4px 4px 8px var(--neu-shadow-dark),
to bottom, inset -4px -4px 8px var(--neu-shadow-light);
rgba(255, 255, 255, 0.15),
transparent 50%
);
pointer-events: none;
position: absolute;
inset: 0;
border-radius: inherit;
} }
/* 胶囊标签样式 */ .neu-hover:hover {
.liquid-glass-pill { box-shadow:
display: inline-flex; 4px 4px 8px var(--neu-shadow-dark),
align-items: center; -4px -4px 8px var(--neu-shadow-light);
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 */ .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 { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; font-family: Verdana, Candara, Arial, Helvetica, Microsoft YaHei, sans-serif;
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
color: var(--text-primary); background-color: var(--neu-bg);
color: var(--neu-text);
}
nav {
margin-bottom: 16px;
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--neu-accent);
transition: color 0.2s; transition: all 0.3s ease;
} }
a:hover { a:hover {
color: var(--link-hover-color);
text-decoration: none !important; text-decoration: none !important;
color: var(--neu-accent);
text-shadow: 0 0 5px rgba(109, 93, 252, 0.3);
} }
/* Layout */
.wrapper { .wrapper {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 2rem 1rem;
} }
/* Article Styles */ #page-container {
article {
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
color: var(--text-primary);
padding: 2rem;
position: relative; 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 { article h1, article h2, article h3, article h4, article h5, article h6 {
color: var(--text-primary); margin-top: 24px;
margin-top: 1.5em; margin-bottom: 16px;
margin-bottom: 0.5em;
font-weight: 600; font-weight: 600;
line-height: 1.5;
color: var(--neu-text);
} }
article h1 { font-size: 2.25em; line-height: 1.2; } article h1 { font-size: 2em; }
article h2 { font-size: 1.75em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(255,255,255,0.2); } article h2 { font-size: 1.5em; padding-bottom: 0.3em; }
article h3 { 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; }
.info { .info {
font-size: 0.9rem; font-size: 14px;
color: var(--text-secondary); line-height: 28px;
margin-bottom: 1.5rem; text-align: left;
display: flex; color: var(--neu-text-muted);
align-items: center; 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 Blocks */
code { code {
font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-family: "JetBrains Mono", "Cascadia Code", Consolas, Microsoft YaHei, monospace;
font-size: 0.9em;
} }
article code { article code {
background: rgba(0, 0, 0, 0.2); color: var(--neu-accent);
color: #e2e8f0; background-color: transparent;
padding: 0.2em 0.4em; padding: .065em .4em;
border-radius: 0.375rem; border-radius: 6px;
} }
article pre { /* Inline Code Style */
background: rgba(0, 0, 0, 0.25); p code, li code {
padding: 1rem; background-color: var(--neu-bg);
border-radius: 0.75rem; box-shadow:
overflow-x: auto; inset 2px 2px 4px var(--neu-shadow-dark),
margin: 1rem 0; inset -2px -2px 4px var(--neu-shadow-light);
border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 6px;
border-radius: 6px;
} }
article pre code { /* Lists */
background: transparent; article ul, article ol {
padding: 0; padding-left: 2em;
color: inherit;
font-size: 0.9em;
} }
/* Blockquotes */ article li + li {
article blockquote { margin-top: 0.25em;
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 */ /* Tables */
article table { article table {
width: 100%; margin: auto;
border-collapse: collapse; border-collapse: separate;
margin: 1rem 0; border-spacing: 0;
} vertical-align: middle;
text-align: left;
article table th, article table td { min-width: 66%;
border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
padding: 0.75rem; 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 { article table th {
background: rgba(255, 255, 255, 0.1); padding: 12px 16px;
font-weight: 600; border-bottom: 1px solid rgba(184, 188, 194, 0.3);
}
article table tr:last-child td {
border-bottom: none;
} }
/* Images */ /* Images */
img { img {
max-width: 100%; max-width: 100%;
height: auto; max-height: 100%;
border-radius: 0.75rem; border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); margin: 16px 0;
box-shadow:
8px 8px 16px var(--neu-shadow-dark),
-8px -8px 16px var(--neu-shadow-light);
} }
/* Helpers */ /* Tags (e.g. timestamp) */
.shadow { .tag.is-light {
box-shadow: var(--liquid-glass-shadow); 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;
} }
/* Specific elements from original CSS that might be needed */ /* Scrollbar */
.columns {
display: flex;
justify-content: center;
}
.column {
width: 100%;
max-width: 960px;
}
/* Scrollbar customization for webkit */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 12px;
height: 8px; height: 12px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1); background: var(--neu-bg);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3); background: var(--neu-shadow-dark);
border-radius: 4px; border-radius: 6px;
border: 3px solid var(--neu-bg);
} }
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5); /* 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);
} }
web/public/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="logo.png" /> <link rel="icon" href="logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#e0e5ec" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
web/src/components/Footer.js
+1 -14
View File
@@ -11,24 +11,11 @@ const Footer = () => {
}); });
return ( return (
<Segment vertical> <Segment vertical basic>
<Container textAlign='center'> <Container textAlign='center'>
{Footer === '' ? ( {Footer === '' ? (
<div className='custom-footer'> <div className='custom-footer'>
<a
href='https://github.com/songquanpeng/message-pusher'
target='_blank'
>
消息推送服务 {process.env.REACT_APP_VERSION}{' '} 消息推送服务 {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>
) : ( ) : (
<div <div
web/src/components/Header.js
+1 -1
View File
@@ -168,7 +168,7 @@ const Header = () => {
return ( return (
<> <>
<Menu borderless style={{ borderTop: 'none' }}> <Menu borderless fixed='top' style={{ borderTop: 'none' }}>
<Container> <Container>
<Menu.Item as={Link} to='/' className={'hide-on-mobile'}> <Menu.Item as={Link} to='/' className={'hide-on-mobile'}>
<img src='/logo.png' alt='logo' style={{ marginRight: '0.75em' }} /> <img src='/logo.png' alt='logo' style={{ marginRight: '0.75em' }} />
web/src/components/OtherSetting.js
+2 -2
View File
@@ -74,12 +74,12 @@ const OtherSetting = () => {
const openGitHubRelease = () => { const openGitHubRelease = () => {
window.location = window.location =
'https://github.com/songquanpeng/message-pusher/releases/latest'; 'https://github.com/xyzmos/message-pusher/releases/latest';
}; };
const checkUpdate = async () => { const checkUpdate = async () => {
const res = await API.get( 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; const { tag_name, body } = res.data;
if (tag_name === process.env.REACT_APP_VERSION) { if (tag_name === process.env.REACT_APP_VERSION) {
web/src/index.css
+287 -17
View File
@@ -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 { 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 { body::-webkit-scrollbar {
display: none; display: none;
} }
code { 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 { .main-content {
padding: 4px; padding: 24px; /* Increased padding */
max-width: 1200px; /* Limit width for better readability */
margin: 0 auto;
} }
.small-icon .icon { .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 { .custom-footer {
font-size: 1.1em; font-size: 1.1em;
color: var(--neu-text-muted);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
@@ -33,9 +309,3 @@ code {
display: none !important; display: none !important;
} }
} }
.quote {
margin-left: 0;
padding: 0 1em;
border-left: 0.25em solid #ddd;
}
web/src/pages/About/index.js
+2 -2
View File
@@ -34,8 +34,8 @@ const About = () => {
<Header as='h3'>关于</Header> <Header as='h3'>关于</Header>
<p>可在设置页面设置关于内容，支持 HTML & Markdown</p> <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> </a>
</> </>
) : ( ) : (
web/src/pages/Home/index.js
+4 -4
View File
@@ -40,7 +40,7 @@ const Home = () => {
</> </>
) : ( ) : (
<> <>
<Segment> <Segment basic>
<Header as='h3'>系统状况</Header> <Header as='h3'>系统状况</Header>
<Grid columns={2} stackable> <Grid columns={2} stackable>
<Grid.Column> <Grid.Column>
@@ -54,10 +54,10 @@ const Home = () => {
<p> <p>
源码： 源码：
<a <a
href='https://github.com/songquanpeng/message-pusher' href='https://github.com/xyzmos/message-pusher'
target='_blank' target='_blank'
> >
https://github.com/songquanpeng/message-pusher https://github.com/xyzmos/message-pusher
</a> </a>
</p> </p>
<p>启动时间：{getStartTimeString()}</p> <p>启动时间：{getStartTimeString()}</p>