MediaWiki:Common.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* ===== 字体定义 ===== */
@font-face {
  font-family: 'LXGWWenKaiLite';
  src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.woff2') format('woff2'),
       url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  crossOrigin: anonymous; /* 需要服务器配置CORS */
}

/* 其他字重定义（结构相同，路径不同） */
@font-face { /* Medium */ }
@font-face { /* Regular */ }

/* 等宽字体定义 */
@font-face {
  font-family: 'LXGWWenKaiMonoLite';
  src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.woff2') format('woff2'),
       url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== 全局样式 ===== */
:root {
  --font-primary: 'LXGWWenKaiLite', system-ui, -apple-system, sans-serif;
  --font-code: 'LXGWWenKaiMonoLite', 'Courier New', monospace;
  --img-desktop-width: min(80%, 1200px); /* 桌面端限制 */
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
}

#content h1, #content h2 {
  font-family: var(--font-primary);
  font-weight: 500; /* 明确使用Medium字重 */
}

code, pre, tt {
  font-family: var(--font-code);
  line-height: 1.5;
  padding: 0.2em 0.4em;
  background: #f8f9fa;
  border-radius: 3px;
}

/* ===== 图片响应式系统 ===== */
img[src*="www.guohao.asia"] {
  height: auto;
  display: block;
  margin: 0 auto;
  transition: width 0.3s ease; /* 平滑过渡效果 */
  
  /* 移动端默认样式 */
  width: 100%;
  max-width: 100%;
}

/* JS控制的类 */
.img-auto {
  width: auto !important;
  max-width: none !important;
}

.img-responsive {
  width: var(--img-desktop-width) !important;
}

/* ===== 媒体查询 ===== */
@media (max-width: 600px) {
  .ev-video {
    width: 100%;
    height: auto;
  }
  
  /* 移动端覆盖规则 */
  .img-responsive {
    width: 100% !important;
  }
}