打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css:修订间差异

MediaWiki界面页面
Null
Null留言 | 贡献
Null
Null留言 | 贡献
第1行: 第1行:
/* 在MediaWiki的Common.css文件中添加以下代码 */
/* ===== 字体定义 ===== */
@font-face {
@font-face {
   font-family: 'LXGWWenKaiLite';
   font-family: 'LXGWWenKaiLite';
   src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype');
   src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.woff2') format('woff2'),
   font-weight: 300; /* Light */
      url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-style: normal;
  font-display: swap;
  crossOrigin: anonymous; /* 需要服务器配置CORS */
}
}


@font-face {
/* 其他字重定义(结构相同,路径不同) */
  font-family: 'LXGWWenKaiLite';
@font-face { /* Medium */ }
  src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Medium.ttf') format('truetype');
@font-face { /* Regular */ }
  font-weight: 500; /* Medium */
  font-style: normal;
}
 
@font-face {
  font-family: 'LXGWWenKaiLite';
  src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}


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


@font-face {
/* ===== 全局样式 ===== */
   font-family: 'LXGWWenKaiMonoLite';
:root {
  src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Medium.ttf') format('truetype');
   --font-primary: 'LXGWWenKaiLite', system-ui, -apple-system, sans-serif;
  font-weight: 500; /* Medium */
   --font-code: 'LXGWWenKaiMonoLite', 'Courier New', monospace;
   font-style: normal;
   --img-desktop-width: min(80%, 1200px); /* 桌面端限制 */
}
 
@font-face {
  font-family: 'LXGWWenKaiMonoLite';
   src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}
}


/* 应用字体 */
body {
body {
   font-family: 'LXGWWenKaiLite', sans-serif;
   font-family: var(--font-primary);
  line-height: 1.6;
}
}


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


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


/* 基本样式,适用于所有图片 */
/* ===== 图片响应式系统 ===== */
img[src*="www.guohao.asia"] {
img[src*="www.guohao.asia"] {
   height: auto;
   height: auto;
   max-width: 100%; /* 确保图片不会超出其父容器的宽度 */
  display: block;
  margin: 0 auto;
  transition: width 0.3s ease; /* 平滑过渡效果 */
 
  /* 移动端默认样式 */
  width: 100%;
   max-width: 100%;
}
}


/* 媒体查询,仅当屏幕宽度大于450像素时应用 */
/* JS控制的类 */
@media (min-width: 450px) {
.img-auto {
   img[src*="www.guohao.asia"] {
  width: auto !important;
    width: 80%;
   max-width: none !important;
  }
}
 
.img-responsive {
  width: var(--img-desktop-width) !important;
}
}


@media only screen and (max-width: 600px) {
/* ===== 媒体查询 ===== */
  /* 针对手机的样式 */
@media (max-width: 600px) {
   .ev-video {
   .ev-video {
     width: 100%;
     width: 100%;
     height: auto;
     height: auto;
  }
 
  /* 移动端覆盖规则 */
  .img-responsive {
    width: 100% !important;
   }
   }
}
}

2025年4月10日 (四) 08:55的版本

/* ===== 字体定义 ===== */
@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;
  }
}