MediaWiki:Common.css:修订间差异
无编辑摘要 |
无编辑摘要 标签:已被回退 |
||
| 第154行: | 第154行: | ||
border-left: 3px solid #d0d7de !important; | border-left: 3px solid #d0d7de !important; | ||
background: #ffffff !important; | background: #ffffff !important; | ||
} | |||
/* Noblecraft homepage V2. Add to MediaWiki:Common.css */ | |||
.nc-home-v2 { | |||
max-width: 1180px; | |||
margin: 0 auto; | |||
} | |||
.nc-home-v2 a { | |||
text-decoration: none; | |||
} | |||
.nc-hero-v2 { | |||
display: grid; | |||
grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); | |||
gap: 28px; | |||
align-items: center; | |||
margin: 8px 0 22px; | |||
padding: 30px 34px; | |||
background: rgba(255,255,255,.62); | |||
border: 1px solid rgba(255,255,255,.82); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -28px rgba(40,48,62,.55); | |||
backdrop-filter: blur(20px) saturate(135%); | |||
-webkit-backdrop-filter: blur(20px) saturate(135%); | |||
} | |||
.nc-kicker { | |||
color: #0f4c5c; | |||
font-size: .86rem; | |||
font-weight: 800; | |||
letter-spacing: 0; | |||
text-transform: uppercase; | |||
margin-bottom: 8px; | |||
} | |||
.nc-title { | |||
color: #24282f; | |||
font-size: 2.25rem; | |||
font-weight: 850; | |||
line-height: 1.12; | |||
margin: 0 0 10px; | |||
} | |||
.nc-subtitle { | |||
color: #4f5663; | |||
font-size: 1.04rem; | |||
line-height: 1.7; | |||
max-width: 680px; | |||
} | |||
.nc-hero-actions { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
margin-top: 18px; | |||
} | |||
.nc-action { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-height: 38px; | |||
padding: 0 16px; | |||
border: 1px solid #cbd3d8; | |||
background: rgba(255,255,255,.72); | |||
color: #27313b; | |||
font-weight: 700; | |||
box-shadow: 0 8px 20px -16px rgba(20,30,45,.55); | |||
transition: transform .15s ease, background .15s ease, border-color .15s ease; | |||
} | |||
.nc-action:hover { | |||
transform: translateY(-1px); | |||
background: #fff; | |||
border-color: #8fa6ad; | |||
} | |||
.nc-action-primary { | |||
background: #0f4c5c; | |||
border-color: #0f4c5c; | |||
color: #fff; | |||
} | |||
.nc-action-primary:hover { | |||
background: #123f4c; | |||
border-color: #123f4c; | |||
} | |||
.nc-hero-art { | |||
text-align: center; | |||
} | |||
.nc-hero-art img { | |||
max-width: 100%; | |||
height: auto; | |||
filter: drop-shadow(0 18px 24px rgba(40,48,62,.20)); | |||
} | |||
.nc-status-row { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 12px; | |||
margin: 0 0 22px; | |||
} | |||
.nc-status-item { | |||
padding: 12px 14px; | |||
background: rgba(255,255,255,.55); | |||
border: 1px solid rgba(210,216,222,.9); | |||
color: #3f4650; | |||
font-weight: 650; | |||
text-align: center; | |||
} | |||
.nc-section-title { | |||
margin: 24px 0 12px; | |||
color: #24282f; | |||
font-size: 1.18rem; | |||
font-weight: 850; | |||
} | |||
.nc-steps { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 14px; | |||
} | |||
.nc-step { | |||
display: flex; | |||
gap: 12px; | |||
align-items: flex-start; | |||
padding: 16px; | |||
background: rgba(255,255,255,.60); | |||
border: 1px solid rgba(210,216,222,.9); | |||
box-shadow: 0 12px 26px -22px rgba(40,48,62,.55); | |||
} | |||
.nc-step-num { | |||
flex: 0 0 32px; | |||
width: 32px; | |||
height: 32px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: #0f4c5c; | |||
color: #fff; | |||
font-weight: 850; | |||
} | |||
.nc-step-body { | |||
font-weight: 800; | |||
color: #263039; | |||
} | |||
.nc-step-body span { | |||
display: block; | |||
margin-top: 5px; | |||
color: #69717d; | |||
font-size: .92rem; | |||
font-weight: 500; | |||
line-height: 1.55; | |||
} | |||
.nc-portal-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 16px; | |||
} | |||
.nc-portal-card { | |||
background: rgba(255,255,255,.58); | |||
border: 1px solid rgba(255,255,255,.82); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 32px -24px rgba(40,48,62,.55); | |||
overflow: hidden; | |||
} | |||
.nc-portal-head { | |||
padding: 13px 16px; | |||
color: #fff; | |||
font-size: 1.02rem; | |||
font-weight: 850; | |||
} | |||
.nc-tone-lobby .nc-portal-head { background: #b86f2a; } | |||
.nc-tone-play .nc-portal-head { background: #315f9f; } | |||
.nc-tone-community .nc-portal-head { background: #7c4d9f; } | |||
.nc-tone-apply .nc-portal-head { background: #a7435d; } | |||
.nc-portal-desc { | |||
padding: 13px 16px 6px; | |||
color: #69717d; | |||
font-size: .92rem; | |||
line-height: 1.55; | |||
} | |||
.nc-portal-card ul { | |||
list-style: none !important; | |||
margin: 0 !important; | |||
padding: 5px 0 10px !important; | |||
} | |||
.nc-portal-card li { | |||
margin: 0 !important; | |||
} | |||
.nc-portal-card li a { | |||
display: block; | |||
padding: 7px 16px; | |||
color: #333942; | |||
font-weight: 620; | |||
transition: background .15s ease, padding-left .15s ease; | |||
} | |||
.nc-portal-card li a:hover { | |||
background: rgba(95,112,130,.12); | |||
padding-left: 20px; | |||
} | |||
.nc-feature-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 14px; | |||
} | |||
.nc-feature { | |||
padding: 16px; | |||
background: rgba(255,255,255,.58); | |||
border: 1px solid rgba(210,216,222,.9); | |||
box-shadow: 0 12px 28px -24px rgba(40,48,62,.55); | |||
font-weight: 850; | |||
color: #263039; | |||
} | |||
.nc-feature-label { | |||
display: inline-block; | |||
margin-bottom: 8px; | |||
padding: 3px 8px; | |||
background: #edf3f5; | |||
color: #0f4c5c; | |||
font-size: .78rem; | |||
font-weight: 850; | |||
} | |||
.nc-feature span { | |||
display: block; | |||
margin-top: 8px; | |||
color: #69717d; | |||
font-size: .92rem; | |||
font-weight: 500; | |||
line-height: 1.55; | |||
} | |||
.nc-footer-note { | |||
margin: 24px 0 8px; | |||
padding: 14px 18px; | |||
background: rgba(255,255,255,.50); | |||
border: 1px solid rgba(210,216,222,.85); | |||
color: #b86f2a; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
@media (max-width: 980px) { | |||
.nc-portal-grid, | |||
.nc-feature-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
} | |||
@media (max-width: 760px) { | |||
.nc-hero-v2 { | |||
grid-template-columns: 1fr; | |||
padding: 22px 18px; | |||
} | |||
.nc-hero-art { | |||
order: -1; | |||
} | |||
.nc-hero-art img { | |||
max-width: 190px; | |||
} | |||
.nc-title { | |||
font-size: 1.85rem; | |||
} | |||
.nc-status-row, | |||
.nc-steps, | |||
.nc-portal-grid, | |||
.nc-feature-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.nc-status-item { | |||
text-align: left; | |||
} | |||
} | } | ||