全局美化 v4

2026-10-19 12:07:21 +08:00
parent 5c7707ec0d
commit d7c1782bb6
50 changed files with 18372 additions and 401 deletions
@@ -2,8 +2,8 @@
 <html lang="zh-CN">
 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <title>预览 11:39 · 投票</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>预览 12:01 · 投票</title>
  <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
  <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
  <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -261,12 +261,19 @@
  html[data-theme="dark"] .explore-intro {
      color: var(--tb-text-muted) !important;
  }
-  /* 切换按钮图标切换 */
+  /* 切换按钮图标切换（内联 SVG，不依赖 UIkit 图标库） */
+  #theme-toggle .tb-icon-light, #theme-toggle-mobile .tb-icon-light,
+  #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark {
+      display: inline-flex;
+      align-items: center;
+  }
+  #theme-toggle .tb-icon-light svg, #theme-toggle-mobile .tb-icon-light svg,
+  #theme-toggle .tb-icon-dark svg, #theme-toggle-mobile .tb-icon-dark svg { display: block; }
  #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark { display: none; }
  html[data-theme="dark"] #theme-toggle .tb-icon-light,
  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-light { display: none; }
  html[data-theme="dark"] #theme-toggle .tb-icon-dark,
-  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline; }
+  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline-flex; }

 /* 基础质感层：只调整外观（圆角/投影/字体/数字对齐），不改任何结构与布局。
   颜色一律取自头部令牌，亮暗两套自动生效，因此这里不需要再写 html[data-theme="dark"] 分支。 */
@@ -341,7 +348,26 @@
  .uk-text-meta {
      color: var(--tb-text-muted);
  }
-  /* 统计/日期等数字列等宽对齐，避免刷新时左右跳动 */
+  
+/* 轻量胶囊：用于投票类型、热门标签等「只是分类信息」的位置。
+   实心 uk-label 一屏多个会变成一排色块，这里统一降级为浅底 + 次要色文字。 */
+.tb-chip {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: var(--tb-radius-xs);
+    background-color: var(--tb-surface-2);
+    color: var(--tb-text-secondary);
+    font-size: 0.72rem;
+    line-height: 1.7;
+    white-space: nowrap;
+}
+a.tb-chip:hover {
+    background-color: var(--tb-primary-weak);
+    color: var(--tb-primary);
+    text-decoration: none;
+}
+
+/* 统计/日期等数字列等宽对齐，避免刷新时左右跳动 */
  .uk-table,
  .tb-num {
      font-variant-numeric: tabular-nums;
@@ -598,34 +624,26 @@
  html[data-theme="dark"] .md-body th,
  html[data-theme="dark"] .md-body td { border-color: #3a404c; }

-/* 投票结果占比条：UIkit 3 已无 .uk-progressbar 类（那是 UIkit 2 的），
-   模板用 <div class="uk-progress"><div class="uk-progressbar"> 结构，需补一套填充样式，
-   否则内层填充无高度/背景，所有占比条都只剩外层灰色轨道，看起来一模一样。 */
-  .uk-progress {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      height: 10px;
-      margin: 0;
-      border: none;
-      border-radius: 6px;
-      background-color: #e5e5e5;
-      overflow: hidden;
-      box-shadow: none;
-  }
-  .uk-progressbar {
-      display: block;
-      height: 100%;
-      background-color: #1e87f0;
-      border-radius: 6px 0 0 6px;
-      transition: width 0.3s ease;
-  }
-  html[data-theme="dark"] .uk-progress {
-      background-color: var(--tb-border);
-  }
-  html[data-theme="dark"] .uk-progressbar {
-      background-color: var(--tb-primary);
-  }
+/* 投票结果占比条：模板已改用 UIkit 3 原生 <progress class="uk-progress" value max>，
+   这里只把默认的 15px 高 / 500px 圆角 / 20px 外边距收紧到与页面一致的规格。
+   （原先为 UIkit 2 的 .uk-progressbar 结构打的补丁已删除） */
+.uk-progress {
+    height: 10px;
+    margin: 0;
+    border-radius: var(--tb-radius-xs);
+    background-color: var(--tb-surface-2);
+}
+.uk-progress::-webkit-progress-bar {
+    background-color: var(--tb-surface-2);
+    border-radius: var(--tb-radius-xs);
+}
+.uk-progress::-webkit-progress-value {
+    background-color: var(--tb-primary);
+    border-radius: var(--tb-radius-xs) 0 0 var(--tb-radius-xs);
+}
+.uk-progress::-moz-progress-bar {
+    background-color: var(--tb-primary);
+}

 /* 移动端底部操作栏：固定底栏承载语言切换与深色模式，桌面端隐藏 */
  #tb-mobile-utils {
@@ -706,7 +724,6 @@


  <meta name="google-site-verification" content="fEPwRRJfiGsgwc5SINBQwZhPK8F0cwRaOvRx0YRurI4" />
-  <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
  
  <script>
      window.addEventListener("load", function () {
@@ -815,7 +832,7 @@ window.tbRenderQR = function (el, getOptions) {
        
        <ul class="uk-navbar-nav tb-nav-utils">
          <li>
-            <a href="#" aria-label="语言" title="语言">🌐</a>
+            <a href="#" aria-label="语言" title="语言"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3.2 9h17.6M3.2 15h17.6"/><ellipse cx="12" cy="12" rx="4" ry="9"/></svg></a>
            <div class="uk-navbar-dropdown" uk-drop="mode: click; pos: bottom-right">
              <ul class="uk-nav uk-navbar-dropdown-nav">
                
@@ -832,7 +849,7 @@ window.tbRenderQR = function (el, getOptions) {
        <ul class="uk-navbar-nav tb-nav-utils">
          <li>
            <a href="#" id="theme-toggle" title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
-              <span class="tb-icon-light">🌙</span><span class="tb-icon-dark">☀️</span>
+              <span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
            </a>
          </li>
        </ul>
@@ -862,7 +879,7 @@ document.addEventListener("DOMContentLoaded", function() {
  
  <button type="button" id="theme-toggle-mobile" class="uk-button uk-button-default uk-button-small"
          title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
-    <span class="tb-icon-light">🌙</span><span class="tb-icon-dark">☀️</span>
+    <span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
  </button>
 </div>

@@ -1240,14 +1257,11 @@ document.addEventListener("DOMContentLoaded", function() {
    <h4 class="uk-card-title uk-margin-remove-bottom">热门标签</h4>
    <div class="uk-margin-small-top uk-flex uk-flex-wrap uk-flex-middle" style="gap: 6px;">
      
-      <a class="uk-label uk-label-success"
-         href="/explore?q=%E6%9D%82%E8%B0%88" style="text-decoration:none;">#杂谈</a>
+      <a class="tb-chip" href="/explore?q=%E6%9D%82%E8%B0%88">#杂谈</a>
      
-      <a class="uk-label uk-label-warning"
-         href="/explore?q=%E5%AD%A6%E4%B9%A0" style="text-decoration:none;">#学习</a>
+      <a class="tb-chip" href="/explore?q=%E5%AD%A6%E4%B9%A0">#学习</a>
      
-      <a class="uk-label uk-label-danger"
-         href="/explore?q=%E9%9F%B3%E4%B9%90" style="text-decoration:none;">#音乐</a>
+      <a class="tb-chip" href="/explore?q=%E9%9F%B3%E4%B9%90">#音乐</a>
      
    </div>
  </div>