/* Yaomagic Book Test —— 舞台感的深色界面 + 精装本质感的书。 * * 两套语汇，刻意对比： * · 界面 = 午夜黑 + 金，衬线标题。演出时在暗场里不晃眼，这是功能性的。 * · 书 = 米白纸色 + 细金线。像一本精装书，跟深色界面拉开。 * * 移动优先：所有可点区域 >= 44px，单手操作。 */ :root { --night: #0a0c12; --panel: #12151f; --panel-2: #171b27; --edge: #242a3a; --gold: #c9a227; --gold-soft: #d9bf76; --ivory: #f2ede1; --text: #e9e6df; --sub: #8d93a3; --red: #d05a52; --green: #56b880; --radius: 14px; --tap: 44px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; } * { box-sizing: border-box; } body { margin: 0; color: var(--text); font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; background: var(--night); } /* 舞台光晕 + 极淡的星点。纯 CSS，不引外部图。 */ .admin-body { min-height: 100vh; background: radial-gradient(900px 460px at 50% -10%, #1b2133 0%, transparent 62%), radial-gradient(2px 2px at 18% 22%, #ffffff14 50%, transparent 51%), radial-gradient(2px 2px at 74% 15%, #ffffff10 50%, transparent 51%), radial-gradient(1.5px 1.5px at 42% 38%, #ffffff0d 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 45%, #ffffff0d 50%, transparent 51%), var(--night); } [hidden] { display: none !important; } .shell { max-width: 900px; margin: 0 auto; padding: 22px 16px 40px; } .shell-narrow { max-width: 440px; } h1 { font: 600 1.7rem/1.2 var(--serif); margin: 4px 0 6px; letter-spacing: .01em; } h2 { font: 600 1.15rem/1.3 var(--serif); margin: 0 0 6px; } .eyebrow { font-size: .66rem; letter-spacing: .2em; font-weight: 700; color: var(--gold); margin: 0 0 8px; text-transform: uppercase; } .muted { color: var(--sub); margin: 0 0 16px; } .small { font-size: .82rem; } .error { color: var(--red); margin: 8px 0 0; min-height: 1em; font-size: .88rem; } .ok-note { color: var(--green); background: #16281f; border: 1px solid #24503a; border-radius: 10px; padding: 12px 14px; margin: 8px 0 0; font-size: .88rem; } /* 付款是当前唯一的下一步时用的卡片：把它当成一个大按钮，别再是一行小字 */ .pay-card { background: #1c2130; border: 1px solid var(--edge); border-radius: 12px; padding: 16px; margin: 8px 0 0; font-size: .92rem; text-align: center; } .pay-card p { margin: 0 0 12px; color: var(--text); } .pay-button { display: block; min-height: var(--tap); padding: 12px 16px; border-radius: 10px; background: var(--gold); color: #1a1405; font-weight: 700; text-decoration: none; text-align: center; } .pay-button:active { opacity: .84; } /* ---------------------------------------------------------------- 标识 */ .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; } .brand-logo { height: 34px; width: auto; display: block; } .brand-word { font: 700 .74rem/1 Inter, sans-serif; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; } /* 首页大标识 */ .hero { text-align: center; padding: 6vh 0 10px; } .hero .brand { justify-content: center; margin-bottom: 16px; } .hero .brand-logo { height: 62px; } .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); } .hero .tagline { color: var(--sub); margin: 0 0 4px; font-size: .95rem; } /* 金色细分隔线 */ .rule { height: 1px; border: 0; margin: 26px 0; background: linear-gradient(90deg, transparent, #c9a2274d, transparent); } /* ---------------------------------------------------------------- 卡片 */ .card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 22px 18px; margin-bottom: 14px; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; } details.card > summary { font: 600 1.05rem/1.3 var(--serif); cursor: pointer; list-style: none; padding: 2px 0; color: var(--text); } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::after { content: " ▾"; color: var(--sub); } details.card[open] > summary::after { content: " ▴"; } details.card > summary + * { margin-top: 14px; } /* ---------------------------------------------------------------- 页头 */ .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .topbar-main { min-width: 0; } .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .quiet-link { color: var(--gold-soft); font-weight: 650; font-size: .86rem; text-decoration: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; } .quiet-link:hover { color: var(--gold); text-decoration: underline; } .lang-switch { display: inline-flex; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; } .lang-option { background: none; border: 0; color: var(--sub); padding: 7px 11px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; border-radius: 0; min-height: auto; } .lang-option.is-active { background: var(--gold); color: #1a1405; } /* ---------------------------------------------------------------- 表单 */ form { display: grid; gap: 14px; } label { display: grid; gap: 6px; font-size: .84rem; font-weight: 650; } input, select { width: 100%; padding: 12px; min-height: var(--tap); border: 1px solid var(--edge); border-radius: 10px; background: var(--panel-2); font: inherit; color: var(--text); } input::placeholder { color: #5d6373; } input:focus, select:focus { outline: 1px solid var(--gold); outline-offset: 0; border-color: var(--gold); } select option { background: var(--panel-2); color: var(--text); } button { min-height: var(--tap); padding: 12px 16px; border: 0; border-radius: 10px; background: var(--gold); color: #1a1405; font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } button:active { opacity: .84; } .quiet { background: transparent; color: var(--text); border: 1px solid var(--edge); } .tiny { min-height: 36px; padding: 8px 11px; font-size: .8rem; } .wide { width: 100%; margin-top: 16px; } .secret-action { background: var(--red); color: #1a0605; } .link-danger { background: none; color: var(--red); border: 0; padding: 4px; font-size: .84rem; font-weight: 650; min-height: auto; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--edge); margin: 16px 0 18px; } .tab { flex: 1; background: none; color: var(--sub); border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 12px 8px; font-weight: 650; } .tab.is-active { color: var(--text); border-bottom-color: var(--gold); } /* ---------------------------------------------------------------- 选书 */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .chip { background: transparent; color: var(--sub); border: 1px solid var(--edge); border-radius: 999px; padding: 9px 16px; font-size: .85rem; font-weight: 650; min-height: 40px; } .chip.is-active { background: var(--gold); color: #1a1405; border-color: var(--gold); } /* 书 —— 精装本的质感：米白纸色、细金双线、衬线小型大写字。 */ .book-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } .book-cover { background: none; border: 0; padding: 0; display: block; text-align: left; min-height: auto; border-radius: 4px; } .cover-face { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 3 / 4.2; padding: 20px 15px; background: linear-gradient(178deg, #f6f2e8 0%, #ece5d6 100%); color: #23201a; border-radius: 3px 6px 6px 3px; /* 左侧书脊的暗边 + 右下投影，做出一本书立在那里的感觉 */ box-shadow: inset 5px 0 0 -2px #0000001f, inset 7px 0 6px -6px #00000038, 0 6px 16px #00000059; transition: transform .12s ease; } .book-cover:active .cover-face { transform: translateY(1px); } /* 封面上的细金双线框 */ .cover-face::before { content: ""; position: absolute; inset: 9px; border: 1px solid #b8992f4d; border-radius: 2px; } .cover-face::after { content: ""; position: absolute; inset: 13px; border: 1px solid #b8992f26; border-radius: 1px; } .book-cover.is-chosen .cover-face { box-shadow: inset 5px 0 0 -2px #0000001f, inset 7px 0 6px -6px #00000038, 0 0 0 2px var(--gold), 0 6px 18px #0000006b; } .cover-title { position: relative; z-index: 1; text-align: center; font: 600 .96rem/1.3 var(--serif); letter-spacing: .02em; overflow-wrap: anywhere; } .cover-author { position: relative; z-index: 1; text-align: center; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #7d6f52; margin-top: 10px; } .cover-meta { display: block; text-align: center; font-size: .72rem; color: var(--sub); padding-top: 9px; letter-spacing: .06em; } .book-cover.is-chosen .cover-meta { color: var(--gold-soft); font-weight: 700; } /* ---------------------------------------------------------------- 场次 */ .show-card { text-align: center; } .show-card h2 { margin-bottom: 16px; } .show-card img { width: min(100%, 250px); display: block; margin: 0 auto 14px; border-radius: 8px; padding: 10px; background: #fff; } .audience-link { display: block; font-size: .74rem; color: var(--sub); overflow-wrap: anywhere; text-decoration: none; margin-bottom: 16px; } .live-status { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; border-top: 1px solid var(--edge); padding-top: 14px; color: var(--sub); font-size: .85rem; } .live-status strong { color: var(--text); } /* 「秘密书已开启」和「还在等」必须一眼分得开 —— 开启是绿的、带点， 等待是灰的。演出时这一格和二维码在同一屏，扫一眼就要知道进行到哪一步。 */ .claim-state { display: inline-flex; align-items: center; gap: 7px; } .claim-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4c5262; } .claim-state.is-live { color: #a8e0c0; font-weight: 650; } .claim-state.is-live::before { background: var(--green); box-shadow: 0 0 8px #56b88099; } .claim-state.is-waiting { color: var(--sub); } /* 开关行：复选框 + 标题 + 一行小字说明 */ .switch-row { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: #0f121b; cursor: pointer; } .switch-row input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--gold); } .switch-row b { display: block; font-size: .86rem; font-weight: 650; color: var(--text); } .switch-row small { display: block; margin-top: 3px; color: var(--sub); font-size: .76rem; line-height: 1.45; } .switch-row:hover { border-color: #c9a22759; } /* 场次卡片里那一个更紧凑，不占地方 */ .switch-inline { margin: 10px 0 0; padding: 9px 12px; } .switch-inline b { font-size: .8rem; font-weight: 600; } /* 强调档位。三选一，用分段按钮而不是下拉框 —— 台上是单手操作， 三个选项直接摊开点一下最快，下拉框还要多两次点击。 */ .option-row { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: #0f121b; } .option-head b { display: block; font-size: .86rem; font-weight: 650; color: var(--text); } .option-head small { display: block; margin-top: 3px; color: var(--sub); font-size: .76rem; line-height: 1.45; } .seg { display: flex; gap: 6px; margin-top: 11px; } .seg button { flex: 1; min-height: 40px; padding: 9px 6px; background: transparent; color: var(--sub); border: 1px solid var(--edge); border-radius: 9px; font-size: .8rem; font-weight: 650; } .seg button.is-active { background: var(--gold); color: #1a1405; border-color: var(--gold); } /* 第一次使用的指路。只在还没生成过二维码时出现，之后自己消失 —— 一直挂着的提示，用过一次的人就再也不会读它了。 */ .first-run { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid #c9a22759; background: #c9a2270f; color: var(--gold-soft); font-size: .88rem; font-weight: 650; } /* ---------------------------------------------------------------- 表演教程 */ /* 一个问题一条，各自折叠。台上是「查」不是「读」， 所以默认全收起，问题本身就是索引。 */ .howto-list { display: grid; gap: 8px; margin-top: 12px; } .howto-item { border: 1px solid var(--edge); border-radius: 10px; background: #0f121b; } .howto-item > summary { cursor: pointer; list-style: none; padding: 13px 15px; font-size: .9rem; font-weight: 650; color: var(--text); min-height: var(--tap); display: flex; align-items: center; gap: 8px; } .howto-item > summary::-webkit-details-marker { display: none; } .howto-item > summary::after { content: "▾"; margin-left: auto; color: var(--sub); font-size: .8rem; } .howto-item[open] > summary::after { content: "▴"; } .howto-item[open] > summary { color: var(--gold-soft); } .howto-body { padding: 0 15px 14px; } .howto-body p { margin: 0 0 9px; color: var(--sub); font-size: .88rem; line-height: 1.6; } .howto-body p:last-child { margin-bottom: 0; } /* 点击位置示意图：小一点，别喧宾夺主 */ .tap-spot { width: 96px; height: auto; margin-top: 10px; display: block; } .page-monitor { /* 下边距和观众列表拉开一点 —— 它现在直接压在名单上面， 不留空的话报词那块和第一位观众会糊成一片。 */ margin: 16px 0 18px; padding: 20px 16px; border-radius: 12px; background: linear-gradient(180deg, #171b27, #0e111a); border: 1px solid #34302f; box-shadow: inset 0 0 0 1px #c9a2272e; } .page-monitor p { margin: 0; font-size: .64rem; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: var(--gold); } .page-monitor strong { display: block; margin: 12px 0 8px; overflow-wrap: anywhere; color: #fff; font: 600 clamp(2rem, 10vw, 3rem)/1.1 var(--serif); } /* 每页 3 个词的书：三行叠着放，缩一号字，首字母描金 —— 台上问出首字母就选定了 */ .page-monitor strong.multi { font-size: clamp(1.3rem, 6vw, 1.9rem); line-height: 1.35; } .page-monitor strong span { display: block; font: inherit; color: inherit; } .page-monitor strong.multi span::first-letter { color: var(--gold); } /* 关注作者：在登录框下面，要能看见但不能抢登录的戏，所以只用描边图标 + 细字 */ .social { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); } .social-note { margin: 0 0 12px; text-align: center; font-size: .78rem; letter-spacing: .04em; color: var(--sub); } .social-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--edge); color: var(--sub); font-size: .82rem; text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; } .social-link svg { width: 17px; height: 17px; flex: none; } /* 图标统一描边，只有实心的那几笔（相机小圆点、f）走填充 */ .social-link svg :not(.solid) { fill: none; stroke: currentColor; stroke-width: 1.6; } .social-link svg .solid { fill: currentColor; stroke: none; } .social-link:hover, .social-link:focus-visible { color: var(--gold); border-color: #c9a22759; background: #c9a2270f; } /* 远程换书还没落地：观众手上仍是正常书，这时候不能报词 —— 用比词小得多、 不刺眼的字提示一句，台上一眼能分清「还没换」和「词是什么」。 */ .page-monitor strong.pending-swap { font: 500 clamp(.95rem, 4vw, 1.15rem)/1.4 var(--serif); color: var(--gold); opacity: .78; margin: 14px 0 10px; } .page-monitor span { font-size: .84rem; color: var(--sub); } .page-monitor b { color: var(--text); } .show-list { display: grid; } .show-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--edge); font-size: .85rem; } .show-row:last-child { border-bottom: 0; } .show-meta { display: flex; align-items: center; gap: 9px; color: var(--sub); } /* ---------------------------------------------------------------- 观众 */ .viewer-list { display: grid; } .viewer-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--edge); } .viewer-row:last-child { border-bottom: 0; } .viewer-row strong { font-size: .9rem; font-weight: 650; } .viewer-row small { display: block; color: var(--sub); font-size: .78rem; margin-top: 2px; } .viewer-offline { opacity: .5; } .viewer-actions { display: flex; gap: 6px; } /* 秘密书按钮的三种状态。台上是扫一眼就要判断的，所以靠颜色分，不靠读字： 绿色 = 他手上确实是秘密书了，可以开始报词 琥珀 = 指令发出去了，等他翻页，**还不能报词** 红色 = 正常书（默认，见上面的 .secret-action） */ .secret-action.is-in { background: var(--green); color: #06180f; box-shadow: 0 0 0 1px #56b88066, 0 0 10px #56b88055; } .secret-action.is-pending { background: transparent; color: var(--gold); border: 1px solid #c9a22788; } /* 整行也淡淡染一下，几十位观众滚动时能一眼扫到是哪一行 */ .viewer-secret { background: #56b8800f; box-shadow: inset 2px 0 0 var(--green); } .viewer-secret strong { color: #a8e0c0; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } .dot-online { background: var(--green); box-shadow: 0 0 6px #56b88070; } .dot-offline { background: #4c5262; } /* ---------------------------------------------------------------- 教程 */ .guide-list { display: grid; gap: 20px; counter-reset: step; } .guide-step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .guide-step::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 50%; border: 1px solid #c9a22759; color: var(--gold); display: flex; align-items: center; justify-content: center; font: 600 .85rem/1 var(--serif); } .guide-step h3 { margin: 4px 0 4px; font: 600 .98rem/1.3 var(--serif); } .guide-step p { margin: 0; color: var(--sub); font-size: .89rem; } .guide-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--edge); color: var(--sub); font-size: .84rem; } .howto-note { margin: 8px 0 0; color: var(--gold-soft); font-size: .82rem; font-style: italic; } /* ---------------------------------------------------------------- 页脚 */ .site-footer { text-align: center; padding: 34px 16px 8px; border-top: 1px solid var(--edge); margin-top: 34px; } .site-footer a { color: var(--gold); text-decoration: none; font-size: .92rem; letter-spacing: .08em; font-weight: 650; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; } .site-footer a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- 账号管理 */ .pill { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: #232838; color: var(--sub); vertical-align: middle; } .pill-pending { background: #33290f; color: #e0bd5c; } .pill-active { background: #17301f; color: var(--green); } .pill-disabled { background: #331b19; color: var(--red); } .pill-admin { background: var(--gold); color: #1a1405; } .pending-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; margin-bottom: 9px; background: var(--panel-2); border: 1px solid #3a3520; border-radius: 10px; } .pending-actions { display: flex; gap: 8px; } .user-row { padding: 17px 0; border-bottom: 1px solid var(--edge); } .user-row:last-child { border-bottom: 0; } .user-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .user-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .user-controls label { font-size: .74rem; color: var(--sub); } .user-controls input, .user-controls select { padding: 9px; min-height: 40px; font-size: .88rem; } .user-features { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--edge); } .check { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; } .check input { width: 17px; height: 17px; min-height: auto; padding: 0; accent-color: var(--gold); } /* ---------------------------------------------------------------- 阅读器 */ .reader-body { min-height: 100dvh; background: #111b2d; color: #f7f1e5; } .reader { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: 20px; } .reader header, .reader footer { display: flex; justify-content: space-between; align-items: center; color: #d4c6a4; } .reader header span { touch-action: manipulation; user-select: none; } /* 右上角连点两下成功后，书名加粗几秒 —— 只是一个回执， 告诉台上的你「这一下收到了」，免得你不确定要不要再点一次。 不是状态标记：秘密书生效后书名照样是常规字重。 只改字重，不动颜色和字号 —— 观众手里没有第二台手机可比， 而且几秒后就收回去了。 */ #bookTitle.tap-ok { font-weight: 700; } .reader footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 6px; } .reader footer #pageLabel { grid-column: 2; text-align: center; color: #d4c6a4; font-size: .95rem; letter-spacing: .04em; } .pdf-viewport { min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; /* manipulation 本身就等于 pan-x pan-y pinch-zoom：平移和双指缩放都放行， 只掐掉双击缩放（那会和「点击翻页」打架）。挡住安卓缩放的不是这里， 是 read.html 里那个 maximum-scale=1，已经去掉了。 */ touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .pdf-viewport canvas { max-width: 100%; max-height: 100%; box-shadow: 0 12px 30px #0005; } .reader-error { padding: 48px; line-height: 1.5; color: #f7f1e5; } .nav { background: none; border: 0; padding: 10px 18px; color: #fff; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-height: var(--tap); } .nav:first-of-type { grid-column: 1; justify-self: start; } .nav:last-of-type { grid-column: 3; justify-self: end; } .nav svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .nav:disabled { opacity: .25; } /* 右上角透明触控区：秘密书就靠在这里连点两下触发。 96×44 —— 够大到闭着眼能点中，又不至于翻页时误碰。 */ #secretSpot { display: block; width: 96px; height: 44px; background: transparent; } /* ---------------------------------------------------------------- 宽屏 */ @media (min-width: 700px) { .shell { padding: 34px 24px 48px; } h1 { font-size: 2rem; } .card { padding: 26px; } .user-controls { grid-template-columns: repeat(4, 1fr); } .book-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); } .guide-list { grid-template-columns: 1fr 1fr; gap: 24px 30px; } } /* 转移秘密书等操作的即时反馈。用提示条而不是 alert —— 演出中弹窗会挡住画面。 */ .flash { margin: 0 0 14px; padding: 12px 15px; border-radius: 10px; background: #2a2410; border: 1px solid #5d4d18; color: var(--gold-soft); font-size: .88rem; } /* ---------------------------------------------------------------- 效果选择 */ .effect-grid { display: grid; gap: 14px; margin: 4px 0 8px; grid-template-columns: 1fr; } .effect-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px 20px; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); } .effect-card h2 { margin: 0 0 8px; } .effect-blurb { margin: 0; color: var(--sub); font-size: .9rem; } .effect-note { margin: 10px 0 0; color: var(--sub); font-size: .8rem; } /* 已拥有：金色描边，一眼看出这个能用 */ .effect-owned { border-color: #6d5a1e; background: linear-gradient(180deg, #191b24, var(--panel)); } .effect-open { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 12px 22px; border-radius: 10px; background: var(--gold); color: #1a1405; font-weight: 700; text-decoration: none; width: 100%; } .effect-buy { background: transparent; color: var(--gold); border: 1px solid #6d5a1e; } /* 未拥有 / 即将推出：压暗，但仍然看得清写了什么 */ .effect-soon { opacity: .62; } .effect-soon h2, .effect-locked h2 { color: var(--sub); } @media (min-width: 700px) { .effect-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } /* LOGO 是白色图案 + 真透明通道（RGBA），深色背景上直接就对， 不需要任何混合模式。 */ /* 套餐 / 升级到剧场版 */ .plan-card { margin-top: 6px; } .plan-card h2 { margin-bottom: 6px; } .plan-card .effect-blurb { margin-bottom: 16px; } .plan-card .effect-open { width: auto; padding: 12px 26px; } /* 顶栏里的链接按钮。 拿不到 button 那套元素选择器的样式， 所以单独写一份，视觉上和旁边的「退出」按钮对齐。 */ .topbar-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 12px 16px; border-radius: 10px; border: 1px solid var(--edge); background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap; } .topbar-btn:hover, .topbar-btn:focus-visible { border-color: var(--gold); color: var(--gold); } /* ---------------------------------------------------------------- 订阅期限 */ /* 即将到期：提醒但不惊吓 */ .sub-warn { border-color: #5d4d18; background: #221d0c; } .sub-warn p { margin: 0 0 14px; color: var(--gold-soft); font-size: .9rem; } /* 已过期：明显但不刺眼，重点是告诉他续费后一切照旧 */ .sub-expired { border-color: #6b2a26; background: #1f1210; } .sub-expired h2 { color: var(--red); } /* 后台里每个账号的到期行 */ .user-expiry { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; font-size: .84rem; } .user-expiry strong { font-weight: 650; color: var(--sub); } .extend-actions { display: flex; gap: 6px; } /* 控制台标题旁的剩余天数 */ .term-badge { display: inline-block; margin-left: 12px; vertical-align: middle; padding: 3px 11px; border-radius: 999px; font: 700 .68rem/1.5 Inter, sans-serif; letter-spacing: .04em; background: #232838; color: var(--sub); } .term-soon { background: #33290f; color: #e0bd5c; } .term-expired { background: #331b19; color: var(--red); } /* 注册验证码 */ .captcha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .captcha-image { height: 44px; width: 170px; border-radius: 8px; display: block; background: var(--panel-2); border: 1px solid var(--edge); } /* 后台的邮箱搜索 */ .search-box { margin-bottom: 10px; } /* ---------------------------------------------------------------- 账号折叠 */ /* 账号头部现在是