测试3:修订间差异
小无编辑摘要 |
小无编辑摘要 标签:已被回退 |
||
| 第1行: | 第1行: | ||
/* Template:首页卡片2026/styles.css | |||
首页卡片版样式。适合放到 TemplateStyles,也可以追加到 MediaWiki:Common.css。 | |||
*/ | |||
.xq-home { | |||
max-width: 1120px; | |||
margin: 0 auto; | |||
color: #172033; | |||
} | |||
.xq-home-hero { | |||
display: grid; | |||
{ | gap: 12px; | ||
margin: 10px 0 24px; | |||
padding: 22px 0 8px; | |||
} | |||
.xq-home-hero h2 { | |||
margin: 0; | |||
color: #121826; | |||
font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; | |||
font-size: clamp(28px, 4vw, 46px); | |||
line-height: 1.22; | |||
border: 0; | |||
} | |||
.xq-home-hero p { | |||
max-width: 760px; | |||
margin: 0; | |||
color: #6b7280; | |||
font-size: 17px; | |||
line-height: 1.8; | |||
} | |||
.xq-home-section { | |||
margin: 28px 0; | |||
} | |||
.xq-home-section--nav { | |||
margin-top: 8px; | |||
} | |||
.xq-home-feed { | |||
margin-top: 18px; | |||
} | |||
.xq-home-section__head { | |||
display: flex; | |||
align-items: end; | |||
justify-content: space-between; | |||
gap: 16px; | |||
margin: 0 0 14px; | |||
} | |||
.xq-home-section h2 { | |||
margin: 0; | |||
color: #111827; | |||
font-size: 22px; | |||
line-height: 1.35; | |||
border: 0; | |||
} | |||
.xq-home-section__more { | |||
flex: 0 0 auto; | |||
color: #2f5aa8; | |||
font-size: 14px; | |||
font-weight: 700; | |||
} | |||
.xq-home-card-grid { | |||
max-width: 860px; | |||
} | |||
.xq-home-nav-grid { | |||
margin-right: -8px; | |||
margin-bottom: 4px; | |||
overflow: hidden; | |||
} | |||
.xq-home-nav-card { | |||
box-sizing: border-box; | |||
float: left; | |||
width: 12.5%; | |||
padding: 0 8px 8px 0; | |||
} | |||
.xq-home-nav-card a { | |||
display: block; | |||
padding: 8px 4px; | |||
overflow: hidden; | |||
color: #334155; | |||
font-size: 13px; | |||
font-weight: 800; | |||
line-height: 1.3; | |||
text-align: center; | |||
text-decoration: none; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
background: #f8fafc; | |||
border: 1px solid #e2e8f0; | |||
border-radius: 999px; | |||
} | |||
.xq-home-nav-card a:hover { | |||
color: #2f5aa8; | |||
text-decoration: none; | |||
border-color: #cbd5e1; | |||
} | |||
.xq-home-card { | |||
box-sizing: border-box; | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
gap: 14px; | |||
min-height: 104px; | |||
margin: 0 0 10px; | |||
padding: 10px 14px 10px 10px; | |||
overflow: hidden; | |||
background: #ffffff; | |||
border: 1px solid #e3e7ee; | |||
border-radius: 8px; | |||
box-shadow: 0 3px 10px rgba(31, 41, 55, 0.035); | |||
cursor: pointer; | |||
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; | |||
} | |||
.xq-home-card::before { | |||
content: ""; | |||
} | |||
.xq-home-card:hover { | |||
border-color: #cbd5e1; | |||
box-shadow: 0 8px 18px rgba(31, 41, 55, 0.07); | |||
transform: translateY(-1px); | |||
} | |||
.xq-home-card__image { | |||
flex: 0 0 84px; | |||
width: 84px; | |||
height: 84px; | |||
overflow: hidden; | |||
background: #eef2f7; | |||
border-radius: 8px; | |||
} | |||
.xq-home-card__image a, | |||
.xq-home-card__image .image, | |||
.xq-home-card__image img { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.xq-home-card__image img { | |||
object-fit: cover; | |||
} | |||
.xq-home-card__body { | |||
flex: 1 1 auto; | |||
min-width: 0; | |||
overflow: hidden; | |||
} | |||
.xq-home-card__title { | |||
overflow: hidden; | |||
color: #111827; | |||
font-size: 17px; | |||
font-weight: 800; | |||
line-height: 1.32; | |||
max-height: 45px; | |||
} | |||
.xq-home-card__title a { | |||
color: #111827 !important; | |||
text-decoration: none !important; | |||
} | |||
.xq-home-card__title a:hover { | |||
color: #2f5aa8 !important; | |||
text-decoration: none !important; | |||
} | |||
.xq-home-card__title a:focus { | |||
outline: 0; | |||
} | |||
.xq-home-card__title a::after { | |||
position: absolute; | |||
z-index: 3; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
content: ""; | |||
} | |||
.xq-home-card__title a:focus::after { | |||
outline: 2px solid #2f5aa8; | |||
outline-offset: 2px; | |||
} | |||
.xq-home-card__meta { | |||
margin-top: 6px; | |||
overflow: hidden; | |||
color: #6b7280; | |||
font-size: 13px; | |||
line-height: 1.45; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | |||
.xq-home-card__text { | |||
margin-top: 6px; | |||
overflow: hidden; | |||
color: #6b7280; | |||
font-size: 13px; | |||
line-height: 1.5; | |||
max-height: 39px; | |||
} | |||
.xq-home-manual { | |||
padding: 16px; | |||
background: #f7f8fb; | |||
border: 1px solid #e3e7ee; | |||
border-radius: 8px; | |||
} | |||
@media (max-width: 768px) { | |||
.xq-home { | |||
max-width: none; | |||
} | |||
.xq-home-hero { | |||
margin-top: 0; | |||
padding-top: 8px; | |||
} | |||
.xq-home-section__head { | |||
align-items: flex-start; | |||
} | |||
.xq-home-card-grid { | |||
max-width: none; | |||
} | |||
.xq-home-nav-grid { | |||
margin-right: -6px; | |||
} | |||
.xq-home-nav-card { | |||
width: 25%; | |||
padding: 0 6px 6px 0; | |||
} | |||
.xq-home-nav-card a { | |||
padding: 7px 2px; | |||
font-size: 12px; | |||
} | |||
.xq-home-card { | |||
min-height: 92px; | |||
gap: 10px; | |||
margin-bottom: 8px; | |||
padding: 10px; | |||
} | |||
.xq-home-card__image { | |||
flex-basis: 72px; | |||
width: 72px; | |||
height: 72px; | |||
} | |||
.xq-home-card__title { | |||
font-size: 15px; | |||
line-height: 1.32; | |||
max-height: 40px; | |||
} | |||
.xq-home-card__meta { | |||
display: none; | |||
} | |||
.xq-home-card__text { | |||
display: block; | |||
margin-top: 4px; | |||
font-size: 12px; | |||
line-height: 1.35; | |||
max-height: 32px; | |||
} | |||
} | |||
2026年6月7日 (日) 21:48的版本
/* Template:首页卡片2026/styles.css
首页卡片版样式。适合放到 TemplateStyles,也可以追加到 MediaWiki:Common.css。
- /
.xq-home {
max-width: 1120px; margin: 0 auto; color: #172033;
}
.xq-home-hero {
display: grid; gap: 12px; margin: 10px 0 24px; padding: 22px 0 8px;
}
.xq-home-hero h2 {
margin: 0; color: #121826; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; font-size: clamp(28px, 4vw, 46px); line-height: 1.22; border: 0;
}
.xq-home-hero p {
max-width: 760px; margin: 0; color: #6b7280; font-size: 17px; line-height: 1.8;
}
.xq-home-section {
margin: 28px 0;
}
.xq-home-section--nav {
margin-top: 8px;
}
.xq-home-feed {
margin-top: 18px;
}
.xq-home-section__head {
display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 14px;
}
.xq-home-section h2 {
margin: 0; color: #111827; font-size: 22px; line-height: 1.35; border: 0;
}
.xq-home-section__more {
flex: 0 0 auto; color: #2f5aa8; font-size: 14px; font-weight: 700;
}
.xq-home-card-grid {
max-width: 860px;
}
.xq-home-nav-grid {
margin-right: -8px; margin-bottom: 4px; overflow: hidden;
}
.xq-home-nav-card {
box-sizing: border-box; float: left; width: 12.5%; padding: 0 8px 8px 0;
}
.xq-home-nav-card a {
display: block; padding: 8px 4px; overflow: hidden; color: #334155; font-size: 13px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px;
}
.xq-home-nav-card a:hover {
color: #2f5aa8; text-decoration: none; border-color: #cbd5e1;
}
.xq-home-card {
box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 14px; min-height: 104px; margin: 0 0 10px; padding: 10px 14px 10px 10px; overflow: hidden; background: #ffffff; border: 1px solid #e3e7ee; border-radius: 8px; box-shadow: 0 3px 10px rgba(31, 41, 55, 0.035); cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.xq-home-card::before {
content: "";
}
.xq-home-card:hover {
border-color: #cbd5e1; box-shadow: 0 8px 18px rgba(31, 41, 55, 0.07); transform: translateY(-1px);
}
.xq-home-card__image {
flex: 0 0 84px; width: 84px; height: 84px; overflow: hidden; background: #eef2f7; border-radius: 8px;
}
.xq-home-card__image a, .xq-home-card__image .image, .xq-home-card__image img {
display: block; width: 100%; height: 100%;
}
.xq-home-card__image img {
object-fit: cover;
}
.xq-home-card__body {
flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.xq-home-card__title {
overflow: hidden; color: #111827; font-size: 17px; font-weight: 800; line-height: 1.32; max-height: 45px;
}
.xq-home-card__title a {
color: #111827 !important; text-decoration: none !important;
}
.xq-home-card__title a:hover {
color: #2f5aa8 !important; text-decoration: none !important;
}
.xq-home-card__title a:focus {
outline: 0;
}
.xq-home-card__title a::after {
position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; content: "";
}
.xq-home-card__title a:focus::after {
outline: 2px solid #2f5aa8; outline-offset: 2px;
}
.xq-home-card__meta {
margin-top: 6px; overflow: hidden; color: #6b7280; font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap;
}
.xq-home-card__text {
margin-top: 6px; overflow: hidden; color: #6b7280; font-size: 13px; line-height: 1.5; max-height: 39px;
}
.xq-home-manual {
padding: 16px; background: #f7f8fb; border: 1px solid #e3e7ee; border-radius: 8px;
}
@media (max-width: 768px) {
.xq-home {
max-width: none;
}
.xq-home-hero {
margin-top: 0;
padding-top: 8px;
}
.xq-home-section__head {
align-items: flex-start;
}
.xq-home-card-grid {
max-width: none;
}
.xq-home-nav-grid {
margin-right: -6px;
}
.xq-home-nav-card {
width: 25%;
padding: 0 6px 6px 0;
}
.xq-home-nav-card a {
padding: 7px 2px;
font-size: 12px;
}
.xq-home-card {
min-height: 92px;
gap: 10px;
margin-bottom: 8px;
padding: 10px;
}
.xq-home-card__image {
flex-basis: 72px;
width: 72px;
height: 72px;
}
.xq-home-card__title {
font-size: 15px;
line-height: 1.32;
max-height: 40px;
}
.xq-home-card__meta {
display: none;
}
.xq-home-card__text {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.35;
max-height: 32px;
}
}