/* PixiGraph 公共样式 */ /* ============================================ */ /* 全局加载覆盖层（置顶全屏覆盖 + 左下角 spinner）*/ /* ============================================ */ /* * 独立图层设计：加载器节点挂到 下（body 外），绕过 body{opacity:0} FOUC 隐藏 * 等所有资源加载完（window.load）后淡出隐藏 */ .pg-global-loader-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; pointer-events: none; background: transparent; transition: opacity 0.4s ease; opacity: 1; } .pg-global-loader-overlay.pg-hidden { opacity: 0; } .pg-global-loader-spinner { position: absolute; left: 20px; bottom: 20px; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.15); border-top-color: var(--pg-progress-color, #006C4C); border-radius: 50%; animation: pg-loader-spin 0.8s linear infinite; box-sizing: border-box; } @keyframes pg-loader-spin { to { transform: rotate(360deg); } } .r18-badge { position: absolute; top: 8px; left: 8px; background: #c62828; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; z-index: 3; letter-spacing: 0.05em; } .illust-card .card-image-wrapper, .image-viewer { position: relative; } .drawer-user-block { padding: 16px; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); } .drawer-user-block .user-name { font-weight: 600; font-size: 15px; } .drawer-user-block .user-meta { font-size: 12px; color: rgb(var(--mdui-color-on-surface-variant)); margin-top: 4px; } .drawer-user-block .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgb(var(--mdui-color-surface-container-high)); } .drawer-user-row { display: flex; align-items: center; gap: 12px; } .panel-empty { text-align: center; padding: 48px 16px; color: rgb(var(--mdui-color-on-surface-variant)); font-size: 14px; } .panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; } /* * 竖向瀑布流（仿 Pixiv 原站）： * 单列竖向铺开，图片保持原比例（max-width -15%：720px → 612px） */ .panel-grid.panel-grid-vertical { display: block; max-width: 612px; margin: 0 auto; } .panel-grid.panel-grid-vertical .mini-card { margin: 0 0 20px 0; border-radius: 12px; } .panel-grid.panel-grid-vertical .mini-card .mini-card-media { aspect-ratio: auto; /* 取消正方形 */ background: rgb(var(--mdui-color-surface-container-high)); } .panel-grid.panel-grid-vertical .mini-card .mini-card-media img { width: 100%; height: auto; object-fit: contain; /* 不裁切，按原比例显示 */ } .panel-grid.panel-grid-vertical .mini-card .mini-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* * 收藏卡片 — 统一结构（本地收藏 & 源站收藏共用） * DOM 结构: * .mini-card * .mini-card-media ← 正方形图片容器 * img * .mini-card-info ← 标题 + 作者 * .mini-title * .mini-author */ .panel-grid .mini-card { background: rgb(var(--mdui-color-surface-container)); border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .panel-grid .mini-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20), 0 4px 10px rgba(0, 0, 0, 0.10); } /* 图片容器：固定正方形比例 */ .panel-grid .mini-card .mini-card-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; } /* 图片填满容器 */ .panel-grid .mini-card .mini-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 多页作品角标（与首页搜索结果保持一致） */ .panel-grid .mini-card .page-count-badge { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; display: flex; align-items: center; gap: 3px; z-index: 2; pointer-events: none; } /* 动图（ugoira）作品角标：左下角三角播放图标（2026-08-15 从左上角移至左下角， * 避免与左上角的 R18 标签等其他角标重叠；所有卡片界面统一位置） */ .ugoira-card-badge { position: absolute; bottom: 8px; left: 8px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } /* 动图播放器容器（详情页） */ .ugoira-player { position: relative; max-width: 100%; margin: 0 auto 16px; background: rgb(var(--mdui-color-surface-container)); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .ugoira-player canvas { display: block; max-width: 100%; height: auto; background: #000; transition: opacity 0.3s; } .ugoira-controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0, 0, 0, 0.04); border-top: 1px solid rgba(0, 0, 0, 0.08); } .ugoira-info { font-size: 13px; color: rgb(var(--mdui-color-on-surface-variant)); flex: 1; } /* 动图加载提示层：在顶部 loadingState 中显示逐帧加载进度 * 三个元素纵向排列，各自独占一行 */ .ugoira-loading-extra { display: flex !important; flex-direction: column !important; align-items: center; gap: 12px; width: 100%; max-width: 400px; } .ugoira-loading-text { display: block; width: 100%; font-size: 14px; font-weight: 500; color: rgb(var(--mdui-color-on-surface)); text-align: center; } .ugoira-loading-extra mdui-linear-progress { display: block !important; width: 100%; } .ugoira-loading-detail { display: block; width: 100%; font-size: 13px; color: rgb(var(--mdui-color-on-surface-variant)); font-variant-numeric: tabular-nums; text-align: center; } /* 作品信息区域 */ .panel-grid .mini-card .mini-card-info { padding: 10px 12px; } .panel-grid .mini-card .mini-title { font-size: 13px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--mdui-color-on-surface)); } .panel-grid .mini-card .mini-author { font-size: 11px; color: rgb(var(--mdui-color-on-surface-variant)); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* R18 受限作品 */ .panel-grid .mini-card.r18-restricted { cursor: not-allowed; } /* * 未开启 R18 访问时封面不加载，用粉红到淡蓝的斜向渐变色块填充空白位置。 * 渐变作用于图片容器 .mini-card-media。 */ .panel-grid .mini-card.r18-restricted .mini-card-media { background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 35%, #b3e0ff 100%); } /* * R18G 卡片黑色遮罩样式 * 区别于 R18 的高斯模糊，R18G 使用纯黑遮罩 + 禁止点击 * 适用于：搜索页卡片、收藏页卡片、源站收藏卡片 * 全黑死：不透明度100%，完全覆盖整个卡片（包括图片和名称） */ .r18g-blocked { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background-color: rgb(0, 0, 0); /* 全黑死，不透明 */ z-index: 2; color: #fff; } .creator-list { display: flex; flex-direction: column; gap: 8px; } .creator-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgb(var(--mdui-color-surface-container)); cursor: pointer; } .creator-item img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .creator-item .creator-name { font-weight: 500; font-size: 14px; } .fav-btn-active { color: rgb(var(--mdui-color-error)) !important; } .view-panel { display: none; } .view-panel.active { display: block; } #view-search.active ~ .welcome-hero, #view-search:not(.active) { /* welcome only with search view */ } .sidebar-sub-item { padding-left: 24px !important; } /* 次要分组标题（如 Pixiv 源站服务）：整体 50% 透明度弱化， * 表明该分组为次要功能（与 user.html「同步设置」项的弱化手法一致） */ .sidebar-secondary-item { opacity: 0.5; } /* ---------- 应用布局：主侧边栏常驻（除详情页） ---------- */ body.pg-persistent-drawer { padding-top: 0 !important; /* 防止横向滚动 */ overflow-x: hidden; } body.pg-overlay-drawer { padding-top: 3.5rem; } .pg-layout { min-height: 100vh; /* 防止内容溢出导致横向滚动 */ overflow-x: hidden; max-width: 100vw; } /* * 约束 navigation-drawer host 元素的宽度，使其与 panel 宽度一致 * MDUI2 内部为 host 设置了 position:absolute; top:64px; bottom:0; left:0; * 但未设置 right/width，且 :host 内部 CSS 可能强制 width:100% 或类似值， * 导致 host 盒子宽度被撑满父容器，而内部 ::part(panel) 仅 260px —— * 出现"框范围大、实际显示小"的溢出假象。 * 用 !important 强制把 host 宽度钉死到 panel 宽度，让盒子范围与可见范围一致。 */ .pg-drawer { width: 260px !important; max-width: 260px !important; right: auto !important; } .pg-drawer::part(panel) { width: 260px; background-color: rgb(var(--mdui-color-surface-container)); /* Material Design Elevation Level 2 — 右侧投影体现层次感 */ box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08), 4px 0 8px rgba(0, 0, 0, 0.04), 8px 0 16px rgba(0, 0, 0, 0.02); } /* 详情页覆盖式抽屉：与 index 常驻(persistent)抽屉一致，去掉 MDUI modal 默认圆角 */ body.pg-overlay-drawer .pg-drawer::part(panel) { border-radius: 0 !important; } /* modal/mobile模式下确保遮罩层覆盖全页面（包括顶部工具栏区域） */ .pg-drawer[modal]::part(overlay), .pg-drawer[mobile]::part(overlay) { z-index: 1500; background-color: rgba(0, 0, 0, 0.5); position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; } /* * 侧边栏当前板块高亮 * 用主色（primary）的半透明版本作为背景，比 primary-container 更深更沉稳 * 文字使用 on-primary（主色上的文字色），保证对比度 * 这两个变量由 mdui.setColorScheme() 根据用户自定义配色自动生成 * ::part(container) 穿透 mdui-list-item 的 Shadow DOM 设置内部容器样式 */ .pg-drawer mdui-list-item[active]::part(container) { background-color: rgba(var(--mdui-color-primary), 0.06); color: rgb(var(--mdui-color-on-primary)); } /* 激活状态下 hover 略微加深，保持层次感 */ .pg-drawer mdui-list-item[active]::part(container):hover { background-color: rgba(var(--mdui-color-primary), 0.1); } .pg-main { min-height: 100vh; box-sizing: border-box; /* 防止内容溢出 */ overflow-x: hidden; /* * 以 mdui-list 实际宽度作为左侧偏移基准 * MDUI2 内部会自动给 mdui-layout-main 设置 margin-left（基于 drawer host 宽度计算）， * 但 drawer host 溢出导致计算错误，所以必须同时用 !important 覆盖 margin-left * 用 padding-left 把内容推到 list 右边缘，margin-left 清零取消 MDUI2 的错误偏移 */ margin-left: 0 !important; padding-left: 260px !important; width: 100% !important; } /* 菜单按钮：桌面端和手机端都显示 * - 桌面端：控制并列侧边栏的展开/收起（toggle open） * - 手机端：控制 modal 抽屉的打开/关闭（toggle open，点击遮罩可关闭） */ /* * 登录/注册已改为独立页面（login.html / register.html）， * 不再使用对话框，原 .auth-dialog-body 样式已废弃。 */ .user-page-section { max-width: 960px; margin: 0 auto; padding: 24px 16px; width: 100%; box-sizing: border-box; } .user-layout { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; } .user-subnav { flex: 0 0 220px; width: 220px; position: sticky; top: 1rem; background: rgb(var(--mdui-color-surface-container)); border-radius: 16px; overflow: hidden; /* 与主侧边栏等强的全方向阴影（透明度 0.08/0.04/0.02，模糊 4/8/16px） */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.02); } .user-subnav mdui-list { display: block; width: 100%; } .user-main { flex: 1; min-width: 0; } .user-subnav mdui-list-item { cursor: pointer; } .user-main > .user-section { display: none; } .user-main > .user-section.active { display: block; } .user-section h2 { font-size: 18px; font-weight: 600; margin: 0 0 16px; } .user-form-card { background: rgb(var(--mdui-color-surface-container)); border-radius: 16px; padding: 20px; /* 与主侧边栏等强的全方向阴影（透明度 0.08/0.04/0.02，模糊 4/8/16px） */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.02); } .user-field-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } .user-field-row.cols-2 { grid-template-columns: 1fr; } .user-form-card mdui-text-field, .user-form-card mdui-switch { width: 100%; } /* * 设置项行（左侧图标 + 右侧文字/开关） * 让开关与说明文字整齐对齐，比单纯一个 mdui-switch 更显眼 */ .setting-row { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0; } .setting-row .setting-icon { font-size: 22px; color: rgb(var(--mdui-color-on-surface-variant)); margin-top: 4px; flex-shrink: 0; } .setting-row .setting-text { flex: 1; min-width: 0; } .setting-row .setting-text mdui-switch { width: 100%; } .setting-row .setting-text .user-form-hint { margin: 6px 0 0; } /* * 高亮设置项（用于突出新增功能） * 用淡蓝背景 + 左边框强调"这是新功能" */ .setting-row-highlight { background: linear-gradient(90deg, rgba(var(--mdui-color-primary), 0.10) 0%, rgba(var(--mdui-color-primary), 0.04) 100%); border-left: 4px solid rgb(var(--mdui-color-primary)); border-radius: 8px; padding: 12px 14px; margin: 16px 0 0; } .setting-row-highlight .setting-icon { color: rgb(var(--mdui-color-primary)); } .user-form-hint { font-size: 13px; color: rgb(var(--mdui-color-on-surface-variant)); margin: 0 0 12px; line-height: 1.5; } .user-form-hint.status-ok { color: rgb(var(--mdui-color-primary)); } .user-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .user-actions mdui-button { --mdui-comp-button-horizontal-padding: 20px; } .user-actions mdui-button[variant="filled"], .user-actions mdui-button:not([variant]) { min-width: 120px; } .user-page-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 720px) { .user-field-row.cols-2 { grid-template-columns: 1fr 1fr; } .user-page-grid.two-col { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .user-layout { flex-direction: column; /* 纵向排列时让子项横向铺满，避免内容少时自动收缩变窄 */ align-items: stretch; } .user-subnav { position: static; width: 100%; flex: none; } /* 个人资料卡：强制与上方选择框等宽（内容不足会 shrink-wrap，需显式铺满） */ .user-main { width: 100%; } .user-form-card { width: 100%; } } .avatar-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: rgb(var(--mdui-color-surface-container-high)); margin-bottom: 12px; } /* ============================================ */ /* 密码强度三段式进度条 */ /* ============================================ */ /* * 三段水平进度条，颜色分别为红/橙/绿 * 满足几项要求就点亮几段（按顺序：红→橙→绿） * score=0 全灰；score=1 红；score=2 红+橙；score=3 全亮 * 三项要求：小写字母、大写字母、数字 */ .pg-pwd-strength { display: flex; gap: 6px; margin-top: 8px; margin-bottom: 4px; } .pg-pwd-strength .seg { flex: 1; height: 4px; border-radius: 2px; background-color: #e0e0e0; transition: background-color 0.25s ease; } .pg-pwd-strength .seg.on.s1 { background-color: #e53935 !important; } /* 红 */ .pg-pwd-strength .seg.on.s2 { background-color: #FB8C00 !important; } /* 橙 */ .pg-pwd-strength .seg.on.s3 { background-color: #43A047 !important; } /* 绿 */ .pg-pwd-strength-label { font-size: 12px; color: #757575; margin-top: 4px; min-height: 16px; line-height: 1.4; } /* ============================================ */ /* 响应式侧边栏优化 - 防止横向滚动 */ /* ============================================ */ /* * 平板及以下（≤1024px）： * - 缩小侧边栏宽度到 220px * - 确保主内容区不会溢出 */ @media (max-width: 1024px) { .pg-drawer { width: 220px !important; max-width: 220px !important; } .pg-drawer::part(panel) { width: 220px; } body.pg-persistent-drawer .pg-main { /* list 宽度 = 220px，作为左 padding 基准，同时清零 MDUI2 自动 margin */ margin-left: 0 !important; padding-left: 220px !important; width: 100% !important; max-width: 100%; } } /* * 小平板（≤840px）： * - 进一步缩小侧边栏 * - 主内容区占满剩余空间 */ @media (max-width: 840px) { .pg-drawer { width: 200px !important; max-width: 200px !important; } .pg-drawer::part(panel) { width: 200px; } body.pg-persistent-drawer .pg-main { margin-left: 0 !important; padding-left: 200px !important; width: 100% !important; } } /* * 手机端（≤839px，与 MDUI2 的 md 断点 840px 对齐）： * - 完全禁用并列式侧边栏 * - 切换为覆盖式 modal 模式 * - 主内容区恢复全宽 */ @media (max-width: 839px) { body.pg-persistent-drawer { /* 保持 padding-top: 0，避免顶部出现白色空白条 */ padding-top: 0 !important; } body.pg-persistent-drawer .pg-main { /* 手机端 modal 模式：list 不再常驻，恢复全宽 */ margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; min-width: 0; } body.pg-persistent-drawer .pg-drawer { width: 280px !important; max-width: 280px !important; } body.pg-persistent-drawer .pg-drawer::part(panel) { width: 280px; /* 手机端侧边栏可以稍宽一些 */ } } /* * 超小屏手机（≤480px）： * - 进一步优化间距和字体大小 */ @media (max-width: 480px) { .main-container { padding: 16px 10px; } .panel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } } /* ---------- 自定义背景图片：body 透明，子容器保留背景 ---------- */ body.pg-has-bg { background-color: transparent !important; } /* ============================================ */ /* 全局页面加载遮罩（半透明黑色 + MDUI 白色加载圈） */ /* 用于所有会离开当前页面的导航操作 */ /* ============================================ */ .pg-loading-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; /* 确保在 MDUI 所有组件之上 */ } .pg-loading-overlay.active { opacity: 1; pointer-events: all; } /* 白色加载圈容器（居中） */ .pg-loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* 纯白 MDUI 圆形进度条 * 同时设置 CSS 变量与 color 属性，确保不同 MDUI2 版本下指示器均为白色 */ .pg-loading-spinner mdui-circular-progress { --mdui-comp-circular-progress-active-indicator-color: #ffffff; --mdui-color-on-surface: #ffffff; --mdui-comp-circular-progress-size: 48px; color: #ffffff; } : flex; flex-direction: column; align-items: center; gap: 12px; } /* 纯白 MDUI 圆形进度条 * 同时设置 CSS 变量与 color 属性，确保不同 MDUI2 版本下指示器均为白色 */ .pg-loading-spinner mdui-circular-progress { --mdui-comp-circular-progress-active-indicator-color: #ffffff; --mdui-color-on-surface: #ffffff; --mdui-comp-circular-progress-size: 48px; color: #ffffff; } /* 节点监控 iframe 跟随侧边栏右缘：桌面 260px，≤1024px 220px，≤840px 200px，手机端全宽 */ @media (max-width: 1024px) { #viewMonitor { left: 220px !important; } } @media (max-width: 840px) { #viewMonitor { left: 200px !important; } } @media (max-width: 839px) { #viewMonitor { left: 0 !important; } }