/* ============================================================ Cloudreve 登录页（/session） ------------------------------------------------------------ 作用范围： - 仅当或含 .pcc-login-scope 时生效 - login.js 会在进入/离开 /session 时自动加/删该 class => 登录后进入系统页面，CSS 自动失效，不污染已登录页面核心能力： 1) 顶部导航：背景 #3d4c56，高度 90px，左右布局 2) 顶部导航严格纯色：除背景色/字体色外，不出现其它颜色块 3) 登录卡片：居中 + 可控上移 + 左侧背景图圆角 4) 字体统一：导航栏 / 登录卡片 / 页脚全部统一跨平台字体栈 5) 移动端：隐藏菜单，仅 Logo 居中 ============================================================ */ /* ------------------------------------------------------------ 0) 可维护参数区（只改这里即可调整整体效果） ------------------------------------------------------------ */ :root { /* ========================= A) 字体：跨平台中文 UI 字体栈（重点） - macOS/iOS: PingFang SC / SF Pro - Windows: Segoe UI / Microsoft YaHei / 微软雅黑 - Android: Noto Sans SC - fallback: sans-serif ========================= */ --ui-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "SF Pro Display", "Segoe UI", "Microsoft YaHei", "微软雅黑", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; /* ========================= B) 顶部导航（仿原站） ========================= */ --login-nav-height: 90px; /* 顶栏高度（你要求 >= 90px） */ --nav-bg: #3d4c56; /* 顶栏背景色（原站色） */ --nav-text: #ffffff; /* 顶栏文字色（唯一字体色） */ --nav-pad-left: 100px; /* 顶栏左内边距（logo离左留白） */ --nav-pad-right: 25px; /* 顶栏右内边距 */ --nav-menu-right-gap: 150px; /* 菜单距最右留白（150~200 推荐） */ --nav-gap: 35px; /* 菜单项间距 */ --nav-logo-height: 46px; /* Logo 高度 */ /* ========================= C) 页面背景 ========================= */ --page-bg: #f4f7fb; /* ========================= D) 登录卡片（容器） ========================= */ --card-max-width: 1200px; --card-radius: 18px; /* 卡片整体上移：越大越靠上（你想再靠上就加大它） */ --card-shift-up: 72px; /* 阴影（稳定、柔和） */ --card-shadow-1: 0 24px 70px rgba(15, 23, 42, 0.16); --card-shadow-2: 0 10px 26px rgba(15, 23, 42, 0.12); /* ========================= E) 左侧背景图（必须通过 /custom/ 暴露） ========================= */ --left-bg: url("/custom/login-left-bg.jpg"); --left-col-ratio: 46%; /* 左图列宽占比（46%/54%） */ /* ========================= F) 表单区域（右侧） ========================= */ --form-padding: 86px 86px 62px; /* 上右左下 */ --input-bg: #f6f8fb; --input-radius: 12px; --btn-primary: #1d3b8a; --btn-radius: 12px; --btn-height: 56px; /* ========================= G) 页面布局（给页脚版权留空间） ========================= */ --root-padding-top: 10px; --root-padding-side: 16px; --root-padding-bottom: 80px; /* ========================= H) 页脚版权 ========================= */ --footer-text: "版权所有：苏州市公共文化中心苏ICP备12000510号 Powered by Cloudreve"; --footer-color: rgba(15, 23, 42, 0.45); --footer-font-size: 20px; } /* ------------------------------------------------------------ 1) 作用域开关：只有带 .pcc-login-scope 才生效 ------------------------------------------------------------ */ .pcc-login-scope html, .pcc-login-scope body { height: 100% !important; margin: 0 !important; padding: 0 !important; } /* body：统一字体基调 + 顶栏占位 */ .pcc-login-scope body { background: var(--page-bg) !important; padding-top: var(--login-nav-height) !important; overflow-x: hidden !important; box-sizing: border-box !important; position: relative !important; /* ✅ 统一字体：全局基调 */ font-family: var(--ui-font-family) !important; } /* ------------------------------------------------------------ 2) 顶部导航（由 login.js 注入的 #pcc-topnav） ------------------------------------------------------------ */ .pcc-login-scope #pcc-topnav { position: fixed; top: 0; left: 0; right: 0; height: var(--login-nav-height); z-index: 9999; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 var(--nav-pad-right) 0 var(--nav-pad-left); box-sizing: border-box; background: var(--nav-bg) !important; /* ✅ 强制字体统一（导航栏必须一致） */ font-family: var(--ui-font-family) !important; /* ✅ 严格纯色：去掉任何阴影/边框/滤镜 */ border: none !important; box-shadow: none !important; outline: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 顶栏内部：清掉任何可能导致“黑块/色块”的样式 */ .pcc-login-scope #pcc-topnav * { background: transparent !important; box-shadow: none !important; filter: none !important; outline: none !important; border: none !important; text-shadow: none !important; /* ✅ 顶栏内部也强制字体统一 */ font-family: var(--ui-font-family) !important; } /* Logo */ .pcc-login-scope #pcc-topnav .pcc-topnav-left { display: flex; align-items: center; flex: 0 0 auto; } .pcc-login-scope #pcc-topnav .pcc-topnav-logo { display: inline-flex; align-items: center; text-decoration: none !important; } .pcc-login-scope #pcc-topnav .pcc-topnav-logo img { height: var(--nav-logo-height); width: auto; display: block; } /* 菜单 */ .pcc-login-scope #pcc-topnav .pcc-topnav-links { display: flex; align-items: center; justify-content: flex-end; gap: var(--nav-gap); white-space: nowrap; overflow: hidden; /* ✅ 菜单距最右留白（150~200） */ padding-right: var(--nav-menu-right-gap) !important; box-sizing: border-box; } .pcc-login-scope #pcc-topnav .pcc-topnav-links a { color: var(--nav-text) !important; text-decoration: none !important; font-size: 16px; font-weight: 600; padding: 0 !important; margin: 0 !important; /* ✅ 禁止 hover/active 产生颜色变化、背景色块 */ transition: none !important; /* ✅ 字体统一（再次兜底） */ font-family: var(--ui-font-family) !important; } .pcc-login-scope #pcc-topnav .pcc-topnav-links a:hover, .pcc-login-scope #pcc-topnav .pcc-topnav-links a:active, .pcc-login-scope #pcc-topnav .pcc-topnav-links a:focus, .pcc-login-scope #pcc-topnav .pcc-topnav-links a:focus-visible { color: var(--nav-text) !important; background: transparent !important; outline: none !important; } /* ------------------------------------------------------------ 3) 页面主体（#root）居中布局 ------------------------------------------------------------ */ .pcc-login-scope #root { width: 100% !important; min-height: calc(100vh - var(--login-nav-height)) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: var(--root-padding-top) var(--root-padding-side) var(--root-padding-bottom) !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; /* ✅ 字体统一：root 也强制（避免被内部覆盖） */ font-family: var(--ui-font-family) !important; } /* 兼容 Cloudreve/MUI 多层 wrapper，确保居中稳定 */ .pcc-login-scope #root > div, .pcc-login-scope #root > div > div, .pcc-login-scope #root > div > div > div { width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ 4) 登录卡片（MUI Paper：css-1eqpkvl） ------------------------------------------------------------ */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl { display: grid !important; visibility: visible !important; opacity: 1 !important; width: min(var(--card-max-width), calc(100vw - 32px)) !important; max-width: var(--card-max-width) !important; border-radius: var(--card-radius) !important; overflow: hidden !important; background: #fff !important; position: relative !important; left: 50% !important; /* ✅ 卡片上移：调这个最安全 */ transform: translateX(-50%) translateY(calc(var(--card-shift-up) * -1)) !important; box-shadow: var(--card-shadow-1), var(--card-shadow-2) !important; grid-template-columns: var(--left-col-ratio) 1fr !important; /* ✅ 字体统一：卡片容器 */ font-family: var(--ui-font-family) !important; } /* ✅ 关键：强制覆盖 MUI 组件内部字体（解决“看起来字体不对”） MUI 往往在 Typography/Button/Input 上单独写 font-family，这里统一压过去 */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl, .pcc-login-scope .MuiPaper-root.css-1eqpkvl * { font-family: var(--ui-font-family) !important; } /* 隐藏卡片顶部默认 logo/语言切换条（避免与自定义导航冲突） */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl > .MuiBox-root.css-mbx0dj { display: none !important; } /* 左侧背景图（伪元素占位 + 圆角） */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl::before { content: ""; display: block; grid-column: 1 / 2; grid-row: 1 / -1; background-image: var(--left-bg); background-size: cover; background-position: center; background-repeat: no-repeat; border-top-left-radius: var(--card-radius); border-bottom-left-radius: var(--card-radius); } /* 右侧表单 padding */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl .MuiBox-root.css-13o7eu2 { padding: var(--form-padding) !important; box-sizing: border-box; } /* 输入框样式 */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl .MuiOutlinedInput-root { border-radius: var(--input-radius) !important; background: var(--input-bg) !important; } /* 主按钮样式 */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl .MuiButton-containedPrimary { background: var(--btn-primary) !important; border-radius: var(--btn-radius) !important; height: var(--btn-height) !important; font-size: 16px !important; font-weight: 700 !important; margin-top: 16px !important; } /* ------------------------------------------------------------ 5) 临时隐藏 Powered by Cloudreve ------------------------------------------------------------ */ .pcc-login-scope a[href^="https://cloudreve.org"] { display: none !important; } /* ------------------------------------------------------------ 6) 页脚版权（要求） ------------------------------------------------------------ */ .pcc-login-scope #root::after { content: var(--footer-text); position: fixed; left: 0; right: 0; bottom: 20px; text-align: center; font-size: var(--footer-font-size); color: var(--footer-color); /* ✅ 页脚字体统一 */ font-family: var(--ui-font-family) !important; pointer-events: none; z-index: 9998; } /* ------------------------------------------------------------ 7) 移动端适配 ------------------------------------------------------------ */ @media (max-width: 980px) { /* 顶栏：Logo 居中，菜单隐藏 */ .pcc-login-scope #pcc-topnav { padding: 0 16px; justify-content: center; } .pcc-login-scope #pcc-topnav .pcc-topnav-links { display: none !important; } .pcc-login-scope #pcc-topnav .pcc-topnav-left { margin: 0 auto !important; } .pcc-login-scope #pcc-topnav .pcc-topnav-logo img { height: 44px; } /* 卡片：单列（上图下表单） */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl { grid-template-columns: 1fr !important; width: calc(100vw - 24px) !important; max-width: 560px !important; /* 移动端上移量稍小，避免顶到导航 */ transform: translateX(-50%) translateY(-18px) !important; } /* 图片放到顶部，并让四角圆角一致 */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl::before { grid-column: 1 / 2; grid-row: 1 / 2; height: 220px; border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); border-bottom-left-radius: 0; } /* 表单 padding 更紧凑 */ .pcc-login-scope .MuiPaper-root.css-1eqpkvl .MuiBox-root.css-13o7eu2 { padding: 30px 22px 26px !important; } }