MediaWiki:Common.css：修订间差异

←上一编辑

@@ 第116行： / 第116行： @@
      float: right;
      margin-left: 10px;
-     max-width: 20em;
+    width: 300px;
+    /* 固定宽度（参考 huijiwiki），保证文字环绕时布局稳定 */
+     max-width: 100%;
+    /* 极窄屏下不溢出 */
      text-align: center;
      color: var(--color-text);
@@ 第130行： / 第133行： @@
      clear: right;
      margin-bottom: 1em;
+    overflow-wrap: break-word;
+    /* 长文本自动换行，避免撑破表格 */
+}
+/* 窄屏（≤768px，参考 huijiwiki）：取消右浮动、居中显示，避免左侧文字列被挤压过窄 */
+@media (max-width: 767.98px) {
+    .infobox {
+        float: none;
+        clear: both;
+        width: 300px;
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+/* 手机（≤576px）：占满内容区全宽（用 !important 覆盖模板内联的固定宽度，如 bodystyle=width:20em） */
+@media (max-width: 575.98px) {
+    .infobox {
+        width: 100% !important;
+        max-width: 100%;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
 }
@@ 第146行： / 第173行： @@
 .infobox .infobox-label {
      width: 30%;
+    min-width: 90px;
+    /* 保证标签列在任何宽度下都不至于过窄 */
      font-weight: bold;
      background-color: var(--color-theme-deep);
@@ 第160行： / 第189行： @@
      text-align: left;
      vertical-align: top;
+}
+/* ==========================================================================
+   文字背景效果（Template:文字背景：毛玻璃 / 遮罩 / 阴影）
+   ========================================================================== */
+.text-bg {
+    border-radius: 4px;
+    padding: 0.05em 0.28em;
+}
+/* 毛玻璃：半透明 + 背景模糊（颜色用 --text-bg-color-light/--text-bg-color、透明度用 --text-bg-opacity，默认白 0.5） */
+.text-bg-glass {
+    background: rgb(from var(--text-bg-color-light, var(--text-bg-color, #ffffff)) r g b / var(--text-bg-opacity, 0.5));
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+}
+/* 背景遮罩：半透明（不影响文字颜色；颜色用 --text-bg-color-light/--text-bg-color、透明度用 --text-bg-opacity，默认主题色 var(--color-primary)） */
+.text-bg-mask {
+    background: rgb(from var(--text-bg-color-light, var(--text-bg-color, var(--color-primary))) r g b / var(--text-bg-opacity, 0.4));
+}
+/* 文字阴影 */
+.text-bg-shadow {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.35);
+}
+/* ==========================================================================
+   文字描边效果（Template:文字描边）
+   ========================================================================== */
+.text-stroke {
+    -webkit-text-stroke: 1px var(--stroke-color-light, rgba(255, 255, 255, 0.9));
+    paint-order: stroke fill;
+}
+/* 深色模式适配 */
+@media screen {
+    html.skin-theme-clientpref-night .text-bg-glass {
+        background: rgb(from var(--text-bg-color-night, var(--text-bg-color, #000000)) r g b / var(--text-bg-opacity, 0.45));
+    }
+    html.skin-theme-clientpref-night .text-bg-mask {
+        background: rgb(from var(--text-bg-color-night, var(--text-bg-color, var(--color-primary))) r g b / var(--text-bg-opacity, 0.4));
+    }
+    html.skin-theme-clientpref-night .text-bg-shadow {
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6);
+    }
+    /* 深色模式默认描边：深灰 */
+    html.skin-theme-clientpref-night .text-stroke {
+        -webkit-text-stroke: 1px var(--stroke-color-night, rgba(200, 200, 200, 0.9));
+    }
 }

DoubleCircle​（留言 | 贡献）

DoubleCircle（留言 | 贡献）