feat: 添加绿色主题品牌图标与管理后台侧边栏UI样式
This commit is contained in:
seahi committed
1 parent
70470a5f6d
commit
d1abc1657d
3 files changed
+77
-42
No files matched your search
@@ -14,6 +14,24 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
|
||||
<link rel="icon" href="%sveltekit.assets%/brand/green-echo/favicon.svg" type="image/svg+xml" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="%sveltekit.assets%/brand/green-echo/favicon-32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="%sveltekit.assets%/brand/green-echo/favicon-16.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="48x48"
|
||||
href="%sveltekit.assets%/brand/green-echo/favicon-48.png"
|
||||
/>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
@@ -66,9 +66,13 @@
|
||||
class="header {scrolled ? 'scrolled' : ''} {isMobileMenuOpen ? 'mobile-menu-open' : ''}"
|
||||
>
|
||||
<div class="container wide">
|
||||
<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}
|
||||
>{$page.data.site?.title || 'BlogFlare'}</a
|
||||
>
|
||||
<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}>
|
||||
<img
|
||||
src={resolve('/brand/green-echo/icon-green.svg')}
|
||||
alt="Logo"
|
||||
style="height: 1.6rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
|
||||
/>{$page.data.site?.title || 'BlogFlare'}
|
||||
</a>
|
||||
<button
|
||||
class="mobile-menu-btn"
|
||||
onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
|
||||
@@ -149,7 +153,13 @@
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<h1 class="home-title">{$page.data.site?.title || 'BlogFlare'}</h1>
|
||||
<h1 class="home-title">
|
||||
<img
|
||||
src={resolve('/brand/green-echo/icon-green.svg')}
|
||||
alt="Logo"
|
||||
style="height: 2.2rem; margin-right: 0.8rem; vertical-align: text-bottom; margin-bottom: 0.2rem;"
|
||||
/>{$page.data.site?.title || 'BlogFlare'}
|
||||
</h1>
|
||||
<p class="home-subtitle">
|
||||
{$page.data.site?.description ||
|
||||
'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
|
||||
@@ -168,7 +178,13 @@
|
||||
<section>
|
||||
<p>
|
||||
© {new Date().getFullYear()}
|
||||
<span class="brand">{$page.data.site?.title || 'BlogFlare'}</span>
|
||||
<span class="brand">
|
||||
<img
|
||||
src={resolve('/brand/green-echo/icon-green.svg')}
|
||||
alt="Logo"
|
||||
style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.1rem;"
|
||||
/>{$page.data.site?.title || 'BlogFlare'}
|
||||
</span>
|
||||
</p>
|
||||
{#if uptimeText}
|
||||
<p>感谢陪伴：{uptimeText}</p>
|
||||
|
||||
@@ -48,7 +48,14 @@
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
|
||||
<a href={resolve('/admin')} class="brand">
|
||||
<img
|
||||
src={resolve('/brand/green-echo/icon-green.svg')}
|
||||
alt="Logo"
|
||||
style="height: 1.4rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
|
||||
/>
|
||||
{$page.data.site?.title || 'BlogFlare'} 控制台
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-action">
|
||||
@@ -157,7 +164,14 @@
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
<div class="header-spacer"></div>
|
||||
<span class="brand-mobile">{$page.data.site?.title || 'BlogFlare'} 控制台</span>
|
||||
<span class="brand-mobile">
|
||||
<img
|
||||
src={resolve('/brand/green-echo/icon-green.svg')}
|
||||
alt="Logo"
|
||||
style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
|
||||
/>
|
||||
{$page.data.site?.title || 'BlogFlare'} 控制台
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<main id="pjax-container" class="content-area">
|
||||
@@ -189,8 +203,8 @@
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-color, #ffffff);
|
||||
border-right: 2px solid var(--text-color);
|
||||
background: #111; /* Matching TOC background */
|
||||
border-right: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
@@ -204,13 +218,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
border-bottom: 2px solid var(--text-color);
|
||||
background: #0a0a0a; /* Slightly darker header */
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
@@ -218,13 +232,7 @@
|
||||
|
||||
.sidebar-action {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sidebar-action {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.btn-new {
|
||||
@@ -234,14 +242,14 @@
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color, #fff);
|
||||
background: #222;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border: 2px solid var(--text-color);
|
||||
border: 1px solid #333;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -262,7 +270,7 @@
|
||||
width: 4px;
|
||||
}
|
||||
.sidebar-scrollable::-webkit-scrollbar-thumb {
|
||||
background: var(--text-color);
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
@@ -270,14 +278,13 @@
|
||||
}
|
||||
|
||||
.nav-group-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -285,34 +292,29 @@
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 24px;
|
||||
color: var(--text-color);
|
||||
color: #b0b0b0; /* TOC text color */
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: var(--accent-color, #419b38);
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
border-left: 3px solid var(--accent-color, #419b38);
|
||||
color: var(--accent-color, #419b38);
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.nav-item.active {
|
||||
border-left: 2px solid var(--accent-color, #419b38);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 20px 24px;
|
||||
border-top: 2px solid var(--text-color);
|
||||
border-top: 1px solid #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
@@ -323,7 +325,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-color);
|
||||
color: #b0b0b0;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s;
|
||||
@@ -338,8 +340,7 @@
|
||||
.user-email {
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
color: var(--text-color);
|
||||
opacity: 0.8;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Main Wrapper */
|
||||
|
||||
Reference in new issue
Block a user