MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ============================================ */
/* Noblecraft Wiki · Common.css */
/* ============================================ */
/* —— Noblecraft 格式面板美化（编辑器下拉菜单）—— */
.wikiEditor-ui-toolbar .booklet .index div {
border-radius: 4px 4px 0 0;
font-weight: bold;
}
.wikiEditor-ui-toolbar .booklet .index .current {
background: #0f4c5c !important;
color: #fff !important;
}
.wikiEditor-ui-toolbar .booklet .pages .page-characters span {
display: inline-block;
margin: 4px;
padding: 4px 12px !important;
border: 1px solid #c8c2b4;
border-radius: 4px;
background: #faf7f2;
cursor: pointer;
font-size: 13px;
transition: all .15s;
width: auto !important;
}
.wikiEditor-ui-toolbar .booklet .pages .page-characters span:hover {
background: #0f4c5c;
color: #fff;
border-color: #0f4c5c;
}
.wikiEditor-ui-toolbar .booklet .pages span.nc-红 { color:#c0392b; border-color:#e8b5ad; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-绿 { color:#27866b; border-color:#a9d6c8; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-蓝 { color:#2c6fb3; border-color:#aecbe8; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-橙 { color:#d35400; border-color:#f0c2a0; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-高亮 { color:#b8860b; border-color:#e8d9a0; }
/* —— 全站页面背景 —— */
body {
background:
radial-gradient(circle at 18% 15%, #ffffff 0%, transparent 45%),
radial-gradient(circle at 85% 12%, #f0f1f4 0%, transparent 45%),
radial-gradient(circle at 75% 92%, #eceef1 0%, transparent 48%),
linear-gradient(150deg,#f5f6f8,#eaecf0) !important;
background-attachment:fixed !important;
}
/* ============================================ */
/* 首页 · 素玻璃（白 + 灰） */
/* ============================================ */
.nc-stage {
margin:14px 0 0;
padding:0;
background:transparent;
}
.nc-cards { display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; position:relative; z-index:1; }
.nc-card {
flex:1; min-width:215px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(22px) saturate(140%);
-webkit-backdrop-filter:blur(22px) saturate(140%);
border:1px solid rgba(255,255,255,.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.8),
0 10px 30px -14px rgba(60,65,80,.40);
transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
display:flex; flex-direction:column;
}
.nc-card:hover {
transform:translateY(-4px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 18px 40px -16px rgba(60,65,80,.50);
}
.nc-card ul { list-style:none !important; margin:0 !important; padding:7px 0 !important; }
.nc-card li { margin:0 !important; }
.nc-card li a {
display:block; padding:9px 18px; color:#3a3d42; text-decoration:none;
transition:all .15s ease; font-size:.97em;
}
.nc-card li a:hover { background:rgba(120,130,150,.14); padding-left:24px; }
/* 标题条：多色斜向渐变 + 悬停流动 */
.nc-card-head {
color:#fff; font-weight:700; font-size:1.06em; padding:15px 18px;
letter-spacing:.5px;
border:none; border-radius:0;
background-size:220% 220% !important;
background-position:0% 50%;
transition:background-position .8s ease, filter .4s ease;
}
.nc-card-head.nc-c-lobby { background-image:linear-gradient(135deg,#f0b94a,#e89038,#d9772e) !important; }
.nc-card-head.nc-c-play { background-image:linear-gradient(135deg,#4a6fd4,#5ec5d4,#6a4ed4) !important; }
.nc-card-head.nc-c-comm { background-image:linear-gradient(135deg,#7d4ed4,#c44ec4,#4a6fd4) !important; }
.nc-card-head.nc-c-apply { background-image:linear-gradient(135deg,#d44a5e,#e0723a,#c44e8a) !important; }
.nc-card:hover .nc-card-head {
background-position:100% 50% !important;
filter:brightness(1.12) saturate(1.15);
}
/* ===== CommentStreams 评论区美化 ===== */
/* 标题：弱化成小号次要文字（压住可能的 h 标签样式） */
.cs-comment-title,
.cs-comment-title * {
font-size: 0.92em !important;
font-weight: 600 !important;
color: #666 !important;
margin: 0 0 2px 0 !important;
line-height: 1.4 !important;
}
/* 头部：去掉背景，标题作者贴紧 */
.cs-comment-header {
background: transparent !important;
padding: 0 !important;
}
/* 正文：主体，正常黑字 */
.cs-comment-body {
font-size: 1em !important;
color: #202122 !important;
margin: 4px 0 8px 0 !important;
padding: 0 !important;
line-height: 1.65 !important;
}
/* 整条评论：浅灰圆角框 */
.cs-comment {
background: #fafbfc !important;
border: 1px solid #e3e6e8 !important;
border-radius: 6px !important;
padding: 10px 14px !important;
margin: 8px 0 !important;
}
/* 作者与时间：小灰字 */
.cs-comment-details,
.cs-comment-author,
.cs-comment-author-anonymous {
font-size: 0.82em !important;
color: #888 !important;
}
/* 回复（子评论）：缩进 + 左侧竖线表示层级 */
.cs-reply-comment {
margin-left: 28px !important;
border-left: 3px solid #d0d7de !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;
}
}