全局美化 v1

templates/question/list.html

@@ -5,6 +5,8 @@
 <link rel="apple-touch-icon" href="{{.PageUser.Avatar}}?v=2" crossorigin="anonymous"/>
 <link rel="icon" sizes="192x192" href="{{.PageUser.Avatar}}?v=2" crossorigin="anonymous">
 <style>
+  /* 封面高度（原内联 style，改到类里便于和遮罩一起维护） */
+  .tb-profile-cover { min-height: 260px; }
   /* 投票列表：与探索页"全部投票"一致的列表行样式 */
   .profile-votes-list { display: grid; gap: 0; }
   .profile-vote-item {
@@ -14,16 +16,16 @@
     gap: 16px;
     min-width: 0;
     padding: 14px 16px;
-    border-bottom: 1px solid var(--tb-border, #e9e9e9);
+    border-bottom: 1px solid var(--tb-border);
     text-decoration: none;
   }
-  .profile-vote-item:first-child { border-top: 1px solid var(--tb-border, #e9e9e9); }
-  .profile-vote-item:hover { background: var(--tb-surface-hover, #f8fbff); text-decoration: none; }
+  .profile-vote-item:first-child { border-top: 1px solid var(--tb-border); }
+  .profile-vote-item:hover { background: var(--tb-surface-hover); text-decoration: none; }
   .profile-vote-content { min-width: 0; }
   .profile-vote-title {
     display: block;
     overflow: hidden;
-    color: var(--tb-text, #333);
+    color: var(--tb-text);
     font-size: 0.98rem;
     font-weight: 600;
     line-height: 1.45;
@@ -40,7 +42,7 @@
   .profile-vote-meta .uk-label { font-size: 0.72rem; line-height: 1.6; }
   .profile-vote-action {
     flex: 0 0 auto;
-    color: var(--tb-primary, #1e87f0);
+    color: var(--tb-primary);
     font-size: 0.82rem;
     white-space: nowrap;
   }
@@ -55,9 +57,9 @@
     padding: 4px;
     margin-top: 20px;
     margin-bottom: 18px;
-    border: 1px solid var(--tb-border, #e5e5e5);
+    border: 1px solid var(--tb-border);
     border-radius: 9px;
-    background: var(--tb-surface-2, #fafafa);
+    background: var(--tb-surface-2);
   }
   .profile-tab {
     flex: 1;
@@ -65,26 +67,26 @@
     border-radius: 6px;
     padding: 9px 15px;
     background: transparent;
-    color: var(--tb-text-muted, #666);
+    color: var(--tb-text-muted);
     cursor: pointer;
     font-size: 0.9rem;
     transition: background 0.2s ease, color 0.2s ease;
   }
-  .profile-tab:hover { color: var(--tb-primary, #1e87f0); }
+  .profile-tab:hover { color: var(--tb-primary); }
   .profile-tab.is-active {
-    background: var(--tb-surface, #fff);
+    background: var(--tb-surface);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
-    color: var(--tb-primary, #1e87f0);
+    color: var(--tb-primary);
     font-weight: 600;
   }
   /* 功能关闭时置灰禁用的 Tab（如投票功能关闭） */
   .profile-tab.is-disabled,
   .profile-tab:disabled {
     cursor: not-allowed;
-    color: var(--tb-text-muted, #999);
+    color: var(--tb-text-muted);
     opacity: 0.7;
   }
-  .profile-tab.is-disabled:hover { color: var(--tb-text-muted, #999); }
+  .profile-tab.is-disabled:hover { color: var(--tb-text-muted); }
   .profile-panel[hidden] { display: none !important; }
   html[data-theme="dark"] .profile-tabs {
     border-color: var(--tb-border);
@@ -95,7 +97,7 @@
   html[data-theme="dark"] .profile-tab.is-disabled { color: var(--tb-text-muted); opacity: 0.55; }
 </style>
 <div class="uk-card uk-card-default uk-text-center">
-  <div class="uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" style="min-height: 260px;" data-src="{{ .PageUser.Background }}" uk-img>
+  <div class="tb-profile-cover uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light{{ if .PageUser.Background }} tb-cover{{ end }}" data-src="{{ .PageUser.Background }}" uk-img>
     <div class="uk-card-body">
       <img class="uk-border-circle uk-box-shadow-large" src="{{ if .PageUser.Avatar }}{{ .PageUser.Avatar }}?v=2{{ else }}{{ .DefaultAvatar }}{{ end }}" crossorigin="anonymous" style="width: 100px; height: 100px; max-width: 100%; max-height: 100%;">
       <h3 id="usernamecolor">{{ .PageUser.Name }}</h3>
@@ -133,6 +135,18 @@
 <script>
 document.getElementById("usernamecolor").style.color = "{{.PageUser.Usernamecolor}}";
 document.getElementById("introcolor").style.color = "{{.PageUser.Introcolor}}";
+// 封面上的文字颜色由箱主自选，深浅不定：按用户名颜色的亮度决定遮罩方向
+// （深字上面压浅色遮罩、浅字上面压深色遮罩），保证任何配色都能读。
+// 无背景图时页面没有 .tb-cover，这里什么都不做，保持原样。
+(function () {
+  var cover = document.querySelector('.tb-cover');
+  var el = document.getElementById('usernamecolor');
+  if (!cover || !el) return;
+  var m = window.getComputedStyle(el).color.match(/\d+/g);
+  if (!m || m.length < 3) return;
+  var lum = (0.299 * m[0] + 0.587 * m[1] + 0.114 * m[2]) / 255;
+  if (lum > 0.62) cover.classList.add('tb-cover-dark');
+})();
 </script>
 <div>
   <div class="uk-card uk-card-default uk-card-small uk-card-body">