From c1dde099d7a023f4daa6856de6f68afd5daf2e20 Mon Sep 17 00:00:00 2001 From: laoyang Date: Mon, 26 Oct 2026 23:51:20 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=8C=E4=B8=AA=E4=BA=BA=E7=AE=80=E4=BB=8B?= =?UTF-8?q?=E3=80=8D=E6=8C=82=E4=BB=B6=EF=BC=9A=E5=A4=B4=E5=83=8F/?= =?UTF-8?q?=E6=98=B5=E7=A7=B0/=E7=AE=80=E4=BB=8B/=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E5=9B=9B=E9=A1=B9=E5=8F=AF=E5=8D=95=E7=8B=AC=E5=A1=AB=20+=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=A7=E5=9B=BE=E6=92=91=E7=88=86=20=20#21?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 一、头像 / 昵称 / 简介原来**只读主题设置**，挂件表单里没有字段 · 用户点开侧栏「个人简介」只能改背景图，头像和那句话得跑去 「主题设置 → 站长信息」改全站共用的那份。 · 现在四项都是挂件实例字段：avatar / nickname / introduce / background。 · 取值顺序：实例 → 主题设置 → 内置兜底，**留空即回落**， 老站点升级后显示一点不变。 · pick() 判空统一用「trim 后是不是空串」，不用 empty() （!empty('0') 是 false，昵称就叫「0」会被当没填）。 · 简介用 sanitize_textarea_field（保留换行），URL 用 esc_url_raw （不做 HTML 实体化，避免与 esc_attr 双重转义）。 二、后台 form() 补齐五个字段 · 头像 / 背景各带「选择图片」按钮（调媒体库），背景另有「清除」。 · 输入框显示用户填的原始值，缩略图显示前台最终会用的那张，刻意分开。 · 资源加载统一到 yang_widget_admin_assets()，不再每个挂件各挂一次。 三、大图撑爆挂件的真因：CSS 选择器依赖三层祖先 · 老规则是 `.k-main .sidebar .w-about .wrapper img`，而后台 「外观 → 小工具」预览里没有 `.k-main .sidebar` 这层祖先， 规则一条都不生效 ⇒ 头像按原图 2136×2136 铺开、背景塌成 0。 前台看着正常是因为前台恰好有那层祖先，问题被完全掩盖。 · 改为只管 `.w-about` 内部元素，并补 max-width/max-height 双保险。 · 老规则必须**删掉**而不是并存：它是 (0,3,1)，新规则是 (0,2,1)， 并存时老规则在前台永远赢，新规则只对后台生效。 · 保留 `.k-main .sidebar .w-about { padding:0 }`：通用规则 `.k-main .sidebar .widget` 是 (0,3,0)，少了这条会多出内边距、整体高 57px。 · 头像保持 inline（display:block 会让它脱离 text-align:center 的居中）。 · 顺带：object-fit 从 fill 改 cover（超宽图不再压扁）； 背景 url() 补引号（文件名带空格时不再整条声明作废）。 验证 · 行为测试 67 条全通过；反向验证 13 组全部真红。 · 浏览器几何 76 条全通过（前台/后台 × 四种极端原图）。 · 修复前 CSS 跑同一套判据：38 条报红，精确复现用户症状 （后台挂件高 2217、头像 2136×2136、横向滚动 2146）。 · 线上真实页面 + 新版 CSS：16 条全通过。 --- assets/css/kratos.css | 105 ++++++++++++-- assets/css/kratos.min.css | 2 +- inc/theme-widgets.php | 298 ++++++++++++++++++++++++++++++++++---- style.css | 2 +- 4 files changed, 361 insertions(+), 46 deletions(-) diff --git a/assets/css/kratos.css b/assets/css/kratos.css index 4dc7194..cabc6a8 100644 --- a/assets/css/kratos.css +++ b/assets/css/kratos.css @@ -1777,43 +1777,122 @@ button:focus { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } +.k-main .sidebar > div:last-child { + margin: 0; +} + +/* ══════════════════════════════════════════════════════════════════════ + * 「个人简介」挂件（.w-about）：尺寸自持（3.2.51） + * + * ── 原来为什么会被大图撑爆 ────────────────────────────────────────── + * 这一组规则原来全部写成三段祖先选择器： + * + * .k-main .sidebar .w-about .wrapper img { width:100px; height:100px } + * .k-main .sidebar .w-about .background { height:120px } + * + * `.k-main` → `.sidebar` → `.w-about` 这三段是**前台文章页/首页的布局**。 + * 挂件一旦出现在没有这层祖先的地方： + * + * · WordPress 后台「外观 → 小工具」的挂件预览 + * · 区块小工具（Widgets Block Editor）的预览面板 + * · 侧栏被别的主题/插件改写结构时 + * + * 这些规则**一条都不生效**，头像 没有任何宽高约束，直接按原图 + * 尺寸铺开；`.background` 也会塌成 0 高。 + * + * 线上实测（avatar.jpg 原图 2136×2136）： + * 有祖先 → 挂件 397×285， 头像 100×100 ✅ + * 无祖先 → 挂件 1400×2217，头像 2136×2136 ❌ 撑爆，横向滚动 2156px + * + * ── 现在的做法 ────────────────────────────────────────────────────── + * 只依赖**挂件自己的类名** `.w-about`，不再依赖外层布局。这样无论挂件 + * 被丢进什么容器，头像都是固定小圆、背景都是固定高。 + * + * 🔴 必须把老的三段选择器**删掉**，不是"再补一条新的"。 + * 实测过：`.k-main .sidebar .w-about .wrapper img` 优先级 (0,3,1)， + * 而 `.w-about .wrapper img` 只有 (0,2,1)。两条并存时**老规则在前台永远赢**， + * 于是新规则只在后台生效 —— 前台改新规则等于白改，而且会让人误以为 + * "改了没反应"。我把头像故意改成 200px 反证过：像素完全不变， + * 因为前台根本用的是老规则。单一真相来源才不会有这个坑。 + * + * 🔴 为什么不用 !important：那会让用户/子主题以后想改头像尺寸时 + * 完全改不动。 + * ══════════════════════════════════════════════════════════════════════ */ + +/* 背景条：高度不依赖祖先 */ +.w-about .background { + height: 120px; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +/* 挂件自身去掉内边距。 + * + * 原来写的是 `.k-main .sidebar .w-about, .k-main .sidebar .w-ad { padding:0 }` + * —— 依赖祖先，所以后台预览里会吃 `.widget` 的 15px 内边距，跟前台不一致。 + * 下面这组把它拆成两条： + * ① `.w-about` / `.w-ad`（无祖先）—— 覆盖后台/其它容器里的 `.widget` 内边距； + * ② `.k-main .sidebar .w-about` / `.w-ad`（前台）—— 覆盖主题自己的 + * `.k-main .sidebar .widget { padding: 15px 30px }`。 + * + * 🔴 ② 这条**不能省**：它的对手 `.k-main .sidebar .widget` 优先级 (0,3,0)， + * 而 ① 只有 (0,1,0)，光靠 ① 在前台会被压回去 —— 实测挂件会多出 + * 15px/30px 内边距、整体高 57px（284→341），头像和文字全部错位。 + * 两处的**值必须一致**（都是 0），前后台才不会出现分歧。 */ +.w-about, +.w-ad { + padding: 0; +} + .k-main .sidebar .w-about, .k-main .sidebar .w-ad { padding: 0; } -.k-main .sidebar > div:last-child { - margin: 0; -} - -.k-main .sidebar .w-about .background { - height: 120px; -} - -.k-main .sidebar .w-about .wrapper img { +/* 头像：固定尺寸 + 裁切，永远不可能超出自己的盒子。 + * + * object-fit:cover 是关键 —— 原图 2136×2136、1×1、4000×100、100×4000 + * 都能被忠实裁进 100×100 的圆里，不会变形，也不会把盒子撑开。 + * 在没有祖先约束的环境里尤其重要：那里没有别的规则兜底。 + * （原来是 fill，非正方形头像会被拉伸变形，这次一并修掉。） + * + * 🔴 不要写 display:block —— 实测会带来两处前台外观变化： + * ① 头像从「行内被 text-align:center 居中」变成「块级独占一行」， + * 父级 .wrapper 高度从 50px 变 100px； + * ② x 坐标从 1096.66（居中）变成 948.33（左对齐）。 + * 两处都是肉眼可见的位移。保持 inline（默认）才能原样继承 text-center。 + * + * 🔴 margin 保持 `-50px 0 0`（水平 0）而不是 `auto`：水平居中本来就由 + * 父级 text-align:center 完成，写 auto 在 inline 元素上也不生效。 */ +.w-about .wrapper img { margin: -50px 0 0; width: 100px; height: 100px; + max-width: 100px; + max-height: 100px; + object-fit: cover; border: rgba(255, 255, 255, 0.4) 4px solid; border-radius: 50%; } -.k-main .sidebar .w-about .textwidget { +/* 文字区：同样不依赖祖先 */ +.w-about .textwidget { padding: 5px 20px 20px; } -.k-main .sidebar .w-about .textwidget p { +.w-about .textwidget p { margin-bottom: 0; cursor: default; } -.k-main .sidebar .w-about .textwidget .username { +.w-about .textwidget .username { font-size: 17px; font-weight: 500; margin-bottom: 5px; } -.k-main .sidebar .w-about .textwidget .about { +.w-about .textwidget .about { font-size: 15px; } diff --git a/assets/css/kratos.min.css b/assets/css/kratos.min.css index 15fcd89..b3afb08 100644 --- a/assets/css/kratos.min.css +++ b/assets/css/kratos.min.css @@ -1 +1 @@ -@charset "UTF-8";body{overflow-x:hidden;background:#f5f5f5;font-weight:350;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,opensans,Optima,"Microsoft Yahei",sans-serif;line-height:1.8}a{color:#00a2ff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}a:hover{color:#0097ee;text-decoration:none}a:focus{outline:0;text-decoration:none}ol,p,ul{margin-bottom:16px;color:#333;font-size:16px}ol,ul{margin:0 0 16px;padding-left:16px}ol>li{margin-bottom:6px;padding-left:2px;list-style:decimal;line-height:22px}ul>li{margin-bottom:6px;padding-left:2px;list-style:circle;line-height:22px}h1,h2,h3,h4,h5,h6{margin:0 0 30px 0;color:#333;font-weight:400}.tooltip-inner{padding:7px 6px;font-size:13px}:active,:focus,button:focus{outline:0}.btn-outline-primary.focus,.btn-outline-primary:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.form-control:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:none}::-moz-placeholder{color:#fff}::-webkit-input-placeholder{color:#fff}:-ms-input-placeholder{color:#fff}::selection{background:#ddd;color:#000;text-shadow:none}::-webkit-selection{background:#ddd;color:#000;text-shadow:none}::-moz-selection{background:#ddd;color:#000;text-shadow:none}::-webkit-scrollbar{overflow:auto;width:10px;height:6.4px}::-webkit-scrollbar-thumb{min-width:25px;min-height:25px;border:1px solid #e0e0e0;background-color:#bbb}::-webkit-scrollbar-track{border:1px solid #efefef;background-color:#f7f7f7}.k-main{padding:23px 0}.k-main.color{padding-top:103px}@media only screen and (max-width:992px){.k-main.color{padding-top:92px}}@media only screen and (max-width:768px){.k-main.color{padding-top:83px}}.k-nav{position:absolute;background-color:rgba(40,42,44,.6)}.k-nav .navbar-brand{color:#fff;font-size:24px}.k-nav .navbar-brand img{width:100px}.k-nav .navbar-toggler{padding:13px;border-color:transparent;border-radius:0;color:#343a40;text-transform:uppercase;font-weight:600;font-size:12px}.k-nav .navbar-nav{position:relative}.k-nav .navbar-nav li{margin-bottom:0;padding-left:0;list-style:none}.k-nav .navbar-nav>li.nav-item>a{text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:17px}.k-nav .line{display:flex;width:24px;height:2px;background:#fff;transition:all .3s ease-out}.k-nav .second-line{margin:5px 0}.nav-close .first-line{transform:rotate(45deg) translate3d(5px,5px,0);transform-origin:center}.nav-close .second-line{transform:scale3d(0,1,1)}.nav-close .third-line{transform:rotate(-45deg) translate3d(5px,-5px,0);transform-origin:center}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .show>.nav-link{color:#fff}.navbar-light .navbar-nav .nav-link:hover{color:rgba(255,255,255,.8)}.navbar-light .navbar-nav .nav-link .fas{margin-right:3px}.navbar-light .navbar-nav .dropdown-menu{margin:2px 0 0;padding:5px 0;min-width:140px;border:none;font-size:15px}.dropdown-item.active,.dropdown-item:active{background-color:#00a2ff}.dropdown-toggle::after{display:inline-block;margin-left:2px;border-top:0;border-right:0;border-bottom:0;border-left:0;content:"\e62e";vertical-align:unset;font-size:16px;font-family:kicon;transform:rotate(180deg)}.navbar-light .navbar-nav .dropdown-submenu{position:relative}.navbar-light .navbar-nav .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px}.navbar-light .navbar-nav .dropdown-submenu:hover>.dropdown-menu{display:block}.navbar-light .navbar-nav .dropdown-submenu>a.dropdown-toggle::after{content:"";border-top:.32em solid transparent;border-bottom:.32em solid transparent;border-left:.32em solid currentColor;font-family:inherit;transform:none;vertical-align:.08em}@media screen and (max-width:992px){.navbar-light .navbar-nav .dropdown-submenu>.dropdown-menu{position:static;display:block;float:none;margin-left:16px;border-left:1px solid rgba(255,255,255,.25)}.navbar-light .navbar-nav .dropdown-submenu>a.dropdown-toggle::after{display:none}}@media only screen and (min-width:992px){.k-nav{border-bottom:1px solid transparent;background:0 0;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.k-nav .navbar-brand{padding:10px 20px;color:#fff}.k-nav .navbar-brand:focus,.k-nav .navbar-brand:hover{color:rgba(255,255,255,.8)}.k-nav .navbar-nav>li.nav-item>a{padding:10px 20px;color:#fff}.k-nav .navbar-nav>li.nav-item>a:focus,.k-nav .navbar-nav>li.nav-item>a:hover{color:rgba(255,255,255,.8)}.k-nav.is-fixed{position:fixed;top:-67px;border-bottom:1px solid #fff;background-color:rgba(255,255,255,.9);-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s}.k-nav.is-fixed .navbar-brand{color:#212529}.k-nav.is-fixed .navbar-brand:focus,.k-nav.is-fixed .navbar-brand:hover{color:#007bff}.k-nav.is-fixed .navbar-nav>li.nav-item>a{color:#212529}.k-nav.is-fixed .navbar-nav>li.nav-item>a:focus,.k-nav.is-fixed .navbar-nav>li.nav-item>a:hover{color:#007bff}.k-nav.is-visible{-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0)}}@media screen and (max-width:992px){.navbar-light .navbar-nav .dropdown-item.active,.navbar-light .navbar-nav .dropdown-item:active,.navbar-light .navbar-nav .dropdown-item:focus,.navbar-light .navbar-nav .dropdown-item:hover,.navbar-light .navbar-nav .dropdown-menu{background-color:transparent}.k-nav .navbar-nav>li.nav-item>a{font-size:16px}.navbar-light .navbar-nav .dropdown-item{color:#fff}.navbar-light .navbar-nav .dropdown-menu{padding:0}}@media screen and (max-width:768px){.k-nav .navbar-brand{font-size:19px}.navbar-light .navbar-nav .nav-link{font-size:16px}.navbar-light .navbar-brand:hover{color:rgba(255,255,255,.8)}.k-nav .navbar-nav>li.nav-item>a{font-size:14px}}.k-header .banner{position:relative;height:300px}.k-header .banner .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;background:rgba(66,64,64,.2)}.k-header .banner .content{position:relative;height:300px;background-position:center center;background-size:cover}.k-header .banner .content .introduce{position:absolute;top:37%;z-index:10;width:100%;color:#fff;text-shadow:2px 2px 2px #666;cursor:default}.k-header .banner .content .introduce .title{margin-bottom:5px;font-size:35px}.k-header .banner .content .introduce .mate{font-size:25px}@media screen and (max-width:768px){.k-header .banner{height:290px}.k-header .banner .content{height:290px}.k-header .banner .content .introduce{top:43%}.k-header .banner .content .introduce .title{font-size:30px}.k-header .banner .content .introduce .mate{font-size:20px}}.k-main .board .paginations{margin:23px auto;width:100%;text-align:center;font-size:14px}.k-main .board .paginations a{padding:8px 12px;background:#fff;color:#444}.k-main .board .paginations .current{padding:8px 12px;background:#00a2ff;color:#fff;font-weight:400}.k-main .board .paginations .dots{padding:8px 12px;background:#fff;color:#444}.k-main .details .article .content .paginations{padding-top:20px;width:100%;font-size:14px}.k-main .details .article .content .paginations a{margin:0 3px}.k-main .details .article .content .paginations a span{padding:7px 12px;border:solid 1px #00a2ff;background-color:#f0f8ff;color:#00a2ff}.k-main .details .article .content .paginations .current span,.k-main .details .article .content .paginations a span:hover{padding:7px 12px;border:solid 1px #00a2ff;background:#00a2ff;color:#fff;font-weight:400}.k-main .board .article-panel{margin:0 0 23px;border-radius:0;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .board .article-panel:last-of-type{margin:0}.k-main .board .article-panel .a-thumb{position:relative;float:left;overflow:hidden;margin:20px;width:240px;height:145px}.k-main .board .article-panel .a-thumb img{padding:2px;width:100%;height:100%;border:1px solid #f3f3f3}.k-main .board .article-panel .a-post{margin-left:255px;padding:21px 20px 0 3px;height:160px}.k-main .board .article-panel .a-post.a-none{margin-left:0;padding:20px;height:auto}.k-main .board .article-panel .a-post .header{display:-webkit-box;overflow:hidden;margin:3px 0 6px;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .board .article-panel .a-post .header .label{position:relative;top:-2px;display:inline-block;margin-right:5px;padding:4px 6px 3px;border-radius:0;background-color:#00a2ff;color:#fff;vertical-align:baseline;text-align:center;white-space:nowrap;font-size:12px;line-height:14px}.k-main .board .article-panel .a-post .header .label .label-arrow{position:absolute;top:6px;right:-4px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid #00a2ff;content:"";vertical-align:top}.k-main .board .article-panel .a-post .header .title{display:inline;margin:0;font-size:21px}.k-main .board .article-panel .a-post .header .title a{color:#333}.k-main .board .article-panel .a-post .header .title a:hover{color:#0097ee}.k-main .board .article-panel .a-post .content{display:block;display:-webkit-box;overflow:hidden;max-height:110px;text-overflow:ellipsis;word-wrap:break-word;cursor:default;-webkit-box-orient:vertical;-webkit-line-clamp:4}.k-main .board .article-panel .a-post .content p{margin-bottom:0;font-size:15px}.k-main .board .article-panel .a-meta{clear:both;overflow:hidden;padding:8px 20px;border-top:1px solid #f3f3f3;font-size:12px;line-height:27px}.k-main .board .article-panel .a-meta span{font-size:13px;line-height:24px;cursor:default}.k-main .board .article-panel .a-meta span>i{margin-right:3px}.k-main .board .article-panel .a-meta span>a{color:#333}.k-main .board .article-panel .a-meta span>a:hover{color:#0097ee;text-decoration:none}.k-main .board .article-panel .a-meta span>a>i{margin-left:3px}.k-main .board .article-panel .search-title{padding:20px 25px;color:#000;font-size:18px}.k-main .board .article-panel .nothing{padding:50px;text-align:center}.k-main .board .article-panel .nothing img{width:50%}.k-main .board .article-panel .nothing .sorry{margin-top:30px;font-size:20px}@media screen and (max-width:768px){.k-main .board .article-panel .a-thumb{position:relative;float:none;overflow:hidden;margin:0;margin-bottom:14px;padding:0;padding-bottom:53%;width:auto;height:0;max-width:100%}.k-main .board .article-panel .a-thumb img{padding:0;height:auto;max-width:100%;border:0}.k-main .board .article-panel .a-post{margin-left:0;padding:0 12px;height:auto}.k-main .board .article-panel .a-post .header{margin:0 0 9px}.k-main .board .article-panel .a-post .header .label{display:none}.k-main .board .article-panel .a-post .header .title{font-size:20px}.k-main .board .article-panel .a-post .content{margin-bottom:10px}.k-main .board .article-panel .a-post.a-none .content{margin-bottom:0}.k-main .board .article-panel .a-meta{padding:5px 12px}.k-main .board .article-panel .a-meta span{font-size:12px}.k-main .board .article-panel .nothing .sorry{font-size:18px}}.k-main .details .article{background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1);word-wrap:break-word;word-break:break-all}.k-main .details .article .breadcrumb-box{border-bottom:1px solid #f7f7f7}.k-main .details .article>:first-child{margin-top:0}.k-main .details .article>:last-child{margin-bottom:0}.k-main .details .article .breadcrumb-box .breadcrumb{margin-bottom:0;padding:12px 16px;border-radius:0;background-color:inherit;font-size:13px}.k-main .details .article .breadcrumb-box .breadcrumb li{margin-bottom:0;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.3rem}.breadcrumb-item+.breadcrumb-item::before{padding-right:.2rem}.k-main .details .article .breadcrumb-box .breadcrumb-item.active{cursor:default}.k-main .details .article .header{padding:0 16px 16px}.k-main .details .article .header .title{padding-bottom:0;border:none}.k-main .details .article .header .meta{color:#5a5a5a;font-size:14px;cursor:default}.k-main .details .article .header .meta a{color:inherit}.k-main .details .article .header .meta>span:not(:last-child):after{margin-right:5px;margin-left:5px;color:#71777c;content:"\B7"}.k-main .details .article .content{padding:0 16px 16px;word-wrap:break-word;line-height:1.8;word-break:break-all}.k-main .details .article .content p::after,.k-main .details .article .content::after{clear:both;display:block;content:""}.k-main .details .article .content h2,.k-main .details .article .content h3,.k-main .details .article .content h4,.k-main .details .article .content h5,.k-main .details .article .content h6,.k-main .details .article h1{margin-top:24px;margin-bottom:16px;font-weight:500;line-height:32px}.k-main .details .article h1{padding-bottom:4.8px;font-size:30px;line-height:38px}.k-main .details .article .content h2{font-size:24px}.k-main .details .article .content h2.title{margin:16px -16px;padding:0 10px;border-left:5px solid #00a2ff;background-color:rgba(243,243,243,.7);font-size:20px;line-height:41px}.k-main .details .article .content h3{font-size:18px}.k-main .details .article .content h4{font-size:16px}.k-main .details .article .content h5{font-size:14px}.k-main .details .article .content h6{font-size:12px}.k-main .details .article .content p{color:#151515;line-height:30px}.k-main .details .article .content .progress{margin-bottom:16px}.k-main .details .article .content .video-container{margin-bottom:16px}.k-main .details .article .content blockquote{margin-bottom:16px;padding:16px;border-left:6px solid #dce6f0;background:#f2f7fb;color:#819198;font-size:15px}.k-main .details .article .content blockquote p{margin-bottom:-3px}.k-main .details .article .content hr{margin:24px 0;height:1px;border:none;border-top:1px solid #a5a5a5}.k-main .details .article .content pre{margin:10px 0;padding:11px 16px;border-radius:4px;background-color:#f8f8f8;word-wrap:break-word;font-size:11px;line-height:1.7;word-break:break-all}.k-main .details .article .content code{margin:0 3px;padding:2px 4px;border-radius:4px;background-color:#eff0f1;color:#333;font-size:13px;word-break:inherit}.k-main .details .article .content kbd{display:inline-block;margin:-3px 1.6px 0;padding:2.4px 9.6px;border:1px solid #adb3b9;border-radius:3px;background-color:#e1e3e5;box-shadow:0 1px 0 rgba(12,13,14,.2),0 0 0 2px #fff inset;color:#242729;vertical-align:middle;text-shadow:0 1px 0 #fff;white-space:nowrap;font-size:10px;line-height:1.5}.k-main .details .article .content pre code{margin:0;padding:0;background-color:transparent}.k-main .details .article .content pre ol{padding:0}.k-main .details .article .content pre li{margin:0;list-style:none}.k-main .details .article .content .wp-caption-text{margin-bottom:0;font-size:14px}.k-main .details .article .content .wp-block-image{margin-bottom:0}.k-main .details .article .content .wp-block-image figcaption{font-size:14px}.k-main .details .article .content figure{margin:0}.k-main .details .article .content .aligncenter::after,.k-main .details .article .content .alignleft::after,.k-main .details .article .content .alignright::after{clear:both;display:block;content:""}.k-main .details .article .content .alignleft{float:left;margin-right:16px}.k-main .details .article .content p a>img,.k-main .details .article .content p>img{display:block}.k-main .details .article .content .wp-smiley{display:inline}.k-main .details .article .content .aligncenter{margin-right:auto;margin-left:auto}.k-main .details .article .content .alignright{float:right;margin-left:16px}.k-main .details .article .content img{height:auto;max-width:100%}.k-main .details .article .content table{display:table;overflow:auto;width:100%;table-layout:fixed;word-break:break-all}.k-main .details .article .content table td,.k-main .details .article .content table th{padding:8px 16px;border:1px solid #e9ebec}.k-main .details .article .content table th{font-weight:700}.k-main .details .article .content table tr:nth-child(2n){background-color:#f8f8f8}.card-header:first-child,.k-main .details .article .content .alert,.k-main .details .article .content .card{border-radius:0}.k-main .details .article .content .card-header{padding:6px 15px}.k-main .details .article .content .card-body{padding:10px 15px}.k-main .details .article .content .alert{padding:10px 15px}.k-main .details .article .content .downbtn{display:inline-block;margin-bottom:16px;padding:3px 10px;border:1px solid #39aaf9;background:#39aaf9;color:#fff;font-size:14px}.k-main .details .article .content .downbtn:hover{background:#37a0eb;color:#fff}.k-main .details .article .content .downbtn:focus{color:#fff;text-decoration:none}.k-main .details .article .content .video-container{position:relative;overflow:hidden;padding-bottom:75%;height:0}.k-main .details .article .content .video-container embed,.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.k-main .details .article .content>:last-child{margin-bottom:0}.k-main .details .article .copyright{padding:0 16px 16px}.k-main .details .article .copyright span{display:block;padding:18px;background-color:#f7f7fa;color:#333;font-size:14px;line-height:20px;cursor:default}.k-main .details .article .footer{padding:0 16px 10px;border-top:1px solid #f2f2f2}.k-main .details .article .footer .tags,.k-main .details .article .footer .tool{margin-top:10px}.k-main .details .article .footer .tags span,.k-main .details .article .footer .tool span{color:#333;font-size:14px;cursor:default}.k-main .details .article .footer .tags a{margin:0 5px 0 0;padding:2px 7px;background-color:#a9a9a9;color:#fff;font-size:13px}.k-main .details .article .content .accordion{margin-bottom:16px;border:1px solid #e5e8ed}.k-main .details .article .content .accordion .acheader{position:relative;padding:5px 15px;background:#f7f8fa}.k-main .details .article .content .accordion .acheader span{font-weight:600;font-size:17px}.k-main .details .article .content .accordion .acheader .icon{position:absolute;right:15px;font-size:17px}.k-main .details .article .content .accordion .acheader .icon .kicon{font-size:17px}.k-main .details .article .content .accordion.active .icon{-webkit-transition:.3s;transition:.3s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.k-main .details .article .content .accordion .contents{display:none;border-top:1px solid #e6e6e6}.k-main .details .article .content .accordion .contents .inner{padding:5px 15px}@media screen and (max-width:768px){.k-main .details .article .header{padding:0 16px 12px}.k-main .details .article h1{margin-top:14px;margin-bottom:14px;font-size:22px}.k-main .details .article .header .meta{font-size:12px}.k-main .details .article .content p{font-size:15px}.k-main .details .article .content table{display:block;word-break:keep-all}.k-main .details .article .header .meta span:not(:first-child){margin-left:5px}.k-main .details .article .header .meta>span:not(:last-child):after{content:none}.k-main .details .article .content .alert{padding:10px 15px;font-size:15px}.k-main .details .article .content .card-header{font-size:15px}.k-main .details .article .content .card-body{padding:12px 15px}.k-main .details .article .content .card-text{font-size:14px}}.k-main .details .toolbar{margin-top:16px;padding:20px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .details .toolbar .meta{width:50%;cursor:default}.k-main .details .toolbar img{float:left!important;margin-right:8px!important;width:56px;height:56px;border-radius:50%}.k-main .details .toolbar .name{margin-bottom:-5px}.k-main .details .toolbar .motto{display:-webkit-box;overflow:hidden;margin-top:10px;color:#666;text-overflow:ellipsis;font-size:14px;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .details .toolbar .meta .name a{color:#4a4a4a}.k-main .details .toolbar .share{margin-top:12px}.k-main .details .toolbar .share .btn{width:90px;height:35px;font-size:15px;line-height:1.65}.k-main .details .toolbar .share .btn-donate{padding:3px;border:1px solid #00a2ff;border-radius:0;color:#00a2ff}.k-main .details .toolbar .share .btn-donate:focus,.k-main .details .toolbar .share .btn-donate:hover{border-color:#00a2ff;background-color:#00a2ff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:#fff}.k-main .details .toolbar .share .btn-thumbs{padding:3px;border:1px solid #fb5235;border-radius:0;color:#fb5235}.k-main .details .toolbar .share .btn-thumbs:focus,.k-main .details .toolbar .share .btn-thumbs:hover{border-color:#fb5235;background-color:#fb5235;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:#fff}.btn-primary:focus,.k-main .details .toolbar .share .btn-primary.focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.donate-box .meta-pay{margin-top:14px;margin-bottom:14px;cursor:default}.donate-box .qr-pay img{width:200px;height:200px}.donate-box .choose-pay input{display:none}.donate-box .choose-pay input:checked+label{border-color:#0092ee;color:#0092ee}.donate-box .pay-button{margin:10px 5px;width:132px;height:45px;border:1px solid #e6e6e6;border-radius:2px;text-align:center;line-height:40px;cursor:pointer}.donate-box .pay-button img{height:26px}.k-main .details .post-navigation{margin-top:16px}.k-main .details .post-navigation .nav-previous a{color:#5a5a5a}.k-main .details .post-navigation .nav-next a{color:#5a5a5a}.k-main .details .post-navigation .nav-previous{float:left;padding:7px 18px;max-width:40%;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.1);text-align:left}.k-main .details .post-navigation .nav-next{float:right;padding:7px 18px;max-width:40%;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.1);text-align:right}@media screen and (max-width:768px){.k-main .details .toolbar .meta{margin:14px 0;padding-bottom:16px;width:100%;border-bottom:1px solid #eee}.k-main .details .toolbar .meta span{font-size:12px}.k-main .details .toolbar .meta .love{display:none!important}.k-main .details .toolbar .share{margin-top:16px}.k-main .details .toolbar .motto{padding-bottom:5px}.k-main .details .toolbar .share .btn{width:88px;height:35px;font-size:14.5px;line-height:1.5}}.k-main .details .comments{margin-top:16px;padding:1.6px 16px 16px;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .details .post-2 .comments{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.k-main .details .comments .comment-form-author{padding-right:5px}.k-main .details .comments .comment-form-email{padding-left:5px}.k-main .details .comments .input-group-text{border:1px solid #eee;background-color:#f8f8f8}.k-main .details .comments .form-control{border:1px solid #eee}.k-main .details .comments .title{margin-bottom:0;padding:16px 0;border-bottom:1px solid #f0f0f0;font-size:19px;cursor:default}.k-main .details .comments .comment{padding:16px 0;list-style:none}.k-main .details .comments .list>li{border-bottom:1px solid #f0f0f0}.k-main .details .comments .comment .avatar{vertical-align:middle}.k-main .details .comments .comment .avatar img{display:block;width:50px;height:50px;border:1px solid #eaeaea;border-radius:50%}.k-main .details .comments .comment .info{overflow:hidden}.k-main .details .comments .comment .info .author_name{display:inline-block;margin-top:3px;color:#252525;font-weight:600;font-style:normal;font-size:14px;line-height:1.375}.k-main .details .comments .comment .info .author_name a{color:#252525;font-weight:600;font-size:14px}.k-main .details .comments .comment .info .content{margin-bottom:0!important}.k-main .details .comments .comment .info .content p{margin:0;color:#000;font-size:13px}.k-main .details .comments .comment .info .content p span{color:#333}.k-main .details .comments .comment .info .meta,.k-main .details .comments .comment .info .meta a{color:#9b9b9b;font-size:12.5px}.k-main .details .comments .children{margin-bottom:0;padding-left:0}.k-main .details .comments .children .comment{margin-bottom:0;padding-bottom:0}.k-main .details .comments .comment-respond .comment-textarea{border:1px solid #eee;border-radius:3px;background-color:hsla(0,0%,71%,.1)}.k-main .details .comments .comment-respond .comment-textarea textarea{height:130px;border:none;border-radius:0;resize:none}.k-main .details .comments .comment-respond .comment-textarea .text-bar{overflow:hidden;padding:6.4px 8px;background-color:#f8f8f8}.k-main .details .comments .comment-respond .comment-textarea .text-bar .tool{padding-top:4.8px}.k-main .details .comments .comment-respond .comment-textarea .text-bar .tool a img{width:100%}.k-main .details .comments .comment-respond .comment-textarea .btn-primary{width:100px;border:none;border-radius:3px;background-color:#00a2ff;font-size:14px}.k-main .details .comments .comment-respond .comment-textarea .addbtn{padding:0 8px;color:#333}.k-main .details .comments .comment-respond .comment-textarea .addbtn:hover{color:#333}.k-main .details .comments .comment-respond .comment-textarea #cancel-comment-reply-link{display:inline-block;padding:6px 12px;border:none;border-radius:3px;background-color:rgba(0,0,0,.3);color:#fff;vertical-align:middle;text-align:center;white-space:nowrap;font-size:14px;line-height:1.5;user-select:none}.k-main .details .comments .comment-respond .comment-textarea .text-bar .smile{position:absolute;z-index:9;visibility:hidden;padding:2px;width:230px;height:102px;background-color:#fff;box-shadow:0 2px 10px 2px rgba(0,0,0,.11);transition:all .15s ease-out;transform:perspective(500px) rotateX(-15deg);transform-origin:50% 0}.k-main .details .comments .comment-respond .comment-textarea .text-bar .smile a{float:left;display:block;padding:4px;width:32px;height:32px;border:2px solid #fff;background-color:#f0f0f0}.k-main .details .comments .comment-respond .comment-textarea .text-bar .open{visibility:visible;transform:none}.k-main .details .comments .comment-respond .error{padding:20px;border:1px solid #e5e5e5;border-radius:4px;background-color:hsla(0,0%,71%,.1)}.k-main .details .comments .i-reply{font-size:12px}#commentpage{display:block}#commentpage a{display:inline-block;width:144px;height:37px;border:none;border-radius:2px;background-color:#00a2ff;color:#fff;font-size:15px;line-height:2.4;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-width:768px){.k-main .details .comments .comment-form-author{padding-right:15px}.k-main .details .comments .comment-form-email{padding-left:15px}}.k-main .sidebar img{width:100%;height:auto}.k-main .sidebar .widget{margin:0 0 23px;padding:15px 30px;border-radius:0;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .sidebar .w-about,.k-main .sidebar .w-ad{padding:0}.k-main .sidebar>div:last-child{margin:0}.k-main .sidebar .w-about .background{height:120px}.k-main .sidebar .w-about .wrapper img{margin:-50px 0 0;width:100px;height:100px;border:rgba(255,255,255,.4) 4px solid;border-radius:50%}.k-main .sidebar .w-about .textwidget{padding:5px 20px 20px}.k-main .sidebar .w-about .textwidget p{margin-bottom:0;cursor:default}.k-main .sidebar .w-about .textwidget .username{font-size:17px;font-weight:500;margin-bottom:5px}.k-main .sidebar .w-about .textwidget .about{font-size:15px}.k-main .sidebar .w-ad{position:relative}.k-main .sidebar .w-ad .prompt{position:absolute;top:10px;right:10px;width:39px;height:19px;background-color:rgba(0,0,0,.33);color:#dedede;text-align:center;font-size:12px;line-height:19px}.k-main .sidebar .w-recommended .bookmark-item{display:block;overflow:hidden;padding:8px 0;border-bottom:1px dashed #b4afaf;color:#333;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.k-main .sidebar .w-recommended .bookmark-item:last-child{border-bottom:none}.k-main .sidebar .w-recommended .bookmark-item .i-book{margin-right:7px}.k-main .sidebar .w-recommended .nav-link .kicon{margin-right:8px}.k-main .sidebar .w-recommended .nav-link .tab-icon{display:none}@media (min-width:1200px){.k-main .sidebar .w-recommended .nav-link .tab-icon{display:inline-block}}@media (max-width:1199.98px){.k-main .sidebar .w-recommended .nav-tabs .nav-link{padding-left:18px;padding-right:18px}}.k-main .sidebar .title{position:relative;margin:0 0 15px;padding-bottom:7px;border-bottom:1px solid #e7e7e7;font-size:17px;cursor:default}.k-main .sidebar .title::after{position:absolute;bottom:0;left:0;width:72px;height:2px;background-color:#00a2ff;content:""}.k-main .sidebar .w-tags .item,.k-main .sidebar .widget_links ul{font-size:0}.k-main .sidebar .w-tags .item a,.k-main .sidebar .widget_links ul li{display:inline-block;margin:0 1px 10px 0;padding:2px 0;width:calc(50% - 2px);border:1px solid #eee;color:#333;list-style:none;text-align:center;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}.k-main .sidebar .widget_links ul li{border:none;font-size:15px;line-height:inherit}.k-main .sidebar .widget_links ul li img{margin-top:-3px;width:25px;height:25px;border-radius:50%}.k-main .sidebar .w-tags .item a:hover,.k-main .sidebar .widget_archive ul li:hover,.k-main .sidebar .widget_categories ul li:hover,.k-main .sidebar .widget_links ul li:hover{background-color:#eee}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{border-bottom:2px solid #00a2ff;background-color:#fff;color:#333}.nav-tabs .nav-item{color:#333}.nav-tabs .nav-link{padding:8px 28px;border:0;border-bottom:2px solid #f2f2f2}.nav-tabs{border-bottom:none}.k-main .sidebar .widget_links ul{margin-bottom:0;padding-left:0}.k-main .sidebar .widget_links ul li a{color:#333}.k-main .sidebar #wp-calendar{width:100%}.k-main .sidebar caption,.k-main .sidebar tfoot{display:none}.k-main .sidebar tbody tr{font-weight:400;font-size:14px;font-family:arial}.k-main .sidebar tbody a{display:block;border:1px solid #00a2ff;background:#edf8ff}.k-main .sidebar tbody tr td,.k-main .sidebar thead tr th{text-align:center;cursor:default}.k-main .sidebar .widget_search .screen-reader-text{display:none}.btn-search{background-color:#00a2ff;border-color:#00a2ff}.btn-search:focus,.btn-search:hover,.btn-search:not(:disabled):not(.disabled):active{background-color:#0095ff;border-color:#0095ff}.btn-search:not(:disabled):not(.disabled):active:focus{box-shadow:none}.k-main .sidebar .widget_archive ul,.k-main .sidebar .widget_categories ul{margin:0;padding-left:0}.k-main .sidebar .widget_archive ul li,.k-main .sidebar .widget_categories ul li{display:inline-block;overflow:hidden;margin:0 1px 4px 0;padding:4px 0;width:164px;border:1px solid #eee;list-style:none;text-align:center;text-overflow:ellipsis;font-size:14px;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .sidebar .widget_archive ul li a,.k-main .sidebar .widget_categories ul li a{color:#333}.k-main .sidebar .w-search .btn,.k-main .sidebar .w-search .form-control{font-size:15px;border-radius:0}.k-main .sidebar .w-search .btn{padding-left:25px;padding-right:25px}@media screen and (max-width:1310px){.nav-tabs .nav-link{padding:8px 22px}.k-main .sidebar .widget_archive ul li,.k-main .sidebar .widget_categories ul li{width:110px}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .nav-link{padding-right:0;padding-left:32px}}.k-main .page404{padding:40px;text-align:center}.k-main .page404 .overlay{position:absolute;top:-1px;right:0;bottom:0;left:0;z-index:2;width:100%;height:101%;background:url(../img/404.svg) no-repeat center center;background-size:cover}.k-main .page404 .overlay:after,.k-main .page404 .overlay:before{position:absolute;top:0;z-index:10;width:20px;height:100%;background:#fff;content:""}.k-main .page404 .overlay:before{left:0}.k-main .page404 .overlay:after{right:0}.k-main .page404 .thumbnail{position:relative;width:100%;height:500px;background-position:center center;background-size:cover;background-repeat:no-repeat}.k-main .page404 .content{font-weight:500}.k-main .page404 .content .title{font-size:30px}.k-main .page404 .content .subtitle{font-size:16px}.k-main .page404 .content .action{font-size:16px}.k-main .page404 .content .action .btn-outline-primary{width:110px;border-radius:2px;letter-spacing:2.4px}.k-main .page404 .content .action .back-prevpage{border-color:#00a2ff;background-color:#00a2ff;color:#fff}.k-main .page404 .content .action .back-prevpage:hover{border-color:#009ef9;background-color:#009ef9}.k-main .page404 .content .action .back-index{border-color:#d8dcdf;background-color:transparent;background-image:none;color:#666}.k-main .page404 .content .action .back-index:hover,.k-main .page404 .content .action .back-index:not(:disabled):not(.disabled):active{border-color:#d8dcdf;background-color:#f6f4f4;color:#666}@media screen and (max-width:768px){.k-main .page404 .thumbnail{height:315px}.k-main .page404 .content .title{font-size:21px}.k-main .page404 .content .subtitle{font-size:14px}}@media screen and (max-width:480px){.k-main .page404 .thumbnail{height:200px}}.k-footer{padding:40px 0;background:#23282d}.k-footer p{margin-bottom:0;color:#8e8e8e;text-transform:uppercase;letter-spacing:1px;font-size:14px;cursor:default}.k-footer p a{color:#8e8e8e}.k-footer p a:hover{color:#0097ee}.k-footer p .police-ico{display:inline-block;margin-top:-4px;margin-right:6px;width:14px;height:1pc;background:url(../img/police-ico.png) 0 0 no-repeat;vertical-align:middle}.k-footer .f-toolbox>div{position:fixed;right:20px;z-index:999;text-align:center}.k-footer .f-toolbox .gotop .gotop-btn span,.k-footer .f-toolbox .search span{display:table-cell;width:40px;height:40px;color:#fff;vertical-align:middle;font-size:18px}.k-footer .f-toolbox .gotop{bottom:80px;visibility:hidden;cursor:pointer}.k-footer .f-toolbox .gotop .gotop-btn{display:table;width:40px;height:40px;color:#fff;text-align:center}.k-footer .f-toolbox .gotop.active{visibility:visible;background:rgba(132,132,132,.7)}.k-footer .f-toolbox .search{bottom:30px;display:table;background:rgba(132,132,132,.7);cursor:pointer}.k-footer .f-toolbox .search input{width:100%;height:40px;border:0;background:0 0;color:#fff;font-size:17px}.k-footer .social{line-height:45px}.k-footer .social a{display:inline-block;padding:0 7px}.k-footer .social a .kicon{font-size:40px}@media screen and (max-width:768px){.k-footer{padding:30px 0}.k-footer p{font-size:10px}.k-footer .social a .kicon{font-size:38px}} \ No newline at end of file +@charset "UTF-8";body{overflow-x:hidden;background:#f5f5f5;font-weight:350;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,opensans,Optima,"Microsoft Yahei",sans-serif;line-height:1.8}a{color:#00a2ff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}a:hover{color:#0097ee;text-decoration:none}a:focus{outline:0;text-decoration:none}ol,p,ul{margin-bottom:16px;color:#333;font-size:16px}ol,ul{margin:0 0 16px;padding-left:16px}ol>li{margin-bottom:6px;padding-left:2px;list-style:decimal;line-height:22px}ul>li{margin-bottom:6px;padding-left:2px;list-style:circle;line-height:22px}h1,h2,h3,h4,h5,h6{margin:0 0 30px 0;color:#333;font-weight:400}.tooltip-inner{padding:7px 6px;font-size:13px}:active,:focus,button:focus{outline:0}.btn-outline-primary.focus,.btn-outline-primary:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.form-control:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:none}::-moz-placeholder{color:#fff}::-webkit-input-placeholder{color:#fff}:-ms-input-placeholder{color:#fff}::selection{background:#ddd;color:#000;text-shadow:none}::-webkit-selection{background:#ddd;color:#000;text-shadow:none}::-moz-selection{background:#ddd;color:#000;text-shadow:none}::-webkit-scrollbar{overflow:auto;width:10px;height:6.4px}::-webkit-scrollbar-thumb{min-width:25px;min-height:25px;border:1px solid #e0e0e0;background-color:#bbb}::-webkit-scrollbar-track{border:1px solid #efefef;background-color:#f7f7f7}.k-main{padding:23px 0}.k-main.color{padding-top:103px}@media only screen and (max-width:992px){.k-main.color{padding-top:92px}}@media only screen and (max-width:768px){.k-main.color{padding-top:83px}}.k-nav{position:absolute;background-color:rgba(40,42,44,.6)}.k-nav .navbar-brand{color:#fff;font-size:24px}.k-nav .navbar-brand img{width:100px}.k-nav .navbar-toggler{padding:13px;border-color:transparent;border-radius:0;color:#343a40;text-transform:uppercase;font-weight:600;font-size:12px}.k-nav .navbar-nav{position:relative}.k-nav .navbar-nav li{margin-bottom:0;padding-left:0;list-style:none}.k-nav .navbar-nav>li.nav-item>a{text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:17px}.k-nav .line{display:flex;width:24px;height:2px;background:#fff;transition:all .3s ease-out}.k-nav .second-line{margin:5px 0}.nav-close .first-line{transform:rotate(45deg) translate3d(5px,5px,0);transform-origin:center}.nav-close .second-line{transform:scale3d(0,1,1)}.nav-close .third-line{transform:rotate(-45deg) translate3d(5px,-5px,0);transform-origin:center}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .show>.nav-link{color:#fff}.navbar-light .navbar-nav .nav-link:hover{color:rgba(255,255,255,.8)}.navbar-light .navbar-nav .nav-link .fas{margin-right:3px}.navbar-light .navbar-nav .dropdown-menu{margin:2px 0 0;padding:5px 0;min-width:140px;border:none;font-size:15px}.dropdown-item.active,.dropdown-item:active{background-color:#00a2ff}.dropdown-toggle::after{display:inline-block;margin-left:2px;border-top:0;border-right:0;border-bottom:0;border-left:0;content:"\e62e";vertical-align:unset;font-size:16px;font-family:kicon;transform:rotate(180deg)}.navbar-light .navbar-nav .dropdown-submenu{position:relative}.navbar-light .navbar-nav .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px}.navbar-light .navbar-nav .dropdown-submenu:hover>.dropdown-menu{display:block}.navbar-light .navbar-nav .dropdown-submenu>a.dropdown-toggle::after{content:"";border-top:.32em solid transparent;border-bottom:.32em solid transparent;border-left:.32em solid currentColor;font-family:inherit;transform:none;vertical-align:.08em}@media screen and (max-width:992px){.navbar-light .navbar-nav .dropdown-submenu>.dropdown-menu{position:static;display:block;float:none;margin-left:16px;border-left:1px solid rgba(255,255,255,.25)}.navbar-light .navbar-nav .dropdown-submenu>a.dropdown-toggle::after{display:none}}@media only screen and (min-width:992px){.k-nav{border-bottom:1px solid transparent;background:0 0;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.k-nav .navbar-brand{padding:10px 20px;color:#fff}.k-nav .navbar-brand:focus,.k-nav .navbar-brand:hover{color:rgba(255,255,255,.8)}.k-nav .navbar-nav>li.nav-item>a{padding:10px 20px;color:#fff}.k-nav .navbar-nav>li.nav-item>a:focus,.k-nav .navbar-nav>li.nav-item>a:hover{color:rgba(255,255,255,.8)}.k-nav.is-fixed{position:fixed;top:-67px;border-bottom:1px solid #fff;background-color:rgba(255,255,255,.9);-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s}.k-nav.is-fixed .navbar-brand{color:#212529}.k-nav.is-fixed .navbar-brand:focus,.k-nav.is-fixed .navbar-brand:hover{color:#007bff}.k-nav.is-fixed .navbar-nav>li.nav-item>a{color:#212529}.k-nav.is-fixed .navbar-nav>li.nav-item>a:focus,.k-nav.is-fixed .navbar-nav>li.nav-item>a:hover{color:#007bff}.k-nav.is-visible{-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0)}}@media screen and (max-width:992px){.navbar-light .navbar-nav .dropdown-item.active,.navbar-light .navbar-nav .dropdown-item:active,.navbar-light .navbar-nav .dropdown-item:focus,.navbar-light .navbar-nav .dropdown-item:hover,.navbar-light .navbar-nav .dropdown-menu{background-color:transparent}.k-nav .navbar-nav>li.nav-item>a{font-size:16px}.navbar-light .navbar-nav .dropdown-item{color:#fff}.navbar-light .navbar-nav .dropdown-menu{padding:0}}@media screen and (max-width:768px){.k-nav .navbar-brand{font-size:19px}.navbar-light .navbar-nav .nav-link{font-size:16px}.navbar-light .navbar-brand:hover{color:rgba(255,255,255,.8)}.k-nav .navbar-nav>li.nav-item>a{font-size:14px}}.k-header .banner{position:relative;height:300px}.k-header .banner .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;background:rgba(66,64,64,.2)}.k-header .banner .content{position:relative;height:300px;background-position:center center;background-size:cover}.k-header .banner .content .introduce{position:absolute;top:37%;z-index:10;width:100%;color:#fff;text-shadow:2px 2px 2px #666;cursor:default}.k-header .banner .content .introduce .title{margin-bottom:5px;font-size:35px}.k-header .banner .content .introduce .mate{font-size:25px}@media screen and (max-width:768px){.k-header .banner{height:290px}.k-header .banner .content{height:290px}.k-header .banner .content .introduce{top:43%}.k-header .banner .content .introduce .title{font-size:30px}.k-header .banner .content .introduce .mate{font-size:20px}}.k-main .board .paginations{margin:23px auto;width:100%;text-align:center;font-size:14px}.k-main .board .paginations a{padding:8px 12px;background:#fff;color:#444}.k-main .board .paginations .current{padding:8px 12px;background:#00a2ff;color:#fff;font-weight:400}.k-main .board .paginations .dots{padding:8px 12px;background:#fff;color:#444}.k-main .details .article .content .paginations{padding-top:20px;width:100%;font-size:14px}.k-main .details .article .content .paginations a{margin:0 3px}.k-main .details .article .content .paginations a span{padding:7px 12px;border:solid 1px #00a2ff;background-color:#f0f8ff;color:#00a2ff}.k-main .details .article .content .paginations .current span,.k-main .details .article .content .paginations a span:hover{padding:7px 12px;border:solid 1px #00a2ff;background:#00a2ff;color:#fff;font-weight:400}.k-main .board .article-panel{margin:0 0 23px;border-radius:0;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .board .article-panel:last-of-type{margin:0}.k-main .board .article-panel .a-thumb{position:relative;float:left;overflow:hidden;margin:20px;width:240px;height:145px}.k-main .board .article-panel .a-thumb img{padding:2px;width:100%;height:100%;border:1px solid #f3f3f3}.k-main .board .article-panel .a-post{margin-left:255px;padding:21px 20px 0 3px;height:160px}.k-main .board .article-panel .a-post.a-none{margin-left:0;padding:20px;height:auto}.k-main .board .article-panel .a-post .header{display:-webkit-box;overflow:hidden;margin:3px 0 6px;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .board .article-panel .a-post .header .label{position:relative;top:-2px;display:inline-block;margin-right:5px;padding:4px 6px 3px;border-radius:0;background-color:#00a2ff;color:#fff;vertical-align:baseline;text-align:center;white-space:nowrap;font-size:12px;line-height:14px}.k-main .board .article-panel .a-post .header .label .label-arrow{position:absolute;top:6px;right:-4px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid #00a2ff;content:"";vertical-align:top}.k-main .board .article-panel .a-post .header .title{display:inline;margin:0;font-size:21px}.k-main .board .article-panel .a-post .header .title a{color:#333}.k-main .board .article-panel .a-post .header .title a:hover{color:#0097ee}.k-main .board .article-panel .a-post .content{display:block;display:-webkit-box;overflow:hidden;max-height:110px;text-overflow:ellipsis;word-wrap:break-word;cursor:default;-webkit-box-orient:vertical;-webkit-line-clamp:4}.k-main .board .article-panel .a-post .content p{margin-bottom:0;font-size:15px}.k-main .board .article-panel .a-meta{clear:both;overflow:hidden;padding:8px 20px;border-top:1px solid #f3f3f3;font-size:12px;line-height:27px}.k-main .board .article-panel .a-meta span{font-size:13px;line-height:24px;cursor:default}.k-main .board .article-panel .a-meta span>i{margin-right:3px}.k-main .board .article-panel .a-meta span>a{color:#333}.k-main .board .article-panel .a-meta span>a:hover{color:#0097ee;text-decoration:none}.k-main .board .article-panel .a-meta span>a>i{margin-left:3px}.k-main .board .article-panel .search-title{padding:20px 25px;color:#000;font-size:18px}.k-main .board .article-panel .nothing{padding:50px;text-align:center}.k-main .board .article-panel .nothing img{width:50%}.k-main .board .article-panel .nothing .sorry{margin-top:30px;font-size:20px}@media screen and (max-width:768px){.k-main .board .article-panel .a-thumb{position:relative;float:none;overflow:hidden;margin:0;margin-bottom:14px;padding:0;padding-bottom:53%;width:auto;height:0;max-width:100%}.k-main .board .article-panel .a-thumb img{padding:0;height:auto;max-width:100%;border:0}.k-main .board .article-panel .a-post{margin-left:0;padding:0 12px;height:auto}.k-main .board .article-panel .a-post .header{margin:0 0 9px}.k-main .board .article-panel .a-post .header .label{display:none}.k-main .board .article-panel .a-post .header .title{font-size:20px}.k-main .board .article-panel .a-post .content{margin-bottom:10px}.k-main .board .article-panel .a-post.a-none .content{margin-bottom:0}.k-main .board .article-panel .a-meta{padding:5px 12px}.k-main .board .article-panel .a-meta span{font-size:12px}.k-main .board .article-panel .nothing .sorry{font-size:18px}}.k-main .details .article{background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1);word-wrap:break-word;word-break:break-all}.k-main .details .article .breadcrumb-box{border-bottom:1px solid #f7f7f7}.k-main .details .article>:first-child{margin-top:0}.k-main .details .article>:last-child{margin-bottom:0}.k-main .details .article .breadcrumb-box .breadcrumb{margin-bottom:0;padding:12px 16px;border-radius:0;background-color:inherit;font-size:13px}.k-main .details .article .breadcrumb-box .breadcrumb li{margin-bottom:0;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.3rem}.breadcrumb-item+.breadcrumb-item::before{padding-right:.2rem}.k-main .details .article .breadcrumb-box .breadcrumb-item.active{cursor:default}.k-main .details .article .header{padding:0 16px 16px}.k-main .details .article .header .title{padding-bottom:0;border:none}.k-main .details .article .header .meta{color:#5a5a5a;font-size:14px;cursor:default}.k-main .details .article .header .meta a{color:inherit}.k-main .details .article .header .meta>span:not(:last-child):after{margin-right:5px;margin-left:5px;color:#71777c;content:"\B7"}.k-main .details .article .content{padding:0 16px 16px;word-wrap:break-word;line-height:1.8;word-break:break-all}.k-main .details .article .content p::after,.k-main .details .article .content::after{clear:both;display:block;content:""}.k-main .details .article .content h2,.k-main .details .article .content h3,.k-main .details .article .content h4,.k-main .details .article .content h5,.k-main .details .article .content h6,.k-main .details .article h1{margin-top:24px;margin-bottom:16px;font-weight:500;line-height:32px}.k-main .details .article h1{padding-bottom:4.8px;font-size:30px;line-height:38px}.k-main .details .article .content h2{font-size:24px}.k-main .details .article .content h2.title{margin:16px -16px;padding:0 10px;border-left:5px solid #00a2ff;background-color:rgba(243,243,243,.7);font-size:20px;line-height:41px}.k-main .details .article .content h3{font-size:18px}.k-main .details .article .content h4{font-size:16px}.k-main .details .article .content h5{font-size:14px}.k-main .details .article .content h6{font-size:12px}.k-main .details .article .content p{color:#151515;line-height:30px}.k-main .details .article .content .progress{margin-bottom:16px}.k-main .details .article .content .video-container{margin-bottom:16px}.k-main .details .article .content blockquote{margin-bottom:16px;padding:16px;border-left:6px solid #dce6f0;background:#f2f7fb;color:#819198;font-size:15px}.k-main .details .article .content blockquote p{margin-bottom:-3px}.k-main .details .article .content hr{margin:24px 0;height:1px;border:none;border-top:1px solid #a5a5a5}.k-main .details .article .content pre{margin:10px 0;padding:11px 16px;border-radius:4px;background-color:#f8f8f8;word-wrap:break-word;font-size:11px;line-height:1.7;word-break:break-all}.k-main .details .article .content code{margin:0 3px;padding:2px 4px;border-radius:4px;background-color:#eff0f1;color:#333;font-size:13px;word-break:inherit}.k-main .details .article .content kbd{display:inline-block;margin:-3px 1.6px 0;padding:2.4px 9.6px;border:1px solid #adb3b9;border-radius:3px;background-color:#e1e3e5;box-shadow:0 1px 0 rgba(12,13,14,.2),0 0 0 2px #fff inset;color:#242729;vertical-align:middle;text-shadow:0 1px 0 #fff;white-space:nowrap;font-size:10px;line-height:1.5}.k-main .details .article .content pre code{margin:0;padding:0;background-color:transparent}.k-main .details .article .content pre ol{padding:0}.k-main .details .article .content pre li{margin:0;list-style:none}.k-main .details .article .content .wp-caption-text{margin-bottom:0;font-size:14px}.k-main .details .article .content .wp-block-image{margin-bottom:0}.k-main .details .article .content .wp-block-image figcaption{font-size:14px}.k-main .details .article .content figure{margin:0}.k-main .details .article .content .aligncenter::after,.k-main .details .article .content .alignleft::after,.k-main .details .article .content .alignright::after{clear:both;display:block;content:""}.k-main .details .article .content .alignleft{float:left;margin-right:16px}.k-main .details .article .content p a>img,.k-main .details .article .content p>img{display:block}.k-main .details .article .content .wp-smiley{display:inline}.k-main .details .article .content .aligncenter{margin-right:auto;margin-left:auto}.k-main .details .article .content .alignright{float:right;margin-left:16px}.k-main .details .article .content img{height:auto;max-width:100%}.k-main .details .article .content table{display:table;overflow:auto;width:100%;table-layout:fixed;word-break:break-all}.k-main .details .article .content table td,.k-main .details .article .content table th{padding:8px 16px;border:1px solid #e9ebec}.k-main .details .article .content table th{font-weight:700}.k-main .details .article .content table tr:nth-child(2n){background-color:#f8f8f8}.card-header:first-child,.k-main .details .article .content .alert,.k-main .details .article .content .card{border-radius:0}.k-main .details .article .content .card-header{padding:6px 15px}.k-main .details .article .content .card-body{padding:10px 15px}.k-main .details .article .content .alert{padding:10px 15px}.k-main .details .article .content .downbtn{display:inline-block;margin-bottom:16px;padding:3px 10px;border:1px solid #39aaf9;background:#39aaf9;color:#fff;font-size:14px}.k-main .details .article .content .downbtn:hover{background:#37a0eb;color:#fff}.k-main .details .article .content .downbtn:focus{color:#fff;text-decoration:none}.k-main .details .article .content .video-container{position:relative;overflow:hidden;padding-bottom:75%;height:0}.k-main .details .article .content .video-container embed,.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.k-main .details .article .content>:last-child{margin-bottom:0}.k-main .details .article .copyright{padding:0 16px 16px}.k-main .details .article .copyright span{display:block;padding:18px;background-color:#f7f7fa;color:#333;font-size:14px;line-height:20px;cursor:default}.k-main .details .article .footer{padding:0 16px 10px;border-top:1px solid #f2f2f2}.k-main .details .article .footer .tags,.k-main .details .article .footer .tool{margin-top:10px}.k-main .details .article .footer .tags span,.k-main .details .article .footer .tool span{color:#333;font-size:14px;cursor:default}.k-main .details .article .footer .tags a{margin:0 5px 0 0;padding:2px 7px;background-color:#a9a9a9;color:#fff;font-size:13px}.k-main .details .article .content .accordion{margin-bottom:16px;border:1px solid #e5e8ed}.k-main .details .article .content .accordion .acheader{position:relative;padding:5px 15px;background:#f7f8fa}.k-main .details .article .content .accordion .acheader span{font-weight:600;font-size:17px}.k-main .details .article .content .accordion .acheader .icon{position:absolute;right:15px;font-size:17px}.k-main .details .article .content .accordion .acheader .icon .kicon{font-size:17px}.k-main .details .article .content .accordion.active .icon{-webkit-transition:.3s;transition:.3s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.k-main .details .article .content .accordion .contents{display:none;border-top:1px solid #e6e6e6}.k-main .details .article .content .accordion .contents .inner{padding:5px 15px}@media screen and (max-width:768px){.k-main .details .article .header{padding:0 16px 12px}.k-main .details .article h1{margin-top:14px;margin-bottom:14px;font-size:22px}.k-main .details .article .header .meta{font-size:12px}.k-main .details .article .content p{font-size:15px}.k-main .details .article .content table{display:block;word-break:keep-all}.k-main .details .article .header .meta span:not(:first-child){margin-left:5px}.k-main .details .article .header .meta>span:not(:last-child):after{content:none}.k-main .details .article .content .alert{padding:10px 15px;font-size:15px}.k-main .details .article .content .card-header{font-size:15px}.k-main .details .article .content .card-body{padding:12px 15px}.k-main .details .article .content .card-text{font-size:14px}}.k-main .details .toolbar{margin-top:16px;padding:20px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .details .toolbar .meta{width:50%;cursor:default}.k-main .details .toolbar img{float:left!important;margin-right:8px!important;width:56px;height:56px;border-radius:50%}.k-main .details .toolbar .name{margin-bottom:-5px}.k-main .details .toolbar .motto{display:-webkit-box;overflow:hidden;margin-top:10px;color:#666;text-overflow:ellipsis;font-size:14px;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .details .toolbar .meta .name a{color:#4a4a4a}.k-main .details .toolbar .share{margin-top:12px}.k-main .details .toolbar .share .btn{width:90px;height:35px;font-size:15px;line-height:1.65}.k-main .details .toolbar .share .btn-donate{padding:3px;border:1px solid #00a2ff;border-radius:0;color:#00a2ff}.k-main .details .toolbar .share .btn-donate:focus,.k-main .details .toolbar .share .btn-donate:hover{border-color:#00a2ff;background-color:#00a2ff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:#fff}.k-main .details .toolbar .share .btn-thumbs{padding:3px;border:1px solid #fb5235;border-radius:0;color:#fb5235}.k-main .details .toolbar .share .btn-thumbs:focus,.k-main .details .toolbar .share .btn-thumbs:hover{border-color:#fb5235;background-color:#fb5235;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:#fff}.btn-primary:focus,.k-main .details .toolbar .share .btn-primary.focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.donate-box .meta-pay{margin-top:14px;margin-bottom:14px;cursor:default}.donate-box .qr-pay img{width:200px;height:200px}.donate-box .choose-pay input{display:none}.donate-box .choose-pay input:checked+label{border-color:#0092ee;color:#0092ee}.donate-box .pay-button{margin:10px 5px;width:132px;height:45px;border:1px solid #e6e6e6;border-radius:2px;text-align:center;line-height:40px;cursor:pointer}.donate-box .pay-button img{height:26px}.k-main .details .post-navigation{margin-top:16px}.k-main .details .post-navigation .nav-previous a{color:#5a5a5a}.k-main .details .post-navigation .nav-next a{color:#5a5a5a}.k-main .details .post-navigation .nav-previous{float:left;padding:7px 18px;max-width:40%;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.1);text-align:left}.k-main .details .post-navigation .nav-next{float:right;padding:7px 18px;max-width:40%;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.1);text-align:right}@media screen and (max-width:768px){.k-main .details .toolbar .meta{margin:14px 0;padding-bottom:16px;width:100%;border-bottom:1px solid #eee}.k-main .details .toolbar .meta span{font-size:12px}.k-main .details .toolbar .meta .love{display:none!important}.k-main .details .toolbar .share{margin-top:16px}.k-main .details .toolbar .motto{padding-bottom:5px}.k-main .details .toolbar .share .btn{width:88px;height:35px;font-size:14.5px;line-height:1.5}}.k-main .details .comments{margin-top:16px;padding:1.6px 16px 16px;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .details .post-2 .comments{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.k-main .details .comments .comment-form-author{padding-right:5px}.k-main .details .comments .comment-form-email{padding-left:5px}.k-main .details .comments .input-group-text{border:1px solid #eee;background-color:#f8f8f8}.k-main .details .comments .form-control{border:1px solid #eee}.k-main .details .comments .title{margin-bottom:0;padding:16px 0;border-bottom:1px solid #f0f0f0;font-size:19px;cursor:default}.k-main .details .comments .comment{padding:16px 0;list-style:none}.k-main .details .comments .list>li{border-bottom:1px solid #f0f0f0}.k-main .details .comments .comment .avatar{vertical-align:middle}.k-main .details .comments .comment .avatar img{display:block;width:50px;height:50px;border:1px solid #eaeaea;border-radius:50%}.k-main .details .comments .comment .info{overflow:hidden}.k-main .details .comments .comment .info .author_name{display:inline-block;margin-top:3px;color:#252525;font-weight:600;font-style:normal;font-size:14px;line-height:1.375}.k-main .details .comments .comment .info .author_name a{color:#252525;font-weight:600;font-size:14px}.k-main .details .comments .comment .info .content{margin-bottom:0!important}.k-main .details .comments .comment .info .content p{margin:0;color:#000;font-size:13px}.k-main .details .comments .comment .info .content p span{color:#333}.k-main .details .comments .comment .info .meta,.k-main .details .comments .comment .info .meta a{color:#9b9b9b;font-size:12.5px}.k-main .details .comments .children{margin-bottom:0;padding-left:0}.k-main .details .comments .children .comment{margin-bottom:0;padding-bottom:0}.k-main .details .comments .comment-respond .comment-textarea{border:1px solid #eee;border-radius:3px;background-color:hsla(0,0%,71%,.1)}.k-main .details .comments .comment-respond .comment-textarea textarea{height:130px;border:none;border-radius:0;resize:none}.k-main .details .comments .comment-respond .comment-textarea .text-bar{overflow:hidden;padding:6.4px 8px;background-color:#f8f8f8}.k-main .details .comments .comment-respond .comment-textarea .text-bar .tool{padding-top:4.8px}.k-main .details .comments .comment-respond .comment-textarea .text-bar .tool a img{width:100%}.k-main .details .comments .comment-respond .comment-textarea .btn-primary{width:100px;border:none;border-radius:3px;background-color:#00a2ff;font-size:14px}.k-main .details .comments .comment-respond .comment-textarea .addbtn{padding:0 8px;color:#333}.k-main .details .comments .comment-respond .comment-textarea .addbtn:hover{color:#333}.k-main .details .comments .comment-respond .comment-textarea #cancel-comment-reply-link{display:inline-block;padding:6px 12px;border:none;border-radius:3px;background-color:rgba(0,0,0,.3);color:#fff;vertical-align:middle;text-align:center;white-space:nowrap;font-size:14px;line-height:1.5;user-select:none}.k-main .details .comments .comment-respond .comment-textarea .text-bar .smile{position:absolute;z-index:9;visibility:hidden;padding:2px;width:230px;height:102px;background-color:#fff;box-shadow:0 2px 10px 2px rgba(0,0,0,.11);transition:all .15s ease-out;transform:perspective(500px) rotateX(-15deg);transform-origin:50% 0}.k-main .details .comments .comment-respond .comment-textarea .text-bar .smile a{float:left;display:block;padding:4px;width:32px;height:32px;border:2px solid #fff;background-color:#f0f0f0}.k-main .details .comments .comment-respond .comment-textarea .text-bar .open{visibility:visible;transform:none}.k-main .details .comments .comment-respond .error{padding:20px;border:1px solid #e5e5e5;border-radius:4px;background-color:hsla(0,0%,71%,.1)}.k-main .details .comments .i-reply{font-size:12px}#commentpage{display:block}#commentpage a{display:inline-block;width:144px;height:37px;border:none;border-radius:2px;background-color:#00a2ff;color:#fff;font-size:15px;line-height:2.4;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-width:768px){.k-main .details .comments .comment-form-author{padding-right:15px}.k-main .details .comments .comment-form-email{padding-left:15px}}.k-main .sidebar img{width:100%;height:auto}.k-main .sidebar .widget{margin:0 0 23px;padding:15px 30px;border-radius:0;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}.k-main .sidebar>div:last-child{margin:0}.w-about .background{height:120px;background-position:center center;background-repeat:no-repeat;background-size:cover}.w-about,.w-ad{padding:0}.k-main .sidebar .w-about,.k-main .sidebar .w-ad{padding:0}.w-about .wrapper img{margin:-50px 0 0;width:100px;height:100px;max-width:100px;max-height:100px;object-fit:cover;border:rgba(255,255,255,.4) 4px solid;border-radius:50%}.w-about .textwidget{padding:5px 20px 20px}.w-about .textwidget p{margin-bottom:0;cursor:default}.w-about .textwidget .username{font-size:17px;font-weight:500;margin-bottom:5px}.w-about .textwidget .about{font-size:15px}.k-main .sidebar .w-ad{position:relative}.k-main .sidebar .w-ad .prompt{position:absolute;top:10px;right:10px;width:39px;height:19px;background-color:rgba(0,0,0,.33);color:#dedede;text-align:center;font-size:12px;line-height:19px}.k-main .sidebar .w-recommended .bookmark-item{display:block;overflow:hidden;padding:8px 0;border-bottom:1px dashed #b4afaf;color:#333;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.k-main .sidebar .w-recommended .bookmark-item:last-child{border-bottom:none}.k-main .sidebar .w-recommended .bookmark-item .i-book{margin-right:7px}.k-main .sidebar .w-recommended .nav-link .kicon{margin-right:8px}.k-main .sidebar .w-recommended .nav-link .tab-icon{display:none}@media (min-width:1200px){.k-main .sidebar .w-recommended .nav-link .tab-icon{display:inline-block}}@media (max-width:1199.98px){.k-main .sidebar .w-recommended .nav-tabs .nav-link{padding-left:18px;padding-right:18px}}.k-main .sidebar .title{position:relative;margin:0 0 15px;padding-bottom:7px;border-bottom:1px solid #e7e7e7;font-size:17px;cursor:default}.k-main .sidebar .title::after{position:absolute;bottom:0;left:0;width:72px;height:2px;background-color:#00a2ff;content:""}.k-main .sidebar .w-tags .item,.k-main .sidebar .widget_links ul{font-size:0}.k-main .sidebar .w-tags .item a,.k-main .sidebar .widget_links ul li{display:inline-block;margin:0 1px 10px 0;padding:2px 0;width:calc(50% - 2px);border:1px solid #eee;color:#333;list-style:none;text-align:center;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}.k-main .sidebar .widget_links ul li{border:none;font-size:15px;line-height:inherit}.k-main .sidebar .widget_links ul li img{margin-top:-3px;width:25px;height:25px;border-radius:50%}.k-main .sidebar .w-tags .item a:hover,.k-main .sidebar .widget_archive ul li:hover,.k-main .sidebar .widget_categories ul li:hover,.k-main .sidebar .widget_links ul li:hover{background-color:#eee}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{border-bottom:2px solid #00a2ff;background-color:#fff;color:#333}.nav-tabs .nav-item{color:#333}.nav-tabs .nav-link{padding:8px 28px;border:0;border-bottom:2px solid #f2f2f2}.nav-tabs{border-bottom:none}.k-main .sidebar .widget_links ul{margin-bottom:0;padding-left:0}.k-main .sidebar .widget_links ul li a{color:#333}.k-main .sidebar #wp-calendar{width:100%}.k-main .sidebar caption,.k-main .sidebar tfoot{display:none}.k-main .sidebar tbody tr{font-weight:400;font-size:14px;font-family:arial}.k-main .sidebar tbody a{display:block;border:1px solid #00a2ff;background:#edf8ff}.k-main .sidebar tbody tr td,.k-main .sidebar thead tr th{text-align:center;cursor:default}.k-main .sidebar .widget_search .screen-reader-text{display:none}.btn-search{background-color:#00a2ff;border-color:#00a2ff}.btn-search:focus,.btn-search:hover,.btn-search:not(:disabled):not(.disabled):active{background-color:#0095ff;border-color:#0095ff}.btn-search:not(:disabled):not(.disabled):active:focus{box-shadow:none}.k-main .sidebar .widget_archive ul,.k-main .sidebar .widget_categories ul{margin:0;padding-left:0}.k-main .sidebar .widget_archive ul li,.k-main .sidebar .widget_categories ul li{display:inline-block;overflow:hidden;margin:0 1px 4px 0;padding:4px 0;width:164px;border:1px solid #eee;list-style:none;text-align:center;text-overflow:ellipsis;font-size:14px;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-box-orient:vertical;-webkit-line-clamp:1}.k-main .sidebar .widget_archive ul li a,.k-main .sidebar .widget_categories ul li a{color:#333}.k-main .sidebar .w-search .btn,.k-main .sidebar .w-search .form-control{font-size:15px;border-radius:0}.k-main .sidebar .w-search .btn{padding-left:25px;padding-right:25px}@media screen and (max-width:1310px){.nav-tabs .nav-link{padding:8px 22px}.k-main .sidebar .widget_archive ul li,.k-main .sidebar .widget_categories ul li{width:110px}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .nav-link{padding-right:0;padding-left:32px}}.k-main .page404{padding:40px;text-align:center}.k-main .page404 .overlay{position:absolute;top:-1px;right:0;bottom:0;left:0;z-index:2;width:100%;height:101%;background:url(../img/404.svg) no-repeat center center;background-size:cover}.k-main .page404 .overlay:after,.k-main .page404 .overlay:before{position:absolute;top:0;z-index:10;width:20px;height:100%;background:#fff;content:""}.k-main .page404 .overlay:before{left:0}.k-main .page404 .overlay:after{right:0}.k-main .page404 .thumbnail{position:relative;width:100%;height:500px;background-position:center center;background-size:cover;background-repeat:no-repeat}.k-main .page404 .content{font-weight:500}.k-main .page404 .content .title{font-size:30px}.k-main .page404 .content .subtitle{font-size:16px}.k-main .page404 .content .action{font-size:16px}.k-main .page404 .content .action .btn-outline-primary{width:110px;border-radius:2px;letter-spacing:2.4px}.k-main .page404 .content .action .back-prevpage{border-color:#00a2ff;background-color:#00a2ff;color:#fff}.k-main .page404 .content .action .back-prevpage:hover{border-color:#009ef9;background-color:#009ef9}.k-main .page404 .content .action .back-index{border-color:#d8dcdf;background-color:transparent;background-image:none;color:#666}.k-main .page404 .content .action .back-index:hover,.k-main .page404 .content .action .back-index:not(:disabled):not(.disabled):active{border-color:#d8dcdf;background-color:#f6f4f4;color:#666}@media screen and (max-width:768px){.k-main .page404 .thumbnail{height:315px}.k-main .page404 .content .title{font-size:21px}.k-main .page404 .content .subtitle{font-size:14px}}@media screen and (max-width:480px){.k-main .page404 .thumbnail{height:200px}}.k-footer{padding:40px 0;background:#23282d}.k-footer p{margin-bottom:0;color:#8e8e8e;text-transform:uppercase;letter-spacing:1px;font-size:14px;cursor:default}.k-footer p a{color:#8e8e8e}.k-footer p a:hover{color:#0097ee}.k-footer p .police-ico{display:inline-block;margin-top:-4px;margin-right:6px;width:14px;height:1pc;background:url(../img/police-ico.png) 0 0 no-repeat;vertical-align:middle}.k-footer .f-toolbox>div{position:fixed;right:20px;z-index:999;text-align:center}.k-footer .f-toolbox .gotop .gotop-btn span,.k-footer .f-toolbox .search span{display:table-cell;width:40px;height:40px;color:#fff;vertical-align:middle;font-size:18px}.k-footer .f-toolbox .gotop{bottom:80px;visibility:hidden;cursor:pointer}.k-footer .f-toolbox .gotop .gotop-btn{display:table;width:40px;height:40px;color:#fff;text-align:center}.k-footer .f-toolbox .gotop.active{visibility:visible;background:rgba(132,132,132,.7)}.k-footer .f-toolbox .search{bottom:30px;display:table;background:rgba(132,132,132,.7);cursor:pointer}.k-footer .f-toolbox .search input{width:100%;height:40px;border:0;background:0 0;color:#fff;font-size:17px}.k-footer .social{line-height:45px}.k-footer .social a{display:inline-block;padding:0 7px}.k-footer .social a .kicon{font-size:40px}@media screen and (max-width:768px){.k-footer{padding:30px 0}.k-footer p{font-size:10px}.k-footer .social a .kicon{font-size:38px}} \ No newline at end of file diff --git a/inc/theme-widgets.php b/inc/theme-widgets.php index 9445aab..c0d77a4 100644 --- a/inc/theme-widgets.php +++ b/inc/theme-widgets.php @@ -35,6 +35,83 @@ function widgets_init() } add_action('widgets_init', 'widgets_init'); +/* ========================================================================== + * 后台挂件表单的公共样式与脚本（3.2.51） + * + * ── 为什么不再各个挂件自己挂一份 ──────────────────────────────────── + * 原来 `widget_about` / `widget_ad` 各自在构造函数里 add_action 一个 + * `admin_enqueue_scripts`，动作里 enqueue 媒体库 + widget.min.js。 + * 这套写法有两个毛病： + * + * ① 两个挂件都启用时，同一份资源被 enqueue 两次（id 相同，WP 会去重， + * 但每次都会多跑一次 wp_enqueue_media，白白初始化一遍媒体框）； + * ② 更要紧的：媒体框的 JS 只在**挂件实例展开**用得上，可 WP 的旧版 + * 挂件页会把所有实例的 form() 一次性渲染进页面 —— 资源没到就等于 + * 「选择图片」按钮点了没反应。 + * + * 现在统一挂在一个函数里，只在挂件相关页面加载。 + * + * 🔴 缩略图预览这部分样式用 wp_add_inline_style 而不是去改 + * assets/css/widget.min.css：那个文件**没有源文件**（仓库里只有压缩产物）， + * 为了加几条规则去手改一行压缩 CSS，下次别人再改就无从维护。 + * ====================================================================== */ + +if (!function_exists('yang_widget_admin_assets')): + + function yang_widget_admin_assets($hook) + { + // 只在挂件页 / 自定义器加载。别的后台页面不需要媒体框。 + if (!in_array($hook, array('widgets.php', 'customize.php'), true)) { + return; + } + + wp_enqueue_media(); + wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery'), THEME_VERSION, true); + wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array(), THEME_VERSION); + + $css = ' +/* 挂件表单里的图片缩略图。 + 没有它的话，用户只能看到一串 URL，根本不知道那张图长什么样 —— + 「背景图在哪改」这个问题有一半是"看不见"造成的。 */ +.yang-media-preview{display:block;margin:8px 0 0;line-height:0} +.yang-media-preview img{display:block;width:64px;height:64px;object-fit:cover;border:1px solid #dcdcde;border-radius:4px;background:#f6f7f7} +.yang-media-preview-wide img{width:100%;max-width:260px;height:auto;aspect-ratio:16/9} +/* 「清除」按钮跟「选择图片」贴在一起，别让它单独换行成一个大按钮 */ +.media-widget-control .yang-media-clear{margin-left:6px} +'; + wp_register_style('yang-widget-admin', false, array('widget_css'), THEME_VERSION); + wp_enqueue_style('yang-widget-admin'); + wp_add_inline_style('yang-widget-admin', $css); + + /* 「清除」按钮：把输入框清空，并顺手把缩略图去掉。 + * + * 🔴 为什么必须同时清缩略图：只清 input 的话，图片还挂在那儿， + * 用户会以为没清掉，再点一次又点回原来的图。 + * 🔴 为什么用 change 事件触发：主题的 widget.min.js 靠 + * `.change()` 让 WP 把表单标记为"已修改"，否则直接 + * 改 .val() 不会点亮「保存」按钮，用户点保存时改动丢失。 */ + $js = <<<'JS' +(function(){ + if (typeof jQuery === 'undefined') { return; } + jQuery(function($){ + $(document).on('click', '.yang-media-clear', function(e){ + e.preventDefault(); + var id = $(this).attr('data-target'); + if (!id) { return; } + var $input = $('#' + id); + $input.val('').trigger('change'); + $input.closest('p').find('.yang-media-preview').remove(); + $(this).remove(); + }); + }); +})(); +JS; + wp_add_inline_script('widget_scripts', $js); + } + +endif; +add_action('admin_enqueue_scripts', 'yang_widget_admin_assets'); + /* ========================================================================== * 挂件标题与外框（3.2.50） * @@ -362,8 +439,6 @@ class widget_ad extends WP_Widget { public function __construct() { - add_action('admin_enqueue_scripts', array($this, 'scripts')); - $widget_ops = array( 'name' => __('图片广告', 'kratos'), 'description' => __('显示自定义图片广告的工具', 'kratos'), @@ -372,14 +447,6 @@ class widget_ad extends WP_Widget parent::__construct(false, false, $widget_ops); } - public function scripts() - { - wp_enqueue_script('media-upload'); - wp_enqueue_media(); - wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery')); - wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array()); - } - public function widget($args, $instance) { $subtitle = !empty($instance['subtitle']) ? $instance['subtitle'] : __('广告', 'kratos'); @@ -451,8 +518,6 @@ class widget_about extends WP_Widget { public function __construct() { - add_action('admin_enqueue_scripts', array($this, 'scripts')); - $widget_ops = array( 'name' => __('个人简介', 'kratos'), 'description' => __('可跳转后台的个人简介展示工具', 'kratos'), @@ -461,20 +526,76 @@ class widget_about extends WP_Widget parent::__construct(false, false, $widget_ops); } - public function scripts() + /** + * 取挂件实例里的某个值；空则返回回退值。 + * + * 🔴 为什么不用 `!empty()` 判定： + * ① 用户在后台把字段清空后，update() 存进去的是空字符串 ''， + * `!empty('')` 为 false —— 这一条两边一致，没问题； + * ② 但 `!empty('0')` 也是 **false**！昵称就叫「0」、简介只写「0」 + * 的站点会莫名其妙被回落到主题设置。判空只能判「去掉空白后是空串」。 + * + * 3.2.51 起 widget_about 的四个字段都走这里，取值顺序统一为： + * 实例自己的值 → $fallback（主题设置 / 主题自带默认图） + * + * @param array $instance 挂件实例 + * @param string $key 字段名 + * @param string $fallback 实例里没填时用的值 + * @return string + */ + private function pick($instance, $key, $fallback) { - wp_enqueue_script('media-upload'); - wp_enqueue_media(); - wp_enqueue_script('widget_scripts', ASSET_PATH . '/assets/js/widget.min.js', array('jquery')); - wp_enqueue_style('widget_css', ASSET_PATH . '/assets/css/widget.min.css', array()); + $v = isset($instance[$key]) ? $instance[$key] : ''; + if (!is_string($v)) { + return $fallback; + } + + $v = trim($v); + + return ($v === '') ? $fallback : $v; } public function widget($args, $instance) { - $introduce = kratos_option('a_about', __('保持饥渴的专注，追求最佳的品质', 'kratos')); - $username = kratos_option('a_nickname', __('Kratos', 'kratos')); - $avatar = yang_option_image('a_gravatar'); - $background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png'; + /* ══════════════════════════════════════════════════════════════ + * 3.2.51：这三项原来**只读主题设置**，挂件表单里压根没有对应字段。 + * + * 老代码长这样（拿掉注释后的实质）： + * $introduce = kratos_option('a_about', ...); + * $username = kratos_option('a_nickname', ...); + * $avatar = yang_option_image('a_gravatar'); + * + * 于是用户点开侧栏「个人简介」，表单里只有「背景图片」一个字段， + * 头像 / 昵称 / 简介**无处可填**，只能跑去「主题设置 → 站长信息」 + * 改那份全站共用的。同一侧栏想放两个人的简介就不可能。 + * + * 取值顺序（实例优先，留空回落）： + * ① 挂件实例自己填的 + * ② 主题设置「站长信息」—— **必须保留**：线上站点正用着 + * 「老杨 / 博士，非博学之士…」那一套，改成"空了就空着" + * 会让所有老站点升级后侧栏突然变空白。 + * ③ 代码里的兜底文案 + * ══════════════════════════════════════════════════════════════ */ + $introduce = $this->pick( + $instance, + 'introduce', + kratos_option('a_about', __('保持饥渴的专注，追求最佳的品质', 'kratos')) + ); + $username = $this->pick( + $instance, + 'nickname', + kratos_option('a_nickname', __('Kratos', 'kratos')) + ); + $avatar = $this->pick( + $instance, + 'avatar', + yang_option_image('a_gravatar') + ); + $background = $this->pick( + $instance, + 'background', + ASSET_PATH . '/assets/img/about-background.png' + ); /* 🔴 原来写的是 `background:url(' . $background . ') no-repeat ...` * —— url() 里的地址**没有引号**。只要路径含空格、括号、单引号， @@ -492,9 +613,9 @@ class widget_about extends WP_Widget * 统一转义一次。这样 `&` 只会被编成 `&`（正确）， * 浏览器解析回属性值后仍是原始的 `&`。 * - * 🔴 $introduce 来自主题选项 textarea，$username 来自 text， - * 原来是裸 echo。个人简介里写个 < 就把后面的结构吃掉了。 - * 简介保留换行（textarea 的自然语义），其余全部转义。 */ + * 🔴 $introduce / $username / $avatar 现在都可能来自**后台表单** + * （用户自己填的），原来是裸 echo。个人简介里写个 < 就把后面的 + * 结构吃掉了。简介保留换行（textarea 的自然语义），其余全部转义。 */ $bg = 'background-image:url("' . esc_url_raw($background) . '");' . 'background-repeat:no-repeat;' . 'background-position:center center;' @@ -517,31 +638,146 @@ class widget_about extends WP_Widget echo ''; } + /** + * 保存实例。 + * + * 🔴 不能用 `!empty($new_instance[...])` 判"用户填了没有"： + * `!empty('0')` 是 **false** ⇒ 昵称就叫「0」、简介只写「0」的站点 + * 保存后会变成空串、前台回落主题设置，而且**后台看起来像没保存成功**。 + * 测试 `_about_test.php` 的「昵称『0』能存下来」抓到的就是这个。 + * 统一用「转成字符串、trim 后是不是空串」判断，与 pick() 一致。 + */ public function update($new_instance, $old_instance) { $instance = array(); - $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : ''; - $instance['background'] = (!empty($new_instance['background'])) ? esc_url_raw($new_instance['background']) : ''; + $instance['title'] = $this->clean_text($new_instance, 'title'); + $instance['background'] = $this->clean_url($new_instance, 'background'); + + /* 3.2.51 新增三项。 + * + * 🔴 简介是 textarea，**不能**用 sanitize_text_field： + * 那个函数会去掉所有换行，用户分段的简介会挤成一整段。 + * 要用 sanitize_textarea_field（WP 4.7+ 才有）。 + * 主题没声明最低 WP 版本，所以对更老的版本做个兜底 —— + * 兜底只做「去标签 + 规整换行」，不追求完全等价。 + * + * 🔴 头像/背景是 URL，用 esc_url_raw（只清洗协议与字符）， + * 不要在这里 esc_url —— 存进库的值必须是可以直接用的原地址。 */ + $instance['avatar'] = $this->clean_url($new_instance, 'avatar'); + $instance['nickname'] = $this->clean_text($new_instance, 'nickname'); + $instance['introduce'] = $this->clean_textarea($new_instance, 'introduce'); return $instance; } + /** + * 取一个新提交的字段；没提交或只有空白 → 空串。 + * + * @param array $src 新提交的实例数组 + * @param string $key 字段名 + * @return string + */ + private function submitted($src, $key) + { + if (!isset($src[$key])) { + return ''; + } + $v = $src[$key]; + if (!is_string($v)) { + return ''; + } + + return trim($v); + } + + private function clean_text($src, $key) + { + $v = $this->submitted($src, $key); + + return $v === '' ? '' : sanitize_text_field($v); + } + + private function clean_url($src, $key) + { + $v = $this->submitted($src, $key); + + return $v === '' ? '' : esc_url_raw($v); + } + + private function clean_textarea($src, $key) + { + $v = $this->submitted($src, $key); + if ($v === '') { + return ''; + } + + if (function_exists('sanitize_textarea_field')) { + return sanitize_textarea_field($v); + } + + return trim(preg_replace('/\r\n|\r/', "\n", wp_strip_all_tags($v))); + } + public function form($instance) { $title = !empty($instance['title']) ? $instance['title'] : ''; - $background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png'; + + /* 输入框里显示**用户自己填的原始值**（没填就是空）， + * 预览图显示**前台实际会用的那张**（含回落）。 + * + * 两者刻意分开： + * · 输入框若直接显示回落值，用户会以为"我已经填了"， + * 保存后才发现其实存的是主题设置那份； + * · 预览图画的是最终效果，用户一眼能看出现在用的是哪张。 */ + $avatarRaw = isset($instance['avatar']) ? trim((string) $instance['avatar']) : ''; + $bgRaw = isset($instance['background']) ? trim((string) $instance['background']) : ''; + $nicknameRaw = isset($instance['nickname']) ? trim((string) $instance['nickname']) : ''; + $introduceRaw = isset($instance['introduce']) ? (string) $instance['introduce'] : ''; + + $avatarShown = $this->pick($instance, 'avatar', yang_option_image('a_gravatar')); + $bgShown = $this->pick($instance, 'background', ASSET_PATH . '/assets/img/about-background.png'); ?>

- - + +

+

- - + + + + + + + +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + + + + + + +