:root{ /* ====== 默认主题（深蓝） ====== */ --bg:#0b1230; --bg2:#06122a; /* 渐变第二层 */ --card:#0f1b33; --text:#e8f1ff; --muted:rgba(232,241,255,.75); --line:rgba(255,255,255,.12); --btn:#2c7dff; /* ✅ 主题强调色（让切换更明显） */ --accent:#2c7dff; /* ====== 尺寸开关 ====== */ --cover-h: 210px; --avatar-size: 96px; --logo-size: 46px; --dash-logo-size: 44px; --preview-size: 110px; --row-min-height: 74px; /* ====== 头像在封面里的位置 ====== */ --avatar-top: 78px; /* ====== 背景模式：纯色 or 渐变（默认渐变） ====== */ --use-gradient-bg: 1; /* 1=渐变 0=纯色 */ } /* ========================= 🎨 预置主题（切 body 的 class）用法：... ========================= */ body.theme-blue{ --bg:#0b1230; --bg2:#06122a; --card:#0f1b33; --btn:#2c7dff; --accent:#2c7dff; } body.theme-purple{ --bg:#160a2c; --bg2:#090a22; --card:#16123a; --btn:#7b5cff; --accent:#a78bfa; } body.theme-green{ --bg:#041e17; --bg2:#031322; --card:#0b2a22; --btn:#22c55e; --accent:#22c55e; } body.theme-red{ --bg:#220710; --bg2:#071022; --card:#2a0b16; --btn:#ff3b6b; --accent:#fb7185; } body.theme-graphite{ --bg:#070a12; --bg2:#02040a; --card:#121826; --btn:#3b82f6; --accent:#93c5fd; } *{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;} a{color:inherit} /* ✅ 全站背景（全屏） */ body{ margin:0; min-height:100vh; color:var(--text); background-color: var(--bg); background-image: radial-gradient(900px 520px at 20% 8%, rgba(255,255,255, calc(.08 * var(--use-gradient-bg))), transparent 55%), radial-gradient(700px 420px at 85% 18%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); } @supports not (background: color-mix(in srgb, #000 50%, #fff 50%)){ body{ background-image: radial-gradient(900px 520px at 20% 8%, rgba(255,255,255, calc(.08 * var(--use-gradient-bg))), transparent 55%), radial-gradient(700px 420px at 85% 18%, rgba(44,125,255, calc(.14 * var(--use-gradient-bg))), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); } } /* ====== 登录/注册 ====== */ .auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;} .card{width:360px;max-width:92vw;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:18px;} .card h1{margin:0 0 12px} label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px;} input,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#34496d;color:var(--text);} .btn{display:inline-block;border:0;background:var(--btn);color:white;padding:10px 14px;border-radius:10px;cursor:pointer;margin-top:12px;} .btn.ghost{background:transparent;border:1px solid var(--line);} .err{background:rgba(255,0,0,.12);border:1px solid rgba(255,0,0,.25);padding:8px 10px;border-radius:10px;} .ok{background:rgba(0,255,170,.12);border:1px solid rgba(0,255,170,.25);padding:8px 10px;border-radius:10px;margin:10px 0;} .muted{color:var(--muted);} /* ====== 后台 ====== */ .dash{min-height:100vh;} .topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.04);} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;max-width:1100px;margin:0 auto;} .panel{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:14px;} .panel h2{margin:0 0 10px} .panel h3{margin:10px 0 8px} .preview{ width:var(--preview-size); height:var(--preview-size); border-radius:16px; object-fit:cover; border:1px solid var(--line); margin-top:10px } hr{border:0;border-top:1px solid var(--line);margin:14px 0;} .row{display:flex;gap:10px;align-items:center} .row input,.row select{flex:1} .stack label{margin-top:10px} .list{list-style:none;padding:0;margin:10px 0 0} .list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);} .list li:last-child{border-bottom:0} .danger{color:#ff7b7b;text-decoration:none} /* ====== 后台：推广列表（一行一个） ====== */ .promo-list{margin-top:10px;display:flex;flex-direction:column;gap:10px;} .promo-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 12px;border:1px solid var(--line);border-radius:14px; background:rgba(0,0,0,.10); } .promo-left{display:flex;align-items:center;gap:12px;min-width:0;} .promo-logo{ width:var(--dash-logo-size); height:var(--dash-logo-size); border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.12); } .promo-meta{min-width:0;} .promo-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;} .promo-sub{margin-top:4px;display:flex;align-items:center;gap:10px;} .promo-actions{display:flex;align-items:center;gap:10px;} .tag{display:inline-flex;align-items:center;justify-content:center; padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line); } .tag.on{background:rgba(0,255,170,.12);border-color:rgba(0,255,170,.25);color:rgba(200,255,240,.95);} .tag.off{background:rgba(255,120,120,.10);border-color:rgba(255,120,120,.20);color:rgba(255,190,190,.95);} /* ====== 后台：编辑弹窗 ====== */ .modal{position:fixed;inset:0;z-index:50;} .modal[hidden]{display:none;} .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);} .modal-card{ position:relative;z-index:51; width:min(520px,92vw); margin:7vh auto 0; background:rgba(15,20,35,.98); border:1px solid var(--line); border-radius:16px; padding:14px; } .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} /* ============================================================ ====== 前端公开页（v1：你原来的 hero/cover 版本） ====== ============================================================ */ .public .hero{position:relative;padding:20px 16px 10px;} .hero-inner{max-width:780px;margin:0 auto;} .hero-top{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);} /* 封面 */ .cover{ height:var(--cover-h); background:rgba(0,0,0,.18); position:relative; } /* 封面高光 */ .glow{ position:absolute;inset:-40px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%), radial-gradient(circle at 80% 10%, rgba(44,125,255,.16), transparent 52%); } /* 头像（封面内部） */ .avatar-wrap{ position:absolute; left:50%; top: var(--avatar-top); transform:translateX(-50%); z-index:5; } .avatar{ width:var(--avatar-size); height:var(--avatar-size); border-radius:999px; object-fit:cover; border:4px solid rgba(255,255,255,.9); box-shadow:0 14px 40px rgba(0,0,0,.45); background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); } /* 标题区 */ .titlebox{text-align:center;padding-top:18px;} .titlebox h1{margin:0;font-size:34px;letter-spacing:.5px} .titlebox p{margin:6px 0 0;color:var(--muted);font-weight:600} /* v1 icons */ .public .icons{display:flex;justify-content:center;gap:10px;padding:14px 0 2px} .public .icon{ width:40px;height:40px;border-radius:12px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;text-decoration:none; background:rgba(0,0,0,.12);font-weight:800 } .public .icon-img{width:22px;height:22px;display:block;} .content{max-width:780px;margin:0 auto;padding:14px 16px 80px;} /* v1 列表 */ .listwrap{margin-top:14px;border-top:1px solid rgba(255,255,255,.14);} .rowitem{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.14); text-decoration:none;min-height:var(--row-min-height); transition:background .15s ease; } .rowitem:active{background:rgba(255,255,255,.05);} .row-left{display:flex;align-items:center;gap:12px;min-width:0;} .row-logo{ width:var(--logo-size);height:var(--logo-size); border-radius:999px;object-fit:cover; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.18); } .row-title{ font-weight:900;letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:16px; } .row-no{ font-weight:900;color:rgba(232,241,255,.85); min-width:40px;text-align:right;font-size:14px;opacity:.9; } /* v1 底部 CTA */ .cta{ position: fixed;left: 16px;right: 16px;bottom: 16px;z-index: 50; display: block;text-align: center;padding: 14px 16px; border-radius: 14px;text-decoration: none;font-weight: 700; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px); color: #fff; } /* ============================================================ ====== 前端公开页（v3：你现在用的 bio.site-like） ====== 启用： ============================================================ */ body.public.v3{ min-height:100vh; overflow-x:hidden; } /* v3：让“整个界面”更像视频氛围：暗角叠加（仍然是全屏背景） */ body.public.v3::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(800px 520px at 50% 0%, rgba(0,0,0,.12), transparent 60%), radial-gradient(900px 700px at 50% 120%, rgba(0,0,0,.55), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)); } .public.v3 .page{ position:relative; z-index:1; max-width:520px; margin:0 auto; padding:34px 22px 22px; color:rgba(255,255,255,.92); } .public.v3 .head{ text-align:center; } .public.v3 .head-name{ margin:6px 0 0; font-size:42px; font-weight:950; letter-spacing:.4px; color:rgba(255,246,187,.95); text-shadow:0 10px 26px rgba(0,0,0,.45); } .public.v3 .head-bio{ margin:10px auto 18px; max-width:520px; font-size:13px; line-height:1.45; color:rgba(255,246,187,.90); } .public.v3 .head-photo{ display:flex; justify-content:center; margin:6px 0 14px; } .public.v3 .photo{ width:150px;height:150px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,.18); box-shadow:0 18px 46px rgba(0,0,0,.42); background:rgba(0,0,0,.12); } .public.v3 .social{ display:flex; justify-content:center; gap:18px; margin:10px 0 20px; } .public.v3 .social-a{ width:34px;height:34px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } .public.v3 .social-i{ width:22px;height:22px;display:block; } .public.v3 .links{ margin-top:8px; } .public.v3 .link{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 8px; border-bottom:1px solid rgba(255,255,255,.20); text-decoration:none; color:rgba(255,255,255,.92); } .public.v3 .link-left{ display:flex; align-items:center; gap:12px; min-width:0; } .public.v3 .link-thumb{ width:40px;height:40px; border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 18px rgba(0,0,0,.18); background:rgba(0,0,0,.12); } .public.v3 .link-title{ font-weight:900; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .public.v3 .link-no{ font-weight:900; font-size:13px; min-width:36px; text-align:right; opacity:.95; } .public.v3 .cta-pill{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; width:min(520px, calc(100% - 28px)); height:48px; display:flex; align-items:center; gap:10px; padding:0 16px; background:rgba(255,255,255,.92); color:#0b0f19; text-decoration:none; border-radius:999px; box-shadow:0 18px 40px rgba(0,0,0,.35); } .public.v3 .cta-dot{ width:12px;height:12px;border-radius:999px;background:#111; } .public.v3 .cta-text{ font-weight:950;font-size:12px;letter-spacing:.2px; } .public.v3 .cta-arrow{ margin-left:auto;font-weight:900;font-size:18px; } .public.v3 .safe-padding{ height:82px; } /* 响应式 */ @media (max-width:820px){ .grid2{grid-template-columns:1fr} .promo-title{max-width:220px;} .titlebox h1{font-size:32px;} } /* ================================================================= ✅ Dash Mobile Fix Pack（追加补丁：葡语变长不溢出 + 宽度不抖） ================================================================= */ /* 1) 宽度稳定：弹窗打开/关闭不左右跳（滚动条稳定占位） */ html{ scrollbar-gutter: stable; } body.dash{ overflow-x:hidden; } /* 2) 顶部栏：手机自动换行 + 超长链接强制换行 */ body.dash .topbar{ gap:12px; flex-wrap:wrap; } body.dash .topbar-left, body.dash .topbar-right{ min-width:0; } body.dash .topbar-left .muted{ align-items:flex-start; } body.dash .topbar-left .muted a{ overflow-wrap:anywhere; word-break:break-word; display:inline-block; max-width:100%; } body.dash .topbar .btn{ white-space:nowrap; } /* 3) ✅ 关键：row（下拉+输入+按钮）允许换行、并正确收缩 */ body.dash .row{ flex-wrap:wrap; align-items:center; } body.dash .row select{ flex: 0 0 150px; /* 下拉固定合理宽度 */ min-width: 130px; max-width: 100%; } body.dash .row input{ flex: 1 1 220px; /* 输入框吃剩余空间 */ min-width: 0; /* 关键：允许缩小，避免把按钮挤出屏幕 */ max-width: 100%; } body.dash .row .btn{ flex: 0 0 auto; white-space:nowrap; } /* 超窄屏：按钮独占一行，避免出现 “Adicio” 被截断 */ @media (max-width:420px){ body.dash .row .btn{ width:100%; } } /* 4) 联系方式列表：长 URL 换行，右侧删除不把布局撑爆 */ body.dash .list li{ align-items:flex-start; } body.dash .list li span{ min-width:0; overflow-wrap:anywhere; } body.dash .list li a.danger{ flex:0 0 auto; white-space:nowrap; } /* 5) 推广列表：窄屏换行，按钮区域自动折行更好点 */ body.dash .promo-row{ flex-wrap:wrap; } body.dash .promo-left{ flex:1 1 260px; } body.dash .promo-actions{ flex:1 1 220px; justify-content:flex-end; flex-wrap:wrap; } @media (max-width:680px){ body.dash .promo-actions{ justify-content:flex-start; } body.dash .promo-actions .btn, body.dash .promo-actions .danger{ flex:1 1 auto; text-align:center; } } /* 6) 弹窗：手机高度可滚动，不超出屏幕 */ body.dash .modal-card{ max-height:86vh; overflow:auto; } @media (max-width:680px){ body.dash .modal-card{ width:calc(100% - 20px); margin:6vh auto 0; } }