3.2.24: 评论富文本工具条（B/I/颜色/表情移入）+ kses 放行 span+style + 后台设置页标签左列竖排重排

2026-10-24 21:59:06 +08:00
parent 78fce2d87d
commit fd27b4d218
6 changed files with 441 additions and 26 deletions
@@ -359,3 +359,112 @@
  line-height: 1.5;
  margin-top: 3px;
 }
+
+/* ══════════════════════════════════════════════════════════════
+   3.2.24 设置页布局重排
+   用户反馈："主题设置的样式不好看，把标签页按钮放左侧、上下排列，
+   功能项放在右侧，重新设置好看一点。"
+
+   实现：≥960px 时把 nav-tab-wrapper 浮到左侧成一列竖排导航，
+   内容区（含保存提示条）整体右移；窄屏回退 WP 默认的横向标签，
+   不在手机后台做特殊布局。切标签的 JS（options-custom.js）不动，
+   它只认 .nav-tab / .nav-tab-active / .group 这几个类。
+   ══════════════════════════════════════════════════════════════ */
+
+@media screen and (min-width: 960px) {
+
+  #optionsframework-wrap {
+    max-width: 1180px;
+  }
+
+  /* 浮动布局的收尾：否则 wrap 高度塌到标签列或面板较短的那个 */
+  #optionsframework-wrap::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  /* ── 左侧标签列 ── */
+  #optionsframework-wrap h2.nav-tab-wrapper {
+    float: left;
+    box-sizing: border-box;
+    width: 190px;
+    margin: 0 20px 20px 0;
+    padding: 8px;
+    border: 1px solid #dcdcde;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab {
+    float: none;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0 0 2px;
+    padding: 9px 12px;
+    border: 0;
+    border-left: 3px solid transparent;
+    border-radius: 4px;
+    background: none;
+    color: #50575e;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab:last-child {
+    margin-bottom: 0;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab:hover {
+    border-left-color: transparent;
+    background: #f0f0f1;
+    color: #1d2327;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab-active,
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab-active:hover {
+    border-left-color: #00a2ff;
+    background: #e8f5ff;
+    color: #0089db;
+    font-weight: 600;
+  }
+
+  /* ── 右侧内容区：面板 + 保存提示条都要让开左侧一列 ── */
+  #optionsframework-wrap > #optionsframework-metabox,
+  #optionsframework-wrap > .notice,
+  #optionsframework-wrap > .updated,
+  #optionsframework-wrap > .error {
+    margin-left: 210px;
+  }
+
+  #optionsframework-metabox #optionsframework {
+    border-radius: 6px;
+  }
+}
+
+/* ── 区块内部（宽窄屏都生效）────────────────────────────────
+   1. 分组标题：原来 `#optionsframework h3` 是给面板顶部那条用的
+      灰底横条，选择器太宽把每个分组标题也罩了进去，整页一排灰条。
+      这里把分组标题单独重排：去灰底、加重字重、压淡下边线。 */
+#optionsframework .group > h3 {
+  margin: 0;
+  padding: 15px 18px 13px;
+  border-bottom: 1px solid #f0f0f1;
+  background: none;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1d2327;
+}
+
+/* 2. 区块间距与分隔：原来 10px 的内边距太挤，项与项之间没有分界 */
+#optionsframework .section {
+  padding: 16px 18px 8px;
+  border-bottom: 1px solid #f6f7f7;
+}
+
+/* 3. 提交栏：与分组标题同一套留白 */
+#optionsframework-submit {
+  padding: 12px 18px;
+}