MediaWiki:Common.css：修订间差异

←上一编辑下一编辑→

@@ 第202行： / 第202行： @@
 }
-#wordcount-number {
+/* 容器占比更大，让数字更横向突出 */
-     background: linear-gradient(90deg, #1E90FF, #00CED1);
+#wiki-wordcount {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0;
+}
+/* 数字样式更霸气 */
+#wiki-wordcount-number {
+    font-size: 4.5em;
+    font-weight: 800;
+    /* 渐变字色 + 光晕 */
+     background: linear-gradient(90deg, #00CCFF, #FF69B4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
-     text-shadow: 0 0 10px rgba(30,144,255,0.5);
+     text-shadow:
+0 8px rgba(0, 204, 255, 0.6),
+0 20px rgba(255, 105, 180, 0.4);
+    /* 用等宽数字字体防止跳动
+       这个是 CSS OpenType 属性，
+       让每个数字占据同样宽度 */
+    font-variant-numeric: tabular-nums; /* 避免 1、2、3 等宽度变化 */  [oai_citation:0‡Go Make Things](https://gomakethings.com/preventing-layout-shift-with-numbers-using-css/?utm_source=chatgpt.com)
+    /* 加一些字符间距让数字更宽 */
+    letter-spacing: 0.08em; /* 你可以根据视觉调整 */  [oai_citation:1‡Oryoy](https://www.oryoy.com/news/jie-mi-css-zi-fu-kuan-du-kong-zhi-ji-qiao-qing-song-jia-yu-wen-ben-pai-ban-da-zao-wan-mei-shi-jue-xi.html?utm_source=chatgpt.com)
+    /* 固定最小宽度占位 */
+    min-width: 12ch; /* 12 个 “0” 宽度 */
+    text-align: center;
+    white-space: nowrap; /* 不换行 */
+}
+/* 大屏自动放大数字宽度 */
+@media screen and (min-width: 1200px) {
+    #wiki-wordcount-number {
+        font-size: 5.8em;
+        letter-spacing: 0.12em;
+    }
 }