/* 站内广告位样式（2026-10-16 抽出） —— 为什么单独一个文件： 这批 `.gg-*` 规则原本只写在 `static/web/css/base.css` 里，而**用户中心**那套页面加载的是 `reset.css + user.css + level.css`，**并不引 base.css** ⇒ 用户中心里的站内广告位（含轮播） 完全没有样式：轮播会退化成"N 个满宽 slide 并排叠着"（实测 `.gg-slide` 的 flex 计算值是 `0 1 auto` 而不是 `0 0 100%`，圆点/箭头/切换看起来全乱）。 为了避免把主站 base.css 整个塞进用户中心（会与 user.css 冲突、有副作用）， 这里把广告相关规则**原样抽成独立文件**，用户中心按需引用即可。 ⚠️ 内容与 base.css 中 1789 行起的同一段保持一致；改广告样式时**两处都要改** （或后续把 base.css 里那段也换成引用本文件）。 */ .gg-cols,.gg-text,.gg-pop,.gg-float{background:none;min-height:0;text-align:left;} /* —— 多列图片（一行 N 个小图） */ .gg-cols{display:grid;gap:10px;} .gg-cols[data-cols="1"]{grid-template-columns:1fr;} .gg-cols[data-cols="2"]{grid-template-columns:repeat(2,1fr);} .gg-cols[data-cols="3"]{grid-template-columns:repeat(3,1fr);} .gg-cols[data-cols="4"]{grid-template-columns:repeat(4,1fr);} .gg-cols[data-cols="5"]{grid-template-columns:repeat(5,1fr);} .gg-cols[data-cols="6"]{grid-template-columns:repeat(6,1fr);} /* 移动端每行列数（2026-10-16 用户需求）：位配置里的 cols_mobile 输出成 `data-cols-m`。 ⚠️ CSS 读不到属性值去拼 repeat()，所以每种列数写一条规则（1~6）。 这里是**兜底**：移动端主题另有一份（m.css 无条件生效）；本段只在窄屏生效， 桌面主题的页面被缩到手机宽度时也能按移动端列数排。 */ @media (max-width: 768px){ .gg-cols[data-cols-m="1"]{grid-template-columns:1fr;} .gg-cols[data-cols-m="2"]{grid-template-columns:repeat(2,1fr);} .gg-cols[data-cols-m="3"]{grid-template-columns:repeat(3,1fr);} .gg-cols[data-cols-m="4"]{grid-template-columns:repeat(4,1fr);} .gg-cols[data-cols-m="5"]{grid-template-columns:repeat(5,1fr);} .gg-cols[data-cols-m="6"]{grid-template-columns:repeat(6,1fr);} /* 移动端每屏条数（maxnum_mobile → data-per-m）：兜底上限，防止一屏超出 N 条； 轮播位由前端重排按 per-m 重新分屏（逻辑见 Conf/FunctionsAd.php 的 gityx_ad_time_js）。 */ .gg-cols[data-per-m="1"] > *:nth-child(n+2){display:none;} .gg-cols[data-per-m="2"] > *:nth-child(n+3){display:none;} .gg-cols[data-per-m="3"] > *:nth-child(n+4){display:none;} .gg-cols[data-per-m="4"] > *:nth-child(n+5){display:none;} .gg-cols[data-per-m="5"] > *:nth-child(n+6){display:none;} .gg-cols[data-per-m="6"] > *:nth-child(n+7){display:none;} .gg-cols[data-per-m="8"] > *:nth-child(n+9){display:none;} .gg-cols[data-per-m="10"] > *:nth-child(n+11){display:none;} } .gg-cols .gg-c{display:block;overflow:hidden;border-radius:6px;background:#f2f4f7;} .gg-cols .gg-c img{display:block;width:100%;object-fit:cover;} /* —— 多列文字列表 */ .gg-text{padding:8px 14px;border:1px solid #e8ecf2;border-radius:8px;background:#fff;} .gg-text ul,.gg-tlist{margin:0;padding:0;list-style:none;} .gg-text li,.gg-tlist li{border-bottom:1px dashed #eef1f5;} .gg-text li:last-child,.gg-tlist li:last-child{border-bottom:0;} .gg-text li a,.gg-tlist li a{display:flex;align-items:center;gap:8px;padding:7px 0;text-decoration:none;color:#26405f;} .gg-text li a:hover .gg-t,.gg-tlist li a:hover .gg-t{color:#1f63d2;} .gg-text .gg-t,.gg-tlist .gg-t{font-weight:600;flex:0 0 auto;} .gg-text .gg-d,.gg-tlist .gg-d{color:#8593a5;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gg-text .gg-b,.gg-tlist .gg-b{font-style:normal;margin-left:auto;flex:0 0 auto;font-size:12.5px;color:#1f63d2;border:1px solid #cfe0fa;border-radius:20px;padding:1px 9px;} /* —— 弹窗（默认关闭，后台开启才输出） */ .gg-pop{position:fixed;left:0;top:0;right:0;bottom:0;z-index:9900;display:flex;align-items:center;justify-content:center;background:rgba(15,22,36,.55);margin:0;} .gg-pop[hidden]{display:none;} .gg-pop-in{position:relative;width:520px;max-width:92vw;max-height:86vh;overflow:auto;background:#fff;border-radius:10px;padding:42px 16px 14px;} .gg-tag{position:absolute;left:0;top:0;background:#eef2f7;color:#8b95a5;font-size:11px;padding:1px 8px;border-radius:10px 0 10px 0;} /* 左上角的「广告标题」（2026-10-15 用户需求：原先这里固定显示「广告」两字） 2026-10-15 美化第一版（用户反馈「有点太挤了」）： · 内边距 1px 8px → 5px 12px/14px，行高给到 1.5、加 0.3px 字距 —— 文字不再贴着圆角与边缘； · 底色由纯色改成一层极浅的竖向渐变、内缘加 1px 细线，与白色内容区分开但不抢眼； · 容器顶部内边距同步加大（.gg-pop-in / .gg-float-in 的 padding-top → 32px）， 标题带高约 28px，正文不再与标题叠在一起（这是「挤」的主要来源）。 2026-10-15 美化第二版（用户再反馈「字号加大，周围间距也加大点」）： · 字号 12px → **14px**、字距 .3 → .4px、文字色略加深（#41506b → #33425c），标题更醒目； · 内边距 5px 12/14px → **8px 16/18px**、右下圆角 13 → 15px —— 四周都松开了； · 标题带高随之 28px → 37px，容器 padding-top 32 → 42px（与内容仍留约 11px 间距）。 2026-10-15 美化第三版（用户：「把标题改成**整条通栏**的样式」）： · 由「左上角小标签」改成**横贯整个弹窗 / 浮窗的标题条**：`left:0;right:0`（宽度铺满）+ `height:38px` + `line-height:37px`（单行垂直居中 + 1px 下边框）， 上方两个圆角跟着容器走（弹窗 10px、浮窗 9px —— 浮窗内层有 1px 边框， 绝对定位的包含块是**内边距盒**，用 10px 会在两个上角露出 1px 白缝）。 · 右侧改为**预留内边距**而不是 `max-width`：铺满宽度后 `max-width` 已无意义， 改用 `padding-right`（弹窗 44px 只让开「×」；浮窗 76px 让开「收起 ×」两枚）， 文字超出仍走省略号 —— 保证长标题永远不会压到按钮上。 · ⚠️ 容器 `padding-top` **不用改**（仍是 42px）：标题条 38px + 首行内容的 6px 上外边距 = 44px，减掉 42px 后与内容恰好留 10px 间距，与上一版实测一致。 · ⚠️ 「收起」由 `top:12px` 微调到 **11px**：标题条是从容器顶边量起的 38px 高度， 12px 会偏低 1px（「×」是 20px 字号、`top:9px` 正好居中，两个字号不同故偏移量不同）。 */ .gg-tag.gg-ttl{box-sizing:border-box;position:absolute;left:0;right:0;top:0; height:38px;line-height:37px;padding:0 44px 0 16px; font-size:14px;font-weight:600;letter-spacing:.4px; color:#33425c;background:linear-gradient(180deg,#f6f9fd,#e9eff8); border-bottom:1px solid #dde5f0;border-radius:10px 10px 0 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gg-float .gg-tag.gg-ttl{padding-right:76px;border-radius:9px 9px 0 0;} .gg-close{position:absolute;right:9px;top:9px;color:#9aa6b6;font-size:20px;line-height:1;text-decoration:none;} .gg-close:hover{color:#1f63d2;} .gg-pop .gg-tlist{margin:6px 0 0;} .gg-pop .gg-cols{margin:6px 0 0;} /* —— 浮窗（默认关闭，后台开启才输出；默认右下角，避让回到顶部按钮；位置 2026-10-15 起后台可配） */ .gg-float{position:fixed;right:18px;bottom:120px;z-index:8000;width:300px;max-width:calc(100vw - 20px);margin:0;} .gg-float[hidden]{display:none;} /* 浮窗延迟显示（后台「延迟 N 秒」>0 时先隐藏） */ /* 四角定位：1=右下（默认，不加类）/ 2=左下 / 3=右上 / 4=左上。 ⚠️ 展开/收起切换 is-mini 时 JS 只做「基础类名 + is-mini」的拼接（基础类名含 gg-fp-*）， 不要改成整串赋 className —— 会把位置类冲掉、浮窗跳回右下角。 位置**微调**（2026-10-15：后台可填 x / y 像素，可为负）走 element 的 **inline `transform:translate()`**， 故意不写进这里 —— 用 transform 才不会与 left/right/top/bottom 的四角类互相干扰， 且 is-mini 切换只改 className，inline style 不会被覆盖（两个状态下微调都稳定生效）。 ⚠️ 因此这里**不要**给 .gg-float 加 transform（会被 inline 覆盖，也会让 transition 打架）。 */ .gg-float.gg-fp-lb{left:18px;right:auto;} .gg-float.gg-fp-rt{top:120px;bottom:auto;} .gg-float.gg-fp-lt{left:18px;right:auto;top:120px;bottom:auto;} .gg-float-in{position:relative;background:#fff;border:1px solid #e8ecf2;border-radius:10px;padding:42px 12px 12px;box-shadow:0 6px 24px rgba(20,40,80,.12);} .gg-float.is-mini .gg-float-in{display:none;} /* 收起后的胶囊：文本后台可配（2026-10-15）⇒ 宽度由内容撑开（原先写死 96px，长文本会挤成两行） ⚠️ 上限必须用**视口单位**：`.gg-float.is-mini{width:auto}`（既有规则）下容器是 shrink-to-fit， 此时 `max-width:100%` 退化成 none —— 站长填满 32 字会把胶囊撑到 380+px、手机上直接出屏。 */ .gg-float-mini{display:block;box-sizing:border-box;width:auto;max-width:320px;margin-left:auto;background:#1f63d2;color:#fff;border-radius:20px;padding:6px 12px;font-size:13px;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(31,99,210,.3);} .gg-float-mini[hidden]{display:none;} /* 收起态小胶囊：左侧加一个「展开」提示箭头 + 轻推动效，引导访客点一下展开（2026-10-15 用户需求： 「收起后的右下角浮窗，增加展开图标，引导用户去点击」）。 ⚠️ 图标必须走 **::before 伪元素**：浮窗 JS 有两处用 `m.textContent = …` 更新胶囊文案 （服务端渲染后一次、投放时段过滤后再算一次），写成真实子元素会被 textContent 一次性清掉、图标消失。 伪元素不受 textContent 影响。 ⚠️ 箭头用 border 拼（不依赖 iconfont / 图片）：`.gg-float-mini` 只有文字与内边距， 引入字体图标还得保证前台已加载对应字体，成本与风险都不值当。 */ .gg-float-mini::before{ content:'';display:inline-block;width:6px;height:6px;margin-right:6px; vertical-align:middle;position:relative;top:-1px; border-top:2px solid currentColor;border-left:2px solid currentColor; transform:rotate(45deg); /* **朝上**的小箭头：浮窗展开是在胶囊上方展开的 */ animation:ggMiniNudge 2.2s ease-in-out infinite; } .gg-float-mini:hover{background:#1a56b8;box-shadow:0 6px 18px rgba(31,99,210,.42);} .gg-float-mini:hover::before{animation:none;} /* 鼠标已经移上来了就别再动 */ /* ⚠️ 位移要写在 rotate **左边**（transform 从右往左生效 ⇒ 写在左边就等于在父坐标系里平移）， 这样「轻推」是**笔直向上**、与箭头方向一致；写在右边会变成沿 45° 斜着推。 */ @keyframes ggMiniNudge{ 0%,100%{transform:translate(0,0) rotate(45deg);} 50% {transform:translate(0,-3px) rotate(45deg);} /* 沿箭头方向（向上）轻推一下 */ } /* 尊重系统的「减少动态效果」设置 */ @media (prefers-reduced-motion: reduce){ .gg-float-mini::before{animation:none;} } .gg-float .gg-fold{position:absolute;right:28px;top:11px;font-size:12px;color:#9aa6b6;text-decoration:none;} .gg-float .gg-fold:hover{color:#1f63d2;} /* ⚠️ 收起态**必须**按内容自适应，而且必须带 `!important`（2026-10-15 用户要求 「浮窗收起后的按钮尺寸不要受这个尺寸配置的影响」）： 广告配置里的「浮窗尺寸」落成的是 `.gg-float` 上的 **inline style**（如 width:360px）， 普通类规则**压不过 inline** —— 少了 !important，站长把浮窗配成 360 宽后，访客点「收起」， 写着「福利」的小胶囊会被撑成一条 320px 的蓝色长条（.gg-float-mini 是 width:auto 的块级元素， 会被容器宽度顶到自己的 max-width:320px 上限）。 即：尺寸配置只作用于**展开态**的面板，收起态与它无关。 */ .gg-float.is-mini{width:auto !important;} .gg-float .gg-tlist{margin:6px 0 0;} .gg-float .gg-cols{margin:6px 0 0;} .gg-float .gg-d{max-width:200px;display:inline-block;} /* ============ 谷歌广告（AdSense）· 后台可配位（2026-10-14） ============ 容器类 .gg-box 不携带 Public/gg 灰底占位图（原 .gg-big/.gg-small/.gg-all 自带， 谷歌没填充时露出「建站不易 请勿屏蔽本站广告」）；尺寸类沿用 gg-big/gg-small/gg-all 的宽度布局 */ .gg-box{display:block;background:none;min-height:0;margin:0 0 12px;} .gg-box.gg-big,.gg-box.gg-small,.gg-box.gg-all{background:none;min-height:0;} .gg-box ins.adsbygoogle{display:block;} /* 谷歌没填充广告时 AdSense 会给 ins 打 data-ad-status="unfilled"：直接隐藏，不留灰底图与空白 */ .gg-box ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important;} /* —— 轮播（2026-10-14：该位启用广告条数 > 最多条数 时自动分屏切换） 结构：.gg-carousel > .gg-cbox > .gg-slides > .gg-slide × N（transform 平移切换）+ .gg-dots 圆点 2026-10-15：弹窗（形态 4）/ 浮窗（形态 5）的内容体也接上了同一个轮播（`.gg-car-in`）， 下面这条只补「内嵌」场景缺的那点间距 —— 其余样式与位级轮播**完全共用**。 */ .gg-pop .gg-carousel,.gg-float .gg-carousel{margin:6px 0 0;} /* 内嵌轮播与单屏 `.gg-cols` 的右边距对齐：`.gg-pop-in` / `.gg-float-in` 已有内边距， 轮播的箭头在 .gg-carousel 内绝对定位，这里把左右箭头往内收一点，避免贴到圆角上被 overflow 剪掉 */ .gg-car-in .gg-car-prev{left:6px;} .gg-car-in .gg-car-next{right:6px;} .gg-car-in .gg-dots{margin-top:6px;} .gg-carousel{position:relative;background:none;min-height:0;text-align:left; /* 触摸滑动（2026-10-15 用户需求）：横向手势交给轮播 JS 自己处理，**纵向仍留给页面滚动** —— 不加这句的话，手机上横向拖动会被浏览器先当成滚动/回弹吃掉，touchmove 收不到。 */ touch-action:pan-y;} .gg-carousel .gg-cbox{overflow:hidden;border-radius:6px;} .gg-carousel .gg-slides{display:flex;transition:transform .45s ease;} .gg-carousel .gg-slide{flex:0 0 100%;box-sizing:border-box;min-width:0;} .gg-carousel .gg-slide .gg-i{display:block;} .gg-carousel .gg-slide .gg-i+.gg-i{margin-top:10px;} .gg-carousel .gg-slide img{display:block;width:100%;} .gg-carousel .gg-slide .gg-cols{width:100%;} .gg-carousel .gg-dots{display:flex;gap:8px;justify-content:center;margin-top:8px;} .gg-carousel .gg-dots i{width:8px;height:8px;border-radius:50%;background:#d3d9e2;cursor:pointer;transition:.2s;} .gg-carousel .gg-dots i.on{background:var(--c-primary,#1f63d2);width:18px;border-radius:5px;} .gg-carousel .gg-car-prev,.gg-carousel .gg-car-next{position:absolute;top:50%;margin-top:-26px;width:30px;height:36px; line-height:34px;text-align:center;font-size:20px;color:#fff;background:rgba(15,22,36,.32);border-radius:6px; text-decoration:none;opacity:0;transition:.2s;z-index:2;} .gg-carousel:hover .gg-car-prev,.gg-carousel:hover .gg-car-next{opacity:1;} .gg-carousel .gg-car-prev{left:8px;} .gg-carousel .gg-car-next{right:8px;} /* —— 空位占位（2026-10-13：位已开启但没投内容时，用虚线灰底方块标出该位的位置与尺寸） 注意：.gg-all/.gg-big/.gg-small 自带 Public/gg 的灰色占位背景图，这里必须整块覆盖掉； 所以占位规则一律用 .gg.gg-ph / .ad.gg-ph 这种双类选择器（高于单类的 .gg-all/.ad-big） */ .gg.gg-ph,.ad.gg-ph{display:flex;flex-direction:column;align-items:center;justify-content:center; box-sizing:border-box;background:#f6f7f9;background-image:none;border:1px dashed #c8ced8; border-radius:6px;color:#a2abb8;font-size:12.5px;line-height:1.7;text-align:center;padding:8px;} .gg-ph .gg-ph-t{display:block;font-size:12px;color:#b4bcc7;letter-spacing:.5px;} .gg-ph .gg-ph-n{display:block;color:#98a2b0;} /* 多列占位：去掉外层虚线框，改成 N 个虚线小格（列宽与真实投放一致） 注意 display 必须显式写 grid —— 上面的 .gg.gg-ph 是 flex，特异性更高会盖掉 .gg-cols 的 grid */ .gg-cols.gg-ph{display:grid;border:0;background:none;padding:0;gap:10px;} .gg-ph .gg-c{box-sizing:border-box;background:#f6f7f9;border:1px dashed #c8ced8;border-radius:6px; display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a2abb8; font-size:12.5px;line-height:1.7;padding:6px;text-align:center;} /* 原生位占位（嵌在模板已有