/* ============================================================ LoloNav 主题 - 文字显示优化版 ============================================================ 📌 使用方法： 在 index.html 的 中，取消下面这行的注释即可启用： 要关闭主题，注释掉上面那行即可。 ✅ 本文件完全独立，不影响 styles.css 和 tailwind.css ============================================================ */ /* ── 开关（默认启用）────────────────────────────────────── */ :root { --lolo-theme-enabled: 1; } /* ── 1. 文件夹卡片：标题完整显示 ─────────────────────────── */ .folder-card h2 { /* 覆盖原 truncate，允许换行 */ white-space: normal !important; text-overflow: unset !important; overflow: visible !important; /* 字体调大一点，更易读 */ font-size: 0.8rem !important; /* 原 text-xs = 0.75rem */ font-weight: 500 !important; line-height: 1.3 !important; /* 最多显示 2 行，超出省略 */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; /* 居中 */ text-align: center !important; /* 给标题更多空间 */ min-height: 2.6em !important; padding: 0 4px !important; word-break: break-word !important; } /* ── 2. 书签卡片：标题完整显示 ──────────────────────────── */ /* 书签卡片容器 - 改为上下布局（移动端友好） */ .cursor-pointer.flex.items-center.hover\:shadow-sm { flex-direction: row !important; /* 保持横向布局 */ align-items: center !important; } /* 书签标题 */ .cursor-pointer.flex.items-center.hover\:shadow-sm h2 { /* 覆盖 truncate */ white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; /* 稍微加大字体 */ font-size: 0.9rem !important; /* 原 text-sm = 0.875rem */ font-weight: 500 !important; line-height: 1.4 !important; /* 颜色加深，更清晰 */ color: #1f2937 !important; /* gray-800 */ } .dark .cursor-pointer.flex.items-center.hover\:shadow-sm h2 { color: #e5e7eb !important; /* gray-200 */ } /* 书签 URL */ .cursor-pointer.flex.items-center.hover\:shadow-sm p { white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.3 !important; } /* ── 3. 卡片内容区：给文字更多空间 ───────────────────────── */ .cursor-pointer.flex.items-center.hover\:shadow-sm .flex.flex-col.overflow-hidden { flex: 1 1 auto !important; min-width: 0 !important; /* 允许收缩 */ } /* ── 4. 文件夹卡片图标微调 ───────────────────────────────── */ .folder-card .folder__svg { width: 80px !important; /* 原 100px，缩小一点给标题腾空间 */ height:64px !important; /* 原 80px */ margin-bottom: 4px !important; } /* ── 5. 移动端适配 ───────────────────────────────────────── */ /* 手机端（≤640px）：文件夹卡片进一步优化 */ @media (max-width: 640px) { .folder-card h2 { font-size: 0.7rem !important; -webkit-line-clamp: 2 !important; min-height: 2.4em !important; padding: 0 2px !important; } .folder-card .folder__svg { width: 60px !important; height:48px !important; } /* 移动端书签卡片 */ .cursor-pointer.flex.items-center.hover\:shadow-sm h2 { font-size: 0.85rem !important; } .cursor-pointer.flex.items-center.hover\:shadow-sm p { font-size: 0.7rem !important; } } /* 平板（641-1024px） */ @media (min-width: 641px) and (max-width: 1024px) { .folder-card h2 { font-size: 0.75rem !important; } .folder-card .folder__svg { width: 70px !important; height:56px !important; } } /* ── 6. Separator 分隔线区域修复 ─────────────────────────── */ /* 隐藏 separator.site/folder 类的异常卡片 */ .grid > div:has(> a[href*="separator"]) { display: none !important; } /* 或者用文本匹配隐藏 */ .grid div:has(> p:-any-link):-has(> p:-only-of-type) { /* separator 卡片的特征：只有一个 p 标签且内容含 separator */ } /* 更精确地：隐藏包含 separator 文字的卡片 */ .grid div[class*="rounded-lg"]:has(p:text-contains("separator")) { display: none !important; } /* ── 7. 网格间距微调 ─────────────────────────────────────── */ #bookmarks > .grid { gap: 1rem !important; /* 原 gap-6=1.5rem，稍微紧凑 */ } @media (max-width: 640px) { #bookmarks > .grid:first-of-type { grid-template-columns: repeat(4, 1fr) !important; /* 手机端文件夹 4 列 */ } #bookmarks > .grid:last-of-type { grid-template-columns: repeat(2, 1fr) !important; /* 手机端书签 2 列 */ } } /* ── 8. 侧边栏导航项文字 ─────────────────────────────────── */ /* 侧边栏容器：增加宽度 */ nav.sidebar, #sidebar, aside[class*="sidebar"], [class*="sidebar"] { min-width: 200px !important; width: auto !important; max-width: 280px !important; } /* 侧边栏导航项：允许完整显示 */ nav li, nav li a, nav li span, nav li .truncate, #sidebar li, #sidebar li a, #sidebar li span, #sidebar li .truncate, [class*="sidebar"] li, [class*="sidebar"] li a, [class*="sidebar"] li span, [class*="sidebar"] li .truncate { white-space: normal !important; text-overflow: unset !important; overflow: visible !important; word-break: break-word !important; line-height: 1.4 !important; max-width: none !important; } /* 侧边栏导航项容器 */ nav li a, #sidebar li a, [class*="sidebar"] li a { display: flex !important; align-items: flex-start !important; padding: 8px 12px !important; height: auto !important; min-height: 40px !important; } /* 侧边栏图标 */ nav li svg, nav li img, #sidebar li svg, #sidebar li img, [class*="sidebar"] li svg, [class*="sidebar"] li img { flex-shrink: 0 !important; margin-top: 2px !important; } /* 侧边栏文字区域 */ nav li span:not(:has(svg)), #sidebar li span:not(:has(svg)), [class*="sidebar"] li span:not(:has(svg)) { flex: 1 !important; white-space: normal !important; } /* ── 9. Hover 效果增强 ───────────────────────────────────── */ .folder-card:hover h2 { color: #0BA665 !important; /* 主题绿色 */ transition: color 0.2s ease !important; } .dark .folder-card:hover h2 { color: #34d399 !important; /* green-400 */ } /* ── 10. Footer 微调 ─────────────────────────────────────── */ footer { font-size: 0.8rem !important; padding: 1rem 0 !important; }