feat: 添加 PipexERP 企业统一品牌资源
- 创建品牌资源目录 brand/ - Logo SVG（主Logo、深色模式、图标、favicon） - 各子系统专用 Logo（AI-Proj、Gitea、Jenkins、Metabase、DBeaver） - CSS 变量文件 pipexerp-variables.css - 品牌条样式 pipexerp-brand-bar.css - 品牌 Header 模板 - 更新导航页 nav-home.html - 企业区域配色改为企业绿 #52c41a - 更新标题和 Logo 为 PipexERP - 添加 favicon 引用 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
qiudl
147
brand/css/pipexerp-brand-bar.css
Normal file
147
brand/css/pipexerp-brand-bar.css
Normal file
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* PipexERP Brand Bar
|
||||
* 统一品牌条样式 - 用于在各子系统顶部显示
|
||||
*/
|
||||
|
||||
.pipex-brand-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
||||
color: white;
|
||||
font-family: var(--pipex-font-family, 'Segoe UI', -apple-system, sans-serif);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.pipex-brand-bar--dark {
|
||||
background: linear-gradient(135deg, #135200 0%, #237804 100%);
|
||||
}
|
||||
|
||||
.pipex-brand-bar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Footer Brand */
|
||||
.pipex-brand-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--pipex-text-tertiary, #999);
|
||||
border-top: 1px solid var(--pipex-border, #e8e8e8);
|
||||
}
|
||||
|
||||
.pipex-brand-footer__logo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.pipex-brand-footer a {
|
||||
color: var(--pipex-primary, #52c41a);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pipex-brand-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Compact Brand Tag */
|
||||
.pipex-brand-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
background: var(--pipex-primary-bg, rgba(82, 196, 26, 0.1));
|
||||
border: 1px solid var(--pipex-primary, #52c41a);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--pipex-primary, #52c41a);
|
||||
}
|
||||
|
||||
.pipex-brand-tag__icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.pipex-brand-bar {
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pipex-brand-bar__nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
130
brand/css/pipexerp-variables.css
Normal file
130
brand/css/pipexerp-variables.css
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* PipexERP Brand CSS Variables
|
||||
* 企业统一品牌色彩系统
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* === Primary Colors (Enterprise Green) === */
|
||||
--pipex-primary: #52c41a;
|
||||
--pipex-primary-hover: #389e0d;
|
||||
--pipex-primary-active: #237804;
|
||||
--pipex-primary-light: #b7eb8f;
|
||||
--pipex-primary-lighter: #d9f7be;
|
||||
--pipex-primary-dark: #135200;
|
||||
--pipex-primary-bg: rgba(82, 196, 26, 0.1);
|
||||
|
||||
/* === Functional Colors === */
|
||||
--pipex-success: #52c41a;
|
||||
--pipex-info: #1890ff;
|
||||
--pipex-warning: #faad14;
|
||||
--pipex-error: #ff4d4f;
|
||||
|
||||
/* === Light Mode Colors === */
|
||||
--pipex-bg-primary: #ffffff;
|
||||
--pipex-bg-secondary: #fafafa;
|
||||
--pipex-bg-tertiary: #f5f5f5;
|
||||
--pipex-text-primary: #333333;
|
||||
--pipex-text-secondary: #666666;
|
||||
--pipex-text-tertiary: #999999;
|
||||
--pipex-border: #d9d9d9;
|
||||
--pipex-border-light: #e8e8e8;
|
||||
--pipex-shadow: rgba(0, 0, 0, 0.08);
|
||||
--pipex-shadow-hover: rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* === Component Specific === */
|
||||
--pipex-header-height: 56px;
|
||||
--pipex-sidebar-width: 240px;
|
||||
--pipex-border-radius: 8px;
|
||||
--pipex-border-radius-sm: 4px;
|
||||
--pipex-border-radius-lg: 12px;
|
||||
--pipex-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* === Typography === */
|
||||
--pipex-font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Noto Sans SC', sans-serif;
|
||||
--pipex-font-size-xs: 12px;
|
||||
--pipex-font-size-sm: 14px;
|
||||
--pipex-font-size-base: 16px;
|
||||
--pipex-font-size-lg: 18px;
|
||||
--pipex-font-size-xl: 20px;
|
||||
--pipex-font-size-2xl: 24px;
|
||||
--pipex-font-weight-normal: 400;
|
||||
--pipex-font-weight-medium: 500;
|
||||
--pipex-font-weight-semibold: 600;
|
||||
--pipex-font-weight-bold: 700;
|
||||
|
||||
/* === Spacing === */
|
||||
--pipex-spacing-xs: 4px;
|
||||
--pipex-spacing-sm: 8px;
|
||||
--pipex-spacing-md: 16px;
|
||||
--pipex-spacing-lg: 24px;
|
||||
--pipex-spacing-xl: 32px;
|
||||
--pipex-spacing-2xl: 48px;
|
||||
}
|
||||
|
||||
/* === Dark Mode Colors === */
|
||||
[data-theme="dark"],
|
||||
.dark,
|
||||
.pipex-dark {
|
||||
--pipex-primary: #73d13d;
|
||||
--pipex-primary-hover: #95de64;
|
||||
--pipex-primary-active: #52c41a;
|
||||
--pipex-primary-light: #237804;
|
||||
--pipex-primary-lighter: #135200;
|
||||
--pipex-primary-dark: #b7eb8f;
|
||||
--pipex-primary-bg: rgba(115, 209, 61, 0.15);
|
||||
|
||||
--pipex-bg-primary: #0d1117;
|
||||
--pipex-bg-secondary: #161b22;
|
||||
--pipex-bg-tertiary: #21262d;
|
||||
--pipex-text-primary: #e6edf3;
|
||||
--pipex-text-secondary: #8b949e;
|
||||
--pipex-text-tertiary: #6e7681;
|
||||
--pipex-border: #30363d;
|
||||
--pipex-border-light: #21262d;
|
||||
--pipex-shadow: rgba(0, 0, 0, 0.3);
|
||||
--pipex-shadow-hover: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* === Utility Classes === */
|
||||
.pipex-text-primary {
|
||||
color: var(--pipex-primary) !important;
|
||||
}
|
||||
|
||||
.pipex-bg-primary {
|
||||
background-color: var(--pipex-primary) !important;
|
||||
}
|
||||
|
||||
.pipex-border-primary {
|
||||
border-color: var(--pipex-primary) !important;
|
||||
}
|
||||
|
||||
.pipex-btn-primary {
|
||||
background: linear-gradient(135deg, var(--pipex-primary), var(--pipex-primary-hover));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--pipex-spacing-sm) var(--pipex-spacing-md);
|
||||
border-radius: var(--pipex-border-radius);
|
||||
cursor: pointer;
|
||||
transition: var(--pipex-transition);
|
||||
font-weight: var(--pipex-font-weight-medium);
|
||||
}
|
||||
|
||||
.pipex-btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--pipex-primary-hover), var(--pipex-primary-active));
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
|
||||
.pipex-card {
|
||||
background: var(--pipex-bg-primary);
|
||||
border: 1px solid var(--pipex-border);
|
||||
border-radius: var(--pipex-border-radius-lg);
|
||||
padding: var(--pipex-spacing-lg);
|
||||
box-shadow: 0 2px 8px var(--pipex-shadow);
|
||||
transition: var(--pipex-transition);
|
||||
}
|
||||
|
||||
.pipex-card:hover {
|
||||
box-shadow: 0 4px 16px var(--pipex-shadow-hover);
|
||||
border-color: var(--pipex-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user