@charset "UTF-8"; /*! * ============================================================ * RiPro-V5 子主题 · 华为毛玻璃（Glassmorphism）UI 皮肤 * ------------------------------------------------------------ * · 所有代码仅存在于子主题，不修改父主题 ripro-v5 任何文件 * · 在父主题 assets/css/main.min.css 之后加载，完整覆盖其视觉皮肤 * · 设计规范来自「样式.css」：毛玻璃卡片 / 胶囊导航 / 渐变按钮 / * 大圆角 / 柔和蓝灰阴影 / 高饱和模糊 * ============================================================ */ /* ============================================================ 0. 设计令牌（Design Tokens） ============================================================ */ :root{ --gl-blue:#4172fa; --gl-blue-light:#648cff; --gl-blue-deep:#3262e6; --gl-ink:#0b1a33; --gl-ink-2:#1e3a5f; --gl-ink-3:#4a5b78; --gl-line:rgba(200,218,245,.8); --gl-line-soft:rgba(200,218,245,.55); --gl-surface:rgba(240,246,255,.6); --gl-surface-strong:rgba(244,249,255,.72); --gl-white:rgba(255,255,255,.72); --gl-blur:blur(16px) saturate(180%); --gl-blur-strong:blur(24px) saturate(180%); --gl-inner:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12)); --gl-inner-shadow:inset 0 1px 0 rgba(255,255,255,.6); --gl-shadow:0 8px 32px rgba(0,20,60,.06),0 2px 8px rgba(255,255,255,.5),var(--gl-inner-shadow); --gl-shadow-sm:0 4px 20px rgba(0,20,60,.04),var(--gl-inner-shadow); --gl-shadow-md:0 8px 24px rgba(0,20,60,.07),var(--gl-inner-shadow); --gl-shadow-lg:0 16px 56px rgba(0,20,60,.12),var(--gl-inner-shadow); --gl-shadow-hover:0 12px 36px rgba(0,20,60,.08),var(--gl-inner-shadow); --gl-r-xs:10px; --gl-r-sm:12px; --gl-r-md:16px; --gl-r-lg:20px; --gl-r-xl:24px; /* ---- 页头导航胶囊（
）尺寸 ---- 想调大小只改这三行即可，响应式与占位块会自动跟随 */ --gl-nav-h:54px; /* 胶囊高度（竖向大小）：原为 64px */ --gl-nav-pad-y:6px; /* 胶囊上下内边距：原为 8px（改小会再矮一点） */ --gl-nav-r:999px; /* 胶囊圆角：999px = 全圆胶囊；想让它是圆角矩形就改 16~20px */ /* ---- 登录 / 注册 / 找回密码弹窗（两栏）---- 表单栏宽度 = --gl-popup-login-w - --gl-popup-brand-w（740 - 320 = 420，表单 420 左右最舒服） 想左边更宽就加大 --gl-popup-brand-w */ --gl-popup-login-w:740px; /* 弹窗总宽（父主题 JS 写死的是 320px） */ --gl-popup-brand-w:320px; /* 左侧品牌栏宽度（窄屏 ≤767px 自动折叠到顶部） */ --gl-grad-page:linear-gradient(180deg,#d6e6ff 0%,#eef3fb 30%,#f7f9fd 60%,#fdfeff 100%); --gl-grad-blue:linear-gradient(180deg,#648cff,#4172fa); --gl-grad-cyan:linear-gradient(180deg,#7eb8ff,#5a9cfc); --gl-grad-red:linear-gradient(180deg,#f78989,#f56c6c); --gl-grad-green:linear-gradient(180deg,#7dd84a,#67c23a); --gl-grad-orange:linear-gradient(180deg,#f6c05a,#e6a23c); --gl-grad-white:linear-gradient(-180deg,#fff 8%,#f2f2f7 97%); --gl-grad-dark:linear-gradient(180deg,#2b3550,#1a2338); --gl-focus:0 0 0 5px rgba(65,114,250,.2); --gl-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2 8 10.2l4-4' fill='none' stroke='%234a5b78' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gl-bt:all .2s cubic-bezier(.22,.61,.36,1); } /* ============================================================ 1. 覆盖父主题全局变量（--ri-* 即 Bootstrap 主题变量） ============================================================ */ :root,[data-bs-theme=light]{ --ri-primary:#4172fa; --ri-primary-rgb:65,114,250; --ri-primary-text:#2f5ce0; --ri-primary-bg-subtle:#e2ebfe; --ri-primary-border-subtle:#bcd0fb; --ri-link-color:#1e3a5f; --ri-link-hover-color:#4172fa; --ri-link-color-rgb:30,58,95; --ri-link-hover-color-rgb:65,114,250; --ri-body-bg:#eef3fb; --ri-body-bg-rgb:238,243,251; --ri-body-color:#3d4a63; --ri-body-color-rgb:61,74,99; --ri-body-font-family:'HarmonyOS Sans SC','HarmonyOS Sans','Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Roboto,Arial,sans-serif; --ri-body-font-size:.9375rem; --ri-body-font-weight:500; --ri-body-line-height:1.6; --ri-emphasis-color:#0b1a33; --ri-heading-color:#0b1a33; --ri-secondary-color:rgba(30,58,95,.72); --ri-secondary-bg:rgba(238,243,251,.8); --ri-tertiary-bg:#f5f8fd; --ri-border-color:rgba(0,20,60,.08); --ri-border-color-translucent:rgba(200,218,245,.8); --ri-border-radius:.75rem; --ri-border-radius-sm:.5rem; --ri-border-radius-lg:1rem; --ri-border-radius-xl:1.25rem; --ri-border-radius-2xl:1.5rem; --ri-box-shadow:0 8px 32px rgba(0,20,60,.06); --ri-box-shadow-sm:0 4px 20px rgba(0,20,60,.04); --ri-box-shadow-lg:0 16px 56px rgba(0,20,60,.12); --ri-form-control-bg:rgba(255,255,255,.72); --ri-form-control-disabled-bg:rgba(238,243,251,.8); --ri-code-color:#4172fa; --ri-btn-border-radius:.625rem; --ri-btn-font-weight:600; --ri-btn-padding-y:.5rem; --ri-btn-padding-x:1.1rem; --ri-pagination-color:#1e3a5f; --ri-pagination-bg:rgba(255,255,255,.6); --ri-pagination-border-color:rgba(200,218,245,.9); --ri-pagination-active-bg:#4172fa; --ri-pagination-active-border-color:#4172fa; } /* 暗色模式玻璃变量 */ [data-bs-theme=dark]{ --gl-ink:#e8eefb; --gl-ink-2:#c3d0e6; --gl-ink-3:#93a3bd; --gl-line:rgba(120,150,205,.28); --gl-line-soft:rgba(120,150,205,.2); --gl-surface:rgba(24,32,52,.55); --gl-surface-strong:rgba(28,37,60,.72); --gl-white:rgba(255,255,255,.08); --gl-inner:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); --gl-inner-shadow:inset 0 1px 0 rgba(255,255,255,.08); --gl-shadow:0 8px 32px rgba(0,0,0,.35),var(--gl-inner-shadow); --gl-shadow-sm:0 4px 20px rgba(0,0,0,.28),var(--gl-inner-shadow); --gl-shadow-md:0 8px 24px rgba(0,0,0,.32),var(--gl-inner-shadow); --gl-shadow-lg:0 16px 56px rgba(0,0,0,.45),var(--gl-inner-shadow); --gl-shadow-hover:0 12px 36px rgba(0,0,0,.4),var(--gl-inner-shadow); --gl-grad-page:linear-gradient(180deg,#0e1424 0%,#111a2c 35%,#131c30 60%,#16203a 100%); --gl-grad-blue:linear-gradient(180deg,#5f92ff,#3f6ff0); --gl-grad-cyan:linear-gradient(180deg,#69a6f5,#4a83e6); --gl-grad-white:linear-gradient(-180deg,#2a3550 8%,#1d2740 97%); --gl-grad-dark:linear-gradient(180deg,#0f1729,#0b1120); --gl-grad-orange:linear-gradient(180deg,#f0b25a,#d9930f); --gl-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2 8 10.2l4-4' fill='none' stroke='%23c3d0e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ri-primary:#6b96ff; --ri-primary-rgb:107,150,255; --ri-body-bg:#101726; --ri-body-bg-rgb:16,23,38; --ri-body-color:#c3d0e6; --ri-body-color-rgb:195,208,230; --ri-link-color:#c3d0e6; --ri-link-hover-color:#6b96ff; --ri-heading-color:#e8eefb; --ri-emphasis-color:#f0f4fd; --ri-border-color:rgba(255,255,255,.1); --ri-form-control-bg:rgba(255,255,255,.06); } /* ============================================================ 2. 全局背景 / 排版 / 细节 ============================================================ */ body{ background-color:#eef3fb !important; background-image: radial-gradient(closest-side at 10% 6%,rgba(120,160,255,.30),rgba(120,160,255,0) 100%), radial-gradient(closest-side at 90% 8%,rgba(150,215,255,.26),rgba(150,215,255,0) 100%), radial-gradient(closest-side at 82% 92%,rgba(160,200,255,.26),rgba(160,200,255,0) 100%), radial-gradient(closest-side at 8% 88%,rgba(190,225,255,.22),rgba(190,225,255,0) 100%), var(--gl-grad-page) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; background-size:cover,cover,cover,cover,cover !important; color:var(--gl-ink-2); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } [data-bs-theme=dark] body{ background-color:#0e1424 !important; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--gl-ink); font-weight:700; letter-spacing:-.2px; } a{color:var(--gl-ink-2);transition:var(--gl-bt);} a:hover{color:var(--gl-blue);} hr{border-top-color:var(--gl-line-soft);opacity:1;} ::selection{background:rgba(65,114,250,.2);color:var(--gl-ink);} :focus-visible{outline:2px solid rgba(65,114,250,.55);outline-offset:2px;} /* 滚动条：细、圆、玻璃感 */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:rgba(65,114,250,.22); border-radius:20px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{background:rgba(65,114,250,.4);background-clip:padding-box;} /* 不支持 backdrop-filter 时的降级：提高不透明度保证可读性 */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--gl-surface:rgba(248,251,255,.95);--gl-surface-strong:rgba(252,253,255,.97);--gl-white:rgba(255,255,255,.95);} } /* ============================================================ 3. 页头 / 胶囊毛玻璃导航 ============================================================ */ .site-header{ background-color:transparent !important; background-image:none !important; box-shadow:none !important; color:var(--gl-ink) !important; padding:0 16px !important; } .site-header.navbar-sticky{ background-color:transparent !important; box-shadow:none !important; } .site-header.navbar-now{transform:translateY(-110px);} .site-header .navbar{ height:auto !important; min-height:var(--gl-nav-h); margin:12px auto; padding:var(--gl-nav-pad-y) 20px; max-width:1400px; background-color:var(--gl-surface) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong); border:1px solid var(--gl-line); border-radius:var(--gl-nav-r) !important; box-shadow:var(--gl-shadow); } .site-header.navbar-sticky .navbar{margin:8px auto;} /* 占位块（父主题 menu.php:59 的 .header-gap）必须与页头总高一致， 否则正文会被固定页头盖住或留白。 这里用 calc 跟随 --gl-nav-h 自动算，改令牌即可，不必手改这几个数： 总高 = 胶囊高 + 上下 margin(24) + 上下边框(2) + 少量余量(6) */ .header-gap{height:calc(var(--gl-nav-h) + 32px);} .header-transparent .header-gap{height:0;} .header-transparent main>.home-widget:first-child.home-search-box .search-bg{padding-top:calc(var(--gl-nav-h) + 46px);} /* Logo */ .site-header .logo-wrapper .logo.text, .site-header .logo-wrapper .logo{ font-size:1.5rem;font-weight:700;letter-spacing:-.5px;color:var(--gl-ink); } .site-header .logo-wrapper .logo img{max-height:34px;width:auto;} .site-header .navbar .sep:after{background-color:var(--gl-line);} /* 主菜单 */ .navbar .nav-list{gap:2px;display:flex;align-items:center;} .navbar .nav-list .menu-item{display:inline-block;position:relative;} .navbar .nav-list a, .navbar .nav-list>.menu-item>a{ color:var(--gl-ink-2) !important; font-weight:600; transition:var(--gl-bt); } .navbar .nav-list>.menu-item>a{ display:inline-block; border-radius:999px; } .navbar .nav-list>.menu-item>a:hover, .navbar .nav-list>.menu-item>a:focus{ color:var(--gl-blue) !important; } .navbar .nav-list>.menu-item.current-menu-item>a, .navbar .nav-list>.menu-item.current-menu-ancestor>a{ background-color:rgba(65,114,250,.15) !important; color:var(--gl-blue) !important; box-shadow:inset 0 0 0 1px rgba(65,114,250,.18); } .navbar .nav-list .menu-item-has-children>a:after{color:currentColor;opacity:.6;} /* 下拉子菜单：玻璃浮层 */ .navbar .nav-list .sub-menu{ background-color:var(--gl-surface-strong) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong); border:1px solid var(--gl-line); border-radius:var(--gl-r-md) !important; box-shadow:var(--gl-shadow-lg) !important; padding:8px !important; overflow:visible; } .navbar .nav-list .sub-menu:before{ border-bottom-color:var(--gl-line) !important; } .navbar .nav-list .sub-menu li{border-radius:var(--gl-r-xs);overflow:hidden;} .navbar .nav-list .sub-menu a{ border-radius:var(--gl-r-xs) !important; padding:8px 14px !important; color:var(--gl-ink-2) !important; font-weight:500; } .navbar .nav-list .sub-menu a:hover{ background-color:rgba(65,114,250,.14) !important; color:var(--gl-blue) !important; } /* 右侧动作区 */ .navbar .actions .action-btn{ color:var(--gl-ink-2) !important; border-radius:999px; padding:.35rem; transition:var(--gl-bt); } .navbar .actions .action-btn:hover{ color:var(--gl-blue) !important; background-color:rgba(65,114,250,.12); } /* 页头「登录」按钮（标记：） 父主题把它做成 padding:.35rem .9rem / radius:20px 的蓝色胶囊， 旧版 .login-btn（48px 高大按钮）又把它撑高，两个叠加后在页头里显得笨重。 这里重做为与其它 .action-btn 同高的紧凑胶囊，并补齐完整状态机。 */ .navbar .actions .action-btn.login-btn{ display:inline-flex; align-items:center; justify-content:center; height:34px; min-height:34px; padding:0 15px !important; margin:0; border:0 !important; border-radius:999px !important; background-color:transparent !important; background-image:linear-gradient(180deg,#6b92ff 0%,#3f6ff0 100%) !important; color:#fff !important; font-size:.8125rem; font-weight:600; line-height:1 !important; letter-spacing:0; text-decoration:none; box-shadow: 0 3px 10px rgba(44,71,146,.3), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 0 var(--gl-blue-deep) !important; transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,background-image .2s ease,color .2s ease; white-space:nowrap; -webkit-tap-highlight-color:transparent; } .navbar .actions .action-btn.login-btn i{ margin-right:5px !important; font-size:.8125rem; line-height:1; } .navbar .actions .action-btn.login-btn:hover{ background-image:linear-gradient(180deg,#5a83ff 0%,#2f61e8 100%) !important; color:#fff !important; transform:translateY(-1px); box-shadow: 0 6px 16px rgba(44,71,146,.4), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 0 #2852c4 !important; } .navbar .actions .action-btn.login-btn:active{ transform:translateY(0) scale(.97); box-shadow:0 2px 6px rgba(44,71,146,.35),inset 0 2px 4px rgba(20,45,110,.35) !important; } .navbar .actions .action-btn.login-btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 6px rgba(65,114,250,.45) !important; } @media (max-width:991.98px){ .navbar .actions .action-btn.login-btn{height:30px;padding:0 12px !important;font-size:.75rem;} .navbar .actions .action-btn.login-btn i{font-size:.75rem;} } .navbar .avatar-warp .avatar-img.rounded-circle{ border:2px solid rgba(255,255,255,.9); box-shadow:0 2px 10px rgba(0,20,60,.12); } .navbar .burger{ width:36px;height:36px;line-height:36px;text-align:center;border-radius:var(--gl-r-xs); color:var(--gl-ink-2);background-color:rgba(255,255,255,.55);border:1px solid var(--gl-line); } /* 悬浮用户面板 */ .hover-warp{ background-color:var(--gl-surface-strong) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong); border:1px solid var(--gl-line); border-radius:var(--gl-r-lg) !important; box-shadow:var(--gl-shadow-lg) !important; color:var(--gl-ink-2); overflow:hidden; } .hover-warp .hover-info, .hover-warp .hover-balance{border-color:var(--gl-line-soft) !important;} .hover-warp .hover-item, .hover-warp .abstop-item{border-radius:var(--gl-r-sm);transition:var(--gl-bt);} .hover-warp .hover-item:hover, .hover-warp .abstop-item:hover{background-color:rgba(65,114,250,.1);} /* 头部搜索浮层 */ .navbar-search{background-color:transparent;} .navbar-search .search-form{width:min(760px,100%);margin:0 auto;} /* 搜索框：玻璃胶囊 */ .search-form{ background-color:var(--gl-white); background-image:var(--gl-inner); -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:999px; padding:6px; box-shadow:var(--gl-shadow-sm); color:var(--gl-ink-2) !important; transition:var(--gl-bt); } /* 分类筛选下拉：独立玻璃胶囊 + 与输入框明确分隔 */ .search-form .search-select{ position:relative; flex:0 0 auto; max-width:170px; padding-right:14px; margin-right:14px; border-right:1px solid var(--gl-line); } .search-form .search-select .form-select{ border:1px solid var(--gl-line) !important; border-radius:var(--gl-r-xs) !important; background-color:rgba(255,255,255,.55) !important; color:var(--gl-ink) !important; font-size:.875rem !important; font-weight:600; line-height:1.4; padding:.42rem 2.2rem .42rem .95rem !important; box-shadow:none !important; cursor:pointer; transition:var(--gl-bt); } .search-form .search-select .form-select:hover{ border-color:rgba(65,114,250,.45) !important; background-color:rgba(255,255,255,.85) !important; } .search-form .search-select .form-select:focus{ border-color:var(--gl-blue) !important; background-color:rgba(255,255,255,.9) !important; box-shadow:var(--gl-focus) !important; } .search-form .search-select .form-select option{ background-color:#fff; color:var(--gl-ink); font-size:.875rem; } [data-bs-theme=dark] .search-form .search-select .form-select option{background-color:#1a2340;color:#e8eefb;} /* 关键词输入（右侧留白由 --gl-sfield-pad 统一控制） */ .search-form .search-fields{ position:relative; overflow:visible !important; border-radius:999px; --gl-sbtn:42px; /* 提交圆钮直径 */ --gl-sbtn-gap:5px; /* 圆钮距容器右侧 */ --gl-sfield-pad:3.2rem;/* 输入框右侧为圆钮预留的留白 */ } .search-form .search-fields input{ border:0 !important; background-color:transparent !important; color:var(--gl-ink) !important; outline:0 !important; font-weight:500; padding:.5rem var(--gl-sfield-pad) .5rem 1rem !important; } .search-form .search-fields input::placeholder{color:var(--gl-ink-3);opacity:.75;} /* ============================================================ 3.2 搜索提交按钮（重写） ------------------------------------------------------------ 父主题原规则： .search-form .search-fields button{ position:absolute;right:0;top:0;border:none!important; background:0 0!important;height:100%;padding:0 1rem;opacity:.6} `background:0 0` 是简写且带 !important，会连带清空 background-image， 因此必须用同等权重的长写覆盖；尺寸统一由 CSS 变量收口， 大屏/移动端只需改变量，不再重复声明 width/height/right。 ============================================================ */ .search-form .search-fields button{ /* 定位：垂直居中、贴容器右侧 */ position:absolute !important; top:50% !important; right:var(--gl-sbtn-gap) !important; left:auto !important; bottom:auto !important; transform:translateY(-50%); /* 尺寸 */ width:var(--gl-sbtn); height:var(--gl-sbtn); min-width:var(--gl-sbtn); padding:0 !important; margin:0 !important; box-sizing:border-box; /* 盒模型 */ display:inline-flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:50% !important; outline:0 !important; overflow:hidden; line-height:1 !important; opacity:1 !important; /* 配色：蓝色立体渐变（顶部高光 + 底部内暗边） */ color:#fff !important; background-color:transparent !important; background-image:linear-gradient(180deg,#7aa0ff 0%,#4a7bfa 52%,#3f6ff0 100%) !important; box-shadow: 0 3px 8px rgba(44,71,146,.34), 0 1px 2px rgba(44,71,146,.2), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 0 rgba(32,66,158,.55) !important; -webkit-appearance:none; appearance:none; cursor:pointer; user-select:none; transition:transform .16s ease,box-shadow .2s ease,background-image .2s ease; } /* 图标固定纯白，且不拦截点击 */ .search-form .search-fields button i, .search-form .search-fields button svg, .search-form .search-fields button span{ color:#fff !important; fill:#fff !important; font-size:calc(var(--gl-sbtn) * .4); line-height:1; pointer-events:none; } /* 悬停：加深并轻微放大 */ .search-form .search-fields button:hover{ background-image:linear-gradient(180deg,#6b93ff 0%,#3d6ef5 52%,#3262e6 100%) !important; box-shadow: 0 6px 16px rgba(44,71,146,.45), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 0 rgba(28,58,140,.6) !important; transform:translateY(-50%) scale(1.04); } /* 按下 */ .search-form .search-fields button:active{ background-image:linear-gradient(180deg,#4172fa 0%,#3262e6 100%) !important; box-shadow: 0 2px 5px rgba(44,71,146,.4), inset 0 2px 4px rgba(20,45,110,.4) !important; transform:translateY(-50%) scale(.92); } /* 键盘聚焦（双环，保证在浅色/深色底上都可见） */ .search-form .search-fields button:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 6px rgba(65,114,250,.45), inset 0 1px 0 rgba(255,255,255,.5) !important; } /* 禁用 / 提交中 */ .search-form .search-fields button:disabled, .search-form .search-fields button.is-loading{ opacity:.55 !important; cursor:not-allowed; background-image:linear-gradient(180deg,#9db4e8,#8aa3dd) !important; box-shadow:none !important; transform:translateY(-50%); } .search-form .search-fields button:disabled:hover, .search-form .search-fields button.is-loading:hover{ transform:translateY(-50%); background-image:linear-gradient(180deg,#9db4e8,#8aa3dd) !important; } /* ============================================================ 3.1 语言切换下拉（translate.js 注入的 native select） ============================================================ */ .navbar .actions .language-selector, .navbar .actions .language-selector:hover{ display:inline-flex; align-items:center; padding:0 !important; background-color:transparent !important; box-shadow:none !important; border-radius:0; } .navbar .actions .language-selector>span{display:none;} .navbar .actions .language-selector select, .navbar .actions .language-selector .form-select, #translate select, #translateSelectLanguage, select[class*="SelectLanguage"]{ -webkit-appearance:none; appearance:none; height:34px; padding:0 30px 0 14px !important; margin:0; border:1px solid var(--gl-line) !important; border-radius:999px !important; background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-caret) !important; background-repeat:no-repeat !important; background-position:right 11px center !important; background-size:13px 13px !important; color:var(--gl-ink-2) !important; font-size:.8125rem; font-weight:600; line-height:32px; box-shadow:none !important; cursor:pointer; transition:var(--gl-bt); } .navbar .actions .language-selector select:hover, #translate select:hover, #translateSelectLanguage:hover, select[class*="SelectLanguage"]:hover{ border-color:rgba(65,114,250,.5) !important; background-color:rgba(255,255,255,.88) !important; color:var(--gl-blue) !important; } .navbar .actions .language-selector select:focus, #translate select:focus, #translateSelectLanguage:focus, select[class*="SelectLanguage"]:focus{ border-color:var(--gl-blue) !important; box-shadow:var(--gl-focus) !important; outline:0 !important; } .navbar .actions .language-selector select option, #translate select option, #translateSelectLanguage option, select[class*="SelectLanguage"] option{ background-color:#fff; color:var(--gl-ink); font-size:.8125rem; padding:6px 10px; } [data-bs-theme=dark] .navbar .actions .language-selector select, [data-bs-theme=dark] #translate select, [data-bs-theme=dark] #translateSelectLanguage, [data-bs-theme=dark] select[class*="SelectLanguage"]{ background-color:rgba(255,255,255,.08) !important; border-color:var(--gl-line) !important; color:var(--gl-ink-2) !important; } [data-bs-theme=dark] .navbar .actions .language-selector select option, [data-bs-theme=dark] #translate select option, [data-bs-theme=dark] select[class*="SelectLanguage"] option{ background-color:#1a2340; color:#e8eefb; } /* ============================================================ 4. 离屏菜单 / 移动端 / 浮动小组件 ============================================================ */ .off-canvas{ background-color:var(--gl-surface-strong) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong); border-left:1px solid var(--gl-line); box-shadow:var(--gl-shadow-lg); } .off-canvas .canvas-close{ width:36px;height:36px;line-height:36px;text-align:center; border-radius:999px;background-color:rgba(255,255,255,.6); border:1px solid var(--gl-line);color:var(--gl-ink-2); } .off-canvas .mobile-menu a{color:var(--gl-ink-2);} .off-canvas .mobile-menu .menu-item>a{ display:block;padding:10px 16px;border-radius:var(--gl-r-sm); transition:var(--gl-bt); } .off-canvas .mobile-menu .menu-item>a:hover, .off-canvas .mobile-menu .current-menu-item>a{ background-color:rgba(65,114,250,.12);color:var(--gl-blue); } .off-canvas .sub-menu{ background-color:rgba(255,255,255,.4) !important; border-radius:var(--gl-r-sm); padding:6px; margin:4px 0; } .m-navbar{ background-color:var(--gl-surface-strong) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong); border-top:1px solid var(--gl-line); box-shadow:0 -8px 24px rgba(0,20,60,.08) !important; } .m-navbar ul li a{color:var(--gl-ink-3);transition:var(--gl-bt);} .m-navbar ul li a.active, .m-navbar ul li a:hover{color:var(--gl-blue);} .dimmer{ background:rgba(11,26,51,.32) !important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .rollbar .actions{ background-color:var(--gl-surface-strong) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:var(--gl-r-md) !important; box-shadow:var(--gl-shadow-md) !important; } .rollbar .actions li a{color:var(--gl-ink-2);} .rollbar .actions li a:hover{color:var(--gl-blue);background-color:rgba(65,114,250,.1);} .back-top{ background-image:var(--gl-grad-blue) !important; background-color:transparent !important; border-radius:var(--gl-r-sm) !important; box-shadow:0 6px 18px rgba(44,71,146,.35) !important; color:#fff !important; transition:var(--gl-bt) !important; } .back-top:hover{transform:translateY(-3px) scale(.97);} /* ============================================================ 5. 按钮：立体渐变 / 玻璃 / 柔和色 ============================================================ */ .btn{ --ri-btn-border-radius:.625rem; --ri-btn-font-weight:600; --ri-btn-padding-y:.5rem; --ri-btn-padding-x:1.1rem; letter-spacing:.2px; transition:var(--gl-bt); } .btn:not(.btn-link):not(.btn-close){box-shadow:var(--gl-shadow-sm);} .btn:hover{transform:scale(.97);} .btn:active{transform:scale(.94);} .btn-sm{ --ri-btn-padding-y:.32rem; --ri-btn-padding-x:.85rem; --ri-btn-font-size:.8125rem; --ri-btn-border-radius:.5rem; } .btn-lg{--ri-btn-padding-y:.7rem;--ri-btn-padding-x:1.5rem;--ri-btn-border-radius:.75rem;} .btn-pill,.rounded-pill .btn{border-radius:999px !important;} /* 主色 / 蓝 */ .btn-primary, .btn-info{ --ri-btn-bg:transparent; --ri-btn-border-color:rgba(51,100,237,.35); --ri-btn-hover-bg:transparent; --ri-btn-hover-border-color:rgba(51,100,237,.45); --ri-btn-active-bg:transparent; --ri-btn-disabled-bg:transparent; background-image:var(--gl-grad-blue); color:#fff; box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 var(--gl-blue-deep); } .btn-primary:hover, .btn-info:hover{ background-image:linear-gradient(180deg,#5a7fff,var(--gl-blue-deep)); box-shadow:0 4px 8px 0 rgba(44,71,146,.4),inset 0 -2px 0 0 #2852c4; color:#fff; } .btn-primary:focus-visible, .btn-info:focus-visible{box-shadow:var(--gl-focus);} /* 成功 / 浅蓝下载按钮 */ .btn-success{ --ri-btn-bg:transparent; --ri-btn-border-color:rgba(65,114,250,.25); --ri-btn-hover-bg:transparent; --ri-btn-active-bg:transparent; background-image:var(--gl-grad-cyan); color:#fff; box-shadow:0 3px 4px 0 rgba(40,80,160,.22),inset 0 -2px 0 0 #488ae0; } .btn-success:hover{ background-image:linear-gradient(180deg,#6da8ff,#488ae0); color:#fff; } /* 危险 / 红 */ .btn-danger{ --ri-btn-bg:transparent; --ri-btn-border-color:rgba(245,108,108,.35); --ri-btn-hover-bg:transparent; --ri-btn-active-bg:transparent; background-image:var(--gl-grad-red); color:#fff; box-shadow:0 3px 4px 0 rgba(180,40,40,.25),inset 0 -2px 0 0 #e05555; } .btn-danger:hover{background-image:linear-gradient(180deg,#f07070,#e05555);color:#fff;} /* 白 / 浅色 */ .btn-white, .btn-light{ --ri-btn-color:#3b426b; --ri-btn-bg:transparent; --ri-btn-border-color:#e9eaec; --ri-btn-hover-color:#3b426b; --ri-btn-hover-bg:transparent; --ri-btn-active-bg:transparent; background-image:var(--gl-grad-white); box-shadow:0 3px 4px 0 rgba(44,71,146,.2),inset 0 -2px 0 0 #e1e3e8; color:#3b426b; } .btn-white:hover, .btn-light:hover{ background-image:linear-gradient(-180deg,#f8f9fc 8%,#e8e9f0 97%); box-shadow:0 4px 8px 0 rgba(44,71,146,.25),inset 0 -2px 0 0 #d0d2d8; color:#3b426b; } /* 深色 */ .btn-dark{ --ri-btn-bg:transparent; --ri-btn-hover-bg:transparent; --ri-btn-active-bg:transparent; background-image:var(--gl-grad-dark); color:#fff; box-shadow:0 3px 4px 0 rgba(10,16,32,.3),inset 0 -2px 0 0 #0b1120; } /* 柔和色按钮 -> 玻璃质感 */ .btn-primary-soft,.btn-info-soft,.btn-success-soft,.btn-danger-soft,.btn-warning-soft,.btn-secondary-soft{ background-image:var(--gl-inner) !important; border:1px solid var(--gl-line) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); box-shadow:var(--gl-shadow-sm) !important; font-weight:600; } .btn-primary-soft{color:var(--gl-blue) !important;background-color:rgba(65,114,250,.12) !important;} .btn-info-soft{color:#4a83e6 !important;background-color:rgba(90,156,252,.14) !important;} .btn-success-soft{color:#3d8f6d !important;background-color:rgba(103,194,58,.14) !important;} .btn-danger-soft{color:#e05555 !important;background-color:rgba(245,108,108,.14) !important;} .btn-warning-soft{color:#a9770f !important;background-color:rgba(230,162,60,.16) !important;} .btn-primary-soft:hover{background-image:var(--gl-grad-blue) !important;color:#fff !important;border-color:transparent !important;} .btn-danger-soft:hover{background-image:var(--gl-grad-red) !important;color:#fff !important;border-color:transparent !important;} .btn-success-soft:hover{background-image:var(--gl-grad-cyan) !important;color:#fff !important;border-color:transparent !important;} .btn-info-soft:hover{background-image:var(--gl-grad-cyan) !important;color:#fff !important;border-color:transparent !important;} .btn-link{color:var(--gl-blue);text-decoration:none;background-image:none;box-shadow:none;} .btn-link:hover{color:var(--gl-blue-deep);} .btn-outline-light{ border-color:rgba(255,255,255,.5) !important; background-color:rgba(255,255,255,.12) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); color:#fff !important; } .btn-group .btn{border-radius:var(--gl-r-xs) !important;} /* ============================================================ 6. 表单控件：玻璃输入 ============================================================ */ .form-control,.form-select,textarea.form-control, select,textarea,input[type=text],input[type=password],input[type=email],input[type=search],input[type=number]{ border-radius:var(--gl-r-xs) !important; border:1px solid var(--gl-line) !important; background-color:var(--gl-white) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--gl-ink) !important; transition:var(--gl-bt); } .form-control:focus,.form-select:focus,textarea.form-control:focus, select:focus,textarea:focus,input[type=text]:focus,input[type=password]:focus, input[type=email]:focus,input[type=search]:focus,input[type=number]:focus{ border-color:var(--gl-blue) !important; background-color:rgba(255,255,255,.85) !important; box-shadow:var(--gl-focus) !important; outline:0 !important; } .form-control::placeholder,textarea::placeholder{color:var(--gl-ink-3);opacity:.7;} .form-select{background-color:var(--gl-white) !important;} .form-label{color:var(--gl-ink);font-weight:600;font-size:.8125rem;} .form-text,.form-hint{color:var(--gl-ink-3);} .form-check-input{ border-color:var(--gl-line) !important; background-color:rgba(255,255,255,.7) !important; } .form-check-input:checked{ background-color:var(--gl-blue) !important; border-color:var(--gl-blue) !important; } .form-check-input:focus{box-shadow:var(--gl-focus) !important;} .input-group-text{ background-color:rgba(255,255,255,.55) !important; border-color:var(--gl-line) !important; color:var(--gl-ink-3); border-radius:var(--gl-r-xs) !important; } .form-switch .form-check-input{ background-color:rgba(200,218,245,.7) !important; } /* ============================================================ 7. 卡片 / 文章列表卡片 ============================================================ */ .card,.post-item,.price-card,.division-item{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line) !important; border-radius:var(--gl-r-xl) !important; box-shadow:var(--gl-shadow-sm) !important; } .card{padding:1.75rem;} @media (max-width:575.98px){.card{padding:1.1rem;border-radius:var(--gl-r-lg) !important;}} .card-header{ background-color:transparent !important; border-bottom:1px solid var(--gl-line-soft) !important; padding:0 0 1rem; font-weight:700; color:var(--gl-ink); font-size:1.05rem; } .card-body{padding:0;} .card-footer{background-color:transparent !important;border-top:1px solid var(--gl-line-soft) !important;} .post-item{transition:var(--gl-bt);overflow:hidden;} .post-item:hover{ transform:translateY(-4px); box-shadow:var(--gl-shadow-hover) !important; border-color:rgba(65,114,250,.28) !important; } .post-item.item-grid,.post-item.item-list{border-radius:var(--gl-r-lg) !important;} .post-item .entry-wrapper{padding:14px 16px;} .post-item.item-list .entry-wrapper{padding:4px 16px;} .post-item .entry-title{ font-size:.9375rem; font-weight:600; line-height:1.5; margin-bottom:6px; } .post-item .entry-title a{color:var(--gl-ink);} .post-item .entry-title a:hover{color:var(--gl-blue);} .post-item .entry-desc{color:var(--gl-ink-3);font-size:.8125rem;line-height:1.6;} .post-item .entry-meta{color:var(--gl-ink-3);font-size:.75rem;} .post-item .entry-meta a{color:var(--gl-ink-3);} .post-item .entry-meta a:hover{color:var(--gl-blue);} .post-item .entry-cat-dot>a{color:var(--gl-blue);font-weight:600;font-size:.75rem;} .post-item .entry-media .media-img{ background-color:rgba(226,235,251,.8); border-radius:inherit; } .post-item .entry-media{border-radius:var(--gl-r-lg) var(--gl-r-lg) 0 0;overflow:hidden;} .post-item.item-list .entry-media{border-radius:var(--gl-r-md) !important;} .post-item .post-format-icon{ background-color:rgba(11,26,51,.42) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; border-radius:999px; } .post-item .media-preview .progress, .post-item .entry-media .progress{ background-color:rgba(255,255,255,.35) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:999px; overflow:hidden; } .post-item .progress-bar{background-image:var(--gl-grad-blue);} /* 徽标 / 标签 */ .badge{ border-radius:999px !important; font-weight:600; padding:.3em .75em; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .badge.bg-dark,.badge.bg-dark.bg-opacity-75{ background-color:rgba(11,26,51,.65) !important; border:1px solid rgba(255,255,255,.18); } .badge.bg-warning{ background-image:linear-gradient(180deg,#f6c05a,#e6a23c) !important; color:#4a3405 !important; border:1px solid rgba(255,255,255,.35); } .badge.bg-primary{background-image:var(--gl-grad-blue) !important;color:#fff !important;} .badge.bg-success{background-image:var(--gl-grad-green) !important;color:#fff !important;} .badge.bg-danger{background-image:var(--gl-grad-red) !important;color:#fff !important;} .badge.bg-info{background-image:var(--gl-grad-cyan) !important;color:#fff !important;} .badge.bg-secondary,.badge.bg-light{ background-color:rgba(255,255,255,.7) !important; color:var(--gl-ink-2) !important; border:1px solid var(--gl-line); } /* 半透明徽标（bg-opacity-10 / bg-opacity-75）：改为淡彩玻璃标签 */ .badge.bg-primary.bg-opacity-10, .badge.bg-info.bg-opacity-10{ background-image:none !important; background-color:rgba(65,114,250,.12) !important; color:var(--gl-blue) !important; border:1px solid rgba(65,114,250,.22) !important; } .badge.bg-success.bg-opacity-10{ background-image:none !important; background-color:rgba(103,194,58,.14) !important; color:#3d8f6d !important; border:1px solid rgba(103,194,58,.26) !important; } .badge.bg-warning.bg-opacity-10{ background-image:none !important; background-color:rgba(230,162,60,.16) !important; color:#a9770f !important; border:1px solid rgba(230,162,60,.3) !important; } .badge.bg-danger.bg-opacity-10{ background-image:none !important; background-color:rgba(245,108,108,.14) !important; color:#c94848 !important; border:1px solid rgba(245,108,108,.26) !important; } /* 状态标签（移植自 样式.css .status-tag） */ .status-tag{display:inline-block;padding:2px 12px;border-radius:20px;font-size:11px;font-weight:500;} .tag-active{background:rgba(103,194,58,.12);color:#67c23a;} .tag-unused{background:rgba(144,147,153,.1);color:#909399;} .tag-banned{background:rgba(245,108,108,.12);color:#f56c6c;} .tag-expired{background:rgba(230,162,60,.12);color:#e6a23c;} .tag-pending{background:rgba(65,114,250,.12);color:#4172fa;} /* ============================================================ 8. 面包屑 / 详情页头部 ============================================================ */ .container-full.bg-white{ background-color:rgba(255,255,255,.5) !important; background-image:var(--gl-inner); -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border-bottom:1px solid var(--gl-line); box-shadow:none !important; } .breadcrumb{margin-bottom:0;} .breadcrumb a,.breadcrumb-item a{color:var(--gl-ink-3);font-size:.8125rem;} .breadcrumb a:hover{color:var(--gl-blue);} .breadcrumb-item+.breadcrumb-item::before{color:var(--gl-line);} .breadcrumb-item.active{color:var(--gl-ink-2);font-weight:600;} .article-header .post-title{ font-size:1.65rem; line-height:1.4; font-weight:700; color:var(--gl-ink); letter-spacing:-.4px; } .article-meta{color:var(--gl-ink-3);font-size:.8125rem;} .article-meta li,.article-meta span{color:var(--gl-ink-3);} .article-meta a{color:var(--gl-ink-2);} .article-meta a:hover{color:var(--gl-blue);} .article-meta li{list-style:none;padding:3px 0;} /* ============================================================ 9. 正文内容 ============================================================ */ .post-content{font-size:1rem;line-height:1.9;color:var(--gl-ink-2);} .post-content h2,.post-content h3,.post-content h4{ color:var(--gl-ink);margin-top:1.6em;margin-bottom:.7em;font-weight:700; } .post-content h2{ padding-left:14px;border-left:4px solid var(--gl-blue); border-radius:2px;line-height:1.4; } .post-content a:not(.btn){color:var(--gl-blue);text-decoration:none;border-bottom:1px solid rgba(65,114,250,.3);} .post-content a:not(.btn):hover{border-bottom-color:var(--gl-blue);} .post-content img{border-radius:var(--gl-r-md);box-shadow:var(--gl-shadow-sm);max-width:100%;height:auto;} .post-content blockquote{ margin:1.2em 0;padding:16px 20px; background-color:rgba(255,255,255,.55); background-image:var(--gl-inner); -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-left:4px solid var(--gl-blue); border-radius:var(--gl-r-md); color:var(--gl-ink-2); } .post-content code{ background-color:rgba(65,114,250,.1); color:var(--gl-blue-deep); padding:.15em .45em;border-radius:6px;font-size:.9em; } .post-content pre{ background-color:rgba(16,25,45,.92) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid rgba(255,255,255,.1); border-radius:var(--gl-r-md); padding:18px; box-shadow:var(--gl-shadow-md); } .post-content pre code{background:0 0;color:#e6edf6;padding:0;} .post-content ul,.post-content ol{padding-left:1.4em;} .post-content li{margin-bottom:.35em;} .post-content table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--gl-r-md);overflow:hidden;box-shadow:var(--gl-shadow-sm);} .post-content th{ background-color:rgba(65,114,250,.06);color:var(--gl-ink); font-weight:600;padding:12px 14px;text-align:left;border-bottom:1px solid rgba(0,20,60,.08); } .post-content td{padding:11px 14px;border-bottom:1px solid rgba(0,20,60,.04);color:var(--gl-ink-2);} .post-content .single-page-link,.post-content .custom-nav{margin-top:1.4rem;} /* ============================================================ 10. 侧边栏 / 小工具 ============================================================ */ .sidebar .widget{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:var(--gl-r-xl); box-shadow:var(--gl-shadow-sm); padding:20px; margin-bottom:20px; } .sidebar .widget:last-child{margin-bottom:0;} .widget-title,.sidebar .widget .widget-title,.off-canvas .widget .widget-title{ border-bottom:1px solid var(--gl-line-soft) !important; background-color:transparent !important; color:var(--gl-ink) !important; font-size:1rem;font-weight:700; padding:0 0 14px !important;margin:0 0 18px !important; position:relative; } .widget-title:after{ content:'';position:absolute;left:0;bottom:-1px;width:40px;height:3px; background-image:var(--gl-grad-blue);border-radius:3px; } .sidebar .widget .post-item{ background-color:rgba(255,255,255,.55) !important; box-shadow:none !important; border-color:var(--gl-line-soft) !important; } .sidebar .widget .post-item:hover{ box-shadow:var(--gl-shadow-sm) !important; border-color:rgba(65,114,250,.28) !important; } /* 排行榜 */ .sidebar-ranking-list .ranking-item{padding:8px 0;border-bottom:1px dashed var(--gl-line-soft);transition:var(--gl-bt);} .sidebar-ranking-list .ranking-item:last-child{border-bottom:0;} .sidebar-ranking-list .ranking-item:hover{padding-left:6px;} .sidebar-ranking-list .ranking-num{ font-size:.75rem !important;margin-right:.6rem;padding:4px 9px !important; border-radius:8px !important;min-width:24px;text-align:center; background-color:rgba(200,218,245,.5) !important;color:var(--gl-ink-2) !important; box-shadow:none !important; } .sidebar-ranking-list .ranking-item:nth-child(1) .ranking-num{background-image:var(--gl-grad-red) !important;color:#fff !important;} .sidebar-ranking-list .ranking-item:nth-child(2) .ranking-num{background-image:linear-gradient(180deg,#f6c05a,#e6a23c) !important;color:#fff !important;} .sidebar-ranking-list .ranking-item:nth-child(3) .ranking-num{background-image:var(--gl-grad-cyan) !important;color:#fff !important;} .ranking-title,.sidebar-ranking-list .ranking-title{color:var(--gl-ink-2);font-size:.875rem;} .sidebar-ranking-list .ranking-item:hover .ranking-title{color:var(--gl-blue);} /* 作者卡 */ .sidebar-author-info .author-header{padding-bottom:14px;border-bottom:1px solid var(--gl-line-soft);} .sidebar-author-info .author-body{padding:14px 0;} .avatar{border-radius:999px;overflow:hidden;} .avatar img,.avatar-img{ border-radius:999px; border:2px solid rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(0,20,60,.12); } .avatar-xl,.avatar-xl img{width:88px;height:88px;} /* 付费/下载模块（通用） */ .ri-down-warp{ background-color:rgba(255,255,255,.62) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line) !important; border-radius:var(--gl-r-lg) !important; padding:20px !important; box-shadow:var(--gl-shadow-sm) !important; overflow:hidden; } .down-buy-warp .buy-title{ color:var(--gl-ink) !important; font-weight:700;font-size:1rem; display:flex;align-items:center;gap:8px; padding-bottom:12px;margin-bottom:14px !important; border-bottom:1px solid var(--gl-line-soft); } .down-buy-warp .buy-title i{color:var(--gl-blue);} .down-buy-warp .buy-desc{color:var(--gl-ink-3) !important;font-size:.875rem;} .prices-info{ background-color:rgba(65,114,250,.06) !important; border:1px dashed rgba(65,114,250,.35) !important; border-radius:var(--gl-r-sm) !important; color:var(--gl-ink-2) !important; padding:12px 14px !important; } .prices-info .price-item{padding:3px 0;} .prices-info .price-item span{color:var(--gl-blue);font-weight:600;} .ri-down-warp .down-msg{ background-image:var(--gl-grad-red);color:#fff; box-shadow:0 4px 12px rgba(180,40,40,.25); } .copy-pwd{opacity:.9;} /* ============================================================ 11. 商品/资源信息区（single shop 样式） ============================================================ */ .archive-shop{ background-color:rgba(255,255,255,.55) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:var(--gl-r-xl); padding:18px; box-shadow:var(--gl-shadow-sm); } .archive-shop .img-box{ position:relative;border-radius:var(--gl-r-lg);overflow:hidden; box-shadow:var(--gl-shadow-md); } .archive-shop .img-box img{display:block;width:100%;height:auto;} .archive-shop .views-rounded-dot{ position:absolute;left:10px;top:10px;width:10px;height:10px;border-radius:999px; background-image:var(--gl-grad-blue);box-shadow:0 0 0 4px rgba(65,114,250,.18); } .archive-shop .info-box .article-meta{ background-color:rgba(255,255,255,.5); border:1px solid var(--gl-line-soft); border-radius:var(--gl-r-md); padding:12px 16px; } .archive-shop .buy-btns{display:flex;flex-wrap:wrap;gap:10px;} /* ============================================================ 12. 作者/标签/上下篇/相关文章/社交 ============================================================ */ .entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem;} .entry-tags a,.entry-tags .tag{ display:inline-block;padding:5px 14px;border-radius:999px; background-color:rgba(65,114,250,.1); border:1px solid var(--gl-line-soft); color:var(--gl-blue);font-size:.8125rem;text-decoration:none; transition:var(--gl-bt); } .entry-tags a:hover{background-image:var(--gl-grad-blue);color:#fff;border-color:transparent;} .entry-navigation{margin-top:1.5rem;} .entry-navigation a.entry-page-prev, .entry-navigation a.entry-page-next{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line) !important; border-radius:var(--gl-r-lg) !important; box-shadow:var(--gl-shadow-sm) !important; transition:var(--gl-bt); min-height:64px; } .entry-navigation a.entry-page-prev:hover, .entry-navigation a.entry-page-next:hover{ transform:translateY(-3px); box-shadow:var(--gl-shadow-hover) !important; border-color:rgba(65,114,250,.3) !important; } .entry-navigation .title,.entry-navigation .rnav{color:var(--gl-ink);font-weight:600;} .entry-navigation .entry-page-icon{ background-color:rgba(65,114,250,.12); color:var(--gl-blue); border-radius:var(--gl-r-sm); } .entry-navigation a:hover .entry-page-icon{background-image:var(--gl-grad-blue);color:#fff;} .related-posts{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:var(--gl-r-xl); padding:20px; box-shadow:var(--gl-shadow-sm); } .related-posts .related-posts-title{color:var(--gl-ink);font-size:1.15rem;} .related-posts .related-posts-title:before{ content:'';display:inline-block;width:4px;height:18px;margin-right:10px; background-image:var(--gl-grad-blue);border-radius:3px;vertical-align:-2px; } .entry-social{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; border:1px solid var(--gl-line); border-radius:var(--gl-r-lg); padding:16px 20px; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); box-shadow:var(--gl-shadow-sm); } /* ============================================================ 13. 评论 ============================================================ */ #comments.entry-comments{ background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-line); border-radius:var(--gl-r-xl) !important; padding:24px !important; margin-top:1.5rem; box-shadow:var(--gl-shadow-sm); } .comments-title{font-size:1.15rem;font-weight:700;color:var(--gl-ink);margin-bottom:1.2rem;} .comment-form .comment-form-author, .comment-form .comment-form-email, .comment-form .comment-form-url{margin-bottom:12px;} .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]), .comment-form textarea, #comments input:not([type=submit]):not([type=checkbox]):not([type=hidden]), #comments textarea{ width:100%;padding:12px 18px; border:1px solid var(--gl-line) !important; border-radius:var(--gl-r-sm) !important; background-color:var(--gl-white) !important; color:var(--gl-ink) !important; outline:0;transition:var(--gl-bt); } #comments input:not([type=submit]):focus,#comments textarea:focus{ border-color:var(--gl-blue) !important;box-shadow:var(--gl-focus) !important; } #comments .submit,.comment-form .submit, #comments input[type=submit]{ display:inline-flex;align-items:center;justify-content:center; height:42px;padding:0 26px;border:0;border-radius:var(--gl-r-xs); background-image:var(--gl-grad-blue);color:#fff;font-weight:600;font-size:.875rem; box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 var(--gl-blue-deep); transition:var(--gl-bt);cursor:pointer; } #comments input[type=submit]:hover{transform:scale(.97);} .comments-list{list-style:none;padding:0;margin:0;} .comments-list .comment-inner{ background-color:rgba(255,255,255,.5); border:1px solid var(--gl-line-soft); border-radius:var(--gl-r-md); padding:14px 16px; margin-top:12px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:var(--gl-bt); } .comments-list .comment-inner:hover{border-color:rgba(65,114,250,.28);box-shadow:var(--gl-shadow-sm);} .comment-author .nickname,.nickname{color:var(--gl-ink);font-weight:600;} .comment-content{color:var(--gl-ink-2);font-size:.875rem;} .comment-meta,.comment-time{color:var(--gl-ink-3);font-size:.75rem;} .comments-nav .comments-pagination{margin-top:1rem;} /* ============================================================ 14. 分页 ============================================================ */ .pagination{gap:6px;flex-wrap:wrap;} .pagination .page-item{margin:0 !important;} .pagination .page-link,.page-link{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 12px !important;margin:0 !important; border:1.5px solid var(--gl-line) !important; border-radius:var(--gl-r-xs) !important; background-color:rgba(255,255,255,.6) !important; background-image:var(--gl-inner); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--gl-ink-2) !important; font-size:.8125rem;font-weight:600; box-shadow:none !important;line-height:1 !important; transition:var(--gl-bt); } .pagination .page-link:hover,.page-link:hover{ background-color:rgba(65,114,250,.1) !important; border-color:rgba(65,114,250,.35) !important; color:var(--gl-blue) !important; } .pagination .page-item.active .page-link,.page-item.active .page-link{ background-image:var(--gl-grad-blue) !important; background-color:transparent !important; border-color:transparent !important; color:#fff !important; box-shadow:0 4px 12px rgba(65,114,250,.35) !important; } .pagination .page-item.disabled .page-link,.page-item.disabled .page-link{ background-color:rgba(255,255,255,.35) !important; border-color:var(--gl-line-soft) !important; color:#b6c0d3 !important; opacity:.75; box-shadow:none !important; } .comments-pagination .page-numbers,.page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;margin:0 3px; border:1.5px solid var(--gl-line);border-radius:var(--gl-r-xs); background-color:rgba(255,255,255,.6);color:var(--gl-ink-2); font-size:.8125rem;font-weight:600;text-decoration:none; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:var(--gl-bt); } .page-numbers:hover{background-color:rgba(65,114,250,.1);border-color:rgba(65,114,250,.35);color:var(--gl-blue);} .page-numbers.current{background-image:var(--gl-grad-blue);border-color:transparent;color:#fff;} /* ============================================================ 15. 弹层 / 提示 / 列表组 ============================================================ */ /* ------------------------------------------------------------ 15.1 弹层（ri.popup）重做 ------------------------------------------------------------ main.min.js 的 popup() 生成的结构（JS 不能改）：
…内容…
主要用途：登录/注册/找回密码表单（宽 320）、公告（380）、 支付提示（280）、账号操作提示（240）、分享二维码。 父主题的两个缺陷 → 本版修正： 1. .ri-popup-body 只是「布局壳」（其内 .ri-popup-close 是 transform:translateY(25%) 悬在卡片下方的圆形按钮），上一版 把玻璃底错误地加在它身上，而内部 .ri-popup-content 又自带 #fff 底 → 双层白卡、边缘发灰。 → 现在玻璃底交给 .ri-popup-content，body 回归纯透明布局壳。 2. .ri-popup-body 上的 overflow:hidden 会把关闭按钮裁掉。 → body 改 overflow:visible，关闭按钮移入卡片右上角。 ------------------------------------------------------------ */ /* 遮罩层 */ .ri-popup{ background-color:rgba(11,26,51,.4) !important; -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%); padding:24px 16px; -webkit-tap-highlight-color:transparent; } /* 布局壳：全透明，不再承担任何视觉 */ .ri-popup .ri-popup-body{ background-color:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; overflow:visible !important; padding:0 !important; margin:auto; width:auto; min-width:min(280px,100%); max-width:min(100%,520px); transform:translateY(-24px) scale(.96); transition:transform .32s cubic-bezier(.22,1,.36,1); /* * 注意：这里绝对不能写 opacity / visibility， * 显隐由父主题的 .ri-popup-open .ri-popup-body 控制。 */ } .ri-popup-open .ri-popup-body{transform:translateY(0) scale(1);} /* 卡片本体：毛玻璃面板 */ .ri-popup .ri-popup-content{ position:relative; padding:26px 22px 22px; background-color:rgba(255,255,255,.88) !important; background-image:var(--gl-inner) !important; -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,.75); border-radius:var(--gl-r-xl); box-shadow:0 24px 64px rgba(0,20,60,.18),0 4px 16px rgba(0,20,60,.08),var(--gl-inner-shadow); color:var(--gl-ink-2); font-size:.875rem; line-height:1.75; /* 内容过高（长公告 / 小屏下的登录表单）时改为卡片内滚动， 而不是让整张卡片超出视口；关闭按钮在 .ri-popup-body 上，不会跟着滚走 */ max-height:min(80vh,760px); overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* 首行让开右上角关闭按钮；居中的 logo 不受影响 */ .ri-popup .ri-popup-content>*:first-child{margin-top:0;padding-right:36px;} .ri-popup .ri-popup-content>.logo-wrapper:first-child{padding-right:0;} .ri-popup .ri-popup-content>*:last-child{margin-bottom:0;} /* ------------------------------------------------------------ 15.2 登录 / 注册 / 找回密码弹窗：加宽 ------------------------------------------------------------ 宽度由父主题 main.min.js 写死： zb_get_site_login → ri.popup(html, 320) →