chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化调整卡片样式布局

Browse Source 
- 站点卡片改为紧凑布局并统一动态渲染
- 搜索框玻璃拟态与 Ctrl/Cmd+K 聚焦
This commit is contained in:
rbetree
2025-12-22 17:33:16 +08:00
parent ecc5e287b5
commit 2b366ae7ca
4 changed files with 310 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
assets/style.css
View File

@@ -698,9 +698,18 @@ body .content.expanded {
position: relative;
width: 100%;
max-width: 600px;
background-color: var(--sidebar-bg);
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-lg);
transition: background-color var(--transition-normal);
box-shadow: 0 4px 16px var(--shadow-color);
transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.search-box:focus-within {
border-color: var(--border-color);
box-shadow: 0 6px 24px var(--shadow-color);
}
.search-box::after {
@@ -735,14 +744,14 @@ body .content.expanded {
background-color: transparent;
color: var(--text-color);
font-size: 1rem;
transition: all var(--transition-normal);
box-shadow: 0 2px 8px var(--shadow-color);
transition: background-color var(--transition-normal), color var(--transition-normal);
box-shadow: none;
}
.search-box input:focus {
outline: none;
background-color: var(--secondary-bg);
box-shadow: 0 4px 12px var(--shadow-color);
background-color: rgba(var(--card-bg-rgb), 0.25);
box-shadow: none;
}
.search-box input::placeholder {
@@ -758,11 +767,16 @@ body .content.expanded {
transition: all 0.3s ease;
}
.search-box.has-results i {
.search-box:focus-within .search-icon,
.search-box:focus-within .search-engine-toggle {
color: var(--accent-color);
}
.search-box.has-results .search-icon {
color: var(--success-color);
}
.search-box.no-results i {
.search-box.no-results .search-icon {
color: var(--error-color);
}
@@ -799,7 +813,9 @@ body .content.expanded {
position: absolute;
top: calc(100% + 5px);
right: 1rem;
background-color: var(--sidebar-bg);
background: rgba(var(--card-bg-rgb), 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-md);
box-shadow: 0 4px 15px var(--shadow-color);
display: none;
@@ -1241,7 +1257,7 @@ body .content.expanded {
.category-level-4 .sites-grid {
margin-top: 0.8rem;
gap: 0.8rem;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* 响应式设计 - 嵌套结构 */
@@ -1305,8 +1321,8 @@ body .content.expanded {
/* 网站卡片网格 */
.sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-md);
position: relative;
z-index: 1;
width: 100%;
@@ -1316,14 +1332,14 @@ body .content.expanded {
.site-card {
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
border-radius: var(--radius-lg);
padding: var(--spacing-md);
padding: 0.85rem 1rem;
text-decoration: none;
color: inherit;
transition: all var(--transition-normal);
transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
text-align: left;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
@@ -1332,19 +1348,40 @@ body .content.expanded {
box-shadow: 0 4px 16px var(--shadow-color);
border: 1px solid var(--border-color);
z-index: 2;
overflow: hidden;
}
.site-card:hover {
transform: translateY(-4px);
transform: translateY(-3px);
background: var(--site-card-hover-bg);
border-color: var(--border-color);
}
.site-card i {
font-size: 1.8rem;
margin-bottom: 1rem;
.site-card-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
background: rgba(var(--card-bg-rgb), 0.35);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.site-card .site-icon {
font-size: 1.4rem;
color: var(--accent-color);
transition: all 0.3s ease;
transition: color 0.3s ease;
}
.site-card:hover .site-card-icon {
transform: scale(1.06);
}
.site-card:hover .site-icon {
color: var(--accent-hover);
}
/* 网站卡片 favicon 图片样式，与图标尺寸保持一致 */
@@ -1352,7 +1389,6 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-sm);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -1363,14 +1399,14 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-sm);
flex-shrink: 0;
vertical-align: middle;
text-align: center;
line-height: 1.8rem;
font-size: 1.8rem;
font-size: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: var(--accent-color);
}
/* 确保图标容器在加载过程中保持固定尺寸 */
@@ -1378,7 +1414,6 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: var(--spacing-md);
position: relative;
vertical-align: middle;
}
@@ -1427,19 +1462,20 @@ body .content.expanded {
opacity: 1;
}
.site-card:hover i {
transform: scale(1.1);
.site-card:hover .icon-placeholder,
.site-card:hover .icon-fallback {
color: var(--accent-hover);
}
.site-card:hover .favicon-icon {
transform: scale(1.1);
box-shadow: 0 0 0 1px var(--border-color);
.site-card-content {
flex: 1;
min-width: 0;
overflow: hidden;
}
.site-card h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
font-size: 0.95rem;
margin-bottom: 0.25rem;
color: var(--text-bright);
font-weight: 500;
letter-spacing: 0.3px;
@@ -1451,7 +1487,7 @@ body .content.expanded {
}
.site-card p {
font-size: 0.9rem;
font-size: 0.82rem;
color: var(--nav-item-color);
margin: 0;
line-height: 1.4;
@@ -1834,14 +1870,41 @@ body .content.expanded {
}
.site-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--spacing-md) var(--spacing-sm);
gap: 0.6rem;
}
.site-card i {
.site-card-icon {
width: 2.2rem;
height: 2.2rem;
}
.site-card .site-icon {
font-size: 1.5rem;
margin-bottom: 0.8rem;
}
.site-card .favicon-icon,
.site-card .icon-placeholder,
.site-card .icon-fallback,
.site-card .icon-container {
width: 1.5rem;
height: 1.5rem;
}
.site-card .icon-placeholder,
.site-card .icon-fallback {
line-height: 1.5rem;
font-size: 1.3rem;
}
.site-card-content {
width: 100%;
text-align: center;
}
.site-card h3 {
font-size: 0.95rem;
margin-bottom: 0.4rem;
@@ -1914,11 +1977,30 @@ body .content.expanded {
.site-card {
padding: 0.75rem 0.5rem;
gap: 0.5rem;
}
.site-card i {
.site-card-icon {
width: 2rem;
height: 2rem;
}
.site-card .site-icon {
font-size: 1.3rem;
margin-bottom: 0.6rem;
}
.site-card .favicon-icon,
.site-card .icon-placeholder,
.site-card .icon-fallback,
.site-card .icon-container {
width: 1.35rem;
height: 1.35rem;
}
.site-card .icon-placeholder,
.site-card .icon-fallback {
line-height: 1.35rem;
font-size: 1.2rem;
}
.site-card h3 {
@@ -1953,11 +2035,30 @@ body .content.expanded {
.site-card {
padding: 0.6rem 0.4rem;
gap: 0.45rem;
}
.site-card i {
.site-card-icon {
width: 1.9rem;
height: 1.9rem;
}
.site-card .site-icon {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.site-card .favicon-icon,
.site-card .icon-placeholder,
.site-card .icon-fallback,
.site-card .icon-container {
width: 1.25rem;
height: 1.25rem;
}
.site-card .icon-placeholder,
.site-card .icon-fallback {
line-height: 1.25rem;
font-size: 1.1rem;
}
.site-card h3 {