MediaWiki:Common.css：修订间差异
无编辑摘要 |
无编辑摘要 标签：已被回退 |
||
| 第23行： | 第23行： | ||
.vector-sidebar { | .vector-sidebar { | ||
display: block !important; | display: block !important; | ||
} | |||
/* ======================================== | |||
Vend88 Wiki 首页 | |||
======================================== */ | |||
.vendwiki-home { | |||
--vend-primary: #f2b705; | |||
--vend-primary-dark: #d89f00; | |||
--vend-text: #1f2937; | |||
--vend-muted: #667085; | |||
--vend-border: #e5e7eb; | |||
--vend-background: #f7f8fa; | |||
--vend-card: #ffffff; | |||
--vend-dark: #17202d; | |||
margin: -20px calc(50% - 50vw) 0; | |||
color: var(--vend-text); | |||
font-family: | |||
-apple-system, | |||
BlinkMacSystemFont, | |||
"Segoe UI", | |||
"PingFang SC", | |||
"Microsoft YaHei", | |||
Arial, | |||
sans-serif; | |||
} | |||
.vendwiki-home a { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
.vendwiki-home a:hover { | |||
color: var(--vend-primary-dark); | |||
text-decoration: none; | |||
} | |||
.vendwiki-container { | |||
width: min(1180px, calc(100% - 40px)); | |||
margin: 0 auto; | |||
} | |||
/* 顶部欢迎区 */ | |||
.vendwiki-hero { | |||
position: relative; | |||
overflow: hidden; | |||
min-height: 430px; | |||
display: flex; | |||
align-items: center; | |||
padding: 70px 20px; | |||
color: #fff; | |||
background: | |||
radial-gradient( | |||
circle at 85% 30%, | |||
rgba(242, 183, 5, 0.28), | |||
transparent 28% | |||
), | |||
radial-gradient( | |||
circle at 10% 90%, | |||
rgba(242, 183, 5, 0.14), | |||
transparent 30% | |||
), | |||
linear-gradient(135deg, #17202d 0%, #202d3d 55%, #26384b 100%); | |||
} | |||
.vendwiki-hero::before { | |||
content: ""; | |||
position: absolute; | |||
width: 380px; | |||
height: 380px; | |||
right: -120px; | |||
top: -150px; | |||
border: 70px solid rgba(255, 255, 255, 0.025); | |||
border-radius: 50%; | |||
} | |||
.vendwiki-hero::after { | |||
content: ""; | |||
position: absolute; | |||
width: 260px; | |||
height: 260px; | |||
left: -100px; | |||
bottom: -150px; | |||
border: 55px solid rgba(242, 183, 5, 0.08); | |||
border-radius: 50%; | |||
} | |||
.vendwiki-hero-inner { | |||
position: relative; | |||
z-index: 1; | |||
width: min(920px, 100%); | |||
margin: 0 auto; | |||
text-align: center; | |||
} | |||
.vendwiki-eyebrow, | |||
.vendwiki-section-label { | |||
display: inline-block; | |||
margin-bottom: 12px; | |||
color: var(--vend-primary); | |||
font-size: 13px; | |||
font-weight: 700; | |||
letter-spacing: 0.18em; | |||
} | |||
.vendwiki-hero h1 { | |||
margin: 0; | |||
color: #fff; | |||
border: 0; | |||
font-size: clamp(34px, 5vw, 55px); | |||
font-weight: 750; | |||
line-height: 1.2; | |||
} | |||
.vendwiki-hero-description { | |||
max-width: 650px; | |||
margin: 18px auto 30px; | |||
color: rgba(255, 255, 255, 0.78); | |||
font-size: 17px; | |||
line-height: 1.8; | |||
} | |||
/* 搜索框 */ | |||
.vendwiki-search { | |||
display: flex; | |||
align-items: center; | |||
max-width: 760px; | |||
height: 68px; | |||
margin: 0 auto; | |||
padding: 6px; | |||
border-radius: 12px; | |||
background: #fff; | |||
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24); | |||
} | |||
.vendwiki-search-icon { | |||
flex: 0 0 52px; | |||
color: #667085; | |||
font-size: 30px; | |||
line-height: 1; | |||
} | |||
.vendwiki-search input { | |||
flex: 1; | |||
min-width: 0; | |||
height: 100%; | |||
padding: 0 12px; | |||
border: 0; | |||
outline: 0; | |||
background: transparent; | |||
color: #111827; | |||
font-size: 16px; | |||
} | |||
.vendwiki-search input::placeholder { | |||
color: #9ca3af; | |||
} | |||
.vendwiki-search button { | |||
height: 52px; | |||
padding: 0 27px; | |||
border: 0; | |||
border-radius: 8px; | |||
background: var(--vend-primary); | |||
color: #17202d; | |||
font-size: 15px; | |||
font-weight: 700; | |||
cursor: pointer; | |||
} | |||
.vendwiki-search button:hover { | |||
background: #ffc51a; | |||
} | |||
.vendwiki-hot-search { | |||
margin-top: 22px; | |||
color: rgba(255, 255, 255, 0.63); | |||
font-size: 14px; | |||
} | |||
.vendwiki-hot-search a { | |||
display: inline-block; | |||
margin: 3px 5px; | |||
color: rgba(255, 255, 255, 0.9); | |||
} | |||
.vendwiki-hot-search a:hover { | |||
color: var(--vend-primary); | |||
} | |||
/* 区域标题 */ | |||
.vendwiki-section-heading { | |||
display: flex; | |||
align-items: flex-end; | |||
justify-content: space-between; | |||
gap: 30px; | |||
margin: 75px 0 28px; | |||
} | |||
.vendwiki-section-heading h2 { | |||
margin: 0; | |||
border: 0; | |||
color: var(--vend-text); | |||
font-size: 31px; | |||
font-weight: 730; | |||
} | |||
.vendwiki-section-heading p { | |||
margin: 10px 0 0; | |||
color: var(--vend-muted); | |||
font-size: 15px; | |||
} | |||
.vendwiki-category-heading { | |||
margin-top: 90px; | |||
} | |||
.vendwiki-heading-link { | |||
padding-bottom: 5px; | |||
color: var(--vend-primary-dark); | |||
font-weight: 650; | |||
} | |||
/* 快捷入口 */ | |||
.vendwiki-quick-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 18px; | |||
} | |||
.vendwiki-quick-card { | |||
display: flex; | |||
align-items: flex-start; | |||
gap: 16px; | |||
min-height: 125px; | |||
padding: 25px 22px; | |||
border: 1px solid var(--vend-border); | |||
border-radius: 12px; | |||
background: #fff; | |||
box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04); | |||
transition: | |||
transform 0.2s ease, | |||
box-shadow 0.2s ease, | |||
border-color 0.2s ease; | |||
} | |||
.vendwiki-quick-card:hover { | |||
transform: translateY(-4px); | |||
border-color: rgba(242, 183, 5, 0.65); | |||
box-shadow: 0 15px 30px rgba(15, 23, 42, 0.09); | |||
} | |||
.vendwiki-card-icon { | |||
flex: 0 0 45px; | |||
width: 45px; | |||
height: 45px; | |||
border-radius: 10px; | |||
background: rgba(242, 183, 5, 0.14); | |||
text-align: center; | |||
font-size: 23px; | |||
line-height: 45px; | |||
} | |||
.vendwiki-quick-card h3 { | |||
margin: 0 0 8px; | |||
border: 0; | |||
font-size: 17px; | |||
font-weight: 700; | |||
} | |||
.vendwiki-quick-card p { | |||
margin: 0; | |||
color: var(--vend-muted); | |||
font-size: 13px; | |||
line-height: 1.65; | |||
} | |||
/* 分类区域 */ | |||
.vendwiki-category-section { | |||
display: grid; | |||
grid-template-columns: 250px minmax(0, 1fr); | |||
gap: 45px; | |||
padding: 48px 0; | |||
border-top: 1px solid var(--vend-border); | |||
} | |||
.vendwiki-category-title { | |||
display: flex; | |||
align-items: flex-start; | |||
gap: 15px; | |||
} | |||
.vendwiki-category-symbol { | |||
flex: 0 0 42px; | |||
height: 42px; | |||
border-radius: 8px; | |||
background: var(--vend-primary); | |||
color: #17202d; | |||
text-align: center; | |||
font-size: 13px; | |||
font-weight: 800; | |||
line-height: 42px; | |||
} | |||
.vendwiki-category-title h2 { | |||
margin: 1px 0 7px; | |||
border: 0; | |||
font-size: 22px; | |||
font-weight: 720; | |||
} | |||
.vendwiki-category-title p { | |||
margin: 0; | |||
color: var(--vend-muted); | |||
font-size: 13px; | |||
line-height: 1.6; | |||
} | |||
.vendwiki-article-grid { | |||
display: grid; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 18px; | |||
} | |||
.vendwiki-article-card { | |||
position: relative; | |||
min-height: 125px; | |||
padding: 24px; | |||
border: 1px solid var(--vend-border); | |||
border-radius: 10px; | |||
background: var(--vend-card); | |||
transition: | |||
border-color 0.2s ease, | |||
box-shadow 0.2s ease; | |||
} | |||
.vendwiki-article-card:hover { | |||
border-color: rgba(242, 183, 5, 0.75); | |||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07); | |||
} | |||
.vendwiki-article-card h3 { | |||
margin: 0 0 9px; | |||
border: 0; | |||
font-size: 17px; | |||
font-weight: 700; | |||
} | |||
.vendwiki-article-card p { | |||
margin: 0 0 14px; | |||
color: var(--vend-muted); | |||
font-size: 13px; | |||
line-height: 1.7; | |||
} | |||
.vendwiki-article-card span { | |||
color: var(--vend-primary-dark); | |||
font-size: 13px; | |||
font-weight: 650; | |||
} | |||
/* FAQ */ | |||
.vendwiki-faq-section { | |||
margin-top: 35px; | |||
padding: 1px 40px 40px; | |||
border-radius: 15px; | |||
background: var(--vend-background); | |||
} | |||
.vendwiki-faq-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 32px; | |||
} | |||
.vendwiki-faq-grid ul { | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
.vendwiki-faq-grid li { | |||
position: relative; | |||
padding: 14px 0 14px 22px; | |||
border-bottom: 1px solid var(--vend-border); | |||
font-size: 14px; | |||
} | |||
.vendwiki-faq-grid li::before { | |||
content: "›"; | |||
position: absolute; | |||
left: 2px; | |||
color: var(--vend-primary-dark); | |||
font-size: 21px; | |||
line-height: 17px; | |||
} | |||
/* 支持区域 */ | |||
.vendwiki-support { | |||
margin: 90px 0 80px; | |||
padding: 55px 45px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient( | |||
circle at 100% 0, | |||
rgba(242, 183, 5, 0.16), | |||
transparent 32% | |||
), | |||
var(--vend-dark); | |||
color: #fff; | |||
} | |||
.vendwiki-support-intro { | |||
max-width: 700px; | |||
margin-bottom: 35px; | |||
} | |||
.vendwiki-support-intro h2 { | |||
margin: 0; | |||
border: 0; | |||
color: #fff; | |||
font-size: 31px; | |||
} | |||
.vendwiki-support-intro p { | |||
color: rgba(255, 255, 255, 0.68); | |||
line-height: 1.8; | |||
} | |||
.vendwiki-support-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 18px; | |||
} | |||
.vendwiki-support-card { | |||
padding: 28px; | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
border-radius: 12px; | |||
background: rgba(255, 255, 255, 0.055); | |||
} | |||
.vendwiki-support-icon { | |||
margin-bottom: 18px; | |||
font-size: 27px; | |||
} | |||
.vendwiki-support-card h3 { | |||
margin: 0 0 10px; | |||
border: 0; | |||
color: #fff; | |||
font-size: 18px; | |||
} | |||
.vendwiki-support-card p { | |||
min-height: 48px; | |||
margin-bottom: 20px; | |||
color: rgba(255, 255, 255, 0.64); | |||
font-size: 13px; | |||
line-height: 1.7; | |||
} | |||
.vendwiki-button a { | |||
display: inline-block; | |||
padding: 10px 18px; | |||
border: 1px solid rgba(255, 255, 255, 0.28); | |||
border-radius: 7px; | |||
color: #fff; | |||
font-size: 13px; | |||
font-weight: 650; | |||
} | |||
.vendwiki-button-primary a { | |||
border-color: var(--vend-primary); | |||
background: var(--vend-primary); | |||
color: #17202d; | |||
} | |||
/* 隐藏首页默认标题 */ | |||
body.page-Main_Page .mw-first-heading, | |||
body.page-主页 .mw-first-heading { | |||
display: none; | |||
} | |||
body.page-Main_Page #contentSub, | |||
body.page-主页 #contentSub { | |||
display: none; | |||
} | |||
/* 平板 */ | |||
@media (max-width: 1000px) { | |||
.vendwiki-quick-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.vendwiki-category-section { | |||
grid-template-columns: 1fr; | |||
gap: 25px; | |||
} | |||
.vendwiki-support-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.vendwiki-support-card p { | |||
min-height: auto; | |||
} | |||
} | |||
/* 手机 */ | |||
@media (max-width: 650px) { | |||
.vendwiki-container { | |||
width: min(100% - 28px, 1180px); | |||
} | |||
.vendwiki-hero { | |||
min-height: 410px; | |||
padding: 55px 14px; | |||
} | |||
.vendwiki-hero h1 { | |||
font-size: 34px; | |||
} | |||
.vendwiki-hero-description { | |||
font-size: 15px; | |||
} | |||
.vendwiki-search { | |||
height: auto; | |||
padding: 7px; | |||
} | |||
.vendwiki-search-icon { | |||
display: none; | |||
} | |||
.vendwiki-search input { | |||
height: 50px; | |||
padding-left: 12px; | |||
font-size: 14px; | |||
} | |||
.vendwiki-search button { | |||
height: 48px; | |||
padding: 0 17px; | |||
} | |||
.vendwiki-quick-grid, | |||
.vendwiki-article-grid, | |||
.vendwiki-faq-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.vendwiki-section-heading { | |||
align-items: flex-start; | |||
flex-direction: column; | |||
margin-top: 55px; | |||
} | |||
.vendwiki-section-heading h2 { | |||
font-size: 26px; | |||
} | |||
.vendwiki-category-section { | |||
padding: 35px 0; | |||
} | |||
.vendwiki-faq-section { | |||
padding: 1px 22px 28px; | |||
} | |||
.vendwiki-support { | |||
margin-top: 55px; | |||
padding: 38px 24px; | |||
} | |||
} | } | ||