/* ========================================================================= Ebook Cloud · 主题框架样式 加载顺序：插件 es-frontend.css（组件层） → 本文件（框架层） ========================================================================= */ /* ---------- 基础 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #0f172a; background: #f7f8fc; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; } a { color: #4338ca; } a:hover { color: #3730a3; } button { font-family: inherit; } h1, h2, h3, h4 { line-height: 1.35; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; } .skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; clip: auto; background: #4338ca; color: #fff; padding: 10px 18px; border-radius: 8px; } /* 焦点可见性（无障碍） */ :focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; border-radius: 4px; } /* ---------- 容器 ---------- */ .es-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; } .es-container--narrow { max-width: 820px; } @media (max-width: 600px) { .es-container { padding: 0 16px; } } .site-main { min-height: 60vh; } /* ---------- 页头 ---------- */ .site-header { position: sticky; top: 0; z-index: 600; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #e8ebf3; } .site-header.is-scrolled { box-shadow: 0 10px 28px -22px rgba(15, 23, 42, .5); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .site-header__inner { display: flex; align-items: center; gap: 26px; height: 68px; } .site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .site-logo__mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #4338ca, #7c3aed); color: #fff; box-shadow: 0 8px 18px -10px rgba(67, 56, 202, .9); } .site-logo__text { display: flex; flex-direction: column; line-height: 1.25; } .site-logo__text strong { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; } .site-logo__text em { font-size: 11px; font-style: normal; color: #94a3b8; } .custom-logo { max-height: 42px; width: auto; } /* * 夜间专用 Logo 默认隐藏，仅在启用「白天 / 夜间模式」时由 dark.css 于夜间切换出来。 * 刻意写在常驻的 main.css（而非 dark.css）—— dark.css 只在日夜模式开启时才加载， * 若把隐藏规则放在那里，站长一旦关闭日夜模式，页头主图与夜间图会同时显示。 */ .es-logo__img--dark { display: none; } .site-nav { flex: 1; min-width: 0; } .site-nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .site-nav__menu li { position: relative; } .site-nav__menu > li > a { display: block; padding: 8px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: #334155; text-decoration: none; transition: .16s; } .site-nav__menu > li > a:hover { background: #f1f5f9; color: #4338ca; } .site-nav__menu .current-menu-item > a, .site-nav__menu .current_page_item > a { color: #4338ca; background: #eef2ff; font-weight: 600; } .site-nav__menu .sub-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid #e8ebf3; border-radius: 12px; box-shadow: 0 20px 40px -22px rgba(15, 23, 42, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s; } .site-nav__menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__menu .sub-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: #334155; text-decoration: none; } .site-nav__menu .sub-menu a:hover { background: #f1f5f9; color: #4338ca; } /* ---------- 主菜单角标 / 图标（外观 → 菜单里逐项设置） ---------- 图标沿用页面管理那套 SVG（class="es-icon es-nav-icon"，stroke=currentColor 跟随链接色）； 角标颜色由 PHP 注入 --nb-bg，这里只管形状排版，与顶端导航的小标识同款。 */ .site-nav__menu .es-nav-icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; } .es-menu-badge { display: inline-block; margin-left: 4px; padding: 0 3px; border-radius: 2.5px; background: var(--nb-bg, #2563eb); color: #fff; font-size: 8.5px; font-weight: 700; line-height: 1.5; letter-spacing: 0; white-space: nowrap; /* 正值＝相对基线上移，比原来的 3px 再抬高一档，贴在文字右上角更明显。 */ vertical-align: 6px; /* 动态闪烁：轻微明暗呼吸 + 微缩放，周期 1.8s；刻意不做位移，免得把菜单文字挤动。 */ animation: es-menu-badge-blink 1.8s ease-in-out infinite; will-change: opacity, filter; } /* 闪烁关键帧：全程只动 opacity / filter / scale，不改 background， 这样 getComputedStyle 量的配色仍是 PHP 注入的原色，视觉与断言都不受影响。 */ @keyframes es-menu-badge-blink { 0%, 100% { opacity: 1; filter: brightness(1.16); transform: scale(1); } 50% { opacity: .55; filter: brightness(.94); transform: scale(.94); } } /* 无障碍：系统开了「减少动态效果」就老老实实不闪。 */ @media (prefers-reduced-motion: reduce) { .es-menu-badge { animation: none; } } .site-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .site-nav-toggle { display: none; width: 40px; height: 40px; padding: 10px; background: none; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; flex-direction: column; gap: 4px; justify-content: center; } .site-nav-toggle span { display: block; height: 2px; background: #475569; border-radius: 2px; transition: .2s; } /* 头部钱包 */ .es-header-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 13.5px; font-weight: 700; text-decoration: none; border: 1px solid #fed7aa; } .es-header-wallet:hover { background: #ffedd5; color: #b45309; } .es-header-wallet strong { font-weight: 800; } .es-header-user { position: relative; } .es-header-user__btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #f1f5f9; text-decoration: none; color: #334155; font-size: 13.5px; font-weight: 600; } .es-header-user__btn:hover { background: #e2e8f0; color: #334155; } .es-header-user__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4338ca, #7c3aed); color: #fff; font-size: 13px; font-weight: 700; } .es-header-user__dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 178px; padding: 8px; background: #fff; border: 1px solid #e8ebf3; border-radius: 12px; box-shadow: 0 20px 44px -22px rgba(15, 23, 42, .38); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s; } .es-header-user:hover .es-header-user__dropdown, .es-header-user:focus-within .es-header-user__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .es-header-user__dropdown a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: #334155; text-decoration: none; } .es-header-user__dropdown a:hover { background: #f1f5f9; } .es-header-user__dropdown a.is-danger { color: #dc2626; } .es-header-user__level { margin: 2px 0 6px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--lv) 14%, #fff); color: var(--lv); } @media (max-width: 900px) { .site-nav { position: fixed; inset: 68px 0 auto; background: #fff; border-bottom: 1px solid #e8ebf3; padding: 12px 16px 20px; display: none; box-shadow: 0 24px 40px -28px rgba(15, 23, 42, .4); } .site-nav.is-open { display: block; } .site-nav__menu { flex-direction: column; align-items: stretch; gap: 2px; } .site-nav__menu > li > a { padding: 12px 14px; } .site-nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; } .site-nav-toggle { display: flex; } .site-header__inner { height: 60px; gap: 12px; } .site-logo__text em { display: none; } .site-header__actions .es-btn--ghost { display: none; } } @media (max-width: 560px) { .site-header__actions .es-header-user__name { display: none; } /* 移动端窄屏：隐藏次级控件，避免登录态下头部横向溢出（钱包余额 / 私信入口）。 消息铃铛（消息中心）、用户头像、语言切换、汉堡导航予以保留。 */ .site-header__actions .es-header-wallet, .site-header__actions .es-header-chat-open { display: none; } .site-branding .site-logo__text { display: none; } } @media (max-width: 380px) { /* 超窄屏（320 等）：头部「头像 + 铃铛 + 语言切换 + 汉堡」合计约 329px， 在 320 视口下会把头部撑出 ~9px 横向滚动。收紧头部与操作区间距即可， 不隐藏任何控件（语言切换等仍保留）。 */ .site-header__inner { gap: 8px; } .site-header__actions { gap: 6px; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 66px 0 78px; background: radial-gradient(1100px 460px at 78% -8%, rgba(124, 58, 237, .16), transparent 62%), radial-gradient(820px 420px at 8% 8%, rgba(67, 56, 202, .12), transparent 58%), linear-gradient(180deg, #fbfcff, #f3f5fc); } .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 52px; align-items: center; } .hero__pill { display: inline-block; padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef2ff; color: #4338ca; margin-bottom: 20px; } .hero__title { margin: 0 0 18px; font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.24; color: #0b1220; } .hero__title-em { background: linear-gradient(96deg, #4338ca 10%, #7c3aed 55%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__desc { margin: 0 0 28px; max-width: 540px; font-size: 16px; line-height: 1.85; color: #475569; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero__stats { display: flex; gap: 36px; list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid #e4e8f2; flex-wrap: wrap; } .hero__stats li { display: flex; flex-direction: column; gap: 2px; } .hero__stats strong { font-size: 22px; font-weight: 800; color: #0f172a; } .hero__stats span { font-size: 12.5px; color: #94a3b8; } /* Hero 元素样式变体（后台「首页操作 · Hero」逐项配置） */ .hero__inner--single { grid-template-columns: minmax(0, 1fr); } .hero__inner--single .hero__text { max-width: 760px; margin: 0 auto; text-align: center; } .hero__inner--single .hero__desc { margin-left: auto; margin-right: auto; } .hero__inner--single .hero__actions { justify-content: center; } .hero__inner--single .hero__stats { justify-content: center; border-top: none; padding-top: 0; } @media (max-width: 980px) { .hero__inner--single { grid-template-columns: 1fr; } } .hero__pill--solid { background: linear-gradient(96deg, #4338ca, #7c3aed); color: #fff; } .hero__pill--outline { background: transparent; color: #5b21b6; border: 1px solid #c4b5fd; } .hero__title-em--solid { background: none; -webkit-background-clip: initial; background-clip: initial; color: #7c3aed; } .hero__title-em--underline { background: none; -webkit-background-clip: initial; background-clip: initial; color: #0b1220; box-shadow: inset 0 -11px 0 rgba(124, 58, 237, .18); padding-bottom: 2px; } .hero__stats--line { border-top: none; padding-top: 0; gap: 0; } .hero__stats--line li { padding: 0 22px; border-left: 1px solid #e4e8f2; } .hero__stats--line li:first-child { border-left: none; padding-left: 0; } .hero__stats--card { border-top: none; padding: 0; gap: 14px; } .hero__stats--card li { background: #fff; border: 1px solid #e9edf5; border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 26px -20px rgba(15, 23, 42, .3); } .hero__art { position: relative; height: 400px; } .hero__book { position: absolute; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 28px 56px -26px rgba(15, 23, 42, .5); background: #e9edf5; transition: transform .5s cubic-bezier(.2, .8, .3, 1); } .hero__book img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__book--placeholder { background: linear-gradient(150deg, #e0e7ff, #c7d2fe); } .hero__book--1 { width: 178px; height: 250px; left: 12px; top: 66px; transform: rotate(-8deg); z-index: 3; } .hero__book--2 { width: 196px; height: 274px; left: 128px; top: 18px; transform: rotate(2deg); z-index: 2; } .hero__book--3 { width: 164px; height: 230px; left: 250px; top: 96px; transform: rotate(11deg); z-index: 1; } .hero__art:hover .hero__book--1 { transform: rotate(-11deg) translateY(-8px); } .hero__art:hover .hero__book--2 { transform: rotate(2deg) translateY(-12px); } .hero__art:hover .hero__book--3 { transform: rotate(14deg) translateY(-6px); } .hero__glow { position: absolute; width: 300px; height: 300px; right: 0; top: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .22), transparent 66%); filter: blur(28px); z-index: 0; } @media (max-width: 980px) { .hero { padding: 48px 0 58px; } .hero__inner { grid-template-columns: 1fr; gap: 40px; } .hero__title { font-size: 34px; } .hero__art { height: 300px; max-width: 380px; margin: 0 auto; width: 100%; } .hero__book--1 { width: 140px; height: 196px; left: 0; top: 52px; } .hero__book--2 { width: 152px; height: 214px; left: 96px; top: 12px; } .hero__book--3 { width: 128px; height: 180px; left: 194px; top: 76px; } } @media (max-width: 560px) { .hero__title { font-size: 27px; } .hero__desc { font-size: 15px; } .hero__stats { gap: 24px; } .hero__stats strong { font-size: 19px; } } /* ---------- 区块 ---------- */ .section { padding: 62px 0; } .section--alt { background: #fff; border-top: 1px solid #eef1f7; border-bottom: 1px solid #eef1f7; } .section--cats { padding: 34px 0 8px; } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } .section__head--center { justify-content: center; text-align: center; } .section__head--center > div { text-align: center; } .section__title { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.015em; } .section__desc { margin: 7px 0 0; font-size: 14.5px; color: #64748b; } .section__more { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .section__more:hover { text-decoration: underline; } /* ---------- 分类条 ---------- */ .cat-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .cat-strip__item { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: #fff; border: 1px solid #e8ebf3; border-radius: 12px; text-decoration: none; transition: .18s; } .cat-strip__item:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(67, 56, 202, .5); } .cat-strip__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: #4338ca; flex: 0 0 auto; } .cat-strip__name { font-size: 14.5px; font-weight: 600; color: #0f172a; flex: 1; } .cat-strip__count { font-size: 12px; color: #94a3b8; } /* ---------- 页头 ---------- */ .page-head { padding: 40px 0 10px; } .page-head__crumb { margin: 0 0 12px; font-size: 13px; color: #94a3b8; } .page-head__crumb a { color: #64748b; text-decoration: none; } .page-head__crumb a:hover { color: #4338ca; } .page-head__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; } .page-head__desc { margin: 10px 0 0; font-size: 14.5px; color: #64748b; max-width: 680px; } /* ---------- 电子书详情 ---------- */ .ebook-single { padding-bottom: 60px; } .ebook-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr) 344px; gap: 40px; align-items: start; padding: 34px 0 44px; } .ebook-hero__cover { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 56px -28px rgba(15, 23, 42, .55); background: #e9edf5; } .ebook-hero__cover img { display: block; width: 100%; } .ebook-hero__rating { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; background: rgba(15, 23, 42, .78); color: #fbbf24; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .ebook-hero__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .ebook-hero__title { margin: 0 0 12px; font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1.28; } .ebook-hero__author { margin: 0 0 20px; font-size: 14.5px; color: #475569; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ebook-hero__author .dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; } .ebook-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; } .ebook-hero__facts li { display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; background: #fff; border: 1px solid #e8ebf3; border-radius: 10px; min-width: 76px; } .ebook-hero__facts em { font-style: normal; font-size: 11.5px; color: #94a3b8; } .ebook-hero__facts strong { font-size: 14.5px; font-weight: 700; color: #0f172a; } .ebook-hero__excerpt { margin: 0 0 22px; font-size: 14.5px; line-height: 1.85; color: #475569; } .ebook-hero__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; } .ebook-hero__badges li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #475569; } .ebook-hero__badges svg { color: #16a34a; } .ebook-hero__buy { position: sticky; top: 92px; } .admin-bar .ebook-hero__buy { top: 124px; } @media (max-width: 1080px) { .ebook-hero { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; } .ebook-hero__buy { grid-column: 1 / -1; position: static; } } @media (max-width: 700px) { /* 单列表网格必须用 minmax(0,1fr) 而非 1fr（后者等价于 minmax(auto,1fr)）。 否则网格轨道最小宽度会被最宽子项（详情页购买卡 .es-buybox 的内容）撑到 ~349px， 在 360/320 窄屏下把整页横向撑出滚动条。配合子项 min-width:0 才能正确收缩。 */ .ebook-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px 0 34px; } .ebook-hero__cover, .ebook-hero__info, .ebook-hero__buy { min-width: 0; } .ebook-hero__cover { max-width: 230px; } .ebook-hero__title { font-size: 25px; } } /* ---------- 详情页正文区 ---------- */ .ebook-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; } @media (max-width: 980px) { .ebook-body { grid-template-columns: minmax(0, 1fr); } } .ebook-body__side { display: grid; gap: 18px; } /* 移动端修复：网格项必须能被压缩到「内容最小宽度」以下。 否则 nowrap 的标签导航（.es-tabs__nav，min-content≈400px）会把 整页撑宽到 418px，导致详情页出现横向滚动条。 */ .ebook-body__main, .ebook-body__side, .es-tabs { min-width: 0; } /* ---------- 标签页 ---------- */ .es-tabs { background: #fff; border: 1px solid #e8ebf3; border-radius: 14px; overflow: hidden; } .es-tabs__nav { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid #eef1f7; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; } .es-tabs__nav::-webkit-scrollbar { display: none; } .es-tabs__nav button { padding: 12px 20px; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 500; color: #64748b; cursor: pointer; white-space: nowrap; transition: .16s; } .es-tabs__nav button:hover { color: #4338ca; } .es-tabs__nav button.is-active { color: #4338ca; border-bottom-color: #4338ca; font-weight: 700; } .es-tabs__panel { display: none; padding: 26px 26px 30px; } .es-tabs__panel.is-active { display: block; animation: es-fade .22s ease; } @keyframes es-fade { from { opacity: 0; transform: translateY(4px); } } .es-table--kv th { width: 150px; background: #fafbfe; color: #64748b; font-weight: 500; } .es-preview { background: #fafbfe; border-left: 3px solid #c7d2fe; border-radius: 0 10px 10px 0; padding: 22px 26px; font-size: 15px; line-height: 2; color: #334155; font-family: Georgia, "Songti SC", "SimSun", serif; } .es-panel--contact { background: linear-gradient(160deg, #f8faff, #eef2ff); border-color: #e0e7ff; } /* 详情页右侧「自定义区块」：复用首页自定义组件的内容，容器换成 320px 窄侧栏，收一收排版防溢出 */ .es-panel--custom-block .es-panel__body--custom { font-size: 14px; line-height: 1.7; color: #334155; overflow-wrap: anywhere; } .es-panel--custom-block .es-panel__body--custom > *:first-child { margin-top: 0; } .es-panel--custom-block .es-panel__body--custom > *:last-child { margin-bottom: 0; } .es-panel--custom-block .es-panel__body--custom img, .es-panel--custom-block .es-panel__body--custom table, .es-panel--custom-block .es-panel__body--custom iframe { max-width: 100%; height: auto; } .es-panel--custom-block .es-panel__body--custom ul, .es-panel--custom-block .es-panel__body--custom ol { padding-left: 1.15em; } /* ---------- 小列表 ---------- */ .es-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .es-mini-list a { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; } .es-mini-list img { width: 56px; height: 78px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; } .es-mini-list__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .es-mini-list__text strong { font-size: 13.8px; font-weight: 600; color: #0f172a; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .es-mini-list a:hover .es-mini-list__text strong { color: #4338ca; } .es-mini-list__text em { font-style: normal; font-size: 12.5px; color: #d97706; font-weight: 700; } /* ---------- 正文排版 ---------- */ .entry-content { font-size: 15.5px; line-height: 1.9; color: #334155; } .entry-content > *:first-child { margin-top: 0; } .entry-content h2 { margin: 34px 0 14px; font-size: 21px; font-weight: 700; color: #0f172a; } .entry-content h3 { margin: 26px 0 12px; font-size: 17.5px; font-weight: 700; color: #0f172a; } .entry-content p { margin: 0 0 18px; } .entry-content ul, .entry-content ol { margin: 0 0 18px; padding-left: 22px; } .entry-content li { margin-bottom: 8px; } .entry-content img { border-radius: 10px; } .entry-content blockquote { margin: 22px 0; padding: 14px 22px; border-left: 3px solid #c7d2fe; background: #f8faff; border-radius: 0 10px 10px 0; color: #475569; } .entry-content code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .92em; } .entry-content pre { background: #0f172a; color: #e2e8f0; padding: 18px; border-radius: 10px; overflow: auto; } .entry-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; } .entry-content th, .entry-content td { border: 1px solid #e8ebf3; padding: 10px 13px; text-align: left; } .entry-content th { background: #fafbfe; font-weight: 600; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- CTA 横幅 ---------- */ .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: linear-gradient(120deg, #312e81, #4338ca 45%, #7c3aed); border-radius: 18px; padding: 40px 44px; color: #fff; box-shadow: 0 30px 60px -30px rgba(67, 56, 202, .8); } .cta-band__text h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; } .cta-band__text p { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, .85); } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 700px) { .cta-band { padding: 30px 24px; } .cta-band__text h2 { font-size: 20px; } } /* 紧凑版套餐卡（首页） */ .es-plans--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .es-plans--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .es-plans--compact { grid-template-columns: 1fr; } } /* 首页紧凑套餐卡：价格区改为两行网格 ——「原价 + 活动标签」在上、「现价 + 时长」在下。 窄卡内四个片段排不进一行，原实现会把时长单位压到 min-content 导致「/ 月」被拆行、 年度/终身卡片内容溢出。改用网格：固定首行高度让各卡现价水平对齐，单位禁止断行。 */ .es-plans--compact .es-plan__price { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 24px auto; grid-template-areas: "origin promo" "num unit"; align-items: baseline; column-gap: 8px; margin-bottom: 10px; } .es-plans--compact .es-plan__origin { grid-area: origin; margin: 0; align-self: end; white-space: nowrap; } .es-plans--compact .es-plan__promo { grid-area: promo; margin: 0; align-self: center; justify-self: end; } .es-plans--compact .es-plan__num { grid-area: num; } .es-plans--compact .es-plan__unit { grid-area: unit; align-self: baseline; justify-self: start; white-space: nowrap; } /* ---------- 页脚 ---------- */ .site-footer { background: #0f172a; color: #94a3b8; padding: 56px 0 28px; margin-top: 20px; } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(148, 163, 184, .16); } @media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__name { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: #fff; } .site-footer__desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.8; max-width: 320px; } .site-footer__contact { margin: 0; font-size: 13px; color: #cbd5e1; } .site-footer__col h3 { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: #e2e8f0; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .site-footer__col a { font-size: 13.5px; color: #94a3b8; text-decoration: none; } .site-footer__col a:hover { color: #a5b4fc; } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; flex-wrap: wrap; } .site-footer__bottom p { margin: 0; font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .site-footer__legal { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; } .site-footer__legal a { font-size: 12.5px; color: #94a3b8; text-decoration: none; } .site-footer__legal a:hover { color: #a5b4fc; } .site-footer__beian { margin: 0; font-size: 12.5px; } .site-footer__beian a { color: #94a3b8; text-decoration: none; } .site-footer__beian a:hover { color: #a5b4fc; } .site-footer__custom { font-size: 12.5px; color: #94a3b8; } /* PC 页脚：后台「移动端显示」未勾选时，移动端隐藏整块页脚（保留移动端底栏）。 */ @media (max-width: 768px) { body.pc-footer-mobile-hide .site-footer { display: none !important; } } /* ---------- 文章列表 ---------- */ .layout-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; padding-top: 44px; align-items: start; } @media (max-width: 940px) { .layout-with-sidebar { grid-template-columns: 1fr; } } .post-list { display: grid; gap: 20px; } .post-item { display: flex; gap: 20px; background: #fff; border: 1px solid #e8ebf3; border-radius: 14px; overflow: hidden; transition: .2s; } .post-item:hover { box-shadow: 0 20px 40px -26px rgba(15, 23, 42, .4); } .post-item__thumb { flex: 0 0 210px; overflow: hidden; } .post-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-item__body { padding: 20px 22px 20px 0; } @media (max-width: 640px) { .post-item { flex-direction: column; } .post-item__thumb { flex: none; max-height: 190px; } .post-item__body { padding: 0 20px 20px; } } .post-item__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .post-item__title a { color: #0f172a; text-decoration: none; } .post-item__title a:hover { color: #4338ca; } .post-item__meta { margin: 0 0 10px; font-size: 12.5px; color: #94a3b8; } .post-item__excerpt { margin: 0; font-size: 14px; line-height: 1.8; color: #64748b; } .widget { background: #fff; border: 1px solid #e8ebf3; border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; } .widget-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; } /* ---------- 搜索 ---------- */ .es-search-form { position: relative; display: flex; max-width: 460px; } .es-search-form__input { flex: 1; padding: 13px 48px 13px 18px; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 14.5px; background: #fff; transition: .16s; } .es-search-form__input:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, .12); } .es-search-form__btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 9px; background: #4338ca; color: #fff; display: grid; place-items: center; cursor: pointer; } .es-search-form__btn:hover { background: #3730a3; } /* ---------- 404 ---------- */ .error-404 { text-align: center; padding: 70px 0 40px; } .error-404__code { margin: 0; font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(120deg, #4338ca, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-404__title { margin: 12px 0 10px; font-size: 26px; font-weight: 800; } .error-404__desc { margin: 0 0 26px; font-size: 15px; color: #64748b; } .error-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .error-404__search { display: flex; justify-content: center; margin: 34px 0 50px; } .error-404__search .es-search-form { width: 100%; } .error-404__books { margin-top: 30px; text-align: left; } .error-404__books h2 { margin: 0 0 22px; font-size: 19px; font-weight: 700; text-align: center; } /* ---------- 无结果 ---------- */ .no-results { background: #fff; border: 1px solid #e8ebf3; border-radius: 14px; padding: 46px 30px; text-align: center; } .no-results h2 { margin: 0 0 10px; font-size: 20px; } .no-results p { margin: 0 0 22px; color: #64748b; } .no-results .es-search-form { margin: 0 auto 22px; } /* ---------- 评论区 ---------- */ .ebook-comments { margin-top: 44px; } .comment-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; } .comment-list .children { list-style: none; padding-left: 26px; margin-top: 16px; } .comment-body { background: #fff; border: 1px solid #e8ebf3; border-radius: 12px; padding: 18px 20px; } .comment-author { font-size: 14px; font-weight: 700; } .comment-meta { font-size: 12.5px; color: #94a3b8; margin-bottom: 8px; } .comment-content { font-size: 14.5px; color: #334155; } .comment-content p { margin: 0 0 10px; } .comment-form { background: #fff; border: 1px solid #e8ebf3; border-radius: 14px; padding: 22px 24px; } .comment-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 11px 14px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; } .comment-form textarea { min-height: 110px; } .comment-form input[type="submit"] { margin-top: 8px; padding: 11px 26px; border: 0; border-radius: 10px; background: #4338ca; color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; } .comment-form input[type="submit"]:hover { background: #3730a3; } /* ---------- WordPress 对齐类 ---------- */ .alignwide { margin-left: -60px; margin-right: -60px; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: 0 24px 16px 0; } .alignright { float: right; margin: 0 0 16px 24px; } .wp-caption-text, figcaption { font-size: 13px; color: #94a3b8; text-align: center; margin-top: 8px; } .screen-reader-text:focus { clip: auto !important; width: auto; height: auto; background: #4338ca; color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100000; } /* ---------- 打印 ---------- */ @media print { .site-header, .site-footer, .es-buybox, .es-sidebar, .hero__art { display: none !important; } body { background: #fff; } } /* ---------- 详情页：网盘下载区 ---------- */ .ebook-hero__pans { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; } .ebook-hero__pans-label { font-size: 12.5px; color: #64748b; } .ebook-hero__pans .es-pan-tag { font-size: 11px; padding: 4px 8px; border-radius: 5px; } .ebook-download { margin-top: 26px; scroll-margin-top: 90px; } .ebook-download .es-alert { margin: 0; } /* ---------- 详情页：文章声明（下载链接下方） ---------- */ .ebook-declaration { margin-top: 22px; padding: 18px 20px; background: #f8fafc; border: 1px solid #e8edf3; border-left: 3px solid #cbd5e1; border-radius: 10px; scroll-margin-top: 90px; } .ebook-declaration__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #334155; } .ebook-declaration__body { font-size: 13.5px; line-height: 1.75; color: #64748b; } .ebook-declaration__body p { margin: 0 0 8px; } .ebook-declaration__body p:last-child { margin-bottom: 0; } /* ---------- 底部固定下载条 ---------- */ /* 容器同时带 .es-buybox，是为了复用插件的「立即购买」交互，这里把它的卡片样式清掉。 */ .ebook-dock.es-buybox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; margin: 0; padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border: 0; border-top: 1px solid #e5e7eb; border-radius: 0; box-shadow: 0 -4px 20px rgba(15, 23, 42, .1); } .ebook-dock__inner { display: flex; align-items: center; gap: 14px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .ebook-dock__cover { flex: 0 0 auto; width: 38px; height: 50px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); } .ebook-dock__info { flex: 1 1 auto; min-width: 0; } .ebook-dock__title { display: block; font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ebook-dock__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 12px; color: #64748b; } .ebook-dock__meta > span + span::before { content: "·"; margin-right: 8px; color: #cbd5e1; } .ebook-dock__pans { display: inline-flex; gap: 3px; } .ebook-dock__pans i { font-style: normal; color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 11px; line-height: 1.6; } .ebook-dock__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-top: 0; } .ebook-dock__price { display: inline-flex; align-items: baseline; white-space: nowrap; } .ebook-dock__price b { font-size: 20px; font-weight: 800; color: #dc2626; } .ebook-dock__price em { font-style: normal; font-size: 12px; color: #dc2626; margin-left: 2px; } .ebook-dock__price s { font-size: 12px; color: #94a3b8; margin-left: 6px; } .ebook-dock__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #334155; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ebook-dock__btn:hover { background: #f8fafc; color: #0f172a; } .ebook-dock__btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; } .ebook-dock__btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .ebook-dock__btn--ghost { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } .ebook-dock__btn[disabled] { opacity: .6; cursor: not-allowed; } .ebook-dock__btn-hint { font-weight: 500; opacity: .92; } /* 给浮窗留出高度，别挡住页面底部内容 */ body.single-ebook { padding-bottom: 82px; } @media (max-width: 640px) { .ebook-dock__cover { display: none; } .ebook-dock__inner { padding: 0 12px; gap: 10px; } .ebook-dock__meta { display: none; } .ebook-dock__actions { gap: 8px; } .ebook-dock__btn { height: 38px; padding: 0 14px; font-size: 13px; } .ebook-dock__btn-hint { display: none; } .ebook-dock__price b { font-size: 17px; } } /* ========================================================================= 广告位 ========================================================================= */ .es-ad { margin: 18px 0; text-align: center; line-height: 0; } .es-ad > * { max-width: 100%; height: auto; } .es-ad:empty { display: none; } /* ========================================================================= 首页书籍搜索 ========================================================================= */ .section--search { padding: 10px 0 22px; } .book-search__form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; } .book-search__input { flex: 1 1 auto; height: 48px; padding: 0 18px; font-size: 15px; color: #0f172a; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 22px -18px rgba(15, 23, 42, .6); transition: border-color .15s ease, box-shadow .15s ease; } .book-search__input:focus { border-color: #4338ca; outline: none; box-shadow: 0 0 0 3px rgba(67, 56, 202, .15); } .book-search__btn { flex: 0 0 auto; height: 48px; padding: 0 26px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, #4338ca, #7c3aed); border: 0; border-radius: 12px; box-shadow: 0 10px 22px -12px rgba(67, 56, 202, .9); transition: transform .12s ease, box-shadow .12s ease; } .book-search__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(67, 56, 202, .95); } .book-search__btn:active { transform: translateY(0); } .book-search__hints { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 12px auto 0; padding: 0; list-style: none; color: #64748b; font-size: 13px; } .book-search__hints li { position: relative; padding-left: 16px; } .book-search__hints li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc; } @media (max-width: 640px) { .book-search__form { flex-direction: column; } .book-search__btn { width: 100%; } } /* ========================================================================= 搜索结果 ========================================================================= */ .es-search-meta { color: #64748b; font-size: 14px; margin: 6px 0 18px; } .es-search-empty { padding: 48px 0; } .es-search-empty__card { max-width: 520px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid #e8ebf3; border-radius: 16px; padding: 40px 28px; box-shadow: 0 18px 40px -30px rgba(15, 23, 42, .5); } .es-search-empty__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #4338ca; background: #eef0ff; } .es-search-empty__card h2 { font-size: 19px; margin: 0 0 10px; color: #0f172a; } .es-search-empty__card p { color: #64748b; margin: 0 0 22px; } .es-search-empty__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .es-search-empty__actions .es-btn { min-width: 140px; } /* ---------- 语言浮窗（独立专属浮窗：收起态胶囊「🌐 当前语言 ▾」+ 语言列表卡片，1.8.45） ---------- */ .es-lang-float { position: fixed; right: 14px; z-index: 9990; font-size: 13px; line-height: 1; } /* 位置：默认右下（避开右侧浮窗常用的中部位置） */ .es-lang-float--bottom { bottom: 24px; } .es-lang-float--center { top: 50%; transform: translateY(-50%); } .es-lang-float--top { top: 96px; } /* 收起态：胶囊按钮「地球 + 当前语言名 + 箭头」——一眼看出这是切换网站语言 */ .es-lang-float__toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 23, 42, .12); font: inherit; font-size: 13px; font-weight: 600; transition: color .16s, border-color .16s, box-shadow .16s, background-color .16s; } .es-lang-float__toggle:hover, .es-lang-float.is-open .es-lang-float__toggle { color: #4338ca; border-color: #c7d2fe; background: #f5f6ff; box-shadow: 0 8px 24px rgba(67, 56, 202, .20); } .es-lang-float__icon { display: inline-flex; } .es-lang-float__cur { white-space: nowrap; } .es-lang-float__cur-s { display: none; white-space: nowrap; } .es-lang-float__caret { display: inline-flex; transition: transform .16s; } .es-lang-float.is-open .es-lang-float__caret { transform: rotate(180deg); } /* 展开态：语言列表卡片，向左浮出 */ .es-lang-float__panel { position: absolute; right: calc(100% + 10px); bottom: 0; width: 210px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(8px); transition: opacity .16s, transform .16s, visibility .16s; } .es-lang-float.is-open .es-lang-float__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* 三种位置的面板对齐边各不相同（居中位置要额外带上 translateY(-50%)） */ .es-lang-float--center .es-lang-float__panel { top: 50%; bottom: auto; transform: translateY(-50%) translateX(8px); } .es-lang-float--center.is-open .es-lang-float__panel { transform: translateY(-50%) translateX(0); } .es-lang-float--top .es-lang-float__panel { top: 0; bottom: auto; } .es-lang-float__title { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px 9px; font-size: 12px; font-weight: 600; color: #94a3b8; letter-spacing: .02em; } .es-lang-float__title-icon { display: inline-flex; } .es-lang-float__title-icon svg { width: 14px; height: 14px; } .es-lang-float__list { list-style: none; margin: 0; padding: 0; } .es-lang-float__list > li { margin: 0; padding: 0; } /* 两段类名（0,2,0）：压住可能存在的正文链接下划线 / 链接色 */ .es-lang-float .es-lang-float__opt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; color: #334155; text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.2; transition: background-color .14s, color .14s; } .es-lang-float .es-lang-float__opt:hover { background: #f1f5f9; color: #4338ca; } .es-lang-float .es-lang-float__opt.is-current { background: #eef2ff; color: #4338ca; } .es-lang-float__opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .es-lang-float__opt-code { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #94a3b8; background: #f1f5f9; border-radius: 5px; padding: 2px 5px; } .es-lang-float .es-lang-float__opt.is-current .es-lang-float__opt-code { background: #e0e7ff; color: #4338ca; } .es-lang-float__opt-check { flex: 0 0 auto; display: none; } .es-lang-float .es-lang-float__opt.is-current .es-lang-float__opt-check { display: inline-flex; } /* 面板内的标签与下拉（沿用既有类名） */ .es-lang-switch__label { font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; user-select: none; } .es-lang-switch__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: #334155; padding: 6px 26px 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; transition: border-color .16s, box-shadow .16s; } .es-lang-switch__select:hover { border-color: #c7d2fe; } .es-lang-switch__select:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, .16); } .es-lang-switch__select option { color: #1e293b; } /* 窄屏：收起态只留「地球 + 语言简称」，长语言名不把胶囊撑宽 */ @media (max-width: 560px) { .es-lang-float { right: 10px; } .es-lang-float__cur { display: none; } .es-lang-float__cur-s { display: inline; } .es-lang-float__toggle { min-height: 38px; padding: 0 11px; gap: 6px; } .es-lang-float__panel { width: 188px; } .es-lang-float .es-lang-float__opt { padding: 10px; font-size: 14px; } } /* 移动端底部有固定导航（约 56px）时把语言浮窗抬起来，避免被盖住 */ @media (max-width: 767px) { body.has-es-botnav .es-lang-float--bottom { bottom: calc(56px + env(safe-area-inset-bottom) + 14px); } .es-lang-float--top { top: 72px; } } /* ---------- 语言切换组件（内嵌：短代码 [es_lang_switch] / 侧栏小工具） ---------- */ /* ⚠️ 按钮类一律写成「两段类名」(.es-lang-inline .es-lang-inline__btn = 0,2,0)： 页面正文里的 .entry-content a (0,1,1) 会给它加下划线与链接色，一段类名压不住。 */ .es-lang-inline { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; font-size: 13px; line-height: 1.4; } .es-lang-inline--center { justify-content: center; } .es-lang-inline--right { justify-content: flex-end; } .es-lang-inline__title { font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; } .es-lang-inline__current { font-size: 12.5px; color: #94a3b8; white-space: nowrap; } .es-lang-inline__list { display: flex; flex-wrap: wrap; gap: 6px; } .es-lang-inline .es-lang-inline__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #475569; text-decoration: none; text-underline-offset: 0; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: color .16s, border-color .16s, background-color .16s; } .es-lang-inline .es-lang-inline__btn:hover, .es-lang-inline .es-lang-inline__btn:focus { color: #4338ca; border-color: #c7d2fe; background: #f5f6ff; text-decoration: none; } .es-lang-inline .es-lang-inline__btn.is-current { background: #4338ca; border-color: #4338ca; color: #fff; font-weight: 600; } .es-lang-inline--dropdown .es-lang-inline__selectwrap { display: inline-flex; } .es-lang-inline .es-lang-inline__select { min-width: 148px; } /* 侧栏小工具内：撑满卡片宽度，样式与其它侧栏组件一致 */ .widget .es-lang-inline { margin: 0; } .widget .es-lang-inline .es-lang-inline__btn { background: #f8fafc; } @media (max-width: 560px) { .es-lang-inline { gap: 8px; } .es-lang-inline .es-lang-inline__btn { min-height: 32px; padding: 4px 11px; } .es-lang-inline--dropdown { flex-direction: column; align-items: flex-start; } /* 16px 可避免 iOS 聚焦