/* ============================================================ * NovelR · 小说聚合导航站主题样式 v1.0.10 * 设计规范： * 1. 单一 :root 令牌；全站配色只允许引用 var(--xxx)，本定义块之外禁止硬编码色值 * 2. mobile-first：基础样式即手机端，min-width 向上增强（700 / 960 两档） * 3. 纯手写 CSS 零依赖；汉堡菜单纯 CSS（checkbox + 兄弟选择器） * 4. 改动本文件后须同步升级 include.php 里的 NXR_CSS_VER 版本号 * ============================================================ */ :root{ --primary:#0f766e; --primary-dark:#115e59; --primary-soft:rgba(15,118,110,.08); --accent:#ea580c; --accent-dark:#c2410c; --text:#1f2937; --text-light:#6b7280; --border:#e5e7eb; --bg:#f6f8fa; --card:#ffffff; --footer-bg:#12333a; --footer-text:#9fb8b5; --footer-border:#2c5252; --radius:10px; --shadow:0 1px 3px rgba(15,23,42,.08); --shadow-lg:0 8px 24px rgba(15,23,42,.10); --container:1100px; } /* ---------- 基础 ---------- */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;color:var(--text);background:var(--bg);line-height:1.6} img{max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 16px} /* ---------- 页头 ---------- */ .site-header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border)} .header-in{display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap} .logo{font-size:20px;font-weight:700;color:var(--primary);white-space:nowrap} /* 汉堡：checkbox 必须在 DOM 上位于 .main-nav 之前，展开靠后续兄弟选择器 */ .nav-toggle{position:absolute;opacity:0;pointer-events:none} .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;cursor:pointer;border-radius:8px;margin-left:auto} .nav-burger:hover{background:var(--primary-soft)} .nav-burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;margin:0 auto} .main-nav{display:none;flex-basis:100%;order:5} .nav-toggle:checked ~ .main-nav{display:block} .main-nav ul{display:block} .main-nav a{display:block;padding:11px 4px;border-top:1px solid var(--border)} .main-nav li{position:relative} .main-nav ul ul{display:none} .main-nav li:hover>ul,.main-nav li:focus-within>ul{display:block} .main-nav ul ul a{padding-left:20px;color:var(--text-light)} /* ---------- 首页 hero ---------- */ .hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:var(--card);padding:40px 0;text-align:center} .hero h1{font-size:26px;margin-bottom:10px} .hero p{opacity:.85;margin-bottom:20px;font-size:14px} .hero-search{display:flex;max-width:520px;margin:0 auto} .hero-search input{flex:1;min-width:0;border:0;border-radius:var(--radius) 0 0 var(--radius);padding:12px 14px;font-size:15px;outline:none} .hero-search button{border:0;background:var(--accent);color:var(--card);padding:0 22px;font-size:15px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer} .hero-search button:hover{background:var(--accent-dark)} /* ---------- 区块通用 ---------- */ .page{padding:24px 0 40px} /* 区块间距用「上边距」而非下边距：这样接在任意非 section 元素（上一篇/下一篇、书卡网格、分页、空态） 之后都不会贴住；相邻兄弟外边距折叠 → 与 page-head 等自带下边距的元素也不会叠加过大。 容器内首个 section 清零（其上方间距由 .page 的 padding 提供）。 */ .section{margin-top:32px} .section:first-child{margin-top:0} .sec-head{margin-bottom:14px;border-left:4px solid var(--primary);padding-left:10px} .sec-head h2{font-size:19px} /* ---------- 题材网格 ---------- */ .kw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .kw-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:4px} .kw-card:hover{box-shadow:var(--shadow-lg)} .kw-name{font-weight:600} .kw-card:hover .kw-name{color:var(--primary)} .kw-count{font-size:12px;color:var(--text-light)} /* ---------- 书卡网格 ---------- */ /* 列宽用 minmax(0,1fr)：1fr 隐含 min-width:auto，长标题会把列顶宽（表现为"列不等宽"） */ .book-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} .book-card{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px} .book-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} /* 书名最多 2 行，超出截断（防超长书名撑高卡片、撑破列宽） */ .book-title{font-size:16px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word} .book-card:hover .book-title{color:var(--primary)} .book-intro{font-size:13px;color:var(--text-light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .book-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-light)} .book-meta em{font-style:normal;color:var(--primary);white-space:nowrap} /* 封面（真图或渲染书封）：统一 3:4 裁切 */ .book-cover,.post-cover{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)} .book-cover img,.post-cover img{width:100%;height:100%;object-fit:cover;display:block} /* 有封面卡：手机端左图右文（图占左列，文三行占右列），≥700px 切上图下文 */ .book-card.has-cover{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 12px;align-items:start} .book-card.has-cover .book-cover{grid-column:1;grid-row:1 / span 3;width:88px} .book-card.has-cover .book-title,.book-card.has-cover .book-intro,.book-card.has-cover .book-meta{grid-column:2} /* ---------- 文字书链（首页热门榜 / 文章页相关推荐，同一组件） ---------- */ /* 形态：多列纯文字书名链，无序号、不出图； 目的：以远低于图片卡的面积容纳更多书名链接（内链密度优先） */ /* 列宽 minmax(0,1fr) + li min-width:0 双保险：保证各列严格等宽，长书名走省略号 */ .book-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;list-style:none;padding:0} .book-links li{min-width:0} .book-links a{display:block;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--text);transition:background .15s,color .15s} .book-links a:hover{background:var(--primary-soft);color:var(--primary)} .book-links a span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- 词链块 ---------- */ .kw-links{display:flex;flex-wrap:wrap;gap:8px} .kw-links a{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:5px 14px;font-size:13px;color:var(--text-light)} .kw-links a:hover{color:var(--primary);border-color:var(--primary)} /* ---------- 友情链接 ---------- */ /* 结构：