Template:HomePage/styles.css：修订间差异
模板页面
更多操作
Jhq223将页面Template:HomePage/styles.css的内容模型从“wikitext”更改为“CSS” |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
/* --- 1. 全局与布局 --- */ | |||
/* 页面背景 (仅在主页生效) */ | |||
body.page-Main_Page, body.page-首页 { /* 确保样式只应用在首页 */ | |||
background-color: #1a232b; /* 深色太空背景 */ | |||
color: #e0e0e0; | |||
} | |||
/* 内容区域重置 (仅在主页生效) */ | |||
body.page-Main_Page #content, body.page-首页 #content { | body.page-Main_Page #content, body.page-首页 #content { | ||
background: none; | background: none; | ||
| 第5行： | 第14行： | ||
} | } | ||
/* 首页网格容器 */ | |||
.home-grid-container { | .home-grid-container { | ||
max-width: 1400px; | max-width: 1400px; | ||
margin: 20px auto; | margin: 20px auto; | ||
display: grid; | display: grid; | ||
/* 定义网格为6列，fr单位代表按比例分配可用空间 */ | |||
grid-template-columns: repeat(6, 1fr); | grid-template-columns: repeat(6, 1fr); | ||
gap: 15px; | gap: 15px; /* 网格间距 */ | ||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | ||
} | } | ||
/* --- 2. 卡片通用样式 --- */ | |||
/* 首页卡片基础样式 */ | |||
.home-card { | .home-card { | ||
background-color: #2c3a47; | background-color: #2c3a47; /* 卡片背景色 */ | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 20px; | padding: 20px; | ||
| 第25行： | 第38行： | ||
} | } | ||
/* 卡片悬浮效果 */ | |||
.home-card:hover { | .home-card:hover { | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
| 第32行： | 第45行： | ||
} | } | ||
/* 卡片内部元素 */ | |||
.home-card .card-label { | .home-card .card-label { | ||
font-size: 12px; | font-size: 12px; | ||
| 第59行： | 第72行： | ||
.home-card .card-content { | .home-card .card-content { | ||
flex-grow: 1; | flex-grow: 1; /* 内容区自动占据剩余空间 */ | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
/* 网格跨度控制 */ | |||
.col-span-2 { grid-column: span 2; } | .col-span-2 { grid-column: span 2; } | ||
.col-span-3 { grid-column: span 3; } | .col-span-3 { grid-column: span 3; } | ||
| 第72行： | 第85行： | ||
/* --- 3. 特定模块样式 --- */ | |||
/* 3.1 欢迎与搜索框 */ | |||
.home-search-card { | .home-search-card { | ||
/* 您可以在此设置背景图，如果不用图片则会显示纯色 */ | |||
/* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('YOUR_BANNER_IMAGE.png') center center / cover no-repeat; */ | |||
background-color: #34495e; | background-color: #34495e; | ||
padding: 30px 20px; | padding: 30px 20px; | ||
| 第89行： | 第106行： | ||
} | } | ||
.home-search-card .inputbox { | .home-search-card .inputbox { /* MediaWiki生成的搜索框容器 */ | ||
width: 90%; | width: 90%; | ||
max-width: 600px; | max-width: 600px; | ||
| 第101行： | 第118行： | ||
border-radius: 6px 0 0 6px; | border-radius: 6px 0 0 6px; | ||
outline: none; | outline: none; | ||
color: #333; | color: #333; /* 输入文字颜色 */ | ||
} | } | ||
| 第121行： | 第138行： | ||
} | } | ||
/* 3.2 快速导航按钮 */ | |||
.card-button-grid { | .card-button-grid { | ||
display: grid; | display: grid; | ||
| 第145行： | 第164行： | ||
/* 3.3 当月生日角色列表 */ | |||
.birthday-character-list { | .birthday-character-list { | ||
display: flex; | display: flex; | ||
| 第159行： | 第179行： | ||
border-radius: 6px; | border-radius: 6px; | ||
min-width: 180px; | min-width: 180px; | ||
flex-grow: 1; | flex-grow: 1; /* 让项目能自动填充空间 */ | ||
} | } | ||
| 第185行： | 第205行： | ||
/* 3.4 官方链接 */ | |||
.official-links-grid { | .official-links-grid { | ||
display: grid; | display: grid; | ||
| 第208行： | 第229行： | ||
} | } | ||
/* --- 4. 响应式设计 (可选，但强烈推荐) --- */ | |||
/* 当屏幕宽度小于900px时，网格变为3列 */ | |||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.home-grid-container { | .home-grid-container { | ||
| 第215行： | 第237行： | ||
} | } | ||
/* 当屏幕宽度小于600px时，网格变为1列 */ | |||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.home-grid-container { | .home-grid-container { | ||
| 第221行： | 第243行： | ||
} | } | ||
/* 在单列视图下，所有卡片都应该横跨整列，所以重置跨度 */ | |||
.home-card { | .home-card { | ||
grid-column: span 1 !important; | grid-column: span 1 !important; | ||