yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全面模仿 VMRack 控制台风格
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
布局:
- CSS Grid: 228px侧边栏 + 1fr内容, 64px顶栏 + 1fr内容
- 淡蓝渐变背景 linear-gradient(135deg)
- 磨砂玻璃浮岛 backdrop-filter:blur(12px)
- 侧边栏/内容区: 圆角20px, 半透白背景, 20px间距

风格:
- 透明顶栏(无背景无阴影)
- 顶栏右侧圆形磨砂按钮
- 胶囊菜单高亮(44px高/10px圆角)
- 配色: #1D2129/#4E5969/#165DFF
This commit is contained in:
yiqiu
2026-03-20 08:58:31 +08:00
parent d4136cc376
commit 42e36cde07
1 changed files with 101 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
clientarea/hgcloud/css/dark-override.css
View File

@@ -7,71 +7,103 @@
* 在 header.php 中引入，影响所有登录后页面 * 在 header.php 中引入，影响所有登录后页面
*/ */
/* ============ 基础层 ============ */ /* ============ 基础层 — 渐变背景 ============ */
html, body { html, body {
background-color: #F5F7FA !important; background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 30%, #dbeafe 60%, #e0f2fe 100%) !important;
color: #1a1a1a !important; background-attachment: fixed !important;
color: #1D2129 !important;
min-height: 100vh;
} }
#mainLoading { #mainLoading {
background: #FFFFFF !important; background: rgba(255,255,255,0.6) !important;
} }
#mainLoading.pro-des::before { #mainLoading.pro-des::before {
background: #FFFFFF !important; background: rgba(255,255,255,0.6) !important;
} }
.template:first-child { .template:first-child {
display: none; display: none;
} }
/* ============ 布局：CSS Grid 全宽顶栏 ============ */ /* ============ 布局：CSS Grid 全宽顶栏 + 浮岛间距 ============ */
/* 外层容器 → Grid: 第一行顶栏全宽, 第二行 aside+main */
.template > .el-container { .template > .el-container {
display: grid !important; display: grid !important;
grid-template-columns: 190px 1fr !important; grid-template-columns: 228px 1fr !important;
grid-template-rows: 60px 1fr !important; grid-template-rows: 64px 1fr !important;
min-height: 100vh !important; min-height: 100vh !important;
width: 100% !important; width: 100% !important;
gap: 0 !important;
background: transparent !important;
} }
/* 内层 el-container: display:contents 让子元素直接参与外层 grid */ /* 内层 el-container: display:contents */
.template > .el-container > .el-container { .template > .el-container > .el-container {
display: contents !important; display: contents !important;
} }
/* top-menu 组件的 <div> 包裹层也 display:contents */ /* top-menu 组件的 <div> 包裹层 display:contents */
.template > .el-container > .el-container > div { .template > .el-container > .el-container > div {
display: contents !important; display: contents !important;
} }
/* el-header: 跨两列, 第一行, 全宽 */ /* ============ 顶栏 — 透明 ============ */
.el-header { .el-header {
grid-column: 1 / -1 !important; grid-column: 1 / -1 !important;
grid-row: 1 !important; grid-row: 1 !important;
width: 100% !important; width: 100% !important;
height: 60px !important; height: 64px !important;
position: relative !important; position: relative !important;
background: #FFFFFF !important; background: transparent !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important; box-shadow: none !important;
border-bottom: 1px solid rgba(0,0,0,0.06); border-bottom: none !important;
z-index: 100 !important; z-index: 100 !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
padding: 0 24px !important;
} }
/* el-aside: 第一列, 第二行, 背景撑满 */ /* ============ 侧边栏 — 磨砂玻璃浮岛 ============ */
.template > .el-container > .el-aside { .template > .el-container > .el-aside {
grid-column: 1 !important; grid-column: 1 !important;
grid-row: 2 !important; grid-row: 2 !important;
width: 228px !important;
margin: 0 0 20px 20px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
min-height: 0 !important; min-height: 0 !important;
} }
/* el-main: 第二列, 第二行, 背景色 */ /* 隐藏侧边栏原有 logo (已移到顶栏) */
.el-aside > a:first-child {
display: none !important;
}
/* 侧边栏菜单上边距 */
.el-aside .menu-top {
margin-top: 8px !important;
padding: 0 12px !important;
}
/* ============ 主内容区 — 磨砂玻璃浮岛 ============ */
.el-main { .el-main {
grid-column: 2 !important; grid-column: 2 !important;
grid-row: 2 !important; grid-row: 2 !important;
background-color: #F5F7FA !important; margin: 0 20px 20px 20px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
padding: 24px !important;
min-height: 0 !important; min-height: 0 !important;
} }
@@ -79,65 +111,68 @@ html, body {
.header-logo-link { .header-logo-link {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 16px; margin-right: 20px;
cursor: pointer; cursor: pointer;
text-decoration: none;
} }
.header-logo { .header-logo {
height: 32px; height: 36px;
width: auto; width: auto;
} }
/* ============ 侧边栏 ============ */ /* ============ 顶栏右侧按钮 — 圆形磨砂 ============ */
/* 隐藏侧边栏原有 logo (已移到顶栏) */ .header-right .header-right-item .right-item,
.el-aside > a:first-child { .header-right .header-right-item .el-dropdown-header {
display: none !important; background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 50% !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
transition: all 0.2s ease !important;
} }
.el-aside { .header-right .header-right-item .right-item:hover,
background: #FFFFFF !important; .header-right .header-right-item .el-dropdown-header:hover {
border-right: 1px solid rgba(0,0,0,0.06) !important; background: rgba(255, 255, 255, 0.85) !important;
overflow-y: auto !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
overflow-x: hidden !important;
}
/* 侧边栏菜单不再需要 86px 的 logo 占位 */
.el-aside .menu-top {
margin-top: 12px !important;
} }
.ali-logo { .ali-logo {
filter: none; filter: none;
} }
/* ============ 侧边栏菜单 — 胶囊高亮（白底） ============ */ /* ============ 侧边栏菜单 — 胶囊高亮 ============ */
.menu-top .el-menu-item { .menu-top .el-menu-item {
color: #5f6368 !important; color: #4E5969 !important;
border-radius: 8px !important; border-radius: 10px !important;
margin: 2px 0 !important; margin: 2px 0 !important;
height: 44px !important;
line-height: 44px !important;
transition: all 0.2s !important; transition: all 0.2s !important;
border-bottom: none !important; border-bottom: none !important;
} }
.menu-top .el-menu-item i { .menu-top .el-menu-item i {
color: #5f6368 !important; color: #4E5969 !important;
transition: color 0.2s !important; transition: color 0.2s !important;
} }
.menu-top .el-menu-item:hover { .menu-top .el-menu-item:hover {
background-color: rgba(0, 0, 0, 0.04) !important; background-color: rgba(22, 93, 255, 0.04) !important;
color: #1a1a1a !important; color: #1D2129 !important;
border-bottom: none !important; border-bottom: none !important;
} }
.menu-top .el-menu-item:hover i { .menu-top .el-menu-item:hover i {
color: #1a1a1a !important; color: #1D2129 !important;
} }
.menu-top .el-menu-item.is-active { .menu-top .el-menu-item.is-active {
background-color: rgba(22, 93, 255, 0.08) !important; background-color: rgba(22, 93, 255, 0.08) !important;
color: #165DFF !important; color: #165DFF !important;
border-bottom: none !important; border-bottom: none !important;
font-weight: 500 !important;
} }
.menu-top .el-menu-item.is-active i { .menu-top .el-menu-item.is-active i {
@@ -146,32 +181,35 @@ html, body {
/* 子菜单 */ /* 子菜单 */
.menu-top .el-submenu__title { .menu-top .el-submenu__title {
color: #5f6368 !important; color: #4E5969 !important;
border-radius: 8px !important; border-radius: 10px !important;
height: 44px !important;
line-height: 44px !important;
transition: all 0.2s !important; transition: all 0.2s !important;
} }
.menu-top .el-submenu__title i { .menu-top .el-submenu__title i {
color: #5f6368 !important; color: #4E5969 !important;
} }
.menu-top .el-submenu__title:hover { .menu-top .el-submenu__title:hover {
background-color: rgba(0, 0, 0, 0.04) !important; background-color: rgba(22, 93, 255, 0.04) !important;
color: #1a1a1a !important; color: #1D2129 !important;
} }
.menu-top .el-submenu__title:hover i { .menu-top .el-submenu__title:hover i {
color: #1a1a1a !important; color: #1D2129 !important;
} }
.menu-top .el-submenu .el-menu-item:hover { .menu-top .el-submenu .el-menu-item:hover {
background-color: rgba(0, 0, 0, 0.04) !important; background-color: rgba(22, 93, 255, 0.04) !important;
color: #1a1a1a !important; color: #1D2129 !important;
} }
.menu-top .el-submenu .el-menu-item.is-active { .menu-top .el-submenu .el-menu-item.is-active {
background-color: rgba(22, 93, 255, 0.08) !important; background-color: rgba(22, 93, 255, 0.08) !important;
color: #165DFF !important; color: #165DFF !important;
font-weight: 500 !important;
} }
/* Element UI 菜单整体背景 */ /* Element UI 菜单整体背景 */
@@ -184,7 +222,7 @@ html, body {
.el-header .search-value, .el-header .search-value,
.el-header .search-name { .el-header .search-name {
color: #8B949E !important; color: #4E5969 !important;
} }
.header-right .header-right-item .el-dropdown-header .head-box { .header-right .header-right-item .el-dropdown-header .head-box {
@@ -192,41 +230,38 @@ html, body {
} }
.header-right .header-right-item .un-login { .header-right .header-right-item .un-login {
color: #5f6368 !important; color: #4E5969 !important;
} }
.header-right .header-right-item .cloum-line { .header-right .header-right-item .cloum-line {
border-color: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.06) !important;
} }
.header-left .el-input input { .header-left .el-input input {
background: transparent !important; background: rgba(255,255,255,0.4) !important;
color: #1a1a1a !important; color: #1D2129 !important;
border-radius: 10px !important;
} }
/* 顶栏图标颜色 */ /* 顶栏图标颜色 */
.header-right .header-right-item i { .header-right .header-right-item i {
color: #5f6368 !important; color: #4E5969 !important;
} }
.header-right .header-right-item i:hover { .header-right .header-right-item i:hover {
color: #165DFF !important; color: #165DFF !important;
} }
/* ============ 主内容区 ============ */
.el-main {
background: #F5F7FA !important;
}
.main-card { .main-card {
background: #FFFFFF !important; background: rgba(255,255,255,0.7) !important;
color: #1a1a1a !important; color: #1D2129 !important;
border-radius: 12px !important; border-radius: 16px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
border: 1px solid rgba(255,255,255,0.8);
} }
.main-card-title { .main-card-title {
color: #1a1a1a !important; color: #1D2129 !important;
} }
/* ============ Element UI 输入框 ============ */ /* ============ Element UI 输入框 ============ */