Template:HomePage/styles.css:修订间差异
模板页面
更多操作
创建页面,内容为“→--- 1. 全局与布局 ---: →内容区域重置 (仅在主页生效): body.page-Main_Page #content, body.page-首页 #content { background: none; border: none; box-shadow: none; } →首页网格容器: .home-grid-container { max-width: 1400px; margin: 20px auto; display: grid; →定义网格为6列,fr单位代表按比例分配可用空间: grid-template-columns: repeat(6, 1fr); gap: 15px; →网格间距:…” |
无编辑摘要 |
||
第1行: | 第1行: | ||
body.page-Main_Page #content, body.page-首页 #content { | body.page-Main_Page #content, body.page-首页 #content { | ||
background: none; | background: none; | ||
第7行: | 第5行: | ||
} | } | ||
.home-grid-container { | .home-grid-container { | ||
max-width: 1400px; | max-width: 1400px; | ||
margin: 20px auto; | margin: 20px auto; | ||
display: grid; | display: grid; | ||
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; | ||
} | } | ||
.home-card { | .home-card { | ||
background-color: #2c3a47; | background-color: #2c3a47; | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 20px; | padding: 20px; | ||
第31行: | 第25行: | ||
} | } | ||
.home-card:hover { | .home-card:hover { | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
第38行: | 第32行: | ||
} | } | ||
.home-card .card-label { | .home-card .card-label { | ||
font-size: 12px; | font-size: 12px; | ||
第65行: | 第59行: | ||
.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; } | ||
第78行: | 第72行: | ||
.home-search-card { | .home-search-card { | ||
background-color: #34495e; | background-color: #34495e; | ||
padding: 30px 20px; | padding: 30px 20px; | ||
第99行: | 第89行: | ||
} | } | ||
.home-search-card .inputbox { | .home-search-card .inputbox { | ||
width: 90%; | width: 90%; | ||
max-width: 600px; | max-width: 600px; | ||
第111行: | 第101行: | ||
border-radius: 6px 0 0 6px; | border-radius: 6px 0 0 6px; | ||
outline: none; | outline: none; | ||
color: #333; | color: #333; | ||
} | } | ||
第131行: | 第121行: | ||
} | } | ||
.card-button-grid { | .card-button-grid { | ||
display: grid; | display: grid; | ||
第157行: | 第145行: | ||
.birthday-character-list { | .birthday-character-list { | ||
display: flex; | display: flex; | ||
第172行: | 第159行: | ||
border-radius: 6px; | border-radius: 6px; | ||
min-width: 180px; | min-width: 180px; | ||
flex-grow: 1; | flex-grow: 1; | ||
} | } | ||
第198行: | 第185行: | ||
.official-links-grid { | .official-links-grid { | ||
display: grid; | display: grid; | ||
第222行: | 第208行: | ||
} | } | ||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.home-grid-container { | .home-grid-container { | ||
第230行: | 第215行: | ||
} | } | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.home-grid-container { | .home-grid-container { | ||
第236行: | 第221行: | ||
} | } | ||
.home-card { | .home-card { | ||
grid-column: span 1 !important; | grid-column: span 1 !important; |